/* Novi izgled (P1–P16) — Ino prihvatio SVE 05.10.2026. (docs/ODLUKE.md §4a).
   <html class="novo"> je uvijek postavljen; bez te klase stranica bi izgledala kao stari Wix. */

.it-novo, .vk-meta, .vk-vise, .d-novo, .kopiraj, .natrag, .pk-ik { display: none; }
html.novo .it-sada, html.novo .d-sada { display: none; }
html.novo .d-novo { display: inline; }

/* ---------- P1 Gumbi i okviri: zaobljeno + efekti ---------- */
html.novo .gumb { border-radius: 8px; gap: 10px; box-shadow: 0 6px 16px rgba(13,43,78,.28); transition: transform .2s, box-shadow .2s, background .2s; }
html.novo .gumb::after { content: '→'; font-size: 14px; letter-spacing: 0; transition: transform .2s; }
html.novo .gumb:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(13,43,78,.32); }
html.novo .gumb:hover::after { transform: translateX(4px); }
html.novo .kartica-strelica { border-radius: 12px; border-left: 0; box-shadow: inset 3px 0 0 var(--plava), 0 1px 2px rgba(13,43,78,.06), 0 6px 18px rgba(13,43,78,.08); transition: transform .2s, box-shadow .2s; }
html.novo .kartica-strelica:hover { transform: translateY(-2px); box-shadow: inset 3px 0 0 var(--plava), 0 2px 4px rgba(13,43,78,.06), 0 12px 26px rgba(13,43,78,.12); }
html.novo .kartica-strelica .str { transition: transform .2s, color .2s; }
html.novo .kartica-strelica:hover .str { transform: translateX(4px); color: var(--plava); }
html.novo .ikona-dok { border-radius: 8px; transition: background .2s, color .2s; }
html.novo .okvir-plavi, html.novo .pomoc, html.novo .upozorenje { border-radius: 12px; border-left-width: 1px; box-shadow: inset 3px 0 0 var(--plava); }
html.novo .upozorenje { box-shadow: inset 3px 0 0 #e8b923; }
html.novo .bijeli-okvir { border-radius: 14px; border-color: #e3e8ee; box-shadow: 0 1px 2px rgba(13,43,78,.04), 0 6px 18px rgba(13,43,78,.05); }
html.novo .podatak .vr, html.novo .primjer, html.novo .barkod { border-radius: 8px; }
html.novo .pomoc-gumbi a { border-radius: 8px; transition: transform .2s, box-shadow .2s; }
html.novo .pomoc-gumbi a:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(13,43,78,.15); }
html.novo .kam { border-radius: 10px; transition: transform .2s; }
html.novo .kam:hover { transform: scale(1.06); }
html.novo .prica-slike img, html.novo .kron-slike img, html.novo .onama-slika { border-radius: 12px; }
html.novo .klizac-traka img { border-radius: 10px; }
html.novo .klizac-sl, html.novo .klizac-pr { width: 44px; height: 44px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .2s; }
html.novo .klizac-sl:hover, html.novo .klizac-pr:hover { transform: translateY(-50%) scale(1.08); }

/* ---------- P2 Plava traka: prave ikone, klik na broj / mail / kartu ---------- */
html.novo .info-traka { background: linear-gradient(90deg, #1d4670 0%, #2b679a 100%); }
html.novo .it-novo { display: flex; align-items: center; height: 40px; font-size: 12px; white-space: nowrap; }
html.novo .it-novo > * { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; color: #e3edf6; border-left: 1px solid rgba(255,255,255,.16); }
html.novo .it-novo > *:first-child { padding-left: 0; border-left: 0; }
html.novo .it-novo > .desno { margin-left: auto; border-left: 0; padding-right: 0; }
html.novo .it-novo a:hover { color: #fff; }
html.novo .it-novo svg { width: 14px; height: 14px; color: #8fc1e8; flex: none; }

/* ---------- P3 Zaglavlje: sjena kod skrolanja, crta ispod stavke ---------- */
html.novo .zag { background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .25s; }
html.novo .zag.skrolano { box-shadow: 0 1px 0 rgba(13,43,78,.06), 0 8px 24px rgba(13,43,78,.08); }
html.novo .izbornik a { position: relative; padding: 8px 0; }
html.novo .izbornik a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--plava); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
html.novo .izbornik a:hover::after, html.novo .izbornik a.akt::after { transform: scaleX(1); }
html.novo .mob-izb a.st { transition: color .2s; }

/* ---------- P4 Brzi pristup: kartice s efektom ---------- */
html.novo .kartica-link { border-left: 0; border-radius: 12px; padding-right: 22px; box-shadow: inset 3px 0 0 var(--plava), 0 1px 2px rgba(13,43,78,.06), 0 6px 18px rgba(13,43,78,.08); transition: transform .2s, box-shadow .2s; }
html.novo .kartica-link::after { content: '→'; margin-left: auto; color: var(--siva); font-size: 15px; transition: transform .2s, color .2s; }
html.novo .kartica-link:hover { background: #fff; transform: translateY(-3px); box-shadow: inset 3px 0 0 var(--plava), 0 2px 4px rgba(13,43,78,.06), 0 14px 30px rgba(13,43,78,.13); }
html.novo .kartica-link:hover::after { transform: translateX(4px); color: var(--plava); }
html.novo .kartica-link .ikona-dok { width: 34px; height: 34px; }
html.novo .kartica-link .ikona-dok svg { width: 17px; height: 17px; }
html.novo .kartica-link:hover .ikona-dok { background: var(--plava); color: #fff; }

/* ---------- P5 Vijesti: novi format kartica ---------- */
html.novo .vk { position: relative; display: flex; flex-direction: column; border: 0; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(13,43,78,.06), 0 8px 24px rgba(13,43,78,.08); transition: transform .25s, box-shadow .25s; }
html.novo .vk:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(13,43,78,.06), 0 18px 36px rgba(13,43,78,.14); }
html.novo .vk-slika { aspect-ratio: 16 / 9; }
html.novo .vk-slika img { transition: transform .6s; }
html.novo .vk:hover .vk-slika img { transform: scale(1.05); }
html.novo .vk-tijelo { display: flex; flex-direction: column; flex: 1; height: auto; padding: 18px 20px 20px; border: 0; overflow: visible; }
html.novo .vk .pil, html.novo .vk .vk-datum { display: none; }
html.novo .vk-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: var(--siva); }
html.novo .vk-meta .kat { padding: 3px 9px; border-radius: 999px; background: #e9f2f9; color: var(--plava-tamna); font-size: 10px; letter-spacing: .6px; }
html.novo .vk h2 { margin-top: 12px; font-size: 16px; line-height: 1.35; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.novo .vk:hover h2 { text-decoration: none; color: var(--plava); }
html.novo .vk p { margin-top: 8px; font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.novo .vk-vise { display: inline-flex; gap: 6px; margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 700; color: var(--plava); }
html.novo .vk-vise span { transition: transform .2s; }
html.novo .vk:hover .vk-vise span { transform: translateX(4px); }
html.novo .vijesti { border-bottom: 0; }
html.novo .vk-mreza { gap: 24px; }

/* ---------- O nama, Naša misija: naslov desno od ikone, red manje (Ino 05.10.2026.) ---------- */
html.novo .mk { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; align-content: start; min-height: 0; padding: 24px 20px 22px; }
html.novo .mk-ik { width: 34px; height: 34px; border-radius: 8px; }
html.novo .mk-ik svg { width: 16px; height: 16px; }
html.novo .mk h3 { margin: 0; }
html.novo .mk p { grid-column: 1 / -1; margin-top: 12px; }

/* ---------- P6 Brojke ---------- */
html.novo .brojke-in > div + div { border-left: 1px solid rgba(255,255,255,.12); }
html.novo .brojke b { font-variant-numeric: tabular-nums; }

/* ---------- P7 Stranica Novosti: kategorije kao gumbi, prva vijest istaknuta ---------- */
html.novo .blog-kat { height: auto; gap: 10px; padding: 34px 0 30px; }
html.novo .blog-kat a { padding: 9px 18px; border-radius: 999px; background: #eef3f8; font-size: 13px; transition: background .2s, color .2s; }
html.novo .blog-kat a:hover { background: #dfe9f3; color: var(--navy); }
html.novo .blog-kat a.akt { background: var(--navy); color: #fff; }
html.novo .blog-mreza { gap: 24px; }
html.novo .blog .vk { border: 0; }
html.novo .blog .vk-tijelo { height: auto; border: 0; padding: 18px 20px 20px; }
html.novo .blog-mreza > .vk:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; }
html.novo .blog-mreza > .vk:first-child .vk-slika { aspect-ratio: auto; min-height: 320px; }
html.novo .blog-mreza > .vk:first-child .vk-tijelo { justify-content: center; padding: 36px 40px; }
html.novo .blog-mreza > .vk:first-child h2 { font-size: 24px; -webkit-line-clamp: 3; }
html.novo .blog-mreza > .vk:first-child p { font-size: 14px; -webkit-line-clamp: 5; }
html.novo .blog-mreza > .vk:first-child .vk-vise { margin-top: 18px; }

/* ---------- P8 Objava: tekst za čitanje ---------- */
html.novo .objava .blog-kat, html.novo .objava .blog-kat-mob { display: none !important; }
html.novo .clanak { max-width: 720px; margin: 0 auto; border: 0; padding: 40px 0 70px; }
html.novo .natrag { display: inline-flex; gap: 6px; margin-bottom: 26px; font-size: 13px; font-weight: 700; color: var(--plava); }
html.novo .natrag:hover { color: var(--navy); }
html.novo .clanak time { font-size: 13px; font-weight: 700; color: var(--siva); letter-spacing: .3px; }
html.novo .clanak h1 { margin-top: 10px; font-size: 34px; line-height: 1.2; color: var(--navy); }
html.novo .clanak-tijelo { margin-top: 26px; font-size: 16px; line-height: 1.75; color: #3d4f63; }
html.novo .clanak-tijelo p { margin-bottom: 18px; }
html.novo .clanak-tijelo .sl1 img { border-radius: 14px; }
html.novo .mreza-sl { gap: 8px; }
html.novo .mreza-sl button { border-radius: 10px; }

/* ---------- P9 Za članove: gumb Kopiraj ---------- */
html.novo .podatak .vr, html.novo .primjer { display: flex; align-items: center; gap: 10px; }
html.novo .kopiraj { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; flex: none; padding: 4px 10px; border: 1px solid #cfd9e4; border-radius: 6px; background: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--plava-tamna); transition: background .2s, color .2s, border-color .2s; }
html.novo .kopiraj:hover { background: var(--plava); border-color: var(--plava); color: #fff; }
html.novo .kopiraj.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
html.novo .kopiraj svg { width: 11px; height: 11px; }

/* ---------- P10 Pitanja: glatko otvaranje ---------- */
html.novo .faq-lista { gap: 10px; }
html.novo .faq-st { border-radius: 12px; border-color: #e3e8ee; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
html.novo .faq-st:hover { border-color: #cfdbe7; }
html.novo .faq-st.otv { border-color: #bfd6ea; box-shadow: 0 8px 22px rgba(13,43,78,.08); }
html.novo .faq-st button:hover { background: #f8fafc; }
html.novo .faq-st .faq-odg { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows .3s ease, padding .3s ease; }
html.novo .faq-st.otv .faq-odg { grid-template-rows: 1fr; padding-bottom: 22px; }
html.novo .faq-odg > div { overflow: hidden; }

/* ---------- P11 Forme ---------- */
html.novo .polje label { font-weight: 700; color: var(--tekst); }
html.novo .polje input, html.novo .polje textarea { border-radius: 8px; border-color: #d5dde6; height: 42px; transition: border-color .2s, box-shadow .2s; }
html.novo .polje textarea { height: 110px; }
html.novo .polje input:focus, html.novo .polje textarea:focus { border-color: var(--plava); box-shadow: 0 0 0 3px rgba(74,144,196,.18); }
html.novo .forma .posalji { border-radius: 8px; height: 42px; transition: transform .2s, box-shadow .2s, background .2s; }
html.novo .forma .posalji:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(13,43,78,.22); }
html.novo .prijava .forma { border-radius: 16px; box-shadow: 0 2px 4px rgba(13,43,78,.04), 0 12px 32px rgba(13,43,78,.10); padding: 24px 26px 26px; }
html.novo .forma-poruka:not(:empty):not(.greska) { padding: 10px 14px; border-radius: 8px; background: #ecfdf3; color: #15803d; font-weight: 700; text-align: left; }
html.novo .forma-poruka:not(:empty):not(.greska)::before { content: '✓  '; }
html.novo .forma-poruka.greska { padding: 10px 14px; border-radius: 8px; background: #fef3f2; text-align: left; }

/* ---------- P12 Galerija: mreža slika ---------- */
/* Ino 06.10.: u galeriji se vidi CIJELA slika — stupci u kojima svaka slika ima svoj pravi oblik, ništa se ne reže */
html.novo .galerija .klizac-traka { display: block; columns: 4 220px; column-gap: 8px; overflow: visible; }
html.novo .galerija .klizac-traka::after { content: none; }
html.novo .galerija .klizac-traka button { display: block; width: 100%; height: auto; margin: 0 0 8px; break-inside: avoid; overflow: hidden; border-radius: 10px; }
html.novo .galerija .klizac-traka img { display: block; width: 100%; height: auto; min-width: 0; max-width: 100%; object-fit: initial; border-radius: 0; transition: transform .5s; }
html.novo .galerija .klizac-traka button:hover img { transform: scale(1.05); }
html.novo .galerija .klizac-sl, html.novo .galerija .klizac-pr { display: none !important; }
html.novo .galerija .album + .album { margin-top: 70px; }

/* ---------- P13 Lagano pojavljivanje pri skrolanju ---------- */
html.novo .otkrij { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.novo .otkrij.vidljivo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.novo .otkrij { opacity: 1; transform: none; transition: none; } }

/* ---------- P15 Podnožje ---------- */
html.novo .pk-ik { display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; color: var(--plava); }
html.novo .podn .znak img { border-radius: 8px; }
html.novo .podn-str a, html.novo .podn-kon a { transition: color .2s, padding .2s; }
html.novo .podn-str a:hover { padding-left: 4px; }
html.novo .podn .fb img { transition: transform .2s; }
html.novo .podn .fb:hover img { transform: scale(1.1); }

/* ---------- P16 Kontakt ---------- */
html.novo .kontakt-info { gap: 14px; }
html.novo .ki { padding: 14px 16px; border-radius: 14px; background: #f7f9fb; border: 1px solid #edf1f5; transition: transform .2s, box-shadow .2s, background .2s; }
html.novo .ki:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,43,78,.08); }
html.novo .ki-ik { border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(13,43,78,.08); }
html.novo .karta-g { width: 1094px; max-width: calc(100% - 40px); }
html.novo .karta-g iframe { width: 100%; height: 380px; border-radius: 16px; }
html.novo .kontakt { border-bottom: 0; }

/* =====================================================================
   MOBITEL
   ===================================================================== */
@media (max-width: 750px) {
  html.novo .gumb { border-radius: calc(7*var(--u)); }
  html.novo .gumb::after { font-size: calc(11*var(--u)); }
  html.novo .kartica-link { border-radius: calc(10*var(--u)); padding-right: calc(12*var(--u)); }
  html.novo .kartica-link::after { font-size: calc(12*var(--u)); }
  html.novo .kartica-strelica { border-radius: calc(10*var(--u)); }

  /* P5 na mobitelu: kartice se listaju prstom vodoravno */
  html.novo .vijesti .vk-mreza { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: calc(14*var(--u)); justify-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(20*var(--u)); margin: calc(18*var(--u)) calc(-20*var(--u)) 0; padding: calc(4*var(--u)) calc(20*var(--u)) calc(18*var(--u)); scrollbar-width: none; }
  html.novo .vijesti .vk-mreza::-webkit-scrollbar { display: none; }
  html.novo .vijesti .vk { position: relative; width: auto; height: auto; scroll-snap-align: start; border-radius: calc(14*var(--u)); }
  html.novo .vijesti .vk-slika { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  html.novo .vijesti .vk-slika::after { display: none; }
  html.novo .vijesti .vk-tijelo { position: static; height: auto; padding: calc(14*var(--u)) calc(16*var(--u)) calc(16*var(--u)); background: #fff; }
  html.novo .vijesti .vk h2 { margin-top: calc(10*var(--u)); font-size: calc(14*var(--u)); line-height: 1.35; color: var(--navy); -webkit-line-clamp: 2; }
  html.novo .vijesti .vk p { display: -webkit-box; font-size: calc(12*var(--u)); -webkit-line-clamp: 3; }
  html.novo .vk-meta { font-size: calc(10*var(--u)); gap: calc(8*var(--u)); }
  html.novo .vk-meta .kat { font-size: calc(9*var(--u)); padding: calc(3*var(--u)) calc(8*var(--u)); }
  html.novo .vk-vise { font-size: calc(11*var(--u)); padding-top: calc(12*var(--u)); }
  html.novo .sve-vijesti { margin-right: 0; }

  html.novo .brojke-in > div + div { border-left: 0; }
  html.novo .mk { grid-template-columns: calc(30*var(--u)) 1fr; column-gap: calc(12*var(--u)); padding: calc(22*var(--u)) 0 calc(18*var(--u)); }
  html.novo .mk-ik { position: static; width: calc(30*var(--u)); height: calc(30*var(--u)); border-radius: calc(7*var(--u)); }
  html.novo .mk-ik svg { width: calc(14*var(--u)); height: calc(14*var(--u)); }
  html.novo .mk h3 { margin: 0; min-height: 0; }
  html.novo .mk p { margin-top: calc(10*var(--u)); }

  /* P7 na mobitelu: kategorije kao gumbi, popis s datumom na hrvatskom */
  html.novo .blog-kat-mob { display: none; }
  html.novo .blog-kat { display: flex; gap: calc(8*var(--u)); padding: calc(16*var(--u)) calc(18*var(--u)) calc(6*var(--u)); overflow-x: auto; }
  html.novo .blog-kat a { flex: none; padding: calc(8*var(--u)) calc(14*var(--u)); font-size: calc(12*var(--u)); }
  /* Ino 06.10.: SVE novosti na mobitelu kao prva (slika lijevo, tekst desno), ne slika iznad teksta */
  html.novo .blog-mreza > .vk, html.novo .blog-mreza > .vk:first-child { display: grid; grid-template-columns: calc(70*var(--u)) 1fr; column-gap: calc(16*var(--u)); align-items: start; }
  html.novo .blog .vk h2, html.novo .blog-mreza > .vk:first-child h2 { -webkit-line-clamp: 3; }
  html.novo .blog-mreza > .vk:first-child .vk-slika { min-height: 0; }
  html.novo .blog-mreza > .vk:first-child .vk-tijelo { padding: 0; }
  html.novo .blog-mreza > .vk:first-child h2 { font-size: calc(12*var(--u)); }
  html.novo .blog .vk { border-radius: 0; box-shadow: none; border-bottom: 1px solid #edf1f5; transform: none; }
  html.novo .blog .vk-slika { border-radius: calc(10*var(--u)); overflow: hidden; }
  html.novo .blog .vk-tijelo { padding: 0; }
  html.novo .blog .vk h2 { order: 2; margin-top: calc(6*var(--u)); font-size: calc(12*var(--u)); color: var(--navy); }
  html.novo .blog .vk-meta { order: 1; }
  html.novo .blog .vk p, html.novo .blog .vk-vise { display: none; }

  html.novo .clanak { padding: calc(24*var(--u)) calc(18*var(--u)) calc(30*var(--u)); }
  html.novo .natrag { margin-bottom: calc(18*var(--u)); font-size: calc(12*var(--u)); }
  html.novo .clanak time { font-size: calc(11*var(--u)); }
  html.novo .clanak h1 { font-size: calc(22*var(--u)); margin-top: calc(6*var(--u)); }
  html.novo .clanak-tijelo { font-size: calc(15*var(--u)); line-height: 1.7; }

  html.novo .kopiraj { padding: calc(3*var(--u)) calc(8*var(--u)); font-size: calc(10*var(--u)); }
  html.novo .okvir-plavi { padding: calc(12*var(--u)) calc(14*var(--u)); background: #e9f2f9; border: 1px solid #c8dced; border-radius: calc(10*var(--u)); }
  html.novo .podatak .vr { flex-wrap: wrap; row-gap: calc(2*var(--u)); }
  html.novo .podatak .vr small { order: 3; flex-basis: 100%; margin-left: 0; line-height: 1.4; }
  html.novo .faq-st { border-radius: calc(10*var(--u)); border-left: 1px solid #e3e8ee; border-right: 1px solid #e3e8ee; }
  html.novo .faq-lista { padding: 0 calc(12*var(--u)); }

  html.novo .polje input { height: calc(42*var(--u)); }
  html.novo .galerija-in { padding-right: calc(20*var(--u)); }
  html.novo .galerija .klizac-traka { columns: 2; column-gap: calc(6*var(--u)); }
  html.novo .galerija .klizac-traka button { height: auto; margin-bottom: calc(6*var(--u)); }
  html.novo .galerija .album:last-child .klizac-traka img { height: auto; }

  html.novo .ki { padding: calc(12*var(--u)) calc(14*var(--u)); }
  html.novo .karta-g { width: auto; max-width: none; }
  html.novo .karta-g iframe { border-radius: calc(14*var(--u)); height: calc(260*var(--u)); }

}

/* Objava s videom (20.10.2026.): u kockici se vrti kratki isječak bez tona, u objavi video s tonom */
.vk-slika video { display: block; width: 100%; height: 100%; object-fit: cover; }
html.novo .vk-slika video { transition: transform .6s; }
html.novo .vk:hover .vk-slika video { transform: scale(1.05); }
.vk-play { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(15, 37, 64, .72); color: #fff; pointer-events: none; }
.vk-play svg { margin-left: 2px; }
.clanak-tijelo .vid { margin: 0 0 21px; }
.clanak-tijelo .vid video { display: block; width: 100%; height: auto; border-radius: 14px; background: #0f2540; }
@media (prefers-reduced-motion: reduce) { .vk-slika video { display: none; } }