/* MELINDA · biznis podrška
   Raspored: svetla papirna podloga, zeleni pojasevi za ključne sekcije,
   oker linije kao jedini ukras; naslov levo, sadržaj desno. */
:root {
  --zelena: #2C5049;
  --zelena-2: #244540;
  --mastilo: #23262A;
  --siva: #5C635F;
  --oker: #C9B48A;
  --oker-t: #8A6420;
  --menta: #83B8A7;
  --luk: #E3ECE6;
  --papir: #F5F3EE;
  --bela: #FFFFFF;
  --prsten: #DCD7CC;
  --greska: #A33A2B;

  --pismo: "Outfit", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-h1: clamp(2.35rem, 1.6rem + 3.2vw, 3.7rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --fs-h3: 1.2rem;
  --fs-tekst: 1.0625rem;
  --fs-mali: .9375rem;
  --fs-oznaka: .78rem;

  --sirina: 1160px;
  --zaglavlje: 112px;  /* visina celog zaglavlja; skripta je podesi tačno */
  --r: 14px;
  color-scheme: light;
}

/* ---------- Pismo ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 400; src: url(fontovi/outfit-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 400; src: url(fontovi/outfit-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 500; src: url(fontovi/outfit-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 500; src: url(fontovi/outfit-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 600; src: url(fontovi/outfit-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 600; src: url(fontovi/outfit-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 700; src: url(fontovi/outfit-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-display: swap; font-weight: 700; src: url(fontovi/outfit-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--papir); color: var(--mastilo);
  font-family: var(--pismo); font-size: var(--fs-tekst); line-height: 1.65; font-weight: 400;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bela); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--zelena); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--zelena-2); }
:focus-visible { outline: 3px solid var(--oker); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; text-wrap: balance; color: var(--mastilo); }
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); letter-spacing: -.005em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preskoci { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--zelena); color: var(--bela); padding: 10px 16px; border-radius: 8px; }
.preskoci:focus { top: 12px; }

.okvir {
  width: 100%; max-width: calc(var(--sirina) + 2 * 32px); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px), min(32px, 4vw));
  padding-right: max(16px, env(safe-area-inset-right, 0px), min(32px, 4vw));
}
.sekcija { padding-block: clamp(64px, 9vw, 112px); scroll-margin-top: calc(var(--zaglavlje) - 1px); }
@media (max-width: 1200px) { :root { --zaglavlje: 150px; } }
.sekcija.bela { background: var(--bela); }
.sekcija.zelena { background: var(--zelena); color: var(--bela); }
.zelena h1, .zelena h2, .zelena h3 { color: var(--bela); }
.zelena a { color: var(--bela); }

.oznaka {
  display: block; font-size: var(--fs-oznaka); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oker-t); line-height: 1.4;
}
.zelena .oznaka { color: var(--oker); }
.uvod { font-size: 1.15rem; color: var(--siva); max-width: 60ch; }
.zelena .uvod { color: #D9E6E0; }
.crta { width: 56px; height: 3px; background: var(--oker); border: 0; margin: 0; }

/* ---------- Dugmad ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--zelena);
  background: var(--zelena); color: var(--bela); font: 600 1rem/1.2 var(--pismo);
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.dugme:hover { background: var(--zelena-2); border-color: var(--zelena-2); color: var(--bela); }
.dugme:active { transform: translateY(1px); }
.dugme .i { transition: transform .2s; }
.dugme:hover .i-strelica { transform: translateX(3px); }
.dugme.obrub { background: transparent; color: var(--zelena); }
.dugme.obrub:hover { background: var(--zelena); color: var(--bela); }
.dugme.svetlo { background: var(--bela); border-color: var(--bela); color: var(--zelena); }
.dugme.svetlo:hover { background: var(--luk); border-color: var(--luk); color: var(--zelena-2); }
.dugme.malo { min-height: 42px; padding: 8px 18px; font-size: .95rem; }
.dugme[disabled] { opacity: .6; cursor: progress; }

/* ---------- Zaglavlje ---------- */
.traka { background: var(--zelena); color: #DCE8E2; font-size: .82rem; letter-spacing: .02em; }
.traka .okvir { display: flex; justify-content: space-between; gap: 16px; padding-block: 6px; }
.traka b { color: var(--bela); font-weight: 600; }
.traka .en { color: var(--menta); }
.traka a { color: #DCE8E2; text-decoration: none; }
.traka a:hover { color: var(--bela); }
.traka-kontakt { display: flex; gap: 20px; }
@media (max-width: 760px) { .traka-kontakt { display: none; } .traka .okvir { justify-content: center; } }

/* Zaglavlje je stalno vidljivo: traka sa sloganom + red sa logotipom i menijem.
   Na telefonu se meni ne skriva, već stoji u drugom redu i klizi vodoravno. */
.zaglavlje {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bela);
  border-bottom: 1px solid var(--prsten); box-shadow: 0 6px 18px -14px rgba(35, 38, 42, .35);
}
.glavni-red { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: block; flex: none; line-height: 0; }
.logo img { height: 34px; width: auto; }
.meni { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.meni a { padding: 8px 12px; border-radius: 8px; color: var(--mastilo); text-decoration: none; font-weight: 500; font-size: .98rem; white-space: nowrap; }
.meni a:hover { color: var(--zelena); background: var(--papir); }
.meni a[aria-current] { color: var(--zelena); box-shadow: inset 0 -2px 0 var(--oker); border-radius: 0; }
.meni a.meni-cta { margin-left: 10px; padding: 9px 18px; border-radius: 999px; background: var(--zelena); color: var(--bela); font-weight: 600; }
.meni a.meni-cta:hover { background: var(--zelena-2); color: var(--bela); }
.meni a.meni-cta[aria-current] { box-shadow: 0 0 0 3px var(--oker); border-radius: 999px; }
.portal-link { flex: none; }
@media (max-width: 1120px) { .meni a { padding-inline: 9px; font-size: .94rem; } }
.cta-mob { display: none; }
@media (max-width: 1200px) {
  .glavni-red { flex-wrap: wrap; column-gap: 10px; row-gap: 0; min-height: 0; padding-top: 10px; }
  .logo { margin-right: auto; }
  .logo img { height: 28px; }
  .cta-mob { display: inline-flex; }
  .meni a.meni-cta { display: none; }
  .meni {
    order: 3; width: 100%; margin: 10px 0 0; padding: 4px 0 8px; overflow-x: auto; scrollbar-width: none;
    gap: 4px; border-top: 1px solid var(--papir);
  }
  .meni::-webkit-scrollbar { display: none; }
  .meni a { font-size: .95rem; padding: 8px 10px; }
  .meni a:first-child { padding-left: 0; }
}
@media (max-width: 520px) {
  .logo img { height: 24px; }
  .dugme.portal-link { width: 42px; padding: 0; }
  .portal-link .t-dugo { display: none; }
  .meni { justify-content: space-between; gap: 0; }
  .meni a { font-size: .9rem; padding: 8px 6px; }
  .meni a:last-of-type { padding-right: 0; }
}
@media (min-width: 521px) { .portal-link .vh-mob { display: none; } }

/* ---------- Uvod (hero) ---------- */
.hero { background: var(--papir); padding-block: clamp(48px, 7vw, 96px); }
.hero .okvir { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-tekst { max-width: 760px; }
.hero-tekst { display: grid; gap: 22px; min-width: 0; }
.hero h1 { color: var(--zelena); }
.hero h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 500; color: var(--mastilo); }
.hero-tekst p { color: var(--siva); max-width: 58ch; }
.tacka { display: grid; gap: 6px; padding: 18px 0 2px 20px; border-left: 3px solid var(--oker); }
.tacka strong { font-weight: 600; color: var(--mastilo); font-size: 1.1rem; }
.hero-akcije { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

.pano {
  position: relative; background: var(--zelena); color: var(--bela); border-radius: 24px 24px 24px 120px;
  padding: clamp(28px, 4vw, 48px); display: grid; gap: 28px; overflow: hidden; min-width: 0;
}
.pano::after {
  content: ""; position: absolute; right: -150px; bottom: -190px; width: 340px; height: 250px;
  border: 2px solid rgba(201, 180, 138, .45); border-radius: 50%; pointer-events: none;
}
.pano-znak { width: 92px; color: var(--bela); }
.pano-znak path { stroke: currentColor; }
.pano-slogan { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: .4em; row-gap: 2px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1.25; }
.pano-slogan .m { text-align: right; color: #CFE0D8; font-weight: 400; font-size: .72em; align-self: baseline; }
.pano-slogan .k { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.pano-slogan .k2 { color: var(--menta); }
.pano-slogan .razmak { grid-column: 2; width: 56px; height: 2px; background: var(--oker); margin: 12px 0; }
.pano-cinjenice { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: #D9E6E0; position: relative; z-index: 1; }
.pano-cinjenice span { display: inline-flex; align-items: center; gap: 8px; }
.pano-cinjenice .i { color: var(--oker); }
@media (max-width: 860px) {
  .pano { border-radius: 20px 20px 20px 72px; }
}

/* ---------- Raspored: naslov levo, sadržaj desno ---------- */
.podela { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.podela > * { min-width: 0; }
.podela-naslov { display: grid; gap: 18px; position: sticky; top: calc(var(--zaglavlje) + 32px); }
@media (max-width: 860px) { .podela { grid-template-columns: minmax(0, 1fr); } .podela-naslov { position: static; } }
.zaglavlje-sekcije { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }

/* ---------- Harmonika ---------- */
.harmonika { border-top: 1px solid var(--prsten); }
.harmonika details { border-bottom: 1px solid var(--prsten); }
.harmonika summary {
  display: flex; align-items: center; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--mastilo);
}
.harmonika summary::-webkit-details-marker { display: none; }
.harmonika summary:hover { color: var(--zelena); }
.harmonika .ikona {
  width: 44px; height: 44px; border-radius: 50%; background: var(--luk); color: var(--zelena);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.harmonika .broj { font-size: 1.05rem; font-weight: 600; color: var(--oker-t); min-width: 2.2ch; font-variant-numeric: tabular-nums; }
.harmonika .naslov { flex: 1; min-width: 0; }
.harmonika .plus { margin-left: auto; width: 22px; height: 22px; color: var(--zelena); transition: transform .25s; flex: none; }
.harmonika details[open] .plus { transform: rotate(45deg); }
.harmonika .telo { padding: 0 4px 24px 64px; color: var(--siva); }
.harmonika.bez-ikone .telo { padding-left: 4px; }
.harmonika.brojevi .telo { padding-left: calc(2.2ch + 20px); }
@media (max-width: 560px) { .harmonika .telo { padding-left: 4px; } .harmonika summary { font-size: 1.05rem; } }
.zelena .harmonika, .zelena .harmonika details { border-color: rgba(255,255,255,.22); }
.zelena .harmonika summary { color: var(--bela); }
.zelena .harmonika summary:hover { color: var(--menta); }
.zelena .harmonika .telo { color: #D9E6E0; }
.zelena .harmonika .broj { color: var(--oker); }
.zelena .harmonika .plus { color: var(--oker); }

/* Prednosti: dve grupe jedna pored druge */
.dve-grupe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px); }
.dve-grupe > div { display: grid; gap: 24px; align-content: start; min-width: 0; }
.dve-grupe h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
@media (max-width: 860px) { .dve-grupe { grid-template-columns: minmax(0, 1fr); } }

/* Ko može */
.korisnici { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.korisnici li { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--bela); border: 1px solid var(--prsten); font-weight: 500; font-size: 1.08rem; line-height: 1.35; }
.korisnici .i { width: 30px; height: 30px; color: var(--zelena); }
@media (max-width: 900px) { .korisnici { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .korisnici { grid-template-columns: minmax(0, 1fr); } .korisnici li { grid-template-columns: auto 1fr; align-items: center; padding: 18px; } }

/* Usluge */
.usluge-stavke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.usluge-stavke li { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid var(--oker); }
.usluge-stavke strong { color: var(--mastilo); font-weight: 600; }
.usluge-stavke span { font-size: var(--fs-mali); }
@media (max-width: 640px) { .usluge-stavke { grid-template-columns: minmax(0, 1fr); } }
.po-meri {
  margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start;
  background: var(--luk); border-radius: var(--r); padding: clamp(24px, 4vw, 44px);
}
.po-meri > div { display: grid; gap: 12px; min-width: 0; }
.po-meri p { color: var(--siva); max-width: 70ch; }

/* Paketi */
.paketi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.paket {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 28px 24px 24px; background: var(--bela);
  border: 1px solid var(--prsten); border-radius: var(--r); position: relative; min-width: 0;
}
.paket::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; background: var(--oker); border-radius: 0 0 3px 3px; }
.paket h3 { font-size: 1.6rem; letter-spacing: .06em; color: var(--zelena); }
.cena { display: grid; gap: 2px; align-content: start; padding-top: 8px; }
.cena .od { font-size: .9rem; color: var(--siva); }
.cena b { font-size: 2.1rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--mastilo); }
.cena .pdv { font-size: .92rem; color: var(--siva); }
.po-satu { padding-top: 14px; border-top: 1px solid var(--prsten); font-weight: 500; color: var(--zelena); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .paketi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .paketi { grid-template-columns: minmax(0, 1fr); } }
.uslovi { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.uslovi li { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-mali); color: var(--siva); }
.uslovi li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oker); flex: none; transform: translateY(-2px); }
.uslovi b { font-size: .8rem; letter-spacing: .1em; font-weight: 600; color: var(--mastilo); }
@media (max-width: 760px) { .uslovi { grid-template-columns: minmax(0, 1fr); } }
.cta-red { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.cta-red p { font-size: 1.15rem; font-weight: 500; }

/* O meni */
.o-meni { max-width: 820px; }
/* Fotografija u uvodu: mala, desno od teksta, sa oker okvirom */
.portret { position: relative; margin: 0 14px 14px 0; width: clamp(220px, 21vw, 290px); max-width: 100%; }
.portret::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1.5px solid var(--oker); border-radius: 16px 16px 16px 72px; }
.portret img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px 16px 16px 72px; background: var(--luk); }
.o-meni-tekst { display: grid; gap: 18px; min-width: 0; }
.o-meni-tekst p { color: var(--siva); }
.o-meni-tekst p.vodeci { color: var(--mastilo); font-size: 1.25rem; line-height: 1.5; font-weight: 500; }
@media (max-width: 860px) {
  .hero .okvir { grid-template-columns: minmax(0, 1fr); }
  .portret { order: -1; width: 132px; margin: 0 10px 6px 0; }
  .portret::before { inset: 8px -8px -8px 8px; border-radius: 12px 12px 12px 44px; }
  .portret img { border-radius: 12px 12px 12px 44px; }
}
.kompetencije { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.kolona { display: grid; gap: 20px; align-content: start; min-width: 0; }
.kolona.kartica { background: var(--papir); border-radius: var(--r); padding: 28px; }
.kompetencije-harmonika .telo .kolona { color: var(--siva); }
.kolona h3 { display: flex; align-items: center; gap: 12px; }
.kolona h3 .i { color: var(--zelena); width: 26px; height: 26px; }
.kolona dl { margin: 0; display: grid; gap: 16px; }
.kolona dt { margin-bottom: 3px; }
.kolona dd { margin: 0; font-size: var(--fs-mali); color: var(--siva); line-height: 1.55; }
.kolona dd ul { display: grid; gap: 4px; }
@media (max-width: 960px) { .kompetencije { grid-template-columns: minmax(0, 1fr); } }

/* FAQ dodatak */
.jos-pitanja { margin-top: 32px; display: grid; gap: 14px; }
.jos-pitanja p { font-weight: 500; font-size: 1.1rem; }
.kontakt-linkovi { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.kontakt-linkovi a { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; }
.kontakt-linkovi a:hover { text-decoration: underline; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.kontakt > * { min-width: 0; }
.kontakt-ime { display: grid; gap: 16px; }
.kontakt-ime .ime { font-size: 1.35rem; font-weight: 500; color: #E4EEE9; }
.kontakt-ime .slogan { color: var(--menta); }
.kanali { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.22); }
.kanal { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 20px; border-bottom: 1px solid rgba(255,255,255,.22); }
.kanal .ikona { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--oker); display: inline-flex; align-items: center; justify-content: center; color: var(--oker); }
.kanal .vrednost { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight: 500; overflow-wrap: anywhere; text-decoration: none; }
.kanal .vrednost:hover { text-decoration: underline; }
.kopiraj { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--bela); border-radius: 999px; padding: 8px 14px; font: 500 .88rem var(--pismo); cursor: pointer; }
.kopiraj:hover { background: rgba(255,255,255,.1); }
.status-kopija { min-height: 1.5em; margin-top: 12px; font-size: .92rem; color: var(--menta); }
@media (max-width: 860px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 440px) { .kanal { grid-template-columns: 40px minmax(0, 1fr); } .kanal .ikona { width: 40px; height: 40px; } .kanal .kopiraj { grid-column: 2; justify-self: start; } }

/* ---------- Podnožje ---------- */
.podnozje { background: var(--mastilo); color: #C9CDCB; font-size: var(--fs-mali); padding-top: clamp(48px, 6vw, 72px); }
.podnozje a { color: #E6E9E7; text-decoration: none; }
.podnozje a:hover { color: var(--bela); text-decoration: underline; }
.podnozje-gl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 48px; }
.podnozje-gl > * { min-width: 0; }
.podnozje-brend { display: grid; gap: 18px; align-content: start; }
.podnozje-brend img { height: 32px; width: auto; }
.podnozje-brend .uloga { color: #E6E9E7; }
.podnozje-brend .sl { color: var(--menta); line-height: 1.5; }
.podnozje h3 { color: var(--bela); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.podnozje ul { display: grid; gap: 9px; }
.podnozje-dno { border-top: 1px solid #3A3E43; padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; }
@media (max-width: 860px) { .podnozje-gl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .podnozje-brend { grid-column: 1 / -1; } }
@media (max-width: 480px) { .podnozje-gl { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Upitnik ---------- */
.strana-uvod { background: var(--papir); padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px); }
.upitnik-raspored { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.upitnik-raspored > * { min-width: 0; }
.upitnik-strana { display: grid; gap: 22px; position: sticky; top: calc(var(--zaglavlje) + 28px); }
.upitnik-strana h1 { color: var(--zelena); font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem); }
.upitnik-strana p { color: var(--siva); }
.koraci { display: grid; gap: 0; counter-reset: k; }
.koraci li { counter-increment: k; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--prsten); font-weight: 500; }
.koraci li::before { content: counter(k); width: 36px; height: 36px; border-radius: 50%; background: var(--zelena); color: var(--bela); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .95rem; }
.mini-kontakt { display: grid; gap: 12px; padding: 20px; border-radius: var(--r); background: var(--bela); border: 1px solid var(--prsten); }
.mini-kontakt div { display: grid; gap: 1px; }
.mini-kontakt a { font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.mini-kontakt a:hover { text-decoration: underline; }
@media (max-width: 900px) { .upitnik-raspored { grid-template-columns: minmax(0, 1fr); } .upitnik-strana { position: static; } }

.forma-kartica { background: var(--bela); border: 1px solid var(--prsten); border-radius: 20px; padding: clamp(22px, 4vw, 48px); }
.forma-kartica > form, .panel { display: grid; gap: 36px; }
.obavezno-napomena { color: var(--siva); font-size: var(--fs-mali); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
legend { padding: 0; margin-bottom: 20px; display: flex; align-items: baseline; gap: 14px; font-size: 1.3rem; font-weight: 600; width: 100%; padding-bottom: 12px; border-bottom: 2px solid var(--oker); }
legend .br { color: var(--oker-t); font-variant-numeric: tabular-nums; }
.polje { display: grid; gap: 7px; }
.polje label, .pitanje { font-weight: 500; font-size: 1rem; color: var(--mastilo); line-height: 1.4; }
.zvezda { color: var(--greska); }
input[type=text], input[type=email], input[type=tel], input[type=password], textarea {
  width: 100%; font: 400 1rem/1.5 var(--pismo); color: var(--mastilo); background: var(--bela);
  border: 1.5px solid var(--prsten); border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 104px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--zelena); box-shadow: 0 0 0 3px rgba(44, 80, 73, .15); }
input[aria-invalid=true] { border-color: var(--greska); }
input:disabled { background: var(--papir); }
.greska { color: var(--greska); font-size: .9rem; font-weight: 500; }
.izbori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.izbori.jedna { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) { .izbori { grid-template-columns: minmax(0, 1fr); } }
.izbor { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1.5px solid var(--prsten); border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s; line-height: 1.4; }
.izbor:hover { border-color: var(--menta); }
.izbor:has(input:checked) { border-color: var(--zelena); background: #F1F6F3; }
.izbor input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--zelena); flex: none; }
.izbor span { display: grid; gap: 2px; }
.izbor small { color: var(--siva); font-size: .88rem; }
.drugo { margin-top: 2px; }
.saglasnost { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-mali); color: var(--siva); line-height: 1.55; }
.saglasnost input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--zelena); flex: none; }
.slanje { display: grid; gap: 14px; justify-items: start; padding-top: 8px; border-top: 1px solid var(--prsten); }
.slanje p { color: var(--siva); font-size: var(--fs-mali); }
.upozorenje { padding: 12px 16px; border-radius: 10px; background: #F7E9E5; color: var(--greska); font-weight: 500; }
.panel { gap: 18px; }
.panel:focus { outline: none; }
.panel pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--papir); border-radius: 10px; padding: 16px; font: 400 .9rem/1.55 var(--pismo); max-height: 360px; overflow: auto; margin: 0; }
.panel-dugmad { display: flex; flex-wrap: wrap; gap: 10px; }
.hvala { text-align: center; justify-items: center; padding-block: 24px; }
.hvala .znak { width: 72px; color: var(--zelena); }
.hvala .potpis { font-size: .8rem; letter-spacing: .16em; font-weight: 600; color: var(--oker-t); }

/* ---------- Portal ---------- */
.portal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.portal > * { min-width: 0; }
.portal-tekst { display: grid; gap: 22px; }
.portal-lista { display: grid; gap: 18px; margin-top: 8px; }
.portal-lista li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.portal-lista .ikona { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: var(--oker); }
.portal-lista strong { display: block; font-weight: 600; color: var(--bela); font-size: 1.08rem; }
.portal-lista span { color: #D9E6E0; font-size: var(--fs-mali); }
.prijava { background: var(--bela); color: var(--mastilo); border-radius: 20px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; }
.prijava h2 { font-size: 1.5rem; color: var(--zelena); }
.prijava .dugme { width: 100%; }
.prijava .pomoc { font-size: var(--fs-mali); color: var(--siva); }
.prijava .pomoc a { color: var(--zelena); font-weight: 500; }
.poruka { padding: 12px 16px; border-radius: 10px; background: var(--luk); color: var(--zelena-2); font-size: var(--fs-mali); }
@media (max-width: 860px) { .portal { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Politika ---------- */
.politika { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.politika > * { min-width: 0; }
.politika-strana { position: sticky; top: calc(var(--zaglavlje) + 28px); display: grid; gap: 18px; padding: 24px; background: var(--bela); border: 1px solid var(--prsten); border-radius: var(--r); }
.politika-strana h2 { font-size: 1.1rem; }
.politika-strana ol { display: grid; gap: 8px; font-size: var(--fs-mali); }
.politika-strana ol a { text-decoration: none; color: var(--mastilo); }
.politika-strana ol a:hover { color: var(--zelena); text-decoration: underline; }
.politika-clanak { display: grid; gap: 40px; max-width: 72ch; }
.politika-clanak section { display: grid; gap: 14px; scroll-margin-top: calc(var(--zaglavlje) + 20px); }
.politika-clanak h2 { font-size: 1.45rem; padding-bottom: 10px; border-bottom: 2px solid var(--oker); }
.politika-clanak p, .politika-clanak li { color: var(--siva); }
.politika-clanak ul { display: grid; gap: 8px; }
.politika-clanak ul li { position: relative; padding-left: 22px; }
.politika-clanak ul li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--oker); }
.politika-clanak strong { color: var(--mastilo); font-weight: 600; }
.rukovalac { padding: 18px 20px; background: var(--luk); border-radius: var(--r); color: var(--zelena-2); }
.politika-uvod { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(36px, 5vw, 56px); }
.politika-uvod h1 { color: var(--zelena); font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.politika-uvod p { color: var(--siva); font-size: 1.1rem; }
@media (max-width: 900px) { .politika { grid-template-columns: minmax(0, 1fr); } .politika-strana { position: static; } }
@media (max-width: 560px) { .pano::after { display: none; } }
@media (max-width: 380px) { .meni a { font-size: .85rem; padding-inline: 4px; } .logo img { height: 21px; } .glavni-red { column-gap: 8px; } }