/* Registar planinskih staza – vizuelni sistem (prema maketama početne strane i stranice staze). */
:root{
  --pozadina:#F6F8F6; --tekst:#17251C; --tekst-2:#3E5247; --tekst-3:#5A6E62; --tekst-4:#6B7F73; --tekst-5:#9AAEA2;
  --zelena:#1F4E3D; --zelena-tamna:#1F3C2A; --zelena-traka:#17301F; --zelena-srednja:#2E6B55; --zelena-linija:#2E5139;
  --zelena-svijetla:#CFE3D3; --zelena-blijeda:#9CC9A6; --zelena-pozadina:#EEF4F1; --zelena-ok:#E3F0E7; --zelena-ok-tekst:#1F5E3A;
  --crvena:#C4161C; --crvena-tamna:#A51117; --crvena-pozadina:#FBE3E4;
  --zuta-pozadina:#FFF4D6; --zuta-tekst:#7A5A00;
  --okvir:#DDE6E0; --okvir-2:#E6ECE8; --okvir-3:#EEF2EF; --okvir-polja:#B7C9C0; --okvir-select:#CBD8D0;
  --laka:#4FA6DC; --srednja:#C4161C; --teska:#111111;
  --sirina:1280px; --radijus:6px;
  --font-tekst:'Barlow',system-ui,sans-serif; --font-naslov:'Barlow Condensed','Arial Narrow',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--pozadina)}
body{font-family:var(--font-tekst);color:var(--tekst);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.4}
a{color:var(--zelena);text-decoration:none}
a:hover{color:var(--crvena)}
select,input,button,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%}
.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.okvir-sirina{max-width:var(--sirina);margin:0 auto;padding-left:32px;padding-right:32px}
.stranica{min-height:100vh;display:flex;flex-direction:column}
.stranica>main{flex:1}
:focus-visible{outline:3px solid var(--crvena);outline-offset:2px}

/* Gornja traka */
.traka{background:var(--zelena-traka);color:var(--zelena-svijetla);font-size:13px}
.traka .okvir-sirina{padding-top:8px;padding-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.traka__lijevo{display:flex;align-items:center;gap:10px}
.traka__lijevo img{width:22px;height:22px;display:block}
.traka a{color:#fff;font-weight:500}
.traka__desno{display:flex;align-items:center;gap:18px}

/* Zaglavlje sa topografskom podlogom */
.zaglavlje{position:relative;background-color:var(--zelena-tamna);background-image:url("../img/topo-bg.f2bb9d3b90ec.jpg");background-repeat:no-repeat;background-size:min(980px,78%) auto;background-position:right -40px top -60px;color:#fff;overflow:hidden}
.zaglavlje--staza{background-size:min(900px,72%) auto;background-position:right -80px top -170px}
.zaglavlje__red{padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative}
.logo{display:flex;align-items:center;gap:14px;color:#fff}
.logo:hover{color:#fff}
.logo img{height:60px;width:auto;display:block}
.logo__tekst{display:flex;flex-direction:column;line-height:1}
.logo__naziv{font-family:var(--font-naslov);font-weight:700;font-size:40px;letter-spacing:-.01em;color:#fff}
.logo__podnaziv{font-weight:600;font-size:16px;color:var(--zelena-svijetla);margin-top:2px}
.logo__oznaka{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:10px;letter-spacing:.32em;color:var(--zelena-blijeda);font-weight:600}
.logo__oznaka::before{content:"";width:22px;height:3px;background:var(--crvena);display:block}
.zaglavlje--staza .logo img{height:52px}
.zaglavlje--staza .logo__naziv{font-size:34px}
.zaglavlje--staza .logo__podnaziv{font-size:14px}
.navigacija{display:flex;gap:4px;flex-wrap:wrap;font-weight:600;font-size:15px}
.navigacija a{color:var(--zelena-svijetla);padding:10px 14px;border-bottom:2px solid transparent}
.navigacija a:hover{color:#fff}
.navigacija a.aktivno{color:#fff;border-bottom-color:var(--crvena)}
.trake{display:block}
.trake::before,.trake::after{content:"";display:block;height:5px;background:var(--crvena)}
.trake span{display:block;height:4px;background:#fff}

.nadnaslov{font-size:12px;letter-spacing:.42em;color:var(--zelena-blijeda);font-weight:600;text-transform:uppercase}
.nadnaslov--tamni{color:var(--zelena-srednja)}
.nadnaslov--crveni{color:var(--crvena)}
.hero{padding-top:88px;padding-bottom:72px;position:relative}
.hero h1{font-family:var(--font-naslov);font-weight:600;font-size:clamp(44px,6vw,76px);line-height:.98;margin:16px 0 0;max-width:12ch;text-wrap:balance;letter-spacing:-.01em}
.hero p{font-size:18px;line-height:1.5;color:var(--zelena-svijetla);max-width:52ch;margin:20px 0 0}

/* Kartica pretrage */
.pretraga{margin-top:40px;max-width:880px;background:#fff;color:var(--tekst);border-radius:var(--radijus);box-shadow:0 24px 60px rgba(8,24,14,.35);overflow:hidden}
.pretraga__mreze{display:flex;border-bottom:1px solid #E1EAE4;background:var(--zelena-pozadina)}
.pretraga__mreze a{flex:1;text-align:center;padding:14px 16px;font-weight:600;font-size:14px;color:var(--tekst-3);border-bottom:3px solid transparent}
.pretraga__mreze a.aktivno{background:#fff;color:var(--zelena-tamna);border-bottom-color:var(--crvena)}
.pretraga form{padding:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.pretraga__upit{grid-column:1/-1;display:flex;align-items:center;gap:12px;border:1.5px solid var(--okvir-polja);border-radius:4px;padding:0 14px;height:54px}
.pretraga__upit:focus-within{border-color:var(--zelena)}
.pretraga__upit input{border:0;outline:0;flex:1;font-size:17px;background:transparent;color:var(--tekst);min-width:0}
.prsten{width:18px;height:18px;border-radius:50%;border:5px solid var(--crvena);background:#fff;flex:none;display:inline-block}
.polje-izbor{height:46px;border:1px solid var(--okvir-select);border-radius:4px;padding:0 12px;font-size:15px;background:#fff;color:var(--tekst);min-width:0}
.napredna{grid-column:1/-1;border-top:1px solid var(--okvir-2);padding-top:12px}
.napredna summary{cursor:pointer;font-weight:600;color:var(--zelena);font-size:14px}
.napredna__polja{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px}
.napredna__polja label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tekst-3)}
.napredna__polja input{height:42px;border:1px solid var(--okvir-select);border-radius:4px;padding:0 10px;font-size:15px}

.statistika{display:flex;gap:48px;flex-wrap:wrap;margin-top:44px}
.statistika b{display:block;font-family:var(--font-naslov);font-size:40px;font-weight:600;line-height:1}
.statistika span{font-size:14px;color:var(--zelena-blijeda);display:block;margin-top:4px}

/* Dugmad */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;border:0;border-radius:4px;background:var(--crvena);color:#fff;font-weight:700;font-size:14px;letter-spacing:.14em;cursor:pointer;padding:0 18px;text-transform:uppercase;white-space:nowrap}
.dugme:hover{background:var(--crvena-tamna);color:#fff}
.dugme--sporedno{background:#fff;color:var(--zelena);border:1px solid var(--okvir-polja);letter-spacing:.08em}
.dugme--sporedno:hover{background:#fff;color:var(--crvena);border-color:var(--crvena)}
.dugme--zeleno{background:var(--zelena)}
.dugme--zeleno:hover{background:var(--zelena-tamna)}
.dugme--malo{height:36px;font-size:13px;padding:0 14px;letter-spacing:.04em;text-transform:none;font-weight:600}
.dugme--obrub{background:transparent;color:#fff;border:1px solid #4E7560;font-family:var(--font-mono);font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;height:40px}
.dugme--obrub:hover{background:transparent;border-color:#fff}
.dugme[disabled]{opacity:.5;cursor:not-allowed}
.oznaka-formata{font-family:var(--font-mono);font-size:13px;padding:6px 12px;border:1px solid var(--okvir-polja);border-radius:3px;color:var(--zelena);display:inline-block}
.oznaka-formata:hover{border-color:var(--crvena);color:var(--crvena)}

/* Sekcije i kartice */
.sekcija{padding-top:64px;padding-bottom:24px}
.sekcija__zaglavlje{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.naslov-2{font-family:var(--font-naslov);font-weight:600;font-size:40px;margin:8px 0 0;color:var(--zelena-tamna);line-height:1}
.naslov-2 small{color:var(--tekst-4);font-weight:500;font-size:inherit}
.naslov-3{font-family:var(--font-naslov);font-weight:600;font-size:28px;margin:0;color:var(--zelena-tamna);line-height:1.1}
.naslov-4{font-size:13px;letter-spacing:.24em;color:var(--zelena-srednja);font-weight:600;margin:0;text-transform:uppercase}
.kartica{background:#fff;border:1px solid var(--okvir);border-radius:var(--radijus);overflow:hidden}
.kartica__zaglavlje{padding:20px 24px;border-bottom:1px solid var(--okvir-2);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.kartica__zaglavlje--bez-linije{border-bottom:0}
.kartica__tijelo{padding:20px 24px 24px}
.kartica__napomena{font-size:13px;color:var(--tekst-4)}
.mreza-kartica{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.mreza-kartica--siroka{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.blok{padding:24px;border-top:4px solid var(--zelena-tamna);background:#fff}
.blok--crveni{border-top-color:var(--crvena)}
.blok h3{font-family:var(--font-naslov);font-weight:600;font-size:28px;margin:8px 0 10px;color:var(--zelena-tamna)}
.blok p{margin:0 0 16px;line-height:1.5;color:var(--tekst-2)}
.formati{display:flex;gap:8px;flex-wrap:wrap}

/* Legenda kategorija */
.legenda{display:flex;gap:16px;font-size:13px;color:var(--tekst-2);flex-wrap:wrap}
.legenda span{display:flex;align-items:center;gap:6px}
.tacka{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:#8A9A90}
.tacka--laka{background:var(--laka)}.tacka--srednje_teska{background:var(--srednja)}.tacka--teska{background:var(--teska)}

/* Tabela */
.tabela-okvir{background:#fff;border:1px solid var(--okvir);border-radius:var(--radijus);overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela--siroka{min-width:960px}
.tabela thead tr{background:var(--zelena-pozadina);color:var(--zelena);text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tabela th{padding:14px 16px;font-weight:600;white-space:nowrap}
.tabela th a{color:inherit}
.tabela th .strelica{color:var(--crvena)}
.tabela td{padding:15px 16px;border-top:1px solid var(--okvir-2);vertical-align:top}
.tabela tbody tr:hover{background:#F6F9F7}
.tabela .broj{font-family:var(--font-mono);font-size:14px;font-weight:600;white-space:nowrap}
.tabela .desno{text-align:right}
.tabela .sivo{color:var(--tekst-2)}
.tabela .datum{color:var(--tekst-4);font-size:14px;white-space:nowrap}
.tabela--kompaktna td{padding:10px 12px}
.tabela--kompaktna th{padding:10px 12px}
.itinerer-link{color:var(--tekst);font-weight:600}
.itinerer-link .crtica{color:var(--crvena)}
.kategorija{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--zelena-ok);color:var(--zelena-ok-tekst)}
.status--zatvorena,.status--brisana,.status--u_brisanju{background:var(--crvena-pozadina);color:var(--crvena-tamna)}
.status--nepotpun,.status--u_postupku{background:var(--zuta-pozadina);color:var(--zuta-tekst)}
.napomena-ispod{font-size:13px;color:var(--tekst-4);margin-top:10px}
.prazno{padding:32px;text-align:center;color:var(--tekst-3)}
.stranicenje{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;align-items:center;font-size:14px}
.stranicenje a,.stranicenje span{padding:6px 12px;border:1px solid var(--okvir-polja);border-radius:4px;background:#fff}
.stranicenje .tekuca{background:var(--zelena-tamna);color:#fff;border-color:var(--zelena-tamna)}

/* Mapa */
.mapa-blok{background:var(--zelena-tamna);border-radius:var(--radijus);overflow:hidden;display:flex;flex-direction:column;min-height:380px}
.mapa-blok__zaglavlje{padding:22px 24px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff}
.mapa-blok__zaglavlje h3{font-family:var(--font-naslov);font-weight:600;font-size:28px;margin:0}
.mapa-blok__zaglavlje a{color:var(--zelena-blijeda);font-weight:600;font-size:14px}
.mapa-blok__mapa{flex:1;margin:0 16px 16px;border-radius:4px;min-height:380px;background:repeating-linear-gradient(135deg,#25462F 0 10px,#2A4D35 10px 20px)}
.mapa{width:100%;height:100%;min-height:380px;border-radius:4px}
.mapa--velika{height:calc(100vh - 220px);min-height:480px;border-radius:0}
.mapa--staza{height:380px;background:repeating-linear-gradient(135deg,#EEF4F1 0 10px,#E4ECE7 10px 20px)}
.mapa-bez-traga{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;color:var(--zelena-srednja);text-align:center;padding:24px}
.mapa-legenda{background:#fff;border-radius:4px;padding:12px 14px;font-size:13px;line-height:1.5;max-width:300px;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.mapa-legenda--mala{font-size:11px;line-height:1.35;max-width:210px;padding:8px 10px}
.mapa-legenda--mala .linija{width:18px;margin-right:5px}
.mapa-legenda--mala .upozorenje{font-size:10px;margin-top:5px;padding-top:5px}
.mapa-legenda__dugme{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0 0 6px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--zelena-srednja);cursor:pointer}
.mapa-legenda__dugme::after{content:"▾";letter-spacing:0}
.mapa-legenda--zatvorena{padding:7px 11px}
.mapa-legenda--zatvorena .mapa-legenda__dugme{margin:0}
.mapa-legenda--zatvorena .mapa-legenda__dugme::after{content:"▸"}
.mapa-legenda--zatvorena .mapa-legenda__sadrzaj{display:none}
.mapa-legenda h4{margin:0 0 6px;font-size:12px;letter-spacing:.2em;color:var(--zelena-srednja)}
.mapa-legenda .linija{display:inline-block;width:26px;height:0;border-top:4px solid;vertical-align:middle;margin-right:8px}
.mapa-legenda .linija--zatvorena{border-top:3px dashed var(--crvena)}
.mapa-legenda .upozorenje{margin-top:8px;padding-top:8px;border-top:1px solid var(--okvir-2);font-size:12px;color:var(--tekst-2)}
.mapa-legenda .upozorenje b{color:var(--tekst)}
.mapa-alati{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 32px;background:#fff;border-bottom:1px solid var(--okvir)}
.mapa-alati label{font-size:14px;display:flex;align-items:center;gap:6px}
.broj-na-mapi{font-family:var(--font-mono);font-size:11px;font-weight:600;background:#fff;border:2px solid var(--crvena);border-radius:999px;padding:0 6px;color:var(--tekst);cursor:pointer;line-height:16px}
.maplibregl-popup-content{font-family:var(--font-tekst);font-size:14px;padding:12px 14px}
.popup-staza b{font-family:var(--font-mono)}
.popup-staza .akcije{margin-top:8px;display:flex;gap:10px;font-weight:600}

/* 3D prikaz trase (stranica staze) */
.teren{position:relative;border-radius:6px;overflow:hidden;background:var(--zelena-tamna)}
.mapa--3d{height:480px;border-radius:6px;background:var(--zelena-tamna)}
.teren__dugmad{position:absolute;top:16px;left:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:2;max-width:calc(100% - 140px)}
.teren__dugme{height:40px;padding:0 16px;border-radius:4px;border:1px solid rgba(255,255,255,.35);background:rgba(23,48,31,.82);color:#fff;font-weight:700;font-size:13px;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(4px)}
.teren__dugme:hover{border-color:#fff}
.teren__dugme--glavno{background:var(--crvena);border-color:var(--crvena)}
.teren__dugme--glavno:hover{background:var(--crvena-tamna)}
.teren__stat{position:absolute;right:16px;bottom:36px;z-index:2;display:flex;gap:22px;background:rgba(23,48,31,.88);color:#fff;padding:12px 18px;border-radius:4px;pointer-events:none}
.teren__stat span{display:block;font-size:11px;letter-spacing:.24em;color:var(--zelena-blijeda);font-weight:600}
.teren__stat b{font-family:var(--font-naslov);font-size:30px;font-weight:600;line-height:1.1}
.teren__opis{position:absolute;left:96px;bottom:8px;z-index:2;font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.teren__glava{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--crvena);box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.oznaka-3d{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.oznaka-3d__tekst{background:#fff;color:var(--tekst);font-weight:600;font-size:13px;padding:4px 9px;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.3);white-space:nowrap}
.oznaka-3d__zastava{width:20px;height:14px;border:1px solid rgba(0,0,0,.25);background:linear-gradient(#C4161C 0 33%,#fff 33% 67%,#C4161C 67%)}
.oznaka-3d--vrh .oznaka-3d__tekst{color:var(--crvena-tamna)}
.oznaka-3d--bez-teksta .oznaka-3d__tekst{visibility:hidden}
.teren__kratki{display:none}
.oznaka-infra{width:12px;height:12px;background:#1F4E3D;border:2px solid #fff;border-radius:2px;box-shadow:0 0 0 1px #1F4E3D;cursor:pointer}
.dugme-3d{font-weight:700;font-size:12px}
.profil__graf{position:relative;cursor:pointer;margin-top:12px}
.profil .profil__graf svg{margin-top:0}
.profil__vrh,.profil__marker{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;pointer-events:none}
.profil__vrh{border:4px solid var(--crvena)}
.profil__marker{border:3px solid var(--zelena-tamna);z-index:1}
.profil__vertikala{position:absolute;top:0;bottom:0;border-left:1px dashed var(--zelena-tamna);pointer-events:none}
@media (max-width:640px){
  .mapa--3d{height:420px}
  .teren__dugmad{top:10px;left:10px;gap:6px;flex-wrap:nowrap}
  .teren__dugme{height:34px;min-width:38px;padding:0 10px;font-size:11px;letter-spacing:.08em}
  .teren__dugi{display:none}
  .teren__kratki{display:inline;font-size:14px}
  .teren__stat{gap:14px;padding:8px 12px;bottom:32px;right:10px}
  .teren__stat b{font-size:22px}
  .teren__opis{display:none}
  .oznaka-3d__tekst{font-size:11px;padding:2px 6px}
  .oznaka-3d__zastava{width:16px;height:11px}
}

/* Zatvorene staze */
.zatvorena-stavka{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:16px 0;border-top:1px solid var(--okvir-2)}
.zatvorena-stavka .broj{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--crvena);grid-row:span 2;padding-top:2px}
.zatvorena-stavka .naziv{font-weight:600;color:var(--tekst)}
.zatvorena-stavka .razlog{font-size:14px;color:var(--tekst-3)}
.isprekidana{width:28px;border-top:3px dashed var(--crvena);display:inline-block}

/* Podnožje */
.podnozje{background:var(--zelena-tamna);color:var(--zelena-svijetla)}
.podnozje__sadrzaj{padding-top:40px;padding-bottom:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:32px}
.podnozje__savez{display:flex;gap:16px;align-items:flex-start;font-size:14px;line-height:1.6}
.podnozje__savez img{width:64px;height:64px;flex:none}
.podnozje__savez b{color:#fff;font-size:16px;display:block}
.podnozje__upozorenje{grid-column:span 2;min-width:0}
.upozorenja{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px 24px;font-size:14px;line-height:1.45}
.upozorenja span:first-child{color:#fff;font-weight:600}
.podnozje__dno{border-top:1px solid var(--zelena-linija)}
.podnozje__dno .okvir-sirina{padding-top:16px;padding-bottom:16px;font-size:12px;color:var(--zelena-blijeda);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.podnozje--kratko .okvir-sirina{padding-top:20px;padding-bottom:20px;font-size:12px;color:var(--zelena-blijeda);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Dijalog „staza nije pronađena” */
.dijalog-pozadina{position:fixed;inset:0;background:rgba(15,32,21,.6);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.dijalog-pozadina[hidden]{display:none}
.dijalog{background:#fff;border-radius:var(--radijus);max-width:460px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);border-top:5px solid var(--crvena)}
.dijalog__tijelo{padding:28px}
.dijalog__prsten{width:34px;height:34px;border-radius:50%;border:9px solid var(--crvena);background:#fff}
.dijalog h3{font-family:var(--font-naslov);font-weight:600;font-size:28px;color:var(--zelena-tamna);margin:16px 0 8px;line-height:1.1}
.dijalog p{margin:0;color:var(--tekst-2);line-height:1.5}
.dijalog__dugmad{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.dijalog__dugmad .dugme{height:44px;font-size:13px;letter-spacing:.12em}

/* Stranica staze */
.mrvice{display:flex;gap:8px;font-size:14px;color:var(--zelena-blijeda);flex-wrap:wrap}
.mrvice a{color:var(--zelena-blijeda)}
.mrvice span:last-child{color:#fff}
.staza-glava{display:flex;gap:28px;align-items:flex-start;margin-top:24px;flex-wrap:wrap}
.znak-broja{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.znak-broja__krug{width:112px;height:112px;border-radius:50%;background:#fff;border:14px solid var(--crvena);display:flex;align-items:center;justify-content:center}
.znak-broja__krug span{font-family:var(--font-naslov);font-weight:700;font-size:38px;color:var(--tekst);line-height:1;text-align:center}
.znak-broja__krug span small{display:block;font-size:16px}
.znak-broja__oznaka{font-size:11px;letter-spacing:.3em;color:var(--zelena-blijeda);font-weight:600}
.staza-glava__sredina{flex:1;min-width:280px}
.cipovi{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cip{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--tekst);padding:5px 12px 5px 8px;border-radius:999px;font-size:14px;font-weight:600}
.cip .tacka{width:14px;height:14px}
.cip--tamni{background:var(--zelena-linija);color:#fff;padding:5px 12px}
.cip--tamni .tacka{width:8px;height:8px;background:#7FD39A}
.cip--zatvorena{background:var(--crvena);color:#fff;padding:5px 12px}
.cip--zatvorena .tacka{width:8px;height:8px;background:#fff}
.cip--upozorenje{background:#F0C64B;color:#3B2B00;padding:5px 12px}
.cip-opis{font-size:14px;color:var(--zelena-svijetla)}
.staza-glava h1{font-family:var(--font-naslov);font-weight:600;font-size:clamp(40px,5.4vw,68px);line-height:1;margin:14px 0 0;text-wrap:balance}
.staza-glava h1 .crtica{color:var(--crvena)}
.staza-glava p{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--zelena-svijetla);max-width:80ch}
.staza-glava__akcije{display:flex;flex-direction:column;gap:8px;min-width:220px}
.staza-glava__akcije .red{display:flex;gap:6px}
.staza-glava__akcije .red .dugme{flex:1}
.staza-glava__akcije small{font-size:12px;color:var(--zelena-blijeda)}
.cinjenice{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid #3A5F47;padding-bottom:36px}
.cinjenice div{padding:18px 16px 0 0}
.cinjenice dt{font-size:11px;letter-spacing:.24em;color:var(--zelena-blijeda);font-weight:600}
.cinjenice dd{font-family:var(--font-naslov);font-size:32px;font-weight:600;margin:6px 0 0;line-height:1}
.cinjenice dd small{font-size:18px;color:var(--zelena-svijetla);font-weight:500}
.kartice-traka{background:#fff;border-bottom:1px solid var(--okvir);position:sticky;top:0;z-index:10}
.kartice-traka .okvir-sirina{display:flex;gap:4px;overflow-x:auto}
.kartice-traka a{padding:18px 14px 15px;font-size:15px;font-weight:600;color:var(--tekst-3);border-bottom:3px solid transparent;white-space:nowrap}
.kartice-traka a.aktivno{color:var(--zelena-tamna);border-bottom-color:var(--crvena)}
.staza-sadrzaj{padding-top:40px;padding-bottom:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px;align-items:start}
.staza-sadrzaj__glavni{display:flex;flex-direction:column;gap:24px;min-width:0}
.staza-sadrzaj aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
.podaci-mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.podaci-mreza>div{padding:16px 24px;border-bottom:1px solid var(--okvir-3);display:grid;grid-template-columns:150px 1fr;gap:12px}
.podaci-mreza dt{font-size:13px;color:var(--tekst-3)}
.podaci-mreza dt .r{font-family:var(--font-mono);color:var(--tekst-5)}
.podaci-mreza dd{margin:0;font-weight:600;font-size:15px}
.podaci-mreza dd.prazno-polje{color:var(--tekst-5);font-weight:400;font-style:italic}
.profil{padding:20px 24px 8px}
.profil svg{width:100%;height:180px;display:block;margin-top:12px}
.profil__oznake{display:flex;justify-content:space-between;font-size:13px;color:var(--tekst-3);margin-top:6px;gap:8px}
.profil__oznake b{color:var(--tekst)}
.profil__oznake b.vrh{color:var(--crvena)}
.prsten-tacke{width:12px;height:12px;border-radius:50%;border:3px solid var(--tekst-5);background:#fff;flex:none;display:inline-block}
.prsten-tacke--portal,.prsten-tacke--cilj{border-color:var(--zelena-tamna)}
.prsten-tacke--vrh{border-color:var(--crvena)}
.ime-tacke{display:inline-flex;align-items:center;gap:10px}
.dnevnik-stavka{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--okvir-3)}
.dnevnik-stavka .datum{font-family:var(--font-mono);font-size:13px;color:var(--tekst-3);padding-top:2px}
.dnevnik-stavka .tekst{font-weight:600}
.dnevnik-stavka .tekst.precrtano{text-decoration:line-through;color:var(--tekst-3)}
.dnevnik-stavka .opis{font-size:13px;color:var(--tekst-4);margin-top:2px}
.dnevnik-stavka .vrijednosti{font-size:13px;color:var(--tekst-2);margin-top:4px;white-space:pre-line}
.polja-sivo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.polja-sivo>div{background:var(--zelena-pozadina);padding:16px;border-radius:4px}
.polja-sivo .oznaka{font-size:13px;color:var(--tekst-3)}
.polja-sivo .vrijednost{font-weight:600;margin-top:4px}
.red-liste{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--okvir-3);gap:12px}
.stavka-infra{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-top:1px solid var(--okvir-3)}
.stavka-infra .stanje{font-size:13px;font-weight:600;color:var(--zelena-ok-tekst)}
.stavka-infra .stanje--osteceno,.stavka-infra .stanje--sanacija,.stavka-infra .stanje--nestalo{color:var(--crvena-tamna)}
.stavka-infra .opis{font-size:14px;color:var(--tekst-3)}
.prohodnost{background:#fff;border:1px solid var(--okvir);border-radius:var(--radijus);overflow:hidden}
.prohodnost__status{padding:16px 20px;background:var(--zelena-ok);display:flex;align-items:center;gap:10px;font-weight:700;color:var(--zelena-ok-tekst)}
.prohodnost__status .tacka{background:#1F8A4C}
.prohodnost__status--zatvorena{background:var(--crvena-pozadina);color:var(--crvena-tamna)}
.prohodnost__status--zatvorena .tacka{background:var(--crvena)}
.prohodnost__tijelo{padding:16px 20px;display:flex;flex-direction:column;gap:14px;font-size:15px}
.prohodnost__tijelo h4{font-size:12px;letter-spacing:.2em;color:var(--zelena-srednja);font-weight:600;margin:0}
.prohodnost__tijelo h4.crveno{color:var(--crvena)}
.prohodnost__tijelo p{margin:4px 0 0;line-height:1.45}
.upozorenje-blok{background:var(--zelena-tamna);color:var(--zelena-svijetla);border-radius:var(--radijus);padding:18px 20px;font-size:14px;line-height:1.5}
.upozorenje-blok__naslov{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;letter-spacing:.3em;color:var(--zelena-blijeda);font-weight:600}
.upozorenje-blok div:nth-child(2){color:#fff;font-weight:600}
.upozorenje-blok__hitno{margin-top:12px;padding-top:12px;border-top:1px solid var(--zelena-linija);color:#fff;font-weight:600}
.raskrsnica{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--okvir-3);font-size:15px}
.raskrsnica__brojevi{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.broj-kruzic{font-family:var(--font-mono);font-size:13px;font-weight:600;padding:1px 7px;border:1.5px solid var(--crvena);border-radius:999px;color:var(--tekst)}
.obavijest{padding:14px 18px;border-radius:4px;background:var(--zuta-pozadina);color:var(--zuta-tekst);font-size:14px;line-height:1.5}
.obavijest--crvena{background:var(--crvena-pozadina);color:var(--crvena-tamna)}
.obavijest--zelena{background:var(--zelena-ok);color:var(--zelena-ok-tekst)}
.obavijest+.obavijest{margin-top:8px}
.dokument-red{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--okvir-3);color:var(--tekst)}
.dokument-red .format{font-family:var(--font-mono);font-size:12px;color:var(--crvena)}

/* Tekstualne stranice */
.tekst-stranica{max-width:860px;padding-top:48px;padding-bottom:72px;line-height:1.6}
.tekst-stranica h2{font-family:var(--font-naslov);font-weight:600;font-size:32px;color:var(--zelena-tamna);margin:32px 0 8px}
.tekst-stranica p,.tekst-stranica li{color:var(--tekst-2)}
.zaglavlje-jednostavno .okvir-sirina{padding-bottom:36px}
.zaglavlje-jednostavno h1{font-family:var(--font-naslov);font-weight:600;font-size:clamp(36px,4.6vw,56px);margin:28px 0 0;line-height:1}
.zaglavlje-jednostavno p{color:var(--zelena-svijetla);margin:12px 0 0;max-width:70ch}

@media (max-width:900px){
  .staza-sadrzaj{grid-template-columns:1fr}
  .staza-sadrzaj aside{position:static}
  .podnozje__upozorenje{grid-column:auto}
}
@media (max-width:640px){
  .okvir-sirina{padding-left:16px;padding-right:16px}
  .hero{padding-top:48px;padding-bottom:48px}
  .logo__naziv{font-size:32px}
  .logo img{height:48px}
  .podaci-mreza>div{grid-template-columns:1fr;gap:2px}
  .statistika{gap:28px}
  .mapa-alati{padding:12px 16px}
  .dnevnik-stavka{grid-template-columns:1fr;gap:4px}
  .navigacija a{padding:8px 10px;font-size:14px}
}
@media print{
  .traka,.navigacija,.kartice-traka,.staza-glava__akcije,.podnozje__dno{display:none}
  .zaglavlje{background:#fff;color:#000}
}