/* ---------- Fontovi (čuvaju se u aplikaciji, SIL Open Font License) ---------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fontovi/bricolage-grotesque-latin-ext-wght-normal-b1ae2c312cfba5c6e511e17d9f7aac24.woff2") format("woff2-variations");
  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: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fontovi/bricolage-grotesque-latin-wght-normal-ada540c0e24aeb0c4a2fd52d68fdec8e.woff2") format("woff2-variations");
  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: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fontovi/manrope-latin-ext-wght-normal-6d36d5bdedfabb5bbee2ab6b6ded3416.woff2") format("woff2-variations");
  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: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fontovi/manrope-latin-wght-normal-938c6e8019b69313372c47dbb7a7c930.woff2") format("woff2-variations");
  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; }

:root {
  color-scheme: light;
  --polje: #fff; --hover: #f3efe9; --zaglavlje-tabele: #fbf9f6; --izabrano: #fff6f1; --siva-svetla: #f0ece6;
  --senka: rgba(0,0,0,.08); --tekst-sekundarni: #52514e; --upozorenje-tekst: #6b5300; --upozorenje-ivica: #f3e2a6;
  --greska-ivica: #f5c6c2; --dobro-tekst: #006300; --plava-hover: #34353d; --info-tekst: #a8401a; --poruka-tekst: #0d652d;
  --pozadina: #faf8f5; --povrsina: #ffffff; --tekst: #1c1d22; --sivo: #64615c; --linija: #ebe6df;
  --status-plava: #1a73e8; --status-plava-svetla: #e8f0fe;
  --brend: #1c1d22; --na-brendu: #ffffff; --brend-svetla: #ffeadf; --akcenat: #ff6a3d; --akcenat-tekst: #e2531f; --akcenat-svetla: #ffeadf; --mastilo: #1c1d22;
  --plava: var(--brend); --plava-svetla: var(--brend-svetla); --zelena: #1e8e3e; --zelena-svetla: #e6f4ea;
  --crvena: #c5221f; --crvena-svetla: #fce8e6; --zuta: #9a7b00; --zuta-svetla: #fef7e0; --narandzasta: #c26100;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--pozadina);
  color: var(--tekst); font-size: 15px; line-height: 1.5; font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .logo, .broj, .kpi .vrednost, .naslovni { font-family: "Bricolage Grotesque", "Manrope", sans-serif; letter-spacing: -.01em; }
td, .broj, .kpi .vrednost, .dno-izbor .ukupno { font-variant-numeric: tabular-nums; }
a { color: var(--akcenat-tekst); text-decoration: none; }
a:hover { text-decoration: underline; }
header { background: var(--povrsina); border-bottom: 1px solid var(--linija); }
header .unutra { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; height: 60px; }
header .logo { font-weight: 700; font-size: 18px; color: var(--tekst); display: flex; align-items: center; gap: 8px; }
header nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
header nav a { padding: 8px 12px; border-radius: 8px; color: var(--tekst); white-space: nowrap; }
header nav a.aktivno, header nav a:hover { background: var(--plava-svetla); color: var(--plava); text-decoration: none; }
header .ko { color: var(--sivo); font-size: 13px; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 28px; margin: 0 0 4px; font-weight: 700; }
.podnaslov { color: var(--sivo); margin: 0 0 20px; }
.kartica { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.kartica h2 { font-size: 17px; margin: 0 0 12px; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.broj { font-size: 26px; font-weight: 700; }
.mala { color: var(--sivo); font-size: 13px; }
label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid var(--linija);
  border-radius: 8px; font-size: 15px; background: var(--polje); }
input:focus { outline: 2px solid var(--plava-svetla); border-color: var(--plava); }
.dugme { display: inline-block; padding: 10px 18px; border-radius: 10px; font-family: inherit; border: 1px solid var(--linija); background: var(--polje);
  color: var(--tekst); font-size: 15px; cursor: pointer; font-weight: 500; }
.dugme:hover { background: var(--hover); text-decoration: none; }
.dugme.glavno { background: var(--plava); color: var(--na-brendu); border-color: var(--plava); font-weight: 600; }
.dugme.glavno:hover { background: var(--plava-hover); }
.dugme.opasno { background: var(--crvena); color: #fff; border-color: var(--crvena); }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.red { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.poruka, .greska, .info { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.poruka { background: var(--zelena-svetla); color: var(--poruka-tekst); }
.greska { background: var(--crvena-svetla); color: var(--crvena); }
.info { background: var(--plava-svetla); color: var(--info-tekst); }
table { width: 100%; border-collapse: collapse; background: var(--povrsina); }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--sivo); padding: 10px 12px;
  border-bottom: 1px solid var(--linija); background: var(--zaglavlje-tabele); }
td { padding: 10px 12px; border-bottom: 1px solid var(--linija); vertical-align: top; }
tr:hover td { background: var(--zaglavlje-tabele); }
.tabela { border: 1px solid var(--linija); border-radius: 12px; overflow-x: auto; }
.oznaka { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.oznaka.zelena { background: var(--zelena-svetla); color: var(--zelena); }
.oznaka.crvena { background: var(--crvena-svetla); color: var(--crvena); }
.oznaka.zuta { background: var(--zuta-svetla); color: var(--zuta); }
.oznaka.plava { background: var(--status-plava-svetla); color: var(--status-plava); }
.oznaka.siva { background: var(--siva-svetla); color: var(--sivo); }
.napomena { color: var(--sivo); font-size: 13px; margin-top: 2px; }
.desno { text-align: right; }
.prijava { max-width: 420px; margin: 60px auto; }
.prijava .logo-veliki { text-align: center; font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.koraci { list-style: none; padding: 0; margin: 0; }
.koraci li { padding: 10px 0; border-bottom: 1px solid var(--linija); display: flex; gap: 10px; align-items: baseline; }
.koraci li:last-child { border-bottom: 0; }
details summary { cursor: pointer; color: var(--plava); }
@media (max-width: 700px) { header .ko span { display: none; } main { padding: 16px; } }
.graf-tip { position: fixed; display: none; z-index: 10; background: var(--polje); border: 1px solid var(--linija); border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 4px 16px var(--senka); font-size: 13px; pointer-events: none; max-width: 280px; }
.graf-tip-naslov { color: var(--sivo); margin-bottom: 4px; }
.graf-tip-red { display: flex; align-items: center; gap: 6px; }
.graf-kljuc { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.graf-kljuc.linija { height: 2px; width: 14px; border-radius: 1px; }
.graf-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--tekst-sekundarni); margin-top: 6px; }
.graf-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.kpi-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi .vrednost { font-size: 24px; font-weight: 650; }
.kpi .delta { font-size: 13px; font-weight: 600; }
.kpi .delta.dobro { color: var(--dobro-tekst); }
.kpi .delta.lose { color: var(--crvena); }
.dve-kolone { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
@media (max-width: 500px) { .dve-kolone { grid-template-columns: 1fr; } }

/* ---------- Raspored aplikacije: bočni meni ---------- */
header.okvir { background: none; border: 0; }
.meni { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--povrsina); border-right: 1px solid var(--linija);
  display: flex; flex-direction: column; padding: 16px 12px; z-index: 20; overflow-y: auto; }
.meni .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--tekst); padding: 4px 8px 16px; }
.meni nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.meni nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--tekst); font-size: 14px; }
.meni nav a:hover { background: var(--hover); text-decoration: none; }
.meni nav a.aktivno { background: var(--akcenat-svetla); color: var(--tekst); font-weight: 700; box-shadow: inset 3px 0 0 var(--akcenat); }
.meni nav svg, .hamburger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.meni-grupa { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sivo); padding: 16px 10px 6px; font-weight: 600; }
.znacka { margin-left: auto; background: var(--akcenat-tekst); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.znacka.upozorenje { margin-left: 4px; background: var(--narandzasta); }
.meni-dno { border-top: 1px solid var(--linija); padding: 12px 8px 0; margin-top: 12px; }
.meni-prodavnica { font-weight: 600; font-size: 14px; }
.okvir ~ main, .okvir + main { margin-left: 240px; max-width: none; padding: 28px 32px 60px; }
.okvir ~ main > * { max-width: 1180px; }
.traka { display: none; }
.meni-prekidac { display: none; }
.meni-pozadina { display: none; }
@media (max-width: 900px) {
  .meni { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(0,0,0,.12); }
  .meni-prekidac:checked ~ .meni { transform: none; }
  .meni-prekidac:checked ~ .meni-pozadina { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 15; }
  .traka { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--povrsina);
    border-bottom: 1px solid var(--linija); position: sticky; top: 0; z-index: 10; }
  .traka .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tekst); }
  .hamburger { cursor: pointer; display: flex; padding: 6px; margin-left: -6px; border-radius: 8px; color: var(--tekst); }
  .okvir ~ main, .okvir + main { margin-left: 0; padding: 20px 16px 60px; }
}

/* Zaglavlje stranice: naslov levo, akcije desno */
.naslov-strane { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.naslov-strane h1 { margin-bottom: 2px; }
.naslov-strane .podnaslov { margin: 0; }

/* Koraci slanja */
.koraci-slanja { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; font-size: 13px; }
.koraci-slanja span { padding: 6px 12px; border-radius: 999px; background: var(--siva-svetla); color: var(--sivo); }
.koraci-slanja span.trenutni { background: var(--plava); color: var(--na-brendu); font-weight: 600; }

/* Početna: posao u 3 koraka */
.koraci-posla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.korak-posla { display: block; color: inherit; background: var(--povrsina); border: 1px solid var(--linija); border-radius: 12px; padding: 18px; }
.korak-posla:hover { border-color: var(--plava); text-decoration: none; box-shadow: 0 2px 10px rgba(26,115,232,.08); }
.korak-posla .br { width: 28px; height: 28px; border-radius: 50%; background: var(--plava-svetla); color: var(--plava); font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.podmeni { display: flex; gap: 4px; border-bottom: 1px solid var(--linija); margin-bottom: 20px; overflow-x: auto; }
.podmeni a { padding: 10px 14px; color: var(--sivo); border-bottom: 2px solid transparent; white-space: nowrap; }
.podmeni a:hover { color: var(--tekst); text-decoration: none; }
.podmeni a.aktivno { color: var(--plava); border-bottom-color: var(--plava); font-weight: 600; }
@media (max-width: 600px) {
  .mreza, .kpi-mreza { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mreza .kartica, .kpi-mreza .kartica { padding: 14px; margin-bottom: 0; }
  .broj, .kpi .vrednost { font-size: 20px; }
  h1 { font-size: 21px; }
}
/* Datumi, iznosi i brojevi se ne lome u dva reda */
td.desno, td.bez-preloma { white-space: nowrap; }
.prazno { text-align: center; padding: 40px 20px; }
.prazno h2 { margin-top: 8px; }
.traka-upozorenja { background: var(--zuta-svetla); color: var(--upozorenje-tekst); border: 1px solid var(--upozorenje-ivica); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.traka-upozorenja.ozbiljno { background: var(--crvena-svetla); color: var(--crvena); border-color: var(--greska-ivica); }
.okvir .baner { margin-left: 240px; padding: 16px 32px 0; }
@media (max-width: 900px) { .okvir .baner { margin-left: 0; padding: 12px 16px 0; } }

/* Traka učitavanja */
.ucitavanje { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--plava); z-index: 100; opacity: 0;
  transition: width 8s cubic-bezier(.1,.7,.2,1), opacity .2s; }
.ucitavanje.aktivno { width: 92%; opacity: 1; }

/* Traka sa izborom na dnu ekrana */
.dno-izbor { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; background: var(--povrsina); border: 1px solid var(--linija);
  border-radius: 12px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 -4px 20px var(--senka); }
.dno-izbor .ukupno { font-weight: 600; }
.dno-izbor .ukupno .mala { font-weight: 400; }
.dno-izbor.prazno-izbor .akcija-izbora { opacity: .45; pointer-events: none; }
tr:has(input[type=checkbox]:checked) td { background: var(--izabrano); }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--plava); cursor: pointer; }
td:first-child { width: 36px; }
form[data-izbor] tbody tr { cursor: pointer; }

/* ---------- Tamni režim: prati podešavanje sistema, a može i ručno (dugme u meniju) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetla"]) {
    color-scheme: dark;
    --pozadina: #121214; --povrsina: #1b1c20; --tekst: #f3f1ed; --sivo: #a19d97; --linija: #2c2d33;
    --status-plava: #5598e7; --status-plava-svetla: #1c2b40;
    --brend: #ff7a50; --na-brendu: #1c1d22; --brend-svetla: #3a2219; --akcenat: #ff7a50; --akcenat-tekst: #ff9a76; --akcenat-svetla: #3a2219; --mastilo: #0d0d10;
    --plava: var(--brend); --plava-svetla: var(--brend-svetla); --zelena: #3cb371; --zelena-svetla: #16301f;
    --crvena: #ef6b67; --crvena-svetla: #3a1c1b; --zuta: #e0b84a; --zuta-svetla: #352c12; --narandzasta: #f08a3c;
    --polje: #222220; --hover: #23242a; --zaglavlje-tabele: #1e1f24; --izabrano: #2b1f19; --siva-svetla: #23242a;
    --senka: rgba(0,0,0,.4); --tekst-sekundarni: #c3c2b7; --upozorenje-tekst: #f0d58a; --upozorenje-ivica: #4a3d16;
    --greska-ivica: #5a2725; --dobro-tekst: #0ca30c; --plava-hover: #ff9670; --info-tekst: #ffb898; --poruka-tekst: #7fd69a;
  }
}
:root[data-tema="tamna"] {
  color-scheme: dark;
  --pozadina: #121214; --povrsina: #1b1c20; --tekst: #f3f1ed; --sivo: #a19d97; --linija: #2c2d33;
  --status-plava: #5598e7; --status-plava-svetla: #1c2b40;
  --brend: #ff7a50; --na-brendu: #1c1d22; --brend-svetla: #3a2219; --akcenat: #ff7a50; --akcenat-tekst: #ff9a76; --akcenat-svetla: #3a2219; --mastilo: #0d0d10;
  --plava: var(--brend); --plava-svetla: var(--brend-svetla); --zelena: #3cb371; --zelena-svetla: #16301f;
  --crvena: #ef6b67; --crvena-svetla: #3a1c1b; --zuta: #e0b84a; --zuta-svetla: #352c12; --narandzasta: #f08a3c;
  --polje: #222220; --hover: #23242a; --zaglavlje-tabele: #1e1f24; --izabrano: #2b1f19; --siva-svetla: #23242a;
  --senka: rgba(0,0,0,.4); --tekst-sekundarni: #c3c2b7; --upozorenje-tekst: #f0d58a; --upozorenje-ivica: #4a3d16;
  --greska-ivica: #5a2725; --dobro-tekst: #0ca30c; --plava-hover: #ff9670; --info-tekst: #ffb898; --poruka-tekst: #7fd69a;
}
.tema-dugme { background: none; border: 1px solid var(--linija); color: var(--tekst); border-radius: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 13px; width: 100%; margin-top: 8px; }
.tema-dugme:hover { background: var(--hover); }
.meni-pretraga { margin: 0 2px 10px; }
.meni-pretraga input { width: 100%; padding: 8px 10px; border: 1px solid var(--linija); border-radius: 8px; font-size: 14px;
  background: var(--polje); color: var(--tekst); }
input[type=text], input[type=email], input[type=password], input[type=search], select { color: var(--tekst); }
@media (max-width: 600px) {
  .sakrij-mob { display: none; }
  td, th { padding: 9px 8px; }
  .dno-izbor { padding: 10px 12px; }
  .dno-izbor .dugme { padding: 9px 12px; font-size: 14px; }
  .naslov-strane .red { width: 100%; }
  input[data-pretraga] { max-width: none !important; margin-left: 0 !important; width: 100%; }
  .podmeni a { padding: 10px; }
}
@media (max-width: 600px) { .oznaka { white-space: normal; } }

/* ---------- Koraci slanja: krugovi povezani linijom, prođeni deo obojen ---------- */
.tok-slanja { list-style: none; display: flex; margin: 0 0 24px; padding: 0; max-width: 720px; }
.tok-slanja li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--sivo); font-size: 13px; }
.tok-slanja li::before { content: ""; position: absolute; top: 16px; left: calc(-50% + 20px); right: calc(50% + 20px);
  height: 3px; border-radius: 2px; background: var(--linija); }
.tok-slanja li:first-child::before { display: none; }
.tok-slanja li.gotov::before, .tok-slanja li.trenutni::before { background: var(--plava); }
.tok-slanja .krug { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; background: var(--povrsina); border: 2px solid var(--linija); color: var(--sivo);
  position: relative; z-index: 1; transition: background .3s, border-color .3s; }
.tok-slanja li.gotov .krug { background: var(--plava); border-color: var(--plava); color: var(--na-brendu); }
.tok-slanja li.trenutni .krug { border-color: var(--akcenat); color: var(--akcenat-tekst); box-shadow: 0 0 0 4px var(--akcenat-svetla); }
.tok-slanja .naziv-koraka { margin-top: 8px; line-height: 1.25; }
.tok-slanja li.trenutni .naziv-koraka, .tok-slanja li.gotov .naziv-koraka { color: var(--tekst); font-weight: 600; }
@media (max-width: 600px) { .tok-slanja .naziv-koraka { font-size: 11px; } .tok-slanja .krug { width: 30px; height: 30px; } }

/* =================== Javna stranica (landing) =================== */
.lp { background: var(--pozadina); }
.lp-unutra { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.lp-zaglavlje { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--pozadina) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linija); }
.lp-zaglavlje .lp-unutra { display: flex; align-items: center; gap: 24px; height: 68px; }
.lp-zaglavlje .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--tekst); }
.lp-nav { display: flex; gap: 22px; flex: 1; justify-content: center; }
.lp-nav a { color: var(--sivo); font-weight: 500; }
.lp-nav a:hover { color: var(--tekst); text-decoration: none; }
.lp-glavno { overflow: hidden; max-width: none; padding: 0; margin: 0; }
.lp-oznaka { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--akcenat-tekst); background: var(--akcenat-svetla); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.lp-heroj { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.lp-heroj h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.02; margin: 0 0 20px; font-weight: 750; letter-spacing: -.025em; }
.lp-istaknuto { color: var(--akcenat); }
.lp-uvod { font-size: 19px; color: var(--sivo); max-width: 560px; margin: 0 0 28px; line-height: 1.55; }
.lp-veliko { font-size: 16px; padding: 14px 24px; border-radius: 12px; }
.lp-poverenje { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; padding: 0; margin: 22px 0 0; color: var(--sivo); font-size: 14px; }
.lp-poverenje li::before { content: "✓ "; color: var(--akcenat-tekst); font-weight: 700; }
.lp-poverenje.svetlo { color: rgba(255,255,255,.85); }
.lp-poverenje.svetlo li::before { color: var(--akcenat); }

/* Prikaz aplikacije u heroju */
.lp-prikaz { position: relative; }
.lp-prozor { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 18px; padding: 18px 18px 14px;
  box-shadow: 0 30px 60px -20px rgba(28,29,34,.28), 0 8px 20px -10px rgba(28,29,34,.15); transform: rotate(-1.2deg); }
.lp-prozor-traka { display: flex; gap: 6px; margin-bottom: 16px; }
.lp-prozor-traka span { width: 10px; height: 10px; border-radius: 50%; background: var(--linija); }
.lp-mini-tok { margin-bottom: 14px; }
.lp-red { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; padding: 10px 8px;
  border-top: 1px solid var(--linija); font-size: 14px; }
.lp-red span:nth-child(2) { color: var(--sivo); }
.lp-dno { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 8px 0;
  border-top: 1px solid var(--linija); font-size: 14px; }
.lp-dno .dugme { padding: 8px 14px; font-size: 14px; cursor: default; }
.lp-plutajuce { position: absolute; right: -18px; top: -26px; background: var(--mastilo); color: #fff; border-radius: 14px;
  padding: 14px 18px; box-shadow: 0 16px 30px -12px rgba(28,29,34,.45); transform: rotate(2deg); }
.lp-plutajuce .mala { color: rgba(255,255,255,.7); }
.lp-plutajuce .broj { color: #fff; font-size: 24px; }

/* Sekcije */
.lp-sekcija { padding-top: 72px; padding-bottom: 24px; }
.lp-naslov { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 28px; font-weight: 700; letter-spacing: -.02em; max-width: 760px; }
.lp-tri, .lp-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-bol, .lp-mogucnost { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 16px; padding: 24px; }
.lp-bol h3, .lp-mogucnost h3 { margin: 10px 0 8px; font-size: 19px; }
.lp-bol p, .lp-mogucnost p, .lp-koraci p { color: var(--sivo); margin: 0; }
.lp-ikona { font-size: 28px; }
.lp-prelaz { font-size: 22px; text-align: center; margin: 44px 0 0; font-family: "Bricolage Grotesque", sans-serif; }
.lp-prelaz b { color: var(--akcenat-tekst); }
.lp-koraci { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: k; position: relative; }
.lp-koraci li { position: relative; padding-top: 8px; }
.lp-koraci li::after { content: ""; position: absolute; top: 25px; left: 56px; right: -10px; height: 3px; border-radius: 2px; background: var(--akcenat-svetla); }
.lp-koraci li:last-child::after { display: none; }
.lp-koraci .krug { width: 40px; height: 40px; border-radius: 50%; background: var(--brend); color: var(--na-brendu); display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 17px; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--akcenat-svetla); }
.lp-koraci h3 { font-size: 20px; margin: 18px 0 8px; }

/* Brojevi (tamna traka) */
.lp-brojevi { margin-top: 72px; background: #26272d; color: #fff; padding: 72px 0; }
.lp-brojevi .lp-naslov { color: #fff; }
.lp-prica { font-size: 18px; color: rgba(255,255,255,.8); max-width: 760px; margin: 0 0 36px; }
.lp-cetiri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-cetiri > div { border-left: 3px solid var(--akcenat); padding: 4px 0 4px 16px; color: rgba(255,255,255,.75); }
.lp-cetiri .broj { color: #fff; font-size: 38px; font-weight: 700; }
.lp-izvor { color: rgba(255,255,255,.5) !important; margin-top: 24px; }

/* Cene */
.lp-cene { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-bottom: 14px; }
.lp-cena { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; position: relative; }
.lp-cena h3 { margin: 0 0 6px; font-size: 20px; }
.lp-cena .broj { font-size: 36px; font-weight: 700; }
.lp-cena .broj small { font-size: 15px; font-weight: 500; color: var(--sivo); font-family: "Manrope", sans-serif; }
.lp-cena ul { padding-left: 18px; color: var(--sivo); flex: 1; }
.lp-cena .dugme { text-align: center; }
.lp-preporuka { border: 2px solid var(--akcenat); box-shadow: 0 20px 40px -24px rgba(28,29,34,.4); }
.lp-traka { position: absolute; top: -12px; left: 24px; background: var(--akcenat-tekst); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; }

/* Pitanja */
.lp-uze { max-width: 820px; }
.lp-pitanje { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 14px; padding: 16px 20px; margin-bottom: 10px; }
.lp-pitanje summary { color: var(--tekst); font-weight: 650; font-size: 17px; list-style: none; position: relative; padding-right: 28px; }
.lp-pitanje summary::-webkit-details-marker { display: none; }
.lp-pitanje summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 22px; color: var(--akcenat-tekst); }
.lp-pitanje[open] summary::after { content: "–"; }
.lp-pitanje p { color: var(--sivo); margin: 12px 0 0; }

/* Poziv na akciju */
.lp-poziv { margin-top: 72px; background: radial-gradient(90% 120% at 100% 0%, rgba(255,106,61,.28) 0%, rgba(255,106,61,0) 60%), #26272d; color: #fff; padding: 80px 0; }
.lp-poziv-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-poziv .lp-naslov { color: #fff; }
.lp-poziv p { color: rgba(255,255,255,.85); font-size: 18px; }
.lp-obrazac { color: var(--tekst); padding: 26px; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.lp-obrazac p { font-size: 13px; color: var(--sivo); }
.lp-dva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-sakriveno { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp footer { margin-top: 0; }

@media (max-width: 900px) {
  .lp-heroj, .lp-poziv-mreza { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .lp-tri, .lp-mreza, .lp-koraci, .lp-cene { grid-template-columns: 1fr; }
  .lp-koraci li::after { display: none; }
  .lp-cetiri { grid-template-columns: 1fr 1fr; }
  .lp-nav { display: none; }
  .lp-zaglavlje .lp-unutra { justify-content: space-between; }
  .lp-plutajuce { right: 8px; }
  .lp-prozor { transform: none; }
}
@media (max-width: 520px) {
  .lp-zaglavlje .dugme:not(.glavno) { display: none; }
  .lp-dva { grid-template-columns: 1fr; }
  .lp-uvod { font-size: 17px; }
}

/* Landing – dodatno */
.lp-kuriri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding-bottom: 8px; }
.lp-kurir { border: 1px solid var(--linija); background: var(--povrsina); border-radius: 999px; padding: 7px 14px; font-weight: 650; font-size: 14px; }
.lp-kurir em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--sivo); margin-left: 4px; }
.lp-kurir.aktivan { border-color: var(--akcenat); }
.lp-kurir.aktivan em { color: var(--akcenat-tekst); }
.lp-poredjenje { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-kolona { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 16px; padding: 26px; }
.lp-kolona h3 { margin: 0 0 12px; font-size: 20px; }
.lp-bolje { border: 2px solid var(--akcenat); box-shadow: 0 20px 40px -26px rgba(28,29,34,.45); }
.lp-lista { list-style: none; padding: 0; margin: 0; }
.lp-lista li { padding: 8px 0 8px 30px; position: relative; border-top: 1px solid var(--linija); }
.lp-lista li:first-child { border-top: 0; }
.lp-lista li::before { position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.lp-lista.ne li { color: var(--sivo); }
.lp-lista.ne li::before { content: "✕"; background: var(--siva-svetla); color: var(--sivo); }
.lp-lista.da li::before { content: "✓"; background: var(--akcenat-svetla); color: var(--akcenat-tekst); }
.lp-dvodelno { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-tekst { font-size: 18px; color: var(--sivo); margin: 0 0 18px; }
.lp-novac-prikaz { transform: rotate(1deg); }
.lp-novac-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.lp-novac-mreza > div { background: var(--pozadina); border-radius: 12px; padding: 12px; }
.lp-novac-mreza .broj { font-size: 22px; font-weight: 700; }
.lp-zeleno { color: var(--akcenat-tekst); }
.lp-stubici { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 0 6px 10px; }
.lp-stubici span { flex: 1; background: #3a3b42; border-radius: 4px 4px 0 0; opacity: .85; }
.lp-stubici span:nth-child(4) { background: var(--akcenat); opacity: 1; }
.lp-kalkulator { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; background: var(--povrsina);
  border: 1px solid var(--linija); border-radius: 22px; padding: 36px; }
.lp-kalkulator input[type=range] { width: 100%; accent-color: var(--akcenat); margin: 10px 0 4px; }
.lp-kal-vrednost { font-size: 18px; margin-bottom: 8px; }
.lp-kal-rezultat { background: var(--mastilo); color: #fff; border-radius: 18px; padding: 28px; text-align: left; }
.lp-kal-rezultat .mala { color: rgba(255,255,255,.75); }
.lp-kal-broj { font-family: "Bricolage Grotesque", sans-serif; font-size: 52px; font-weight: 750; line-height: 1.05; margin: 6px 0; }
.lp-kal-broj span { color: var(--akcenat); }
@media (max-width: 900px) {
  .lp-poredjenje, .lp-dvodelno, .lp-kalkulator { grid-template-columns: 1fr; }
  .lp-kalkulator { padding: 22px; }
  .lp-novac-prikaz { transform: none; }
}
.predlozi { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.predlog { text-align: left; background: var(--polje); border: 1px solid var(--linija); border-radius: 8px; padding: 8px 10px;
  cursor: pointer; font: inherit; color: var(--tekst); }
.predlog:hover { border-color: var(--akcenat); background: var(--akcenat-svetla); }
.predlog small { color: var(--sivo); }
.lp-tabovi { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.lp-tabovi button { border: 1px solid var(--linija); background: var(--povrsina); color: var(--tekst); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.lp-tabovi button.aktivno { background: var(--brend); color: var(--na-brendu); border-color: var(--brend); }
.lp-ekran { background: var(--povrsina); border: 1px solid var(--linija); border-radius: 18px; padding: 12px 12px 0; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(28,29,34,.35); max-width: 1100px; margin: 0 auto; }
.lp-ekran img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; border: 1px solid var(--linija); border-bottom: 0; }
.traka-demo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--mastilo);
  color: #fff; border-radius: 12px; padding: 10px 12px 10px 16px; margin-bottom: 4px; }
.traka-demo .dugme { padding: 8px 14px; font-size: 14px; background: var(--akcenat); border-color: var(--akcenat); color: #1c1d22; }

/* Vodič i pomoć */
.vodic { max-width: 860px; }
.vodic-treba ul { margin: 8px 0 0; padding-left: 20px; }
.vodic-koraci { list-style: none; padding: 0; margin: 16px 0 0; }
.vodic-glava { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.vodic-glava h2 { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vodic-br { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--akcenat); color: #fff; font-weight: 700; font-family: var(--font-naslov, inherit); }
.vodic-podkoraci { padding-left: 20px; }
.vodic-podkoraci li { margin-bottom: 6px; }
.vodic-podkoraci code, .vodic code { font-size: 12.5px; background: var(--siva-svetla); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.vodic-mejl { width: 100%; font: inherit; font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--linija); background: var(--pozadina); color: var(--tekst); resize: vertical; }
.vodic-poziv { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.vodic-poziv:hover { border-color: var(--akcenat); }
.vodic-poziv .strelica { margin-left: auto; font-size: 20px; color: var(--akcenat-tekst); }
.pomoc-pretraga { width: 100%; margin: 4px 0 20px; padding: 12px 14px; font: inherit; font-size: 15px; border: 1px solid var(--linija); border-radius: 12px; background: var(--povrsina); color: var(--tekst); }
.pomoc-grupa h2 { font-size: 18px; margin: 24px 0 10px; }
.kontakt-kartica { margin-top: 32px; }
@media (max-width: 600px) { .vodic-podkoraci code, .vodic code { white-space: normal; word-break: break-all; } }

/* Pretplata i predračun */
.uplata { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; border-color: var(--akcenat); }
.uplata-tekst { flex: 1 1 340px; }
.uplata-iznos { font-family: var(--font-naslov, inherit); font-size: 34px; font-weight: 700; margin: 4px 0; }
.uplata-qr { text-align: center; flex: none; }
.uplata-qr img { border-radius: 12px; border: 1px solid var(--linija); background: #fff; padding: 8px; image-rendering: pixelated; }
.uplatnica { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; }
.uplatnica dt { color: var(--sivo); }
.uplatnica dd { margin: 0; font-weight: 600; }
.dugme.malo { padding: 2px 8px; font-size: 12px; margin-left: 6px; }
.izabran-plan { border-color: var(--akcenat) !important; }
body.dokument { background: #e9e7e3; }
.dokument .list { background: #fff; color: #111; max-width: 800px; margin: 24px auto; padding: 48px; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.dokument table { width: 100%; border-collapse: collapse; }
.dokument th, .dokument td { padding: 10px 8px; border-bottom: 1px solid #ddd; text-align: left; }
.dokument .desno { text-align: right; }
@media print { body.dokument { background: #fff; } .dokument .list { box-shadow: none; margin: 0; padding: 0; } .ne-stampaj { display: none; } }
@media (max-width: 600px) { .dokument .list { padding: 20px; margin: 0; } .uplatnica { grid-template-columns: 1fr; } .uplatnica dt { margin-top: 6px; } }
.dokument td:first-child { width: 55%; white-space: normal; }
.lp-zovi { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--linija); border-radius: 12px; background: var(--pozadina); }
.lp-zovi select:disabled { opacity: .5; }
/* Plutajuće dugme za poruku */
.cet { position: fixed; right: 18px; bottom: 18px; z-index: 50; }
.cet summary { list-style: none; width: 58px; height: 58px; border-radius: 50%; background: var(--akcenat); color: #fff; display: grid; place-items: center;
    font-size: 26px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.cet summary::-webkit-details-marker { display: none; }
.cet[open] summary { background: var(--brend); }
.cet-meni { position: absolute; right: 0; bottom: 70px; background: var(--povrsina); border: 1px solid var(--linija); border-radius: 14px; padding: 14px;
    width: 250px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.cet-meni a { display: block; margin-top: 8px; text-align: center; }
.lp-zovi label { display: flex; flex-wrap: nowrap; align-items: center; }
.lp-zovi input[type=checkbox] { flex: none; }
.lp-nav { min-width: 0; overflow: hidden; }
@media (max-width: 1180px) { .lp-nav { display: none; } }
@media (max-width: 1180px) { .lp-zaglavlje .lp-unutra { justify-content: space-between; } }