/* 365activation — klijentski deo (brif, ponuda, predračun, plaćanje, nalog, uslovi). Odobreno 12–13.10.:
   neutralno kao naš predračun — bela osnova, crna tipografija, tanke sive linije, tabele sa crnim zaglavljem, sivi grafikoni.
   Zelena samo: glavno dugme, logo, tanka linija ispod zaglavlja, tačka aktivnog koraka / „radi“. Boju donosi sadržaj klijenta. */
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }   /* naš hosting, bez Google Fonts (15. 10.) */
:root {
  --bg: #FFFFFF;
  --tinta: #111417;
  --tiho: #6B7078;
  --blago: #9AA0A6;
  --crta: #E2E4E7;
  --crta-jaka: #CFD3D7;
  --povrs: #F3F4F5;
  --povrs-2: #F8F9F9;
  --zelena: #12A86A;
  --zelena-tamna: #0E8F59;
  --zelena-potpis: #5CC995;
  --zuta: #FFF3D6;
  --zuta-tinta: #8A6A12;
  --greska: #C2352B;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 16px;
  --r-dugme: 10px;
  --vrh-h: 72px;
  --tab-h: 76px;
  --bocni: 264px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.2; font-weight: 600; }
h1 { font-size: 32px; letter-spacing: -.025em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: rgba(18, 168, 106, .2); }
:focus-visible { outline: 3px solid var(--zelena); outline-offset: 2px; border-radius: 6px; }
.skriveno, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tiho { color: var(--tiho); }
.sitno { font-size: 14px; color: var(--tiho); }
.centar { text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- okvir: zaglavlje, bočni meni (računar), traka sa karticama (telefon) */
.vrh { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.2) blur(12px); }
.vrh-u { height: var(--vrh-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; max-width: 760px; margin: 0 auto; }
.vrh-u::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px; background: var(--zelena-potpis); opacity: .85; }
.vrh .logo img { height: 34px; width: auto; }
.vrh .nazad { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 600; font-size: 24px; letter-spacing: -.03em; background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px; }
.vrh .nazad svg { width: 30px; height: 30px; }
.vrh .korak-od { font-size: 16px; color: var(--tiho); font-weight: 600; letter-spacing: 0; }
.vrh .korak-od b { color: var(--tinta); }
.avatar { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--crta-jaka); display: grid; place-items: center; font-weight: 600; font-size: 14px; letter-spacing: .02em; background: #fff; text-decoration: none; flex: none; }
.vrh-desno { display: flex; align-items: center; gap: 12px; }
.vrh-desno .firma { display: none; font-weight: 600; color: var(--tinta); }
.vrh-link { text-decoration: none; font-weight: 600; font-size: 14px; padding: 10px 4px; }
.napredak { position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: #D7F0E3; border-radius: 3px; overflow: hidden; }
.napredak i { display: block; height: 100%; background: var(--zelena); width: 0; transition: width .4s ease; }
.vrh.sa-napretkom .vrh-u::after { display: none; }

.sadrzaj { max-width: 760px; margin: 0 auto; padding: 18px 20px 40px; display: grid; gap: 18px; }
.ima-tabove .sadrzaj { padding-bottom: calc(var(--tab-h) + 32px + env(safe-area-inset-bottom)); }

.tabovi-dole { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--crta); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.tabovi-dole a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--tiho); font-size: 12px; font-weight: 600; padding: 8px 0; min-height: 56px; }
.tabovi-dole a svg { width: 28px; height: 28px; }
.tabovi-dole a[aria-current=page] { color: var(--tinta); font-weight: 600; }
.tabovi-dole a.plus { align-self: center; }
.tabovi-dole a.plus span { width: 64px; height: 64px; border-radius: 50%; background: var(--zelena); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px -10px rgba(18, 168, 106, .7); }
.tabovi-dole a.plus svg { width: 30px; height: 30px; }

.bocni { display: none; }
@media (min-width: 1024px) {
  .sa-bocnim { padding-left: var(--bocni); }
  .sa-bocnim .tabovi-dole { display: none; }
  .sa-bocnim .sadrzaj { max-width: 1160px; padding: 26px 40px 60px; }
  .ima-tabove .sadrzaj { padding-bottom: 60px; }
  .sa-bocnim .vrh-u { max-width: none; padding: 0 40px; justify-content: flex-end; }
  .sa-bocnim .vrh-u::after { left: 40px; right: 40px; }
  .sa-bocnim .vrh .logo { display: none; }
  .sa-bocnim .vrh-desno .firma { display: inline; }
  .bocni { display: flex; flex-direction: column; position: fixed; z-index: 35; inset: 0 auto 0 0; width: var(--bocni); border-right: 1px solid var(--crta); background: #fff; padding: 26px 22px 26px; }
  .bocni .logo img { height: 36px; width: auto; margin: 4px 0 40px 4px; }
  .bocni nav { display: grid; gap: 4px; }
  .bocni nav a { display: flex; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 10px; text-decoration: none; color: var(--tiho); font-weight: 600; font-size: 16px; position: relative; }
  .bocni nav a svg { width: 26px; height: 26px; }
  .bocni nav a:hover { background: var(--povrs-2); color: var(--tinta); }
  .bocni nav a[aria-current=page] { color: var(--tinta); font-weight: 600; }
  .bocni nav a[aria-current=page]::before { content: ""; position: absolute; left: -22px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tinta); }
  .bocni .dugme { margin-top: auto; }
}

.samo-racunar { display: none !important; }
@media (min-width: 1024px) { .samo-racunar { display: block !important; } .samo-telefon { display: none !important; } }

/* ---------------------------------------------------------------- dugmad i polja */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: var(--r-dugme); border: 0; cursor: pointer;
  background: var(--zelena); color: #fff; font: 600 16px/1.2 var(--font); letter-spacing: -.005em; text-decoration: none; text-align: center; transition: background .15s, box-shadow .15s, transform .1s; }
.dugme:hover { background: var(--zelena-tamna); }
.dugme:active { transform: translateY(1px); }
.dugme[disabled], .dugme[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.dugme.obrub { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--crta-jaka); }
.dugme.obrub:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); background: #fff; }
.dugme.malo { min-height: 44px; padding: 0 18px; font-size: 16px; }
.dugme.pilula { border-radius: 999px; }
.dugme.puno { width: 100%; }
.dugme svg { width: 22px; height: 22px; flex: none; }
.dugmad { display: grid; gap: 12px; }
.dugmad-red { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dugmad-red > .dugme { flex: 1 1 160px; }
.link { background: none; border: 0; padding: 8px 0; color: var(--tinta); font: 600 16px var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; }
.link.tiho { color: var(--tiho); font-weight: 600; }

.polje { display: grid; gap: 8px; }
.polje > span { font-weight: 600; font-size: 14px; }
.polje small { color: var(--tiho); font-size: 12px; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], textarea, select {
  width: 100%; font: 500 16px/1.4 var(--font); color: var(--tinta); background: #fff; border: 1.5px solid var(--crta-jaka); border-radius: 14px; padding: 15px 18px; min-height: 56px; }
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--blago); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(17, 20, 23, .08); }
[aria-invalid=true] { border-color: var(--greska) !important; }
.sa-ikonom { position: relative; }
.sa-ikonom > svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; pointer-events: none; }
.sa-ikonom input { padding-left: 60px; }
.sa-mikrofonom { position: relative; }
.sa-mikrofonom textarea, .sa-mikrofonom input { padding-right: 60px; }
.sa-mikrofonom .mik-dugme { position: absolute; right: 8px; top: 8px; }
.mik-dugme { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--tinta); }
.mik-dugme:hover { background: var(--povrs); }
.mik-dugme svg { width: 26px; height: 26px; }
.potvrda { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--tiho); cursor: pointer; }
.potvrda input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tinta); flex: none; }
.greska-poruka { color: var(--greska); font-weight: 600; font-size: 14px; }
.uspeh { color: var(--zelena-tamna); font-weight: 600; }
.dva-polja { display: grid; gap: 14px; }
@media (min-width: 640px) { .dva-polja { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- kartice, oznake, liste */
.kartica { background: #fff; border: 1.5px solid var(--crta); border-radius: var(--r); padding: 22px 24px; display: grid; gap: 14px; }
.kartica.jaka { border-color: var(--crta-jaka); }
.kartica.siva { background: var(--povrs-2); }
.oznaka { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta); }
.oznaka.tiha { color: var(--tiho); }
.tacka { width: 8px; height: 8px; border-radius: 50%; background: var(--zelena-potpis); flex: none; display: inline-block; }
.radi { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.radi .tacka { width: 10px; height: 10px; }
.radi.ne .tacka { background: var(--blago); }
.pilula-crna { display: inline-flex; align-items: center; gap: 8px; background: var(--tinta); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.znacka { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; background: var(--povrs); color: var(--tinta); }
.znacka.zuta { background: var(--zuta); color: var(--zuta-tinta); }
.naslov-odeljka { font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tiho); margin-top: 6px; }
.pozdrav .firma { font-size: 14px; color: var(--tiho); font-weight: 600; }
.pozdrav h1 { margin-top: 6px; }
.lista-redova { list-style: none; margin: 0; padding: 0; }
.lista-redova li { display: flex; align-items: center; gap: 18px; padding: 15px 4px; border-bottom: 1px solid var(--crta); font-size: 16px; }
.lista-redova li:last-child { border-bottom: 0; }
.lista-redova li svg { width: 24px; height: 24px; flex: none; }
.lista-redova li.ceka { color: var(--blago); }
.lista-redova li.sada { font-weight: 600; }
.krug-prazan { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--tinta); flex: none; }
.prazan-razmak { width: 24px; flex: none; }

/* ---------------------------------------------------------------- traka koraka 1–5 + „Šta sada“ */
.koraci5 { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.koraci5 li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; font-size: 14px; color: var(--tiho); text-align: center; }
.koraci5 li::before { content: ""; position: absolute; top: 21px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2.5px; background: var(--crta-jaka); }
.koraci5 li:first-child::before { display: none; }
.koraci5 li.gotov::before, .koraci5 li.sada::before { background: var(--tinta); }
.koraci5 .k { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 16px; background: #E8E9EB; color: #8B9096; position: relative; z-index: 1; }
.koraci5 li.gotov .k, .koraci5 li.sada .k { background: var(--tinta); color: #fff; }
.koraci5 .k svg { width: 22px; height: 22px; }
.koraci5 li.gotov { color: var(--tinta); }
.koraci5 li.sada { color: var(--tinta); font-weight: 600; }
.koraci5 li.sada::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--zelena-potpis); margin-top: -2px; }
.koraci5 .ime { line-height: 1.15; white-space: nowrap; }
@media (max-width: 400px) { .koraci5 li { font-size: 12px; } .koraci5 .k { width: 40px; height: 40px; } .koraci5 li::before { top: 19px; left: calc(-50% + 22px); right: calc(50% + 22px); } }
.sta-sada { font-size: 16px; text-align: center; color: var(--tinta); }
.sta-sada.levo { text-align: left; }
/* uspravna traka koraka (računar, pored predračuna) */
.koraci-usp { list-style: none; margin: 0; padding: 0; display: grid; }
.koraci-usp li { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--blago); position: relative; padding: 0 0 26px; }
.koraci-usp li::before { content: ""; position: absolute; left: 21px; top: 44px; height: 18px; width: 2px; background: var(--crta-jaka); }
.koraci-usp li:last-child::before { display: none; }
.koraci-usp .k { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: #E8E9EB; color: #8B9096; flex: none; position: relative; }
.koraci-usp li.gotov, .koraci-usp li.sada { color: var(--tinta); }
.koraci-usp li.gotov .k, .koraci-usp li.sada .k { background: var(--tinta); color: #fff; }
.koraci-usp li.gotov::before { background: var(--tinta); }
.koraci-usp li.sada { font-weight: 600; }
.koraci-usp li.sada .k::after { content: ""; position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--zelena-potpis); border: 2px solid #fff; }
.koraci-usp .k svg { width: 22px; height: 22px; }

/* mini napredak u kartici narudžbine: ● ─ ● ─ ○ · · */
.mini-koraci { display: flex; align-items: center; gap: 0; }
.mini-koraci i { width: 11px; height: 11px; border-radius: 50%; background: var(--tinta); flex: none; }
.mini-koraci i.sada { width: 18px; height: 18px; background: #fff; border: 3px solid var(--tinta); }
.mini-koraci i.ceka { background: #D9DCDF; width: 10px; height: 10px; }
.mini-koraci b { width: 32px; height: 3px; background: var(--tinta); }
.mini-koraci b.ceka { background: #E3E5E8; }

/* ---------------------------------------------------------------- početna: „Na potezu ste vi“, aktivacije, narudžbine */
.na-potezu h2 { font-size: 32px; }
.na-potezu .opis { color: var(--tiho); font-size: 16px; }
.kartica-akt { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: center; text-decoration: none; padding: 16px 20px 16px 16px; }
.kartica-akt .slika { width: 116px; aspect-ratio: 9 / 16; border-radius: 10px; background: var(--povrs) center / cover no-repeat; border: 1px solid var(--crta); overflow: hidden; }
.kartica-akt .slika img { width: 100%; height: 100%; object-fit: cover; }
.kartica-akt .gore { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kartica-akt h3 { font-size: 20px; }
.kartica-akt .broj { font-size: 32px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.kartica-akt .broj small { font-size: 16px; font-weight: 600; color: var(--tiho); letter-spacing: 0; margin-left: 8px; }
.kartica-akt .sredina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
.kartica-akt .krivulja { width: 130px; height: 46px; display: none; }
@media (min-width: 1024px) { .kartica-akt .krivulja { display: block; } }
.kartica-nar { display: grid; gap: 12px; text-decoration: none; padding: 18px 20px; }
.kartica-nar .red { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kartica-nar h3 { font-size: 20px; }
.kartica-nar .stanje { color: var(--tiho); font-size: 16px; }
.stoperica-mala { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.stoperica-mala svg { width: 24px; height: 24px; }
a.kartica:hover { border-color: var(--crta-jaka); }
.pocetna-kolona { display: grid; gap: 18px; }
.pocetna-kolona .naslov-odeljka { margin: 8px 0 -6px; }
.kartica-nar .red > svg { width: 28px; height: 28px; flex: none; }
@media (min-width: 1024px) { .pocetna-kolona { max-width: 560px; } }

/* prazno stanje i greška */
.prazno { display: grid; gap: 18px; text-align: center; justify-items: center; }
.prazno .slika { width: 100%; border-radius: 18px; overflow: hidden; background: #F3F4F3; }
.prazno .slika img { width: 100%; height: auto; }
.prazno h2 { font-size: 32px; }
.prazno .dugme { width: 100%; max-width: 520px; }
.traka-veze { background: var(--zuta); color: var(--zuta-tinta); display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 600; font-size: 16px; }
.traka-veze svg { width: 22px; height: 22px; }
.traka-veze-mesto { position: sticky; top: var(--vrh-h); z-index: 29; }

/* ---------------------------------------------------------------- prijava / proverite mejl / splash */
.prijava { min-height: calc(100vh - 40px); display: grid; align-content: center; gap: 26px; max-width: 480px; margin: 0 auto; padding: 32px 20px; text-align: center; }
.prijava .znak-veliki { width: 132px; height: auto; margin: 0 auto; }
.prijava .ime-veliko { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.prijava .ime-veliko span { display: block; color: #2FA36F; font-weight: 600; font-size: 48px; margin-top: 4px; }
.prijava .crtica { width: 96px; height: 3px; border-radius: 3px; background: var(--zelena-potpis); margin: 2px auto 0; }
.prijava h1 { font-size: 32px; }
.prijava .uvod { color: var(--tiho); font-size: 16px; margin-top: 8px; }
.prijava form { display: grid; gap: 22px; text-align: left; }
.prijava .mejl-ilustracija { width: min(300px, 70vw); margin: 0 auto; }
.prijava .mejl-istaknut { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; display: block; font-size: 20px; }
.splash { position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; align-content: center; justify-items: center; gap: 22px; transition: opacity .35s; }
.splash.nestaje { opacity: 0; pointer-events: none; }
.splash img { width: 120px; height: auto; }
.splash .ime-veliko { font-size: 48px; font-weight: 600; line-height: .95; text-align: center; letter-spacing: -.02em; }
.splash .ime-veliko span { display: block; color: #2FA36F; font-weight: 600; }
.splash p { color: var(--tiho); margin-top: 26px; }
.splash .traka { width: 260px; height: 6px; border-radius: 6px; background: #E3E5E8; overflow: hidden; margin-top: 40px; }
.splash .traka i { display: block; height: 100%; width: 40%; background: var(--tinta); border-radius: 6px; animation: splash 1.4s ease-in-out infinite; }
@keyframes splash { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------------------------------------------------------------- brif: razgovor */
.brif-ekran { max-width: 760px; margin: 0 auto; padding: 22px 20px 150px; display: grid; gap: 18px; align-content: start; }
.poruka { display: flex; align-items: flex-end; gap: 12px; max-width: 92%; }
.poruka .lik { width: 42px; height: 42px; border-radius: 50%; background: #CBEFDD; display: grid; place-items: center; flex: none; }
.poruka .lik svg { width: 22px; height: 22px; color: #fff; }
.poruka .balon { background: var(--povrs); border-radius: 18px; padding: 16px 20px; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.poruka.ja { margin-left: auto; justify-content: flex-end; }
.poruka.ja .balon { background: var(--tinta); color: #fff; }
.poruka .balon.ideja { background: #fff; border: 1.5px solid var(--crta-jaka); }
.poruka .balon.ideja .oznaka { display: block; margin-bottom: 6px; font-size: 12px; }
.poruka .balon .zasto { display: block; color: var(--tiho); font-size: 14px; margin-top: 4px; }
.cipovi { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 54px; }
.cipovi button { border: 1.5px solid var(--crta-jaka); background: #fff; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 16px; cursor: pointer; min-height: 48px; }
.cipovi button:hover, .cipovi button[aria-pressed=true] { border-color: var(--tinta); }
.cipovi button.sporedno { color: var(--tiho); }
.kuca { display: inline-flex; gap: 5px; padding: 6px 2px; }
.kuca i { width: 8px; height: 8px; border-radius: 50%; background: var(--blago); animation: kuca 1s infinite; }
.kuca i:nth-child(2) { animation-delay: .15s; } .kuca i:nth-child(3) { animation-delay: .3s; }
@keyframes kuca { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.unos-traka { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--crta); box-shadow: 0 -10px 30px -24px rgba(0, 0, 0, .3); padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.unos-traka .u { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.unos-traka textarea { min-height: 56px; max-height: 160px; border-radius: 28px; padding: 15px 22px; resize: none; flex: 1; line-height: 1.35; }
.unos-traka .spajalica { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--tiho); flex: none; }
.unos-traka .spajalica svg { width: 30px; height: 30px; }
.krug-dugme { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--zelena); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.krug-dugme:hover { background: var(--zelena-tamna); }
.krug-dugme svg { width: 28px; height: 28px; }
.brif-sa-strane { display: none; }
@media (min-width: 1024px) {
  .brif-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; max-width: 1160px; margin: 0 auto; padding: 0 40px; }
  .brif-raspored .brif-ekran { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
  .brif-sa-strane { display: block; position: sticky; top: calc(var(--vrh-h) + 22px); align-self: start; margin-top: 22px; }
  .sa-bocnim .unos-traka { left: var(--bocni); right: 370px; background: transparent; border: 0; box-shadow: none; padding-left: 40px; padding-right: 0; }
  .sa-bocnim .unos-traka .u { background: #fff; border: 1.5px solid var(--crta-jaka); border-radius: 18px; padding: 8px 8px 8px 14px; max-width: none; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .35); }
  .sa-bocnim .unos-traka textarea { border: 0; box-shadow: none; }
}
.vas-brif h3 { font-size: 24px; margin-bottom: 8px; }
.vas-brif ul { list-style: none; margin: 0; padding: 0; }
.vas-brif li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--crta); font-size: 16px; }
.vas-brif li .k { width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; flex: none; }
.vas-brif li .k svg { width: 16px; height: 16px; }
.vas-brif li.ceka .k { background: #fff; border: 2px solid var(--crta-jaka); }
.vas-brif li span { color: var(--tiho); }
.vas-brif li b { font-weight: 600; overflow-wrap: anywhere; }

/* snimanje glasa (preko celog ekrana) */
.glas { position: fixed; inset: 0; z-index: 90; background: #fff; overflow: auto; }
.glas .u { max-width: 640px; margin: 0 auto; padding: 0 20px 24px; display: grid; gap: 16px; min-height: 100%; align-content: start; }
.glas .glava { height: var(--vrh-h); display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--zelena-potpis); }
.glas .glava button { background: none; border: 0; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.glas .glava svg { width: 30px; height: 30px; }
.glas .glava b { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.glas .mali { color: var(--tiho); font-weight: 600; font-size: 14px; margin-top: 4px; }
.glas h1 { font-size: 32px; margin-top: -10px; }
.glas .mikro { position: relative; width: min(260px, 62vw, 30vh); height: min(260px, 62vw, 30vh); margin: 6px auto 0; display: grid; place-items: center; }
.glas .mikro i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #E6E8EA; }
.glas .mikro i:nth-child(2) { inset: 11%; border-color: #D3D6D9; }
.glas.snima .mikro i { animation: talas 2.2s ease-out infinite; }
.glas.snima .mikro i:nth-child(2) { animation-delay: .5s; }
@keyframes talas { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.04); opacity: .35; } }
.glas .mikro span { width: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--zelena); color: #fff; display: grid; place-items: center; position: relative; }
.glas .mikro span svg { width: 42%; height: 42%; }
.glas canvas { width: 100%; height: 90px; display: block; }
.glas .vreme { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 48px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.glas .vreme .tacka { width: 14px; height: 14px; }
.glas.snima .vreme .tacka { animation: treptaj 1s infinite; }
@keyframes treptaj { 50% { opacity: .3; } }
.glas .prepis { border: 1.5px solid var(--crta-jaka); border-radius: 16px; padding: 18px 20px; min-height: 92px; font-size: 20px; line-height: 1.45; }
.glas .prepis.prazan { color: var(--blago); }
.glas.radi .mikro i { animation: talas 1.1s ease-out infinite; }
.glas.radi::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, transparent 0, var(--zelena) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: kliz 1.2s ease-in-out infinite; }
@keyframes kliz { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .glas.radi::after, .glas.radi .mikro i { animation: none; } }
.glas textarea.prepis { width: 100%; }

/* prilozi */
.prilozi-zona { border: 2px dashed var(--crta-jaka); border-radius: 18px; padding: 34px 20px; display: grid; justify-items: center; gap: 8px; text-align: center; cursor: pointer; position: relative; }
.prilozi-zona:hover, .prilozi-zona.preko { border-color: var(--tinta); background: var(--povrs-2); }
.prilozi-zona svg { width: 64px; height: 64px; }
.prilozi-zona strong { font-size: 20px; }
.prilozi-zona span { color: var(--tiho); }
.prilozi-zona input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.prilozi-zona.mala { padding: 20px; grid-auto-flow: column; justify-content: center; align-items: center; gap: 14px; }
.prilozi-zona.mala svg { width: 30px; height: 30px; }
.prilozi-zona.mala strong { font-size: 20px; font-weight: 600; }
.fajlovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fajl { border: 1.5px solid var(--crta); border-radius: 14px; padding: 14px; display: grid; gap: 10px; position: relative; }
.fajl .sl { width: 76px; height: 76px; border-radius: 10px; background: var(--povrs) center / cover; border: 1px solid var(--crta); display: grid; place-items: center; font-weight: 600; font-size: 12px; color: var(--tiho); }
.fajl .dno { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fajl b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fajl .ok { width: 26px; height: 26px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; flex: none; }
.fajl .ok svg { width: 15px; height: 15px; }
.fajl .proc { color: var(--tiho); font-size: 14px; }
.fajl .traka { height: 5px; border-radius: 5px; background: #E8E9EB; overflow: hidden; }
.fajl .traka i { display: block; height: 100%; background: var(--tinta); }
.fajl .ukloni { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; color: var(--tiho); font-size: 20px; line-height: 1; }
.fajl .ukloni:hover { color: var(--greska); }

/* ---------------------------------------------------------------- ponuda */
.ponuda-cena { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; border: 2px solid var(--crta-jaka); border-radius: 18px; padding: 18px 26px 18px 18px; }
.ponuda-cena .slika { width: 110px; aspect-ratio: 9 / 16; border-radius: 10px; background: var(--povrs) center / cover; overflow: hidden; }
.ponuda-cena .slika img { width: 100%; height: 100%; object-fit: cover; }
.ponuda-cena .iznos { text-align: right; font-size: 32px; font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.ponuda-cena .iznos small { display: block; font-size: 20px; font-weight: 500; color: var(--tiho); letter-spacing: 0; margin-top: 8px; }
.ponuda-cena.bez-slike { grid-template-columns: 1fr; }
.stavke-ok { list-style: none; margin: 0; padding: 0; }
.stavke-ok li { display: flex; gap: 18px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--crta-jaka); font-size: 20px; }
.stavke-ok li svg { width: 26px; height: 26px; flex: none; }
.stavke-ok li .cena { margin-left: auto; color: var(--tiho); font-size: 16px; white-space: nowrap; }
.oko-30 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.oko-30 svg { width: 34px; height: 34px; align-self: center; }
.oko-30 b { font-size: 32px; font-weight: 600; letter-spacing: -.04em; }
.oko-30 span { color: var(--tiho); font-size: 16px; }

/* ---------------------------------------------------------------- predračun na ekranu (kao PDF) */
.predracun { background: #fff; border: 1px solid #E6E8EA; border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35); padding: 28px 30px; display: grid; gap: 18px; font-size: 14px; color: var(--tinta); max-width: 640px; width: 100%; margin: 0 auto; }
.predracun .gl { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #2FA36F; }
.predracun .gl img { height: 28px; width: auto; }
.predracun .gl .ko { text-align: right; font-size: 12px; line-height: 1.35; }
.predracun .gl .ko b { font-size: 14px; }
.predracun .gl .ko span { color: var(--tiho); font-size: 12px; display: block; }
.predracun .naslov { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.predracun h2 { font-size: 32px; letter-spacing: -.01em; }
.predracun .broj { color: #2FA36F; font-weight: 600; font-size: 20px; }
.predracun .meta { display: flex; gap: 26px; font-size: 12px; margin-top: 10px; }
.predracun .meta span { color: var(--tiho); display: block; }
.predracun .kupac { border: 1px solid var(--crta-jaka); border-radius: 4px; padding: 10px 14px; min-width: 180px; font-size: 14px; align-self: start; }
.predracun .kupac b { display: block; font-size: 12px; letter-spacing: .04em; }
.predracun table { width: 100%; border-collapse: collapse; font-size: 14px; }
.predracun th { background: var(--tinta); color: #fff; font-weight: 600; text-align: left; padding: 9px 10px; font-size: 12px; }
.predracun th:first-child { border-radius: 4px 0 0 4px; } .predracun th:last-child { border-radius: 0 4px 4px 0; }
.predracun td { padding: 10px; border-bottom: 1px solid var(--crta); vertical-align: top; }
.predracun .br { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.predracun .zbir { justify-self: end; display: grid; gap: 4px; min-width: 250px; font-size: 14px; }
.predracun .zbir div { display: flex; justify-content: space-between; gap: 24px; padding: 0 10px; }
.predracun .zbir .uk { background: #3BB27A; color: #fff; font-weight: 600; padding: 8px 10px; border-radius: 4px; margin-top: 4px; }
.predracun .uplata { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.predracun .uplata b.n { font-size: 12px; letter-spacing: .03em; display: block; margin-bottom: 6px; }
.predracun .uplata dl { margin: 0; display: grid; gap: 2px; font-size: 14px; }
.predracun .uplata dt { color: var(--tiho); font-size: 12px; margin-top: 4px; }
.predracun .uplata dd { margin: 0; font-weight: 600; }
.predracun .ips { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--tiho); }
.predracun .ips svg { width: 120px; height: 120px; }
.predracun .napomena { font-size: 12px; color: var(--tiho); }
@media (max-width: 520px) {
  .predracun { padding: 20px 16px; gap: 14px; font-size: 14px; }
  .predracun .gl img { height: 22px; } .predracun h2 { font-size: 20px; } .predracun .broj { font-size: 16px; }
  .predracun .kupac { min-width: 0; width: 100%; }
  .predracun .rb, .predracun .cena { display: none; }
  .predracun .zbir { min-width: 0; width: 100%; }
  .predracun .ips svg { width: 96px; height: 96px; }
}
.predracun-raspored { display: grid; gap: 22px; }
@media (min-width: 1024px) { .predracun-raspored { grid-template-columns: minmax(0, 560px) 360px; gap: 60px; align-items: start; justify-content: center; } .predracun-raspored .desno { position: sticky; top: calc(var(--vrh-h) + 20px); display: grid; gap: 18px; } }
@media print {
  body * { visibility: hidden !important; }
  .predracun, .predracun * { visibility: visible !important; }
  .predracun { position: absolute; left: 0; top: 0; box-shadow: none; border: 0; max-width: none; }
}

/* ---------------------------------------------------------------- izrada: štoperica */
.stoperica { position: relative; width: min(270px, 68vw); aspect-ratio: 1; margin: 6px auto; }
.stoperica svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stoperica .vr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.stoperica .vr b { font-size: 48px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.stoperica .vr span { color: var(--tiho); font-size: 16px; margin-top: 6px; }

/* fali materijal */
.sta-fali { border: 2px solid var(--crta-jaka); border-radius: 16px; overflow: hidden; }
.sta-fali h3 { font-size: 24px; font-weight: 600; padding: 20px 26px; border-bottom: 1.5px solid var(--crta-jaka); letter-spacing: -.02em; }
.sta-fali ol { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.sta-fali li { counter-increment: f; display: flex; gap: 16px; padding: 20px 26px; border-bottom: 1.5px solid var(--crta-jaka); font-size: 20px; }
.sta-fali li:last-child { border-bottom: 0; }
.sta-fali li::before { content: counter(f); width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; margin-top: 2px; }

/* aktivacija spremna */
.uredjaji { background: var(--povrs); border-radius: 18px; padding: 10px; display: grid; gap: 8px; }
.prekidac { display: grid; grid-template-columns: 1fr 1fr; background: #E9EAEC; border-radius: 14px; padding: 4px; }
.prekidac button { border: 0; background: transparent; padding: 12px; border-radius: 11px; font-weight: 600; font-size: 16px; color: var(--blago); cursor: pointer; min-height: 48px; }
.prekidac button[aria-pressed=true] { background: #fff; color: var(--tinta); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .25); }
.mokap { position: relative; width: 100%; max-width: 330px; margin: 0 auto; aspect-ratio: 4 / 5; }
.mokap > img { width: 100%; height: 100%; object-fit: cover; }
.mokap .ekran { position: absolute; overflow: hidden; background: #111417 center / cover no-repeat; }
.mokap.telefon .ekran { left: 30.08%; top: 9.98%; width: 40.2%; height: 69.57%; border-radius: 13% / 6%; }
.mokap.totem .ekran { left: 37.95%; top: 18.58%; width: 24.72%; height: 35.16%; }
.link-kartica { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.qr-kutija { width: 128px; height: 128px; background: #fff; border-radius: 14px; box-shadow: 0 6px 22px -12px rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 10px; }
.qr-kutija svg { width: 100%; height: 100%; }
.link-kartica b { font-size: 20px; overflow-wrap: anywhere; }
.link-kartica .dugmad-red > .dugme { flex: 1 1 120px; }
@media (max-width: 420px) { .link-kartica { grid-template-columns: 1fr; justify-items: start; } }

/* ---------------------------------------------------------------- aktivacija: glava i kartice (tabovi) */
.akt-glava { display: grid; gap: 6px; }
.akt-glava .red { display: flex; align-items: center; gap: 12px; }
.akt-glava a.nazad { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; flex: none; }
.akt-glava a.nazad svg { width: 30px; height: 30px; }
.akt-glava h1 { font-size: 32px; }
.akt-glava .pod { display: flex; align-items: center; gap: 18px; padding-left: 46px; color: var(--tiho); }
.akt-glava .akcije { display: none; }
@media (min-width: 1024px) {
  .akt-glava { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 20px; }
  .akt-glava .slika { width: 76px; height: 76px; border-radius: 10px; background: var(--povrs) center / cover; grid-row: span 2; }
  .akt-glava .akcije { display: flex; gap: 12px; grid-row: span 2; }
  .akt-glava .pod { padding-left: 0; }
  .akt-glava a.nazad { display: none; }
}
.akt-glava .slika { display: none; }
@media (min-width: 1024px) { .akt-glava .slika { display: block; } }
.kartice-tab { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1.5px solid var(--crta); margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.kartice-tab::-webkit-scrollbar { display: none; }
.kartice-tab { justify-content: space-between; }
.kartice-tab button { border: 0; background: none; padding: 12px 6px 14px; font-weight: 600; font-size: 16px; color: var(--tiho); cursor: pointer; white-space: nowrap; position: relative; min-height: 48px; }
.kartice-tab button[aria-selected=true] { color: var(--tinta); font-weight: 600; }
.kartice-tab button[aria-selected=true]::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -1.5px; height: 3px; background: var(--tinta); border-radius: 3px; }
@media (min-width: 1024px) { .kartice-tab { margin: 0; padding: 0; border-bottom-color: var(--zelena-potpis); } }

/* statistika */
.stat-mreza { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.stat-mreza > .siroka { grid-column: 1 / -1; }
.plocica { border: 1.5px solid var(--crta); border-radius: 16px; padding: 20px 22px; display: grid; gap: 4px; align-content: start; }
.plocica b { font-size: 48px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.plocica span { color: var(--tiho); font-size: 16px; }
.plocica.velika { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.plocica.velika .levo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plocica.velika b { font-size: 48px; }
.plocica.velika .krivulja { flex: 1; max-width: 200px; height: 70px; }
.plocica.velika .krivulja svg { width: 100%; height: 100%; }
.plocica h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.grafikon { width: 100%; height: auto; display: block; }
.grafikon .stub { fill: #E2E3E5; } .grafikon .vrh-stub { fill: var(--tinta); }
.grafikon .osa { fill: var(--tiho); font: 600 12px var(--font); }
.grafikon .linija { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linejoin: round; }
.grafikon .povrs { fill: url(#sivo); }
.jezici { display: grid; gap: 12px; }
.jezici div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; font-weight: 600; }
.jezici i { grid-column: 1 / -1; height: 9px; border-radius: 9px; background: #E6E7E9; overflow: hidden; }
.jezici i em { display: block; height: 100%; background: var(--tinta); border-radius: 9px; }
.trake { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.trake li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 16px; }
.trake li::after { content: ""; grid-column: 1 / -1; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--tinta) calc(var(--v, 0) * 100%), #E6E7E9 0); }
@media (min-width: 1024px) {
  .stat-mreza { grid-template-columns: repeat(4, 1fr); }
  .stat-mreza .plocica.velika { grid-column: auto; display: grid; text-align: center; justify-items: center; }
  .stat-mreza .plocica.velika .levo { display: grid; justify-items: center; gap: 0; }
  .stat-mreza .plocica.velika b { font-size: 48px; }
  .stat-mreza .plocica.velika .krivulja { display: none; }
  .stat-mreza .plocica { text-align: center; justify-items: center; }
  .stat-mreza .plocica.graf { text-align: left; justify-items: stretch; }
  .stat-mreza .po-danu { grid-column: span 2; grid-row: span 2; }
  .stat-mreza .po-jeziku, .stat-mreza .po-satu { grid-column: span 2; }
}
.zakljucano { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1.5px dashed var(--crta-jaka); border-radius: 14px; padding: 16px 18px; color: var(--tiho); }

/* nagrade */
.nagrade-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.nagrada { border: 1.5px solid var(--crta); border-radius: 16px; padding: 18px 14px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.nagrada h3 { font-size: 16px; font-weight: 600; }
.nagrada .traka { width: 100%; height: 22px; border-radius: 22px; background: #EDEEEF; overflow: hidden; }
.nagrada .traka i { display: block; height: 100%; background: var(--tinta); border-radius: 22px; }
.nagrada.kraj .traka { background: #F8EDD8; } .nagrada.kraj .traka i { background: #E0AE5A; }
.koracnik { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.koracnik button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--crta-jaka); background: #fff; cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.koracnik button:disabled { opacity: .35; cursor: default; }
.koracnik b { font-variant-numeric: tabular-nums; }
.koracnik span { color: var(--tiho); }

/* kontakti / tabele */
.tabela { border: 1.5px solid var(--crta); border-radius: 16px; padding: 14px; overflow-x: auto; }
.tabela table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.tabela th { background: var(--tinta); color: #fff; text-align: left; padding: 13px 10px; font-weight: 600; font-size: 16px; }
.tabela th:first-child { border-radius: 10px 0 0 10px; } .tabela th:last-child { border-radius: 0 10px 10px 0; text-align: right; }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--crta); white-space: nowrap; }
.tabela td b { font-weight: 600; }
.tabela td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .ini { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #E8E9EB; font-weight: 600; font-size: 14px; margin-right: 10px; vertical-align: middle; }
.tabela { padding: 10px; }
.tabela .tihi { color: var(--tiho); }
.gdpr { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--tinta); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.gdpr svg { width: 20px; height: 20px; }

/* QR prijava */
.prsten { position: relative; width: clamp(104px, 30vw, 150px); aspect-ratio: 1; flex: none; }
.prsten svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prsten b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; font-weight: 600; }
.qr-brojke { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.qr-brojke { flex-wrap: nowrap; }
.qr-brojke .glavni b { font-size: 48px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.qr-brojke .glavni span { display: block; color: var(--tiho); font-size: 16px; }
.qr-brojke .skoro { margin-left: auto; text-align: right; color: var(--tiho); }
.qr-brojke .skoro b { color: var(--tinta); font-size: 20px; display: block; }
.skener { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.skener > svg { width: 64px; height: 64px; grid-row: span 2; }
.skener a { font-weight: 600; overflow-wrap: anywhere; }
.pin { font: 600 32px/1 'Geist Mono', ui-monospace, Consolas, monospace"SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.dolasci { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dolasci li { display: flex; align-items: center; gap: 14px; padding: 8px 6px; font-size: 16px; border-radius: 10px; }
.dolasci li .ini { width: 42px; height: 42px; border-radius: 50%; background: #E8E9EB; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.dolasci li svg { width: 24px; height: 24px; margin-left: auto; flex: none; }
.dolasci li.ceka { background: var(--povrs); color: var(--tiho); }

/* šta dalje (produži) */
.izbor-opcije { display: grid; gap: 14px; }
.opcija { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; border: 1.5px solid var(--crta); border-radius: 16px; padding: 18px; cursor: pointer; box-shadow: 0 6px 18px -16px rgba(0, 0, 0, .4); }
.opcija input { width: 26px; height: 26px; accent-color: var(--tinta); margin: 0; }
.opcija .ik { width: 60px; height: 60px; border-radius: 12px; background: #ECEDEE; display: grid; place-items: center; }
.opcija .ik svg { width: 30px; height: 30px; }
.opcija b { font-size: 20px; display: block; }
.opcija span { color: var(--tiho); }
.opcija:has(input:checked) { border: 2.5px solid var(--tinta); box-shadow: inset 6px 0 0 var(--tinta); }
.vazenje { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.vazenje .slika { width: 110px; aspect-ratio: 9 / 16; border-radius: 10px; background: var(--povrs) center / cover; }
.vazenje .traka { height: 9px; border-radius: 9px; background: #E6E7E9; overflow: hidden; margin: 10px 0 6px; }
.vazenje .traka i { display: block; height: 100%; background: var(--tinta); }
.vazenje .dole { display: flex; justify-content: space-between; color: var(--tiho); font-size: 14px; }
details.preklop { border: 1.5px solid var(--crta); border-radius: 16px; padding: 0 20px; }
details.preklop > summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.preklop > summary::after { content: "+"; font-size: 24px; color: var(--tiho); }
details.preklop[open] > summary::after { content: "–"; }
details.preklop > div { padding: 0 0 20px; display: grid; gap: 14px; }
.dodaci { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dodaci li label { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--crta); border-radius: 12px; cursor: pointer; }
.dodaci li.vec label { opacity: .55; cursor: default; }
.dodaci input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--tinta); margin: 2px 0 0; flex: none; }
.dodaci small { display: block; color: var(--tiho); }
.dodaci .kolicina { width: 90px; min-height: 44px; padding: 8px 12px; margin-top: 6px; }
.zbir-red { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 16px; border-top: 1.5px solid var(--crta); padding-top: 14px; }
.zbir-red b { font-size: 24px; }
.kod-red { display: flex; gap: 10px; }
.kod-red input { flex: 1; }
.uskoro { color: var(--tiho); font-size: 14px; }

/* poruke sa timom */
.razgovor { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px; }
.razgovor .poruka { max-width: 88%; }
.razgovor .poruka .balon { font-size: 16px; padding: 12px 16px; }
.razgovor .poruka .balon small { display: block; font-size: 12px; opacity: .7; margin-top: 4px; }

/* ---------------------------------------------------------------- pravne strane i podnožje */
.pravno { max-width: 760px; margin: 0 auto; padding: 26px 20px 60px; }
.pravno h1 { font-size: 32px; margin-bottom: 8px; }
.pravno h2 { font-size: 20px; margin: 30px 0 10px; }
.pravno p, .pravno li { color: #2A2F35; line-height: 1.65; }
.pravno p + p { margin-top: 10px; }
.pravno .tiho-tekst { color: var(--tiho); }
.pravno a { color: var(--tinta); }
.pravno table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0; }
.pravno th, .pravno td { border: 1px solid var(--crta); padding: 8px 10px; text-align: left; vertical-align: top; }
.pravno th { background: var(--tinta); color: #fff; }
.podnozje { border-top: 1px solid var(--crta); color: var(--tiho); font-size: 14px; }
.podnozje .u { max-width: 1160px; margin: 0 auto; padding: 22px 20px 28px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.podnozje a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.ima-tabove .podnozje { display: none; }
.kartice-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 18px 0 0; border-top: 1px solid var(--crta); }
.ucitava { color: var(--tiho); padding: 30px 0; text-align: center; }
.ucitava::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid #E3E5E8; border-top-color: var(--tinta); border-radius: 50%; animation: vrti .8s linear infinite; }
@keyframes vrti { to { transform: rotate(360deg); } }

.pravno-podaci { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0; }
.pravno-podaci dt { color: var(--tiho); } .pravno-podaci dd { margin: 0; font-weight: 600; }
.pravno-podaci > div { display: contents; }   /* dt/dd u <div> (uslovi, privatnost) — inače su dva div-a jedan red i strana se širi na telefonu */
@media (max-width: 520px) { .pravno-podaci { grid-template-columns: 1fr; gap: 2px 0; } .pravno-podaci dd { margin-bottom: 8px; overflow-wrap: anywhere; } }
.ose { display: flex; justify-content: space-between; color: var(--tiho); font-size: 12px; font-weight: 600; padding: 4px 4px 0; }
@media (min-width: 1024px) { .kartice-tab { justify-content: flex-start; gap: 22px; } }
.podnozje a { display: inline-block; padding: 12px 2px; }
.vrh .logo, .bocni .logo { display: flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .stat-mreza .plocica.samo-racunar { display: grid !important; } }
.plocica.po-danu { display: flex; flex-direction: column; }
.plocica.po-danu .grafikon { flex: 1; min-height: 150px; }

/* predračun kao umanjen list papira (ekran 07) + pun prikaz na dodir */
.predracun-list { display: block; width: 100%; max-width: 560px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; overflow: hidden; text-align: left; font: inherit; color: inherit; }
.predracun-list .list-unutra { width: 600px; transform-origin: 0 0; }
.predracun.na-listu { max-width: none; width: 600px; margin: 0; padding: 30px 34px; font-size: 14px; gap: 18px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35); border-radius: 4px; }
.predracun.na-listu .rb, .predracun.na-listu .cena { display: table-cell; }
.predracun.na-listu .kupac { width: auto; min-width: 180px; }
.predracun.na-listu .zbir { min-width: 250px; width: auto; }
.predracun.na-listu .ips svg { width: 120px; height: 120px; }
.predracun.na-listu .gl img { height: 28px; } .predracun.na-listu h2 { font-size: 32px; } .predracun.na-listu .broj { font-size: 20px; }
.predracun-list .list-lupa { position: absolute; right: 10px; bottom: 10px; background: rgba(17, 20, 23, .78); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
@media (pointer: fine) { .predracun-list .list-lupa { opacity: 0; transition: opacity .2s; } .predracun-list:hover .list-lupa, .predracun-list:focus-visible .list-lupa { opacity: 1; } }
.predracun-pun { position: fixed; inset: 0; z-index: 95; background: #F3F4F5; overflow: auto; padding: 0 12px 30px; }
.predracun-pun .gore { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; background: #F3F4F5; z-index: 1; }
.predracun-pun .predracun { box-shadow: none; }

/* početna: telefon jedna kolona (na potezu → aktivacije → narudžbine), računar dve kolone (levo posao, desno aktivacije) */
.pocetna-mreza { display: grid; gap: 18px; grid-template-areas: "g" "p" "a" "n" "q"; }
.pocetna-mreza > * { min-width: 0; display: grid; gap: 14px; align-content: start; }
.pm-g { grid-area: g; } .pm-p { grid-area: p; } .pm-a { grid-area: a; } .pm-n { grid-area: n; } .pm-q { grid-area: q; }
/* računar: skala kao na odobrenim web ekranima (meni ~18–19 px, naslov 44+ px, šire kartice) */
@media (min-width: 1024px) {
  :root { --bocni: 300px; --vrh-h: 84px; }
  body { font-size: 16px; }
  .bocni { padding: 30px 26px; }
  .bocni .logo img { height: 42px; margin-bottom: 48px; }
  .bocni nav { gap: 6px; }
  .bocni nav a { font-size: 20px; padding: 14px 14px; gap: 16px; }
  .bocni nav a svg { width: 28px; height: 28px; }
  .bocni nav a[aria-current=page]::before { left: -26px; }
  .bocni .dugme { min-height: 58px; font-size: 20px; }
  .avatar { width: 50px; height: 50px; font-size: 16px; }
  .vrh-desno .firma { font-size: 20px; }
  .sadrzaj { max-width: 1280px; gap: 22px; }
  .sadrzaj h1, .pozdrav h1 { font-size: 32px; }
  .pocetna-mreza { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "g g" "p a" "n a" "q a"; column-gap: 34px; row-gap: 22px; align-items: start; }
  .na-potezu h2 { font-size: 32px; }
  .kartica-akt { grid-template-columns: 132px 1fr; padding: 18px 22px 18px 18px; }
  .kartica-akt .slika { width: 132px; }
  .kartica-akt h3, .kartica-nar h3 { font-size: 20px; }
  .naslov-odeljka { font-size: 16px; }
  .plocica span { font-size: 16px; }
  .plocica h3 { font-size: 24px; }
  .akt-glava h1 { font-size: 32px; }
  .dugme { min-height: 56px; font-size: 20px; }
  .dugme.malo { min-height: 48px; font-size: 16px; }
}
.kartica-akt { grid-template-columns: 116px minmax(0, 1fr); }
.kartica-akt .sredina { flex-wrap: wrap; }
.kartica-akt .krivulja { flex: 1 1 110px; max-width: 150px; }
@media (min-width: 1024px) { .kartica-akt { grid-template-columns: 132px minmax(0, 1fr); } }
html, body { max-width: 100%; }

.predracun.kompakt { font-size: 16px; gap: 16px; padding: 34px 40px; }
.predracun.kompakt .gl .ko { font-size: 16px; }
.predracun.kompakt table { font-size: 16px; }
.predracun.kompakt .zbir { font-size: 16px; min-width: 300px; }
.predracun.kompakt .uplata p { font-size: 16px; line-height: 1.4; }
.predracun.kompakt .uplata b.n { font-size: 16px; letter-spacing: 0; }
.predracun.kompakt .ips svg { width: 130px; height: 130px; }


/* ---------------------------------------------------------------- BRAND BOOK (docs/BRAND-BOOK.md, 18. 10. 2026.): pravila ispod pregaze stariji izgled; tokeni i komponente su u brend.css */
:root { --r: 18px; --r-dugme: 999px; --vrh-h: 64px; }
b, strong { font-weight: 600; }
.dugme { min-height: 44px; padding: 0 22px; border-radius: 999px; font: 600 14px/1 var(--font); letter-spacing: 0; }
.dugme svg { width: 18px; height: 18px; }
.dugme.malo { min-height: 36px; padding: 0 16px; font-size: 14px; }
@media (pointer: coarse), (max-width: 700px) { .dugme.malo { min-height: 44px; } }
.dugme.obrub { background: #fff; color: var(--tinta); box-shadow: none; border: 1.5px solid var(--tinta); }
.dugme.obrub:hover { background: var(--tinta); color: #fff; box-shadow: none; }
.link { font-weight: 600; font-size: 14px; }
.polje > span { font-weight: 500; font-size: 14px; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], textarea, select { font: 400 14px/1.4 var(--font); min-height: 44px; border: 1px solid var(--crta-jaka); border-radius: 12px; padding: 10px 14px; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--zelena); outline-offset: 0; border-color: var(--zelena); box-shadow: none; }
.kartica { border-width: 1px; border-radius: var(--r); padding: 20px; }
.vrh .nazad { font-size: 20px; letter-spacing: -.02em; }
.tabovi-dole a { font-weight: 500; } .tabovi-dole a[aria-current=page] { font-weight: 600; }
.bocni nav a { font-weight: 500; font-size: 14px; } .bocni nav a[aria-current=page] { font-weight: 600; }
.bocni nav a svg { width: 22px; height: 22px; }

/* tabovi i oznake kao na naslovnoj */
.kartice-tab { border-bottom: 1px solid var(--crta); gap: 24px; }
.kartice-tab button { font-weight: 500; font-size: 14px; padding: 10px 2px 12px; min-height: 44px; }
.kartice-tab button[aria-selected=true] { font-weight: 600; }
.kartice-tab button[aria-selected=true]::after { left: 0; right: 0; height: 2px; background: var(--zelena); }
@media (min-width: 1024px) { .kartice-tab { border-bottom-color: var(--crta); } }
.oznaka, .naslov-odeljka { font-family: "Geist Mono", ui-monospace, Consolas, monospace; font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tiho); }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

small { font-size: 14px; }
h1 { font-size: 32px; } @media (max-width: 520px) { h1 { font-size: 24px; } }

/* STANDARD brojki i grafikona (brend.css: --b-graf-*): zelena + mint, bez crnih stubova i traka */
.plocica { border: 1px solid var(--crta); border-radius: var(--r); padding: 20px; gap: 4px; text-align: left !important; justify-items: start !important; }
.plocica b, .plocica.velika b, .stat-mreza .plocica.velika b { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.plocica span { font-size: 14px; color: var(--tiho); }
.plocica.velika, .stat-mreza .plocica.velika { display: flex !important; text-align: left; justify-items: stretch; }
.plocica.velika .levo, .stat-mreza .plocica.velika .levo { display: flex !important; justify-items: stretch; }
.stat-mreza .plocica.graf { justify-items: stretch !important; }
.grafikon .stub { fill: var(--b-graf-3); } .grafikon .vrh-stub { fill: var(--b-graf-1); }
.grafikon .osa { fill: var(--b-graf-osa); font: 500 12px "Geist Mono", ui-monospace, monospace; }
.grafikon .linija { stroke: var(--b-graf-1); stroke-width: 2; }
.jezici i { height: 8px; border-radius: 999px; background: var(--b-graf-staza); } .jezici i em { background: var(--b-graf-1); border-radius: 999px; }
.jezici div { font-weight: 500; }
@media (min-width: 1024px) {
  .bocni nav a[aria-current=page] { background: var(--b-mint); color: var(--tinta); font-weight: 600; }
  .bocni nav a[aria-current=page]::before { display: none; }
}
.plocica.velika .levo, .stat-mreza .plocica.velika .levo { gap: 8px; align-items: baseline; }
/* statistika staje na ekran: „Po danu“ preko cele širine (niska), ispod uporedo „Po jeziku“ i „Po satu“ */
@media (min-width: 1024px) { .stat-mreza .po-danu { grid-column: 1 / -1 !important; grid-row: auto !important; } }
.grafikon { max-height: 150px; } .plocica.po-danu .grafikon { flex: none; min-height: 0; max-height: 150px; }