/* ============================================================
   ЈКП „КОМУНАЛИЈЕ“ СРЕМСКА МИТРОВИЦА
   Модеран, али озбиљан визуелни језик за јавно предузеће.
   ============================================================ */

/* ---------- ТОКЕНИ ---------- */
:root{
  --zelena-950:#062218;
  --zelena-900:#0A3626;
  --zelena-800:#0F4C35;
  --zelena-700:#146044;
  --zelena-600:#1B7A4B;
  --zelena-500:#249D5E;
  --zelena-100:#D7EADD;
  --zelena-50:#EAF4EE;
  --zlatna-600:#9A6C15;
  --zlatna:#C89B3C;
  --zlatna-100:#F3E7C9;

  --papir:#F5F7F4;
  --povrsina:#FFFFFF;
  --povrsina-2:#EFF3ED;
  --mastilo:#10160F;
  --mastilo-2:#38443A;
  --tiho:#69756C;
  --linija:#DCE3DA;
  --linija-tanka:#EAEEE7;

  --hitno:#B02618;
  --hitno-50:#FBEAE7;
  --vazno:#8A5410;
  --vazno-50:#FAF0DE;
  --info:#155E8A;
  --info-50:#E5F0F7;

  --sirina:1220px;
  --r-s:8px;
  --r-m:14px;
  --r-l:22px;
  --r-xl:30px;
  --senka-s:0 1px 3px rgba(10,54,38,.07);
  --senka:0 6px 24px -8px rgba(10,54,38,.16);
  --senka-l:0 18px 50px -14px rgba(10,54,38,.28);
  --prelaz:.22s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papir);color:var(--mastilo);
  font-family:"Golos Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--zelena-700);text-underline-offset:3px}
a:hover{color:var(--zelena-600)}
:focus-visible{outline:3px solid var(--zelena-500);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{
  font-family:"Newsreader","PT Serif",Georgia,serif;font-weight:600;line-height:1.14;
  margin:0;text-wrap:balance;letter-spacing:-.015em;
}
h1{font-size:clamp(34px,5.2vw,60px)}
h2{font-size:clamp(27px,3.4vw,40px)}
h3{font-size:21px}
p{margin:0 0 1em}
.omot{max-width:var(--sirina);margin:0 auto;padding:0 24px}

.nadnaslov{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Golos Text",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--zelena-600);
}
.nadnaslov::before{content:"";width:26px;height:2px;background:var(--zlatna);border-radius:2px}
.nadnaslov--svetli{color:var(--zlatna-100)}
.nadnaslov--centar{justify-content:center}

/* прескок */
.preskok{position:absolute;left:-9999px;top:0;z-index:200;background:var(--zelena-800);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.preskok:focus{left:0}

/* ---------- ТРАКА ---------- */
.traka{background:var(--zelena-950);color:#DCEAE1;font-size:14.5px}
.traka--vazno{background:linear-gradient(90deg,var(--vazno),#7A490E)}
.traka--hitno{background:linear-gradient(90deg,var(--hitno),#8E1E13)}
.traka .omot{display:flex;align-items:center;gap:14px;min-height:44px;padding-block:7px}
.traka a{color:#fff;font-weight:500;text-decoration:none}
.traka a:hover{text-decoration:underline}
.traka .oznaka{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.4);padding:3px 8px;border-radius:20px;white-space:nowrap}
.traka .zatvori{margin-left:auto;background:none;border:0;color:inherit;font-size:22px;cursor:pointer;padding:0 4px;line-height:1;opacity:.7}
.traka .zatvori:hover{opacity:1}

/* ---------- ЗАГЛАВЉЕ ---------- */
.zaglavlje{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--linija);
  transition:box-shadow var(--prelaz)}
.zaglavlje.uz-skrol{box-shadow:var(--senka-s)}
.zaglavlje .omot{display:flex;align-items:center;gap:15px;min-height:92px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;flex-shrink:0}
.logo .grb{width:68px;height:68px;flex-shrink:0;object-fit:contain}
.logo .ime{display:block;font-family:"Newsreader","PT Serif",serif;font-weight:600;font-size:22px;line-height:1.1;color:var(--zelena-800)}
.logo .mesto{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tiho);font-weight:600;margin-top:3px}

.meni{margin-left:auto;display:flex;align-items:center;gap:3px}
.meni > li{position:relative;list-style:none}
.meni ul{list-style:none;margin:0;padding:0}
.meni > li > a{display:block;padding:9px 14px;border-radius:22px;font-size:15px;font-weight:500;
  color:var(--mastilo-2);text-decoration:none;white-space:nowrap;transition:var(--prelaz)}
.meni > li > a:hover{background:var(--zelena-50);color:var(--zelena-800)}
.meni > li.tekuca > a{background:var(--zelena-800);color:#fff}
.podmeni{position:absolute;top:calc(100% + 8px);left:0;min-width:256px;background:var(--povrsina);
  border:1px solid var(--linija);border-radius:var(--r-m);box-shadow:var(--senka-l);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--prelaz)}
.meni > li:hover .podmeni,.meni > li:focus-within .podmeni{opacity:1;visibility:visible;transform:none}
.podmeni a{display:block;padding:10px 14px;border-radius:var(--r-s);font-size:15px;color:var(--mastilo-2);text-decoration:none}
.podmeni a:hover{background:var(--zelena-50);color:var(--zelena-800)}

.alatke{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pismo{display:flex;border:1px solid var(--linija);border-radius:22px;overflow:hidden;background:var(--povrsina)}
.pismo button{background:none;border:0;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--tiho);cursor:pointer;transition:var(--prelaz)}
.pismo button[aria-pressed="true"]{background:var(--zelena-800);color:#fff}
.dugme-meni{display:none;background:none;border:1px solid var(--linija);border-radius:12px;padding:10px 12px;cursor:pointer}
.dugme-meni span{display:block;width:20px;height:2px;background:var(--mastilo);margin:4px 0;transition:var(--prelaz)}

/* ---------- САТ + ПРОГНОЗА (у утилити траци) ---------- */
.utility{background:var(--zelena-900);color:#C4D6CB;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.06)}
.utility .omot{display:flex;align-items:center;gap:22px;min-height:38px;padding-block:5px}
.utility .u-levo{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.utility .u-desno{margin-left:auto;display:flex;align-items:center;gap:18px}
.utility .stavka{display:flex;align-items:center;gap:7px;white-space:nowrap}
.utility .stavka svg{width:15px;height:15px;opacity:.75;flex-shrink:0}
.utility .sat{font-variant-numeric:tabular-nums;font-weight:600;color:#fff}
.utility .prognoza{display:flex;align-items:center;gap:7px}
.utility .prognoza .temp{font-weight:600;color:#fff}
.utility .prognoza .ikona-v{font-size:15px;line-height:1}
.utility a{color:#DDEAE2;text-decoration:none}
.utility a:hover{color:#fff}
.utility .u-mreze{display:flex;gap:10px}
.utility .u-mreze a{display:inline-flex}
.utility .u-mreze svg{width:16px;height:16px}

/* ---------- ДУГМАД ---------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:13px 26px;border-radius:30px;border:1.5px solid transparent;
  font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;
  background:var(--zelena-800);color:#fff;transition:var(--prelaz)}
.dugme:hover{background:var(--zelena-700);color:#fff;transform:translateY(-2px);box-shadow:var(--senka)}
.dugme svg{width:19px;height:19px}
.dugme--sporedno{background:transparent;color:var(--zelena-800);border-color:var(--linija)}
.dugme--sporedno:hover{background:var(--povrsina);color:var(--zelena-800);border-color:var(--zelena-600)}
.dugme--svetlo{background:#fff;color:var(--zelena-800)}
.dugme--svetlo:hover{background:var(--zelena-50);color:var(--zelena-800)}
.dugme--duh{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.dugme--duh:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.dugme--zlato{background:var(--zlatna);color:#3A2A05}
.dugme--zlato:hover{background:#D4AA4E;color:#3A2A05}
.dugme--malo{min-height:42px;padding:9px 18px;font-size:14.5px}

/* ============================================================
   ХЕРОЈ СЛАЈДЕР
   ============================================================ */
.hero{position:relative;height:min(88vh,760px);min-height:540px;overflow:hidden;background:var(--zelena-950)}
.hero-slajd{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.hero-slajd.aktivan{opacity:1;pointer-events:auto}
.hero-slajd .poz{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.08);transition:transform 7s ease}
.hero-slajd.aktivan .poz{transform:scale(1)}
.hero-slajd::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,34,24,.92) 0%,rgba(10,54,38,.78) 42%,rgba(6,34,24,.35) 100%)}
.hero-sadrzaj{position:relative;z-index:3;height:100%;display:flex;align-items:center;padding-bottom:70px}
.hero-sadrzaj .omot{width:100%}
.hero-tekst{max-width:680px}
.hero-tekst .znak-kat{display:inline-block;margin-bottom:20px;padding:6px 16px;border-radius:22px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(4px)}
.hero-tekst h1{color:#fff;margin-bottom:16px;font-size:clamp(26px,3vw,38px);line-height:1.18;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-tekst h1 a{display:block}
.hero-tekst h1 a{color:#fff;text-decoration:none}
.hero-tekst p{color:#D6E6DC;font-size:19px;max-width:56ch;margin-bottom:30px}
.hero-akcije{display:flex;gap:14px;flex-wrap:wrap}

/* улазна анимација текста хероја кад слајд постане активан */
.hero-slajd .hero-tekst > *{opacity:0;transform:translateY(22px)}
.hero-slajd.aktivan .hero-tekst > *{animation:hero-ulaz .8s cubic-bezier(.2,.7,.3,1) forwards}
.hero-slajd.aktivan .hero-tekst > *:nth-child(1){animation-delay:.15s}
.hero-slajd.aktivan .hero-tekst > *:nth-child(2){animation-delay:.28s}
.hero-slajd.aktivan .hero-tekst > *:nth-child(3){animation-delay:.4s}
.hero-slajd.aktivan .hero-tekst > *:nth-child(4){animation-delay:.52s}
@keyframes hero-ulaz{to{opacity:1;transform:none}}

.hero-kontrole{position:absolute;left:0;right:0;bottom:116px;z-index:15}
.hero-kontrole .omot{display:flex;align-items:center;gap:20px}
.hero-tackice{display:flex;gap:10px}
.hero-tackice button{width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.4);transition:var(--prelaz)}
.hero-tackice button[aria-current="true"]{background:var(--zlatna);width:34px;border-radius:6px}
.hero-strele{margin-left:auto;display:flex;gap:10px}
.hero-strele button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:var(--prelaz)}
.hero-strele button:hover{background:#fff;color:var(--zelena-800)}
.hero-strele svg{width:20px;height:20px}

/* ---------- БРЗЕ УСЛУГЕ (испод хероја, преклапа) ---------- */
.brze-omot{position:relative;z-index:10;margin-top:-70px}
.brze{display:grid;gap:0;grid-template-columns:repeat(4,1fr);
  background:var(--povrsina);border-radius:var(--r-l);box-shadow:var(--senka-l);overflow:hidden}
.brza{padding:30px 26px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;
  border-right:1px solid var(--linija-tanka);transition:var(--prelaz);position:relative}
.brza:last-child{border-right:0}
.brza::before{content:"";position:absolute;inset:0;background:var(--zelena-800);
  transform:translateY(100%);transition:transform var(--prelaz);z-index:0}
.brza:hover::before{transform:translateY(0)}
.brza > *{position:relative;z-index:1;transition:color var(--prelaz)}
.brza .ikona{width:42px;height:42px;color:var(--zelena-600);margin-bottom:6px}
.brza b{font-size:18px;font-weight:600;color:var(--mastilo)}
.brza span{font-size:14px;color:var(--tiho);line-height:1.5}
.brza .strelica{margin-top:6px;font-size:14px;font-weight:600;color:var(--zelena-600);display:flex;align-items:center;gap:6px}
.brza:hover b,.brza:hover span,.brza:hover .ikona,.brza:hover .strelica{color:#fff}
.brza:hover .strelica{color:var(--zlatna-100)}

/* ---------- ОДЕЉЦИ ---------- */
.odeljak{padding:88px 0}
.odeljak--siv{background:var(--povrsina-2)}
.odeljak--tamni{background:var(--zelena-900);color:#DDEAE2}
.odeljak-glava{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}
.odeljak-glava .levo{max-width:640px}
.odeljak-glava h2{margin-top:14px}
.odeljak-glava--centar{flex-direction:column;align-items:center;text-align:center}
.odeljak-glava--centar .levo{max-width:600px}
.odeljak--tamni h2{color:#fff}
.veza-vise{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;color:var(--zelena-700)}
.veza-vise:hover{gap:12px}

/* ---------- СТАТИСТИКА ---------- */
.statistika{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:10px}
.stat .cifra{font-family:"Newsreader",serif;font-size:clamp(42px,5vw,64px);font-weight:600;
  line-height:1;color:var(--zlatna);font-variant-numeric:tabular-nums}
.odeljak--tamni .stat .cifra{color:var(--zlatna)}
.stat .opis{margin-top:10px;font-size:15px;color:inherit;opacity:.85}

/* ---------- ВЕСТИ ---------- */
.vesti{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.vesti--istaknuta{grid-template-columns:1.6fr 1fr 1fr}
.vest-kartica{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--prelaz);position:relative}
.vest-kartica:hover{transform:translateY(-4px);box-shadow:var(--senka-l);border-color:transparent}
.vest-kartica .slika{aspect-ratio:16/10;background:var(--povrsina-2);overflow:hidden;position:relative}
.vest-kartica .slika img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vest-kartica:hover .slika img{transform:scale(1.06)}
.vest-kartica .telo{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.vest-kartica h3{font-size:20px;line-height:1.28}
.vest-kartica h3 a{color:var(--mastilo);text-decoration:none}
.vest-kartica h3 a::after{content:"";position:absolute;inset:0}
.vest-kartica:hover h3 a{color:var(--zelena-700)}
.vest-kartica p{margin:0;font-size:15px;color:var(--mastilo-2);line-height:1.55}
.vest-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--tiho);margin-top:auto;padding-top:8px}
.vesti--istaknuta .vest-kartica:first-child h3{font-size:26px;font-family:"Newsreader",serif}
.vesti--istaknuta .vest-kartica:first-child .slika{aspect-ratio:16/11}

.znak{font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:20px;
  background:var(--zelena-50);color:var(--zelena-800);white-space:nowrap;display:inline-block}
.znak--hitno{background:var(--hitno-50);color:var(--hitno)}
.znak--vazno{background:var(--vazno-50);color:var(--vazno)}
.znak--info{background:var(--info-50);color:var(--info)}
.znak--na-slici{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.95);
  color:var(--zelena-800);box-shadow:var(--senka-s)}

/* ---------- СЕКТОРИ (икона-картице) ---------- */
.sektori{display:grid;gap:22px;grid-template-columns:repeat(4,1fr)}
.sektor-kartica{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:266px;
  display:flex;flex-direction:column;padding:28px 26px;text-decoration:none;color:#fff;
  background:linear-gradient(158deg,var(--zelena-700),var(--zelena-900));transition:var(--prelaz);isolation:isolate}
/* суптилни декоративни круг у позадини */
.sektor-kartica::after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,155,60,.22),transparent 70%);z-index:0;transition:var(--prelaz)}
.sektor-kartica:hover{transform:translateY(-5px);box-shadow:var(--senka-l);color:#fff}
.sektor-kartica:hover::after{transform:scale(1.35);background:radial-gradient(circle,rgba(200,155,60,.32),transparent 70%)}
.sektor-kartica > *{position:relative;z-index:1}
.sektor-kartica .ikona-krug{
  width:62px;height:62px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(255,255,255,.1);border:1px solid rgba(200,155,60,.4);color:var(--zlatna);
  transition:var(--prelaz)}
.sektor-kartica:hover .ikona-krug{background:var(--zlatna);color:var(--zelena-900);border-color:var(--zlatna);transform:rotate(-6deg)}
.sektor-kartica .ikona-krug svg{width:32px;height:32px}
.sektor-kartica h3{font-size:19.5px;color:#fff;line-height:1.2}
.sektor-kartica p{margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.8);line-height:1.5}
.sektor-kartica .kontakt{margin-top:auto;padding-top:16px;font-size:13.5px;color:var(--zlatna-100);font-weight:600;
  display:flex;align-items:center;gap:7px}

/* ---------- ГАЛЕРИЈА ---------- */
.galerija-mreza{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}
.galerija-stavka{position:relative;overflow:hidden;border-radius:var(--r-m);cursor:pointer;
  background:var(--povrsina-2);border:0;padding:0;display:block;width:100%;height:100%}
.galerija-stavka:nth-child(1){grid-column:span 2;grid-row:span 2}
.galerija-stavka:nth-child(6){grid-column:span 2}
.galerija-stavka img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galerija-stavka::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,34,24,.5),transparent 60%);opacity:0;transition:var(--prelaz)}
.galerija-stavka:hover img{transform:scale(1.07)}
.galerija-stavka:hover::after{opacity:1}
.galerija-stavka .lupa{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--zelena-800);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:var(--prelaz);z-index:2}
.galerija-stavka:hover .lupa{opacity:1;transform:none}

/* лајтбокс */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(6,20,14,.94);display:none;
  align-items:center;justify-content:center;padding:24px}
.lightbox.otvoren{display:flex}
.lightbox img{max-width:90vw;max-height:82vh;border-radius:var(--r-m);box-shadow:var(--senka-l)}
.lightbox-zatvori{position:absolute;top:24px;right:28px;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:26px;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  display:grid;place-items:center}
.lightbox-nav:hover{background:#fff;color:var(--zelena-800)}
.lightbox-nav.prev{left:24px}.lightbox-nav.next{right:24px}
.lightbox-opis{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:#DCEAE1;font-size:15px}

/* ---------- CTA ---------- */
.cta{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:64px 56px;
  background:linear-gradient(120deg,var(--zelena-900),var(--zelena-700));color:#fff;isolation:isolate}
.cta::after{content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,155,60,.28),transparent 70%);z-index:-1}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:#D6E6DC;max-width:52ch;margin:14px 0 28px;font-size:18px}

/* ---------- КАРТИЦЕ / ДОКУМЕНТА (унутрашње стране) ---------- */
.filteri{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--povrsina);
  border:1px solid var(--linija);border-radius:var(--r-l);padding:18px 20px;margin-bottom:28px;box-shadow:var(--senka-s)}
.filteri label{font-size:12.5px;font-weight:700;color:var(--tiho);text-transform:uppercase;letter-spacing:.06em}
.filteri select,.filteri input[type=search]{font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--linija);
  border-radius:22px;background:var(--povrsina);color:var(--mastilo);min-height:46px}
.filteri input[type=search]{min-width:240px;flex:1}

.dokumenti{display:flex;flex-direction:column;gap:14px}
.dokument{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-m);padding:22px 24px;transition:var(--prelaz)}
.dokument:hover{box-shadow:var(--senka);border-color:transparent}
.dokument > header{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.dokument h3{font-size:18px;line-height:1.35;flex:1;min-width:240px;font-family:"Golos Text",sans-serif;font-weight:600}
.dokument .oznaka{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px;
  color:var(--tiho);background:var(--povrsina-2);padding:4px 10px;border-radius:20px;white-space:nowrap}
.dokument .fajlovi{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--linija-tanka);display:flex;flex-direction:column;gap:8px}
/* ред фајла: тип · назив · величина · Погледај/Преузми */
.fajl-red{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:var(--r-s);
  background:var(--povrsina-2);border:1px solid var(--linija-tanka);font-size:15px;transition:var(--prelaz)}
.fajl-red:hover{border-color:var(--zelena-600);background:var(--zelena-50)}
.fajl-red .tip{font-size:10px;font-weight:700;letter-spacing:.05em;background:var(--hitno);color:#fff;
  padding:5px 9px;border-radius:6px;min-width:46px;text-align:center;flex-shrink:0}
.fajl-red .tip--doc{background:var(--info)}
.fajl-red .tip--xls{background:#1B6B3A}
.fajl-red .tip--pdf{background:var(--hitno)}
.fajl-red .fajl-ime{flex:1;min-width:0;font-weight:500;color:var(--mastilo);overflow:hidden;text-overflow:ellipsis}
.fajl-red .vel{font-size:13px;color:var(--tiho);white-space:nowrap;flex-shrink:0}
.fajl-red .akcije{display:flex;gap:8px;flex-shrink:0}
.fajl-akcija{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;
  font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:var(--prelaz);border:1px solid transparent}
.fajl-akcija svg{width:15px;height:15px}
.fajl-akcija--vidi{background:var(--zelena-800);color:#fff}
.fajl-akcija--vidi:hover{background:var(--zelena-700);color:#fff}
.fajl-akcija--skini{background:transparent;color:var(--zelena-800);border-color:var(--linija)}
.fajl-akcija--skini:hover{border-color:var(--zelena-600);background:var(--povrsina)}
/* стари стил задржан за просте спискове */
.fajl-link{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r-s);text-decoration:none;color:var(--mastilo-2);font-size:15px;transition:var(--prelaz)}
.fajl-link:hover{background:var(--zelena-50);color:var(--zelena-800)}
.fajl-link .tip{font-size:10px;font-weight:700;letter-spacing:.05em;background:var(--zelena-800);color:#fff;padding:4px 8px;border-radius:6px;min-width:42px;text-align:center}
.fajl-link .tip--doc{background:var(--info)}
.fajl-link .tip--xls{background:#1B6B3A}
.fajl-link .vel{margin-left:auto;font-size:13px;color:var(--tiho);white-space:nowrap}
@media (max-width:620px){
  .fajl-red{flex-wrap:wrap}
  .fajl-red .fajl-ime{flex-basis:100%;order:-1}
  .fajl-red .akcije{margin-left:auto}
}

.tabela-omot{overflow-x:auto;border:1px solid var(--linija);border-radius:var(--r-m);background:var(--povrsina)}
table.tabela{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
table.tabela th,table.tabela td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--linija-tanka)}
table.tabela thead th{background:var(--povrsina-2);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tiho);font-weight:700}
table.tabela tbody tr:last-child td{border-bottom:0}
table.tabela td.broj{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* обрасци */
.polje{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.polje > label{font-size:14.5px;font-weight:600;color:var(--mastilo-2)}
.polje .pomoc{font-size:13.5px;color:var(--tiho);line-height:1.45}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],
input[type=number],select,textarea{font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--linija);
  border-radius:var(--r-s);background:var(--povrsina);color:var(--mastilo);width:100%;min-height:50px}
textarea{min-height:140px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--zelena-600);outline:2px solid var(--zelena-50)}

.napomena{border-left:3px solid var(--info);background:var(--info-50);padding:16px 20px;border-radius:0 var(--r-s) var(--r-s) 0;font-size:15.5px}
.napomena--upozorenje{border-left-color:var(--vazno);background:var(--vazno-50)}
.napomena--greska{border-left-color:var(--hitno);background:var(--hitno-50)}
.napomena p:last-child{margin-bottom:0}

.paginacija{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.paginacija a,.paginacija span{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--linija);border-radius:26px;background:var(--povrsina);color:var(--mastilo-2);
  text-decoration:none;font-size:15.5px;font-weight:500;transition:var(--prelaz)}
.paginacija a:hover{background:var(--zelena-50);color:var(--zelena-800);border-color:var(--zelena-600)}
.paginacija .tekuca{background:var(--zelena-800);color:#fff;border-color:var(--zelena-800)}

.clanak{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-xl);padding:clamp(28px,5vw,64px)}
.clanak-telo{max-width:70ch;font-size:18px}
.clanak-telo h2{margin:1.6em 0 .5em;font-size:28px}
.clanak-telo h3{margin:1.4em 0 .4em}
.clanak-telo ul,.clanak-telo ol{padding-left:1.4em;margin:0 0 1.2em}
.clanak-telo li{margin-bottom:.5em}
.clanak-telo img{border-radius:var(--r-m);margin:1.6em 0}
.clanak-telo blockquote{margin:1.6em 0;padding:6px 0 6px 24px;border-left:3px solid var(--zlatna);color:var(--mastilo-2);font-style:italic}

/* унутрашње стране: размак од садржаја до подножја */
main.unutra{padding-bottom:88px}
main.unutra > .omot{padding-top:8px}

/* ---------- ЗАГЛАВЉЕ УНУТРАШЊЕ СТРАНЕ ---------- */
.str-hero{position:relative;background:linear-gradient(150deg,var(--zelena-800),var(--zelena-950));color:#fff;
  padding:44px 0 52px;overflow:hidden;isolation:isolate}
.str-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,155,60,.2),transparent 70%);z-index:-1}
.str-hero .putanja{padding:0 0 14px;color:#A9C4B5}
.str-hero .putanja a{color:#A9C4B5}
.str-hero .putanja a:hover{color:#fff}
.str-hero h1{color:#fff;max-width:20ch}
.str-hero .pod{color:#CFE0D5;margin:12px 0 0;font-size:18px;max-width:60ch}

.str-raspored{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) 280px;align-items:start;margin-top:-28px;position:relative;z-index:2}
.str-clanak{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-l);padding:clamp(26px,4vw,48px);box-shadow:var(--senka)}
.str-bocno{display:flex;flex-direction:column;gap:18px;position:sticky;top:104px}
.str-meni{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-l);padding:12px;box-shadow:var(--senka-s)}
.str-meni h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tiho);font-weight:700;padding:10px 14px 8px;font-family:"Golos Text",sans-serif}
.str-meni a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-s);text-decoration:none;color:var(--mastilo-2);font-size:15px;font-weight:500;transition:var(--prelaz)}
.str-meni a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linija);flex-shrink:0;transition:var(--prelaz)}
.str-meni a:hover{background:var(--zelena-50);color:var(--zelena-800)}
.str-meni a:hover::before{background:var(--zelena-600)}
.str-meni a.tekuca{background:var(--zelena-800);color:#fff;font-weight:600}
.str-meni a.tekuca::before{background:var(--zlatna)}

/* биографија руководиоца (Менаџмент) */
.rukovodilac{display:flex;align-items:center;gap:22px;padding-bottom:26px;margin-bottom:28px;border-bottom:1px solid var(--linija-tanka)}
.rukovodilac .avatar{width:96px;height:96px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--zelena-700),var(--zelena-900));color:var(--zlatna-100);
  font-family:"Newsreader",serif;font-size:38px;font-weight:600;box-shadow:var(--senka)}
.rukovodilac .ime{font-family:"Newsreader",serif;font-size:26px;font-weight:600;line-height:1.15}
.rukovodilac .funkcija{color:var(--zelena-700);font-weight:600;font-size:15px;margin-top:4px;letter-spacing:.02em}

@media (max-width:900px){
  .str-raspored{grid-template-columns:1fr}
  .str-bocno{position:static;order:-1}
  .str-meni{display:flex;flex-wrap:wrap;gap:4px}
  .str-meni h2{flex-basis:100%}
  .str-meni a{flex:1;min-width:140px}
}
@media (max-width:560px){.rukovodilac{flex-direction:column;text-align:center;align-items:center}}

.putanja{font-size:14px;color:var(--tiho);padding:22px 0}
.putanja a{color:var(--tiho);text-decoration:none}
.putanja a:hover{color:var(--zelena-700)}
.putanja span{margin:0 8px;opacity:.5}

.okvir{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-l);padding:26px}
.okvir--istaknut{border-top:3px solid var(--zelena-600)}
.okvir > h2{font-size:20px;margin-bottom:16px;font-family:"Golos Text",sans-serif;font-weight:700}
.podaci{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15.5px}
.oznaka-polja{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tiho);font-weight:700;margin-bottom:3px}

.sektor-raspored{display:grid;gap:40px;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);align-items:start}
.sektor-bocno{display:flex;flex-direction:column;gap:20px;position:sticky;top:104px}
.kontakt-raspored{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.polje-par{display:grid;gap:0 18px;grid-template-columns:1fr 1fr}

.racun-forma{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);max-width:580px;box-shadow:var(--senka)}
.racun-rezultat{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-xl);overflow:hidden;margin-top:30px;box-shadow:var(--senka)}
.racun-rezultat > header{background:linear-gradient(120deg,var(--zelena-800),var(--zelena-600));color:#fff;padding:26px 30px}
.racun-rezultat > header h2{color:#fff;font-size:23px}
.racun-rezultat > header p{margin:5px 0 0;color:#D6E6DC;font-size:15px}
.racun-iznos{display:flex;align-items:baseline;gap:12px;padding:28px 30px;border-bottom:1px solid var(--linija-tanka)}
.racun-iznos .cifra{font-size:44px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--zelena-800);font-family:"Newsreader",serif}
.racun-iznos .valuta{font-size:15px;color:var(--tiho)}

.prazno{text-align:center;padding:64px 20px;color:var(--tiho);background:var(--povrsina);border:1px dashed var(--linija);border-radius:var(--r-l)}
.prazno h3{color:var(--mastilo-2);margin-bottom:8px}

/* ---------- МАПА СЕКТОРА ---------- */
.mapa-blok{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--linija);background:var(--povrsina-2);min-height:280px;position:relative}
.mapa-blok iframe{width:100%;height:300px;border:0;display:block}
.mapa-najava{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:24px;background:linear-gradient(150deg,var(--zelena-800),var(--zelena-900));color:#fff}
.mapa-najava svg{width:40px;height:40px;opacity:.85}
.mapa-najava p{margin:0;font-size:14.5px;color:#D6E6DC;max-width:34ch;line-height:1.5}
.mapa-najava .adresa-t{font-weight:600;color:#fff;font-size:16px;font-family:"Newsreader",serif}

/* ---------- ОБАВЕШТЕЊЕ О КОЛАЧИЋИМА ---------- */
.kolacici{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:250;
  width:min(680px,calc(100% - 32px));background:var(--povrsina);border:1px solid var(--linija);
  border-radius:var(--r-l);box-shadow:var(--senka-l);padding:22px 26px;display:none}
.kolacici.vidljiv{display:block;animation:kolacici-ulaz .4s ease}
@keyframes kolacici-ulaz{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.kolacici h3{font-size:18px;margin-bottom:8px;font-family:"Golos Text",sans-serif;font-weight:700}
.kolacici p{font-size:14.5px;color:var(--mastilo-2);margin:0 0 16px;line-height:1.55}
.kolacici p a{color:var(--zelena-700);font-weight:600}
.kolacici-akcije{display:flex;gap:10px;flex-wrap:wrap}
.kolacici-akcije .dugme{min-height:44px;padding:10px 22px;font-size:15px}
@media (max-width:560px){
  .kolacici{bottom:0;border-radius:var(--r-l) var(--r-l) 0 0;width:100%}
  .kolacici-akcije .dugme{flex:1}
}

/* ---------- ПОДНОЖЈЕ ---------- */
.podnozje{background:var(--zelena-950);color:#B4C8BD;margin-top:0;padding:70px 0 0;font-size:15.5px;position:relative;overflow:hidden}
.podnozje::before{content:"";position:absolute;top:-120px;left:-80px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,122,75,.22),transparent 70%)}
.podnozje .omot{position:relative}
.podnozje a{color:#DDEAE2;text-decoration:none}
.podnozje a:hover{color:#fff;text-decoration:underline}
.podnozje h4{color:#fff;font-size:16px;margin-bottom:16px;font-family:"Golos Text",sans-serif;font-weight:700}
.podnozje-mreza{display:grid;gap:40px;grid-template-columns:1.5fr 1fr 1fr;padding-bottom:44px}
.podnozje .logo-f{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.podnozje .logo-f img{height:96px;width:auto}
.podnozje ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.podnozje .red{display:flex;gap:10px}
.podnozje .red b{color:#fff;font-weight:600;min-width:104px;flex-shrink:0}
.podnozje-mreze{display:flex;gap:12px;margin-top:18px}
.podnozje-mreze a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;transition:var(--prelaz)}
.podnozje-mreze a:hover{background:var(--zelena-600);border-color:var(--zelena-600)}
.podnozje-mreze svg{width:20px;height:20px}
.podnozje-dno{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:14px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:0}

/* ============================================================
   АНИМАЦИЈА НА СКРОЛ (креће из видљивог стања ако JS закаже)
   ============================================================ */
.otkrij{opacity:1;transform:none}
.js .otkrij{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .otkrij.vidljiv{opacity:1;transform:none}
.js .otkrij.kasni-1{transition-delay:.09s}
.js .otkrij.kasni-2{transition-delay:.18s}
.js .otkrij.kasni-3{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto}
  .hero-slajd .poz{transform:none !important}
  .js .otkrij{opacity:1 !important;transform:none !important}
  .hero-slajd .hero-tekst > *{opacity:1 !important;transform:none !important}
}

/* ============================================================
   МОБИЛНИ
   ============================================================ */
@media (max-width:1080px){
  .brze{grid-template-columns:repeat(2,1fr)}
  .brza:nth-child(2){border-right:0}
  .sektori{grid-template-columns:repeat(2,1fr)}
  .vesti,.vesti--istaknuta{grid-template-columns:repeat(2,1fr)}
  .vesti--istaknuta .vest-kartica:first-child{grid-column:span 2}
  .statistika{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .galerija-mreza{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  body{font-size:16px}
  .utility .u-desno{display:none}
  .utility .omot{justify-content:center;gap:16px}
  .utility{font-size:12.5px}
  .dugme-meni{display:block;margin-left:auto}
  .meni{display:none;position:fixed;inset:80px 0 0;background:var(--povrsina);flex-direction:column;
    align-items:stretch;gap:0;padding:18px 24px 48px;overflow-y:auto;z-index:99}
  .meni.otvoren{display:flex}
  .meni > li > a{padding:15px 10px;font-size:17px;border-bottom:1px solid var(--linija-tanka);border-radius:0}
  .meni > li.tekuca > a{background:none;color:var(--zelena-800);box-shadow:inset 3px 0 0 var(--zelena-600)}
  .podmeni{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px 18px;min-width:0}
  .hero{height:auto;min-height:0;padding:80px 0 100px}
  .hero-slajd{position:relative;opacity:0;display:none}
  .hero-slajd.aktivan{display:block;opacity:1}
  .hero-kontrole{position:static;margin-top:26px}
  .brze-omot{margin-top:-50px}
  .brze{grid-template-columns:1fr}
  .brza{border-right:0;border-bottom:1px solid var(--linija-tanka)}
  .odeljak{padding:56px 0}
  .odeljak-glava{flex-direction:column;align-items:flex-start;gap:12px}
  .vesti,.vesti--istaknuta,.sektori{grid-template-columns:1fr}
  .vesti--istaknuta .vest-kartica:first-child{grid-column:auto}
  .statistika{grid-template-columns:repeat(2,1fr)}
  .galerija-mreza{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .galerija-stavka:nth-child(1){grid-column:span 2;grid-row:span 1}
  .galerija-stavka:nth-child(6){grid-column:auto}
  .sektor-raspored,.kontakt-raspored{grid-template-columns:1fr}
  .sektor-bocno{position:static}
  .polje-par{grid-template-columns:1fr}
  .cta{padding:44px 28px}
  .podnozje-mreza{grid-template-columns:1fr;gap:32px}
  .podnozje-dno{flex-direction:column;gap:10px}
}

@media print{
  .zaglavlje,.podnozje,.traka,.filteri,.paginacija,.dugme-meni,.alatke,.hero-kontrole{display:none}
  body{background:#fff;font-size:12pt}
  .clanak{border:0;padding:0}
}

/* ============================================================
   ДОРАДЕ
   ============================================================ */

/* ---------- Особе (Надзорни одбор, Менаџмент) ---------- */
.clanak-telo .osobe{display:flex;flex-direction:column;gap:18px;margin:20px 0}
.clanak-telo .osoba{background:var(--povrsina-2);border:1px solid var(--linija);border-radius:var(--r-m);padding:24px}
.clanak-telo .osoba-glava{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.clanak-telo .osoba-avatar{width:76px;height:76px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  object-fit:cover;background:linear-gradient(150deg,var(--zelena-700),var(--zelena-900));color:var(--zlatna-100);
  font-family:"Newsreader",serif;font-size:26px;font-weight:600}
img.osoba-avatar{object-fit:cover}
.clanak-telo .osoba-ime{font-family:"Newsreader",serif;font-size:19px;font-weight:600;line-height:1.15}
.clanak-telo .osoba-funkcija{color:var(--zelena-700);font-weight:600;font-size:13.5px;margin-top:2px}
.clanak-telo .osoba-bio{font-size:14.5px;color:var(--mastilo-2);line-height:1.6}
.clanak-telo .osoba-bio p{margin:0 0 .7em}

/* ---------- Фајл-ред у уском оквиру (бочни ценовник) ---------- */
.okvir .fajl-red{flex-wrap:wrap;gap:8px 10px}
.okvir .fajl-red .fajl-ime{flex-basis:calc(100% - 60px)}
.okvir .fajl-red .akcije{width:100%;justify-content:flex-start}
.okvir .fajl-red .akcije .fajl-akcija{flex:1;justify-content:center}

/* ---------- Custom dropdown / select ---------- */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230F4C35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;cursor:pointer;
}
select::-ms-expand{display:none}

/* ---------- ЛОАДЕР / ПРЕЛАЗ СТРАНИЦА ---------- */
#loader{position:fixed;inset:0;z-index:400;background:linear-gradient(150deg,var(--zelena-800),var(--zelena-950));
  display:grid;place-items:center;opacity:1;transition:opacity .5s ease;pointer-events:none}
#loader.sakriven{opacity:0}
#loader .loader-unutar{display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
#loader .loader-logo{width:min(300px,72vw);height:auto;animation:loader-puls 1.6s ease-in-out infinite}
#loader .loader-traka{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
#loader .loader-traka span{display:block;width:40%;height:100%;border-radius:3px;background:var(--zlatna);animation:loader-klizi 1.1s ease-in-out infinite}
@keyframes loader-klizi{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes loader-puls{0%,100%{opacity:.82;transform:scale(.99)}50%{opacity:1;transform:scale(1)}}
/* благи улазак садржаја кад лоадер нестане */
body.ucitano main{animation:sadrzaj-ulaz .5s ease}
@keyframes sadrzaj-ulaz{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #loader .loader-logo,#loader .loader-traka span{animation:none}
  body.ucitano main{animation:none}
}

/* ---------- CTA са лого-платном „За лепо лице“ ---------- */
.cta{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center}
.cta-tekst{min-width:0}
.cta-logo{display:flex;align-items:center;justify-content:center}
.cta-logo img{max-width:100%;max-height:190px;width:auto;opacity:.96;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}
@media (max-width:820px){
  .cta{grid-template-columns:1fr;text-align:left}
  .cta-logo{display:none}
}

/* ---------- ПОДНОЖЈЕ 4 колоне ---------- */
.podnozje-mreza{grid-template-columns:auto 1.2fr 1fr 1fr;gap:40px}
.podnozje-brend{display:flex;flex-direction:column;gap:14px}
.podnozje-brend img{height:150px;width:auto}
@media (max-width:980px){.podnozje-mreza{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.podnozje-mreza{grid-template-columns:1fr}}

/* ---------- СЕКТОР — hero са иконом ---------- */
.sektor-hero{background:linear-gradient(150deg,var(--zelena-800),var(--zelena-950));color:#fff;
  padding:40px 0 56px;overflow:hidden;isolation:isolate;position:relative}
.sektor-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,155,60,.2),transparent 70%);z-index:-1}
.sektor-hero .putanja{padding:0 0 16px;color:#A9C4B5}
.sektor-hero .putanja a{color:#A9C4B5}.sektor-hero .putanja a:hover{color:#fff}
.sektor-hero-red{display:flex;align-items:center;gap:22px}
.sektor-hero-ikona{width:82px;height:82px;border-radius:20px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(200,155,60,.45);color:var(--zlatna)}
.sektor-hero-ikona svg{width:44px;height:44px}
.sektor-hero h1{color:#fff}
.sektor-hero .pod{color:#CFE0D5;margin:8px 0 0;font-size:18px;max-width:60ch}
.sektor-raspored{margin-top:-30px;position:relative;z-index:2}
.sektor-raspored .clanak{box-shadow:var(--senka)}
@media (max-width:560px){.sektor-hero-red{flex-direction:column;align-items:flex-start;gap:16px}}

/* ---------- Бочни ценовник: чврсто вертикално, не иска́че ---------- */
.okvir .fajlovi{gap:10px}
.okvir .fajl-red{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
.okvir .fajl-red .tip{align-self:flex-start}
.okvir .fajl-red .fajl-ime{flex:none;white-space:normal;font-size:14.5px}
.okvir .fajl-red .vel{align-self:flex-start}
.okvir .fajl-red .akcije{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.okvir .fajl-red .akcije .fajl-akcija{justify-content:center;padding:10px 8px}

/* ---------- Подножје: лепша контакт колона ---------- */
.podnozje .red{flex-direction:column;gap:2px;margin-bottom:12px}
.podnozje .red b{min-width:0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#7FA292;font-weight:700}
.podnozje .red span,.podnozje .red a{color:#DDEAE2;font-size:15px}
.podnozje ul{gap:0}

/* ============================================================
   ДОРАДЕ 2
   ============================================================ */

/* ---------- Трака обавештења — упечатљива, св*тлуца ---------- */
.traka{position:relative;overflow:hidden}
.traka .oznaka{animation:oznaka-puls 2s ease-in-out infinite}
@keyframes oznaka-puls{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 4px rgba(255,255,255,0)}}
.traka::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  animation:traka-sjaj 4.5s ease-in-out infinite;pointer-events:none}
@keyframes traka-sjaj{0%{left:-40%}55%,100%{left:120%}}
@media (prefers-reduced-motion:reduce){.traka::before,.traka .oznaka{animation:none}}

/* ---------- Утилити — без иконица, раздвојено линијом ---------- */
.utility .u-levo .stavka svg{display:none}
.utility .u-levo{gap:0}
.utility .u-levo .stavka{padding:0 18px;position:relative}
.utility .u-levo .stavka:first-child{padding-left:0}
.utility .u-levo .stavka + .stavka::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:rgba(255,255,255,.22)}

/* ---------- Табеле унутар садржаја (сектори, странице) ---------- */
.clanak-telo table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px;display:table}
.clanak-telo table th,.clanak-telo table td{border:1px solid var(--linija);padding:9px 12px;text-align:left;vertical-align:top}
.clanak-telo table th{background:var(--povrsina-2);font-weight:600;color:var(--mastilo)}
.clanak-telo table tr:nth-child(even) td{background:var(--povrsina-2)}
/* омот за широке табеле да не испадају */
.clanak-telo .tabela-omot,.tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border-radius:var(--r-s)}
.clanak-telo .tabela-omot table{margin:0}
.clanak-telo img{height:auto}
.clanak-telo{overflow-wrap:break-word}

/* ---------- еРачуни ставка у менију (истакнута, зелена) ---------- */
.meni > li.meni-eracuni > a{background:var(--zelena-800);color:#fff;font-weight:600}
.meni > li.meni-eracuni > a:hover{background:var(--zelena-700);color:#fff}
.meni > li.meni-eracuni.tekuca > a{background:var(--zelena-700);color:#fff}

/* ---------- „Ускоро“ страница ---------- */
.uskoro{text-align:center;max-width:640px;margin:0 auto;padding:40px 20px}
.uskoro .ikona-uskoro{width:88px;height:88px;margin:0 auto 24px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--zlatna),var(--zlatna-600));color:#fff}
.uskoro .ikona-uskoro svg{width:46px;height:46px}
.uskoro h1{margin-bottom:14px}
.uskoro p{color:var(--mastilo-2);font-size:18px;max-width:52ch;margin:0 auto 10px}

/* опис сектора мало мањи и питак */
.sektor-raspored .clanak-telo{font-size:16px;line-height:1.7}
.sektor-raspored .clanak-telo h2,.sektor-raspored .clanak-telo h3{font-size:20px;margin-top:1.3em}
/* CTA лого већи */
.cta-logo img{max-height:250px}

/* ---------- Позив на праћење (подножје) ---------- */
.podnozje-poziv{font-size:14.5px;color:#B4C8BD;line-height:1.55;margin:0 0 4px;max-width:34ch}

/* ---------- Дугме „назад на врх“ ---------- */
#na-vrh{position:fixed;right:24px;bottom:24px;z-index:60;width:52px;height:52px;border-radius:50%;
  border:0;cursor:pointer;background:var(--zelena-800);color:#fff;display:grid;place-items:center;
  box-shadow:var(--senka-l);opacity:0;transform:translateY(14px) scale(.9);transition:var(--prelaz)}
#na-vrh:hover{background:var(--zelena-700);transform:translateY(0) scale(1.06)}
#na-vrh.vidljivo{opacity:1;transform:translateY(0) scale(1)}
#na-vrh svg{width:22px;height:22px}
@media (max-width:560px){#na-vrh{right:16px;bottom:16px;width:46px;height:46px}}

/* ---------- Секција „Заштита животне средине“ (почетна) ---------- */
.eko-mreza{display:grid;gap:22px;grid-template-columns:1.4fr 1fr 1fr}
.eko-kartica{background:var(--povrsina);border:1px solid var(--linija);border-radius:var(--r-l);padding:28px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:var(--prelaz)}
a.eko-kartica:hover{transform:translateY(-4px);box-shadow:var(--senka-l);border-color:transparent;color:inherit}
.eko-kartica .eko-ikona{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:6px;
  background:var(--zelena-50);color:var(--zelena-700)}
.eko-kartica .eko-ikona svg{width:30px;height:30px}
.eko-kartica h3{font-size:19px;line-height:1.25}
.eko-kartica p{margin:0;font-size:15px;color:var(--mastilo-2);line-height:1.55}
.eko-kartica .eko-veza{margin-top:auto;padding-top:8px;font-weight:600;color:var(--zelena-700);font-size:15px}
.eko-kartica .eko-adresa{margin-top:auto;padding-top:8px;font-size:13.5px;color:var(--tiho)}
.eko-kartica--glavna{background:linear-gradient(158deg,var(--zelena-800),var(--zelena-950));color:#fff;border-color:transparent;isolation:isolate;position:relative;overflow:hidden}
.eko-kartica--glavna::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(200,155,60,.22),transparent 70%);z-index:0}
.eko-kartica--glavna > *{position:relative;z-index:1}
.eko-kartica--glavna .eko-ikona{background:rgba(255,255,255,.12);color:var(--zlatna)}
.eko-kartica--glavna h3{color:#fff;font-size:22px}
.eko-kartica--glavna p{color:rgba(255,255,255,.85)}
.eko-kartica--glavna .eko-veza{color:var(--zlatna-100)}
@media (max-width:900px){.eko-mreza{grid-template-columns:1fr}}

/* ============================================================
   ГАЛЕРИЈА — КАРУСЕЛ
   ============================================================ */
.galerija-godine{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.karusel{position:relative;margin:0 -4px}
.karusel-traka{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  padding:4px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--zelena-600) var(--povrsina-2)}
.karusel-traka::-webkit-scrollbar{height:8px}
.karusel-traka::-webkit-scrollbar-track{background:var(--povrsina-2);border-radius:8px}
.karusel-traka::-webkit-scrollbar-thumb{background:var(--zelena-600);border-radius:8px}
.karusel-slika{flex:0 0 auto;width:min(420px,80vw);aspect-ratio:4/3;scroll-snap-align:start;
  position:relative;border:0;padding:0;cursor:pointer;border-radius:var(--r-l);overflow:hidden;
  background:var(--povrsina-2);box-shadow:var(--senka);transition:var(--prelaz)}
.karusel-slika img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.karusel-slika::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,34,24,.72),transparent 55%);opacity:0;transition:var(--prelaz)}
.karusel-slika:hover{transform:translateY(-4px)}
.karusel-slika:hover img{transform:scale(1.06)}
.karusel-slika:hover::after{opacity:1}
.karusel-slika .lupa{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--zelena-800);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:var(--prelaz);z-index:2}
.karusel-slika:hover .lupa{opacity:1;transform:none}
.karusel-slika .karusel-opis{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;
  font-size:14.5px;font-weight:500;text-align:left;opacity:0;transform:translateY(8px);transition:var(--prelaz);
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.karusel-slika:hover .karusel-opis{opacity:1;transform:none}
.karusel-strela{position:absolute;top:calc(50% - 16px);transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--linija);background:var(--povrsina);
  color:var(--zelena-800);cursor:pointer;display:grid;place-items:center;box-shadow:var(--senka-l);transition:var(--prelaz)}
.karusel-strela:hover{background:var(--zelena-800);color:#fff;border-color:var(--zelena-800)}
.karusel-strela svg{width:22px;height:22px}
.karusel-strela.prev{left:-8px}.karusel-strela.next{right:-8px}
.karusel-strela[disabled]{opacity:0;pointer-events:none}
.karusel-broj{text-align:center;color:var(--tiho);font-size:14px;margin-top:6px}
@media (max-width:820px){
  .karusel-strela{display:none}
  .karusel-slika{width:82vw}
  .karusel-slika .lupa,.karusel-slika .karusel-opis{opacity:1}
}