/* =========================================================
   AKKORD CAMP - glavni CSS
   Boje su uzete sa starog sajta i iz logoa
   ========================================================= */

:root {
    --plava: #0077bb;
    --plava_tamna: #00527f;
    --plava_noc: #053a5c;
    --plava_svetla: #bbe6ff;
    --plava_bleda: #eef8ff;
    --zuta: #ffd203;
    --zuta_tamna: #eab800;
    --zelena: #61ca00;
    --zelena_tamna: #3f9200;
    --crvena: #ea2000;
    --narandzasta: #ff7a1a;
    --ljubicasta: #b200bb;
    --tekst: #1c2b39;
    --tekst_bled: #5d7184;
    --pozadina: #f5fbff;
    --belo: #fff;
    --senka: 0 10px 30px rgba(0, 82, 127, 0.12);
    --senka_jaka: 0 18px 45px rgba(0, 82, 127, 0.22);
    --radius: 22px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tekst);
    background: var(--pozadina);
    overflow-x: hidden;
}

a {
    color: var(--plava);
    transition: all 0.25s;
}

a:hover {
    color: var(--plava_tamna);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4 {
    font-weight: 900;
    line-height: 1.2;
}

.container {
    max-width: 1240px;
}

/* ---------- Dugmad ---------- */

.dugme {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    border: 2px solid transparent;
    white-space: nowrap;
}

.dugme_zuto {
    background: var(--zuta);
    color: var(--plava_noc);
    box-shadow: 0 6px 0 var(--zuta_tamna);
}

.dugme_zuto:hover {
    color: var(--plava_noc);
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--zuta_tamna);
}

.dugme_belo {
    color: var(--belo);
    border-color: rgba(255, 255, 255, 0.7);
}

.dugme_belo:hover {
    background: var(--belo);
    color: var(--plava);
}

.dugme_plavo {
    background: var(--plava);
    color: var(--belo);
    box-shadow: 0 6px 0 var(--plava_tamna);
}

.dugme_plavo:hover {
    color: var(--belo);
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--plava_tamna);
}

/* ---------- Gornja traka ---------- */

.top_info {
    background: var(--plava_noc);
    color: var(--plava_svetla);
    font-size: 14px;
    font-weight: 600;
}

.top_info_red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 40px;
}

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

.top_info a:hover {
    color: var(--zuta);
}

.top_telefoni a {
    margin-right: 18px;
    font-weight: 800;
}

.top_telefoni i,
.top_adresa i {
    color: var(--zuta);
    margin-right: 5px;
}

.top_akcije {
    display: flex;
    align-items: center;
    gap: 18px;
}

.top_akcije i {
    color: var(--zuta);
    margin-right: 3px;
}

.jezik {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    padding: 2px;
}

.jezik a {
    padding: 1px 11px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 13px;
}

.jezik a.aktivan {
    background: var(--zuta);
    color: var(--plava_noc);
}

/* ---------- Header ---------- */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--plava);
    transition: box-shadow 0.25s;
}

.header.skrolovan {
    box-shadow: 0 6px 24px rgba(5, 58, 92, 0.35);
}

.header_red {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 76px;
}

.logo img {
    height: 50px;
    width: auto;
    display: block;
}

.meni {
    margin-left: auto;
}

.meni > ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meni > ul > li {
    position: relative;
}

.meni > ul > li > a {
    display: block;
    padding: 9px 15px;
    border-radius: 30px;
    color: var(--belo);
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
}

.meni > ul > li > a:hover,
.meni > ul > li.otvoren > a {
    background: rgba(255, 255, 255, 0.16);
}

.meni > ul > li > a.aktivan {
    background: var(--belo);
    color: var(--plava);
}

.meni .fa-chevron-down {
    font-size: 11px;
    margin-left: 3px;
}

/* padajuci meni */
.podmeni {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 270px;
    padding: 10px;
    margin-top: 12px;
    background: var(--belo);
    border-radius: 18px;
    box-shadow: var(--senka_jaka);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s;
}

/* nevidljivi most da meni ne nestane dok mis prelazi razmak */
.podmeni:before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.ima_podmeni:hover .podmeni,
.ima_podmeni.otvoren .podmeni {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.podmeni a {
    display: block;
    padding: 9px 14px;
    border-radius: 12px;
    color: var(--tekst);
    font-weight: 700;
    font-size: 15px;
}

.podmeni a:hover {
    background: var(--plava_bleda);
    color: var(--plava);
}

.header_kupi {
    padding: 10px 22px;
    font-size: 15px;
}

/* hamburger */
.hamburger {
    display: none;
    width: 46px;
    height: 46px;
    padding: 12px 10px;
    margin-left: auto;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 3px;
    margin-bottom: 6px;
    border-radius: 3px;
    background: var(--belo);
}

.hamburger span:last-child {
    margin-bottom: 0;
}

/* ---------- Mobilni meni ---------- */

.mobilni_pozadina {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(5, 58, 92, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.mobilni_meni {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 210;
    width: 320px;
    max-width: 88%;
    background: var(--belo);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s;
}

body.meni_otvoren {
    overflow: hidden;
}

body.meni_otvoren .mobilni_pozadina {
    opacity: 1;
    visibility: visible;
}

body.meni_otvoren .mobilni_meni {
    transform: translateX(0);
}

.mobilni_vrh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--plava);
}

.mobilni_vrh img {
    height: 42px;
    width: auto;
}

.mobilni_vrh button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--belo);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.mobilni_telo {
    padding: 20px 18px 30px;
}

.mobilni_telo h3 {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tekst_bled);
    margin: 0 0 10px;
}

.mobilni_sezone {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.mobilni_sezone li {
    width: calc(50% - 4px);
}

.mobilni_sezone a {
    display: block;
    padding: 11px 12px;
    border-radius: 14px;
    color: var(--belo);
    font-weight: 800;
}

.mobilni_linkovi {
    margin-bottom: 20px;
}

.mobilni_linkovi a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--tekst);
    font-weight: 700;
}

.mobilni_linkovi a.aktivan,
.mobilni_linkovi a:hover {
    background: var(--plava_bleda);
    color: var(--plava);
}

.mobilni_jezik {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.mobilni_jezik a {
    padding: 6px 20px;
    border-radius: 30px;
    border: 2px solid var(--plava_svetla);
    font-weight: 800;
}

.mobilni_jezik a.aktivan {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--belo);
}

.mobilni_info {
    padding-top: 18px;
    border-top: 1px solid #dcebf5;
    font-size: 13.5px;
    color: var(--tekst_bled);
}

.mobilni_info p {
    margin-bottom: 8px;
}

.mobilni_info a {
    font-weight: 800;
}

/* ---------- Boje godisnjih doba ---------- */

.prolece {
    background: linear-gradient(135deg, #7ed321, #3f9200);
}

.leto {
    background: linear-gradient(135deg, #ffc400, #ff7a1a);
}

.jesen {
    background: linear-gradient(135deg, #ff8a2b, #e0380a);
}

.zima {
    background: linear-gradient(135deg, #35b6f5, #0077bb);
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    padding: 56px 0 150px;
    background: linear-gradient(135deg, #0077bb 0%, #0a94e0 60%, #19a9f0 100%);
    color: var(--belo);
    overflow: hidden;
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* ukrasni krugovi u pozadini */
.hero_krug {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.krug1 {
    width: 420px;
    height: 420px;
    top: -170px;
    left: -130px;
    background: rgba(255, 255, 255, 0.08);
}

.krug2 {
    width: 240px;
    height: 240px;
    bottom: 40px;
    left: 34%;
    background: rgba(255, 210, 3, 0.16);
}

.krug3 {
    width: 520px;
    height: 520px;
    top: -220px;
    right: -180px;
    background: rgba(97, 202, 0, 0.18);
}

.hero_slogan {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--zuta);
    font-weight: 800;
    font-size: 15px;
}

.hero h1 {
    font-size: 40px;
    margin-bottom: 18px;
}

.hero_opis {
    font-size: 17px;
    color: #e3f4ff;
    margin-bottom: 28px;
}

.hero_dugmad {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero_talas {
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 2;
    width: 100%;
    height: 90px;
    fill: var(--pozadina);
}

/* ---------- Slajder ---------- */

.slider_okvir {
    position: relative;
    border: 6px solid var(--belo);
    border-radius: 26px;
    overflow: hidden;
    background: var(--belo);
    box-shadow: 0 24px 50px rgba(5, 58, 92, 0.4);
    transform: rotate(1deg);
}

.slider_traka {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.slajd {
    flex: 0 0 100%;
    display: block;
}

.slajd img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
}

.slider_strelica {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--plava);
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.25s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.slider_okvir:hover .slider_strelica,
.slider_strelica:focus {
    opacity: 1;
}

.slider_strelica:hover {
    background: var(--zuta);
    color: var(--plava_noc);
}

.slider_strelica.levo {
    left: 12px;
}

.slider_strelica.desno {
    right: 12px;
}

.slider_tacke {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.slider_tacke button {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.3s;
}

.slider_tacke button.aktivan {
    width: 32px;
    background: var(--zuta);
}

/* ---------- Odbrojavanje ---------- */

.odbrojavanje_sekcija {
    position: relative;
    z-index: 5;
    margin-top: -90px;
}

.odbrojavanje {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 26px 34px;
    background: var(--belo);
    border-radius: var(--radius);
    box-shadow: var(--senka_jaka);
}

.odbrojavanje_naslov {
    flex: 1;
}

.odbrojavanje_datum {
    display: inline-block;
    padding: 3px 14px;
    margin-bottom: 8px;
    border-radius: 30px;
    background: #fff1e6;
    color: #d24a06;
    font-weight: 800;
    font-size: 14px;
}

.odbrojavanje h2 {
    font-size: 22px;
    margin: 0;
}

.odbrojavanje_brojevi {
    display: flex;
    gap: 10px;
}

.odbrojavanje_brojevi div {
    min-width: 76px;
    padding: 10px 8px 8px;
    border-radius: 16px;
    background: var(--plava);
    color: var(--belo);
    text-align: center;
}

.odbrojavanje_brojevi div:first-child {
    background: var(--zuta);
    color: var(--plava_noc);
}

.odbrojavanje_brojevi b {
    display: block;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
}

.odbrojavanje_brojevi span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.odbrojavanje_cena {
    flex: 1;
    text-align: right;
}

.odbrojavanje_cena p {
    margin-bottom: 12px;
    font-weight: 800;
    font-size: 16px;
    color: var(--crvena);
}

/* ---------- Sekcije (zajednicko) ---------- */

.sekcija {
    padding: 70px 0;
}

.naslov_sekcije {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}

.naslov_sekcije h2 {
    position: relative;
    display: inline-block;
    font-size: 34px;
    margin: 0;
    padding-bottom: 16px;
}

/* talasasta zuta crta ispod naslova */
.naslov_sekcije h2:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 90px;
    height: 6px;
    margin-left: -45px;
    border-radius: 6px;
    background: var(--zuta);
}

.naslov_sekcije p {
    margin: 16px 0 0;
    color: var(--tekst_bled);
    font-size: 17px;
}

.nadnaslov {
    display: block;
    margin-bottom: 8px;
    color: var(--plava);
    font-weight: 800;
    font-size: 15px;
}

/* animacija pri skrolovanju (ukljucuje se samo ako radi JS) */
.js .animacija {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s, transform 0.6s;
}

.js .animacija.vidljivo {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Kanikule (godisnja doba) ---------- */

.sezone_sekcija {
    padding-top: 64px;
}

.sezona {
    position: relative;
    display: block;
    padding: 28px 24px 24px;
    margin-bottom: 30px;
    border-radius: var(--radius);
    color: var(--belo);
    overflow: hidden;
    box-shadow: var(--senka);
}

.sezona > i {
    display: block;
    font-size: 40px;
    margin-bottom: 26px;
}

/* velika providna ikonica u uglu */
.sezona:after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    transition: transform 0.4s;
}

.sezona span {
    font-size: 24px;
    font-weight: 900;
}

.sezona em {
    position: absolute;
    right: 20px;
    bottom: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    text-align: center;
    line-height: 38px;
    font-style: normal;
    transition: all 0.25s;
}

.sezona:hover {
    color: var(--belo);
    transform: translateY(-6px);
    box-shadow: var(--senka_jaka);
}

.sezona:hover:after {
    transform: scale(1.4);
}

.sezona:hover em {
    background: var(--belo);
    color: var(--tekst);
}

/* tri brza linka */
.brzi_link {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px 14px 14px;
    margin-bottom: 20px;
    background: var(--belo);
    border-radius: 100px;
    box-shadow: var(--senka);
    color: var(--tekst);
}

.brzi_link img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--zuta);
}

.brzi_link span {
    flex: 1;
    font-size: 20px;
    font-weight: 900;
}

.brzi_link > i {
    font-size: 28px;
    color: var(--plava_svetla);
    transition: all 0.25s;
}

.brzi_link:hover {
    color: var(--plava);
    transform: translateY(-4px);
    box-shadow: var(--senka_jaka);
}

.brzi_link:hover > i {
    color: var(--plava);
    transform: translateX(4px);
}

/* ---------- Zasto Akkord ---------- */

.zasto_sekcija {
    background: var(--belo);
}

.zasto {
    height: calc(100% - 30px);
    padding: 30px 26px;
    margin-bottom: 30px;
    border-radius: var(--radius);
    background: var(--pozadina);
    border: 2px solid transparent;
    transition: opacity 0.6s, transform 0.6s, border-color 0.25s, background 0.25s;
}

.zasto:hover {
    border-color: var(--plava_svetla);
    background: var(--belo);
}

.zasto_ikonica {
    width: 68px;
    height: 68px;
    margin-bottom: 20px;
    border-radius: 20px;
    color: var(--belo);
    font-size: 28px;
    text-align: center;
    line-height: 68px;
    transform: rotate(-6deg);
}

.zasto_ikonica.plava {
    background: var(--plava);
}

.zasto_ikonica.zelena {
    background: var(--zelena);
}

.zasto_ikonica.zuta {
    background: var(--zuta);
    color: var(--plava_noc);
}

.zasto_ikonica.crvena {
    background: var(--crvena);
}

.zasto h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.zasto p {
    margin: 0;
    color: var(--tekst_bled);
    font-size: 15.5px;
}

/* ---------- Programi (Sezona 2026) ---------- */

.filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

.filter button {
    padding: 9px 24px;
    border: 2px solid var(--plava_svetla);
    border-radius: 30px;
    background: var(--belo);
    color: var(--plava);
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s;
}

.filter button:hover {
    border-color: var(--plava);
}

.filter button.aktivan {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--belo);
}

.program_kolona {
    margin-bottom: 30px;
}

.program_kolona.sakriven {
    display: none;
}

.program {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--belo);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--senka);
    transition: opacity 0.6s, transform 0.6s, box-shadow 0.3s;
}

.program:hover {
    box-shadow: var(--senka_jaka);
}

.program_vrh {
    position: relative;
}

.program_slika {
    display: block;
    overflow: hidden;
}

/* slika ide cela, bez secenja (na nekima su logoi uz ivicu) */
.program_slika img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s;
}

.program:hover .program_slika img {
    transform: scale(1.06);
}

/* oznaka godisnjeg doba preko slike (dole levo, da ne pokriva logoe) */
.oznaka {
    position: absolute;
    bottom: 14px;
    left: 16px;
    padding: 4px 14px;
    border-radius: 30px;
    color: var(--belo);
    font-weight: 800;
    font-size: 13.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.oznaka:hover {
    color: var(--belo);
    transform: scale(1.06);
}

.program_telo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.program_meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tekst_bled);
}

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

.program_meta a:hover {
    text-decoration: underline;
}

.program h3 {
    font-size: 20px;
    margin-bottom: 14px;
}

.program h3 a {
    color: var(--tekst);
}

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

.program_podaci {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.program_podaci li {
    padding: 5px 13px;
    border-radius: 12px;
    background: var(--plava_bleda);
    font-weight: 800;
    font-size: 14.5px;
}

.program_podaci li span {
    font-weight: 600;
    color: var(--tekst_bled);
}

.program_podaci li.cena {
    background: #fff6cc;
}

.program_telo p {
    color: var(--tekst_bled);
    font-size: 15.5px;
    margin-bottom: 20px;
}

.program_dugmad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: auto;
}

.program_dugmad .dugme {
    padding: 10px 20px;
    font-size: 15px;
}

.dugme_link {
    font-weight: 800;
}

.dugme_link i {
    margin-left: 3px;
    transition: transform 0.25s;
}

.dugme_link:hover i {
    transform: translateX(4px);
}

/* "Zadati pitanje" se vidi samo na telefonu i tabletu (kao na starom sajtu) */
.dugme_pitanje {
    display: none;
    width: 100%;
    padding: 9px 20px;
    border: 2px solid var(--plava_svetla);
    border-radius: 50px;
    text-align: center;
    font-weight: 800;
}

/* ---------- Ture ---------- */

.ture_sekcija {
    background: var(--belo);
}

.tura {
    position: relative;
    display: block;
    margin-bottom: 30px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--senka);
}

.tura img {
    display: block;
    width: 100%;
    transition: transform 0.6s;
}

.tura:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 60%;
    background: linear-gradient(to top, rgba(5, 58, 92, 0.85), rgba(5, 58, 92, 0));
}

.tura_naziv {
    position: absolute;
    left: 26px;
    bottom: 20px;
    z-index: 2;
    color: var(--belo);
    font-size: 26px;
    font-weight: 900;
}

.tura_naziv i {
    margin-left: 8px;
    font-size: 20px;
    color: var(--zuta);
    transition: transform 0.25s;
}

.tura:hover img {
    transform: scale(1.06);
}

.tura:hover .tura_naziv i {
    transform: translateX(6px);
}

/* ---------- Svi pravci ---------- */

.pravci {
    column-count: 3;
    column-gap: 30px;
}

.pravac {
    display: inline-block;
    width: 100%;
    padding: 24px 26px;
    margin-bottom: 30px;
    background: var(--belo);
    border-radius: var(--radius);
    box-shadow: var(--senka);
    break-inside: avoid;
}

.pravac h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    margin-bottom: 14px;
}

.pravac h3 i {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--plava);
    color: var(--belo);
    font-size: 18px;
    text-align: center;
    line-height: 44px;
}

/* ikonice u razlicitim bojama, redom */
.pravac:nth-child(5n+2) h3 i {
    background: var(--zelena);
}

.pravac:nth-child(5n+3) h3 i {
    background: var(--zuta);
    color: var(--plava_noc);
}

.pravac:nth-child(5n+4) h3 i {
    background: var(--crvena);
}

.pravac:nth-child(5n+5) h3 i {
    background: var(--ljubicasta);
}

.pravac li a {
    position: relative;
    display: block;
    padding: 7px 0 7px 20px;
    color: var(--tekst);
    font-weight: 700;
    font-size: 15.5px;
    border-top: 1px dashed #d5e6f2;
}

.pravac li:first-child a {
    border-top: 0;
}

.pravac li a:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--plava_svetla);
    transition: all 0.25s;
}

.pravac li a:hover {
    color: var(--plava);
    padding-left: 25px;
}

.pravac li a:hover:before {
    background: var(--zuta);
}

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

.kontakt_sekcija {
    padding: 0 0 70px;
}

.kontakt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 34px 40px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0077bb, #0a94e0);
    color: var(--belo);
    box-shadow: var(--senka_jaka);
}

.kontakt_telefoni {
    margin-bottom: 6px;
}

.kontakt_telefoni a {
    display: inline-block;
    margin-right: 22px;
    color: var(--belo);
    font-size: 27px;
    font-weight: 900;
}

.kontakt_telefoni a:hover {
    color: var(--zuta);
}

.kontakt_adresa {
    margin: 0;
    color: #e3f4ff;
    font-weight: 600;
}

.kontakt_adresa i {
    color: var(--zuta);
    margin-right: 4px;
}

.kontakt_akcije {
    display: flex;
    gap: 12px;
}

.kontakt_akcije a {
    width: 84px;
    padding: 14px 4px 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--belo);
    text-align: center;
    font-size: 13.5px;
    font-weight: 800;
}

.kontakt_akcije i {
    display: block;
    font-size: 24px;
    margin-bottom: 6px;
    color: var(--zuta);
}

.kontakt_akcije a:hover {
    background: var(--zuta);
    color: var(--plava_noc);
    transform: translateY(-4px);
}

.kontakt_akcije a:hover i {
    color: var(--plava_noc);
}

/* ---------- Footer ---------- */

.footer {
    padding: 26px 0 30px;
    background: var(--plava_noc);
    color: #b9d6e8;
    font-size: 15px;
}

.putanja {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0 0 22px;
    margin: 0 0 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
}

.putanja .aktivan {
    color: var(--belo);
    font-weight: 700;
}

.footer_logo img {
    width: 220px;
    margin-bottom: 22px;
}

.mreze {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.mreze a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--belo);
    font-size: 18px;
    text-align: center;
    line-height: 44px;
}

.mreze a:hover {
    background: var(--zuta);
    color: var(--plava_noc);
    transform: translateY(-3px);
}

.footer h4 {
    color: var(--belo);
    font-size: 17px;
    margin-bottom: 14px;
}

.footer_linkovi {
    margin-bottom: 30px;
}

.footer_linkovi li {
    margin-bottom: 7px;
}

.footer_linkovi a {
    color: #b9d6e8;
}

.footer_linkovi a:hover {
    color: var(--zuta);
}

.footer_kontakt i {
    width: 20px;
    color: var(--zuta);
}

.footer_prava {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13.5px;
    color: #8fb3c9;
}

.footer_prava p {
    margin-bottom: 6px;
}

.footer_prava a {
    color: var(--plava_svetla);
}

.footer_prava a:hover {
    color: var(--zuta);
}

/* ---------- Donja traka (mobilni) i dugme na vrh ---------- */

.donja_traka {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--belo);
    box-shadow: 0 -6px 20px rgba(5, 58, 92, 0.18);
}

.donja_traka a {
    flex: 1;
    padding: 9px 2px 7px;
    color: var(--plava);
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
}

.donja_traka i {
    display: block;
    font-size: 19px;
    margin-bottom: 3px;
}

.donja_traka a.kupi {
    background: var(--zuta);
    color: var(--plava_noc);
}

#na_vrh {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--zuta);
    color: var(--plava_noc);
    text-align: center;
    line-height: 48px;
    box-shadow: 0 6px 18px rgba(5, 58, 92, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

#na_vrh.vidljivo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#na_vrh:hover {
    background: var(--plava);
    color: var(--belo);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {
    .meni > ul > li > a {
        padding: 8px 10px;
        font-size: 14.5px;
    }

    .header_red {
        gap: 14px;
    }

    .logo img {
        height: 42px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .odbrojavanje {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .odbrojavanje_naslov {
        flex: 0 0 100%;
    }

    .odbrojavanje_cena {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: left;
    }

    .odbrojavanje_cena p {
        margin: 0;
        max-width: 260px;
    }

    .kontakt {
        flex-direction: column;
        text-align: center;
    }

    .kontakt_telefoni a {
        margin: 0 11px;
    }
}

@media (max-width: 991px) {
    .meni,
    .header_kupi,
    .top_adresa {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .header_red {
        height: 66px;
    }

    .hero {
        padding: 40px 0 140px;
        text-align: center;
    }

    .hero_dugmad {
        justify-content: center;
        margin-bottom: 40px;
    }

    .slider_okvir {
        transform: none;
    }

    .slider_strelica {
        opacity: 1;
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    .pravci {
        column-count: 2;
    }

    .dugme_pitanje {
        display: block;
    }

    .sekcija {
        padding: 54px 0;
    }
}

@media (max-width: 767px) {
    body {
        padding-bottom: 58px;
    }

    .top_akcije a {
        display: none;
    }

    .top_telefoni a {
        margin-right: 10px;
    }

    .donja_traka {
        display: flex;
    }

    #na_vrh {
        bottom: 74px;
        right: 14px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero_opis {
        font-size: 16px;
    }

    .slider_okvir {
        border-width: 4px;
        border-radius: 18px;
    }

    .odbrojavanje {
        padding: 22px 18px;
        gap: 18px;
    }

    .odbrojavanje h2 {
        font-size: 19px;
    }

    .odbrojavanje_brojevi div {
        min-width: 64px;
    }

    .odbrojavanje_brojevi b {
        font-size: 24px;
    }

    .odbrojavanje_brojevi span {
        font-size: 10.5px;
    }

    .odbrojavanje_cena {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .naslov_sekcije h2 {
        font-size: 26px;
    }

    .sezona {
        padding: 20px 16px 18px;
        margin-bottom: 16px;
    }

    .sezona > i {
        font-size: 30px;
        margin-bottom: 16px;
    }

    .sezona span {
        font-size: 19px;
    }

    .sezona em {
        right: 12px;
        bottom: 14px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 13px;
    }

    .sezone_sekcija .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .sezone_sekcija .row > div {
        padding-left: 8px;
        padding-right: 8px;
    }

    .brzi_linkovi {
        margin-top: 14px;
    }

    .brzi_link img {
        width: 66px;
        height: 66px;
    }

    .brzi_link span {
        font-size: 18px;
    }

    .pravci {
        column-count: 1;
    }

    .tura_naziv {
        left: 18px;
        bottom: 14px;
        font-size: 21px;
    }

    .kontakt {
        padding: 28px 18px;
    }

    .kontakt_telefoni a {
        display: block;
        margin: 0;
        font-size: 24px;
    }

    .kontakt_akcije {
        display: none;
    }

    .kontakt_sekcija {
        padding-bottom: 54px;
    }
}

@media (max-width: 380px) {
    .top_telefoni a + a {
        display: none;
    }

    .odbrojavanje_brojevi {
        gap: 6px;
    }

    .odbrojavanje_brojevi div {
        min-width: 58px;
    }
}

/* korisnici koji su iskljucili animacije */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .animacija {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .slider_traka {
        transition: none;
    }
}

/* =========================================================
   UNUTRASNJE STRANE
   ========================================================= */

/* ---------- Vrh strane (putanja, naslov) ---------- */

.strana_vrh {
    position: relative;
    padding: 30px 0 38px;
    background: linear-gradient(135deg, #0077bb 0%, #0a94e0 70%, #19a9f0 100%);
    color: var(--belo);
    overflow: hidden;
}

.strana_vrh:before {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(97, 202, 0, 0.18);
}

.strana_vrh:after {
    content: "";
    position: absolute;
    left: 30%;
    bottom: -140px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 210, 3, 0.16);
}

.strana_vrh .container {
    position: relative;
    z-index: 2;
}

.strana_vrh .putanja {
    padding: 0;
    margin: 0 0 18px;
    border: 0;
    flex-wrap: wrap;
    color: #bbe6ff;
}

.strana_vrh .putanja a {
    color: var(--belo);
}

.strana_vrh .putanja a:hover {
    color: var(--zuta);
}

.strana_vrh .putanja li + li + li:before {
    content: "\203A";
    margin-right: 8px;
    color: #bbe6ff;
}

.strana_vrh h1 {
    max-width: 960px;
    font-size: 34px;
    margin: 0;
}

.oznake {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* oznaka u vrhu strane nije preko slike */
.oznaka_vrh {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.strana_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: #dff2ff;
}

.strana_meta a {
    color: var(--zuta);
}

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

/* ---------- Sadrzaj ---------- */

.strana {
    padding: 44px 0 70px;
}

.clanak,
.kategorija_opis,
.kategorija_seo,
.nema_ponuda,
.mapa_sajta {
    padding: 30px 34px 34px;
    margin-bottom: 30px;
    background: var(--belo);
    border-radius: var(--radius);
    box-shadow: var(--senka);
}

.clanak_slika {
    margin: 0 0 22px;
}

.clanak_slika img {
    display: block;
    width: 100%;
    border-radius: 18px;
}

.clanak_podaci {
    margin-bottom: 22px;
}

.clanak_podaci li {
    font-size: 16px;
}

/* tekst clanka (dolazi iz starog sajta, zato opsti selektori) */
.clanak_tekst,
.kategorija_tekst,
.kategorija_seo,
.program_tekst {
    font-size: 16.5px;
    line-height: 1.7;
}

.clanak_tekst h2,
.clanak_tekst h3,
.clanak_tekst h4,
.clanak_tekst h5,
.kategorija_tekst h2,
.kategorija_seo h3 {
    margin: 30px 0 14px;
}

.clanak_tekst h2 { font-size: 27px; }
.clanak_tekst h3 { font-size: 23px; }
.clanak_tekst h4 { font-size: 20px; }
.clanak_tekst h5 { font-size: 17.5px; color: var(--plava); }

.clanak_tekst > :first-child,
.kategorija_tekst > :first-child {
    margin-top: 0;
}

.clanak_tekst p,
.clanak_tekst ul,
.clanak_tekst ol,
.kategorija_tekst p {
    margin-bottom: 16px;
}

.clanak_tekst ol,
.kategorija_seo ul {
    padding-left: 24px;
}

.clanak_tekst ul {
    list-style: none;
    padding-left: 4px;
}

.clanak_tekst ul > li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 6px;
}

.clanak_tekst ul > li:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--zuta);
    box-shadow: 0 0 0 3px #fff6cc;
}

.clanak_tekst ol {
    list-style: decimal;
}

.clanak_tekst ol > li {
    margin-bottom: 6px;
    padding-left: 4px;
}

.clanak_tekst blockquote,
.kategorija_seo blockquote {
    padding: 16px 22px;
    margin: 0 0 18px;
    border-left: 5px solid var(--zuta);
    border-radius: 0 14px 14px 0;
    background: var(--plava_bleda);
}

.clanak_tekst blockquote p:last-child {
    margin-bottom: 0;
}

.clanak_tekst hr {
    margin: 28px 0;
    border: 0;
    border-top: 2px dashed #d5e6f2;
}

.clanak_tekst hr + hr {
    display: none;
}

.clanak_tekst img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.clanak_tekst img.akk_cost {
    display: inline;
    width: 22px;
    border-radius: 0;
    vertical-align: middle;
}

.clanak_tekst a:not(.dugme):not(.dugme_link):not(.galerija_slika) {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--plava_svetla);
    text-underline-offset: 3px;
}

.clanak_tekst a:not(.dugme):hover {
    text-decoration-color: var(--plava);
}

.clanak_tekst .dugme {
    margin: 6px 6px 6px 0;
}

.clanak_tekst .akk_price,
.clanak_tekst .akk_price_value {
    color: var(--plava);
    font-weight: 800;
    white-space: nowrap;
}

.clanak_tekst .akkevents {
    padding: 16px;
    border-radius: 14px;
    background: var(--plava_bleda);
}

.clanak_tekst .akk_camp_prices h3 {
    margin-top: 10px;
}

.clanak_tekst .small {
    font-size: 14px;
}

/* ---------- Tabovi ---------- */

.tabovi {
    margin: 28px 0;
}

.tabovi_naslovi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tab_dugme {
    padding: 9px 20px;
    border: 2px solid var(--plava_svetla);
    border-radius: 30px;
    background: var(--belo);
    color: var(--plava);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s;
}

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

.tab_dugme.aktivan {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--belo);
}

.tabovi_sadrzaj .tab {
    display: none;
    padding: 22px 24px;
    border-radius: 18px;
    background: var(--pozadina);
}

.tabovi_sadrzaj .tab.aktivan {
    display: block;
    animation: tab_ulaz 0.35s;
}

.tabovi_sadrzaj .tab > :first-child {
    margin-top: 0;
}

@keyframes tab_ulaz {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Galerija i uvecana slika ---------- */

.galerija {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 10px 0 20px;
}

.galerija_slika {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #e3eef5;
}

.galerija_slika img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 0.4s;
}

.galerija_slika:hover img {
    transform: scale(1.08);
}

.svetlo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 30, 48, 0.92);
}

.svetlo.otvoren {
    display: flex;
}

.svetlo img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.svetlo button {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--belo);
    font-size: 20px;
    cursor: pointer;
    transition: background 0.25s;
}

.svetlo button:hover {
    background: var(--zuta);
    color: var(--plava_noc);
}

.svetlo_zatvori { top: 18px; right: 18px; }
.svetlo_levo { left: 18px; top: 50%; margin-top: -25px; }
.svetlo_desno { right: 18px; top: 50%; margin-top: -25px; }

.svetlo_brojac {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    color: #bbe6ff;
    font-weight: 700;
}

/* ---------- Video i mape ---------- */

.okvir_video,
.okvir_mapa {
    margin: 18px 0 24px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--senka);
}

.okvir_video {
    aspect-ratio: 16 / 9;
}

.okvir_video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.okvir_mapa iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* ---------- Tabele ---------- */

.tabela_okvir {
    margin: 10px 0 22px;
    overflow-x: auto;
    border-radius: 14px;
    box-shadow: var(--senka);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--belo);
    font-size: 15px;
}

.tabela th {
    padding: 12px 14px;
    background: var(--plava);
    color: var(--belo);
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.tabela td {
    padding: 10px 14px;
    border-top: 1px solid #e3eef5;
    vertical-align: top;
}

.tabela tbody tr:nth-child(even) td {
    background: #f7fbff;
}

.tabela td p:last-child {
    margin-bottom: 0;
}

.tabela_cene td[data-label="Цена"] {
    color: var(--plava);
    font-weight: 800;
    white-space: nowrap;
}

/* ---------- Forma za rezervaciju ---------- */

.rezervacija {
    margin: 34px 0 10px;
    padding: 28px 30px 30px;
    border-radius: 20px;
    background: var(--plava_bleda);
    border: 2px solid var(--plava_svetla);
}

.rezervacija h3 {
    margin: 0 0 18px;
    font-size: 24px;
    color: var(--plava);
}

.forma {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.forma .web {
    display: none;
}

.polje label {
    display: block;
    margin-bottom: 5px;
    font-size: 14.5px;
    font-weight: 800;
}

.polje input,
.polje select,
.polje textarea {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #d5e6f2;
    border-radius: 12px;
    background: var(--belo);
    font-family: inherit;
    font-size: 15.5px;
    color: var(--tekst);
    transition: border-color 0.25s;
}

.polje input:focus,
.polje select:focus,
.polje textarea:focus {
    outline: 0;
    border-color: var(--plava);
}

.polje_puno,
.forma_napomena,
.forma_tekst,
.forma .dugme {
    grid-column: 1 / -1;
}

.polje_kvadratic label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.polje_kvadratic input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: 0 0 20px;
}

.obavezno {
    color: var(--crvena);
}

.forma_napomena {
    margin: 0;
    font-size: 13.5px;
    color: var(--tekst_bled);
}

.forma_tekst {
    margin: 0;
    font-weight: 800;
}

.forma .dugme {
    justify-self: start;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.forma_hvala {
    display: none;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #e6f9d7;
    color: var(--zelena_tamna);
    font-weight: 800;
}

.forma_hvala i {
    margin-right: 6px;
}

.rezervacija.poslato .forma_hvala {
    display: block;
}

/* ---------- Bocna kolona ---------- */

.bocni .pravac {
    display: block;
    padding: 22px 24px;
    margin-bottom: 22px;
}

.bocni .pravac h3 {
    font-size: 17px;
}

.bocni .pravac h3:before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--zuta);
    color: var(--plava_noc);
    text-align: center;
    line-height: 34px;
    font-size: 14px;
}

.bocni .pravac li a {
    font-size: 15px;
}

.bocni .pravac li a.aktivan {
    color: var(--plava);
}

.bocni .pravac li a.aktivan:before {
    background: var(--plava);
}

.bocni_kontakt {
    padding: 24px;
    margin-bottom: 22px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0077bb, #0a94e0);
    color: var(--belo);
    box-shadow: var(--senka);
}

.bocni_kontakt h3 {
    font-size: 18px;
    margin-bottom: 14px;
}

.bocni_telefon {
    display: block;
    margin-bottom: 8px;
    color: var(--belo);
    font-weight: 800;
}

.bocni_telefon i {
    width: 22px;
    color: var(--zuta);
}

.bocni_telefon:hover {
    color: var(--zuta);
}

.bocni_kontakt .dugme {
    margin-top: 10px;
}

.bocni .mreze {
    justify-content: center;
}

.bocni .mreze a {
    background: var(--belo);
    color: var(--plava);
    box-shadow: var(--senka);
}

/* ---------- Kategorije i liste ---------- */

.kategorija_opis {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.kategorija_slika {
    flex: 0 0 300px;
    width: 300px;
    border-radius: 16px;
}

.kategorija_tekst {
    flex: 1;
}

.kategorija_tekst h2 {
    font-size: 26px;
    margin-bottom: 14px;
}

.sezona_naslov {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 24px;
    font-size: 24px;
}

.sezona_naslov:after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--plava_svetla);
}

.strana .program_kolona {
    margin-bottom: 30px;
}

.program_tekst p:last-child {
    margin-bottom: 0;
}

.program_tekst {
    margin-bottom: 20px;
    color: var(--tekst_bled);
    font-size: 15.5px;
}

.lista_clanaka {
    margin-bottom: 30px;
}

.lista_clanaka li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: var(--belo);
    color: var(--tekst);
    font-weight: 700;
    box-shadow: var(--senka);
}

.lista_clanaka li a > i {
    color: var(--plava_svetla);
    font-size: 20px;
    transition: all 0.25s;
}

.lista_clanaka li a span {
    flex: 1;
}

.lista_clanaka li a time {
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--plava_bleda);
    color: var(--plava);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.lista_clanaka li a:hover {
    color: var(--plava);
    transform: translateX(6px);
}

.lista_clanaka li a:hover > i {
    color: var(--zuta);
}

.nema_ponuda {
    text-align: center;
    font-size: 17px;
}

.nema_ponuda > i {
    display: block;
    margin-bottom: 14px;
    font-size: 54px;
    color: var(--plava_svetla);
}

.nema_ponuda .dugme {
    margin: 10px 4px;
}

.kategorija_seo h3 {
    font-size: 22px;
    margin-bottom: 14px;
}

/* ---------- Mapa sajta ---------- */

.mapa_sajta > ul {
    column-count: 3;
    column-gap: 30px;
}

.mapa_sajta > ul > li {
    break-inside: avoid;
    margin-bottom: 16px;
}

.mapa_sajta li.mapa_naslov {
    margin: 10px 0 12px;
    font-size: 19px;
    font-weight: 900;
    color: var(--plava);
}

.mapa_sajta > ul > li > a {
    display: block;
    padding: 8px 14px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--plava_bleda);
    color: var(--tekst);
    font-weight: 800;
}

.mapa_sajta > ul > li > a:hover {
    background: var(--plava);
    color: var(--belo);
}

.mapa_sajta ul ul {
    padding-left: 14px;
    margin-bottom: 8px;
}

.mapa_sajta ul ul li a {
    display: block;
    padding: 4px 0 4px 14px;
    border-left: 2px solid #d5e6f2;
    color: var(--tekst_bled);
    font-size: 14.5px;
    font-weight: 600;
}

.mapa_sajta ul ul li a:hover {
    border-color: var(--zuta);
    color: var(--plava);
}

.greska_404 {
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Responsive za unutrasnje strane ---------- */

@media (max-width: 1199px) {
    .mapa_sajta > ul {
        column-count: 2;
    }
}

@media (max-width: 991px) {
    .bocni {
        margin-top: 10px;
    }

    .strana_vrh h1 {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .strana {
        padding: 30px 0 50px;
    }

    .clanak,
    .kategorija_opis,
    .kategorija_seo,
    .nema_ponuda,
    .mapa_sajta {
        padding: 20px 18px 24px;
        border-radius: 18px;
    }

    .strana_vrh {
        padding: 22px 0 28px;
    }

    .strana_vrh h1 {
        font-size: 24px;
    }

    .clanak_tekst,
    .kategorija_tekst {
        font-size: 15.5px;
    }

    .clanak_tekst h2 { font-size: 23px; }
    .clanak_tekst h3 { font-size: 20px; }
    .clanak_tekst h4 { font-size: 18px; }

    .forma {
        grid-template-columns: 1fr;
    }

    .rezervacija {
        padding: 20px 16px 22px;
    }

    .kategorija_opis {
        flex-direction: column;
        gap: 16px;
    }

    .kategorija_slika {
        flex: none;
        width: 100%;
    }

    .galerija {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 6px;
    }

    .mapa_sajta > ul {
        column-count: 1;
    }

    .tabovi_sadrzaj .tab {
        padding: 16px 14px;
    }

    .okvir_mapa iframe {
        height: 320px;
    }

    .lista_clanaka li a {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .svetlo_levo { left: 8px; }
    .svetlo_desno { right: 8px; }
}

.naslov_ikona {
    margin-right: 6px;
    color: var(--zuta);
}