:root {
  --noc: #17302a;
  --tamna: #1c3a32;
  --plava: #12a67c;
  --plava-svijetla: #9fe8cc;
  --indigo: #1fb39a;
  --tirkiz: #5ccfb8;
  --ljubicasta: #3cc79c;
  --tekst: #1f2b27;
  --siva: #566b62;
  --linija: #e2ece7;
  --radius: 16px;
  --gradijent-akcent: linear-gradient(135deg, #0f9b73 0%, #0d8f74 50%, #14a291 100%);
  --sjena: 0 10px 30px -12px rgba(28, 58, 50, .25);
  --sjena-jaka: 0 24px 50px -18px rgba(18, 166, 124, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: #fff; overflow-x: hidden; }
a { color: var(--plava); }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.12rem; }

.omotac { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.uzak { max-width: 780px; }

.gradijent-tekst {
  background: linear-gradient(90deg, #5fd9ae, #7fdcbc, #7ee0c5, #5fd9ae);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tekst-tok 8s linear infinite;
}
@keyframes tekst-tok { to { background-position: 300% 0; } }

/* ---------- Navigacija ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .35s, box-shadow .35s, backdrop-filter .35s; }
.nav.skrolovano { background: rgba(23, 48, 42, .82); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 6px 24px -10px rgba(0,0,0,.5); }
.nav-red { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.nav nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.nav nav a:not(.dugme) { color: #cfe9df; text-decoration: none; font-weight: 500; position: relative; }
.nav nav a:not(.dugme)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--gradijent-akcent); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav nav a:not(.dugme):hover { color: #fff; }
.nav nav a:not(.dugme):hover::after { transform: scaleX(1); }

.logo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1.35rem; color: #fff; text-decoration: none; }
.logo span { color: var(--plava-svijetla); }
.logo-stit { width: 28px; height: 28px; fill: none; stroke: #5fd9ae; stroke-width: 2; stroke-linejoin: round; }
.logo-kvacica { stroke: #4ade80; stroke-linecap: round; stroke-dasharray: 14; stroke-dashoffset: 14; animation: kvacica 3.5s ease-in-out infinite; }
@keyframes kvacica { 0%, 15% { stroke-dashoffset: 14; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }

/* ---------- Dugmad ---------- */
.dugme {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 10px; border: 0;
  background: var(--gradijent-akcent); background-size: 200% 100%; color: #fff !important;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center;
  box-shadow: var(--sjena-jaka); transition: transform .25s, box-shadow .25s, background-position .5s;
}
.dugme:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 28px 50px -16px rgba(31, 179, 154, .6); }
.dugme-malo { padding: .5rem 1rem; box-shadow: none; }
.dugme-obrub { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.dugme-obrub:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px #fff; }
.dugme-sjaj { position: relative; overflow: hidden; }
.dugme-sjaj::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: odsjaj 4s ease-in-out infinite;
}
@keyframes odsjaj { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; padding: 9rem 0 6rem; min-height: 100vh; display: flex; align-items: center;
  background: linear-gradient(125deg, #0f2420 0%, #1c3a32 30%, #1d4a42 55%, #17463d 80%, #0f2420 100%);
  background-size: 300% 300%; animation: hero-gradijent 18s ease-in-out infinite;
}
@keyframes hero-gradijent { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }

.hero-mrlja { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; }
.mrlja-1 { width: 520px; height: 520px; background: #2fc493; top: -180px; right: -120px; animation: lebdi-a 16s ease-in-out infinite; }
.mrlja-2 { width: 420px; height: 420px; background: #2bb58d; bottom: -200px; left: -120px; opacity: .4; animation: lebdi-b 20s ease-in-out infinite; }
.mrlja-3 { width: 300px; height: 300px; background: #5ccfb8; top: 40%; left: 45%; opacity: .25; animation: lebdi-a 22s ease-in-out infinite reverse; }
@keyframes lebdi-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 50px) scale(1.12); } }
@keyframes lebdi-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -40px) scale(.9); } }

.hero-mreza {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(159,232,204,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(159,232,204,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}

.hero-red { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; width: 100%; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.nadnaslov {
  display: inline-block; color: #c8f2e1; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
  margin: 0 0 1.25rem; padding: .4rem .9rem; border-radius: 999px;
  background: rgba(47,196,147,.15); box-shadow: inset 0 0 0 1px rgba(159,232,204,.3);
}
.uvod { font-size: 1.15rem; color: #d3ece2; max-width: 620px; }
.hero-akcije { display: flex; gap: .85rem; flex-wrap: wrap; margin: 2.25rem 0; }
.hero-tacke { list-style: none; padding: 0; margin: 0; display: flex; gap: .6rem 1.5rem; flex-wrap: wrap; color: #cfe9df; font-size: .95rem; }
.hero-tacke li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-tacke i { font-size: 1.25rem; --fa-primary-color: #fff; --fa-secondary-color: #22c55e; --fa-secondary-opacity: 1; }

/* Ulazna animacija hero elemenata */
.ulaz { opacity: 0; animation: ulaz .9s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
@keyframes ulaz { from { opacity: 0; translate: 0 30px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* SVG animacija */
.hero-vizual { position: relative; }
.stit-anim { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.stit-anim * { transform-box: view-box; }

.puls-sjaj { transform-origin: 260px 260px; animation: puls 5s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }

.orbita { transform-origin: 260px 260px; }
.orbita-1 { animation: rotacija 38s linear infinite; }
.orbita-2 { animation: rotacija 26s linear infinite reverse; }
.orbita-3 { animation: rotacija 60s linear infinite; }
@keyframes rotacija { to { transform: rotate(360deg); } }

.tokovi use { stroke-dasharray: 4 8; animation: tok 1.6s linear infinite; }
@keyframes tok { to { stroke-dashoffset: -24; } }

.dok { animation: plutaj 6s ease-in-out infinite; }
.dok-2 { animation-duration: 7s; animation-delay: -2s; }
.dok-3 { animation-duration: 5s; animation-delay: -1s; }
@keyframes plutaj { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.stit { transform-origin: 260px 260px; animation: stit-ulaz 1.2s cubic-bezier(.2,.8,.2,1.2) .4s both, stit-lebdi 7s ease-in-out 1.6s infinite; }
@keyframes stit-ulaz { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes stit-lebdi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.stit-obrub { stroke-dasharray: 900; stroke-dashoffset: 900; animation: crtaj 2.2s ease-out .6s forwards; }
@keyframes crtaj { to { stroke-dashoffset: 0; } }

.sken { animation: skeniraj 3.6s ease-in-out infinite; }
@keyframes skeniraj { 0% { transform: translateY(-40px); } 50% { transform: translateY(300px); } 100% { transform: translateY(-40px); } }

/* Katanac se zaključava, značka potvrde iskače, pa ciklus kreće ispočetka */
.katanac-luk { animation: zakljucaj 6s ease-in-out infinite; }
@keyframes zakljucaj {
  0%, 12%  { transform: translateY(-16px); }
  22%, 88% { transform: translateY(0); }
  100%     { transform: translateY(-16px); }
}
.katanac { filter: drop-shadow(0 0 10px rgba(159,232,204,.5)); }
.znak-ok { transform-origin: 330px 352px; animation: potvrda 6s ease-in-out infinite; }
@keyframes potvrda {
  0%, 22%  { transform: scale(0); opacity: 0; }
  28%      { transform: scale(1.25); opacity: 1; }
  32%, 85% { transform: scale(1); opacity: 1; }
  92%, 100% { transform: scale(0); opacity: 0; }
}

.skrol-strelica { position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0; z-index: 1; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.skrol-strelica span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: tockic 1.8s ease-in-out infinite; }
@keyframes tockic { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Sekcije (svaka svoj gradijent) ---------- */
.sekcija { position: relative; padding: 6.5rem 0; overflow: hidden; }
.naslov-blok { margin-bottom: 3rem; }
.sekcija-uvod { color: var(--siva); max-width: 680px; font-size: 1.08rem; margin: 0; }
.oznaka {
  display: inline-block; margin: 0 0 .9rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--gradijent-akcent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oznaka-svijetla { background: linear-gradient(90deg, #9fe8cc, #a5f0d9); -webkit-background-clip: text; background-clip: text; }

.s-usluga { background: radial-gradient(circle at 0% 0%, #e1f7ee 0, transparent 45%), radial-gradient(circle at 100% 100%, #e3f7ee 0, transparent 40%), linear-gradient(180deg, #f6fdf9, #fff); }
.s-dokumenti {
  color: #d9efe6;
  background: radial-gradient(circle at 85% 20%, rgba(45,190,150,.45) 0, transparent 45%), radial-gradient(circle at 10% 90%, rgba(92,207,184,.3) 0, transparent 45%), linear-gradient(135deg, #17302a 0%, #1f453c 100%);
}
.s-dokumenti h2, .s-kontakt h2 { color: #fff; }
.s-za-koga { background: linear-gradient(160deg, #effcf6 0%, #eefbf5 55%, #f3fcf7 100%); }
.s-kako { background: radial-gradient(circle at 50% 0%, #dcf7ec 0, transparent 55%), linear-gradient(180deg, #e8f9f1, #effcf6); }
.s-pitanja { background: linear-gradient(180deg, #fff 0%, #f6fbf8 100%); }
.s-kontakt {
  color: #d9efe6;
  background: linear-gradient(120deg, #17302a, #1f5a4a, #1e5246, #175247, #17302a);
  background-size: 300% 300%; animation: hero-gradijent 20s ease-in-out infinite;
}
.s-kontakt a { color: #9fe8cc; }

/* ---------- Kartice ---------- */
.mreza-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1.5rem; }
.karta {
  position: relative; border-radius: var(--radius); padding: 2rem;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(47,196,147,.35), rgba(139,92,246,.2), rgba(92,207,184,.35)) border-box;
  box-shadow: var(--sjena);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out, box-shadow .3s;
}
.karta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(31,179,154,.1), transparent 45%);
}
.karta:hover { box-shadow: var(--sjena-jaka); }
.karta:hover::before { opacity: 1; }
.karta p { color: var(--siva); margin: 0; }
.karta-mala { padding: 1.6rem; }


.dvije { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 3.5rem; align-items: start; }

.lista-dok { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.lista-dok li {
  position: relative; padding: .9rem 1.1rem .9rem 3.6rem; border-radius: 12px;
  background: linear-gradient(90deg, rgba(47,196,147,.16), rgba(31,179,154,.08));
  box-shadow: inset 0 0 0 1px rgba(159,232,204,.15); transition: background .3s, translate .3s;
}
.lista-dok li:hover { background: linear-gradient(90deg, rgba(47,196,147,.3), rgba(31,179,154,.12)); translate: 6px 0; }
.lista-dok li > i { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; font-size: 1.5rem; --fa-primary-color: #e2f8ef; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .8; transition: scale .3s, rotate .3s; }
.lista-dok li:hover > i { scale: 1.2; rotate: -8deg; }
.lista-dok strong { color: #fff; }

/* ---------- Koraci ---------- */
.koraci { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1.5rem; position: relative; }
.koraci li {
  position: relative; border-radius: var(--radius); padding: 1.75rem; background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px); box-shadow: var(--sjena); border: 1px solid rgba(255,255,255,.9);
}
.koraci span {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: var(--gradijent-akcent); color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem;
  box-shadow: 0 10px 20px -8px rgba(31,179,154,.7);
}
.koraci p { color: var(--siva); margin: 0; }

/* ---------- FAQ ---------- */
details {
  margin-bottom: .85rem; padding: 1.1rem 1.4rem; border-radius: 14px; background: #fff;
  border: 1px solid var(--linija); transition: box-shadow .3s, border-color .3s;
}
details:hover { border-color: #c3eedc; }
details[open] { box-shadow: var(--sjena); border-color: #a6e9cf; }
summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; position: relative; padding-right: 2.5rem; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: var(--gradijent-akcent); transition: rotate .3s;
}
details[open] summary::after { rotate: 45deg; }
details p { color: var(--siva); margin: .8rem 0 0; animation: otvori .4s ease-out; }
@keyframes otvori { from { opacity: 0; translate: 0 -6px; } }

/* ---------- Kontakt ---------- */
.forma-kartica { background: rgba(255,255,255,.97); color: var(--tekst); border-radius: 20px; padding: 2rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.forma-kartica.uspjeh h3 { color: #15803d; }
.polja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.polja label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
.puno { grid-column: 1 / -1; width: 100%; }
input, select, textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid #cfe3da; border-radius: 10px; font: inherit; font-weight: 400; background: #f6fbf8;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(31,179,154,.18); }
textarea { resize: vertical; }
.greska { background: #fee2e2; color: #7f1d1d; padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.skriveno { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt-info { display: grid; gap: .6rem; font-size: 1.1rem; margin-top: 1.5rem; }
.kontakt-info a { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.kontakt-info i { font-size: 1.5rem; --fa-primary-color: #fff; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: 1; }

.podnozje { background: #1b1f1e; color: #9cb8ad; padding: 1.75rem 0; font-size: .9rem; }
.podnozje-red { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.podnozje a { color: #9cb8ad; }

/* ---------- Animacije pri skrolovanju - svaki panel svoja ----------
   Koriste se translate/scale/filter (a ne transform) da ne smetaju 3D nagibu kartica. */
[data-anim] { --kasnjenje: .12s; }
[data-anim="gore"], [data-anim="lijevo"], [data-anim="blur"], [data-anim="nagib"],
[data-anim$="kaskada"] > *, [data-anim="koraci"] > * { opacity: 0; }

[data-anim].vidljivo { opacity: 1; }
[data-anim="gore"].vidljivo    { animation: a-gore .9s cubic-bezier(.2,.7,.2,1) both; }
[data-anim="lijevo"].vidljivo  { animation: a-lijevo .9s cubic-bezier(.2,.7,.2,1) both; }
[data-anim="blur"].vidljivo    { animation: a-blur 1s ease-out both; }
[data-anim="nagib"].vidljivo   { animation: a-nagib 1.1s cubic-bezier(.2,.7,.2,1) both; }

.vidljivo[data-anim="kaskada"] > *        { animation: a-gore .8s cubic-bezier(.2,.7,.2,1) calc(var(--i) * var(--kasnjenje)) both; }
.vidljivo[data-anim="desno-kaskada"] > *  { animation: a-desno .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .08s) both; }
.vidljivo[data-anim="zum-kaskada"] > *    { animation: a-zum .7s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * .09s) both; }
.vidljivo[data-anim="blur-kaskada"] > *   { animation: a-blur .8s ease-out calc(var(--i) * .12s) both; }
.vidljivo[data-anim="koraci"] > *         { animation: a-okret .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .18s) both; }

@keyframes a-gore   { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
@keyframes a-lijevo { from { opacity: 0; translate: -70px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes a-desno  { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes a-zum    { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes a-blur   { from { opacity: 0; filter: blur(12px); scale: 1.04; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes a-nagib  { from { opacity: 0; translate: 0 60px; rotate: 3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes a-okret  {
  from { opacity: 0; transform: perspective(700px) rotateX(-70deg); transform-origin: top; }
  to   { opacity: 1; transform: perspective(700px) rotateX(0); transform-origin: top; }
}

/* ---------- Širok raspored (hero ostaje boxed u .omotac) ---------- */
.omotac-sirok { max-width: 1680px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4.5rem); }
.panel-red { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: 3rem; }
.panel-red .naslov-blok { margin-bottom: 0; }
.tri-kolone { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.naslov-blok.centar { text-align: center; }
.naslov-blok.centar .sekcija-uvod { margin: 0 auto; }
.mreza-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .mreza-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mreza-6 { grid-template-columns: 1fr; } .panel-red, .tri-kolone { grid-template-columns: 1fr; } }

/* ---------- Padajući meni Resursi ---------- */
.padajuci { position: relative; }
.padajuci-dugme span { font-size: .7em; margin-left: .15rem; }
.padajuci-meni {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 8px; width: 360px; padding: .6rem;
  background: rgba(23, 48, 42, .97); backdrop-filter: blur(14px); border-radius: 14px;
  box-shadow: 0 24px 50px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(159,232,204,.15);
  opacity: 0; visibility: hidden; transition: opacity .25s, translate .25s, visibility .25s;
}
.padajuci-meni::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.padajuci:hover .padajuci-meni, .padajuci:focus-within .padajuci-meni { opacity: 1; visibility: visible; translate: -50% 0; }
.nav .padajuci-meni a { display: block; padding: .65rem .8rem; border-radius: 10px; color: #e0f2ea; }
.nav .padajuci-meni a::after { display: none; }
.nav .padajuci-meni a:hover { background: rgba(47,196,147,.18); }
.padajuci-meni strong { display: block; font-size: .95rem; }
.padajuci-meni small { display: block; color: #9fbdb1; font-size: .8rem; line-height: 1.4; }

/* ---------- Font Awesome duotone ikone ---------- */
.fa-ikona {
  position: relative; display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; margin-bottom: 1.25rem;
  font-size: 2.6rem; isolation: isolate; transition: transform .5s cubic-bezier(.3,1.6,.5,1);
}
.fa-ikona::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: .5; filter: blur(14px); background: inherit; transition: opacity .4s; }
.fa-ikona i { animation: ikona-lebdi 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
.karta:hover .fa-ikona { transform: scale(1.1) rotate(-6deg); }
.karta:hover .fa-ikona::after { opacity: .9; }
.karta:hover .fa-ikona i { animation: ikona-skok .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes ikona-lebdi { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes ikona-skok { 0% { scale: 1; } 40% { scale: 1.25; rotate: 8deg; } 100% { scale: 1; rotate: 0deg; } }

.fi-plava       { background: linear-gradient(135deg, #dcf7ec, #c8f2e1); --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .55; }
.fi-ljubicasta  { background: linear-gradient(135deg, #e3f7ee, #c9f0df); --fa-primary-color: #0f8a6c; --fa-secondary-color: #7fdcbc; --fa-secondary-opacity: .6; }
.fi-tirkiz      { background: linear-gradient(135deg, #dcfaf0, #c9f7e9); --fa-primary-color: #0d7a68; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .6; }
.fi-crvena      { background: linear-gradient(135deg, #ffe4e6, #fecdd3); --fa-primary-color: #be123c; --fa-secondary-color: #fb7185; --fa-secondary-opacity: .6; }
.fi-narandzasta { background: linear-gradient(135deg, #ffedd5, #fed7aa); --fa-primary-color: #c2410c; --fa-secondary-color: #fb923c; --fa-secondary-opacity: .6; }
.fi-zelena      { background: linear-gradient(135deg, #dcfce7, #bbf7d0); --fa-primary-color: #15803d; --fa-secondary-color: #4ade80; --fa-secondary-opacity: .6; }

/* Zajednički stil grafika: pokreću se kad uđu u ekran (.vidljivo) */
.graf { position: relative; }
.graf:not(.vidljivo) * { animation-play-state: paused !important; }

/* ---------- Grafik: mapa obrade ---------- */
.graf-mapa { aspect-ratio: 5 / 3; width: 100%; max-width: 680px; justify-self: center; }
.mapa-linije { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-linije path { fill: none; stroke: url(#none); stroke: #9fe8cc; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 8; animation: tok 1.2s linear infinite; opacity: .8; }
.cvor {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; justify-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--siva);
  opacity: 0;
}
.vidljivo .cvor { animation: cvor-ulaz .6s cubic-bezier(.3,1.5,.5,1) calc(.3s + var(--k) * .15s) both; }
@keyframes cvor-ulaz { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.cvor i {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font-size: 1.75rem; background: #fff;
  box-shadow: 0 12px 28px -10px rgba(18,166,124,.45), inset 0 0 0 1px #dcf7ec;
  --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .55;
}
.cvor-d i { --fa-primary-color: #0d7a68; --fa-secondary-color: #7ee0c5; box-shadow: 0 12px 28px -10px rgba(92,207,184,.5), inset 0 0 0 1px #dcfaf0; }
.cvor-centar {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; font-size: 3rem; color: #fff;
  background: var(--gradijent-akcent); box-shadow: 0 20px 50px -12px rgba(31,179,154,.7);
  --fa-primary-color: #fff; --fa-secondary-color: #c3eedc; --fa-secondary-opacity: .7;
}
.cvor-centar i { animation: ikona-lebdi 3s ease-in-out infinite; }
.talas { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #5cd6b0; animation: talas 2.6s ease-out infinite; }
.talas.t2 { animation-delay: 1.3s; }
@keyframes talas { from { scale: 1; opacity: .8; } to { scale: 1.9; opacity: 0; } }

/* ---------- Sekcija i grafik: DPO ---------- */
.s-dpo { background: radial-gradient(circle at 15% 50%, #dff6ec 0, transparent 45%), linear-gradient(120deg, #fff 0%, #effcf6 100%); }
.s-dpo .panel-red { margin-bottom: 0; }
.graf-dpo { min-height: 420px; display: grid; place-items: center; }
.dpo-kartica {
  position: relative; width: min(340px, 100%); padding: 2.25rem 2rem 2rem; border-radius: 24px; text-align: center;
  background: linear-gradient(160deg, #17302a, #1f5a4a 60%, #175247); color: #fff;
  box-shadow: 0 40px 80px -30px rgba(28,58,50,.7), inset 0 0 0 1px rgba(159,232,204,.25);
  animation: kartica-lebdi 6s ease-in-out infinite;
}
@keyframes kartica-lebdi { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -12px; rotate: 1deg; } }
.dpo-avatar {
  width: 110px; height: 110px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 3.2rem;
  background: linear-gradient(135deg, rgba(95,217,174,.25), rgba(126,224,197,.2)); box-shadow: inset 0 0 0 2px rgba(159,232,204,.4);
  --fa-primary-color: #fff; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .9;
}
.dpo-ime { font-size: 1.4rem; font-weight: 800; }
.dpo-uloga { color: #a6e9cf; font-size: .9rem; margin-bottom: 1.2rem; }
.dpo-linije { display: grid; gap: .5rem; justify-items: center; }
.dpo-linije span { height: 6px; border-radius: 3px; background: rgba(159,232,204,.25); width: 80%; }
.dpo-linije span:nth-child(2) { width: 60%; }
.dpo-linije span:nth-child(3) { width: 70%; }
.dpo-pecat {
  position: absolute; right: -22px; bottom: -22px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; justify-items: center;
  background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 14px 30px -8px rgba(22,163,74,.7);
  --fa-primary-color: #fff; --fa-secondary-color: #bbf7d0; --fa-secondary-opacity: .6; font-size: 2rem;
}
.vidljivo .dpo-pecat { animation: pecat-udarac 1s cubic-bezier(.3,1.6,.5,1) .6s both, pecat-sjaj 3s ease-in-out 1.6s infinite; }
.dpo-pecat small { font-size: .52rem; font-weight: 800; letter-spacing: .08em; margin-top: .15rem; }
@keyframes pecat-udarac { from { scale: 2.4; opacity: 0; rotate: -30deg; } to { scale: 1; opacity: 1; rotate: -12deg; } }
@keyframes pecat-sjaj { 0%, 100% { box-shadow: 0 14px 30px -8px rgba(22,163,74,.7); } 50% { box-shadow: 0 0 0 12px rgba(34,197,94,.15), 0 14px 30px -8px rgba(22,163,74,.7); } }
.graf-dpo .dpo-plutajuca { position: absolute; font-size: 2.6rem; --fa-primary-color: #129e7a; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .6; animation: plutaj 6s ease-in-out infinite; }
.graf-dpo .dpo-plutajuca.p1 { top: 6%; left: 10%; }
.graf-dpo .dpo-plutajuca.p2 { top: 14%; right: 8%; animation-delay: -2s; font-size: 2.2rem; }
.graf-dpo .dpo-plutajuca.p3 { bottom: 10%; left: 14%; animation-delay: -4s; font-size: 2rem; }
.dpo-tacke { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: .9rem; }
.dpo-tacke li { display: flex; align-items: center; gap: .85rem; font-weight: 600; }
.dpo-tacke i { font-size: 1.6rem; flex-shrink: 0; --fa-primary-color: #129e7a; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .7; }
.dpo-kontakt { display: flex; flex-wrap: wrap; gap: .75rem; }
.dpo-kontakt a {
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: 12px; text-decoration: none; font-weight: 700;
  background: #fff; color: var(--tekst); box-shadow: var(--sjena); transition: translate .25s, box-shadow .25s;
}
.dpo-kontakt a:hover { translate: 0 -2px; box-shadow: var(--sjena-jaka); }
.dpo-kontakt i { font-size: 1.3rem; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .6; }
[data-anim="desno"] { opacity: 0; }
[data-anim="desno"].vidljivo { animation: a-desno .9s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Grafik: dosije ---------- */
.graf-dosije { height: 300px; margin-top: 2.5rem; max-width: 460px; }
.graf-dosije .list {
  position: absolute; left: 50%; top: 30px; width: 170px; height: 220px; margin-left: -85px; border-radius: 14px; padding: 1.2rem;
  background: linear-gradient(180deg, #fff, #e6f6ef); box-shadow: 0 20px 40px -15px rgba(0,0,0,.6);
  display: grid; align-content: start; gap: .55rem; transform-origin: bottom center;
}
.graf-dosije .list b { height: 10px; width: 55%; border-radius: 5px; background: var(--gradijent-akcent); }
.graf-dosije .list i { height: 6px; border-radius: 3px; background: #c3eedc; }
.graf-dosije .list i:nth-of-type(2) { width: 85%; }
.graf-dosije .list i:nth-of-type(3) { width: 70%; }
.graf-dosije .potpis { margin-top: 2.2rem; height: 18px; width: 70%; border-bottom: 2px solid #1fb39a; border-radius: 0 0 40% 10%; }
.l1 { animation: list-1 6s ease-in-out infinite; }
.l2 { animation: list-2 6s ease-in-out infinite; }
.l3 { animation: list-3 6s ease-in-out infinite; }
@keyframes list-1 { 0%, 100% { rotate: 0deg; translate: 0 0; } 25%, 70% { rotate: -16deg; translate: -90px 10px; } }
@keyframes list-2 { 0%, 100% { rotate: 0deg; translate: 0 0; } 25%, 70% { rotate: 14deg; translate: 90px 10px; } }
@keyframes list-3 { 0%, 100% { translate: 0 0; } 25%, 70% { translate: 0 -14px; } }
.graf-dosije .pecat {
  position: absolute; left: 50%; top: 150px; margin-left: 10px; font-size: 3rem; color: #22c55e;
  --fa-primary-color: #22c55e; --fa-secondary-color: #86efac; --fa-secondary-opacity: .7; animation: pecati 6s ease-in-out infinite;
}
@keyframes pecati {
  0%, 30% { opacity: 0; translate: 40px -80px; rotate: 20deg; }
  40% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1.2; }
  45%, 70% { opacity: 1; translate: 0 0; scale: 1; }
  80%, 100% { opacity: 0; translate: 0 0; }
}
.graf-dosije .fascikla {
  position: absolute; left: 50%; bottom: -10px; translate: -50% 0; font-size: 5rem;
  --fa-primary-color: #fbbf24; --fa-secondary-color: #f59e0b; --fa-secondary-opacity: .8; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4));
}

/* ---------- Grafik: orbita djelatnosti ---------- */
.graf-orbita { aspect-ratio: 1; width: min(420px, 100%); justify-self: center; display: grid; place-items: center; }
.orbita-prsten { position: absolute; inset: 4%; border-radius: 50%; border: 2px dashed #a8e6cf; animation: rotacija 40s linear infinite; }
.orbita-prsten.unutra { inset: 26%; border: 2px solid rgba(31,179,154,.18); background: radial-gradient(circle, rgba(31,179,154,.12), transparent 70%); animation: none; }
.orbita-centar {
  position: relative; z-index: 1; width: 120px; height: 120px; border-radius: 32px; display: grid; place-items: center; font-size: 3.4rem;
  background: var(--gradijent-akcent); box-shadow: 0 24px 50px -14px rgba(31,179,154,.75);
  --fa-primary-color: #fff; --fa-secondary-color: #c3eedc; --fa-secondary-opacity: .7; animation: puls-centar 3s ease-in-out infinite;
}
@keyframes puls-centar { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.orbita-rotor { position: absolute; inset: 0; animation: rotacija 30s linear infinite; }
.orbita-rotor span {
  position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px;
  transform: rotate(var(--u)) translateY(calc(min(420px, 100vw) * -.44)) rotate(calc(var(--u) * -1));
}
.orbita-rotor i {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-size: 1.65rem; background: #fff;
  box-shadow: 0 12px 26px -10px rgba(14,120,96,.45); animation: rotacija 30s linear infinite reverse;
  --fa-primary-color: #0f8a6c; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .7;
}

/* ---------- Grafik: put kroz korake ---------- */
.graf-put { height: 120px; margin: 0 auto 2.5rem; }
.graf-put svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.put-osnova { fill: none; stroke: #c3eedc; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 2 10; stroke-linecap: round; }
.put-crta { fill: none; stroke: url(#none); stroke: #1fb39a; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.vidljivo .put-crta { animation: put-crtaj 2.4s ease-in-out .2s forwards; }
@keyframes put-crtaj { to { stroke-dashoffset: 0; } }
.put-tacka {
  position: absolute; left: var(--p); top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; background: #fff; box-shadow: 0 12px 28px -10px rgba(31,179,154,.6), inset 0 0 0 3px #dff6ec;
  --fa-primary-color: #129e7a; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .7; opacity: 0;
}
.vidljivo .put-tacka { animation: cvor-ulaz .6s cubic-bezier(.3,1.5,.5,1) both, ikona-lebdi 3.5s ease-in-out infinite; }
.vidljivo .put-tacka:nth-of-type(1) { animation-delay: .2s, 1s; }
.vidljivo .put-tacka:nth-of-type(2) { animation-delay: .9s, 1.4s; }
.vidljivo .put-tacka:nth-of-type(3) { animation-delay: 1.5s, 1.8s; }
.vidljivo .put-tacka:nth-of-type(4) { animation-delay: 2.2s, 2.2s; background: var(--gradijent-akcent); --fa-primary-color: #fff; --fa-secondary-color: #bbf7d0; }

/* ---------- Grafik: razgovor ---------- */
.panel-pitanja { align-items: start; }
.graf-chat { display: grid; gap: .8rem; max-width: 380px; margin-top: 2.5rem; }
.poruka-chat {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content; padding: .85rem 1.15rem; border-radius: 18px; font-weight: 600;
  box-shadow: var(--sjena); opacity: 0; animation: chat 9s ease-in-out infinite;
}
.poruka-chat i { font-size: 1.35rem; }
.p-pitanje { background: #fff; border-bottom-left-radius: 4px; --fa-primary-color: #129e7a; --fa-secondary-color: #a6e9cf; }
.p-kuca { justify-self: end; background: #dff6ec; animation-name: chat-kuca; }
.p-kuca span { width: 8px; height: 8px; border-radius: 50%; background: #1fb39a; animation: tockic-kuca 1s ease-in-out infinite; }
.p-kuca span:nth-child(2) { animation-delay: .15s; }
.p-kuca span:nth-child(3) { animation-delay: .3s; }
.p-odgovor { justify-self: end; color: #fff; background: var(--gradijent-akcent); border-bottom-right-radius: 4px; animation-name: chat-odgovor; --fa-primary-color: #fff; --fa-secondary-color: #4ade80; --fa-secondary-opacity: 1; }
@keyframes chat        { 0% { opacity: 0; translate: 0 12px; } 5%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes chat-kuca   { 0%, 12% { opacity: 0; translate: 0 12px; } 17%, 35% { opacity: 1; translate: 0 0; } 40%, 100% { opacity: 0; } }
@keyframes chat-odgovor { 0%, 38% { opacity: 0; translate: 0 12px; scale: .9; } 44%, 90% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
@keyframes tockic-kuca { 0%, 100% { translate: 0 0; opacity: .5; } 50% { translate: 0 -4px; opacity: 1; } }

/* ---------- Grafik: papirni avion ---------- */
.graf-avion { height: 170px; max-width: 460px; margin-top: 2.5rem; }
.graf-avion svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graf-avion path { fill: none; stroke: rgba(159,232,204,.45); stroke-width: 2; stroke-dasharray: 6 9; vector-effect: non-scaling-stroke; animation: tok 1.4s linear infinite; }
.graf-avion .avion {
  position: absolute; left: 0; top: 0; font-size: 2.4rem; offset-path: path("M10 140 C120 150 160 40 260 70 S360 60 390 20"); offset-rotate: auto 45deg;
  --fa-primary-color: #fff; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: 1; animation: let 5s ease-in-out infinite;
}
@keyframes let { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.kalendar {
  position: absolute; right: -6px; top: -26px; width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; font-size: 2.2rem;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  --fa-primary-color: #fff; --fa-secondary-color: #4ade80; --fa-secondary-opacity: 1; animation: kalendar-puls 5s ease-in-out infinite;
}
@keyframes kalendar-puls { 0%, 80% { scale: 1; } 88% { scale: 1.18; box-shadow: 0 0 0 10px rgba(74,222,128,.2), inset 0 0 0 1px rgba(255,255,255,.25); } 100% { scale: 1; } }
.forma-kartica.uspjeh i { --fa-primary-color: #fff; --fa-secondary-color: #16a34a; --fa-secondary-opacity: 1; }

/* Podnožje - linkovi */
.podnozje-linkovi { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { padding: 7.5rem 0 5rem; min-height: auto; }
  .hero-red { grid-template-columns: 1fr; }
  .hero-vizual { order: -1; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .nav nav a:not(.dugme) { display: none; }
  .nav-red { flex-wrap: nowrap; min-height: 64px; }
  .logo { font-size: 1.15rem; }
  .dugme-malo { padding: .45rem .75rem; font-size: .85rem; white-space: nowrap; }
  .hero-akcije .dugme { width: 100%; }
  .sekcija { padding: 4.5rem 0; }
  .karta, .forma-kartica { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-anim], [data-anim] > *, .ulaz { opacity: 1 !important; }
  .stit-obrub { stroke-dashoffset: 0; }
}

/* ---------- Pastelna zelena tema: svijetli hero i navigacija ---------- */
.hero {
  color: var(--tekst);
  background: linear-gradient(125deg, #f2fcf7 0%, #dcf6ea 28%, #c6efdf 52%, #e2f7ef 78%, #f5fdf9 100%);
  background-size: 300% 300%;
}
.hero .mrlja-1 { background: #a6f5dc; opacity: .7; }
.hero .mrlja-2 { background: #bfeedd; opacity: .8; }
.hero .mrlja-3 { background: #8fe3c4; opacity: .35; }
.hero-mreza { background-image: linear-gradient(rgba(18,166,124,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(18,166,124,.08) 1px, transparent 1px); }
.hero h1 { color: #1c2a25; }
.hero .gradijent-tekst { background-image: linear-gradient(90deg, #0e8f6a, #2fc493, #13a291, #0e8f6a); background-size: 300% 100%; }
.hero .nadnaslov { color: #0c7a5b; background: rgba(47,196,147,.16); box-shadow: inset 0 0 0 1px rgba(18,166,124,.3); }
.hero .uvod { color: #43584f; }
.hero .hero-tacke { color: #3c5148; }
.hero .dugme-obrub { color: #1f2b27 !important; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1.5px rgba(31,43,39,.3); }
.hero .dugme-obrub:hover { background: #fff; box-shadow: inset 0 0 0 1.5px #1f2b27; }
.hero .skrol-strelica { box-shadow: inset 0 0 0 2px rgba(31,43,39,.35); }
.hero .skrol-strelica span { background: #1f2b27; }

.nav nav a:not(.dugme) { color: #2c3e37; }
.nav nav a:not(.dugme):hover { color: #0e8f6a; }
.nav.skrolovano { background: rgba(255,255,255,.86); box-shadow: 0 8px 30px -14px rgba(28,58,50,.35); }
.logo { color: #2c2e30; }
.logo span { color: #1fb37f; }
.logo img { height: 40px; width: auto; display: block; transition: rotate .4s; }
.logo:hover img { rotate: -8deg; }
.padajuci-meni { background: rgba(255,255,255,.98); box-shadow: 0 24px 50px -12px rgba(28,58,50,.35), inset 0 0 0 1px rgba(18,166,124,.15); }
.nav .padajuci-meni a { color: #1f2b27; }
.nav .padajuci-meni a:hover { background: #e8f9f1; }
.padajuci-meni small { color: #5f766c; }

/* =================== PODSTRANE / RESURSI =================== */
.podstrana-hero {
  position: relative; overflow: hidden; padding: 8.5rem 0 4.5rem;
  background: linear-gradient(125deg, #f2fcf7 0%, #dcf6ea 35%, #c9f0e1 65%, #eefbf5 100%);
}
.podstrana-hero .mrlja-1 { background: #a6f5dc; opacity: .6; width: 420px; height: 420px; }
.podstrana-hero .mrlja-2 { background: #bfeedd; opacity: .7; width: 360px; height: 360px; }
.podstrana-red { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: center; }
.podstrana-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 900px; color: #1c2a25; }
.podstrana-hero .uvod { color: #43584f; max-width: 820px; font-size: 1.15rem; }
.podstrana-hero .nadnaslov { color: #0c7a5b; background: rgba(47,196,147,.16); box-shadow: inset 0 0 0 1px rgba(18,166,124,.3); }
.mrvice-javne { font-size: .88rem; color: #5f766c; margin-bottom: 1.1rem; }
.mrvice-javne a { color: #0e8f6a; text-decoration: none; }
.mrvice-javne span { margin: 0 .35rem; opacity: .5; }
.clanak-meta { color: #5f766c; font-size: .9rem; margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.clanak-meta i { --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; }

.podstrana-ikona { position: relative; width: 300px; height: 300px; display: grid; place-items: center; justify-self: center; }
.pi-prsten { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(18,166,124,.35); animation: rotacija 30s linear infinite; }
.pi-prsten.p2 { inset: 18%; border: 2px solid rgba(18,166,124,.15); background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%); animation: none; }
.podstrana-ikona .pi-glavna {
  position: relative; font-size: 6rem; animation: ikona-lebdi 4s ease-in-out infinite;
  --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; filter: drop-shadow(0 18px 24px rgba(14,143,106,.3));
}
.podstrana-ikona .pi-satelit {
  position: absolute; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: #fff; font-size: 1.7rem;
  box-shadow: 0 14px 30px -12px rgba(14,143,106,.5); --fa-primary-color: #0e8f6a; --fa-secondary-color: #7ee0c5; --fa-secondary-opacity: .8;
  animation: plutaj 5s ease-in-out infinite;
}
.podstrana-ikona .pi-satelit.s1 { top: 4%; left: 6%; }
.podstrana-ikona .pi-satelit.s2 { top: 22%; right: -4%; animation-delay: -1.7s; }
.podstrana-ikona .pi-satelit.s3 { bottom: 2%; left: 22%; animation-delay: -3.3s; }

/* Raspored članka: sadržaj + bočni meni */
.clanak-red { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.toc { position: sticky; top: 96px; padding: 1.4rem; border-radius: 18px; background: #fff; box-shadow: var(--sjena); border: 1px solid #e2ece7; }
.toc h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #5f766c; margin-bottom: .8rem; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.toc a { display: block; padding: .45rem .6rem; border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.toc a:hover { background: #e8f9f1; color: #0e8f6a; }
.toc-cta { display: block; margin-top: 1rem; text-align: center; }

.clanak { max-width: 900px; font-size: 1.06rem; }
.clanak > section { margin-bottom: 3.5rem; scroll-margin-top: 100px; }
.clanak h2 { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.clanak h2 > i {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.45rem;
  background: linear-gradient(135deg, #dcf7ec, #c3eedc); --fa-primary-color: #0e8f6a; --fa-secondary-color: #2fc493; --fa-secondary-opacity: .55;
}
.clanak h3 { margin-top: 1.6rem; }
.clanak p, .clanak li { color: #33463f; }
.clanak ul, .clanak ol { padding-left: 1.3rem; }
.clanak li { margin-bottom: .45rem; }
.clan { display: inline-block; padding: .05rem .5rem; border-radius: 6px; background: #e3f8ef; color: #0c7a5b; font-size: .85em; font-weight: 700; white-space: nowrap; }

.okvir { display: flex; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: 16px; margin: 1.5rem 0; background: #effcf6; border: 1px solid #c3eedc; }
.okvir > i { font-size: 1.8rem; flex-shrink: 0; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; }
.okvir p { margin: 0; }
.okvir-upozorenje { background: #fff8eb; border-color: #fde3b0; }
.okvir-upozorenje > i { --fa-primary-color: #b45309; --fa-secondary-color: #fbbf24; }

/* Vremenska linija */
.vremenska { list-style: none; padding: 0 !important; margin: 1.5rem 0; position: relative; }
.vremenska::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(#5fd9ae, #0e8f6a); }
.vremenska li { position: relative; padding: 0 0 1.4rem 4.2rem; margin: 0; }
.vremenska li > i {
  position: absolute; left: 0; top: -4px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
  background: #fff; box-shadow: 0 10px 22px -10px rgba(14,143,106,.6), inset 0 0 0 3px #dcf7ec;
  --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7;
}
.vremenska li.kljucno > i { background: var(--gradijent-akcent); --fa-primary-color: #fff; --fa-secondary-color: #bbf7d0; animation: talas-ikona 2.4s ease-out infinite; }
@keyframes talas-ikona { 0% { box-shadow: 0 0 0 0 rgba(47,196,147,.5); } 100% { box-shadow: 0 0 0 16px rgba(47,196,147,0); } }
.vremenska strong { display: block; color: #0c7a5b; font-size: .95rem; }

/* Kartice unutar članka */
.kartice-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1rem; margin: 1.5rem 0; }
.kartica-mini { padding: 1.25rem; border-radius: 16px; background: #fff; border: 1px solid #e2ece7; box-shadow: 0 8px 24px -16px rgba(28,58,50,.35); transition: translate .25s, box-shadow .25s; }
.kartica-mini:hover { translate: 0 -3px; box-shadow: var(--sjena); }
.kartica-mini > i { font-size: 1.9rem; margin-bottom: .6rem; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; }
.kartica-mini h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.kartica-mini p { margin: 0; font-size: .95rem; }

/* Tabele */
.tabela-omot { overflow-x: auto; margin: 1.5rem 0; border-radius: 16px; border: 1px solid #e2ece7; box-shadow: 0 8px 24px -16px rgba(28,58,50,.35); }
.clanak table { width: 100%; border-collapse: collapse; background: #fff; font-size: .97rem; }
.clanak th { background: #e8f9f1; color: #0c7a5b; text-align: left; padding: .8rem 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.clanak td { padding: .8rem 1rem; border-top: 1px solid #e2ece7; vertical-align: top; }
.clanak td strong { color: #1c2a25; }

/* Numerisani koraci */
.koraci-clanak { list-style: none; padding: 0 !important; counter-reset: k; display: grid; gap: .9rem; }
.koraci-clanak li { counter-increment: k; position: relative; padding: 1.1rem 1.2rem 1.1rem 4.2rem; border-radius: 16px; background: #fff; border: 1px solid #e2ece7; margin: 0; }
.koraci-clanak li::before {
  content: counter(k); position: absolute; left: 1.1rem; top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 10px;
  display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--gradijent-akcent);
}
.koraci-clanak strong { display: block; color: #1c2a25; }

.izvor-napomena { font-size: .88rem; color: #5f766c; border-top: 1px solid #e2ece7; padding-top: 1rem; }

/* CTA blok */
.cta-blok {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.25rem; border-radius: 24px; margin: 1rem 0 0;
  color: #d9efe6; background: radial-gradient(circle at 90% 10%, rgba(95,217,174,.35), transparent 50%), linear-gradient(135deg, #17302a, #1f5a4a);
  box-shadow: 0 30px 60px -30px rgba(23,48,42,.8);
}
.cta-blok h2 { color: #fff; margin: 0 0 .4rem; }
.cta-blok p { margin: 0; max-width: 560px; color: #cfe9df; }
.cta-akcije { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Resursi - kartice */
.s-ostali { background: linear-gradient(160deg, #effcf6, #f6fdf9); }
.resursi-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.25rem; }
.resurs-karta {
  position: relative; display: block; padding: 1.75rem; border-radius: 20px; text-decoration: none; color: var(--tekst);
  background: #fff; border: 1px solid #e2ece7; box-shadow: var(--sjena);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, box-shadow .3s;
}
.resurs-karta:hover { box-shadow: var(--sjena-jaka); }
.resurs-karta .fa-ikona { width: 72px; height: 72px; font-size: 2.1rem; border-radius: 20px; }
.resurs-karta:hover .fa-ikona { transform: scale(1.1) rotate(-6deg); }
.resurs-karta h3 { margin-bottom: .4rem; }
.resurs-karta p { color: var(--siva); margin: 0 0 1rem; }
.strelica { font-weight: 700; color: #0e8f6a; display: inline-flex; gap: .35rem; transition: gap .25s; }
.resurs-karta:hover .strelica { gap: .7rem; }
.resurs-karta.istaknuta { grid-column: span 2; background: linear-gradient(135deg, #17302a, #1f5a4a); color: #fff; border: 0; }
.resurs-karta.istaknuta p { color: #cfe9df; }
.resurs-karta.istaknuta .strelica { color: #7ee0c5; }

/* Odbrojavanje */
.odbrojavanje { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.odbr-polje { min-width: 104px; padding: 1rem 1.1rem; border-radius: 18px; text-align: center; background: rgba(255,255,255,.75); box-shadow: 0 12px 30px -16px rgba(14,143,106,.5); backdrop-filter: blur(6px); }
.odbr-polje b { display: block; font-size: 2.2rem; line-height: 1; color: #0e8f6a; font-variant-numeric: tabular-nums; }
.odbr-polje small { color: #5f766c; font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }

/* Interaktivni testovi (samoprocjena, DPO provjera) */
.test { background: #fff; border-radius: 22px; border: 1px solid #e2ece7; box-shadow: var(--sjena); padding: clamp(1.25rem, 3vw, 2.25rem); }
.test-napredak { height: 10px; border-radius: 5px; background: #e3f8ef; overflow: hidden; margin-bottom: 1.75rem; }
.test-napredak span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gradijent-akcent); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.test-oblast { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0c7a5b; }
.test-oblast i { font-size: 1.3rem; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; }
.test-pitanje { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; margin: .6rem 0 1.4rem; color: #1c2a25; }
.test-odgovori { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .75rem; }
.test-odgovori button {
  display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-radius: 14px; border: 2px solid #e2ece7; background: #f6fbf8;
  font: inherit; font-weight: 700; color: var(--tekst); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, translate .2s;
}
.test-odgovori button:hover { border-color: #5fd9ae; background: #fff; translate: 0 -2px; }
.test-odgovori button i { font-size: 1.5rem; }
.test-odgovori .o-da i { --fa-primary-color: #fff; --fa-secondary-color: #16a34a; --fa-secondary-opacity: 1; }
.test-odgovori .o-dj i { --fa-primary-color: #fff; --fa-secondary-color: #f59e0b; --fa-secondary-opacity: 1; }
.test-odgovori .o-ne i { --fa-primary-color: #fff; --fa-secondary-color: #e11d48; --fa-secondary-opacity: 1; }
.test-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; color: var(--siva); font-size: .9rem; }
.test-nav button { background: none; border: 0; font: inherit; color: #0e8f6a; font-weight: 700; cursor: pointer; }
.test-korak { animation: a-gore .45s cubic-bezier(.2,.7,.2,1) both; }

.rezultat-glava { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; }
.rezultat-krug { width: 170px; height: 170px; position: relative; }
.rezultat-krug svg { width: 100%; height: 100%; rotate: -90deg; }
.rezultat-krug circle { fill: none; stroke-width: 14; }
.rezultat-krug .rk-osnova { stroke: #e3f8ef; }
.rezultat-krug .rk-vrijednost { stroke: #12a67c; stroke-linecap: round; stroke-dasharray: 427; stroke-dashoffset: 427; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.rezultat-krug b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; color: #1c2a25; }
.rezultat-nivo { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-weight: 800; font-size: .85rem; }
.nivo-nizak { background: #ffe4e6; color: #be123c; }
.nivo-srednji { background: #fef3c7; color: #b45309; }
.nivo-visok { background: #dcfce7; color: #15803d; }
.oblasti { display: grid; gap: .9rem; margin: 1.5rem 0; }
.oblast-red { display: grid; grid-template-columns: 260px 1fr 52px; gap: 1rem; align-items: center; }
.oblast-red > span { font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.oblast-red > span i { --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; }
.oblast-traka { height: 12px; border-radius: 6px; background: #e3f8ef; overflow: hidden; }
.oblast-traka b { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.oblast-red em { font-style: normal; font-weight: 800; text-align: right; }
.preporuke { display: grid; gap: .75rem; padding: 0 !important; list-style: none; }
.preporuke li { padding: 1rem 1.2rem; border-radius: 14px; background: #fff8eb; border: 1px solid #fde3b0; margin: 0; }
.preporuke li strong { display: block; }

@media (max-width: 1000px) {
  .clanak-red { grid-template-columns: 1fr; }
  .toc { position: static; }
  .podstrana-red { grid-template-columns: 1fr; }
  .podstrana-ikona { display: none; }
  .resurs-karta.istaknuta { grid-column: auto; }
}
@media (max-width: 640px) {
  .oblast-red { grid-template-columns: 1fr 44px; }
  .oblast-red .oblast-traka { grid-column: 1 / -1; grid-row: 2; }
  .rezultat-glava { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Samoprocjena - faze, forma, akcije */
.sp-faze li a, #oblastiLista a { cursor: default; display: flex; align-items: center; gap: .5rem; }
.sp-faze li a i, #oblastiLista a i { --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; }
.sp-faze li.aktivna a, #oblastiLista a.aktivna { background: #e8f9f1; font-weight: 700; color: #0c7a5b; }
.sp-faze li.gotova a { color: #5f766c; text-decoration: line-through; }
.sp-forma p { margin-top: 0; }
.sp-saglasnost { display: flex !important; align-items: flex-start; gap: .7rem; font-weight: 400 !important; font-size: .88rem !important; color: #43584f; padding: .9rem 1rem; border-radius: 12px; background: #f6fbf8; border: 1px solid #e2ece7; }
.sp-saglasnost input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex-shrink: 0; accent-color: #0e8f6a; }
.sp-akcije { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem; margin-top: 2rem; }
.sp-akcija-karta {
  padding: 1.5rem; border-radius: 18px; cursor: pointer; border: 2px solid #e2ece7; background: linear-gradient(160deg, #fff, #f2fcf7);
  transition: border-color .25s, translate .25s, box-shadow .25s;
}
.sp-akcija-karta:hover { translate: 0 -3px; border-color: #5fd9ae; box-shadow: var(--sjena); }
.sp-akcija-karta.izabrana { border-color: #0e8f6a; box-shadow: 0 0 0 4px rgba(18,166,124,.15); }
.sp-akcija-karta > i { font-size: 2.4rem; margin-bottom: .6rem; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; animation: ikona-lebdi 4s ease-in-out infinite; }
.sp-akcija-karta h3 { margin-bottom: .35rem; }
.sp-akcija-karta p { font-size: .95rem; }
.sp-akcija-forma { margin-top: 1.5rem; padding: 1.5rem; border-radius: 18px; background: #f6fbf8; border: 1px solid #e2ece7; }
.sp-hvala { margin-top: 1.5rem; }
.nav .padajuci-meni a { display: flex; gap: .75rem; align-items: flex-start; }
.padajuci-meni a > i { font-size: 1.35rem; margin-top: .15rem; flex-shrink: 0; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; transition: scale .25s; }
.padajuci-meni a:hover > i { scale: 1.15; }
.hero .dugme-obrub i { margin-right: .35rem; font-size: 1.1em; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .8; }

/* =========== Ravnomjerni redovi: broj kolona prema broju kartica, bez "siročića" u zadnjem redu =========== */
.mreza-3 { grid-template-columns: repeat(3, 1fr); }
.koraci { grid-template-columns: repeat(4, 1fr); }

/* Resursi: 5 kartica (jedna istaknuta zauzima 2 mjesta) = 2 puna reda po 3; 4 kartice = 1 red */
.resursi-mreza { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; }
.resursi-mreza:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }

/* Kartice u člancima, po broju */
.kartice-2 { grid-template-columns: repeat(3, 1fr); }
.kartice-2:has(> :nth-child(2):last-child),
.kartice-2:has(> :nth-child(4):last-child),
.kartice-2:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, 1fr); }
.kartice-2:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
.kartice-2:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
.kartice-2:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }

.sp-akcije { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1100px) {
  .koraci { grid-template-columns: repeat(2, 1fr); }
  .resursi-mreza { grid-template-columns: repeat(2, 1fr); }
  .resursi-mreza .resurs-karta.istaknuta { grid-column: 1 / -1; }
  .resursi-mreza:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .kartice-2 { grid-template-columns: repeat(2, 1fr); }
  .kartice-2:has(> :nth-child(3):last-child),
  .kartice-2:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mreza-3 { grid-template-columns: 1fr; }
  .kartice-2:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
  .kartice-2:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .koraci, .resursi-mreza, .resursi-mreza:has(> :nth-child(4):last-child), .sp-akcije,
  .kartice-2, .kartice-2:has(> *) { grid-template-columns: 1fr; }
  .kartice-2 > *, .kartice-2:has(> :nth-child(5):last-child) > * { grid-column: auto; }
}

/* ---------- Panel: najčešće zablude ---------- */
.s-zablude { background: radial-gradient(circle at 90% 10%, #dcf7ec 0, transparent 45%), linear-gradient(180deg, #f6fdf9, #eefbf5); }
.graf-svi { justify-self: center; width: min(520px, 100%); }
.svi-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.svi-mreza span {
  position: relative; display: grid; justify-items: center; gap: .45rem; padding: 1.1rem .5rem; border-radius: 18px; background: #fff;
  box-shadow: 0 12px 28px -16px rgba(14,143,106,.5); font-size: .82rem; color: var(--siva);
}
.svi-mreza i { font-size: 2rem; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; }
.svi-mreza b { font-weight: 700; }
/* kvačica "podliježe" iskače redom; domaćinstvo dobija oznaku izuzetka */
.svi-mreza span::after {
  content: "\2713"; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: #fff; background: #16a34a; box-shadow: 0 6px 14px -4px rgba(22,163,74,.7);
  scale: 0;
}
.vidljivo .svi-mreza span::after { animation: kvacica-iskoci 6s ease-in-out calc(var(--k) * .35s) infinite; }
@keyframes kvacica-iskoci { 0% { scale: 0; } 6% { scale: 1.3; } 10%, 85% { scale: 1; } 92%, 100% { scale: 0; } }
.vidljivo .svi-mreza span:not(.izuzetak) { animation: kartica-ok 6s ease-in-out calc(var(--k) * .35s) infinite; }
@keyframes kartica-ok { 0%, 4% { box-shadow: 0 12px 28px -16px rgba(14,143,106,.5); } 8%, 85% { box-shadow: 0 0 0 3px #86efac, 0 12px 28px -16px rgba(14,143,106,.5); } 100% { box-shadow: 0 12px 28px -16px rgba(14,143,106,.5); } }
.svi-mreza .izuzetak { background: #f1f5f3; opacity: .75; }
.svi-mreza .izuzetak i { --fa-primary-color: #94a3a0; --fa-secondary-color: #cbd5d1; }
.svi-mreza .izuzetak::after { content: "izuzeto"; width: auto; height: auto; padding: .15rem .5rem; border-radius: 999px; font-size: .68rem; background: #94a3a0; box-shadow: none; }

/* Kartice koje se okreću: zabluda -> istina */
.mit-karta { perspective: 1200px; cursor: pointer; outline: none; }
.mit-unutra { display: grid; height: 100%; transition: transform .7s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.mit-karta:hover .mit-unutra, .mit-karta:focus-visible .mit-unutra, .mit-karta.okrenuta .mit-unutra { transform: rotateY(180deg); }
.mit-strana {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; padding: 1.75rem;
  display: flex; flex-direction: column; gap: .8rem; min-height: 250px;
}
.mit-prednja { background: #fff; border: 1px solid #e2ece7; box-shadow: var(--sjena); }
.mit-zadnja { transform: rotateY(180deg); color: #e0f2ea; background: radial-gradient(circle at 90% 10%, rgba(95,217,174,.35), transparent 55%), linear-gradient(135deg, #17302a, #1f5a4a); box-shadow: var(--sjena-jaka); }
.mit-strana p { margin: 0; font-size: 1.05rem; }
.mit-prednja p { font-weight: 700; color: #1c2a25; font-size: 1.15rem; }
.mit-oznaka { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mit-prednja .mit-oznaka { color: #be123c; --fa-primary-color: #fff; --fa-secondary-color: #e11d48; --fa-secondary-opacity: 1; }
.mit-zadnja .mit-oznaka { color: #86efac; --fa-primary-color: #fff; --fa-secondary-color: #16a34a; --fa-secondary-opacity: 1; }
.mit-oznaka i { font-size: 1.2rem; }
.mit-karta .mit-ikona { font-size: 2.4rem; --fa-primary-color: #0e8f6a; --fa-secondary-color: #5fd9ae; --fa-secondary-opacity: .7; }
.mit-prednja small { margin-top: auto; color: #5f766c; font-weight: 600; }
.mit-prednja small i { animation: rotacija 3s linear infinite; display: inline-block; }

/* ---------- Podnožje sa kolonama ---------- */
.podnozje { padding: 3.5rem 0 0; background: #17201d; color: #a9bdb4; }
.podnozje-mreza { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.podnozje h3 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.podnozje-mreza > div { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.podnozje a, .link-podnozje { color: #a9bdb4; text-decoration: none; }
.podnozje a:hover, .link-podnozje:hover { color: #7ee0c5; }
.podnozje p { margin: 0 0 .5rem; max-width: 340px; }
.logo-podnozje { color: #fff !important; margin-bottom: .5rem; }
.logo-podnozje img { height: 36px; }
.link-podnozje { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.podnozje-dno { padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
@media (max-width: 800px) { .podnozje-mreza { grid-template-columns: 1fr; } }

/* ---------- Baner za kolačiće ---------- */
.kolacici { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100; display: flex; justify-content: center; pointer-events: none; }
.kolacici-kutija {
  pointer-events: auto; width: min(760px, 100%); padding: 1.4rem 1.5rem; border-radius: 20px; background: #fff;
  box-shadow: 0 30px 70px -20px rgba(23,48,42,.55), inset 0 0 0 1px #e2ece7;
  translate: 0 30px; opacity: 0; transition: translate .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.kolacici.otvoren .kolacici-kutija { translate: 0 0; opacity: 1; }
.kolacici-glava { display: flex; gap: 1rem; align-items: flex-start; }
.kolacici-glava > i { font-size: 2.4rem; flex-shrink: 0; --fa-primary-color: #b45309; --fa-secondary-color: #fbbf24; --fa-secondary-opacity: .8; animation: ikona-lebdi 3s ease-in-out infinite; }
.kolacici-glava strong { font-size: 1.05rem; color: #1c2a25; }
.kolacici-glava p { margin: .3rem 0 0; font-size: .9rem; color: #43584f; }
.kolacici-kategorije { display: grid; gap: .6rem; margin: 1rem 0 0; }
.kk-red { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 12px; background: #f6fbf8; border: 1px solid #e2ece7; font-size: .88rem; color: #43584f; cursor: pointer; }
.kk-red input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex-shrink: 0; accent-color: #0e8f6a; }
.kk-red b { display: block; color: #1c2a25; }
.kolacici-dugmad { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }
.kolacici-dugmad .dugme { padding: .6rem 1.1rem; box-shadow: none; }
.dugme-sporedno { background: #fff; color: #1f2b27 !important; box-shadow: inset 0 0 0 1.5px #cfe3da !important; }
.dugme-sporedno:hover { background: #effcf6; }
@media (max-width: 560px) { .kolacici-dugmad .dugme { flex: 1 1 100%; } }

/* Saglasnosti u kontakt formi */
.forma-saglasnost { display: flex !important; align-items: flex-start; gap: .65rem; font-weight: 400 !important; font-size: .86rem !important; color: #43584f; }
.forma-saglasnost input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex-shrink: 0; accent-color: #0e8f6a; }
.forma-obavjestenje { margin: 0; font-size: .82rem; color: #5f766c; }
.kolacici[hidden], .kolacici [hidden], .greska[hidden] { display: none !important; }

/* Podstrane u punoj širini: članak koristi sav prostor pored bočnog menija */
.clanak { max-width: none; }
.clanak > section > p, .clanak > section > ul, .clanak > section > ol:not(.koraci-clanak) { max-width: 1100px; }
@media (min-width: 1400px) {
  .kartice-2:has(> :nth-child(4):last-child),
  .kartice-2:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
}
.dokument-link { display: block; text-decoration: none; color: var(--tekst); }
.dokument-link .strelica { margin-top: .75rem; }
.dokument-link:hover .strelica { gap: .7rem; }