/* All Pro Group — tamni premium stil */

:root {
  --bg: #0B0D0E;
  --bg-2: #111416;
  --bg-3: #171B1D;
  --linija: rgba(255, 255, 255, .09);
  --linija-jaka: rgba(255, 255, 255, .18);
  --tekst: #ECEFED;
  --blag: #97A09D;
  --zelena: #5ED18A;
  --zelena-t: #2FA35C;
  --zelena-tamna: #0F2E1A;
  --plava: #4B9BE0;
  --radius: 14px;
  --radius-sm: 8px;
  --f-naslov: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --f-tekst: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 400 17px/1.6 var(--f-tekst);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-naslov); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
::selection { background: var(--zelena); color: var(--bg); }
:focus-visible { outline: 2px solid var(--zelena); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-uzak { max-width: 820px; }
.preskoci { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--zelena); color: var(--bg); padding: 10px 16px; border-radius: 6px; }
.preskoci:focus { left: 8px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 .78rem/1 var(--f-tekst);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--zelena);
  margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }

.sekcija { padding-block: clamp(96px, 14vw, 180px); position: relative; }
.sek-glava { max-width: 860px; margin-bottom: clamp(48px, 7vw, 88px); }
.sek-naslov { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
.sek-naslov-xl { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.sek-uvod { margin-top: 26px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--blag); max-width: 620px; }

/* Reči u naslovima — otkrivanje ispod maske */
.rec { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .06em .2em; margin: -.08em -.06em -.2em; }
.rec-in { display: inline-block; will-change: transform; }

/* Dugmad */
.dugme {
  --dbg: var(--zelena); --dfg: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 28px;
  background: var(--dbg); color: var(--dfg);
  border: 1px solid var(--dbg); border-radius: 100px;
  font: 600 .98rem/1 var(--f-tekst); letter-spacing: .01em;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.dugme::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tekst);
  transform: translateY(101%); border-radius: inherit;
  transition: transform .5s var(--ease);
}
.dugme:hover::before { transform: translateY(0); }
.dugme:hover { border-color: var(--tekst); }
.dugme .ik { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.dugme:hover .ik { transform: translateX(4px); }
.dugme-obrub { --dbg: transparent; --dfg: var(--tekst); border-color: var(--linija-jaka); }
.dugme-obrub:hover { color: var(--bg); }
.dugme-sm { padding: 12px 20px; font-size: .9rem; }
.dugme-veliko { padding: 22px 36px; font-size: 1.05rem; }
.dugme[disabled] { opacity: .6; pointer-events: none; }

.podvuci { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); padding-bottom: 2px; }
.podvuci:hover { background-size: 100% 1px; }

.ik { width: 22px; height: 22px; flex: none; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--bg);
}
.loader-logo { width: min(440px, 76vw); will-change: transform; }
html.no-js .loader, .loader.gotovo { display: none; }
.loader { will-change: transform; }
/* ---------- Navigacija ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  transition: background .4s, transform .5s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.puna { background: rgba(11, 13, 14, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--linija); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--gutter); max-width: 1600px; margin-inline: auto; }
.nav-logo .logo-svg { width: 150px; height: auto; }
.nav-meni { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav-link { position: relative; font-size: .93rem; font-weight: 500; color: rgba(236, 239, 237, .78); transition: color .3s; padding-block: 6px; white-space: nowrap; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--zelena); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-link:hover { color: var(--tekst); }
.nav-link:hover::after, .nav-link.aktivan::after { transform: scaleX(1); transform-origin: left; }
.nav-link.aktivan { color: var(--tekst); }
.nav-mob-extra { display: none; }
.nav-desno { display: flex; align-items: center; gap: 18px; }
.jezici { display: flex; gap: 2px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
.jezici a { padding: 6px 7px; color: var(--blag); border-radius: 6px; transition: color .3s; }
.jezici a:hover, .jezici a.aktivan { color: var(--tekst); }
.jezici a.aktivan { background: rgba(255, 255, 255, .07); }
.nav-app { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; color: var(--blag); padding: 9px 14px; border: 1px solid var(--linija); border-radius: 100px; transition: color .3s, border-color .3s; }
.nav-app .ik { width: 17px; height: 17px; }
.nav-app:hover { color: var(--tekst); border-color: var(--linija-jaka); }
/* Prijava (ikonica) i Admin link u meniju */
.nav-prijava { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--blag); border: 1px solid transparent; transition: color .3s, border-color .3s; }
.nav-prijava .ik { width: 18px; height: 18px; }
.nav-prijava:hover { color: var(--tekst); border-color: var(--linija); }
.nav-admin { color: var(--zelena); border-color: rgba(94,209,138,.35); }
.nav-admin:hover { color: var(--zelena); border-color: var(--zelena); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--linija-jaka); border-radius: 50%; background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--tekst); transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.nav.otvorena .burger span:first-child { top: 21px; transform: rotate(45deg); }
.nav.otvorena .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-bottom: clamp(48px, 8vh, 96px); }
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-slika { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; will-change: transform; } /* sloj se iscrta jednom, animacije samo pomeraju */
.hero-slika .fasada { width: 100%; height: 100%; }
.hero-senka { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,14,.55) 0%, rgba(11,13,14,.1) 35%, rgba(11,13,14,.55) 70%, var(--bg) 100%), linear-gradient(90deg, rgba(11,13,14,.85) 0%, rgba(11,13,14,.2) 70%); }
.hero-sadrzaj { position: relative; z-index: 2; }
.hero-naslov { font-size: clamp(3rem, 10.5vw, 10.5rem); line-height: .93; letter-spacing: -.045em; font-weight: 800; }
/* „Prozor“ kroz koji red izranja. Proširen na sve strane (padding) pa vraćen negativnom marginom,
   da se ne seku repovi slova (g, p, j), kvačice (Š, Ž) ni ivice kosih slova. */
.red { display: block; overflow: hidden; padding: .1em .12em .2em .08em; margin: -.1em -.12em -.2em -.08em; }
.red-in { display: block; will-change: transform; }
/* Providan (obris) red. Obris pravi SVG filter #obris iz sections/hero.php: crta samo spoljnu
   ivicu slova, pa se ne vide unutrašnja preklapanja koja font ima (text-stroke ih prikazuje). */
.red-akcent .red-in { color: #fff; font-style: italic; font-weight: 700; padding: 0 .08em .02em 0; filter: url(#obris); }
.hero-dno { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(28px, 4vw, 52px); flex-wrap: wrap; }
.hero-podnaslov { max-width: 540px; font-size: clamp(1rem, 1.3vw, 1.18rem); color: rgba(236, 239, 237, .78); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-skrol { position: absolute; right: var(--gutter); top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blag); writing-mode: vertical-rl; }
.hero-skrol i { position: relative; width: 1px; height: 64px; background: var(--linija-jaka); overflow: hidden; }
.hero-skrol i::after { content: ''; position: absolute; inset: 0; background: var(--zelena); animation: skrol 2.2s var(--ease) infinite; }
@keyframes skrol { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- Brojke ---------- */
.brojke { padding-block: clamp(56px, 8vw, 96px); }
.brojke-mreza { display: flex; gap: 16px; margin: 0; }
.broj {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: 28px clamp(20px, 2.2vw, 32px) 26px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--linija); border-radius: var(--radius);
  overflow: hidden; transition: border-color .4s;
}
.broj:hover { border-color: var(--linija-jaka); }
.broj-rb { font: 600 .78rem/1 var(--f-naslov); letter-spacing: .12em; color: var(--blag); margin-bottom: clamp(28px, 4vw, 48px); }
.broj-siri { flex-grow: 1.5; }
/* Ista veličina za sve brojeve; šira kartica obezbeđuje mesta za „55.000+ m²“ */
.broj dt { display: flex; align-items: flex-start; font: 700 clamp(2rem, 4.1vw, 4.4rem)/.9 var(--f-naslov); letter-spacing: -.045em; white-space: nowrap; }
.broj-vrednost { font-variant-numeric: tabular-nums; }
.broj-sufiks { font-size: .42em; line-height: 1; letter-spacing: -.01em; color: var(--zelena); margin: .12em 0 0 .12em; }
.broj dd { margin: 16px 0 0; color: var(--blag); font-size: .95rem; }
/* Tanka linija na dnu kartice — popuni se pri ulasku */
.broj-linija { margin-top: auto; padding-top: 26px; }
.broj-linija i { display: block; height: 2px; background: var(--linija); position: relative; overflow: hidden; }
.broj-linija i::after { content: ''; position: absolute; inset: 0; background: var(--zelena); transform-origin: left; transform: scaleX(var(--popunjeno, 1)); }
/* Monteri: sufiks („+“) iskoči tek kad broj stigne do kraja */
.js.anim [data-skrol-sufiks] { opacity: 0; transform: translateY(.3em) scale(.6); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.js.anim [data-skrol-sufiks].vidljiv { opacity: 1; transform: none; }

/* ---------- Usluge ---------- */
.usluge-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1200px) { .usluge-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usluga {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--linija); background: var(--bg-2);
  transition: border-color .4s;
}
.usluga:hover { border-color: var(--linija-jaka); }
.usluga-slika { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--linija); }
.usluga-br {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 6px 11px; border-radius: 100px; background: rgba(11,13,14,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 .78rem var(--f-naslov); color: var(--tekst); letter-spacing: .1em;
}
.usluga-telo { flex: 1; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); }
.usluga-glava { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.usluga-ikona { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linija-jaka); color: var(--zelena); }
.usluga-ikona .ik { width: 20px; height: 20px; }
.usluga h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.usluga p { color: rgba(236,239,237,.72); max-width: 520px; }
.tagovi { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tagovi li { font-size: .8rem; padding: 6px 12px; border: 1px solid var(--linija-jaka); border-radius: 100px; color: rgba(236,239,237,.8); }
.usluga-link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 26px; font-weight: 600; color: var(--blag); transition: color .4s; }
.usluga-link .ik { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.usluga:hover .usluga-link, .usluga:focus-visible .usluga-link { color: var(--zelena); }
.usluga:hover .usluga-link .ik { transform: translateX(6px); }

/* ---------- Ilustracije zgrada: unapred renderovane slike (inc/fasade.php, alati/render.html) ---------- */
.scena { position: absolute; inset: 0; overflow: hidden; background: #8eaec4; }
.scena-slika { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1.2s var(--ease); }
.usluga:hover .scena-slika, .ref:hover .scena-slika, .blog-kartica:hover .scena-slika { transform: scale(1.045); }

/* ---------- Proces ---------- */
.proces { background: var(--bg-2); }
.proces-in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.proces-glava { position: sticky; top: calc(var(--nav-h) + 60px); margin-bottom: 0; }
.koraci { list-style: none; margin: 0; padding: 0; position: relative; }
.koraci-linija { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: var(--linija-jaka); }
.koraci-linija span { position: absolute; inset: 0; background: var(--zelena); transform-origin: top; transform: scaleY(var(--napredak, 1)); }
.korak { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 32px; padding-block: 36px; }
.korak-tacka { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--linija-jaka); font: 600 1.05rem var(--f-naslov); color: var(--blag); transition: background .5s var(--ease), color .5s, border-color .5s; }
.korak.upaljen .korak-tacka { background: var(--zelena); border-color: var(--zelena); color: var(--bg); }
.korak h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 10px 0 12px; transition: color .5s; }
.korak p { color: var(--blag); max-width: 480px; }
.js .korak:not(.upaljen) h3 { color: rgba(236,239,237,.35); }

/* ---------- Reference ---------- */
.reference { padding-bottom: clamp(60px, 8vw, 110px); }
.ref-glava { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }
.filteri { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { padding: 10px 18px; border-radius: 100px; background: none; border: 1px solid var(--linija-jaka); color: var(--blag); font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .35s var(--ease); }
.filter:hover { color: var(--tekst); border-color: var(--tekst); }
.filter.aktivan { background: var(--tekst); border-color: var(--tekst); color: var(--bg); }
.ref-traka { overflow: hidden; }
.ref-lista { display: flex; gap: 24px; padding-inline: var(--gutter); width: max-content; will-change: transform; }
.ref { width: clamp(300px, 34vw, 520px); flex: none; }
.ref[hidden] { display: none; }
.ref-slika { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); }
.ref-slika-in { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.ref-slika-in img, .ref-slika-in .fasada { width: 100%; height: 100%; object-fit: cover; }
.ref:hover .ref-slika-in { transform: scale(1.06); }
.ref-tip { position: absolute; left: 16px; top: 16px; padding: 7px 13px; border-radius: 100px; background: rgba(11,13,14,.65); backdrop-filter: blur(8px); font-size: .78rem; font-weight: 500; }
/* Potpis autora fotografije (obavezan kod CC licenci) */
.ref-foto { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: .66rem; color: rgba(255,255,255,.7); text-shadow: 0 1px 3px rgba(0,0,0,.8); text-decoration: none; }
.ref-foto:hover { color: #fff; text-decoration: underline; }
.ref-info { padding-top: 22px; }
.ref-info h3 { font-size: 1.5rem; margin-bottom: 8px; }
.ref-meta { color: var(--blag); font-size: .95rem; }
.ref-inv { margin-top: 10px; font-size: .88rem; color: rgba(236,239,237,.8); }
.ref-inv span { color: var(--blag); margin-right: 6px; }
.ref-napredak { display: flex; align-items: center; gap: 24px; margin-top: 44px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blag); }
.ref-bar { flex: 1; height: 1px; background: var(--linija-jaka); position: relative; }
.ref-bar i { position: absolute; inset: 0; background: var(--zelena); transform-origin: left; transform: scaleX(var(--napredak, 0)); }

/* Desktop: sekcija je „zakačena“ dok se skroluje horizontalno, pa CELA mora da stane u visinu ekrana.
   Počinje ispod menija, a visina kartica se računa iz visine prozora (≈ 470px ide na meni, naslov, tekst i traku). */
@media (min-width: 981px) {
  .reference { padding-top: 0; }
  .ref-pin {
    height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) + 20px) 0 24px;
  }
  .ref-glava { margin-bottom: clamp(20px, 3vh, 36px); }
  .ref-glava .eyebrow { margin-bottom: 14px; }
  .reference .sek-naslov { font-size: clamp(2rem, min(3.4vw, 5.4vh), 3.4rem); }
  .ref { --ref-h: clamp(220px, calc(100svh - 470px), 560px); width: calc(var(--ref-h) * .8); }
  .ref-slika { aspect-ratio: auto; height: var(--ref-h); }
  .ref-info { padding-top: 16px; }
  .ref-info h3 { font-size: 1.3rem; margin-bottom: 6px; }
  .ref-inv { margin-top: 6px; }
  .ref-napredak { margin-top: clamp(18px, 3vh, 36px); }
}

/* ---------- Partneri ---------- */
.partneri { padding-block: clamp(60px, 8vw, 100px); border-block: 1px solid var(--linija); }
.partneri-glava { margin-bottom: 20px; }
/* Tri reda logotipa (firme, sistemi, obloge), odvojena tankim linijama */
.partneri-red { padding: 22px 0; border-top: 1px solid var(--linija); }
.partneri-red:last-child { border-bottom: 1px solid var(--linija); }
.partneri { border-block: 0; }
.marquee { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-traka { list-style: none; margin: 0; padding: 0; display: flex; flex: none; gap: clamp(44px, 5vw, 88px); padding-right: clamp(44px, 5vw, 88px); animation: marquee var(--trajanje, 60s) linear infinite; }
.marquee-obrnuto .marquee-traka { animation-direction: reverse; }
@media (max-width: 760px) {
  .partneri-red { padding: 16px 0; }
}
.marquee:hover .marquee-traka { animation-play-state: paused; }
.marquee-traka li { display: flex; align-items: center; height: 56px; }
/* Partner bez loga — natpis usklađen sa logotipima (ista visina, belo, prigušeno) */
.marquee-traka span { font: 800 1.45rem/1 var(--f-naslov); letter-spacing: .08em; color: #fff; opacity: .45; white-space: nowrap; transition: opacity .3s; }
.marquee-traka li:hover span { opacity: 1; }
/* Logotipi jednobojno belo (brightness(0) → crno, invert → belo), prigušeno; na hover pune svetline */
.marquee-traka img { height: calc(30px * var(--skala, 1)); width: auto; max-width: calc(170px * var(--skala, 1)); object-fit: contain; filter: brightness(0) invert(1); opacity: .45; transition: opacity .3s; }
.marquee-traka li:hover img { opacity: 1; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Zašto mi ---------- */
.zasto-mreza { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linija); }
.zasto-stavka { padding: 44px 36px 48px 0; border-bottom: 1px solid var(--linija); }
.zasto-stavka:not(:nth-child(3n+1)) { padding-left: 36px; border-left: 1px solid var(--linija); }
.zasto-br { display: block; font: 600 .85rem var(--f-naslov); color: var(--zelena); margin-bottom: 36px; letter-spacing: .1em; }
.zasto-stavka h3 { font-size: 1.45rem; margin-bottom: 14px; }
.zasto-stavka p { color: var(--blag); }

/* ---------- Karijera ---------- */
.karijera { background: var(--bg-2); }
.karijera-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.pozicije { list-style: none; padding: 0; margin: 44px 0 0; border-top: 1px solid var(--linija); }
.pozicije li { padding: 22px 0; border-bottom: 1px solid var(--linija); }
.pozicije h3 { font-size: 1.25rem; margin-bottom: 6px; }
.pozicije p { color: var(--blag); font-size: .95rem; }
.uslovi-naslov { font-size: 1rem; font-family: var(--f-tekst); font-weight: 600; margin: 40px 0 16px; letter-spacing: 0; }
.uslovi { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.uslovi li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: rgba(236,239,237,.85); }
.uslovi .ik { width: 18px; height: 18px; color: var(--zelena); margin-top: 3px; }

/* ---------- Forme ---------- */
.forma { background: var(--bg-3); border: 1px solid var(--linija); border-radius: calc(var(--radius) + 6px); padding: clamp(24px, 4vw, 52px); display: grid; gap: 18px; }
.forma-naslov { font-size: 1.7rem; margin-bottom: 6px; }
.forma-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.polje-sirok { grid-column: 1 / -1; }
.polje { position: relative; }
.polje input, .polje textarea {
  width: 100%; padding: 26px 18px 10px;
  background: rgba(255,255,255,.03); color: var(--tekst);
  border: 1px solid var(--linija-jaka); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem; transition: border-color .3s, background .3s;
  resize: vertical;
}
.polje input:focus, .polje textarea:focus { outline: none; border-color: var(--zelena); background: rgba(94,209,138,.04); }
.polje label { position: absolute; left: 18px; top: 18px; color: var(--blag); font-size: 1rem; pointer-events: none; transform-origin: left top; transition: transform .3s var(--ease), color .3s; }
.polje label small { font-size: .8em; opacity: .7; }
.polje input:focus + label, .polje input:not(:placeholder-shown) + label,
.polje textarea:focus + label, .polje textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.75); color: var(--zelena); }
.polje.greska input, .polje.greska textarea { border-color: #E5705F; }

/* Polje sa uvek podignutom labelom (ima pravi placeholder kao primer) */
.polje.uvek-gore label { transform: translateY(-10px) scale(.75); }
.polje.uvek-gore input::placeholder { color: rgba(151,160,157,.55); }
/* Oznaka jedinice unutar polja (npr. m²) */
.polje.ima-sufiks input { padding-right: 48px; }
.sufiks { position: absolute; right: 18px; top: 50%; transform: translateY(-20%); color: var(--blag); font-size: .95rem; pointer-events: none; }

/* ----- Forma za ponudu: prekidač + numerisane grupe ----- */
.forma-ponuda { container-type: inline-size; counter-reset: grupa; gap: 0; }
.prekidac-blok { margin-bottom: 30px; }
.forma-ponuda .forma-status { margin-bottom: 22px; }
.prekidac {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 5px; background: rgba(255,255,255,.035); border: 1px solid var(--linija); border-radius: 100px;
}
.prekidac label { position: relative; z-index: 1; cursor: pointer; text-align: center; }
.prekidac input { position: absolute; opacity: 0; pointer-events: none; }
.prekidac span { display: block; padding: 13px 14px; border-radius: 100px; font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--blag); transition: color .4s var(--ease); }
.prekidac label:hover span { color: var(--tekst); }
.prekidac input:checked + span { color: var(--bg); }
.prekidac input:focus-visible + span { outline: 2px solid var(--zelena); outline-offset: 2px; }
.prekidac-kliz { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); background: var(--zelena); border-radius: 100px; transition: transform .5s var(--ease); }
.forma-ponuda.je-upit .prekidac-kliz { transform: translateX(100%); }
.prekidac-opis { margin-top: 12px; text-align: center; color: var(--blag); font-size: .88rem; }

.grupa { display: grid; gap: 16px; padding-block: 28px; border-top: 1px solid var(--linija); counter-increment: grupa; }
.grupa[hidden], .ponuda-samo[hidden] { display: none; }
.grupa-glava { display: flex; align-items: center; gap: 12px; font: 600 .76rem/1 var(--f-tekst); letter-spacing: .16em; text-transform: uppercase; color: var(--tekst); }
.grupa-glava::before { content: counter(grupa, decimal-leading-zero); font: 700 .95rem/1 var(--f-naslov); letter-spacing: 0; color: var(--zelena); }
.forma-mreza-3 { grid-template-columns: .8fr 1.2fr 1fr; }

.tip-izbor { border: 0; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tip-izbor legend { color: var(--blag); font-size: .9rem; margin-bottom: 12px; padding: 0; }
.cip input { position: absolute; opacity: 0; pointer-events: none; }
.cip span { display: inline-block; padding: 10px 16px; border: 1px solid var(--linija-jaka); border-radius: 100px; font-size: .9rem; cursor: pointer; transition: all .3s var(--ease); }
.cip:hover span { border-color: var(--tekst); }
.cip input:checked + span { background: var(--zelena); border-color: var(--zelena); color: var(--bg); font-weight: 600; }
.cip input:focus-visible + span { outline: 2px solid var(--zelena); outline-offset: 2px; }

.upload-zona { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px dashed var(--linija-jaka); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .3s, background .3s; }
.upload-zona:hover, .upload-zona.prevlaci { border-color: var(--zelena); background: rgba(94,209,138,.05); }
.upload-zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-ikona { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(94,209,138,.1); color: var(--zelena); transition: transform .4s var(--ease); }
.upload-zona:hover .upload-ikona { transform: translateY(-2px); }
.upload-ikona .ik { width: 22px; height: 22px; }
.upload-tekst { display: grid; gap: 3px; }
.upload-zona strong { font-weight: 500; font-size: .95rem; }
.upload-zona small { color: var(--blag); font-size: .8rem; }
.upload-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.upload-lista li { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding: 8px 12px; background: rgba(255,255,255,.04); border-radius: 6px; }
.upload-lista li.los { color: #F08A7A; }
.upload-lista small { color: var(--blag); white-space: nowrap; }

.cek { position: relative; display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; cursor: pointer; color: rgba(236,239,237,.85); }
.cek input { position: absolute; opacity: 0; }
.cek > span { flex: none; width: 22px; height: 22px; border: 1px solid var(--linija-jaka); border-radius: 6px; margin-top: 1px; transition: all .25s; position: relative; }
.cek > span::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.cek input:checked + span { background: var(--zelena); border-color: var(--zelena); }
.cek input:checked + span::after { transform: rotate(45deg) scale(1); }
.cek input:focus-visible + span { outline: 2px solid var(--zelena); outline-offset: 2px; }
.cek em { font-style: normal; color: var(--blag); font-size: .86rem; }
.cek em a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.cek.greska > span { border-color: #E5705F; }
.cekiranje-red { display: flex; gap: 28px; flex-wrap: wrap; padding: 4px 0; }
.forma-dno { display: grid; gap: 22px; padding-top: 26px; border-top: 1px solid var(--linija); }
.forma-dno-red { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.forma-dno small { color: var(--blag); font-size: .82rem; }

/* Forma se prilagođava svojoj širini (ne širini ekrana) */
@container (max-width: 620px) {
  .forma-mreza-3 { grid-template-columns: 1fr 1fr; }
  .forma-mreza-3 > .polje:last-child { grid-column: 1 / -1; }
}
@container (max-width: 460px) {
  .forma-mreza, .forma-mreza-3 { grid-template-columns: 1fr; }
  .prekidac span { font-size: .88rem; padding: 12px 8px; }
  .forma-dno-red .dugme { width: 100%; justify-content: center; }
  .upload-zona { padding: 16px; }
}
.forma .dugme { justify-self: start; }
.forma-status { padding: 16px 18px; border-radius: var(--radius-sm); font-weight: 500; font-size: .95rem; }
.forma-status[data-status="ok"] { background: rgba(94,209,138,.12); color: var(--zelena); border: 1px solid rgba(94,209,138,.3); }
.forma-status:not([data-status="ok"]) { background: rgba(229,112,95,.1); color: #F08A7A; border: 1px solid rgba(229,112,95,.3); }
.med { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ponuda-in { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.ponuda-glava { position: sticky; top: calc(var(--nav-h) + 60px); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--bg-2); border-top: 1px solid var(--linija); }
.kontakt-mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kontakt-kartica { display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; border: 1px solid var(--linija); border-radius: var(--radius); background: var(--bg-3); transition: border-color .4s, transform .5s var(--ease); }
a.kontakt-kartica:hover { border-color: var(--zelena); transform: translateY(-4px); }
.kontakt-kartica .ik { color: var(--zelena); margin-bottom: 18px; }
.kontakt-kartica span { color: var(--blag); font-size: .85rem; }
.kontakt-kartica strong { font: 600 1.15rem/1.3 var(--f-naslov); word-break: break-word; }
.kontakt-kartica small { color: var(--blag); font-size: .8rem; margin-top: 8px; line-height: 1.5; }
.kontakt-dva { display: flex; gap: 18px; }
.mapa { margin-top: 16px; height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linija); background: var(--bg-3) repeating-linear-gradient(0deg, transparent 0 39px, var(--linija) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--linija) 39px 40px); display: grid; place-items: center; }
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
.mapa-dugme { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 100px; background: var(--bg); border: 1px solid var(--linija-jaka); cursor: pointer; transition: border-color .3s; }
.mapa-dugme:hover { border-color: var(--zelena); }
.mapa-dugme .ik { width: 18px; height: 18px; color: var(--zelena); }

/* ---------- Footer ---------- */
.footer { position: relative; padding-top: 90px; overflow: hidden; border-top: 1px solid var(--linija); }
.footer-vrh { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 48px; padding-bottom: 60px; }
.footer-logo { width: 190px; margin-bottom: 22px; }
.footer-brend p { color: var(--blag); max-width: 420px; font-size: .95rem; }
.footer-kol { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: .95rem; color: rgba(236,239,237,.85); }
.footer-kol span { color: var(--blag); }
.footer-dno { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 26px; border-top: 1px solid var(--linija); font-size: .85rem; color: var(--blag); }
.na-vrh { display: inline-flex; align-items: center; gap: 8px; }
.na-vrh .ik { width: 16px; height: 16px; }
.footer-veliki { font: 800 clamp(5rem, 22vw, 22rem)/.78 var(--f-naslov); letter-spacing: -.06em; text-align: center; color: rgba(255,255,255,.035); user-select: none; margin-bottom: -.12em; white-space: nowrap; }

/* ---------- Dugme „na vrh“ ---------- */
.na-vrh-dugme {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(17, 20, 22, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--tekst);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, color .3s;
}
.na-vrh-dugme.vidljivo { opacity: 1; visibility: visible; transform: none; }
.na-vrh-dugme:hover { color: var(--zelena); }
.na-vrh-dugme > .ik { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.na-vrh-dugme:hover > .ik { transform: translateY(-3px); }
.na-vrh-krug { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.na-vrh-krug circle { fill: none; stroke-width: 1.5; }
.na-vrh-krug .staza { stroke: var(--linija-jaka); }
.na-vrh-krug .napredak { stroke: var(--zelena); stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- Plutajuća dugmad (telefon) ---------- */
.plutajuce { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: none; flex-direction: column; gap: 10px; }
.plutajuce a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.plutajuce svg { width: 28px; height: 28px; }
.plut-wa { background: #25D366; }
.plut-viber { background: #7360F2; }

/* ---------- Kolačići ---------- */
.kolacici { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 560px; padding: 22px; background: var(--bg-3); border: 1px solid var(--linija-jaka); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); display: grid; gap: 16px; font-size: .9rem; color: rgba(236,239,237,.85); }
.kolacici a { text-decoration: underline; }
.kolacici div { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Kursor (desktop) ---------- */
.kursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ima-kursor .kursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 400; }
  .kursor-tacka, .kursor-krug { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
  .kursor-tacka { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--zelena); }
  .kursor-krug { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(236,239,237,.35); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s; }
  .kursor.hover .kursor-krug { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(94,209,138,.1); border-color: var(--zelena); }
  .kursor.sakriven { opacity: 0; }
}

/* ---------- Tekstualne strane ---------- */
.tekst-strana { padding: calc(var(--nav-h) + 80px) 0 120px; }
.tekst-strana h1 { margin: 30px 0 50px; }
.tekst-strana h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.tekst-strana p { color: rgba(236,239,237,.8); }
.tekst-nazad { color: var(--blag); font-size: .9rem; }
.str-tekst .nav { background: rgba(11,13,14,.9); border-color: var(--linija); }

/* ---------- Početno stanje animacija (samo kad JS radi) ---------- */
.js.anim .otkrij { opacity: 0; transform: translateY(40px); }
.js.anim .rec-in, .js.anim .red-in { transform: translateY(135%); }
.js.anim .hero-eyebrow, .js.anim .hero-podnaslov, .js.anim .hero-cta, .js.anim .hero-skrol { opacity: 0; }
.js.anim .usluga { opacity: 0; transform: translateY(60px); }
/* Logo kreće „nenacrtan“ dok ga animacija ne iscrta */
/* (dok JS ne preuzme — posle toga širine idu preko atributa) */
.js.anim:not(.logo-spreman) .loader-logo .lg-c, .js.anim:not(.logo-spreman) .nav-logo .lg-c { width: 0; }
.js.anim .loader-logo .lg-pro, .js.anim .loader-logo .lg-tag, .js.anim .nav-logo .lg-pro, .js.anim .nav-logo .lg-tag { opacity: 0; }

/* ---------- Responzivno ---------- */
.nav-logo { flex: none; }
/* Uzak desktop: 7 stavki menija + desna strana moraju stati u jedan red */
@media (min-width: 981px) and (max-width: 1320px) {
  .nav-meni { gap: 15px; }
  .nav-link { font-size: .86rem; }
  .nav-desno { gap: 12px; }
  .nav-desno > .nav-app:not(.nav-admin) { display: none; }
  .nav-in { gap: 14px; }
  .nav-logo .logo-svg { width: 118px; }
}
@media (max-width: 1180px) {
  .nav-app span { display: none; }
  .nav-app { padding: 9px; }
  .kontakt-mreza { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  :root { --nav-h: 68px; }
  .burger { display: block; }
  .nav-meni {
    position: fixed; inset: var(--nav-h) 0 auto; height: calc(100svh - var(--nav-h));
    flex-direction: column; gap: 0; padding: 24px var(--gutter);
    background: var(--bg); border-top: 1px solid var(--linija);
    clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); visibility: hidden;
  }
  .nav.otvorena .nav-meni { clip-path: inset(0); visibility: visible; }
  .nav.otvorena { background: var(--bg); }
  .nav-meni .nav-link { font: 700 clamp(1.8rem, 7vw, 2.6rem)/1.1 var(--f-naslov); color: var(--tekst); padding: 16px 0; border-bottom: 1px solid var(--linija); }
  .nav-meni .nav-link::after { display: none; }
  .nav-mob-extra { display: block; margin-top: auto; }
  .nav-mob-extra .nav-link { font-size: 1.1rem; font-family: var(--f-tekst); font-weight: 500; color: var(--blag); border: 0; }
  .nav-app, .nav-prijava, .nav-desno > .dugme { display: none; }
  .nav-logo .logo-svg { width: 128px; }

  .hero-skrol { display: none; }
  .brojke-mreza { flex-wrap: wrap; gap: 12px; }
  .broj, .broj-siri { flex: 1 1 calc(50% - 6px); }
  .broj dt { font-size: clamp(1.75rem, 8.5vw, 4.8rem); }
  .broj { padding: 22px 18px 20px; }
  .broj-rb { margin-bottom: 24px; }
  .broj dd { font-size: .88rem; }
  .usluge-mreza { grid-template-columns: 1fr; }
  .proces-in, .karijera-in, .ponuda-in { grid-template-columns: 1fr; }
  .proces-glava, .ponuda-glava { position: static; }
  .zasto-mreza { grid-template-columns: 1fr 1fr; }
  .zasto-stavka, .zasto-stavka:not(:nth-child(3n+1)) { padding: 36px 24px 40px 0; border-left: 0; }
  .zasto-stavka:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--linija); }
  .footer-vrh { grid-template-columns: 1fr 1fr; }
  .footer-brend { grid-column: 1 / -1; }
  .plutajuce { display: flex; }
  .na-vrh-dugme { right: 17px; bottom: 146px; } /* iznad WhatsApp/Viber dugmadi */
  .ref-lista { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .ref-lista::-webkit-scrollbar { display: none; }
  .ref { width: min(78vw, 400px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .broj dt { font-size: 7.4vw; }
  .jezici a { padding: 6px 5px; }
  .hero-cta { width: 100%; }
  .hero-cta .dugme { flex: 1 1 100%; justify-content: center; }
  .forma-mreza { grid-template-columns: 1fr; }
  .zasto-mreza { grid-template-columns: 1fr; }
  .zasto-stavka:nth-child(2n) { padding-left: 0; border-left: 0; }
  .uslovi { grid-template-columns: 1fr; }
  .kontakt-mreza { grid-template-columns: 1fr; }
  .footer-vrh { grid-template-columns: 1fr; }
  .mapa { height: 280px; }
  .dugme-veliko { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-traka { animation: none; }
}

/* ---------- Blog ---------- */
.blog-strana { padding: calc(var(--nav-h) + clamp(48px, 7vw, 90px)) 0 clamp(80px, 10vw, 140px); }
.blog-glava { max-width: 820px; margin-bottom: 36px; }
.blog-filteri { margin-bottom: 40px; }
.blog-filteri .filter { text-decoration: none; }
.blog-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 28px); } /* kolone se prilagođavaju širini */
.blog-kartica { display: flex; flex-direction: column; border: 1px solid var(--linija); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); transition: border-color .4s, transform .6s var(--ease); }
.blog-kartica:hover { border-color: var(--linija-jaka); transform: translateY(-4px); }
.blog-kartica-slika { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.blog-kartica-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.blog-kartica:hover .blog-kartica-slika img { transform: scale(1.05); }
.blog-kartica-telo { flex: 1; display: flex; flex-direction: column; padding: clamp(18px, 2.2vw, 26px); }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; color: var(--blag); margin-bottom: 12px; }
.blog-kat { color: var(--zelena); font-weight: 600; text-decoration: none; letter-spacing: .04em; }
.blog-kartica h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.22; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-kartica h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.blog-kartica:hover h3 a { background-size: 100% 1px; }
.blog-kartica h3 a::after { content: ''; position: absolute; inset: 0; } /* cela kartica je klikabilna */
.blog-kartica { position: relative; }
.blog-uvod { color: rgba(236,239,237,.72); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-procitaj { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; color: var(--blag); font-weight: 600; font-size: .9rem; transition: color .3s; }
.blog-procitaj .ik { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.blog-kartica:hover .blog-procitaj { color: var(--zelena); }
.blog-kartica:hover .blog-procitaj .ik { transform: translateX(5px); }
.blog-prazno { padding: 60px 24px; text-align: center; border: 1px dashed var(--linija-jaka); border-radius: var(--radius); color: var(--blag); }
.blog-strane { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 48px; color: var(--blag); font-size: .9rem; }
.blog-404 { text-align: left; display: grid; gap: 24px; justify-items: start; }

/* Na početnoj */
.blog-pocetna-glava { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }
.blog-pocetna-glava .sek-naslov { max-width: 760px; }

/* Jedna objava */
.objava-pregled { padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(232,193,103,.12); color: #E8C167; border: 1px solid rgba(232,193,103,.3); margin-bottom: 28px; font-weight: 500; }
.objava-glava { margin-bottom: clamp(28px, 4vw, 48px); }
.objava-nazad { display: inline-block; color: var(--blag); font-size: .9rem; margin-bottom: 28px; }
.objava-naslov { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.05; margin: 6px 0 20px; }
.objava-uvod { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: rgba(236,239,237,.78); line-height: 1.55; }
.objava-slika { position: relative; max-width: 1180px; aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(36px, 5vw, 64px); padding: 0; }
.objava-slika img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .objava-slika { aspect-ratio: 4 / 3; border-radius: 0; } }

/* Tipografija teksta objave */
.proza { font-size: 1.1rem; line-height: 1.75; color: rgba(236,239,237,.88); }
.proza > * + * { margin-top: 1.1em; }
.proza h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin-top: 1.8em; color: var(--tekst); }
.proza h3 { font-size: 1.3rem; line-height: 1.25; margin-top: 1.5em; color: var(--tekst); }
.proza a { color: var(--zelena); text-decoration: underline; text-underline-offset: 3px; }
.proza strong, .proza b { color: var(--tekst); font-weight: 600; }
.proza ul, .proza ol { padding-left: 1.3em; }
.proza li + li { margin-top: .4em; }
.proza li::marker { color: var(--zelena); }
.proza blockquote { margin-left: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--zelena); font-size: 1.2rem; color: var(--tekst); font-style: italic; }
.proza img { width: 100%; height: auto; border-radius: var(--radius-sm); margin-block: 1.6em; }
.proza pre, .proza code { background: var(--bg-3); border-radius: 6px; font-size: .9em; }
.proza code { padding: 2px 6px; }
.proza pre { padding: 16px; overflow-x: auto; }
.proza hr { border: 0; border-top: 1px solid var(--linija-jaka); margin-block: 2.4em; }

.objava-deli { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linija); color: var(--blag); font-size: .92rem; }
.objava-deli span { font-weight: 600; color: var(--tekst); }
.objava-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: radial-gradient(120% 140% at 100% 0%, rgba(94,209,138,.14), transparent 60%), var(--bg-2); border: 1px solid var(--linija-jaka); }
.objava-cta h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.objava-cta p { color: var(--blag); }
.blog-jos { margin-top: clamp(80px, 10vw, 130px); }
.blog-jos-naslov { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 32px; }

.blog-nova { margin-top: 26px; }

/* Istaknuta (najnovija) objava na vrhu liste: preko cele širine, slika levo, tekst desno */
.blog-kartica-istaknuta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.blog-kartica-istaknuta .blog-kartica-slika { aspect-ratio: auto; min-height: clamp(260px, 30vw, 420px); }
.blog-kartica-istaknuta .blog-kartica-telo { justify-content: center; padding: clamp(24px, 3.5vw, 48px); }
.blog-kartica-istaknuta h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); -webkit-line-clamp: 3; }
.blog-kartica-istaknuta .blog-uvod { font-size: 1.02rem; -webkit-line-clamp: 4; }
.blog-kartica-istaknuta .blog-procitaj { margin-top: 0; padding-top: 24px; }
@media (max-width: 760px) {
  .blog-kartica-istaknuta { display: flex; }
  .blog-kartica-istaknuta .blog-kartica-slika { aspect-ratio: 16 / 10; min-height: 0; }
}

/* Deljenje: zaobljeni tasteri koji se prelamaju */
.objava-deli { gap: 10px; }
.objava-deli span { margin-right: 6px; }
.objava-deli a { padding: 8px 16px; border: 1px solid var(--linija-jaka); border-radius: 100px; background: none; color: var(--tekst); transition: border-color .3s, color .3s; }
.objava-deli a:hover { border-color: var(--zelena); color: var(--zelena); }

/* Poziv na kraju objave: na telefonu jedno ispod drugog, dugme preko cele širine */
@media (max-width: 600px) {
  .objava-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .objava-cta .dugme { justify-content: center; }
  .blog-strane { flex-wrap: wrap; gap: 12px; }
  .blog-strane span { order: -1; flex-basis: 100%; text-align: center; }
}


/* ---------- Nalog: prijava i registracija ---------- */
.auth-str { min-height: 100svh; background:
  radial-gradient(60% 50% at 50% 0%, rgba(94,209,138,.09), transparent 70%), var(--bg); }
.auth { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 16px; }
.auth-logo { display: block; width: min(300px, 72vw); }
.auth-logo .logo-svg { width: 100%; height: auto; display: block; }
.auth-kartica { width: 100%; max-width: 460px; padding: clamp(24px, 5vw, 40px); background: rgba(17,20,22,.85); border: 1px solid var(--linija); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.auth-kartica:has(.auth-dva) { max-width: 560px; }
.auth-naslov { font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.1; margin-bottom: 8px; }
.auth-uvod { color: var(--blag); font-size: .95rem; margin-bottom: 24px; }
.auth-forma, .z-forma { display: grid; gap: 16px; }
.auth-forma label, .z-forma label { display: grid; gap: 7px; font-weight: 500; font-size: .9rem; }
.auth-forma small, .z-forma small { color: var(--blag); font-weight: 400; }
.auth-forma input:not([type=checkbox]), .z-forma input:not([type=checkbox]):not([type=radio]), .z-forma textarea, .kom-nova textarea, .kom-forma textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--linija-jaka);
  background: rgba(255,255,255,.03); color: var(--tekst); font: inherit; font-size: 1rem; font-weight: 400;
  transition: border-color .3s, background .3s;
}
.auth-forma input:focus, .z-forma input:focus, .z-forma textarea:focus, .kom-nova textarea:focus, .kom-forma textarea:focus { outline: none; border-color: var(--zelena); background: rgba(94,209,138,.04); }
.z-forma textarea, .kom-nova textarea, .kom-forma textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.auth-dva, .z-dva { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.dva-pomoc { grid-column: 1 / -1; margin-top: -8px; color: var(--blag); font-size: .8rem; }
.auth-forma .auth-cek { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--blag); line-height: 1.5; }
.auth-cek input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--zelena); cursor: pointer; }
.auth-forma .auth-cek { margin-top: 2px; font-size: .88rem; }
.auth-cek a, .auth-prelaz a { color: var(--zelena); text-decoration: underline; text-underline-offset: 3px; }
.auth-dugme { width: 100%; justify-content: center; margin-top: 4px; }
.auth-prelaz { text-align: center; color: var(--blag); font-size: .92rem; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linija); }
.auth-prelaz a { font-weight: 600; }
.auth-poruka { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: .92rem; background: rgba(94,209,138,.1); border: 1px solid rgba(94,209,138,.3); color: var(--zelena); }
.auth-poruka.greska { background: rgba(240,138,122,.1); border-color: rgba(240,138,122,.3); color: #F08A7A; }
.auth-poruka p + p { margin-top: 4px; }
.auth-forma .auth-skriveno { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-dno { width: 100%; max-width: 460px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .88rem; color: var(--blag); }
.auth-jezici { display: flex; gap: 4px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
.auth-jezici a { padding: 5px 7px; border-radius: 6px; }
.auth-jezici a[aria-current] { color: var(--tekst); background: rgba(255,255,255,.07); }
@media (max-width: 560px) { .auth-dva, .z-dva { grid-template-columns: 1fr; } }

/* Polje za lozinku sa dugmetom „prikaži“ (assets/js/lozinka.js) */
.a-lozinka { position: relative; display: block; }
.a-lozinka input { padding-right: 48px !important; }
.a-oko { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--blag); cursor: pointer; }
.a-oko:hover { color: var(--tekst); background: rgba(255,255,255,.06); }

/* ---------- Avatar i značke ---------- */
.avatar { --av: var(--zelena-t); flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--av) 22%, var(--bg-2)); color: color-mix(in srgb, var(--av) 70%, #fff);
  border: 1px solid color-mix(in srgb, var(--av) 45%, transparent); font: 600 .85rem/1 var(--f-tekst); letter-spacing: .02em; user-select: none; }
.avatar-lg { width: 48px; height: 48px; font-size: .95rem; }
.avatar-xl { width: 76px; height: 76px; font-size: 1.5rem; }
.nav-prijava .avatar { width: 34px; height: 34px; font-size: .75rem; }
.nav-prijava.prijavljen:hover { border-color: transparent; }
.nav-prijava.prijavljen:hover .avatar { border-color: var(--zelena); }
.znacka { display: inline-block; padding: 2px 8px; border-radius: 100px; background: rgba(94,209,138,.12); color: var(--zelena); font-size: .72rem; font-weight: 600; letter-spacing: .04em; vertical-align: middle; }
.kom-oznaka { color: #E8C167; font-size: .78rem; }
.z-poruka { padding: 12px 16px; border-radius: var(--radius-sm); margin: 0 0 24px; background: rgba(94,209,138,.1); border: 1px solid rgba(94,209,138,.3); color: var(--zelena); }
.z-poruka.greska { background: rgba(240,138,122,.1); border-color: rgba(240,138,122,.3); color: #F08A7A; }

/* ---------- Diskusija (komentari ispod objave i odgovori u temi) ---------- */
.diskusija { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linija); }
.diskusija-naslov { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.diskusija-naslov span { font: 600 .9rem var(--f-tekst); color: var(--blag); padding: 3px 11px; border: 1px solid var(--linija-jaka); border-radius: 100px; }
.diskusija-zajednica { margin-top: 28px; color: var(--blag); font-size: .92rem; }
.kom-lista { display: grid; margin-bottom: 32px; }
.kom-prazno { color: var(--blag); padding: 28px; text-align: center; border: 1px dashed var(--linija-jaka); border-radius: var(--radius); margin-bottom: 28px; }
.kom { display: flex; gap: 14px; padding: 18px 0; scroll-margin-top: calc(var(--nav-h) + 24px); }
.kom + .kom { border-top: 1px solid var(--linija); }
.kom:target > .kom-telo { animation: kom-istakni 2.4s var(--ease); }
@keyframes kom-istakni { from { background: rgba(94,209,138,.12); } to { background: transparent; } }
.kom-telo { flex: 1; min-width: 0; border-radius: var(--radius-sm); }
.kom-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .92rem; margin-bottom: 6px; }
.kom-vreme { color: var(--blag); font-size: .82rem; }
.kom-vreme:hover { color: var(--tekst); }
.kom-tekst { color: rgba(236,239,237,.88); line-height: 1.65; overflow-wrap: anywhere; }
.kom-tekst p + p { margin-top: .7em; }
.kom-tekst a { color: var(--zelena); text-decoration: underline; text-underline-offset: 3px; }
.kom-tim > .kom-telo > .kom-tekst { color: var(--tekst); }
.kom-skriven { opacity: .55; }
.kom-akcije { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 18px; margin-top: 8px; font-size: .85rem; }
.kom-akcije form { margin: 0; }
.kom-link, .kom-odgovor summary { background: none; border: 0; padding: 0; color: var(--blag); font: 500 .85rem var(--f-tekst); cursor: pointer; transition: color .25s; }
.kom-link:hover, .kom-odgovor summary:hover { color: var(--tekst); }
.kom-opasno:hover { color: #F08A7A; }
.kom-odgovor { order: -1; }
.kom-odgovor[open] { flex-basis: 100%; }
.kom-odgovor summary { list-style: none; display: inline-block; }
.kom-odgovor summary::-webkit-details-marker { display: none; }
.kom-odgovor[open] summary { color: var(--zelena); }
.kom-forma { display: grid; gap: 10px; justify-items: end; margin-top: 12px; }
.kom-odgovori { margin-top: 10px; padding-left: 18px; border-left: 2px solid var(--linija); }
.kom-odgovori .kom { padding: 14px 0; }
.kom-odgovori .avatar { width: 32px; height: 32px; font-size: .72rem; }
.kom-nova { display: flex; gap: 14px; align-items: flex-start; }
.kom-nova-polje { flex: 1; min-width: 0; display: grid; gap: 12px; }
.kom-nova-dno { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.kom-nova-dno small { color: var(--blag); font-size: .8rem; flex: 1 1 260px; }
.kom-prijava { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 22px 24px; border: 1px solid var(--linija-jaka); border-radius: var(--radius); background: var(--bg-2); }
.kom-prijava p { color: rgba(236,239,237,.85); flex: 1 1 280px; }
.kom-prijava div { display: flex; gap: 10px; flex-wrap: wrap; }
.kom-zatvoreno { padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(232,193,103,.08); border: 1px solid rgba(232,193,103,.25); color: #E8C167; font-size: .92rem; }
@media (max-width: 600px) {
  .kom-nova > .avatar { display: none; }
  .kom-odgovori { padding-left: 12px; }
  .kom-prijava div, .kom-prijava .dugme { width: 100%; justify-content: center; }
}

/* ---------- Zajednica (forum) ---------- */
.z-glava { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.z-glava > div { max-width: 820px; }
.z-lista { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linija); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.z-tema { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 110px; gap: 18px; align-items: start; padding: clamp(16px, 2.2vw, 24px); transition: background .3s; }
.z-tema + .z-tema { border-top: 1px solid var(--linija); }
.z-tema:hover { background: rgba(255,255,255,.02); }
.z-zakacena { background: rgba(94,209,138,.035); }
.z-tema-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8rem; margin-bottom: 6px; }
.z-tema-meta:empty { display: none; }
.z-tema h2 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.25; margin-bottom: 6px; overflow-wrap: anywhere; }
.z-tema h2 a::after { content: ""; position: absolute; inset: 0; }
.z-tema:hover h2 a { color: var(--zelena); }
.z-tema-uvod { color: rgba(236,239,237,.7); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.z-tema-autor { margin-top: 10px; color: var(--blag); font-size: .82rem; }
.z-tema-autor strong { color: rgba(236,239,237,.9); font-weight: 600; }
.z-tema-broj { display: grid; justify-items: end; text-align: right; gap: 2px; }
.z-tema-broj strong { font: 700 1.6rem/1 var(--f-naslov); }
.z-tema-broj span { font-size: .78rem; color: var(--blag); }
.z-tema-broj small { margin-top: 8px; font-size: .75rem; color: var(--blag); }
@media (max-width: 640px) {
  .z-tema { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
  .z-tema .avatar-lg { width: 38px; height: 38px; font-size: .8rem; }
  .z-tema-broj { grid-column: 2; display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .z-tema-broj strong { font-size: 1rem; }
  .z-tema-broj small { margin: 0 0 0 auto; }
}
.z-prva { margin-top: 8px; }
.z-naslov { font-size: clamp(1.9rem, 4vw, 3rem); margin: 10px 0 22px; overflow-wrap: anywhere; }
.z-autor { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: .92rem; color: var(--blag); }
.z-autor strong { color: var(--tekst); }
.z-tekst { font-size: 1.05rem; overflow-wrap: anywhere; }
.z-alati { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--linija-jaka); }
.z-alati form { margin: 0; }
.z-nova-naslov { margin-bottom: 30px; }
.z-kategorije { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.z-kategorije legend { font-weight: 500; font-size: .9rem; margin-bottom: 10px; }
.z-forma .z-kategorije .filter { display: inline-flex; position: relative; font-weight: 500; }
.z-kategorije input { position: absolute; opacity: 0; pointer-events: none; }
.z-kategorije .filter:has(input:checked) { background: var(--tekst); border-color: var(--tekst); color: var(--bg); }
.z-kategorije .filter:has(input:focus-visible) { outline: 2px solid var(--zelena); outline-offset: 2px; }

/* ---------- Moj nalog ---------- */
.nalog-glava { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.nalog-ime { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; }
.nalog-meta { color: var(--blag); margin-top: 6px; }
.nalog-akcije { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.nalog-akcije form { margin: 0; }
.nalog-blok { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--linija); border-radius: var(--radius); background: var(--bg-2); margin-bottom: 18px; }
.nalog-blok h2 { font-size: 1.2rem; margin-bottom: 18px; }
.nalog-blok .dugme { justify-self: start; }
.nalog-teme { list-style: none; padding: 0; margin: 0; }
.nalog-teme li { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linija); }
.nalog-teme li:first-child { border-top: 0; padding-top: 0; }
.nalog-teme a:hover { color: var(--zelena); }
.nalog-teme span { color: var(--blag); font-size: .85rem; }
.nalog-prazno { color: var(--blag); }
.nalog-opasno { border-color: rgba(240,138,122,.25); }
.nalog-opasno > p { color: var(--blag); margin: -8px 0 16px; }
.dugme-opasno { --dbg: #F08A7A; border-color: #F08A7A; }


/* ---------- Izbor jezika: padajuća lista (config: jezici_izbor = 'padajuci') ---------- */
.jezik-izbor { position: relative; }
.jezik-dugme { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 100px; border: 1px solid var(--linija); color: var(--blag); font-size: .78rem; font-weight: 600; letter-spacing: .06em; cursor: pointer; user-select: none; transition: color .3s, border-color .3s, background .3s; }
.jezik-dugme::-webkit-details-marker { display: none; }
.jezik-dugme .ik { width: 16px; height: 16px; }
.jezik-dugme .ik:last-child { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.jezik-dugme span { color: var(--tekst); }
.jezik-dugme:hover, .jezik-izbor[open] .jezik-dugme { color: var(--tekst); border-color: var(--linija-jaka); }
.jezik-izbor[open] .jezik-dugme { background: rgba(255,255,255,.05); }
.jezik-izbor[open] .jezik-dugme .ik:last-child { transform: rotate(180deg); }
.jezik-dugme:focus-visible { outline: 2px solid var(--zelena); outline-offset: 2px; }
.jezik-lista { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: rgba(17,20,22,.97); backdrop-filter: blur(14px); border: 1px solid var(--linija-jaka); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  animation: jezik-otvori .28s var(--ease); transform-origin: top right; }
@keyframes jezik-otvori { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.jezik-lista a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: rgba(236,239,237,.85); font-size: .92rem; transition: background .2s, color .2s; }
.jezik-lista a:hover, .jezik-lista a:focus-visible { background: rgba(255,255,255,.06); color: var(--tekst); outline: none; }
.jezik-kod { width: 30px; padding: 3px 0; text-align: center; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--blag); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.jezik-lista a.aktivan { color: var(--tekst); }
.jezik-lista a.aktivan .jezik-kod { background: var(--zelena); color: var(--bg); }
.jezik-lista .ik { width: 16px; height: 16px; margin-left: auto; color: var(--zelena); }
@media (max-width: 980px) { .jezik-dugme { padding: 7px 9px; } }

/* Potvrda email adrese */
.auth-ikona { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; background: rgba(94,209,138,.1); border: 1px solid rgba(94,209,138,.3); color: var(--zelena); }
.auth-ikona .ik { width: 26px; height: 26px; }
.auth-uvod strong { color: var(--tekst); font-weight: 600; }
.auth-dev { margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed rgba(232,193,103,.45); background: rgba(232,193,103,.06); font-size: .82rem; color: #E8C167; }
.auth-dev a { display: block; margin-top: 6px; color: var(--tekst); text-decoration: underline; word-break: break-all; }

/* Naslovna: sadržaj nikad ne ide ispod menija; naslov prati i visinu ekrana */
.hero { padding-top: clamp(110px, 15vh, 150px); }
.hero-naslov { font-size: clamp(3rem, min(10.5vw, 16vh), 10.5rem); }

/* ---------- Meni na ikonici korisnika (Admin, Dokumenti, Mail, Profil, Odjava) ---------- */
.nalog-meni { position: relative; }
.nalog-meni > summary { list-style: none; cursor: pointer; display: block; }
.nalog-meni > summary::-webkit-details-marker { display: none; }
.nalog-lista { position: absolute; right: 0; top: calc(100% + 12px); min-width: 230px; padding: 8px; background: #121516; border: 1px solid var(--linija, rgba(255,255,255,.1)); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 60; display: grid; gap: 2px; }
.nalog-ko { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linija, rgba(255,255,255,.1)); display: grid; gap: 2px; }
.nalog-ko b { color: var(--tekst, #fff); font-weight: 600; font-size: .92rem; }
.nalog-ko small { color: var(--blag, #97A09D); font-size: .78rem; }
.nalog-lista a, .nalog-lista button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; color: var(--blag, #97A09D); font: inherit; font-size: .9rem; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.nalog-lista a:hover, .nalog-lista button:hover { background: rgba(255,255,255,.06); color: var(--tekst, #fff); }
.nalog-lista .ik, .nalog-lista svg { width: 17px; height: 17px; flex: none; }
.nalog-lista form { margin: 0; border-top: 1px solid var(--linija, rgba(255,255,255,.1)); margin-top: 4px; padding-top: 4px; }
.nalog-lista form button:hover, .nalog-lista .nalog-odjava:hover { color: #ff8a80; }
.nalog-lista .nalog-odjava { border-top: 1px solid var(--linija, rgba(255,255,255,.1)); margin-top: 4px; border-radius: 0 0 9px 9px; }
.nav-mob-odjava { margin: 0; }
.nav-mob-odjava button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; text-align: left; }
/* ---------- Telefon: pregledniji meni ---------- */
@media (max-width: 980px) {
  .nav-meni { overflow-y: auto; }
  .nav-meni .nav-link { font-size: clamp(1.25rem, 5.4vw, 1.6rem); padding: 12px 0; }
  .nav-mob-extra { padding: 18px 0 8px; }
  .mob-nalog { background: rgba(255,255,255,.035); border: 1px solid var(--linija, rgba(255,255,255,.1)); border-radius: 18px; padding: 14px; margin-bottom: 14px; }
  .mob-ko { display: flex; align-items: center; gap: 12px; padding: 2px 2px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linija, rgba(255,255,255,.1)); }
  .mob-ko .avatar { width: 42px; height: 42px; font-size: .85rem; }
  .mob-ko b { display: block; color: var(--tekst, #fff); font-weight: 600; font-size: 1rem; }
  .mob-ko small { display: block; color: var(--blag, #97A09D); font-size: .8rem; word-break: break-all; }
  .mob-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mob-dugme { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--linija, rgba(255,255,255,.08)); color: var(--tekst, #fff); font: 500 .92rem/1.2 var(--f-tekst, inherit); text-decoration: none; min-height: 46px; box-sizing: border-box; }
  .mob-mreza > .mob-dugme:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mob-dugme:active { background: rgba(94,209,138,.16); border-color: var(--zelena, #5ED18A); }
  .mob-dugme .ik, .mob-dugme svg { width: 18px; height: 18px; flex: none; color: var(--zelena, #5ED18A); }
  .mob-odjava-forma { margin: 10px 0 0; }
  .mob-odjava { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border-radius: 12px; background: none; border: 1px solid rgba(255,138,128,.35); color: #ff8a80; font: 500 .92rem/1.2 var(--f-tekst, inherit); cursor: pointer; box-sizing: border-box; }
  .mob-odjava .ik { width: 17px; height: 17px; }
  .mob-cta { display: flex !important; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 4px; }
}