/* e-Stipendije */
:root {
  --ink: #0B1F33;          /* tamnoplava: tekst, tamne kartice */
  --ink-2: #3B4A5A;        /* sekundarni tekst */
  --muted: #4A5868;        /* prigušeni tekst */
  --muted-dark: #C8D2DE;   /* prigušeni tekst na tamnoj podlozi */
  --ground: #F5F6F1;       /* pozadina stranice */
  --surface: #FFFFFF;
  --line: #E2E5DC;         /* okviri kartica */
  --line-input: #C9CEC2;   /* okviri polja */
  --soft: #EEF0EA;
  --blue: #1F4FD8; --blue-hover: #163BA6; --blue-soft: #E6EDFF; --blue-softer: #F3F6FF;
  --yellow: #FFC83D; --yellow-soft: #FFF6DA; --yellow-line: #F1D98A; --yellow-ink: #8A5A00;
  --green: #1E9E5A; --green-ink: #146B3E; --green-soft: #DDF3E6; --green-softer: #F0F9F3; --green-line: #BFE5CF;
  --red: #A3261E; --red-soft: #FDECEA;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body);
  font-size: 16px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--blue); } a:hover { color: var(--blue-hover); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
img, svg { flex: none; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; }
.gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; }
.between { justify-content: space-between; }
.muted { color: var(--muted); } .ink-2 { color: var(--ink-2); }
.small { font-size: 14px; } .xsmall { font-size: 13px; }
.bold { font-weight: 700; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { flex: 1; }

/* ---------- logo i zaglavlja ---------- */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-znak { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.logo-znak.mali { width: 40px; height: 40px; border-radius: 11px; }
.logo-znak.zuti { background: var(--yellow); }
.logo-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.logo-naziv { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.logo-opcina { font-size: 13px; color: var(--muted); }

.zaglavlje-javno { position: sticky; top: 0; z-index: 10; background: rgba(245,246,241,0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.zaglavlje-javno nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 14px; padding-bottom: 14px; }
.nav-linkovi { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; font-weight: 500; flex: 1 1 360px; }
.nav-linkovi a { color: var(--ink); text-decoration: none; padding: 10px 0; }
.nav-linkovi a:hover { color: var(--blue); }

.zaglavlje { background: var(--surface); border-bottom: 1px solid var(--line); }
.zaglavlje .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.meni { display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; font-weight: 600; align-items: center; }
.meni a, .meni button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.meni a:hover, .meni button:hover { background: var(--soft); color: var(--ink); }
.meni a[aria-current="page"] { background: var(--ink); color: #fff; }
.meni .odjava { color: var(--muted); }
.korisnik-cip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.avatar.velik { width: 44px; height: 44px; font-size: 15px; }

/* ---------- dugmad ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px;
  border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-plavo { background: var(--blue); color: #fff; } .btn-plavo:hover { background: var(--blue-hover); color: #fff; }
.btn-tamno { background: var(--ink); color: #fff; } .btn-tamno:hover { background: #142f4b; color: #fff; }
.btn-zuto { background: var(--yellow); color: var(--ink); font-weight: 800; } .btn-zuto:hover { background: #ffd462; color: var(--ink); }
.btn-zeleno { background: var(--green); color: #fff; font-weight: 800; font-size: 18px; min-height: 60px; border-radius: 18px; width: 100%; }
.btn-zeleno:hover { background: #188a4d; color: #fff; }
.btn-zeleno:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.btn-okvir { background: var(--surface); border: 1.5px solid var(--line-input); color: var(--ink); font-weight: 600; padding: 0 24px; }
.btn-okvir:hover { border-color: var(--ink); color: var(--ink); }
.btn-malo { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-blok { width: 100%; border-radius: 16px; }
.btn-kv { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; }
.btn-svijetlo { background: var(--ground); color: var(--ink); } .btn-svijetlo:hover { background: var(--soft); color: var(--ink); }
.link-dugme { background: none; border: 0; font: inherit; font-weight: 700; color: var(--blue); cursor: pointer; min-height: 44px; padding: 0 6px; }

/* ---------- kartice ---------- */
.kartica { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 36px; }
.kartica-24 { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.kartica-tamna { background: var(--ink); color: #fff; border-radius: 28px; padding: 36px; position: relative; overflow: hidden; }
.krug-ukras { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--blue); opacity: 0.5; }
.info { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: var(--blue-soft); font-size: 14px; line-height: 1.55; align-items: flex-start; }
.info.siva { background: var(--ground); }
.info.zuta { background: var(--yellow-soft); font-size: 15px; }
.info.zelena { background: var(--green-softer); }
.info.crvena { background: var(--red-soft); color: var(--red); font-weight: 600; }
.ikona-kv { width: 36px; height: 36px; border-radius: 10px; background: var(--ground); display: flex; align-items: center; justify-content: center; flex: none; }
.ikona-kv.tamna { background: rgba(255,255,255,0.08); }
.ikona-56 { width: 56px; height: 56px; border-radius: 16px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.oznaka { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-hover); white-space: nowrap; }
.oznaka.mala { font-size: 13px; padding: 6px 12px; }
.oznaka.zelena { background: var(--green-soft); color: var(--green-ink); }
.oznaka.zuta { background: var(--yellow); color: var(--ink); }
.oznaka.narandzasta { background: var(--yellow-soft); color: var(--yellow-ink); }
.oznaka.crvena { background: var(--red-soft); color: var(--red); }
.tacka { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.traka { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.traka > span { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.traka.svijetla { background: rgba(255,255,255,0.12); height: 10px; } .traka.svijetla > span { background: var(--yellow); }
.poruka { padding: 14px 18px; border-radius: 16px; margin-bottom: 20px; font-weight: 600; background: var(--blue-soft); }
.poruka.success { background: var(--green-soft); color: var(--green-ink); }
.poruka.error { background: var(--red-soft); color: var(--red); }
.poruka.warning { background: var(--yellow-soft); color: var(--yellow-ink); }

/* ---------- forme ---------- */
.polje { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.polje input:not([type=checkbox]):not([type=radio]), .polje select, .polje textarea {
  min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line-input); background: var(--surface);
  font: inherit; font-weight: 500; font-size: 16px; color: var(--ink); width: 100%; }
.polje select { padding: 0 14px; }
.polje input:focus, .polje select:focus, .polje textarea:focus { outline: 3px solid rgba(31,79,216,0.35); outline-offset: 1px; border-color: var(--blue); }
.polje.ima-gresku input, .polje.ima-gresku select { border-color: var(--red); }
.polje .pomoc { font-weight: 400; color: var(--muted); font-size: 13px; }
.polje .greska, .greska { color: var(--red); font-size: 14px; font-weight: 600; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--red); font-size: 14px; font-weight: 600; }
.mono { letter-spacing: 0.04em; }
.mreza-polja { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mreza-polja.uza { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.puna-sirina { grid-column: 1 / -1; }
.lozinka-omot { position: relative; display: flex; }
.lozinka-omot input { padding-right: 92px !important; }
.lozinka-omot button { position: absolute; right: 6px; top: 6px; height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--ground); font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; }
.jacina { display: flex; gap: 6px; padding-top: 4px; } .jacina span { flex: 1; height: 5px; border-radius: 99px; background: var(--line); }
.jacina span.on { background: var(--green); } .jacina.slaba span.on { background: #D9822B; }
.jacina-tekst { font-weight: 500; color: var(--muted); font-size: 13px; } .jacina-tekst.jaka { color: var(--green-ink); }
.potvrdni { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); cursor: pointer; font-weight: 400; }
.potvrdni input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.potvrdni.okvir { padding: 16px; border-radius: 16px; border: 1.5px solid var(--line); color: var(--ink); }
.potvrdni.okvir.mali { padding: 14px 16px; border-radius: 14px; }
.potvrdni.okvir:has(input:checked) { border-color: var(--blue); background: var(--blue-softer); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; font-size: 16px; padding: 0 0 10px; }
legend.manja { font-weight: 600; font-size: 14px; }

/* pilule (radio kao dugme) */
.pilule { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { position: relative; }
.pilula input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.pilula span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; }
.pilula input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.pilula input:focus-visible + span { outline: 3px solid rgba(31,79,216,0.35); outline-offset: 2px; }

/* kartice-izbori (kategorija) */
.izbor { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border-radius: 20px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.izbor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.izbor .radio { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid #A7AFA0; }
.izbor .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: transparent; }
.izbor:has(input:checked) { border-color: var(--blue); background: var(--blue-softer); }
.izbor:has(input:checked) .radio { border-color: var(--blue); }
.izbor:has(input:checked) .radio::after { background: var(--blue); }
.izbor:has(input:focus-visible) { outline: 3px solid rgba(31,79,216,0.35); outline-offset: 2px; }
.izbor-tekst { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.izbor-naslov { font-weight: 700; font-size: 18px; }
.izbor-opis { color: var(--muted); font-size: 15px; line-height: 1.5; }
.izbor-iznos { font-family: var(--font-display); font-weight: 800; font-size: 22px; white-space: nowrap; }

/* ---------- prijava po koracima ---------- */
.koraci-omot { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding-top: 40px; padding-bottom: 80px; }
.koraci-aside { flex: 1 1 260px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.koraci-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.korak-broj { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stepper a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.stepper a:hover { background: rgba(255,255,255,0.6); color: var(--ink); }
.stepper a[aria-current="step"] { background: var(--surface); box-shadow: 0 4px 14px rgba(11,31,51,0.08); }
.krug { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--line); color: var(--muted); }
.krug.gotov { background: var(--green); color: #fff; }
.krug.aktivan { background: var(--blue); color: #fff; }
.stepper-naziv { font-weight: 700; font-size: 15px; }
.stepper-pod { font-size: 13px; color: var(--muted); }
.rok-kutija { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.korak-naslov { font-size: 34px; }
.navigacija { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* dokumenti */
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; border-radius: 20px; border: 2px dashed #A9B6E8; background: var(--blue-softer); text-align: center; }
.drop.preko { background: var(--blue-soft); border-color: var(--blue); }
.dok-red { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); }
.dok-red.gotov { background: var(--green-softer); border-color: var(--green-line); }
.dok-red.greska-red { border-color: var(--red); }
.dok-ikona { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ground); }
.dok-red.gotov .dok-ikona { background: var(--green); }
.dok-tekst { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.dok-red .fajl-dugme { position: relative; overflow: hidden; }
.dok-red .fajl-dugme input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-prilozi { background: var(--blue); color: #fff; } .btn-prilozi:hover { background: var(--blue-hover); color: #fff; }
.btn-zamijeni { background: var(--surface); border: 1.5px solid var(--green-line); color: var(--green-ink); }

/* pregled */
.sazetak { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sazetak > div { padding: 18px; border-radius: 18px; background: var(--ground); display: flex; flex-direction: column; gap: 6px; }
.sazetak-oznaka { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sazetak-vrijednost { font-weight: 700; font-size: 17px; }

/* vremenska linija */
.linija { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linija li { display: flex; gap: 18px; }
.linija .kol { display: flex; flex-direction: column; align-items: center; flex: none; }
.linija .tocka { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: var(--soft); color: var(--muted); }
.linija .tocka.gotov { background: var(--green); color: #fff; }
.linija .tocka.tekuci { background: var(--blue); color: #fff; box-shadow: 0 0 0 6px var(--blue-soft); }
.linija .crta { width: 3px; flex: 1; min-height: 28px; border-radius: 3px; background: var(--line); }
.linija .crta.gotov { background: var(--green); }
.linija .sadrzaj-faze { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 28px; }
.linija .naslov-faze { font-weight: 700; font-size: 17px; color: var(--muted); }
.linija .naslov-faze.aktivno { color: var(--ink); }
.faze-trake { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.faze-trake li { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.faze-trake li > span:first-child { height: 6px; border-radius: 99px; background: var(--line); }
.faze-trake li.gotov > span:first-child { background: var(--green); }
.faze-trake li.gotov, .faze-trake li.tekuci { font-weight: 700; color: var(--ink); }
.faze-trake li.tekuci { color: var(--blue); } .faze-trake li.tekuci > span:first-child { background: var(--blue); }

/* ---------- naslovna ---------- */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 88px; }
.hero-tekst { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.03em; }
.hero h1 mark { background: var(--yellow); color: inherit; padding: 0 10px; border-radius: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-uvod { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 580px; }
.znacka-konkurs { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.znacka-konkurs .tacka { width: 10px; height: 10px; background: var(--green); box-shadow: 0 0 0 4px rgba(30,158,90,0.18); }
.znacka-konkurs.zatvoren .tacka { background: #A7AFA0; box-shadow: none; }
.cinjenice { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 8px; }
.cinjenice .razdjel { width: 1px; background: #D5D9CE; }
.cinjenica-oznaka { font-size: 13px; color: var(--muted); font-weight: 500; }
.cinjenica-vrijednost { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.hero-mock { flex: 1 1 400px; min-width: 0; position: relative; display: flex; justify-content: center; }
.hero-mock .pozadina { position: absolute; inset: 24px -8px -16px 40px; border-radius: 32px; background: var(--blue); }
.hero-mock .karta { position: relative; width: 100%; max-width: 440px; background: var(--surface); border-radius: 28px; padding: 28px; box-shadow: 0 30px 60px -20px rgba(11,31,51,0.35); display: flex; flex-direction: column; gap: 22px; }
.kvacica { width: 26px; height: 26px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
.kvacica.prazna { background: none; border: 2.5px solid var(--blue); }
.sekcija { padding-top: 96px; padding-bottom: 96px; }
.sekcija h2.veliki { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; }
.sekcija h2.srednji { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.iznosi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.iznos-karta { border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 20px; position: relative; background: var(--surface); border: 1px solid var(--line); }
.iznos-karta.tamna { background: var(--ink); color: #fff; border: 0; }
.iznos-karta h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; }
.iznos-karta .ribbon { position: absolute; top: 28px; right: 28px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.iznos-red { display: flex; align-items: baseline; gap: 8px; padding-top: 18px; border-top: 1px dashed #D5D9CE; margin-top: auto; }
.iznos-karta.tamna .iznos-red { border-top-color: rgba(255,255,255,0.2); }
.iznos-broj { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; }
.iznos-karta .btn-kartica { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px; text-decoration: none; font-weight: 700; background: var(--ground); color: var(--ink); }
.iznos-karta.tamna .btn-kartica { background: var(--yellow); color: var(--ink); }
.zanimanja { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.zanimanja li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.zanimanja .rb { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: 18px; width: 28px; }
.tamna-sekcija { background: var(--ink); color: #fff; }
.proces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.proces li { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.proces .rb { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--yellow); }
.proces h3 { font-size: 20px; font-weight: 700; }
.proces p { color: var(--muted-dark); line-height: 1.6; }
.uslovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.uslovi-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.uslovi-lista li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.dok-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dok-lista li { display: flex; gap: 14px; align-items: flex-start; }
.rokovi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 2px solid var(--ink); }
.rokovi li { padding: 20px 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.rokovi .tck { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); margin-top: -28px; box-shadow: 0 0 0 5px var(--ground); }
.rokovi .kada { font-size: 14px; color: var(--muted); padding-top: 10px; }
.rokovi .sta { font-weight: 700; font-size: 17px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.faq summary { min-height: 64px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 22px 20px; color: var(--ink-2); line-height: 1.65; }
.kontakt-traka { background: var(--blue); color: #fff; border-radius: 32px; padding: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.kontakt-traka a.bijelo { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 700; }
.kontakt-traka a.providno { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 16px; background: rgba(255,255,255,0.14); color: #fff; text-decoration: none; font-weight: 700; }
.podnozje { border-top: 1px solid var(--line); }
.podnozje .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.podnozje a { color: var(--muted); }

/* ---------- registracija / prijava ---------- */
.pristup { display: flex; flex-wrap: wrap; min-height: 100vh; }
.pristup-aside { flex: 1 1 420px; background: var(--ink); color: #fff; padding: 40px 48px; display: flex; flex-direction: column; gap: 48px; }
.pristup-aside .logo { color: #fff; } .pristup-aside .logo-opcina { color: var(--muted-dark); }
.pristup-aside h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.02em; }
.pristup-aside .prednosti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.pristup-aside .prednosti li { display: flex; gap: 14px; align-items: flex-start; }
.pristup-main { flex: 999 1 560px; min-width: 0; display: flex; justify-content: center; padding: 48px 24px; }
.pristup-forma { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 28px; }
.tabovi { display: flex; padding: 6px; background: #E9ECE3; border-radius: 999px; gap: 4px; }
.tabovi a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--muted); }
.tabovi a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(11,31,51,0.12); }
.centrirano { display: flex; align-items: center; justify-content: center; padding: 56px 24px; flex: 1; }
.kartica-centar { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 44px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.veliki-krug { width: 88px; height: 88px; border-radius: 50%; background: var(--green-soft); display: flex; align-items: center; justify-content: center; }
.veliki-kv { width: 88px; height: 88px; border-radius: 24px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
  .kartica, .kartica-tamna { padding: 24px; border-radius: 22px; }
  .pristup-aside { padding: 32px 24px; gap: 32px; }
  .kontakt-traka { padding: 32px 24px; }
  .kartica-centar { padding: 32px 24px; }
  .faze-trake { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .btn { white-space: normal; text-align: center; }
}

/* ---------- štampa (Prijava br. 1 / potvrda) ---------- */
@media print {
  .ne-stampaj, .zaglavlje, .podnozje { display: none !important; }
  body { background: #fff; }
  .kartica { border: 0; padding: 0; }
}

[hidden] { display: none !important; }
.dok-red.dopuna-red { background: var(--yellow-soft); border-color: var(--yellow-line); }
.dok-red.dopuna-red .dok-ikona { background: #FFF1C7; }

/* ---------- navigacija na mobitelu ---------- */
.meni-dugme { display: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.meni-dugme .ikona-zatvori { display: none; }
.meni-otvoren .meni-dugme .ikona-otvori { display: none; }
.meni-otvoren .meni-dugme .ikona-zatvori { display: block; }
.nav-panel { display: contents; }
.korak-naziv-mob { display: none; }

@media (max-width: 900px) {
  .meni-dugme { display: inline-flex; }
  /* javna naslovna */
  .zaglavlje-javno nav { flex-wrap: wrap; gap: 0; }
  .zaglavlje-javno .nav-panel { display: none; width: 100%; flex-direction: column; gap: 16px; padding: 12px 0 8px; }
  .zaglavlje-javno.meni-otvoren .nav-panel { display: flex; }
  .zaglavlje-javno .nav-linkovi { flex-direction: column; gap: 0; flex: none; }
  .zaglavlje-javno .nav-linkovi a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .zaglavlje-javno .nav-akcije > * { flex: 1; }
  /* korisnički meni */
  .zaglavlje .wrap { flex-wrap: wrap; }
  .zaglavlje .meni { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0 4px; }
  .zaglavlje.meni-otvoren .meni { display: flex; }
  .zaglavlje .meni a, .zaglavlje .meni button { width: 100%; min-height: 50px; font-size: 17px; border-radius: 14px; }
  .zaglavlje .meni form { width: 100%; }
  /* koraci prijave: kompaktan red brojeva umjesto pune liste */
  .koraci-omot { padding-top: 24px; gap: 20px; }
  .koraci-aside { flex-basis: 100%; gap: 14px; }
  .korak-naziv-mob { display: inline; }
  .korak-broj { font-size: 22px; }
  .stepper { flex-direction: row; gap: 8px; }
  .stepper li { flex: 1; }
  .stepper a { justify-content: center; padding: 8px 0; border-radius: 14px; }
  .stepper-tekst { display: none; }
  .rok-kutija { display: none; }
}
@media (max-width: 640px) {
  .cinjenice { flex-direction: column; gap: 14px; }
  .cinjenice .razdjel { display: none; }
}

/* registracija / prijava na mobitelu: forma prva, tamni blok s prednostima ispod */
.pristup-logo-mob { display: none; }
@media (max-width: 900px) {
  .pristup { flex-direction: column; min-height: 0; }
  .pristup-main { order: 1; flex: none; padding: 20px 16px 32px; }
  .pristup-forma { gap: 20px; }
  .pristup-logo-mob { display: flex; }
  .pristup-aside { order: 2; flex: none; padding: 32px 24px; gap: 28px; }
  .pristup-aside > .logo { display: none; }
  .pristup-aside h1 { font-size: 30px; }
}

/* više prostora na mobitelu ("da dišu") */
@media (max-width: 900px) {
  .pristup-main { padding: 28px 20px 64px; }
  .pristup-forma { gap: 28px; }
  .pristup-logo-mob { margin-bottom: 12px; }
  .pristup-forma form { gap: 22px; }
  .pristup-aside { padding: 48px 24px 56px; }
  .koraci-omot { padding-top: 36px; }
}

/* prijava/registracija na mobitelu: zaglavlje s linijom, isto kao na naslovnoj */
@media (max-width: 900px) {
  .pristup-main { padding-top: 0; }
  .pristup-logo-mob { position: sticky; top: 0; z-index: 10; margin: 0 -20px 4px; padding: 14px 20px;
    background: rgba(245,246,241,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
}