/* ==========================================================================
   Mašinac — stilovi teme
   ========================================================================== */

:root {
    --tamna: #16181d;
    --tamna-2: #0e0f12;
    --tamna-3: #23262d;
    --plava: #d21f3c;
    --plava-tamna: #a3152b;
    --plava-svetla: #fbe9ec;
    --papir: #f5f3ee;
    --belo: #ffffff;
    --tekst: #131a26;
    --tekst-blag: #5a6475;
    --linija: #e4e1d9;
    --linija-tamna: rgba(255, 255, 255, 0.12);

    --zlato: #c99a1c;
    --srebro: #9aa4b1;
    --bronza: #b5713b;
    --peto: #66768c;

    --uspeh: #1f8a4c;
    --greska: #c0392b;

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-naslov: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

    --sirina: 1240px;
    --sirina-srednja: 1040px;
    --sirina-uska: 760px;
    --razmak: clamp(16px, 4vw, 32px);
    --sekcija: clamp(56px, 8vw, 104px);
    --r: 6px;
    --senka: 0 1px 2px rgba(22, 24, 29, 0.06), 0 8px 24px rgba(22, 24, 29, 0.08);
    --tatami: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* --- Osnova --------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--tekst);
    background: var(--belo);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--plava);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--plava-tamna);
}

:focus-visible {
    outline: 3px solid var(--plava);
    outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-naslov);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tamna);
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
}

.ikona {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.2em;
}

.kontejner {
    width: 100%;
    max-width: var(--sirina);
    margin: 0 auto;
    padding: 0 var(--razmak);
}

.kontejner--srednje {
    max-width: calc(var(--sirina-srednja) + 2 * var(--razmak));
}

.kontejner--usko {
    max-width: calc(var(--sirina-uska) + 2 * var(--razmak));
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.preskoci {
    position: absolute;
    left: -9999px;
    z-index: 200;
}

.preskoci:focus {
    left: 16px;
    top: 16px;
    padding: 10px 18px;
    background: var(--belo);
    color: var(--tamna);
}

.nadnaslov {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--plava);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nadnaslov::before {
    content: '';
    width: 28px;
    height: 2px;
    background: currentColor;
}

.nadnaslov--svetao {
    color: #f0c75e;
}

.uvod {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--tekst);
}

/* --- Dugmad i linkovi ----------------------------------------------------- */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border: 2px solid var(--plava);
    border-radius: 4px;
    background: var(--plava);
    color: var(--belo);
    font: 700 1rem/1 var(--font-naslov);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.dugme:hover {
    background: var(--plava-tamna);
    border-color: var(--plava-tamna);
    color: var(--belo);
}

.dugme:hover .ikona {
    transform: translateX(2px);
}

.dugme .ikona {
    transition: transform 0.2s;
}

.dugme--veliko {
    padding: 17px 28px;
    font-size: 1.1rem;
}

.dugme--malo {
    padding: 9px 14px;
    font-size: 0.9rem;
}

.dugme--puno {
    width: 100%;
}

.dugme--providno {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
}

.dugme--providno:hover {
    background: var(--belo);
    border-color: var(--belo);
    color: var(--tamna);
}

.dugme--obrub {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--belo);
}

.dugme--obrub:hover {
    background: var(--belo);
    border-color: var(--belo);
    color: var(--tamna);
}

.dugme--belo {
    background: var(--belo);
    border-color: var(--belo);
    color: var(--tamna);
}

.dugme--belo:hover {
    background: var(--papir);
    border-color: var(--papir);
    color: var(--tamna);
}

.link-strelica {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 1rem var(--font-naslov);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--plava);
}

.link-strelica:hover .ikona {
    transform: translateX(3px);
}

.link-strelica .ikona {
    transition: transform 0.2s;
}

.sekcija--tamna .link-strelica,
.poziv .link-strelica {
    color: #f0c75e;
}

/* --- Zaglavlje ------------------------------------------------------------ */

.zaglavlje {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--tamna);
    color: var(--belo);
    border-bottom: 1px solid var(--linija-tamna);
}

.admin-bar .zaglavlje {
    top: 32px;
}

.zaglavlje__red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.brend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--belo);
    text-decoration: none;
    flex-shrink: 0;
}

.brend:hover {
    color: var(--belo);
}

.brend__grb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--belo);
    padding: 2px;
}

.brend__tekst {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brend__ime {
    font: 800 1.6rem var(--font-naslov);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.brend__mesto {
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.glavni-meni {
    display: flex;
    align-items: center;
    gap: 16px;
}

.glavni-meni > ul {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.glavni-meni li {
    position: relative;
}

.glavni-meni a {
    display: block;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.glavni-meni > ul > li > a:hover,
.glavni-meni .current-menu-item > a,
.glavni-meni .current-menu-ancestor > a,
.glavni-meni .current_page_parent > a {
    color: var(--belo);
}

.glavni-meni > ul > .current-menu-item > a,
.glavni-meni > ul > .current-menu-ancestor > a,
.glavni-meni > ul > .current_page_parent > a {
    box-shadow: inset 0 -2px 0 var(--plava);
    border-radius: 0;
}

.glavni-meni .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

.glavni-meni .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--belo);
    border-radius: var(--r);
    box-shadow: 0 16px 40px rgba(22, 24, 29, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.glavni-meni li:hover > .sub-menu,
.glavni-meni li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.glavni-meni .sub-menu a {
    color: var(--tekst);
}

.glavni-meni .sub-menu a:hover,
.glavni-meni .sub-menu .current-menu-item > a {
    background: var(--papir);
    color: var(--plava);
}

.glavni-meni__portal .ikona {
    width: 1em;
    height: 1em;
}

.meni-dugme {
    display: none;
    width: 46px;
    height: 46px;
    margin-right: -10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.meni-dugme__linije,
.meni-dugme__linije::before,
.meni-dugme__linije::after {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: var(--belo);
    transition: transform 0.2s, background 0.2s;
}

.meni-dugme__linije::before,
.meni-dugme__linije::after {
    content: '';
    position: absolute;
}

.meni-dugme__linije::before { top: -7px; }
.meni-dugme__linije::after { top: 7px; }

.meni-otvoren .meni-dugme__linije { background: transparent; }
.meni-otvoren .meni-dugme__linije::before { transform: translateY(7px) rotate(45deg); }
.meni-otvoren .meni-dugme__linije::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
    .meni-dugme {
        display: block;
    }

    .glavni-meni {
        position: fixed;
        inset: 76px 0 0;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 16px var(--razmak) 32px;
        background: var(--tamna);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s, visibility 0.2s;
    }

    .admin-bar .glavni-meni {
        top: 122px;
    }

    .meni-otvoren {
        overflow: hidden;
    }

    .meni-otvoren .glavni-meni {
        visibility: visible;
        opacity: 1;
    }

    .glavni-meni > ul {
        flex-direction: column;
    }

    .glavni-meni a {
        padding: 14px 0;
        font: 700 1.5rem var(--font-naslov);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--linija-tamna);
        border-radius: 0;
    }

    .glavni-meni > ul > .current-menu-item > a,
    .glavni-meni > ul > .current-menu-ancestor > a,
    .glavni-meni > ul > .current_page_parent > a {
        box-shadow: none;
        color: #f0c75e;
    }

    .glavni-meni .menu-item-has-children > a::after {
        display: none;
    }

    .glavni-meni .sub-menu {
        position: static;
        min-width: 0;
        padding: 4px 0 8px 16px;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .glavni-meni .sub-menu a {
        padding: 10px 0;
        color: rgba(255, 255, 255, 0.75);
        font: 500 1rem var(--font);
        text-transform: none;
        border: 0;
    }

    .glavni-meni .sub-menu a:hover,
    .glavni-meni .sub-menu .current-menu-item > a {
        background: transparent;
        color: var(--belo);
    }

    .glavni-meni__portal {
        align-self: flex-start;
    }
}

@media (max-width: 782px) {
    .admin-bar .zaglavlje {
        top: 0;
    }
}

/* --- Naslov stranice ------------------------------------------------------ */

.naslov-strane {
    padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
    background-color: var(--tamna);
    background-image: var(--tatami);
    background-size: 120px 60px;
    color: var(--belo);
}

.naslov-strane .nadnaslov {
    color: #f0c75e;
}

.naslov-strane__naslov {
    margin: 0;
    color: var(--belo);
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
}

.naslov-strane__opis {
    max-width: 640px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.15rem;
}

.naslov-strane + .kontejner,
.naslov-strane + .kontakt {
    padding-top: clamp(32px, 5vw, 56px);
}

.strana {
    padding-bottom: var(--sekcija);
}

/* --- Sekcije -------------------------------------------------------------- */

.sekcija {
    padding: var(--sekcija) 0;
}

.sekcija--svetla {
    background: var(--papir);
}

.sekcija--tamna {
    background-color: var(--tamna);
    background-image: var(--tatami);
    background-size: 120px 60px;
    color: rgba(255, 255, 255, 0.85);
}

.sekcija--tamna .sekcija__naslov {
    color: var(--belo);
}

.sekcija__zaglavlje {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.sekcija__naslov {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
}

.naslov-sekcije {
    margin: 0 0 20px;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- Hero (naslovna): klub na prvom ekranu ------------------------------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(640px, min(calc(100vh - 76px), 920px));
    background: var(--tamna-2);
    color: var(--belo);
    overflow: hidden;
    isolation: isolate;
}

/* Duoton: fotografija u sivim tonovima ispod plavog preliva */
.hero__slika {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: grayscale(1) contrast(1.15) brightness(0.9);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(0deg, rgba(14, 15, 18, 0.95) 0%, rgba(14, 15, 18, 0) 40%),
        linear-gradient(110deg, rgba(14, 15, 18, 0.97) 0%, rgba(22, 24, 29, 0.88) 40%, rgba(210, 31, 60, 0.55) 100%);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--tatami);
    background-size: 120px 60px;
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}

.hero__kanji {
    position: absolute;
    top: 6%;
    right: clamp(8px, 3vw, 48px);
    z-index: -1;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
    font-size: clamp(7rem, 20vw, 18rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    writing-mode: vertical-rl;
    user-select: none;
}

.hero__mreza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
    padding-top: clamp(64px, 10vw, 128px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

.hero__naslov {
    margin: 0 0 24px;
    color: var(--belo);
    font-weight: 800;
    line-height: 0.82;
    text-transform: uppercase;
}

.hero__naslov-mali {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(1.3rem, 2.6vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.22em;
}

.hero__naslov-veliki {
    display: block;
    font-size: clamp(4.6rem, 15.5vw, 13rem);
    letter-spacing: -0.015em;
    background: linear-gradient(180deg, #ffffff 35%, #f0c75e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__tekst {
    max-width: 560px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.hero__dugmad {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__kartice {
    display: grid;
    gap: 14px;
}

.zivo {
    display: grid;
    gap: 6px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--belo);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.zivo:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--belo);
    transform: translateY(-2px);
}

.zivo__oznaka {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f0c75e;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.zivo__oznaka .ikona {
    width: 1.1em;
    height: 1.1em;
}

.zivo__tacka {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0c75e;
}

.zivo.je-uzivo .zivo__tacka {
    background: #2ecc71;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
    animation: puls 1.8s infinite;
}

.zivo.je-uzivo .zivo__oznaka {
    color: #7fe0a6;
}

@keyframes puls {
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.zivo__vrednost {
    font: 800 2.5rem/1 var(--font-naslov);
    text-transform: uppercase;
}

.zivo__vrednost small {
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.zivo__opis {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
}

.hero__brojke {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(14, 15, 18, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hero__brojke-mreza {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}

.hero__brojke .brojka {
    padding: 22px clamp(12px, 2vw, 28px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hero__brojke .brojka:first-child {
    border-left: 0;
    padding-left: 0;
}

.hero__brojke .brojka__broj {
    color: var(--belo);
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

.hero__brojke .brojka__opis {
    color: rgba(255, 255, 255, 0.6);
}

/* Traka pojaseva: potpis sajta (bela → crna) */
:root {
    --pojasevi: linear-gradient(90deg, #f6f5f0 0 14.28%, #f2c418 0 28.57%, #ef7d1a 0 42.85%, #2f9e44 0 57.14%, #1d5fe6 0 71.42%, #7a4a26 0 85.71%, #111 0 100%);
}

.pojas-traka {
    height: 8px;
    background: var(--pojasevi);
}

.naslov-strane {
    position: relative;
}

.naslov-strane::after,
.podnozje::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--pojasevi);
}

.naslov-strane::after {
    bottom: 0;
}

.podnozje {
    position: relative;
}

.podnozje::before {
    top: 0;
}

@media (max-width: 960px) {
    .hero__mreza {
        grid-template-columns: 1fr;
    }

    .hero__kartice {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 640px) {
    .hero__brojke-mreza {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__brojke .brojka:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .hero__brojke .brojka:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .zivo__vrednost {
        font-size: 2rem;
    }
}

/* --- Klupska rang lista (JSS) -------------------------------------------- */

.rang-blok {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.rang-blok__uvod > p:not(.nadnaslov) {
    margin: 20px 0 0;
    color: var(--tekst-blag);
}

.rang-blok__nas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 28px 0;
    padding: 20px 24px;
    border-radius: var(--r);
    background: var(--tamna);
    background-image: var(--tatami);
    background-size: 60px 30px;
    color: var(--belo);
}

.rang-blok__mesto {
    font: 800 3.4rem/1 var(--font-naslov);
}

.rang-blok__podaci strong {
    display: block;
    font: 700 1.35rem var(--font-naslov);
    letter-spacing: 0.02em;
}

.rang-blok__podaci span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
}

.rang-blok__medalje {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.rang-blok__linkovi {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 960px) {
    .rang-blok {
        grid-template-columns: 1fr;
    }
}

.jss-rang {
    background: var(--belo);
    border: 1px solid var(--linija);
    border-radius: var(--r);
    overflow: hidden;
}

.jss-rang__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.jss-rang__tabela th {
    padding: 12px 14px;
    background: var(--papir);
    color: var(--tekst-blag);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
}

.jss-rang__tabela td {
    padding: 10px 14px;
    border-top: 1px solid var(--linija);
}

.jss-rang__mesto {
    width: 48px;
    color: var(--tekst-blag);
    font: 700 1.15rem var(--font-naslov);
    text-align: center;
}

.jss-rang__klub {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jss-rang__klub img,
.jss-rang__bez-loga {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
    background: var(--papir);
}

.jss-rang__klub strong {
    display: block;
    color: var(--tamna);
    font-weight: 600;
    line-height: 1.2;
}

.jss-rang__klub small {
    color: var(--tekst-blag);
    font-size: 0.8rem;
}

.jss-rang__tabela .jss-rang__medalje {
    width: 48px;
    text-align: center;
    font: 700 1.05rem var(--font-naslov);
}

.jss-rang__tabela .jss-rang__bodovi {
    width: 80px;
    text-align: right;
}

.jss-rang__tabela td.jss-rang__bodovi {
    color: var(--tamna);
    font: 800 1.15rem var(--font-naslov);
}

.jss-rang__tabela tr.je-nas td {
    background: var(--plava-svetla);
}

.jss-rang__tabela tr.je-nas td:first-child {
    box-shadow: inset 4px 0 0 var(--plava);
    color: var(--plava);
}

.jss-rang__tabela tr.je-nas strong {
    color: var(--plava);
}

.jss-rang__razmak td {
    padding: 2px;
    color: var(--tekst-blag);
    letter-spacing: 0.4em;
    text-align: center;
}

.jss-rang__izvor {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--linija);
    color: var(--tekst-blag);
    font-size: 0.8rem;
}

@media (max-width: 560px) {
    .jss-rang__tabela .jss-rang__medalje {
        display: none;
    }
}

/* --- Džudo portali -------------------------------------------------------- */

.portali__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-kartica {
    position: relative;
    display: grid;
    gap: 6px;
    height: 100%;
    padding: 22px 48px 22px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.03);
    color: var(--belo);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.portal-kartica:hover {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--belo);
}

.portal-kartica__domen {
    color: #f0c75e;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portal-kartica:hover .portal-kartica__domen {
    color: rgba(255, 255, 255, 0.85);
}

.portal-kartica__naziv {
    font: 700 1.45rem var(--font-naslov);
    text-transform: uppercase;
    line-height: 1.1;
}

.portal-kartica__opis {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
}

.portal-kartica__strelica {
    position: absolute;
    top: 22px;
    right: 20px;
    transition: transform 0.2s;
}

.portal-kartica:hover .portal-kartica__strelica {
    transform: translate(3px, -3px) rotate(-45deg);
}

/* --- Podaci o klubu (podnožje, kontakt) ---------------------------------- */

.podaci-kluba {
    display: grid;
    gap: 6px;
    margin: 18px 0 0;
    font-size: 0.88rem;
}

.podaci-kluba div {
    display: flex;
    gap: 8px;
}

.podaci-kluba dt {
    min-width: 92px;
    color: rgba(255, 255, 255, 0.5);
}

.podaci-kluba dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

.kontakt .podaci-kluba dt {
    color: var(--tekst-blag);
}

.kontakt .podaci-kluba dd {
    color: var(--tamna);
    font-weight: 600;
}
/* --- Brojke --------------------------------------------------------------- */

.brojke {
    position: relative;
    z-index: 2;
    margin-top: -64px;
}

.brojke .kontejner {
    max-width: var(--sirina);
}

.brojke__mreza {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    background: var(--belo);
    border-radius: var(--r);
    box-shadow: var(--senka);
    overflow: hidden;
}

.brojka {
    display: flex;
    flex-direction: column-reverse;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 36px);
    border-left: 1px solid var(--linija);
}

.brojka:first-child {
    border-left: 0;
}

.brojka__broj {
    margin: 0;
    font: 800 clamp(2.4rem, 5vw, 3.8rem)/1 var(--font-naslov);
    color: var(--tamna);
    font-variant-numeric: tabular-nums;
}

.brojka__opis {
    margin-top: 6px;
    color: var(--tekst-blag);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.brojke__mreza--svetle {
    background: transparent;
    box-shadow: none;
}

.brojke__mreza--svetle .brojka {
    border-color: var(--linija-tamna);
}

.brojke__mreza--svetle .brojka__broj {
    color: var(--belo);
}

.brojke__mreza--svetle .brojka__opis {
    color: rgba(255, 255, 255, 0.6);
}

.brojke__medalje {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--tekst-blag);
    font-size: 0.9rem;
    font-weight: 500;
}

.brojke__medalje li {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 760px) {
    .brojke__mreza {
        grid-template-columns: repeat(2, 1fr);
    }

    .brojka:nth-child(3) {
        border-left: 0;
    }

    .brojka:nth-child(n + 3) {
        border-top: 1px solid var(--linija);
    }

    .brojke__mreza--svetle .brojka:nth-child(n + 3) {
        border-top-color: var(--linija-tamna);
    }
}

/* --- Vesti: kartice ------------------------------------------------------- */

.vest-kartica {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vest-kartica__slika-link {
    display: block;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--papir);
}

.vest-kartica__slika {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vest-kartica:hover .vest-kartica__slika {
    transform: scale(1.04);
}

.vest-kartica__slika--prazna {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tamna);
    background-image: var(--tatami);
    background-size: 60px 30px;
}

.vest-kartica__slika--prazna img {
    width: 80px;
    border-radius: 50%;
    background: var(--belo);
    opacity: 0.9;
}

.vest-kartica__telo {
    padding-top: 16px;
}

.vest-kartica__meta,
.clanak__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 8px;
    color: var(--tekst-blag);
    font-size: 0.85rem;
}

.oznaka {
    position: relative;
    z-index: 1;
    color: var(--plava);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.oznaka:hover {
    text-decoration: underline;
}

.vest-kartica__naslov {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}

.vest-kartica__naslov a {
    color: var(--tamna);
    text-decoration: none;
}

.vest-kartica__naslov a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.vest-kartica:hover .vest-kartica__naslov a {
    color: var(--plava);
}

.vest-kartica__izvod {
    margin: 12px 0 0;
    color: var(--tekst-blag);
}

.vest-kartica--velika .vest-kartica__naslov {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    line-height: 1.05;
}

/* Naslovna: 1 velika + 3 male */
.vesti-izdvojeno {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 28px 48px;
}

.vesti-izdvojeno .vest-kartica--velika {
    grid-row: 1 / span 3;
}

.vesti-izdvojeno .vest-kartica:not(.vest-kartica--velika) {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 20px;
    align-items: start;
}

.vesti-izdvojeno .vest-kartica:not(.vest-kartica--velika) .vest-kartica__telo {
    padding-top: 0;
}

.vesti-izdvojeno .vest-kartica:not(.vest-kartica--velika) .vest-kartica__naslov {
    font-size: 1.25rem;
}

@media (max-width: 900px) {
    .vesti-izdvojeno {
        grid-template-columns: 1fr;
    }

    .vesti-izdvojeno .vest-kartica--velika {
        grid-row: auto;
    }
}

/* Lista vesti */
.vesti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 44px 32px;
    padding-bottom: 24px;
}

.vesti--tri {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.vesti--male {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 32px 24px;
}

.vesti--male .vest-kartica__naslov {
    font-size: 1.2rem;
}

.vesti--sa-izdvojenom .vest-kartica--velika {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--linija);
}

.vesti--sa-izdvojenom .vest-kartica--velika .vest-kartica__telo {
    padding: 0;
}

@media (max-width: 800px) {
    .vesti--sa-izdvojenom .vest-kartica--velika {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vesti--sa-izdvojenom .vest-kartica--velika .vest-kartica__telo {
        padding-top: 16px;
    }
}

/* Filteri kategorija */
.filteri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 44px;
}

.filteri__stavka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--linija);
    border-radius: 999px;
    color: var(--tekst);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.filteri__stavka span {
    color: var(--tekst-blag);
    font-size: 0.8rem;
}

.filteri__stavka:hover {
    border-color: var(--tamna);
    color: var(--tamna);
}

.filteri__stavka.je-aktivan {
    background: var(--tamna);
    border-color: var(--tamna);
    color: var(--belo);
}

.filteri__stavka.je-aktivan span {
    color: rgba(255, 255, 255, 0.6);
}

.filteri__pretraga {
    display: flex;
    margin-left: auto;
    border: 1px solid var(--linija);
    border-radius: 999px;
    overflow: hidden;
}

.filteri__pretraga input {
    width: 200px;
    padding: 9px 4px 9px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
}

.filteri__pretraga input:focus {
    outline: 0;
}

.filteri__pretraga:focus-within {
    border-color: var(--plava);
}

.filteri__pretraga button {
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--tekst-blag);
    cursor: pointer;
}

.filteri__pretraga--veliko {
    max-width: 440px;
    margin: 28px 0;
}

.filteri__pretraga--veliko input {
    width: 100%;
    padding: 14px 4px 14px 20px;
    font-size: 1rem;
}

@media (max-width: 760px) {
    .filteri {
        flex-wrap: nowrap;
        margin-right: calc(-1 * var(--razmak));
        padding-right: var(--razmak);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filteri::-webkit-scrollbar {
        display: none;
    }

    .filteri__pretraga {
        order: -1;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .filteri__pretraga input {
        width: 150px;
    }
}

/* Paginacija */
.pagination {
    padding: 32px 0 var(--sekcija);
}

.nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--linija);
    border-radius: 4px;
    color: var(--tamna);
    font: 700 1.05rem var(--font-naslov);
    text-decoration: none;
}

.page-numbers.current {
    background: var(--tamna);
    border-color: var(--tamna);
    color: var(--belo);
}

a.page-numbers:hover {
    border-color: var(--tamna);
}

.page-numbers.dots {
    border: 0;
}

/* --- Članak --------------------------------------------------------------- */

.clanak__zaglavlje {
    padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 4vw, 40px);
}

.clanak__naslov {
    margin: 8px 0 0;
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
}

.clanak__slika {
    margin: 0 auto clamp(32px, 5vw, 56px);
}

.clanak__slika img {
    display: block;
    width: 100%;
    max-height: 640px;
    object-fit: cover;
    border-radius: var(--r);
}

.clanak__podnozje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 48px 0 var(--sekcija);
    padding-top: 24px;
    border-top: 1px solid var(--linija);
}

.deljenje {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deljenje__naslov {
    margin-right: 6px;
    color: var(--tekst-blag);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.deljenje__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--linija);
    border-radius: 50%;
    background: transparent;
    color: var(--tamna);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.deljenje__link:hover,
.deljenje__link.je-kopirano {
    background: var(--tamna);
    border-color: var(--tamna);
    color: var(--belo);
}

/* Takmičari pomenuti u vesti */
.u-vesti {
    margin-top: 48px;
    padding: 28px;
    background: var(--papir);
    border-radius: var(--r);
}

.u-vesti__naslov {
    margin: 0 0 16px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.u-vesti__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-vesti__takmicar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px 4px 4px;
    background: var(--belo);
    border: 1px solid var(--linija);
    border-radius: 999px;
    color: var(--tamna);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s;
}

.u-vesti__takmicar:hover {
    border-color: var(--plava);
    color: var(--plava);
}

.u-vesti__slika {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 0.85rem;
}

/* --- Tekst (sadržaj iz editora) ------------------------------------------ */

.tekst {
    font-size: 1.07rem;
    line-height: 1.75;
}

.tekst > * {
    margin-top: 0;
    margin-bottom: 1.15em;
}

.tekst h2 {
    margin-top: 1.6em;
    font-size: 2rem;
}

.tekst h3 {
    margin-top: 1.4em;
    font-size: 1.5rem;
}

.tekst ul,
.tekst ol {
    padding-left: 1.3em;
}

.tekst li {
    margin-bottom: 0.4em;
}

.tekst blockquote {
    margin-left: 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--plava);
    font-size: 1.2rem;
    color: var(--tamna);
}

.tekst img {
    border-radius: 4px;
}

.tekst figure {
    margin-left: 0;
    margin-right: 0;
}

.tekst figcaption,
.wp-element-caption {
    margin-top: 8px;
    color: var(--tekst-blag);
    font-size: 0.88rem;
    line-height: 1.4;
}

.tekst table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tekst td,
.tekst th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--linija);
    text-align: left;
}

.tekst--siroko {
    max-width: none;
}

.tekst--uvod > p:first-child {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--tamna);
}

/* Galerije: mreža kvadrata; sa malo slika one se šire preko cele širine teksta.
   Dupli :not() je jači od WordPress-ovog :not(#individual-image) koji se učitava kasnije */
.tekst .wp-block-gallery.has-nested-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    margin-bottom: 1.6em;
}

.tekst .wp-block-gallery.has-nested-images figure.wp-block-image:not(#x):not(#y) {
    width: auto !important; /* WordPress ima posebna, jača pravila za 2, 3… slike */
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
}

.tekst .wp-block-gallery.has-nested-images figure.wp-block-image:not(#x):not(#y) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s ease, opacity 0.2s;
}

.tekst .wp-block-gallery.has-nested-images figure.wp-block-image:not(#x):not(#y) a:hover img {
    transform: scale(1.05);
}

.tekst .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    display: none;
}

.tekst .wp-block-gallery > .wp-element-caption {
    grid-column: 1 / -1;
}

.tekst .wp-block-image a {
    display: block;
    cursor: zoom-in;
}

/* --- YouTube (facade) ----------------------------------------------------- */

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--r);
    overflow: hidden;
}

.video__slika,
.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0 !important;
}

.video__slika {
    opacity: 0.85;
    transition: opacity 0.2s;
}

.video__dugme {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.video__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--belo);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s;
}

.video__ikona::after {
    content: '';
    margin-left: 6px;
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent var(--tamna);
}

.video:hover .video__slika {
    opacity: 1;
}

.video:hover .video__ikona {
    transform: scale(1.08);
}

.video__link {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
}

.video.je-pusten .video__slika,
.video.je-pusten .video__dugme,
.video.je-pusten .video__link {
    display: none;
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 12, 24, 0.96);
    opacity: 0;
    transition: opacity 0.2s;
}

.lightbox.je-otvoren {
    opacity: 1;
}

.lightbox__slika {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 2px;
    user-select: none;
}

.lightbox__dugme {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--belo);
    cursor: pointer;
    transition: background 0.2s;
}

.lightbox__dugme:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox__dugme .ikona {
    width: 26px;
    height: 26px;
}

.lightbox__zatvori { top: 16px; right: 16px; }
.lightbox__levo { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__desno { right: 16px; top: 50%; transform: translateY(-50%); }

.lightbox__brojac {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font: 600 1rem var(--font-naslov);
    letter-spacing: 0.1em;
}

@media (max-width: 700px) {
    .lightbox__levo,
    .lightbox__desno {
        top: auto;
        bottom: 10px;
        transform: none;
    }
}

/* --- Portal: zajedničko --------------------------------------------------- */

.portal-poruka {
    padding: 18px 22px;
    background: var(--papir);
    border-radius: var(--r);
    color: var(--tekst-blag);
}

.inicijali {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tamna);
    background-image: var(--tatami);
    background-size: 40px 20px;
    color: rgba(255, 255, 255, 0.8);
    font: 700 2rem var(--font-naslov);
    letter-spacing: 0.04em;
}

.plasman {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--peto);
    color: var(--belo);
    font: 700 0.85rem/1 var(--font-naslov);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.plasman--zlato { background: var(--zlato); }
.plasman--srebro { background: var(--srebro); }
.plasman--bronza { background: var(--bronza); }
.plasman--ostalo { background: var(--linija); color: var(--tekst); }

/* Pojas: traka u boji pojasa */
.pojas {
    display: inline-block;
    width: 40px;
    height: 10px;
    margin-right: 8px;
    border-radius: 2px;
    vertical-align: 0.05em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.pojas--bela { background: #f6f5f0; }
.pojas--zuta { background: #f2c418; }
.pojas--oranz { background: #ef7d1a; }
.pojas--zelena { background: #2f9e44; }
.pojas--plava { background: #1d5fe6; }
.pojas--braon { background: #7a4a26; }
.pojas--crna { background: #111; }

.tabela-omotac {
    overflow-x: auto;
    border: 1px solid var(--linija);
    border-radius: var(--r);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabela th,
.tabela td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--linija);
}

.tabela thead th {
    background: var(--papir);
    color: var(--tamna);
    font-weight: 600;
}

.tabela tbody tr:hover {
    background: #fbfaf7;
}

.tabela tfoot th,
.tabela tfoot td {
    background: var(--tamna);
    color: var(--belo);
    font: 700 1.15rem var(--font-naslov);
    border-bottom: 0;
}

.tabela__datum {
    white-space: nowrap;
    color: var(--tekst-blag);
}

.tabela .tabela__broj {
    width: 64px;
    text-align: center;
    font: 700 1.1rem var(--font-naslov);
}

.izbor-godine {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-weight: 600;
}

.izbor-godine__polje {
    padding: 9px 36px 9px 14px;
    border: 1px solid var(--linija);
    border-radius: 4px;
    background: var(--belo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23131a26' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
    font: 700 1.1rem var(--font-naslov);
    appearance: none;
    cursor: pointer;
}

/* Tabovi (aktivni / bivši) */
.tabovi {
    display: flex;
    gap: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--linija);
}

.tabovi__tab {
    margin-bottom: -1px;
    padding: 10px 0 14px;
    border-bottom: 3px solid transparent;
    color: var(--tekst-blag);
    font: 700 1.25rem var(--font-naslov);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.tabovi__tab:hover {
    color: var(--tamna);
}

.tabovi__tab.je-aktivan {
    border-color: var(--plava);
    color: var(--tamna);
}

/* --- Portal: spisak takmičara -------------------------------------------- */

.pretraga-takmicara {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.pretraga-takmicara > .ikona {
    position: absolute;
    left: 16px;
    color: var(--tekst-blag);
    pointer-events: none;
}

.pretraga-takmicara__polje {
    width: min(100%, 420px);
    padding: 14px 16px 14px 48px;
    border: 1px solid var(--linija);
    border-radius: 4px;
    font: inherit;
}

.pretraga-takmicara__polje:focus {
    border-color: var(--plava);
    outline: 0;
}

.pretraga-takmicara__broj {
    color: var(--tekst-blag);
    font-size: 0.9rem;
    white-space: nowrap;
}

.takmicari {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr));
    gap: 28px 20px;
    margin: 0 0 var(--sekcija);
    padding: 0;
    list-style: none;
}

.takmicar-kartica {
    display: block;
    color: inherit;
    text-decoration: none;
}

.takmicar-kartica__slika {
    display: flex;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--r);
    background: var(--papir);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.takmicar-kartica:hover .takmicar-kartica__slika {
    transform: translateY(-4px);
    box-shadow: var(--senka);
}

.takmicar-kartica__ime {
    display: block;
    margin-top: 12px;
    color: var(--tekst-blag);
    line-height: 1.25;
}

.takmicar-kartica__ime strong {
    display: block;
    color: var(--tamna);
    font: 700 1.3rem var(--font-naslov);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.takmicar-kartica:hover strong {
    color: var(--plava);
}

/* --- Portal: profil takmičara -------------------------------------------- */

.profil {
    padding: 32px 0 var(--sekcija);
}

.profil__nazad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--tekst-blag);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.profil__nazad:hover {
    color: var(--plava);
}

.profil__zaglavlje {
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: end;
    margin-bottom: clamp(40px, 6vw, 72px);
}

.profil__slika {
    display: flex;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--r);
    font-size: 4rem;
}

.profil__ime {
    margin: 0 0 24px;
    font-size: clamp(2.8rem, 7vw, 5.2rem);
    font-weight: 800;
    line-height: 0.9;
    text-transform: uppercase;
}

.profil__ime span {
    display: block;
    color: var(--plava);
}

.profil__osobine {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 0 0 28px;
    padding: 20px 0;
    border-top: 1px solid var(--linija);
    border-bottom: 1px solid var(--linija);
}

.profil__osobine dt {
    margin-bottom: 4px;
    color: var(--tekst-blag);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profil__osobine dd {
    margin: 0;
    font: 700 1.3rem var(--font-naslov);
    color: var(--tamna);
}

.medalje {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.medalje__stavka {
    flex: 1;
    max-width: 130px;
    padding: 14px 16px;
    border-radius: var(--r);
    color: var(--belo);
}

.medalje__stavka--zlato { background: var(--zlato); }
.medalje__stavka--srebro { background: var(--srebro); }
.medalje__stavka--bronza { background: var(--bronza); }

.medalje__broj {
    display: block;
    font: 800 2.6rem/1 var(--font-naslov);
}

.medalje__naziv {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.9;
}

.profil__sekcija {
    margin-top: clamp(40px, 6vw, 64px);
}

.godina {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--linija);
}

.godina__naslov {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--linija);
    -webkit-text-stroke: 1px var(--tamna);
    line-height: 1;
}

.rezultati {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rezultat {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rezultat__mesto {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--papir);
    color: var(--tamna);
    font: 800 1.15rem var(--font-naslov);
}

.rezultat--zlato .rezultat__mesto { background: var(--zlato); color: var(--belo); }
.rezultat--srebro .rezultat__mesto { background: var(--srebro); color: var(--belo); }
.rezultat--bronza .rezultat__mesto { background: var(--bronza); color: var(--belo); }

.rezultat__opis strong {
    display: block;
    color: var(--tamna);
    font-weight: 600;
    line-height: 1.3;
}

.rezultat__meta {
    color: var(--tekst-blag);
    font-size: 0.88rem;
}

@media (max-width: 700px) {
    .profil__zaglavlje {
        grid-template-columns: 1fr;
    }

    .profil__foto {
        max-width: 280px;
    }

    .godina {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- Portal: poslednje medalje (klizač) ---------------------------------- */

.klizac {
    margin-right: calc(-1 * var(--razmak));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.poslednji {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 210px;
    gap: 16px;
    margin: 0;
    padding: 0 var(--razmak) 20px 0;
    list-style: none;
}

.poslednji__stavka {
    scroll-snap-align: start;
}

.poslednji__kartica {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.poslednji__slika {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r);
    transition: transform 0.3s;
}

.poslednji__kartica:hover .poslednji__slika {
    transform: translateY(-4px);
}

.poslednji__kartica .plasman {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.poslednji__ime {
    margin-top: 14px;
    color: var(--belo);
    font: 700 1.25rem var(--font-naslov);
    text-transform: uppercase;
    line-height: 1.1;
}

.poslednji__takmicenje {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.35;
}

.tekst .poslednji,
.strana .poslednji {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    margin-bottom: 1.5em;
}

.strana .poslednji__ime {
    color: var(--tamna);
}

.strana .poslednji__takmicenje {
    color: var(--tekst-blag);
}

/* --- Portal: najuspešniji ------------------------------------------------- */

.najbolji-blok {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.najbolji-blok > div > p:not(.nadnaslov) {
    margin: 20px 0 24px;
    color: var(--tekst-blag);
}

@media (max-width: 860px) {
    .najbolji-blok {
        grid-template-columns: 1fr;
    }
}

.rang {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rang;
}

.rang__stavka {
    counter-increment: rang;
}

.rang__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linija);
    color: inherit;
    text-decoration: none;
}

.rang__link::before {
    content: counter(rang);
    width: 28px;
    color: var(--tekst-blag);
    font: 800 1.5rem var(--font-naslov);
    text-align: center;
}

.rang__stavka:first-child .rang__link::before {
    color: var(--zlato);
}

.rang__slika {
    display: flex;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 1rem;
}

.rang__ime {
    flex: 1;
    color: var(--tamna);
    font: 700 1.3rem var(--font-naslov);
    text-transform: uppercase;
}

.rang__link:hover .rang__ime {
    color: var(--plava);
}

.rang__medalje {
    display: flex;
    gap: 6px;
}

/* --- O klubu (naslovna) + raspored --------------------------------------- */

.o-klubu-blok {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.o-klubu-blok__tekst .sekcija__naslov {
    margin-bottom: 28px;
}

.o-klubu-blok__tekst > p:not(.nadnaslov):not(.uvod) {
    color: var(--tekst-blag);
}

.o-klubu-blok__linkovi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .o-klubu-blok {
        grid-template-columns: 1fr;
    }
}

.raspored {
    padding: clamp(24px, 3vw, 36px);
    background-color: var(--tamna);
    background-image: var(--tatami);
    background-size: 120px 60px;
    border-radius: var(--r);
    color: var(--belo);
}

.raspored__naslov {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    color: var(--belo);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.raspored__naslov .ikona {
    color: #f0c75e;
}

.raspored__grupe {
    display: grid;
    gap: 28px;
    margin-bottom: 28px;
}

.raspored__grupa-naziv {
    margin: 0 0 4px;
    color: var(--belo);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.raspored__sala {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
}

.raspored__termini {
    margin: 0;
    padding: 0;
    list-style: none;
}

.raspored__termini li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--linija-tamna);
}

.raspored__termini strong {
    font: 700 1.15rem var(--font-naslov);
    letter-spacing: 0.04em;
}

.raspored--lepljiv {
    position: sticky;
    top: 100px;
}

/* Raspored na svetloj pozadini (kontakt) */
.kontakt .raspored__grupa-naziv {
    color: var(--tamna);
}

.kontakt .raspored__sala {
    color: var(--tekst-blag);
}

.kontakt .raspored__termini li {
    border-color: var(--linija);
}

/* --- Treneri -------------------------------------------------------------- */

.treneri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr));
    gap: 32px 20px;
    padding-bottom: 8px;
}

.trener-kartica__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.trener-kartica__foto {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tamna);
}

.trener-kartica__slika {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.trener-kartica__link:hover .trener-kartica__slika {
    transform: scale(1.04);
}

.trener-kartica__zvanje {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 10px;
    border-radius: 2px;
    background: #111;
    color: var(--belo);
    font: 700 0.85rem var(--font-naslov);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.trener-kartica__ime {
    display: block;
    margin-top: 14px;
    color: var(--tamna);
    font: 700 1.4rem var(--font-naslov);
    text-transform: uppercase;
    line-height: 1.1;
}

.trener-kartica__link:hover .trener-kartica__ime {
    color: var(--plava);
}

.trener-kartica__funkcija {
    display: block;
    margin-top: 4px;
    color: var(--tekst-blag);
    font-size: 0.9rem;
}

.trener {
    padding: 32px var(--razmak) var(--sekcija);
}

.trener__red {
    display: grid;
    grid-template-columns: minmax(220px, 380px) 1fr;
    gap: clamp(28px, 6vw, 80px);
    align-items: start;
}

.trener__slika {
    width: 100%;
    border-radius: var(--r);
}

.trener__ime {
    margin: 0 0 8px;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 800;
    line-height: 0.92;
    text-transform: uppercase;
}

.trener__funkcija {
    margin-bottom: 28px;
    color: var(--tekst-blag);
    font-size: 1.1rem;
}

@media (max-width: 700px) {
    .trener__red {
        grid-template-columns: 1fr;
    }

    .trener__foto {
        max-width: 300px;
    }
}

/* --- Treninzi ------------------------------------------------------------- */

.treninzi {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
    padding-bottom: var(--sekcija);
}

@media (max-width: 900px) {
    .treninzi {
        grid-template-columns: 1fr;
    }

    .raspored--lepljiv {
        position: static;
    }
}

/* Koraci (lista u sadržaju stranice „Treninzi“) */
.tekst ol.koraci {
    counter-reset: korak;
    padding: 0;
    list-style: none;
}

.tekst ol.koraci > li {
    position: relative;
    margin-bottom: 24px;
    padding-left: 64px;
    counter-increment: korak;
}

.tekst ol.koraci > li::before {
    content: counter(korak);
    position: absolute;
    left: 0;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tamna);
    color: var(--belo);
    font: 800 1.3rem var(--font-naslov);
}

/* --- Kontakt -------------------------------------------------------------- */

.kontakt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    padding-bottom: var(--sekcija);
}

.kontakt .naslov-sekcije {
    margin-top: 40px;
}

.kontakt__forma .naslov-sekcije {
    margin-top: 0;
}

@media (max-width: 860px) {
    .kontakt {
        grid-template-columns: 1fr;
    }
}

.kontakt-kartice {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kontakt-kartica {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: var(--papir);
    border-radius: var(--r);
}

.kontakt-kartica > .ikona {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 50%;
    background: var(--tamna);
    color: var(--belo);
}

.kontakt-kartica__oznaka {
    color: var(--tekst-blag);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kontakt-kartica a,
.kontakt-kartica > span:last-child {
    color: var(--tamna);
    font-weight: 600;
    font-size: 1.08rem;
    text-decoration: none;
    word-break: break-word;
}

.kontakt-treneri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kontakt-treneri li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kontakt-treneri__slika {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.kontakt-treneri strong {
    display: block;
    color: var(--tamna);
}

.kontakt-treneri a {
    color: var(--tekst-blag);
    text-decoration: none;
}

.kontakt-treneri a:hover {
    color: var(--plava);
}

.mapa iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    filter: grayscale(0.4) contrast(1.05);
}

/* Forma */
.forma__red {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .forma__red {
        grid-template-columns: 1fr;
    }
}

.forma__polje {
    margin: 0 0 16px;
}

.forma__polje label {
    display: block;
    margin-bottom: 6px;
    color: var(--tamna);
    font-size: 0.9rem;
    font-weight: 600;
}

.forma input,
.forma select,
.forma textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--linija);
    border-radius: 4px;
    background: var(--belo);
    font: inherit;
    color: var(--tekst);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.forma input:focus,
.forma select:focus,
.forma textarea:focus {
    border-color: var(--plava);
    box-shadow: 0 0 0 3px var(--plava-svetla);
    outline: 0;
}

.forma textarea {
    resize: vertical;
}

.forma__zamka {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.obavestenje {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 4px;
    font-weight: 500;
}

.obavestenje--uspeh {
    background: #e6f4ec;
    color: var(--uspeh);
}

.obavestenje--greska {
    background: #fbeae8;
    color: var(--greska);
}

/* --- Poziv (CTA traka) ---------------------------------------------------- */

.poziv {
    padding: clamp(48px, 7vw, 88px) 0;
    background: linear-gradient(120deg, var(--plava) 0%, var(--plava-tamna) 100%);
    color: rgba(255, 255, 255, 0.88);
}

.poziv__red {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
}

.poziv__red > div:first-child {
    max-width: 620px;
}

.poziv__naslov {
    margin: 0 0 12px;
    color: var(--belo);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
}

.poziv p {
    margin: 0;
    font-size: 1.1rem;
}

.poziv__dugmad {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- 404 ------------------------------------------------------------------ */

.greska {
    padding: var(--sekcija) 0;
}

.greska__kod {
    margin: 0;
    font: 800 clamp(6rem, 22vw, 12rem)/0.8 var(--font-naslov);
    color: transparent;
    -webkit-text-stroke: 2px var(--tamna);
}

.greska__naslov {
    margin: 24px 0 12px;
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
}

/* --- Podnožje ------------------------------------------------------------- */

.podnozje {
    padding: clamp(56px, 8vw, 88px) 0 0;
    background: var(--tamna-2);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
}

.podnozje a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.podnozje a:hover {
    color: var(--belo);
}

.podnozje__mreza {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1.1fr;
    gap: 40px;
}

@media (max-width: 960px) {
    .podnozje__mreza {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .podnozje__mreza {
        grid-template-columns: 1fr;
    }
}

.brend--podnozje .brend__grb {
    width: 56px;
    height: 56px;
}

.podnozje__opis {
    max-width: 340px;
    margin: 20px 0;
}

.podnozje__naslov {
    margin: 4px 0 18px;
    color: var(--belo);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.podnozje__linkovi,
.podnozje__treninzi,
.kontakt-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.podnozje__linkovi li {
    margin-bottom: 10px;
}

.podnozje__treninzi li {
    margin-bottom: 14px;
}

.podnozje__treninzi strong {
    display: block;
    color: var(--belo);
    font-weight: 600;
}

.podnozje__treninzi span {
    display: block;
    font-size: 0.88rem;
}

.kontakt-lista li {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.kontakt-lista .ikona {
    margin-top: 3px;
    color: #f0c75e;
}

.mreze {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mreze__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--linija-tamna);
    border-radius: 50%;
    transition: background 0.2s, border-color 0.2s;
}

.mreze__link:hover {
    background: var(--plava);
    border-color: var(--plava);
}

.podnozje__dno {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(40px, 6vw, 64px);
    padding: 24px 0;
    border-top: 1px solid var(--linija-tamna);
    font-size: 0.85rem;
}

.podnozje__dno p {
    margin: 0;
}

/* --- Pojavljivanje pri skrolovanju --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .js .pojava {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .js .pojava.je-vidljiva {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Naslovna v2: pozornica (vesti), identitet, portal raspored, galerija
   ========================================================================== */

/* --- Pozornica: izdvojene vesti ------------------------------------------ */

.pozornica {
    position: relative;
    background: var(--tamna);
    color: var(--belo);
    overflow: hidden;
}

.pozornica__slajdovi {
    position: relative;
    height: min(84vh, 780px);
    min-height: 540px;
}

.slajd {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: 160px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s;
    isolation: isolate;
}

.slajd.je-aktivan {
    opacity: 1;
    visibility: visible;
}

.slajd__slika {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.08);
    transition: transform 9s linear;
}

.slajd.je-aktivan .slajd__slika {
    transform: scale(1);
}

.slajd::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(14, 15, 18, 0.98) 0%, rgba(14, 15, 18, 0.7) 38%, rgba(14, 15, 18, 0.1) 75%),
        linear-gradient(90deg, rgba(14, 15, 18, 0.7) 0%, rgba(14, 15, 18, 0) 65%);
}

.slajd__sadrzaj {
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.8s 0.2s ease, opacity 0.8s 0.2s ease;
}

.slajd.je-aktivan .slajd__sadrzaj {
    transform: none;
    opacity: 1;
}

.slajd__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.oznaka--svetla {
    padding: 5px 10px;
    border-radius: 2px;
    background: var(--plava);
    color: var(--belo);
}

.oznaka--svetla:hover {
    color: var(--belo);
    text-decoration: none;
    background: var(--plava-tamna);
}

.slajd__naslov {
    max-width: 920px;
    margin: 0 0 16px;
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.005em;
}

.slajd__naslov a {
    color: var(--belo);
    text-decoration: none;
}

.slajd__naslov a:hover {
    color: var(--belo);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.slajd__izvod {
    max-width: 620px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
}

.pozornica__tabovi {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tabovi-vesti {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tab-vest {
    position: relative;
    display: block;
    padding: 20px 0 26px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s;
}

.tab-vest:hover,
.tab-vest.je-aktivan {
    color: var(--belo);
}

.tab-vest__broj {
    display: block;
    margin-bottom: 6px;
    font: 700 0.95rem var(--font-naslov);
    letter-spacing: 0.1em;
}

.tab-vest.je-aktivan .tab-vest__broj {
    color: #f0c75e;
}

.tab-vest__naslov {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
}

.tab-vest__napredak {
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--plava);
}

.tab-vest.je-aktivan .tab-vest__napredak {
    width: 100%;
}

.js .pozornica[data-auto] .tab-vest.je-aktivan .tab-vest__napredak {
    width: 0;
    animation: napredak var(--trajanje, 7s) linear forwards;
}

.js .pozornica.je-pauza .tab-vest.je-aktivan .tab-vest__napredak {
    animation-play-state: paused;
}

@keyframes napredak {
    to { width: 100%; }
}

@media (max-width: 800px) {
    .pozornica__slajdovi {
        height: min(78vh, 680px);
        min-height: 500px;
    }

    .slajd {
        padding-bottom: 92px;
    }

    .slajd__izvod {
        display: none;
    }

    .tabovi-vesti {
        gap: 8px;
    }

    .tab-vest {
        padding: 16px 0 20px;
        text-align: center;
    }

    .tab-vest__broj {
        margin: 0;
    }

    .tab-vest__naslov {
        display: none;
    }
}

/* --- Identitet kluba + brojke -------------------------------------------- */

.identitet {
    padding: clamp(40px, 6vw, 72px) 0;
    border-bottom: 1px solid var(--linija);
}

.identitet__red {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.identitet__klub {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.identitet__grb {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--linija), var(--senka);
}

.identitet__naslov {
    margin: 0 0 12px;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
}

.identitet__tekst {
    max-width: 520px;
    color: var(--tekst-blag);
}

.identitet__linkovi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
}

.identitet__brojke {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    border: 1px solid var(--linija);
    border-radius: var(--r);
    overflow: hidden;
}

.identitet__brojke .brojka {
    padding: 22px 18px;
}

.identitet__brojke .brojka__broj {
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}

.identitet__medalje {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding: 14px 18px;
    border-top: 1px solid var(--linija);
    background: var(--papir);
    font: 700 1.15rem var(--font-naslov);
    color: var(--tamna);
}

.identitet__medalje > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 1000px) {
    .identitet__red {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .identitet__klub {
        flex-direction: column;
    }

    .identitet__grb {
        width: 72px;
        height: 72px;
    }

    .identitet__brojke {
        grid-template-columns: repeat(2, 1fr);
    }

    .identitet__brojke .brojka:nth-child(3) {
        border-left: 0;
    }

    .identitet__brojke .brojka:nth-child(n + 3) {
        border-top: 1px solid var(--linija);
    }
}

/* --- Portal raspored: vesti + bočna kolona ------------------------------- */

.portal-raspored {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

.portal-raspored__strana {
    display: grid;
    gap: 24px;
}

@media (max-width: 1000px) {
    .portal-raspored {
        grid-template-columns: 1fr;
    }

    .portal-raspored__strana {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
}

.vesti--dve {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
}

.vesti--dve .vest-kartica__naslov {
    font-size: 1.35rem;
}

@media (max-width: 640px) {
    .vesti--dve {
        grid-template-columns: 1fr;
    }
}

.panel {
    padding: 24px;
    background: var(--belo);
    border: 1px solid var(--linija);
    border-radius: var(--r);
}

.panel__naslov {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.panel__naslov .ikona {
    color: var(--plava);
}

.panel .rang {
    margin-bottom: 18px;
}

.panel .rang__link {
    gap: 12px;
    padding: 9px 0;
}

.panel .rang__link::before {
    width: 18px;
    font-size: 1.15rem;
}

.panel .rang__slika {
    width: 40px;
    height: 40px;
}

.panel .rang__ime {
    font-size: 1.05rem;
}

.panel .rang__medalje .plasman {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.75rem;
}

.mreze-panel {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mreze-panel__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--linija);
    border-radius: 4px;
    color: var(--tamna);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.mreze-panel__link span {
    flex: 1;
}

.mreze-panel__link .ikona:last-child {
    color: var(--tekst-blag);
    transition: transform 0.2s;
}

.mreze-panel__link:hover {
    background: var(--tamna);
    border-color: var(--tamna);
    color: var(--belo);
}

.mreze-panel__link:hover .ikona:last-child {
    color: var(--belo);
    transform: translateX(3px);
}

/* --- Galerija: albumi ----------------------------------------------------- */

.albumi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 36px 24px;
}

.album {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.album__otvori {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    background: var(--papir);
    overflow: hidden;
    cursor: zoom-in;
}

.album__slika {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.album__otvori:hover .album__slika {
    transform: scale(1.05);
}

.album__otvori::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(14, 15, 18, 0.45), rgba(14, 15, 18, 0) 45%);
}

.album__broj {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(14, 15, 18, 0.82);
    color: var(--belo);
    font: 700 0.95rem var(--font-naslov);
    letter-spacing: 0.06em;
}

.album__broj .ikona {
    width: 1em;
    height: 1em;
}

.album__opis {
    padding-top: 12px;
}

.album__opis time {
    color: var(--tekst-blag);
    font-size: 0.82rem;
}

.album__naslov {
    margin: 4px 0 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.album__naslov a {
    color: var(--tamna);
    text-decoration: none;
}

.album__naslov a:hover {
    color: var(--plava);
}

.albumi--mozaik {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
}

.albumi--mozaik .album:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.albumi--mozaik .album:first-child .album__otvori {
    flex: 1;
    aspect-ratio: auto;
    min-height: 320px;
}

.albumi--mozaik .album:first-child .album__naslov {
    font-size: 1.6rem;
}

@media (max-width: 900px) {
    .albumi--mozaik {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .albumi--mozaik .album:first-child {
        grid-row: auto;
    }

    .albumi--mozaik .album:first-child .album__otvori {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}

/* ==========================================================================
   Naslovna v4: info centar (manji naslov, podaci kluba, brzi ulazi, tabovi vesti)
   ========================================================================== */

.hero {
    min-height: 0;
}

.hero__mreza {
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    padding-top: clamp(44px, 6vw, 80px);
    padding-bottom: clamp(36px, 4vw, 56px);
}

.hero__naslov {
    margin-bottom: 18px;
}

.hero__naslov-mali {
    margin-bottom: 6px;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
}

.hero__naslov-veliki {
    font-size: clamp(3.2rem, 7vw, 6.2rem);
}

.hero__tekst {
    margin-bottom: 28px;
}

/* Brzi ulazi u glavne delove sajta */
.ulazi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ulaz {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--belo);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.ulaz:hover {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--belo);
    transform: translateY(-2px);
}

.ulaz__ikona {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(210, 31, 60, 0.35);
    color: var(--belo);
}

.ulaz:hover .ulaz__ikona {
    background: rgba(255, 255, 255, 0.2);
}

.ulaz__tekst {
    min-width: 0;
    line-height: 1.2;
}

.ulaz__tekst strong {
    display: block;
    font: 700 1.1rem var(--font-naslov);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ulaz__tekst span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
}

.ulaz:hover .ulaz__tekst span {
    color: rgba(255, 255, 255, 0.85);
}

.ulaz__strelica {
    margin-left: auto;
    opacity: 0.45;
    transition: opacity 0.2s, transform 0.2s;
}

.ulaz:hover .ulaz__strelica {
    opacity: 1;
    transform: translateX(2px);
}

/* Kartica sa podacima kluba */
.info-klub {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(14, 15, 18, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--belo);
}

.info-klub__zaglavlje {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.info-klub__zaglavlje img {
    border-radius: 50%;
    background: var(--belo);
}

.info-klub__zaglavlje strong {
    display: block;
    font: 700 1.2rem/1.15 var(--font-naslov);
    letter-spacing: 0.02em;
}

.info-klub__zaglavlje span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.info-klub__kontakt {
    display: grid;
    gap: 9px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
}

.info-klub__kontakt li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-klub__kontakt .ikona {
    margin-top: 2px;
    color: #f0c75e;
}

.info-klub__kontakt a {
    color: var(--belo);
    text-decoration: none;
}

.info-klub__kontakt a:hover {
    text-decoration: underline;
}

.info-klub__kontakt small {
    color: rgba(255, 255, 255, 0.55);
}

.info-klub__podaci {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.info-klub__podaci dt {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.info-klub__podaci dd {
    margin: 2px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hero__zivo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hero__zivo .zivo {
    gap: 4px;
    padding: 16px 18px;
}

.hero__zivo .zivo__oznaka {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
}

.hero__zivo .zivo__vrednost {
    font-size: 1.7rem;
}

.hero__zivo .zivo__vrednost small {
    margin-left: 6px;
    font-size: 0.85rem;
}

.hero__zivo .zivo__opis {
    font-size: 0.8rem;
}

.hero__brojke-mreza {
    grid-template-columns: repeat(5, 1fr);
}

.hero__brojke .brojka {
    padding-top: 18px;
    padding-bottom: 18px;
}

.hero__brojke .brojka__broj {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
}

@media (max-width: 1100px) {
    .ulazi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .hero__mreza {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hero__brojke-mreza {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__brojke .brojka:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .hero__brojke .brojka:nth-child(3) {
        border-left: 0;
    }

    .hero__brojke .brojka:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        padding-left: 16px;
    }

    .hero__brojke .brojka:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .info-klub__podaci {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .ulazi {
        gap: 8px;
    }

    .ulaz {
        gap: 10px;
        padding: 12px;
    }

    .ulaz__ikona {
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .ulaz__tekst strong {
        font-size: 1rem;
    }

    .ulaz__strelica {
        display: none;
    }

    .hero__brojke .brojka {
        justify-content: flex-end;
    }

    .hero__brojke .brojka:last-child {
        grid-column: 1 / -1;
        border-left: 0;
        padding-left: 0;
    }
}

/* Traka obaveštenja (iznad hero dela) */
.obavestenje-traka {
    background: var(--zlato);
    color: var(--tamna-2);
}

.obavestenje-traka__red {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.obavestenje-traka__oznaka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.obavestenje-traka__naslov {
    color: var(--tamna-2);
    font-weight: 700;
}

.obavestenje-traka__naslov:hover {
    color: var(--tamna-2);
}

.obavestenje-traka time {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Tabovi kategorija vesti */
.vesti-tabovi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.vesti-panel__vise {
    margin: 28px 0 0;
}

@media (max-width: 760px) {
    .vesti-tabovi {
        flex-wrap: nowrap;
        margin-right: calc(-1 * var(--razmak));
        padding-right: var(--razmak);
        overflow-x: auto;
        scrollbar-width: none;
    }
}
/* ==========================================================================
   v5: više boje – jarko plavi hero, boje pojaseva, žuti portal, uživo
   ========================================================================== */

:root {
    --zuta: #ffc61a;
    --zuta-tamna: #f0b400;
    --crvena: #e5352b;
    --plavi-preliv: linear-gradient(125deg, #16181d 0%, #1f2228 45%, #2c3038 100%);
}

/* Hero: jarka plava kluba umesto skoro crne */
.hero {
    background: #16181d;
}

.hero__slika {
    filter: grayscale(1) contrast(1.1) brightness(1.05);
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.hero::before {
    background:
        linear-gradient(0deg, rgba(14, 15, 18, 0.85) 0%, rgba(14, 15, 18, 0) 38%),
        linear-gradient(115deg, rgba(18, 19, 23, 0.92) 0%, rgba(30, 32, 38, 0.78) 50%, rgba(46, 50, 58, 0.55) 100%);
}

.hero__naslov-veliki {
    background: linear-gradient(180deg, #ffffff 40%, #ffe38a 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero .nadnaslov--svetao {
    color: var(--zuta);
}

/* Brzi ulazi: ikone u bojama pojaseva */
.ulaz {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.ulaz:hover {
    background: var(--belo);
    border-color: var(--belo);
    color: var(--tamna);
}

.ulaz:hover .ulaz__tekst span {
    color: var(--tekst-blag);
}

.ulaz__ikona {
    background: var(--belo);
    color: var(--tamna);
}

.ulaz--novine .ulaz__ikona { background: #f2c418; color: #3a2a00; }
.ulaz--grupa .ulaz__ikona { background: #ef7d1a; color: #fff; }
.ulaz--medalja .ulaz__ikona { background: #2f9e44; color: #fff; }
.ulaz--sat .ulaz__ikona { background: #ffffff; color: #1d5fe6; }
.ulaz--kamera .ulaz__ikona { background: #8a5a35; color: #fff; }
.ulaz--uzivo .ulaz__ikona { background: var(--crvena); color: #fff; }

.ulaz:hover .ulaz__ikona {
    box-shadow: 0 0 0 3px rgba(22, 24, 29, 0.08);
}

/* Portal za članove: žuta traka */
.portal-traka {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: var(--r);
    background: var(--zuta);
    color: var(--tamna-2);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(255, 198, 26, 0.25);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.portal-traka:hover {
    background: #ffd23f;
    color: var(--tamna-2);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(255, 198, 26, 0.35);
}

.portal-traka__ikona {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: var(--tamna-2);
    color: var(--zuta);
}

.portal-traka__tekst {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.portal-traka__tekst strong {
    display: block;
    font: 800 1.35rem var(--font-naslov);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.portal-traka__tekst span {
    font-size: 0.88rem;
}

.portal-traka__dugme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 4px;
    background: var(--tamna-2);
    color: var(--belo);
    font: 700 0.95rem var(--font-naslov);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .portal-traka {
        flex-wrap: wrap;
    }

    .portal-traka__dugme {
        width: 100%;
        justify-content: center;
    }
}

/* Kartica kluba: bela, jasna */
.info-klub {
    background: var(--belo);
    border-color: var(--belo);
    color: var(--tekst);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.info-klub__zaglavlje {
    border-color: var(--linija);
}

.info-klub__zaglavlje img {
    box-shadow: 0 0 0 1px var(--linija);
}

.info-klub__zaglavlje strong {
    color: var(--tamna);
}

.info-klub__zaglavlje span,
.info-klub__kontakt small {
    color: var(--tekst-blag);
}

.info-klub__kontakt .ikona {
    color: var(--plava);
}

.info-klub__kontakt a {
    color: var(--tamna);
    font-weight: 600;
}

.info-klub__podaci {
    border-color: var(--linija);
}

.info-klub__podaci dt {
    color: var(--tekst-blag);
}

.info-klub__podaci dd {
    color: var(--tamna);
}

/* Žive kartice na plavoj */
.zivo {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
}

.zivo__oznaka {
    color: var(--zuta);
}

.zivo__tacka {
    background: var(--zuta);
}

.zivo--rang .zivo__vrednost {
    color: var(--zuta);
}

.hero__brojke {
    background: rgba(0, 0, 0, 0.45);
}

.hero__brojke .brojka:nth-child(2) .brojka__broj { color: #ffe38a; }

/* Dugmad: žuto */
.dugme--zuto {
    background: var(--zuta);
    border-color: var(--zuta);
    color: var(--tamna-2);
}

.dugme--zuto:hover {
    background: #ffd23f;
    border-color: #ffd23f;
    color: var(--tamna-2);
}

/* Zaglavlje: rezultati uživo */
.uzivo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: var(--belo);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}

.uzivo-link:hover {
    background: var(--crvena);
    border-color: var(--crvena);
    color: var(--belo);
}

.uzivo-link__tacka,
.ulaz--uzivo .ulaz__tekst span::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crvena);
    box-shadow: 0 0 0 0 rgba(229, 53, 43, 0.6);
    animation: puls-crveno 1.8s infinite;
}

.uzivo-link:hover .uzivo-link__tacka {
    background: var(--belo);
}

@keyframes puls-crveno {
    70% { box-shadow: 0 0 0 8px rgba(229, 53, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 53, 43, 0); }
}

@media (max-width: 1100px) {
    .uzivo-link {
        align-self: flex-start;
        padding: 10px 14px;
        font-size: 1rem;
    }
}

@media (min-width: 1101px) and (max-width: 1280px) {
    .glavni-meni a {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
}

/* Tamne sekcije postaju plave */
.sekcija--tamna {
    background-color: #16181d;
    background-image: var(--tatami), var(--plavi-preliv);
    background-size: 120px 60px, 120px 60px, auto;
}

.sekcija--tamna .nadnaslov--svetao,
.sekcija--tamna .link-strelica {
    color: var(--zuta);
}

.portal-kartica {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.portal-kartica__domen {
    color: var(--zuta);
}

.portal-kartica:hover {
    background: var(--belo);
    border-color: var(--belo);
    color: var(--tamna);
}

.portal-kartica:hover .portal-kartica__domen {
    color: var(--plava);
}

.portal-kartica:hover .portal-kartica__opis {
    color: var(--tekst-blag);
}

/* Svetle sekcije: topliji ton, nadnaslovi u boji */
.sekcija--svetla {
    background: #f4f3ef;
}

.raspored {
    background-color: #16181d;
    background-image: var(--tatami), var(--plavi-preliv);
    background-size: 120px 60px, 120px 60px, auto;
}

.raspored__naslov .ikona {
    color: var(--zuta);
}

.rang-blok__nas {
    background-color: #16181d;
    background-image: var(--tatami), var(--plavi-preliv);
    background-size: 60px 30px, 60px 30px, auto;
}

.naslov-strane {
    background-color: #16181d;
    background-image: var(--tatami), var(--plavi-preliv);
    background-size: 120px 60px, 120px 60px, auto;
}

.naslov-strane .nadnaslov {
    color: var(--zuta);
}

.poziv {
    background: linear-gradient(120deg, #ffc61a 0%, #ffb000 100%);
    color: var(--tamna-2);
}

.poziv__naslov {
    color: var(--tamna-2);
}

.poziv .dugme--belo {
    background: var(--tamna-2);
    border-color: var(--tamna-2);
    color: var(--belo);
}

.poziv .dugme--belo:hover {
    background: var(--tamna);
    border-color: var(--tamna);
    color: var(--belo);
}

.poziv .dugme--providno {
    border-color: rgba(14, 15, 18, 0.4);
    color: var(--tamna-2);
}

.poziv .dugme--providno:hover {
    background: var(--tamna-2);
    border-color: var(--tamna-2);
    color: var(--belo);
}
/* ==========================================================================
   v6: portreti, treneri, vesti u boji, portali na svetlom
   ========================================================================== */

/* --- Portreti takmičara: bela pozadina fotografije se stapa sa okvirom --- */

.portret {
    position: relative;
    display: block;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 18%, #ffffff 0%, #f1efe9 55%, #dcd8cf 100%);
}

.portret__slika {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    mix-blend-mode: multiply;
}

.takmicar-kartica {
    height: 100%;
    padding: 8px 8px 14px;
    border: 1px solid var(--linija);
    border-radius: 12px;
    background: var(--belo);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.takmicar-kartica:hover {
    border-color: var(--plava);
    box-shadow: 0 14px 34px rgba(20, 20, 24, 0.14);
    transform: translateY(-4px);
}

.takmicar-kartica__slika,
.takmicar-kartica:hover .takmicar-kartica__slika {
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    transform: none;
    box-shadow: none;
}

.takmicar-kartica__ime {
    margin-top: 12px;
    padding: 0 6px;
}

.takmicari {
    gap: 20px 16px;
}

.poslednji__slika {
    aspect-ratio: 4 / 5;
    border-radius: 10px;
}

.profil__slika {
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(20, 20, 24, 0.18);
}

.rang__slika,
.u-vesti__slika {
    border-radius: 50%;
}

/* --- Treneri: ime preko fotografije, traka pojaseva na dnu --------------- */

.treneri {
    gap: 20px;
}

.trener-kartica__link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--plavi-preliv);
    color: var(--belo);
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    isolation: isolate;
}

.trener-kartica__slika {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    filter: saturate(0.9) contrast(1.05);
    transition: transform 0.6s ease;
}

.trener-kartica__link:hover .trener-kartica__slika {
    transform: scale(1.05);
}

.trener-kartica__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(14, 15, 18, 0.96) 0%, rgba(14, 15, 18, 0.6) 32%, rgba(14, 15, 18, 0) 58%);
}

.trener-kartica__link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    background: var(--pojasevi);
}

.trener-kartica__opis {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 20px;
}

.trener-kartica__ime,
.trener-kartica__link:hover .trener-kartica__ime {
    display: block;
    margin: 0;
    color: var(--belo);
    font: 800 1.5rem/1.05 var(--font-naslov);
    text-transform: uppercase;
}

.trener-kartica__funkcija {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.35;
}

.trener-kartica__zvanje {
    position: absolute;
    top: 14px;
    left: 14px;
    bottom: auto;
    padding: 6px 10px;
    border-radius: 3px;
    background: #111;
    color: var(--zuta);
    font: 700 0.85rem var(--font-naslov);
    letter-spacing: 0.1em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Kategorije vesti u bojama pojaseva ---------------------------------- */

.oznaka {
    --k: var(--plava);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--k);
    color: var(--belo);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.oznaka:hover {
    color: var(--belo);
    text-decoration: none;
    filter: brightness(1.1);
}

.oznaka--takmicenja { --k: #1d5fe6; }
.oznaka--klub { --k: #2f9e44; }
.oznaka--pojasevi-i-ispiti { --k: #ef7d1a; }
.oznaka--pripreme-i-kampovi { --k: #8a5a35; }
.oznaka--svet-dzudoa { --k: #e5352b; }
.oznaka--obavestenja { --k: #f2c418; color: #3a2a00; }
.oznaka--obavestenja:hover { color: #3a2a00; }

/* --- Vesti na naslovnoj: magazinska istaknuta + bele kartice ------------- */

.vesti-sekcija .vesti-izdvojeno {
    gap: 20px 28px;
}

.vesti-sekcija .vest-kartica--velika {
    position: relative;
    min-height: 540px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--tamna);
    box-shadow: 0 20px 50px rgba(20, 20, 24, 0.18);
}

.vesti-sekcija .vest-kartica--velika .vest-kartica__slika-link {
    position: absolute;
    inset: 0;
    border-radius: 0;
}

.vesti-sekcija .vest-kartica--velika .vest-kartica__slika {
    height: 100%;
    aspect-ratio: auto;
}

.vesti-sekcija .vest-kartica--velika::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(14, 15, 18, 0.95) 0%, rgba(14, 15, 18, 0.55) 40%, rgba(14, 15, 18, 0) 70%);
    pointer-events: none;
}

.vesti-sekcija .vest-kartica--velika .vest-kartica__telo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: clamp(22px, 3vw, 36px);
}

.vesti-sekcija .vest-kartica--velika .vest-kartica__meta {
    color: rgba(255, 255, 255, 0.75);
}

.vesti-sekcija .vest-kartica--velika .vest-kartica__naslov a,
.vesti-sekcija .vest-kartica--velika:hover .vest-kartica__naslov a {
    color: var(--belo);
}

.vesti-sekcija .vest-kartica--velika .vest-kartica__izvod {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.8);
}

.vesti-sekcija .vest-kartica:not(.vest-kartica--velika) {
    padding: 12px;
    border: 1px solid var(--linija);
    border-radius: 12px;
    background: var(--belo);
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}

.vesti-sekcija .vest-kartica:not(.vest-kartica--velika):hover {
    border-color: var(--plava);
    box-shadow: 0 12px 30px rgba(20, 20, 24, 0.12);
    transform: translateY(-2px);
}

.vesti-sekcija .vest-kartica:not(.vest-kartica--velika) .vest-kartica__slika-link {
    border-radius: 8px;
}

.vesti-sekcija .vest-kartica:not(.vest-kartica--velika) .vest-kartica__slika {
    aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
    .vesti-sekcija .vest-kartica--velika {
        min-height: 420px;
    }
}

/* Lista vesti: kartice */
.vesti .vest-kartica__slika-link {
    border-radius: 10px;
}

/* --- Džudo portali na svetlom -------------------------------------------- */

.portali .portal-kartica {
    border: 1px solid var(--linija);
    background: var(--belo);
    color: var(--tamna);
    box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04);
}

.portali .portal-kartica__domen {
    color: var(--plava);
}

.portali .portal-kartica__opis {
    color: var(--tekst-blag);
}

.portali .portal-kartica__strelica {
    color: var(--plava);
}

.portali .portal-kartica:hover {
    border-color: var(--plava);
    background: var(--plava);
    color: var(--belo);
}

.portali .portal-kartica:hover .portal-kartica__domen,
.portali .portal-kartica:hover .portal-kartica__opis,
.portali .portal-kartica:hover .portal-kartica__strelica {
    color: rgba(255, 255, 255, 0.9);
}

.portali .portal-kartica--uzivo {
    border-color: var(--crvena);
}

/* Brojke: medalje u zlatnoj */
.hero__brojke .brojka:nth-child(2) .brojka__broj { color: var(--belo); }
.hero__brojke .brojka:nth-child(4) .brojka__broj,
.hero__brojke .brojka:nth-child(5) .brojka__broj { color: #ffe38a; }
/* Profil: godina u punoj boji */
.godina__naslov {
    color: var(--plava);
    -webkit-text-stroke: 0;
    font-size: 2rem;
}
/* ==========================================================================
   v7: amblem kluba (grb + prsten koji se okreće), zaglavlja, animacije
   ========================================================================== */

.amblem {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--velicina, 180px);
    aspect-ratio: 1;
}

.amblem__prsten {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: amblem-okret 50s linear infinite;
}

.amblem__pojasevi circle {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}

.amblem__tekst {
    fill: rgba(255, 255, 255, 0.9);
    font-family: var(--font-naslov);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.amblem__grb {
    position: absolute;
    inset: 21%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--belo);
    overflow: hidden;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.45);
    animation: amblem-disanje 4.5s ease-in-out infinite;
}

.amblem__grb img {
    width: 94%;
    height: auto;
}

@keyframes amblem-okret {
    to { transform: rotate(360deg); }
}

@keyframes amblem-disanje {
    50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.07), 0 18px 40px rgba(0, 0, 0, 0.45); }
}

/* Naslovna: amblem pored naziva */
.hero__naslov-red {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 36px);
    margin-bottom: 18px;
}

.hero__naslov-red .hero__naslov {
    margin-bottom: 0;
}

.amblem--hero {
    --velicina: clamp(130px, 15vw, 200px);
}

/* Zaglavlja stranica i vesti: amblem desno */
.naslov-strane__red,
.clanak__zaglavlje-red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.naslov-strane__tekst,
.clanak__zaglavlje-tekst {
    min-width: 0;
}

.amblem--strana {
    --velicina: clamp(120px, 14vw, 190px);
    opacity: 0.95;
}

@media (max-width: 760px) {
    .amblem--strana {
        display: none;
    }

    .hero__naslov-red {
        gap: 16px;
    }

    .amblem--hero {
        --velicina: 104px;
    }

    .amblem--hero .amblem__tekst {
        font-size: 15px;
    }
}

/* Vest: plavo zaglavlje, fotografija se preklapa preko donje ivice */
.clanak__zaglavlje {
    position: relative;
    padding: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 64px);
    background-color: #16181d;
    background-image: var(--tatami), var(--plavi-preliv);
    background-size: 120px 60px, 120px 60px, auto;
    color: var(--belo);
}

.clanak__zaglavlje::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--pojasevi);
}

.clanak__zaglavlje--sa-slikom {
    padding-bottom: clamp(140px, 16vw, 220px);
}

.clanak__zaglavlje .clanak__meta {
    color: rgba(255, 255, 255, 0.75);
}

.clanak__naslov {
    color: var(--belo);
}

.clanak__zaglavlje--sa-slikom + .clanak__slika {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * clamp(110px, 13vw, 180px));
}

.clanak__slika img {
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.clanak__zaglavlje + .kontejner {
    padding-top: clamp(32px, 5vw, 56px);
}

/* Brojke: četiri kolone */
.hero__brojke-mreza {
    grid-template-columns: repeat(4, 1fr);
}

.hero__brojke .brojka:nth-child(3) .brojka__broj,
.hero__brojke .brojka:nth-child(4) .brojka__broj { color: #ffe38a; }

.hero__brojke .brojka:nth-child(5) .brojka__broj { color: var(--belo); }

/* --- Ulazak pri učitavanju ------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .hero__naslov-red,
    .hero__tekst,
    .ulaz,
    .portal-traka,
    .info-klub,
    .zivo,
    .naslov-strane__tekst > *,
    .clanak__zaglavlje-tekst > *,
    .amblem--strana {
        animation: izroni 0.7s ease-out both;
    }

    .hero__tekst { animation-delay: 0.08s; }
    .ulaz:nth-child(1) { animation-delay: 0.14s; }
    .ulaz:nth-child(2) { animation-delay: 0.18s; }
    .ulaz:nth-child(3) { animation-delay: 0.22s; }
    .ulaz:nth-child(4) { animation-delay: 0.26s; }
    .ulaz:nth-child(5) { animation-delay: 0.30s; }
    .ulaz:nth-child(6) { animation-delay: 0.34s; }
    .portal-traka { animation-delay: 0.4s; }
    .info-klub { animation-delay: 0.2s; }
    .zivo { animation-delay: 0.32s; }
    .naslov-strane__tekst > :nth-child(2),
    .clanak__zaglavlje-tekst > :nth-child(2) { animation-delay: 0.08s; }
    .naslov-strane__tekst > :nth-child(3) { animation-delay: 0.16s; }
    .amblem--strana { animation-name: amblem-ulaz; animation-duration: 1s; }

    .amblem--hero {
        animation: amblem-ulaz 1s ease-out both;
    }
}

@keyframes izroni {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes amblem-ulaz {
    from {
        opacity: 0;
        transform: scale(0.85) rotate(-25deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amblem__prsten,
    .amblem__grb {
        animation: none;
    }
}
/* ==========================================================================
   v8: SVETLA TEMA – bele i tople svetle pozadine, crveni i zlatni akcenti
   ========================================================================== */

:root {
    --svetla-topla: #f6f4ef;
    --svetla-hladna: #eef0f3;
    --tatami-tamna: linear-gradient(rgba(22, 24, 29, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 24, 29, 0.045) 1px, transparent 1px);
    --senka-kartica: 0 1px 2px rgba(22, 24, 29, 0.05), 0 10px 30px rgba(22, 24, 29, 0.07);
    --zlato-tekst: #a87c12;
}

/* --- Zaglavlje: belo ----------------------------------------------------- */

/* Bez backdrop-filter: on pretvara zaglavlje u okvir za position:fixed, pa se mobilni meni ne vidi */
.zaglavlje {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--linija);
    color: var(--tamna);
    box-shadow: 0 2px 16px rgba(22, 24, 29, 0.05);
}

.brend,
.brend:hover {
    color: var(--tamna);
}

.brend__grb {
    box-shadow: 0 0 0 1px var(--linija);
}

.brend__mesto {
    color: var(--tekst-blag);
}

.glavni-meni a {
    color: var(--tekst);
}

.glavni-meni > ul > li > a:hover,
.glavni-meni .current-menu-item > a,
.glavni-meni .current-menu-ancestor > a,
.glavni-meni .current_page_parent > a {
    color: var(--plava);
}

.uzivo-link {
    border-color: var(--linija);
    color: var(--tamna);
}

.meni-dugme__linije,
.meni-dugme__linije::before,
.meni-dugme__linije::after {
    background: var(--tamna);
}

@media (max-width: 1100px) {
    .glavni-meni {
        background: var(--belo);
    }

    .glavni-meni a {
        color: var(--tamna);
        border-bottom-color: var(--linija);
    }

    .glavni-meni .sub-menu a {
        color: var(--tekst-blag);
    }

    .glavni-meni .sub-menu a:hover,
    .glavni-meni .sub-menu .current-menu-item > a {
        color: var(--plava);
    }
}

/* --- Hero: svetao -------------------------------------------------------- */

.hero {
    background: radial-gradient(120% 120% at 85% 0%, #ffffff 0%, var(--svetla-topla) 55%, #efece5 100%);
    color: var(--tamna);
}

.hero__slika {
    opacity: 0.09;
    mix-blend-mode: multiply;
}

.hero::before {
    background: linear-gradient(90deg, rgba(246, 244, 239, 0.9) 0%, rgba(246, 244, 239, 0.4) 60%, rgba(246, 244, 239, 0) 100%);
}

.hero::after {
    background-image: var(--tatami-tamna);
}

.hero__kanji {
    color: rgba(22, 24, 29, 0.045);
}

.hero .nadnaslov--svetao {
    color: var(--plava);
}

.hero__naslov-mali {
    color: var(--tekst-blag);
}

.hero__naslov-veliki {
    background: linear-gradient(180deg, #16181d 45%, #3b3f48 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero__tekst {
    color: var(--tekst-blag);
}

/* Brzi ulazi: bele kartice */
.ulaz {
    background: var(--belo);
    border-color: var(--linija);
    color: var(--tamna);
    box-shadow: var(--senka-kartica);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ulaz:hover {
    background: var(--belo);
    border-color: var(--plava);
    color: var(--tamna);
}

.ulaz__tekst span,
.ulaz:hover .ulaz__tekst span {
    color: var(--tekst-blag);
}

.ulaz__strelica {
    color: var(--plava);
}

.ulaz--sat .ulaz__ikona {
    background: #1d5fe6;
    color: #fff;
}

/* Kartica kluba i žive kartice */
.info-klub {
    border-color: var(--linija);
    box-shadow: var(--senka-kartica);
}

.zivo {
    background: var(--belo);
    border-color: var(--linija);
    color: var(--tamna);
    box-shadow: var(--senka-kartica);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.zivo:hover {
    background: var(--belo);
    border-color: var(--plava);
    color: var(--tamna);
}

.zivo__oznaka {
    color: var(--plava);
}

.zivo__tacka {
    background: var(--plava);
}

.zivo__vrednost small,
.zivo__opis {
    color: var(--tekst-blag);
}

.zivo--rang .zivo__vrednost {
    color: var(--plava);
}

.zivo.je-uzivo .zivo__oznaka {
    color: #1f8a4c;
}

/* Brojke: bela traka */
.hero__brojke {
    background: var(--belo);
    border-top: 1px solid var(--linija);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hero__brojke .brojka {
    border-left-color: var(--linija) !important;
    border-top-color: var(--linija) !important;
}

.hero__brojke .brojka__broj,
.hero__brojke .brojka:nth-child(2) .brojka__broj {
    color: var(--tamna);
}

.hero__brojke .brojka:nth-child(3) .brojka__broj,
.hero__brojke .brojka:nth-child(4) .brojka__broj {
    color: var(--zlato-tekst);
}

.hero__brojke .brojka__opis {
    color: var(--tekst-blag);
}

/* --- Amblem na svetlom ---------------------------------------------------- */

.amblem__tekst {
    fill: var(--tamna);
}

.amblem__grb {
    box-shadow: 0 0 0 5px rgba(210, 31, 60, 0.08), 0 14px 34px rgba(22, 24, 29, 0.16);
    animation-name: amblem-disanje-svetlo;
}

@keyframes amblem-disanje-svetlo {
    50% { box-shadow: 0 0 0 14px rgba(210, 31, 60, 0.05), 0 14px 34px rgba(22, 24, 29, 0.16); }
}

/* --- Zaglavlja stranica i vesti: svetla ---------------------------------- */

.naslov-strane,
.clanak__zaglavlje {
    background-color: var(--svetla-topla);
    background-image: var(--tatami-tamna);
    background-size: 120px 60px, 120px 60px;
    color: var(--tamna);
}

.naslov-strane__naslov,
.clanak__naslov {
    color: var(--tamna);
}

.naslov-strane__opis,
.clanak__zaglavlje .clanak__meta {
    color: var(--tekst-blag);
}

.naslov-strane .nadnaslov {
    color: var(--plava);
}

/* --- Sekcije koje su bile tamne: hladna svetla siva ---------------------- */

.sekcija--tamna {
    background-color: var(--svetla-hladna);
    background-image: var(--tatami-tamna);
    background-size: 120px 60px, 120px 60px;
    color: var(--tekst);
}

.sekcija--tamna .sekcija__naslov {
    color: var(--tamna);
}

.sekcija--tamna .nadnaslov--svetao,
.sekcija--tamna .link-strelica {
    color: var(--plava);
}

.poslednji__ime {
    color: var(--tamna);
}

.poslednji__takmicenje {
    color: var(--tekst-blag);
}

.klizac {
    scrollbar-color: rgba(22, 24, 29, 0.25) transparent;
}

.sekcija--svetla {
    background: var(--svetla-topla);
}

/* Termini treninga: bela kartica */
.raspored {
    background: var(--belo);
    border: 1px solid var(--linija);
    box-shadow: var(--senka-kartica);
    color: var(--tamna);
}

.raspored__naslov,
.raspored__grupa-naziv {
    color: var(--tamna);
}

.raspored__naslov .ikona {
    color: var(--plava);
}

.raspored__sala {
    color: var(--tekst-blag);
}

.raspored__termini li {
    border-bottom-color: var(--linija);
}

/* Naše mesto na rang listi: crvena kartica */
.rang-blok__nas {
    background: linear-gradient(120deg, #d21f3c 0%, #a3152b 100%);
}

/* Inicijali i prazne slike: svetlo */
.inicijali,
.vest-kartica__slika--prazna {
    background-color: #e9e6df;
    background-image: var(--tatami-tamna);
    color: var(--tamna);
}

/* Podnožje: tamnosivo (ne crno) */
.podnozje {
    background: #2a2d34;
}
/* v8 dorade */
.hero__slika {
    opacity: 0.05;
}

.clanak__zaglavlje--sa-slikom::after {
    display: none;
}

/* Amblem: omotač lica grba ne menja raspored (koristi se u varijantama animacije) */
.amblem__lice {
    display: contents;
}

/* Amblem: sloj pojaseva (odvojen od natpisa) – podrazumevano se okreće zajedno sa natpisom */
.amblem__pojasi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: amblem-okret 50s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .amblem__pojasi {
        animation: none;
    }
}
/* Amblem, varijanta E (izabrana): natpis u dva uspravna luka miruje,
   okreće se samo prsten pojaseva – deblji lukovi, grb bez „disanja“ */
.amblem--e .amblem__prsten {
    animation: none;
}

.amblem--e .amblem__pojasi {
    animation-duration: 24s;
    will-change: transform;
    backface-visibility: hidden;
}

.amblem--e .amblem__pojasevi circle {
    stroke-width: 7;
}

.amblem--e .amblem__tekst {
    font-size: 12.5px;
    letter-spacing: 0;
}

.amblem--e .amblem__tacka {
    fill: var(--plava);
}

.amblem--e .amblem__grb {
    inset: 20%;
    animation: none;
    box-shadow: 0 0 0 6px rgba(210, 31, 60, 0.07), 0 16px 36px rgba(22, 24, 29, 0.18);
}
/* Profil takmičara: plasmani na pojedinačnoj rang listi Srbije (JSS) */
.profil .profil-rang {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profil-rang__stavka {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--linija);
    border-left: 4px solid var(--tamna);
    border-radius: var(--r);
    background: var(--belo);
}

.profil-rang__stavka--vrh {
    border-left-color: var(--plava);
}

.profil-rang__mesto {
    font: 800 2rem/1 var(--font-naslov);
    color: var(--plava);
}

.profil-rang__opis {
    display: grid;
    line-height: 1.3;
}

.profil-rang__opis span {
    font-size: 0.85rem;
    color: var(--tekst-blag);
}

.profil-rang__izvor {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--tekst-blag);
}

/* Naslovna slika vesti: cela slika bez isecanja i razvlačenja,
   prostor oko nje popunjava ista slika zamućena */
.clanak__okvir {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #16181d;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.clanak__slika--okvir img.clanak__okvir-poz {
    position: absolute;
    inset: -40px;
    width: calc(100% + 80px);
    max-width: none;
    height: calc(100% + 80px);
    max-height: none;
    object-fit: cover;
    filter: blur(28px) brightness(0.55) saturate(1.1);
    border-radius: 0;
    box-shadow: none;
}

.clanak__slika--okvir img.clanak__okvir-slika {
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 640px) {
    .clanak__slika--okvir img.clanak__okvir-slika {
        max-height: 520px;
    }
}

/* Mobilni meni kao harmonika: podstavke se vide tek kad se grupa otvori */
@media (max-width: 1100px) {
    .glavni-meni .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .glavni-meni .menu-item-has-children > a::after {
        display: inline-block;
        width: 9px;
        height: 9px;
        margin: 0 4px 0 12px;
        border-width: 0 2px 2px 0;
        transform: translateY(-3px) rotate(45deg);
        transition: transform 0.2s;
    }

    .glavni-meni .je-otvorena > a::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .js .glavni-meni .menu-item-has-children > .sub-menu {
        display: none;
    }

    .js .glavni-meni .je-otvorena > .sub-menu {
        display: block;
    }

    .glavni-meni > ul > .current-menu-item > a,
    .glavni-meni > ul > .current-menu-ancestor > a,
    .glavni-meni > ul > .current_page_parent > a {
        color: var(--plava);
    }
}

/* --- Sale za trening: mapa + navigacija ------------------------------------ */

.sale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.sala {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--linija);
    border-radius: 12px;
    background: var(--belo);
    color: var(--tamna);
    box-shadow: 0 8px 24px rgba(22, 24, 29, 0.08);
}

.sala__mapa {
    display: block;
    width: 100%;
    height: 240px;
    border: 0;
}

.sala__tekst {
    display: grid;
    gap: 4px;
    padding: 14px 16px 4px;
}

.sala__grupa {
    font: 700 1.15rem var(--font-naslov);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sala__naziv,
.sala__termini {
    color: var(--tekst-blag);
    font-size: 0.88rem;
}

.sala__termini {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sala__termini .ikona {
    width: 15px;
    height: 15px;
}

.sala__navigacija {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin: 10px 16px 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--plava);
    color: var(--belo);
    font: 700 0.85rem var(--font-naslov);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s;
}

.sala__navigacija:hover {
    background: var(--plava-tamna);
    color: var(--belo);
}

.sala__navigacija .ikona {
    width: 16px;
    height: 16px;
}

/* Kolona kontakta na naslovnoj: kartice jedna ispod druge, manje mape */
.sale--kompaktno {
    grid-template-columns: 1fr;
    gap: 12px;
}

.sale--kompaktno .sala__mapa {
    height: 140px;
}

.sale--kompaktno .sala__tekst {
    padding: 10px 14px 2px;
}

.sale--kompaktno .sala__grupa {
    font-size: 1rem;
}

.sale--kompaktno .sala__naziv,
.sale--kompaktno .sala__termini {
    font-size: 0.8rem;
}

.sale--kompaktno .sala__navigacija {
    margin: 8px 14px 12px;
    padding: 6px 12px;
    font-size: 0.78rem;
}

.p-kontakt__podnaslov {
    margin: 0 0 12px;
    color: var(--belo);
    font: 700 1.1rem var(--font-naslov);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.treninzi__sale {
    margin-top: clamp(40px, 6vw, 72px);
    margin-bottom: clamp(40px, 6vw, 72px);
}

/* ==========================================================================
   Tipografija: uski podebljani font samo za naslove, dugmad i velike brojke;
   tabele običnim fontom (Inter) – liste na naslovnoj su u naslovna.css
   ========================================================================== */

.jss-rang__mesto,
.jss-rang__tabela .jss-rang__medalje,
.jss-rang__tabela td.jss-rang__bodovi {
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.jss-rang__tabela td.jss-rang__bodovi {
    font-weight: 700;
}

/* Sale: vodoravne kartice (mapa levo, tekst desno) */
.sale--vodoravno {
    grid-template-columns: 1fr;
    gap: 14px;
}

.sale--vodoravno .sala {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
}

.sale--vodoravno .sala__mapa {
    grid-row: 1 / 3;
    height: 100%;
    min-height: 190px;
}

.sale--vodoravno .sala__tekst {
    align-content: start;
    padding: 16px 18px 4px;
}

.sale--vodoravno .sala__navigacija {
    justify-self: start;
    margin: 8px 18px 16px;
}

@media (max-width: 560px) {
    .sale--vodoravno .sala {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .sale--vodoravno .sala__mapa {
        grid-row: auto;
        height: 170px;
        min-height: 0;
    }
}

/* Mobilni meni: zatvoren meni ne sme da prima dodire. Podmeni je ranije imao
   visibility: visible, pa je otvorena grupa ostajala nevidljiva ali klikabilna
   preko stranice (dodir na takmičara je otvarao stavku menija). */
@media (max-width: 1100px) {
    .glavni-meni {
        pointer-events: none;
    }

    .meni-otvoren .glavni-meni {
        pointer-events: auto;
    }

    .glavni-meni .sub-menu {
        visibility: inherit;
    }
}

/* Podnožje: portal i potpis izrade desno */
.podnozje__desno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.podnozje__izrada {
    opacity: 0.7;
}

.podnozje__izrada a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.podnozje__izrada a:hover {
    opacity: 1;
}

/* Amblem: ivica belog pojasa (malo deblja od pojasa, ispod njega) */
.amblem__pojasevi circle.amblem__ivica {
    stroke-width: 7;
}

.amblem--e .amblem__pojasevi circle.amblem__ivica {
    stroke-width: 9;
}

/* Trener: podaci pored slike, biografija ispod preko cele širine */
.trener__lista {
    display: grid;
    gap: 0;
    margin: 20px 0 24px;
    border-top: 1px solid var(--linija);
}

.trener__lista > div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linija);
}

.trener__lista dt {
    color: var(--tekst-blag);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trener__lista dd {
    margin: 0;
    font-weight: 600;
}

.trener__lista dd a {
    color: inherit;
}

.trener__biografija {
    max-width: 820px;
    margin-top: clamp(40px, 6vw, 64px);
}

/* Predlog (?predlog=1): telefon – animirani grb na sredini zaglavlja, preko donje ivice */
.zaglavlje__portal,
.zaglavlje__amblem {
    display: none;
}

@media (max-width: 640px) {
    body.hero-red .zaglavlje__red {
        position: relative;
        min-height: 64px;
    }

    body.hero-red .brend {
        display: none;
    }

    body.hero-red .zaglavlje__portal {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--zuta, #ffc61a);
        color: #16181d;
    }

    body.hero-red .zaglavlje__portal .ikona {
        width: 20px;
        height: 20px;
    }

    body.hero-red .zaglavlje__amblem {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        z-index: 2;
        transform: translateX(-50%);
        transition: top 0.25s ease;
    }

    body.hero-red .zaglavlje__amblem .amblem {
        --velicina: 104px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 8px 24px rgba(8, 18, 44, 0.35);
        transition: width 0.25s ease;
    }

    /* Posle skrolovanja grb staje u zaglavlje */
    body.hero-red.je-skrolovano .zaglavlje__amblem {
        top: 4px;
    }

    body.hero-red.je-skrolovano .zaglavlje__amblem .amblem {
        --velicina: 56px;
    }

    body.hero-red.je-skrolovano .zaglavlje__amblem .amblem__tekst,
    body.hero-red.je-skrolovano .zaglavlje__amblem .amblem__tacka {
        opacity: 0;
    }

    /* Hero bez drugog grba: centrirano, prostor za grb iz zaglavlja */
    body.hero-red .hero-film {
        padding-top: 64px;
        text-align: center;
    }

    body.hero-red .hero-film .hero-film__amblem {
        display: none;
    }

    body.hero-red .hero-film__glavno {
        grid-template-columns: 1fr;
        grid-template-areas:
            "moto"
            "naslov"
            "tekst"
            "dugmad"
            "trening";
    }

    body.hero-red .hero-film__moto,
    body.hero-red .hero-film__trening {
        justify-content: center;
    }

    body.hero-red .hero-film__naslov {
        font-size: 3.2rem;
    }

    body.hero-red .hero-film__tekst {
        margin-inline: auto;
    }
}

/* Predlog (?predlog=1): veći grb u zaglavlju, unutrašnji grb bliže tekstu prstena */
body.hero-red .zaglavlje__amblem .amblem--e .amblem__grb {
    inset: 15%;
}

@media (max-width: 640px) {
    body.hero-red .zaglavlje__amblem .amblem {
        --velicina: 132px;
    }

    body.hero-red .zaglavlje__amblem .amblem__tekst {
        font-size: 14px;
        font-weight: 800;
    }
}

/* Računar: animirani grb levo u zaglavlju (preko ivice) umesto malog grba – jedan grb na strani */
@media (min-width: 641px) {
    body.hero-red .zaglavlje__red {
        position: relative;
    }

    body.hero-red .zaglavlje__amblem {
        display: block;
        position: absolute;
        top: 8px;
        left: var(--razmak);
        z-index: 2;
        transition: top 0.25s ease;
    }

    body.hero-red .zaglavlje__amblem .amblem {
        --velicina: 128px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 10px 28px rgba(8, 18, 44, 0.3);
        transition: width 0.25s ease;
    }

    body.hero-red .zaglavlje__amblem .amblem__tekst {
        font-size: 14px;
        font-weight: 800;
    }

    body.hero-red .brend {
        padding-left: 144px;
    }

    body.hero-red .brend__grb {
        display: none;
    }

    body.hero-red.je-skrolovano .zaglavlje__amblem .amblem {
        --velicina: 60px;
    }

    body.hero-red.je-skrolovano .zaglavlje__amblem .amblem__tekst,
    body.hero-red.je-skrolovano .zaglavlje__amblem .amblem__tacka {
        opacity: 0;
    }

    body.hero-red.je-skrolovano .brend {
        padding-left: 76px;
    }
}

/* Računar: dok je grb veliki, ime je u prstenu – tekst pored grba tek posle skrolovanja */
@media (min-width: 641px) {
    body.hero-red .brend {
        min-width: 136px;
        padding-left: 136px;
    }

    body.hero-red .brend__tekst {
        display: none;
    }

    body.hero-red.je-skrolovano .brend {
        min-width: 0;
        padding-left: 76px;
    }

    body.hero-red.je-skrolovano .brend__tekst {
        display: block;
    }
}