/* Artiks: jedan stil. Boje i pismo po uzoru na vlasnikov izbor (teget, zelena, breskva, Poppins). */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../fontovi/poppins-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../fontovi/poppins-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(../fontovi/poppins-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(../fontovi/poppins-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(../fontovi/poppins-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(../fontovi/poppins-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Tokeni. Boje su vlasnikove; --tekst, --linija i --povrsina su izvedeni iz tegeta. Mreža ima 12 kolona i jednu ivicu: panel do 1400 px i tekst unutar njega. */
:root{
  --teget:#0c2244;--teget-svetlija:#16335f;--siva:#5b6577;--siva-svetla:#b9c4d6;
  --zelena:#01ac6e;--zelena-tamna:#047857;--zelena-bleda:#e6f7f0;
  --pozadina:#f7f8fa;--ivica:#e6e9ef;--bela:#fff;
  --breskva:linear-gradient(135deg,#fff5ec 0%,#fde6d5 100%);
  --r-panel:28px;--r-kartica:20px;--r-malo:12px;
  --senka:0 8px 30px rgba(12,34,68,.07);--senka-velika:0 24px 60px rgba(12,34,68,.18);
  --tekst:#33415a;--na-tegetu:#dbe3f0;--zelena-svetla:#4fe0aa;--linija:#d5dbe5;--linija-tamna:rgba(255,255,255,.18);--povrsina:#f2f4f8;
  --spolja:12px;--unutra:clamp(24px,5vw,72px);--g:clamp(20px,2.8vw,40px);
  --razmak:clamp(48px,5.5vw,72px);--zaglavlje:78px;--prvi:12px;
  --t14:.875rem;--t15:.9375rem;--t16:1rem;--t18:1.125rem;--t22:1.375rem;--t28:1.75rem;--t40:2.5rem;--t58:3.625rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--zaglavlje) + 6px);-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100dvh;margin:0;background:var(--bela);color:var(--teget);font:400 16px/1.7 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* prvi panel ne sme da dodirne liniju zaglavlja: rund ugao bi u nju udario */
main{flex:1 0 auto;min-width:0;padding-top:var(--prvi)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2rem,4.8vw,var(--t58));line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(var(--t28),3vw,var(--t40))}
h3{font-size:var(--t22)}
p{text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
/* prsten fokusa mora da se vidi na podlozi: tamna zelena na svetlom, svetla zelena na tegetu. Izlog zadržava svoju boju. */
:focus-visible{outline:3px solid var(--zelena-tamna);outline-offset:3px;border-radius:6px}
.alati-panel :focus-visible,.podnozje-panel :focus-visible,.traka-usluge :focus-visible{outline-color:var(--zelena-svetla)}
.izlog :focus-visible{outline-color:var(--zelena)}
.alati-panel .panel :focus-visible{outline-color:var(--zelena-tamna)}
.preskoci{position:absolute;left:16px;top:-60px;background:var(--teget);color:#fff;padding:10px 18px;border-radius:999px;z-index:30}
.preskoci:focus{top:12px}

/* Jedna ivica: tekst van panela i tekst u panelu staju na isti piksel, na svakoj širini. */
.omot{max-width:calc(1400px + 2*var(--spolja));margin-inline:auto;padding-inline:calc(var(--spolja) + var(--unutra))}
.hero,.proces,.kontakt,.alati,.tehnika-omot{padding-inline:var(--spolja)}
.hero-panel,.proces-panel,.kontakt-panel,.alati-panel,.tehnika-panel,.podnozje-panel{max-width:1400px;margin-inline:auto;padding-inline:var(--unutra);border-radius:var(--r-panel)}

/* Jedan razmak između sekcija. Kraći su samo prelazi oko izloga, jer on sam nosi svoj prostor. */
main>*+*{margin-top:var(--razmak)}
.spisak-usluga{margin-top:clamp(24px,3vw,36px)}
.izlog{margin-top:clamp(32px,4vw,48px)}
.poziv-red{margin-top:clamp(24px,3vw,36px)}
.tim,.vrednosti{margin-top:clamp(24px,3vw,36px)}
.podnozje{margin-top:var(--razmak)}
#usluge,#o-nama{scroll-margin-top:24px}
#kako-radimo,#kontakt,#alati{scroll-margin-top:12px}

.sekcija-glava h2,.o-nama h2,.alati-glava h2,.upit-levo h1,.upit-levo h2{letter-spacing:-.025em}
.sekcija-glava p{color:var(--tekst);font-size:var(--t18);line-height:1.55}

/* ikone i dugmad */
.ikona{width:24px;height:24px;flex:none}.ikona-mala{width:18px;height:18px;flex:none}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 26px;border-radius:999px;border:1.5px solid transparent;font-weight:600;font-size:.9375rem;line-height:1.2;text-decoration:none;cursor:pointer;background:none;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.dugme:hover{transform:translateY(-1px)}.dugme:active{transform:none}
.dugme-glavno{background:var(--zelena);color:var(--teget)}.dugme-glavno:hover{background:#00c27c}
.dugme-okvir{border-color:var(--teget);color:var(--teget)}.dugme-okvir:hover{background:var(--teget);color:#fff}
.dugme-malo{min-height:44px;padding:8px 22px;font-size:.875rem}
.dugme-veliko{min-height:54px;font-size:1rem;overflow-wrap:anywhere}
.dugme[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.veza-strelica{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:.9375rem;text-decoration:none}
.veza-strelica .ikona-mala{transition:transform .18s}.veza-strelica:hover .ikona-mala{transform:translateX(4px)}
.znacka{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:#fff;box-shadow:var(--senka);font-weight:500;font-size:var(--t14);line-height:1.4}
.znacka-tamna{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.pilula{display:inline-block;padding:2px 12px;border-radius:999px;background:var(--zelena-bleda);color:var(--zelena-tamna);font-size:.75rem;font-weight:600;letter-spacing:0;vertical-align:middle}

/* Okvir snimka: adresa kaže da je to pravi sajt i veže snimak sa izlogom. */
.okvir{overflow:hidden;background:#fff;border-radius:14px;box-shadow:var(--senka-velika)}
.okvir-traka{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;background:#eceff4;color:var(--siva);font-weight:500;font-size:.75rem;line-height:1}
.okvir-traka span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.okvir-traka .ikona-mala{width:11px;height:11px;color:var(--zelena-tamna)}

/* zaglavlje */
.zaglavlje{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 var(--ivica)}
.zaglavlje-red{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:var(--zaglavlje)}
.marka{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:1.3125rem;letter-spacing:-.02em;text-decoration:none}
.zaglavlje .marka{justify-self:start}
.marka-svetla{color:#fff}
.znak{flex:none}
.nav-siroka ul{display:flex;gap:30px}
.nav-siroka a{display:inline-flex;align-items:center;min-height:44px;border-block:2px solid transparent}
.nav-siroka a,.nav-uska nav a{font-weight:500;font-size:.9375rem;text-decoration:none}
.nav-siroka a:hover{color:var(--zelena-tamna)}
.nav-siroka a[aria-current]{border-bottom-color:var(--zelena)}
.nav-uska nav a[aria-current]{background:var(--zelena-bleda)}
.zaglavlje-desno{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.nav-uska{display:none;position:relative}
.nav-uska summary{display:grid;gap:5px;place-content:center;width:44px;height:44px;cursor:pointer;list-style:none;border-radius:50%}
.nav-uska summary::-webkit-details-marker{display:none}
.nav-uska summary span{display:block;width:22px;height:2px;border-radius:2px;background:var(--teget);transition:transform .18s,opacity .18s}
.nav-uska[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-uska[open] summary span:nth-child(2){opacity:0}
.nav-uska[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-uska nav{position:absolute;right:0;top:52px;min-width:220px;padding:10px;background:#fff;border:1px solid var(--ivica);border-radius:var(--r-kartica);box-shadow:var(--senka-velika)}
.nav-uska nav a{display:flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:var(--r-malo)}
.nav-uska nav a:hover{background:var(--pozadina)}

/* prvi ekran */
.hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(28px,4vw,56px);padding-block:clamp(24px,2.5vw,36px);background:var(--breskva);overflow:hidden}
.potpis{font-weight:600;font-size:var(--t16);line-height:1.4;color:var(--zelena-tamna)}
.hero-tekst h1{margin-top:10px}
.uvod{margin-top:16px;font-size:var(--t18);line-height:1.6;max-width:34em;color:var(--tekst)}
.dugmad{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* spisak usluga: sedam stavki u dva puna reda. Poslednja je najduža, pa zauzima dve ćelije i red ostaje pun. Ikona je zbog brzog čitanja, a nisu veze jer još nema strana na koje bi vodile. */
.spisak-usluga h2{margin-bottom:14px;font-size:var(--t22);letter-spacing:-.015em}
.spisak-usluga ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g)}
.spisak-usluga li{display:flex;align-items:center;gap:12px;min-height:64px;padding-block:10px;border-top:3px solid var(--c);font-weight:600;font-size:var(--t16);line-height:1.3}
.spisak-usluga .ikona-boja{width:40px;height:40px}

/* ikonice u boji: tanak obris je pomeren dole-desno, a na prelaz mišem se vrati na mesto */
.ikona-boja{flex:none;display:block;overflow:visible;transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.ib-lin{fill:none;stroke:var(--teget);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:translate(1.4px,1.4px);transition:transform .22s}
li:hover>.ikona-boja{transform:rotate(-6deg) scale(1.1)}
li:hover>.ikona-boja .ib-lin{transform:none}

/* poziv iza izloga: jedan red, na ivici teksta */
.poziv-red{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.poziv-red p{flex:1 1 320px;font-weight:600;font-size:var(--t22);line-height:1.35;letter-spacing:-.01em}

/* usluge: naslov levo, redovi desno. Ose su iste kao u Kako radim: prva trećina strane. */
.usluge-sekcija{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--g)}
.usluge-sekcija .sekcija-glava{grid-column:1/span 4}
.usluge-sekcija .sekcija-glava p{margin-top:14px}
.usluge{grid-column:5/-1;grid-row:1/span 2}
.usluga{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--g);padding-block:24px;border-top:1px solid var(--linija)}
.usluga:first-child{padding-top:0;border-top:0}
.usluga:last-child{padding-bottom:0}
.usluga-naslov{grid-column:span 3}
.usluga h3{display:flex;align-items:flex-start;gap:10px;font-size:var(--t22)}
.usluga h3 .ikona{margin-top:1px;color:var(--zelena-tamna)}
.podnaslov{margin-top:6px;color:var(--zelena-tamna);font-weight:500;font-size:var(--t14);line-height:1.45}
.usluga-telo{grid-column:span 5}
.usluga-telo p{max-width:40em;color:var(--tekst);line-height:1.6}
.usluga-telo .veza-strelica{margin-top:4px}
/* jedini izuzetak od redova: ovo je drugi kupac, onaj koji već ima sajt, a tekst govori baš o sajtu na isečku */
.traka-usluge{grid-column:1/span 4;grid-row:2;align-self:end;margin-top:24px;overflow:hidden;padding:18px 24px 10px;border-radius:var(--r-kartica);background:var(--teget);color:#fff}
.traka-slika{aspect-ratio:4;margin:-18px -24px 16px;overflow:hidden}
.traka-slika img{width:100%;height:100%;object-fit:cover;object-position:top}
.traka-usluge h3{display:flex;align-items:center;gap:10px;font-size:var(--t18)}
.traka-usluge h3 .ikona{color:var(--zelena-svetla)}
.traka-usluge p{margin-top:8px;color:var(--na-tegetu);line-height:1.55}
.traka-usluge .veza-strelica{margin-top:2px;color:var(--zelena-svetla)}

/* koraci: redosled ide s leva na desno, pa i linija. Mreža prima i četvrti korak kad ga vlasnik upiše. */
.proces-panel{padding-block:clamp(32px,4.5vw,56px);background:var(--povrsina)}
.proces-panel .sekcija-glava{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:baseline;margin-bottom:clamp(24px,3vw,36px)}
.proces-panel .sekcija-glava h2{grid-column:span 4}
.proces-panel .sekcija-glava p{grid-column:span 8}
.koraci{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:var(--g);padding-top:30px}
.korak{position:relative}
/* linija ide od tačke do tačke i staje na poslednjoj: posle poslednjeg koraka ništa ne sledi */
.korak:not(:last-child)::before{content:"";position:absolute;left:0;right:calc(-1*var(--g));top:-23px;height:1px;background:var(--linija)}
.korak-tacka{position:absolute;left:0;top:-30px;width:15px;height:15px;border:4px solid var(--povrsina);border-radius:50%;background:var(--zelena);box-shadow:0 0 0 1px var(--zelena)}
.korak h3{display:flex;align-items:baseline;gap:10px;font-size:var(--t22)}
.korak-broj{color:var(--zelena-tamna);font-weight:600;font-size:var(--t18);letter-spacing:0}
.korak p{margin-top:8px;max-width:38em;color:var(--tekst);line-height:1.6}

/* o nama: otvoreno, bez kutije. Veliki naslov levo, tekst desno, na istoj osi kao ostali redovi. Kad vlasnik upiše fotografiju, naslov i tekst idu jedno ispod drugog, a ona na poslednju trećinu. */
.o-nama{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start}
.o-nama h2{grid-column:span 5;font-size:clamp(2rem,4.2vw,var(--t58));line-height:1.1}
.o-nama-tekst{grid-column:span 7}
.o-nama-tekst p{max-width:40em;color:var(--tekst);line-height:1.6}
.o-nama-tekst p+p{margin-top:12px}
.o-nama-sa-slikom h2,.o-nama-sa-slikom .o-nama-tekst{grid-column:1/span 8}
.o-nama-sa-slikom .o-nama-tekst{margin-top:14px}
.o-nama-strana{grid-column:9/-1;grid-row:1/span 2}
.o-nama-foto{overflow:hidden;border-radius:var(--r-kartica)}
/* vrednosti: pločice u blagom tonu svoje ikonice, a ikonica stoji pored naziva */
.vrednosti-mreza{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.vrednost{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;gap:8px 12px;padding:16px 18px 18px;border-radius:var(--r-kartica);background:color-mix(in srgb,var(--c) 13%,#fff)}
.vrednost .ikona-boja{width:44px;height:44px}
.vrednost h3{font-size:var(--t18);letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.vrednost p{grid-column:1/-1;font-size:var(--t15);line-height:1.5;color:var(--tekst)}
/* tim: ista linija kao spisak usluga, a slika pored imena */
.tim h2{margin-bottom:14px;font-size:var(--t22);letter-spacing:-.015em}
.tim-clanovi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g)}
.clan{display:flex;align-items:center;gap:14px;padding-block:14px;border-top:2px solid var(--teget)}
.clan>div:last-child{min-width:0}
.clan-znak{flex:none;display:grid;place-items:center;width:64px;height:64px;overflow:hidden;border-radius:50%;background:var(--zelena-bleda);color:var(--zelena-tamna);font-weight:600;font-size:var(--t18)}
.clan-znak img{width:100%;height:100%;object-fit:cover}
.clan h3{font-size:var(--t16);letter-spacing:0;line-height:1.3;overflow-wrap:anywhere}
.clan p{color:var(--siva);font-size:var(--t14);line-height:1.4}

/* kontakt */
.kontakt-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-block:clamp(28px,4.5vw,56px);background:var(--breskva)}
.kontakt-usko{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:clamp(24px,3vw,36px)}
.kontakt-usko h2{font-size:var(--t28);letter-spacing:-.02em}
.kontakt-usko p{margin-top:6px;color:var(--tekst)}

/* forma za upit */
.upit-strana h1{font-size:clamp(1.75rem,4vw,2.5rem)}
.upit-levo h2{font-size:clamp(var(--t28),3vw,var(--t40))}
.upit-panel .upit-uvod{margin-top:12px;margin-bottom:20px;color:var(--tekst)}
.upit{display:grid;gap:18px}
.upit .d-unos{font-size:1rem}
.upit textarea{display:block;resize:vertical}
.upit-polje{min-width:0;margin:0;padding:0;border:0}
.upit-polje>label,.upit-polje>legend{display:block;margin-bottom:8px;padding:0;font-weight:600;font-size:var(--t14);line-height:1.4}
.upit-izbor{position:relative;cursor:pointer}
.upit-izbor input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.upit-izbor span{display:flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--ivica);border-radius:var(--r-malo);background:#fff;font-size:var(--t14);font-weight:500;line-height:1.3;transition:border-color .15s,background-color .15s}
.upit-izbor input:hover+span{border-color:var(--teget)}
.upit-izbor input:checked+span{border-color:var(--zelena);background:var(--zelena-bleda)}
.upit-izbor input:focus-visible+span{outline:3px solid var(--zelena-tamna);outline-offset:3px}
.upit-jos summary{display:flex;align-items:center;min-height:44px;font-weight:500;font-size:.9375rem;color:var(--zelena-tamna);cursor:pointer}
.upit-jos summary::before{content:"+";margin-right:8px;font-weight:600}
.upit-jos[open] summary::before{content:"\2212"}
.upit-jos summary::-webkit-details-marker{display:none}
.upit-jos .upit-polje{margin-top:12px}
.upit-povod{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 14px;border-radius:var(--r-malo);background:rgba(255,255,255,.75);font-size:var(--t14);line-height:1.4}
.upit-povod[hidden]{display:none}
.upit-povod strong{font-weight:600}
.upit-povod button{flex:none}
.upit-greska{margin-top:6px;color:#b42318;font-weight:500;font-size:var(--t14);line-height:1.4}
.upit-greska[hidden]{display:none}
.upit .d-unos[aria-invalid=true]{border-color:#b42318}
.upit-bez-js{padding:14px 16px;border-radius:var(--r-malo);background:rgba(255,255,255,.75);font-weight:500;overflow-wrap:anywhere}
.upit-bez-js a{font-weight:600}
.upit-sitno{color:var(--siva);font-size:var(--t14);line-height:1.55}
.upit-posle{display:grid;gap:10px;padding:18px 20px;border-radius:16px;background:#fff}
.upit-posle[hidden]{display:none}
.upit-posle h3{font-size:var(--t18);color:var(--zelena-tamna)}
.upit-posle p{font-size:var(--t14)}
.upit-desno{display:flex;flex-direction:column;gap:16px}
.upit-ko{font-weight:500}
.upit-panel .upit-naslov-pitanja{margin-bottom:-6px;font-size:var(--t18);letter-spacing:0}
.upit-pitanja{display:grid;gap:8px}
.upit-pitanje{padding-inline:16px;border-radius:14px;background:rgba(255,255,255,.75);font-size:var(--t16);line-height:1.45}
.upit-pitanje summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding-block:8px;font-weight:500;cursor:pointer}
.upit-pitanje summary::-webkit-details-marker{display:none}
.upit-pitanje summary:focus-visible{outline-offset:-1px;border-radius:12px}
.upit-pitanje summary::after{content:"+";flex:none;color:var(--zelena-tamna);font-weight:600}
.upit-pitanje[open] summary::after{content:"\2212"}
.upit-pitanje p{padding-bottom:14px;color:var(--tekst);font-size:var(--t14)}
.upit-pitanje p:has(+a){padding-bottom:2px}
.upit-pitanje .veza-strelica{margin-bottom:6px;font-size:var(--t14)}
.upit-direktno{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.upit-direktno a{display:inline-block;padding-block:11px;margin-block:-11px;font-weight:600;overflow-wrap:anywhere}
.upit-kanali{flex-basis:100%}
/* napomena stoji odmah ispod kontakta: višak visine ostaje na dnu panela, gde se ne čita kao greška */
.upit-desno>.upit-sitno{padding-top:14px;border-top:1px solid rgba(12,34,68,.14)}
.samo-js{display:none}.js .samo-js{display:inline-flex}
/* posle slanja dugme za adresu već stoji u levoj kutiji, pa se ne ponavlja desno */
.upit-panel:has(.upit-posle:not([hidden])) .upit-direktno .dugme{display:none}

/* alati i kraj strane: teget se ne prekida do podnožja */
.alati-panel{padding-block:clamp(32px,4.5vw,56px);background:var(--teget);color:#fff}
.alati-glava{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end;margin-bottom:clamp(20px,2.6vw,32px)}
.alati-naslov{grid-column:span 6}
.alati-naslov h2{margin-top:12px}
.alati-glava>p{grid-column:span 6;color:var(--na-tegetu);line-height:1.6}
.alati-okvir{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start}
.tabovi{grid-column:span 3;position:sticky;top:calc(var(--zaglavlje) + 12px);display:grid;gap:2px;padding:6px;background:rgba(255,255,255,.08);border-radius:18px}
.tab{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:0;border-radius:13px;background:none;color:var(--na-tegetu);font-weight:500;font-size:var(--t14);line-height:1.25;text-align:left;cursor:pointer;transition:background-color .18s,color .18s}
.tab:hover{background:rgba(255,255,255,.1);color:#fff}
.tab[aria-selected=true]{background:var(--zelena);color:var(--teget);font-weight:600}
.panel{grid-column:4/-1;grid-row:1;display:flex;flex-direction:column;padding:clamp(20px,2.6vw,32px);border-radius:var(--r-kartica);background:#fff;color:var(--teget)}
.js .panel[data-skriven]{display:none}
.panel-glava{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 20px;margin-bottom:20px}
.panel-glava>div{flex:1 1 320px;min-width:0}
.panel-ponovo{color:var(--tekst)}
.panel-saopstenje{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* alat se prilagođava širini panela, a ne ekrana: @container radi i kad su tabovi levo */
.demo{margin-bottom:24px;container-type:inline-size}
.demo-poruka{padding-block:24px;color:var(--siva);font-size:var(--t14)}
.panel-glava h3{font-size:var(--t22)}.panel-glava p{margin-top:6px;color:var(--tekst);line-height:1.55}
.panel-dno{margin-top:auto;padding-top:14px;border-top:1px solid var(--ivica);color:var(--siva);font-size:var(--t14);line-height:1.55}
.panel-moze{display:flex;gap:8px;margin-bottom:6px;color:var(--teget);font-size:var(--t15);line-height:1.45}
.panel-moze .ikona-mala{margin-top:2px;color:var(--zelena-tamna)}
.panel-moze b{font-weight:600}
.panel-poreklo a{display:inline-block;padding-block:12px;margin-block:-12px;font-weight:600;color:var(--zelena-tamna);white-space:nowrap}
.alati-bez-js{max-width:40em;color:var(--na-tegetu)}
.alati-poziv{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--linija-tamna)}
.alati-poziv p{flex:1 1 320px;font-weight:600;font-size:var(--t22);line-height:1.35;letter-spacing:-.01em}

/* delovi demo alata */
.d-savet{display:block;margin-top:8px;color:var(--siva);font-size:var(--t14);line-height:1.4}
.d-savet[hidden]{display:none}
.d-oznaka{display:block;margin-bottom:8px;font-weight:600;font-size:var(--t14)}
.d-izbori{display:flex;flex-wrap:wrap;gap:8px}
.d-izbor{min-height:44px;padding:8px 14px;border:1.5px solid var(--ivica);border-radius:var(--r-malo);background:#fff;font-size:var(--t14);font-weight:500;line-height:1.3;cursor:pointer;transition:border-color .15s,background-color .15s}
.d-izbor small{display:block;color:var(--siva);font-size:.8125rem;font-weight:400}
.d-izbor:hover:not([disabled]){border-color:var(--teget)}
.d-izbor[aria-pressed=true]{border-color:var(--zelena);background:var(--zelena-bleda)}
.d-izbor[disabled]{color:var(--siva);background:var(--pozadina);text-decoration:line-through;cursor:not-allowed}
.d-unos{width:100%;min-width:0;min-height:44px;padding:9px 13px;border:1.5px solid var(--ivica);border-radius:var(--r-malo);background:#fff;font-size:var(--t16)}
.d-unos:focus{outline:3px solid var(--zelena-tamna);outline-offset:1px;border-color:var(--zelena-tamna)}
.d-kutija{padding:18px 20px;border-radius:16px;background:var(--pozadina)}
.d-kutija h4{margin:0 0 6px;font-size:1rem;font-weight:600}
.d-kutija p{font-size:var(--t14);color:var(--tekst)}
.d-uspeh{background:var(--zelena-bleda)}.d-uspeh h4{color:var(--zelena-tamna)}.d-uspeh p{color:var(--teget)}
.d-poruka{margin-top:12px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#fff;font-size:var(--t14);line-height:1.55;overflow-wrap:anywhere}
.d-red{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.d-mini{flex:none;min-width:44px;min-height:44px;padding:4px 12px;border:1px solid var(--ivica);border-radius:10px;background:#fff;font-size:var(--t14);font-weight:500;cursor:pointer}
.d-mini:hover{border-color:var(--teget)}
.d-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.d-tri>div{padding:14px 16px;border-radius:14px;background:var(--pozadina)}
.d-tri strong{display:block;font-weight:600;font-size:var(--t22);line-height:1.3;overflow-wrap:anywhere}
.d-tri small{color:var(--siva);font-size:var(--t14)}
.d-lista{font-size:var(--t14)}
.d-lista li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--ivica)}
.d-lista li:last-child{border-bottom:0}
.d-lista small{color:var(--siva);white-space:nowrap;font-size:var(--t14)}

/* alati imaju zajedničku visinu, da poziv ispod ne skače pri svakom izboru; meri se u proveri alata */
@media (min-width:1100px){
  .panel{min-height:950px}
  .tab{min-height:54px;padding-inline:14px;font-size:var(--t15)}
}
/* do 1440 px je panel viši od ekrana, pa poziv ispod ionako nije na ekranu dok se biraju alati: prvi alat sme da pređe ovu meru */
@media (min-width:1280px){.panel{min-height:880px}}
@media (min-width:1440px){.panel{min-height:830px}}

/* tehnologije: jedan sklopljen red na tegetu, iza upita, kao što je levak odlučio */
.tehnika-panel{padding-top:clamp(6px,1vw,12px);background:var(--teget);color:#fff}
.tehnika summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;position:relative;min-height:64px;padding-block:10px;padding-right:44px;list-style:none;cursor:pointer}
.tehnika summary::-webkit-details-marker{display:none}
.tehnika summary h2{font-size:var(--t18);letter-spacing:-.01em}
.tehnika summary span{color:var(--na-tegetu);font-size:var(--t14);line-height:1.45}
.tehnika summary::after{content:"+";position:absolute;right:0;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;color:var(--zelena-svetla);font-weight:600;font-size:1.375rem;line-height:1}
.tehnika[open] summary::after{content:"\2212"}
.tehnologije{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--g);padding-block:8px 28px}
.tehnologija h3{display:flex;align-items:center;gap:10px;font-size:var(--t16);letter-spacing:0}
.tehnologija h3 .ikona{width:20px;height:20px;color:var(--zelena-svetla)}
.tehnologija ul{display:grid;gap:4px;margin-top:10px;color:var(--na-tegetu);font-size:var(--t14);line-height:1.5}

/* podnožje */
.podnozje{padding:0 var(--spolja) var(--spolja)}
.podnozje-panel{padding-block:clamp(32px,4vw,48px) clamp(14px,1.6vw,20px);background:var(--teget);color:#fff}
.podnozje-mreza{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:28px}
.podnozje-marka{grid-column:span 4}
.podnozje-marka p{margin-top:10px;max-width:22em;color:var(--na-tegetu);font-size:var(--t14);line-height:1.6}
.podnozje-marka .veza-strelica{margin-top:6px;color:var(--zelena-svetla)}
.podnozje-radovi{grid-column:span 5}
.podnozje-sajt{grid-column:span 3}
.podnozje h2{margin-bottom:8px;font-size:var(--t16);letter-spacing:0}
.podnozje-radovi ul,.podnozje-sajt ul{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:var(--g)}
.podnozje li a{display:flex;align-items:center;min-height:44px;color:var(--na-tegetu);font-size:var(--t14);line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
.podnozje li a:hover{color:var(--zelena-svetla);text-decoration:underline}
.podnozje-dno{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;margin-top:20px;padding-top:6px;border-top:1px solid var(--linija-tamna);color:var(--na-tegetu);font-size:var(--t14);line-height:1.4}
.podnozje-dno a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.podnozje-dno a:hover{color:var(--zelena-svetla);text-decoration:underline}
.podnozje-dno>span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 20px;min-height:44px}
/* na početnoj su alati i podnožje jedan tegetni završetak */
.kraj-spojen .podnozje{margin-top:0}
.kraj-spojen .tehnika-panel{border-radius:var(--r-panel) var(--r-panel) 0 0}
.kraj-spojen .podnozje-panel{padding-top:clamp(28px,3vw,36px);border-radius:0 0 var(--r-panel) var(--r-panel);box-shadow:0 -1px 0 var(--teget)} /* senka pokriva spoj na razlomljenoj gustini ekrana, a raspored ne pomera */
.kraj-spojen .podnozje-mreza{padding-top:clamp(28px,3vw,36px);border-top:1px solid var(--linija-tamna)}

/* stranica rada: snimci nose stranu, a panel ih seče pri dnu */
.hero-rad .hero-panel{display:block;padding-block:clamp(16px,2.2vw,28px) 0}
.rad-glava{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.rad-naslov{grid-column:span 7}
.rad-opis{grid-column:span 5}
.rad-opis .uvod{margin-top:0;font-size:var(--t16)}
.rad-opis .dugmad{margin-top:16px}
.rad-opis .dugme{padding-inline:20px}
.rad-put{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:var(--t14)}
.rad-put .veza-strelica{font-size:var(--t14)}
.rad-put .ikona-mala{transition:transform .18s}
.rad-put .veza-strelica:hover .ikona-mala{transform:translateX(-4px)}
.rad-broj{color:var(--tekst)}
.rad-oznaka{padding:3px 12px;border-radius:999px;background:#fff;font-weight:500;line-height:1.5}
.rad-naslov h1{margin-top:2px;font-size:clamp(2rem,4.2vw,var(--t58))}
.rad-ekrani{display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,22vw,300px);column-gap:var(--g);height:calc(clamp(170px,22vw,300px)*1.27);margin-top:clamp(20px,2.6vw,32px)}
.rad-ekrani .okvir{height:100%;border-radius:14px 14px 0 0}
.rad-ekran-slika{height:calc(100% - 30px);overflow:hidden}
.rad-ekran-slika img{width:100%;height:100%;object-fit:cover;object-position:left top}
.rad-ekran-telefon{border:5px solid var(--teget);border-bottom:0;border-radius:24px 24px 0 0}
.rad-tabla{margin-top:clamp(20px,2.6vw,32px)}
.rad-tabla .okvir{border-radius:14px 14px 0 0}
.rad-tabla .via-kolona{margin:0 0 10px;font-weight:600;font-size:13px;line-height:1.35}

/* karton: kolofon rada, četiri kolone sa istom linijom kao u spisku usluga */
.karton{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g)}
.karton>div{padding-top:12px;border-top:2px solid var(--teget)}
.karton dt{font-weight:600;font-size:var(--t14);color:var(--zelena-tamna)}
.karton dd{margin-top:4px;color:var(--tekst);font-size:var(--t15);line-height:1.6;overflow-wrap:anywhere}
.karton dd a{display:inline-block;padding-block:12px;margin-block:-12px;font-weight:500}

/* tekst na istoj osi kao usluge: naslov na prvoj trećini, sadržaj desno */
.red-teksta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.red-teksta>h2{grid-column:span 4;font-size:var(--t28);letter-spacing:-.02em}
.red-teksta>div{grid-column:span 8;min-width:0}
.red-teksta p{max-width:40em;color:var(--tekst);line-height:1.6}
.red-teksta p+p{margin-top:12px}
.spisak{display:grid;gap:14px;margin-top:22px}
.spisak li{display:flex;gap:12px;font-size:.9688rem}
.spisak .ikona-mala{margin-top:4px;color:var(--zelena-tamna)}
.red-teksta .spisak{max-width:40em;margin-top:0;gap:12px}
.red-teksta .spisak li{color:var(--tekst);font-size:var(--t16);line-height:1.6}
.karton-tehnika{max-width:40em;margin-top:18px;border-top:1px solid var(--linija);color:var(--tekst);font-size:var(--t14);line-height:1.6}
.karton-tehnika summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:600;color:var(--zelena-tamna);cursor:pointer}
.karton-tehnika summary::-webkit-details-marker{display:none}
.karton-tehnika summary::after{content:"+";flex:none;font-size:1.125rem}
.karton-tehnika[open] summary::after{content:"\2212"}
.karton-tehnika p{margin-bottom:8px;font-size:var(--t14);overflow-wrap:anywhere}
/* rez unutrašnjeg dela sajta: ono o čemu spisak desno govori */
.ima-rez{grid-template-rows:auto minmax(0,1fr)}
.ima-rez>div{grid-column:5/-1;grid-row:1/span 2}
.rad-rez{grid-column:1/span 4;grid-row:2;align-self:start;margin-top:16px}
.rad-rez img{width:100%;border:1px solid var(--ivica);border-radius:14px;box-shadow:var(--senka)}
.rad-rez figcaption{margin-top:10px;color:var(--siva);font-size:var(--t14);line-height:1.45}
/* paket rada i šta još može, sa vezama ka probama; u panelu izloga isti tekst stoji u poslednjem bloku */
.paket-rad{padding-top:18px;border-top:1px solid var(--linija)}
.paket-rad p{font-size:var(--t16)}
.red-teksta .paket-jos-naslov{font-weight:600;color:var(--teget)}
.paket-jos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:var(--g);max-width:52em}
.paket-jos .veza-strelica{min-height:40px;color:var(--zelena-tamna);line-height:1.3}
.red-teksta .paket-proba{margin-top:2px;color:var(--siva);font-size:var(--t14)}
.i-p-napomena strong:empty{display:none}
.i-p-napomena p:first-of-type{color:var(--teget);font-weight:600}

/* susedni radovi: slika i veliko ime, da strana ne završi spiskom */
.rad-dalje{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);border-block:1px solid var(--linija)}
.rad-susedni{display:flex;align-items:center;gap:16px;min-height:96px;padding-block:14px;text-decoration:none}
.rad-susedni img{flex:none;width:128px;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:10px;box-shadow:var(--senka)}
.sused-tabla{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:4px;width:128px;aspect-ratio:1.6;padding:7px;border-radius:10px;background:var(--teget);box-shadow:var(--senka)}
.sused-tabla i{display:block;height:100%;border-radius:4px;background:rgba(255,255,255,.22)}
.sused-tabla i:nth-child(2){height:72%}.sused-tabla i:nth-child(3){height:48%}.sused-tabla i:nth-child(4){height:26%}
.rad-susedni span{display:grid;gap:0;line-height:1.3;min-width:0}
.rad-susedni small{color:var(--siva);font-size:var(--t14)}
.rad-susedni strong{font-weight:600;font-size:var(--t22);letter-spacing:-.015em}
.rad-susedni:hover strong{color:var(--zelena-tamna)}
.rad-susedni.desno{flex-direction:row-reverse;justify-content:flex-start;text-align:right}

/* tekstualne strane i 404 počinju panelom, kao i ostale */
.strana-panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end;padding-block:clamp(28px,4vw,48px);background:var(--breskva)}
.strana-panel h1{grid-column:span 4}
.strana-panel .uvod{grid-column:span 8;margin-top:0}
.strana-telo{display:grid;gap:clamp(28px,3vw,40px)}
.strana-telo .red-teksta+.red-teksta{padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--linija)}
.red-teksta .veza-licenca{margin-block:-6px -6px;font-size:var(--t14)}
.veza-licenca a{display:inline-block;padding-block:12px;font-weight:500}
.strana-telo ul:not(.spisak) li{color:var(--tekst)}

.strana-kratka main{display:flex;flex-direction:column}
.greska-strana{display:flex;flex-direction:column;flex:1}
.greska-strana .hero{flex:1;display:flex;flex-direction:column}
.greska-strana .hero-panel{flex:1;width:100%;align-items:center;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-block:clamp(28px,4vw,56px)}
.greska-strana .hero-tekst{grid-column:span 5}
.greska-strana .hero-tekst .uvod{margin-top:14px}
.greska-spisak{grid-column:span 7}
.greska-spisak li{border-top:1px solid rgba(12,34,68,.16)}
.greska-spisak li:first-child{border-top:2px solid var(--teget)}
.greska-spisak a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 20px;min-height:56px;padding-block:14px;line-height:1.35;text-decoration:none}
.greska-spisak strong{font-weight:600;font-size:var(--t18);letter-spacing:-.01em}
.greska-spisak small{color:var(--tekst);font-size:var(--t14)}
.greska-spisak a:hover strong{color:var(--zelena-tamna)}

@media (max-width:1360px){
  .rad-naslov,.rad-opis{grid-column:span 6}
}
@media (max-width:900px){
  .spisak-usluga ul,.tim-clanovi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vrednosti-mreza{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spisak-usluga li:last-child{grid-column:span 2}
}
@media (max-width:1180px){
  .rad-naslov,.rad-opis{grid-column:1/-1}
  .rad-opis{margin-top:10px}
  .rad-opis .uvod{max-width:44em}
}
/* rad bez snimka: tabla je ilustracija, pa dobija meru sporednog dela, a ne celu širinu strane */
.rad-tabla .i-via{font-size:13px}
.rad-tabla .i-via header{padding:10px 14px}
/* natpis da je ovo ilustracija čuva tvrdnju o prototipu, pa ne sme da bude najsitniji tekst na strani */
.rad-tabla .i-via header span{font-size:13px}
.rad-tabla .i-via-tabla{gap:6px;padding:6px}
.rad-tabla .i-via-kol{padding:8px 6px 3px}
.rad-tabla .via-kolona{margin:0 4px 6px}
.rad-tabla .i-via-kar{margin-bottom:5px;padding:6px 8px}
@media (min-width:720px){
  .hero-rad .rad-bez-snimka{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g);align-items:center;padding-block:clamp(24px,2.5vw,36px)}
  .rad-bez-snimka .rad-glava{display:block}
  .rad-bez-snimka .rad-opis{margin-top:12px}
  .rad-bez-snimka .rad-tabla{margin-top:0}
  .rad-bez-snimka .okvir{border-radius:14px}
}
@media (max-width:1099px){
  .rad-tabla .i-via-tabla{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .traka-usluge{align-self:start}
  .alati-okvir{display:block}
  .tabovi{position:static;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
  .tab{padding-inline:10px}
}
@media (max-width:1000px){
  .nav-siroka{display:none}.nav-uska{display:block}
  .zaglavlje-red{grid-template-columns:minmax(0,1fr) auto}
  .usluga-naslov,.usluga-telo{grid-column:1/-1}
  .usluga-telo{margin-top:8px}
  .podnozje-marka{grid-column:1/-1}
  .podnozje-radovi,.podnozje-sajt{grid-column:span 6}
  .podnozje-radovi ul,.podnozje-sajt ul{display:block}
  .karton{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .tehnologije{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uvod{font-size:var(--t16)}
}
/* na tabletu tekst je uzak i visok, pa scena dobija više širine, a 404 zadržava razmak ispod teksta */
@media (min-width:720px) and (max-width:1000px){
  .hero>.hero-panel:has(.ua){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .greska-strana .hero-tekst{padding-bottom:clamp(24px,2.5vw,36px)}
}
@media (max-width:860px){
  .usluge-sekcija{display:block}
  .usluge{margin-top:20px}
  .usluga:first-child{padding-top:24px;border-top:1px solid var(--linija)}
  .usluga:last-child{padding-bottom:24px}
  .traka-usluge{margin-top:0}
  .traka-slika{display:none}
  .proces-panel .sekcija-glava{display:block}
  .proces-panel .sekcija-glava p{margin-top:8px}
  .koraci{grid-auto-flow:row;row-gap:22px;padding:0 0 0 30px}
  .korak:not(:last-child)::before{left:-23px;right:auto;top:8px;bottom:-28px;width:1px;height:auto}
  .korak-tacka{left:-30px;top:6px}
  .o-nama h2,.o-nama-tekst,.o-nama-sa-slikom h2,.o-nama-sa-slikom .o-nama-tekst,.o-nama-strana{grid-column:1/-1;grid-row:auto}
  .o-nama-tekst{margin-top:14px}
  .o-nama-strana{margin-top:24px}
  .kontakt-panel,.kontakt-usko{grid-template-columns:minmax(0,1fr)}
  .kontakt-usko{gap:16px}
  .kontakt-usko .dugme{justify-self:start}
  .alati-naslov,.alati-glava>p{grid-column:1/-1}
  .alati-glava>p{margin-top:10px}
  .tab .ikona-mala{display:none}
  .d-kolone{grid-template-columns:minmax(0,1fr)}
  .red-teksta>h2,.red-teksta>div{grid-column:1/-1}
  .red-teksta>div{margin-top:12px}
  .ima-rez>div{grid-row:auto;margin-top:18px}
  .rad-rez{grid-column:1/-1;grid-row:auto;max-width:420px;margin-top:12px}
  .strana-panel h1,.strana-panel .uvod{grid-column:1/-1}
  .strana-panel .uvod{margin-top:10px}
  .greska-strana .hero-tekst,.greska-spisak{grid-column:1/-1}
  .greska-spisak{margin-top:24px}
}
@media (max-width:760px){
  /* ista visina kao zakačena scena izloga (70 px) */
  :root{--zaglavlje:66px;--spolja:8px;--prvi:8px}
  html{scroll-padding-top:calc(var(--zaglavlje) + 4px)}
}
@media (max-width:719px){
  .hero-panel{grid-template-columns:minmax(0,1fr);gap:24px}
  h1{font-size:clamp(2rem,8.6vw,2.75rem)}
  .tabovi{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* na telefonu sused je samo ime: sličica bi krivila red kad su radovi različitih dužina */
  .rad-susedni img,.rad-susedni .sused-tabla{display:none}
  .rad-susedni{align-items:flex-start;min-height:64px}
  .rad-susedni strong{font-size:var(--t18);overflow-wrap:anywhere}
  .spisak-usluga ul,.tim-clanovi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spisak-usluga li{font-size:var(--t15)}
  .spisak-usluga li:last-child{grid-column:auto}
}
@media (max-width:640px){
  .vrednosti-mreza{grid-template-columns:minmax(0,1fr);gap:8px}
  .vrednost{gap:6px 10px;padding:12px 14px 14px}
  .vrednost .ikona-boja{width:36px;height:36px}
  .vrednost h3{font-size:var(--t16)}
  .vrednost p{font-size:var(--t14)}
}
@media (max-width:560px){
  :root{--unutra:16px}
  .izlog{font-size:15.500px}
  .zaglavlje-red{gap:8px}
  .tab{padding-inline:12px}
  .dugmad .dugme{flex:1 1 100%}
  .poziv-red .dugme,.alati-poziv .dugme{flex:none}
  .d-unos{font-size:1rem}
  .d-tri{grid-template-columns:minmax(0,1fr)}
  .d-tri>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .d-zbir{margin-left:0;min-width:0;width:100%}
  .podnozje-mreza{row-gap:20px}
  /* dva kadra jedan do drugog: računar seče okvir, a ne drugi ekran preko njega */
  .rad-ekrani{grid-template-columns:minmax(0,62fr) minmax(0,38fr);column-gap:10px;height:auto;aspect-ratio:342/188}
  .rad-ekrani .rad-ekran-telefon{border-width:3px;border-radius:16px 16px 0 0}
  .rad-ekran-telefon img{width:100%;height:100%;object-fit:cover;object-position:left top}
  /* naslov tog sajta je centriran: levi deo bi ga presekao po sredini reči */
  .rad-ekran-slika.na-sredini img{object-position:center top}
  .karton{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .karton>div{padding-top:10px;border-top-width:1px;border-top-color:var(--linija)}
  .karton>div:first-child{border-top:2px solid var(--teget)}
  .greska-spisak a{flex-direction:column;align-items:flex-start}
  .upit-panel{padding-block:20px;gap:28px}
  .upit-panel .upit-uvod{margin-top:8px;margin-bottom:14px}
  .upit{gap:14px}
  .upit>button[type=submit]{width:100%}
  .ima-povod .upit-uvod{display:none}
  .ima-povod h1{font-size:1.5rem}
  .ima-povod .upit-povod{flex-wrap:nowrap}
  .ima-povod .upit{gap:12px}
  .ima-povod .upit{margin-top:10px}
}
@media (min-width:561px){
  .upit>button[type=submit]{justify-self:start}
  .upit .d-izbori{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .upit-jos .d-izbori{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:359px){
  .okvir-traka{padding-inline:8px}
  .tehnologije{grid-template-columns:minmax(0,1fr)}
  .zaglavlje .dugme-malo{padding-inline:14px}
  /* na najmanjem telefonu dugme forme mora da stane na prvi ekran */
  .upit-panel .upit-uvod{display:none}
  .upit-panel{padding-block:14px}
  .upit-levo .upit{margin-top:10px}
  .upit-polje>label,.upit-polje>legend{margin-bottom:4px}
  .upit .d-izbori{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .upit-izbor span{padding-inline:10px}
  .ima-povod textarea{height:44px}
  .ima-povod h1{font-size:1.3125rem}
  .ima-povod .upit-povod{padding:3px 10px}
  .upit-panel:has(.ima-povod){padding-top:8px}
  .ima-povod .upit{gap:6px}
  .spisak-usluga ul,.tim-clanovi,.vrednosti-mreza{grid-template-columns:minmax(0,1fr)}
}
/* u vrlo uskom prozoru ostaje znak, a naziv se ne vidi, da meni ne ispadne sa ekrana */
@media (max-width:300px){.zaglavlje .marka{justify-content:center;min-width:44px}.zaglavlje .marka span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.dugmad .dugme{padding-inline:16px}}
/* dvanaest kolona sa punim razmakom ne staje u najuži prozor */
@media (max-width:280px){:root{--g:8px}}
/* nizak prozor računara: forma se steže da dugme ostane na prvom ekranu */
@media (min-width:861px) and (max-height:760px){
  .upit-strana .upit-panel{padding-block:24px}
  .upit-strana h1{font-size:var(--t28)}
  .upit-strana .upit-uvod{margin-bottom:12px}
  .upit-strana .ima-povod .upit-uvod{display:none}
  .upit-strana .ima-povod .upit{margin-top:12px}
  .upit-strana .upit{gap:12px}
  .upit-strana .upit-polje>label,.upit-strana .upit-polje>legend{margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}
@media print{.zaglavlje,.alati,.podnozje{display:none}}

/* Prvi ekran: jedan posao u tri poglavlja. Osnovna pravila crtaju KRAJ svakog poglavlja: to vidi i ko je isključio pokret i ko nema JavaScript, a kad animacija stane, ništa ne skače.
   Animacije samo opisuju put do kraja, i to preko transform, translate, scale i opacity. Sve mere u sceni su u --u, jedinici koja raste sa pozornicom, pa je razmer stalan, a strana se ne pomera. */
.ua{container-type:inline-size;min-width:0;--koral:#ff6f59;--nebo:#cfe9ff;--glatko:cubic-bezier(.4,0,.2,1);--izlaz:cubic-bezier(.16,1,.3,1);--opruga:cubic-bezier(.34,1.5,.64,1);--put-a:cubic-bezier(.42,.02,.14,1);--put-b:cubic-bezier(.68,.02,.3,1)}
/* Telefon i tablet u dve kolone, 342x240. Ispod su raspored za najuže, srednji i za računar (629x348). */
.ua-pozornica{--u:calc(100cqw/342);--f1:calc(14*var(--u));--f2:calc(13.5*var(--u));--f3:calc(12.5*var(--u));--f4:calc(11*var(--u));--p:calc(8*var(--u));--dno:calc(22*var(--u));--r:calc(8*var(--u));--g:calc(5*var(--u));--red:calc(17*var(--u));--dug:calc(24*var(--u));--pil:calc(22*var(--u));--ik:calc(13*var(--u));--kur:calc(17*var(--u));--lice:calc(20*var(--u));--vis-a:calc(20*var(--u));--vis-s:calc(24*var(--u));--vrh-l:calc(var(--vis-a) + var(--vis-s));--vrh-d:calc(20*var(--u));--sina:0px;--pd:var(--p);--stavka:calc(32*var(--u));--kp:calc(4*var(--u));--kph:calc(6*var(--u));position:relative;aspect-ratio:342/240;font-size:var(--f3);line-height:1.3;color:var(--teget)}
@container (max-width:339px){.ua-pozornica{--u:calc(100cqw/300);--p:calc(5*var(--u));--r:calc(6*var(--u));--kph:calc(5*var(--u));aspect-ratio:300/228}}
@container (min-width:430px){.ua-pozornica{--u:calc(100cqw/440);--f1:calc(15*var(--u));--f2:calc(14*var(--u));--p:calc(11*var(--u));--dno:calc(24*var(--u));--r:calc(10*var(--u));--red:calc(21*var(--u));--dug:calc(30*var(--u));--pil:calc(26*var(--u));--ik:calc(15*var(--u));--kur:calc(19*var(--u));--lice:calc(22*var(--u));--vis-a:calc(24*var(--u));--vis-s:calc(28*var(--u));--vrh-d:calc(24*var(--u));--kp:calc(5*var(--u));--kph:calc(8*var(--u));aspect-ratio:440/272}}
@container (min-width:540px){.ua-pozornica{--u:calc(100cqw/629);--f1:calc(17*var(--u));--f2:calc(15*var(--u));--f3:calc(14*var(--u));--f4:calc(12*var(--u));--p:calc(16*var(--u));--dno:calc(16*var(--u));--r:calc(14*var(--u));--g:calc(8*var(--u));--red:calc(30*var(--u));--dug:calc(42*var(--u));--pil:calc(38*var(--u));--ik:calc(16*var(--u));--kur:calc(22*var(--u));--lice:calc(24*var(--u));--vis-a:calc(28*var(--u));--vis-s:calc(40*var(--u));--vrh-d:0px;--sina:calc(92*var(--u));--pd:calc(12*var(--u));--kp:calc(8*var(--u));--kph:calc(10*var(--u));aspect-ratio:629/348}}

/* Tačke za pokret, po rasporedu, u jedinici --u od gornjeg levog ugla pozornice. Mere se iz elemenata, a biraju tako da kursor u mirovanju ne pokriva tekst: ako se promeni tekst ili mera, mere se ponovo.
   k je kursor Kupac (k0 Izaberite termin, k1 Uto, k2 10:00, k5 polje za ime, k3 Pošaljite, k4 kod veze), v je kursor Vi (v0 polje cene, v4 mesto za čekanje u prvom poglavlju, v1 Potvrdite, v2 Pošaljite ponudu, v3 Upišite), l1 do l4 su polazišta letova, s2 je mesto zbira, a za je pomak imena u ponudi. */
.ua-pozornica{--k0x:67.4;--k0y:216;--k1x:43.6;--k1y:109.1;--k2x:46.3;--k2y:137;--k5x:87.3;--k5y:160.9;--k3x:67.4;--k3y:216;--k4x:101.4;--k4y:219;--v0x:254.1;--v0y:175.4;--v4x:209.1;--v4y:140.8;--v1x:295.3;--v1y:136.8;--v2x:271.8;--v2y:216;--v3x:263.9;--v3y:84.9;--l1x:-175;--l1y:127.5;--l2x:175;--l2y:93.7;--l3x:80.7;--l3y:79.3;--l4x:93.6;--l4y:-47.4;--s2:75;--za:21.6}
@container (max-width:339px){.ua-pozornica{--k0x:62.6;--k0y:204.1;--k1x:39.4;--k1y:107.4;--k2x:42;--k2y:135.2;--k5x:81.8;--k5y:159.2;--k3x:62.6;--k3y:204.1;--k4x:96.6;--k4y:207.1;--v0x:238.7;--v0y:163.5;--v4x:188.3;--v4y:139.2;--v1x:262.8;--v1y:135.2;--v2x:244.6;--v2y:204.1;--v3x:226.4;--v3y:61.9;--l1x:-153.1;--l1y:117.3;--l2x:153.1;--l2y:83.6;--l3x:72.8;--l3y:69.3;--l4x:8;--l4y:-24.6;--s2:97.1;--za:21.6}}
@container (min-width:430px){.ua-pozornica{--k0x:87;--k0y:246.2;--k1x:74.4;--k1y:127.1;--k2x:93.6;--k2y:159.2;--k5x:112.3;--k5y:186.6;--k3x:87;--k3y:246.2;--k4x:121;--k4y:249.2;--v0x:304.5;--v0y:196.4;--v4x:269.7;--v4y:157.9;--v1x:378.4;--v1y:153.9;--v2x:344.6;--v2y:246.2;--v3x:347.9;--v3y:97;--l1x:-225.1;--l1y:145.5;--l2x:225.1;--l2y:100.5;--l3x:88.7;--l3y:89.4;--l4x:135.4;--l4y:-48.4;--s2:87;--za:21.6}}
@container (min-width:540px){.ua-pozornica{--k0x:205.9;--k0y:316.7;--k1x:104;--k1y:174.8;--k2x:130.3;--k2y:223;--k5x:155.5;--k5y:264.3;--k3x:205.3;--k3y:316.7;--k4x:192.1;--k4y:322.7;--v0x:490.2;--v0y:261.8;--v4x:451.3;--v4y:171.7;--v1x:570;--v1y:167.7;--v2x:581.3;--v2y:316.7;--v3x:538.6;--v3y:100.1;--l1x:-373.1;--l1y:236.6;--l2x:373.1;--l2y:136.6;--l3x:217.2;--l3y:125.7;--l4x:144.9;--l4y:-71;--s2:113.7;--za:24.6}}

.ua-pozornica b{font-weight:600}
.ua-pozornica .ikona-mala{width:var(--ik);height:var(--ik);flex:none}

/* Stalni okviri: stoje dok se sadržaj poglavlja menja. Levo je sajt kupca, svetao, sa trakom pregledača. Desno je vaš panel, teget. */
.ua-ram,.ua-scena{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:var(--r)}
@container (max-width:339px){.ua-pozornica .ua-ram,.ua-pozornica .ua-scena{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@container (min-width:540px){.ua-pozornica .ua-ram,.ua-pozornica .ua-scena{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr)}}
.ua-okvir{position:relative;min-width:0;border-radius:var(--r-malo);background:var(--bela);box-shadow:0 0 0 1px rgba(12,34,68,.05),0 10px 26px rgba(12,34,68,.1);overflow:hidden}
.ua-adresa{display:flex;align-items:center;height:var(--vis-a);padding-inline:calc(4*var(--u));background:#eceff4;color:var(--siva);white-space:nowrap}
.ua-url{display:flex;align-items:center;gap:calc(3*var(--u));min-width:0;flex:1;height:calc(var(--vis-a) - 4*var(--u));padding-inline:calc(6*var(--u));border-radius:999px;background:var(--bela);overflow:hidden}
.ua-pozornica .ua-adresa .ikona-mala{width:calc(.75*var(--ik));height:calc(.75*var(--ik));color:var(--zelena-tamna)}
.ua-domen{display:inline-flex}
/* Ono što se animira ne dobija display iz @container: dobija visibility i širinu, inače ostaje na početnom stanju. */
.ua-put-omot{display:inline-grid;grid-template-areas:"a";width:0;overflow:hidden;visibility:hidden}
.ua-put-omot>*{grid-area:a;opacity:0}
.ua-sajt-glava{display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:var(--vis-a);height:var(--vis-s);background:var(--nebo);padding-inline:var(--p);font-size:var(--f2)}
.ua-sajt-glava b{display:flex;align-items:center;gap:calc(5*var(--u));white-space:nowrap}
.ua-znak{flex:none;width:calc(1.2*var(--f2));height:calc(1.2*var(--f2))}
.ua-meni{display:none;gap:calc(12*var(--u));font-size:var(--f3);color:var(--teget-svetlija)}
.ua-panel-traka{display:flex;align-items:center;justify-content:space-between;gap:calc(6*var(--u));height:var(--vrh-d);padding-inline:var(--p);background:var(--teget);color:var(--bela);font-weight:600;white-space:nowrap}
.ua-odeljak{display:inline-grid;justify-items:end;font-weight:400;color:var(--na-tegetu)}
.ua-odeljak>*{grid-area:1/1;opacity:0;transform:translateY(calc(5*var(--u)));transition:opacity .15s,transform .3s var(--izlaz)}
.ua-sina{display:none;position:absolute;inset:0 auto 0 0;width:var(--sina);flex-direction:column;padding:calc(13*var(--u)) calc(6*var(--u)) calc(11*var(--u));background:var(--teget);color:var(--na-tegetu)}
.ua-sina>b{color:var(--bela);padding-inline:calc(6*var(--u));margin-bottom:calc(10*var(--u));white-space:nowrap}
.ua-sina>span{position:relative;display:flex;align-items:center;gap:calc(4*var(--u));height:var(--stavka);padding-inline:calc(5*var(--u));transition:color .2s}
.ua-pozornica .ua-sina .ikona-mala{width:calc(14*var(--u));height:calc(14*var(--u))}
.ua-sina>small{display:grid;gap:calc(4*var(--u));margin-top:auto;padding:calc(10*var(--u)) calc(6*var(--u)) 0;border-top:1px solid var(--linija-tamna);font-size:var(--f4);line-height:1.2}
.ua-o{position:absolute;visibility:hidden;left:calc(6*var(--u));width:calc(var(--sina) - 12*var(--u));top:calc(13*var(--u) + 1.3*var(--f3) + 10*var(--u));height:var(--stavka);border-radius:calc(7*var(--u));background:rgba(255,255,255,.14)}
.ua-o::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:calc(3*var(--u));border-radius:calc(2*var(--u));background:var(--zelena-svetla)}
.ua-alat .ua-o{transform:translateY(var(--stavka))}
.ua-posao .ua-o{transform:translateY(calc(3*var(--stavka)))}

/* Sadržaj poglavlja. Pretop je u dva koraka: staro skoro nestane, pa dođe novo, da se dva teksta ne čitaju jedan preko drugog. */
.ua-scena{visibility:hidden;transition:visibility 0s .12s}
.ua-scena.aktivna{visibility:visible;transition:none}
.ua-levo,.ua-desno{position:relative;min-width:0;display:flex;flex-direction:column;gap:var(--g);padding:calc(var(--vrh-l) + var(--p)*.6) var(--p) var(--dno)}
.ua-desno{padding:calc(var(--vrh-d) + var(--p)*.6) var(--pd) var(--dno) calc(var(--sina) + var(--pd))}
/* Let ide preko okvira: sadržaj je u sloju iznad njih, a levi sloj mora preko desnog. */
.ua-alat .ua-levo,.ua-posao .ua-levo{z-index:3}
.ua-levo>*,.ua-desno>*{opacity:0;transition:opacity .12s}
.aktivna>.ua-levo>*,.aktivna>.ua-desno>*{opacity:1;transition:opacity .22s .06s}
/* Sidro ostaje na mestu dok se oko njega sve pretapa. visibility:visible na detetu bi probilo skrivenu scenu, zato uvek uz .aktivna. */
.ua-pozornica .ua-stalno{opacity:1;transition:none;visibility:hidden}
.ua-pozornica .aktivna .ua-stalno:not(.ua-o){visibility:visible}
.ua-naslov{font-size:var(--f1);line-height:1.25;white-space:nowrap}
.ua-red{display:flex;align-items:center;justify-content:space-between;gap:calc(5*var(--u));min-height:var(--red);color:var(--tekst);white-space:nowrap}
.ua-red b{color:var(--teget)}
.ua-sidro{color:var(--teget);font-weight:500}
.ua-sir,.ua-pilule .ua-sir,.ua-rsd,.ua-raniji-naslov{display:none}
.ua-usluga{position:relative;isolation:isolate}
.ua-usluga::before,.ua-oznacen::before{content:"";position:absolute;inset:0 calc(-4*var(--u));z-index:-1;border-radius:calc(6*var(--u));background:var(--zelena-bleda)}
.ua-oznacen{position:relative;isolation:isolate}
.ua-red b.ua-nova-cena{color:var(--zelena-tamna)}

/* Broj koji teče: jedna cifra se kotrlja u prozoru visokom jedan red. U osnovi stoji nova vrednost. */
.ua-tok{display:inline-block;height:1.3em;line-height:1.3;overflow:hidden;vertical-align:bottom}
.ua-tok>span{display:grid;transform:translateY(calc(var(--n)*-1.3em))}
.ua-tok i{display:block;height:1.3em;font-style:normal;text-align:center}

.ua-pilule{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(4*var(--u))}
.ua-pilule>*{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:var(--pil);border:1px solid var(--linija);border-radius:calc(6*var(--u));white-space:nowrap;color:var(--teget);font-weight:500}
.ua-pilule>.na{font-weight:600}
.ua-pilule>.na::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--zelena)}
.ua-unos{position:relative;display:flex;align-items:center;min-height:var(--pil);padding-inline:calc(7*var(--u));border:1px solid var(--linija);border-radius:calc(6*var(--u));color:var(--teget);font-weight:500}
/* Kucanje: bela zavesa sa treptajem klizi udesno i otkriva ime. U osnovi je zavese nema. */
.ua-kucano{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;padding-right:calc(2*var(--u))}
.ua-kucano::before,.ua-kucano::after{content:"";position:absolute;inset:0;background:var(--bela);opacity:0}
.ua-kucano::after{border-left:calc(1.5*var(--u)) solid var(--teget)}
.ua-mesto{position:relative;display:grid;margin-top:auto;min-height:var(--dug)}
.ua-mesto>*{grid-area:1/1}
.ua-dugme-s,.ua-gotovo{display:flex;align-items:center;justify-content:center;gap:calc(4*var(--u));min-height:var(--dug);margin:0;border-radius:999px;font-weight:600;white-space:nowrap}
.ua-dugme-s{background:var(--zelena);color:var(--teget);opacity:0}
.ua-pozornica .ua-termin{opacity:1}
.ua-gotovo{background:var(--zelena-bleda);color:var(--zelena-tamna)}

/* Zahtev u panelu: mesto koje čeka, pa kartica sa znakom kupca. */
.ua-zahtev-mesto{position:relative;z-index:2;display:grid}
.ua-zahtev-mesto>*{grid-area:1/1}
.ua-prazno{display:flex;align-items:center;justify-content:center;border:1px dashed var(--siva-svetla);border-radius:calc(7*var(--u));color:var(--siva);text-align:center;white-space:normal;opacity:0}
.ua-zahtev,.ua-desno .ua-za{position:relative;display:grid;grid-template-columns:var(--lice) minmax(0,1fr);column-gap:calc(6*var(--u));align-items:center;padding:var(--kp) var(--kph);border:1px solid var(--linija);border-radius:calc(7*var(--u));background:var(--bela);color:var(--tekst)}
.ua-zahtev>span{grid-column:2;white-space:nowrap}
.ua-zahtev b{color:var(--teget);font-size:var(--f2);line-height:var(--lice)}
/* Senka leta i oznaka potvrde su slojevi, pa se pali samo providnost. */
.ua-zahtev::before{content:"";position:absolute;inset:-1px;border:1px solid var(--zelena);border-radius:inherit}
.ua-zahtev::after,.ua-dokument::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--senka-velika);opacity:0;pointer-events:none}
.ua-kad>span{display:inline-block;padding-inline:calc(4*var(--u));margin-left:calc(-4*var(--u));border-radius:calc(4*var(--u));background:#fff1e8;color:var(--teget);white-space:nowrap}
.ua-lice{display:grid;place-items:center;width:var(--lice);height:var(--lice);border-radius:50%;background:var(--koral);color:var(--teget);font-style:normal;font-weight:600;font-size:var(--f4);line-height:1;letter-spacing:-.02em}
.ua-odluka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:calc(4*var(--u))}
.ua-odluka .ua-mesto{margin:0}
.ua-odbij{display:flex;align-items:center;justify-content:center;min-height:var(--dug);border:1px solid var(--linija);border-radius:999px;color:var(--tekst);font-weight:600;white-space:nowrap}
.ua-raniji{display:grid;margin-top:auto;padding-top:calc(3*var(--u));border-top:1px solid var(--linija)}
.ua-raniji .ua-red{position:relative;padding-left:calc(9*var(--u));color:var(--siva);gap:calc(2*var(--u))}
.ua-raniji .ua-red::before{content:"";position:absolute;left:0;top:50%;width:calc(5*var(--u));height:calc(5*var(--u));margin-top:calc(-2.5*var(--u));border-radius:50%;background:var(--zelena)}
.ua-raniji .ua-red:nth-of-type(n+4){display:none}

/* Ponuda: desno se sastavlja, levo stiže kao list papira. */
.ua-za-u{display:flex;align-items:center;gap:.3em;line-height:var(--lice)}
.ua-desno .ua-za b{position:relative;z-index:2;color:var(--teget);font-size:var(--f2)}
.ua-stavke{display:grid;gap:calc(2*var(--u))}
.ua-zbir{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--red) + 3*var(--u));border-top:1px solid var(--linija);font-weight:600;white-space:nowrap}
.ua-alat .ua-levo{padding-inline:calc(var(--p)*.6);padding-top:calc(var(--vrh-l) + var(--p)*.6)}
.ua-alat .ua-levo::before{content:"";position:absolute;inset:var(--vrh-l) 0 0;z-index:-1;border-radius:0 0 var(--r-malo) var(--r-malo);background:var(--povrsina);opacity:0;transition:opacity .12s}
.ua-alat.aktivna .ua-levo::before{opacity:1;transition:opacity .22s .06s}
.ua-pdf-glava{display:flex;align-items:center;justify-content:space-between}
.ua-pdf-glava em{padding:0 calc(5*var(--u));border-radius:calc(4*var(--u));background:var(--teget);color:var(--bela);font-style:normal;font-weight:600;font-size:var(--f4);line-height:1.5}
.ua-levo .ua-za{display:flex;align-items:baseline;gap:.3em;color:var(--tekst)}
.ua-levo .ua-za b{color:var(--teget);font-size:var(--f2)}
.ua-dokument{position:relative;z-index:2;display:grid;gap:calc(3*var(--u));padding:calc(5*var(--u)) calc(6*var(--u)) calc(3*var(--u));border-radius:calc(8*var(--u));background:var(--bela);box-shadow:0 0 0 1px rgba(12,34,68,.07),0 3px 10px rgba(12,34,68,.08)}
.ua-cekanje{position:absolute;left:calc(var(--p)*.6);right:calc(var(--p)*.6);top:calc(var(--vrh-l) + var(--p)*.6);bottom:calc(var(--dno) + var(--dug) + var(--g))}
/* Unutrašnji omot ima svoju animaciju, a spoljašnji bledi sa pretopom: element sa backwards bi inače preskočio pretop. */
.ua-cekanje-u{opacity:0}
.ua-cekanje>.ua-cekanje-u{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:calc(2*var(--u));height:100%;padding:calc(6*var(--u));border-radius:calc(8*var(--u));background:var(--bela);color:var(--tekst);white-space:nowrap}
.ua-cekanje i{--traka:repeating-linear-gradient(#e8ecf2 0 calc(.42*var(--f3)),transparent 0 calc(var(--red) + 3*var(--u)));display:block;margin-top:calc(6*var(--u));background:var(--traka) left/52% 100% no-repeat,var(--traka) right/20% 100% no-repeat}
.ua-cekanje-dugme{position:absolute;left:var(--p);right:var(--p);bottom:var(--dno);display:grid}
.ua-link{display:flex;align-items:center;justify-content:center;gap:calc(4*var(--u));margin-top:auto;min-height:var(--red);color:var(--teget);font-weight:500;white-space:nowrap}
.ua-pozornica .ua-link .ikona-mala{display:none;color:var(--zelena-tamna)}
.ua-link-panel{position:absolute;visibility:hidden;width:0;display:flex;align-items:center;gap:calc(5*var(--u));min-height:calc(var(--pil)*.8);padding-inline:calc(8*var(--u));border-radius:calc(6*var(--u));background:var(--povrsina);color:var(--tekst);white-space:nowrap;overflow:hidden}
.ua-pozornica .ua-link-panel .ikona-mala{color:var(--zelena-tamna)}

/* Klijenti i prihodi: dva posla i zbir koji iz njih izlazi. */
.ua-prvi-klijent{color:var(--siva)}
.ua-prvi-klijent b{color:var(--tekst);font-weight:500}
.ua-ana-ime{display:flex;align-items:center;gap:calc(4*var(--u));color:var(--teget);font-weight:500}
.ua-klijent{gap:calc(3*var(--u))}
.ua-klijent .ua-lice{width:calc(var(--lice)*.85);height:calc(var(--lice)*.85);font-size:var(--f4)}
.ua-iznos{position:relative;z-index:2;box-shadow:0 0 0 calc(3*var(--u)) var(--bela)}
.ua-pilula{display:inline-grid;align-items:center;margin-right:auto;color:var(--zelena-tamna);font-weight:600;font-size:var(--f4)}
.ua-pilula>*{grid-area:1/1}
.ua-pilula .ua-upisi,.ua-pilula .ua-upisano-t{position:absolute;visibility:hidden}
.ua-pilula .ua-upisi{opacity:0}
.ua-plocice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(4*var(--u))}
.ua-plocica{position:relative;display:grid;align-content:space-between;gap:calc(1*var(--u));min-height:calc(46*var(--u));padding:calc(5*var(--u)) calc(5*var(--u));border-radius:calc(6*var(--u));background:var(--povrsina);color:var(--tekst);white-space:nowrap}
.ua-plocica b{color:var(--teget)}
.ua-plocica-p::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--zelena-bleda);opacity:0}
.ua-plocica-p>*{position:relative}
.ua-iznos-let{position:absolute;left:calc(5*var(--u));bottom:calc(4*var(--u));padding-inline:calc(3*var(--u));margin-left:calc(-3*var(--u));border-radius:calc(4*var(--u));background:var(--bela);box-shadow:0 4px 14px rgba(12,34,68,.22);color:var(--zelena-tamna);font-weight:600;white-space:nowrap;z-index:6;opacity:0}
.ua-polje{position:relative;display:flex;align-items:center;min-height:var(--dug);padding-inline:calc(7*var(--u));border:1px solid var(--linija);border-radius:calc(6*var(--u));color:var(--teget);font-weight:600}
.ua-prsten{position:absolute;inset:-1px;border:calc(1.5*var(--u)) solid var(--zelena-tamna);border-radius:inherit;opacity:0}
/* Cena leti kao pločica sa senkom: tekst bez podloge se preko teget trake ne čita. U osnovi je nema. */
.ua-cena-let{position:absolute;right:calc(-4*var(--u));top:50%;margin-top:calc(-.65*var(--f3) - 2*var(--u));padding:calc(2*var(--u)) calc(4*var(--u));border-radius:calc(6*var(--u));background:var(--bela);box-shadow:0 4px 14px rgba(12,34,68,.22);color:var(--zelena-tamna);font-weight:600;white-space:nowrap;z-index:6;opacity:0}
.ua-cena{display:grid;gap:calc(2*var(--u));margin-top:auto;padding-top:calc(5*var(--u));border-top:1px solid var(--linija)}
.ua-na-sajtu{display:flex;align-items:center;gap:calc(4*var(--u));margin:0;min-height:var(--red);color:var(--zelena-tamna);font-weight:600;white-space:nowrap}

/* Kursori su direktna deca poglavlja, zato ne blede pri pretopu. Vrh strelice je tačka iz rasporeda, a --pomak odbija koliko je vrh daleko od ugla slike. Vodoravno ide preko transform, a uspravno preko translate, jer se tako dve ose mogu kretati različitim tempom, pa put nije prava linija. */
.ua-pokazivac{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:flex-start;pointer-events:none;visibility:hidden;color:var(--teget);--pomak:translate(calc(-.21*var(--kur)),calc(-.1*var(--kur)))}
.aktivna>.ua-pokazivac{visibility:visible}
.ua-pokazivac svg{display:block;flex:none;width:var(--kur);height:var(--kur);transform-origin:21% 10%;filter:drop-shadow(0 1px 1.5px rgba(12,34,68,.35))}
.ua-pokazivac em{margin:calc(.42*var(--kur)) 0 0 calc(-.2*var(--kur));padding:calc(1*var(--u)) calc(5*var(--u));border-radius:calc(5*var(--u));font-style:normal;font-weight:600;font-size:max(11px,calc(11*var(--u)));line-height:1.25;color:var(--bela);background:var(--teget);white-space:nowrap;box-shadow:0 1px 3px rgba(12,34,68,.25)}
/* Talas na mestu pritiska. */
.ua-pokazivac::before{content:"";position:absolute;left:calc(.21*var(--kur));top:calc(.1*var(--kur));width:calc(30*var(--u));height:calc(30*var(--u));margin:calc(-15*var(--u)) 0 0 calc(-15*var(--u));border:calc(2*var(--u)) solid currentColor;border-radius:50%;opacity:0}
.ua-pokazivac.kupac{color:var(--koral)}
.ua-pokazivac.kupac em{background:var(--koral);color:var(--teget)}
.ua-pokazivac.kupac svg path{fill:var(--koral)}
.ua-sajt>.kupac{transform:translateX(calc(var(--k3x)*var(--u))) var(--pomak);translate:0 calc(var(--k3y)*var(--u))}
.ua-sajt>.vi{transform:translateX(calc(var(--v1x)*var(--u))) var(--pomak);translate:0 calc(var(--v1y)*var(--u))}
.ua-alat>.kupac{transform:translateX(calc(var(--k4x)*var(--u))) var(--pomak);translate:0 calc(var(--k4y)*var(--u))}
.ua-alat>.vi{transform:translateX(calc(var(--v2x)*var(--u))) var(--pomak);translate:0 calc(var(--v2y)*var(--u))}
.ua-posao>.kupac{transform:translateX(calc(var(--k0x)*var(--u))) var(--pomak);translate:0 calc(var(--k0y)*var(--u))}
.ua-posao>.vi{transform:translateX(calc(var(--v0x)*var(--u))) var(--pomak);translate:0 calc(var(--v0y)*var(--u))}

/* Stanje okvira po poglavlju */
.ua-pozornica:has(.ua-sajt.aktivna) .ua-od-1,.ua-pozornica:has(.ua-sajt.aktivna) .ua-put-1,.ua-pozornica:has(.ua-alat.aktivna) .ua-od-2,.ua-pozornica:has(.ua-alat.aktivna) .ua-put-2,.ua-pozornica:has(.ua-posao.aktivna) .ua-od-4,.ua-pozornica:has(.ua-posao.aktivna) .ua-put-3{opacity:1;transform:none}
.ua-pozornica:has(.ua-sajt.aktivna) .ua-st-1,.ua-pozornica:has(.ua-alat.aktivna) .ua-st-2,.ua-pozornica:has(.ua-posao.aktivna) .ua-st-4{color:var(--bela)}

/* Veća pozornica prima više sadržaja, a ne sitniji: put u adresi, sve dane i sate, a na računaru i traku panela sa strane. */
@container (min-width:430px){
  .ua-put-omot{width:auto;overflow:visible;visibility:visible}
  .ua-pozornica .ua-sir{display:inline}
  .ua-pozornica .ua-pilule .ua-sir{display:flex}
  .ua-pozornica .ua-link .ikona-mala{display:block}
  .ua-dokument{padding:calc(7*var(--u)) calc(8*var(--u)) calc(4*var(--u))}
  .ua-pilula .ua-cek{position:absolute;visibility:hidden}
  .ua-pilula .ua-upisi,.ua-pilula .ua-upisano-t{position:static}
  .ua-pilula{padding:0 calc(4*var(--u));border-radius:calc(5*var(--u));background:var(--zelena-bleda)}
  .aktivna .ua-pilula .ua-upisi,.aktivna .ua-pilula .ua-upisano-t{visibility:visible}
  .ua-plocica{padding:calc(5*var(--u)) calc(8*var(--u))}
  .ua-iznos-let{left:calc(8*var(--u));bottom:calc(5*var(--u))}
}
@container (min-width:540px){
  .ua-meni{display:flex}
  .ua-panel-traka{display:none}
  .ua-sina{display:flex}
  .ua-pozornica .aktivna .ua-o{visibility:visible}
  .ua-raniji-naslov{display:block;margin-bottom:calc(2*var(--u));color:var(--tekst);font-weight:500}
  .ua-raniji .ua-red{min-height:calc(25*var(--u))}
  .ua-raniji .ua-red:nth-of-type(n+4){display:flex}
  .ua-rsd{display:inline}
  .ua-pozornica .ua-uzak{display:none}
  .ua-link-panel{position:static;width:auto}
  .aktivna .ua-link-panel{visibility:visible}
  .ua-link{justify-content:flex-start;padding-inline:calc(4*var(--u))}
  .ua-dokument{gap:calc(6*var(--u));padding:calc(10*var(--u)) calc(12*var(--u)) calc(6*var(--u))}
  .ua-stavke{gap:0}
  .ua-plocica{min-height:calc(66*var(--u));padding:calc(10*var(--u))}
  .ua-plocica b{font-size:calc(16*var(--u))}
  .ua-iznos-let{left:calc(10*var(--u));bottom:calc(10*var(--u))}
  .ua-cena-let{padding-inline:calc(6*var(--u))}
}
@container (max-width:339px){
  .ua-red{gap:calc(2*var(--u))}
  .ua-klijent .ua-lice,.ua-raniji .ua-red>:last-child,.ua-raniji .ua-red:nth-of-type(n+3){display:none}
  .ua-pozornica .ua-prvi-klijent{position:absolute;width:0;overflow:hidden;visibility:hidden}
  .ua-plocice{grid-template-columns:minmax(0,1fr)}
  .ua-plocica{display:flex;justify-content:space-between;min-height:calc(21*var(--u));padding-block:calc(2*var(--u))}
  .ua-iznos-let{left:auto;right:calc(5*var(--u));bottom:calc(2*var(--u))}
}

/* Kontrole ispod pozornice. Visina reda je stalna, pa ni promena pisma ni izbor ne pomeraju stranu. */
.ua-dugmad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.ua-dugme{position:relative;display:flex;align-items:center;justify-content:center;min-height:54px;padding:6px 8px 11px;border:1px solid rgba(12,34,68,.16);border-radius:var(--r-malo);background:transparent;color:var(--teget);font-weight:600;font-size:var(--t14);line-height:1.25;text-align:center;cursor:pointer;transition:background-color .18s,border-color .18s}
.ua-dugme:nth-child(1){--t:6.5s}
.ua-dugme:nth-child(2){--t:7s}
.ua-dugme:nth-child(3){--t:7.5s}
.ua-dugme:hover{background:rgba(255,255,255,.6)}
.ua-dugme[aria-pressed=true]{border-color:transparent;background:var(--bela);box-shadow:var(--senka)}
.ua-napredak{position:absolute;left:10px;right:10px;bottom:5px;height:3px;overflow:hidden;border-radius:2px;background:rgba(12,34,68,.12)}
.ua-napredak i{display:block;height:100%;background:var(--zelena-tamna);transform:scaleX(0);transform-origin:left}
[aria-pressed=true] .ua-napredak i{transform:none}
.ua-dno{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:2px;color:var(--tekst);font-size:var(--t14);line-height:1.35}
.ua-taster{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:4px 2px 4px 8px;border:0;background:none;color:var(--teget);font-weight:600;font-size:var(--t14);line-height:1.2;cursor:pointer}
.ua-taster:hover{color:var(--zelena-tamna)}
/* Taster zadržava širinu duže reči: Pustite je kraće, pa bi se natpis pored njega prelomio drugačije i strana bi se pomerila. */
.ua-taster span{display:grid}
.ua-taster span::after{content:attr(data-najduze);height:0;overflow:hidden;visibility:hidden}
.ua-taster .ikona-mala:nth-of-type(2),.ua-zaustavljeno .ua-taster .ikona-mala:nth-of-type(1){display:none}
.ua-zaustavljeno .ua-taster .ikona-mala:nth-of-type(2){display:block}
@container (max-width:429px){.ua-dugme{padding-inline:6px}}
@container (max-width:339px){
  .ua-dugme{min-height:70px}
  .ua-taster{padding-inline:0;justify-content:center}
  .ua-taster span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@container (max-width:250px){.ua-dugmad{grid-template-columns:minmax(0,1fr)}.ua-dugme{min-height:48px}}
/* Bez JavaScripta: mirna prva scena, bez dugmadi koja ne rade. */
@media (scripting:none){.ua *,.ua *::before,.ua *::after{animation:none!important}.ua-dugmad,.ua-taster{display:none}.ua-dno{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.ua-taster{display:none}.ua-odeljak>*{transition:none}}

/* Put do kraja poglavlja. Jedna radnja u jednom trenutku, a kursor počinje tačno tamo gde je stao u prethodnom. Vremena su od početka poglavlja. */
@media (prefers-reduced-motion:no-preference){
  @keyframes ua-napredak{from{transform:scaleX(0)}to{transform:none}}
  @keyframes ua-pojava{from{opacity:0}to{opacity:1}}
  @keyframes ua-nestanak{from{opacity:1}to{opacity:0}}
  @keyframes ua-ulaz{from{opacity:0;transform:translateY(calc(6*var(--u)))}to{opacity:1;transform:none}}
  @keyframes ua-silaz{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(-5*var(--u)))}}
  @keyframes ua-sledeca{from{opacity:0;transform:translateY(calc(5*var(--u)))}to{opacity:1;transform:none}}
  @keyframes ua-iskok{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
  @keyframes ua-izbor{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
  @keyframes ua-pritisak{50%{transform:scale(.8)}}
  @keyframes ua-pritisak-dugme{50%{scale:.97}}
  @keyframes ua-talas{from{opacity:.55;transform:scale(.15)}to{opacity:0;transform:scale(1)}}
  @keyframes ua-treptaj{from{opacity:0}12%,62%{opacity:1}to{opacity:0}}
  @keyframes ua-zavesa{from,to{opacity:1}}
  @keyframes ua-kucanje{from{opacity:1;transform:none}to{opacity:1;transform:translateX(100%)}}
  @keyframes ua-tok{from{transform:none}to{transform:translateY(calc(var(--n)*-1.3em))}}
  /* Let: vodoravno jednim tempom, uspravno drugim, pa je put luk. Kraj je mekano sletanje. */
  @keyframes ua-let-x{0%{opacity:0;transform:translateX(calc(var(--lx)*var(--u))) rotate(var(--lr,0deg))}12%{opacity:1}100%{opacity:1;transform:none}}
  @keyframes ua-let-y{from{translate:0 calc(var(--ly)*var(--u))}to{translate:0 0}}
  @keyframes ua-let-s{0%{scale:var(--ls,.8)}82%{scale:1.015}100%{scale:1}}
  @keyframes ua-senka-leta{0%{opacity:0}18%,72%{opacity:1}100%{opacity:0}}
  @keyframes ua-let-kratak-x{0%{opacity:0;transform:translateX(calc(var(--lx)*var(--u)))}12%{opacity:1}90%{opacity:1}100%{opacity:0;transform:none}}
  @keyframes ua-pomak-za{from{transform:translateX(calc(-1*var(--za)*var(--u)))}to{transform:none}}
  @keyframes ua-pomak-iznos{from{transform:translateY(calc(var(--s2)*var(--u)))}to{transform:none}}
  @keyframes ua-sirenje{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}
  @keyframes ua-boja{from{color:var(--teget)}to{color:var(--teget)}}
  @keyframes ua-dah{0%,100%{opacity:0}35%{opacity:1}}
  @keyframes ua-kupac-1-x{0%{transform:translateX(calc(var(--k0x)*var(--u))) var(--pomak)}21.57%{transform:translateX(calc(var(--k1x)*var(--u))) var(--pomak)}26.27%{transform:translateX(calc(var(--k1x)*var(--u))) var(--pomak)}41.18%{transform:translateX(calc(var(--k2x)*var(--u))) var(--pomak)}45.1%{transform:translateX(calc(var(--k2x)*var(--u))) var(--pomak)}60.78%{transform:translateX(calc(var(--k5x)*var(--u))) var(--pomak)}82.35%{transform:translateX(calc(var(--k5x)*var(--u))) var(--pomak)}100%{transform:translateX(calc(var(--k3x)*var(--u))) var(--pomak)}}
  @keyframes ua-kupac-1-y{0%{translate:0 calc(var(--k0y)*var(--u))}21.57%{translate:0 calc(var(--k1y)*var(--u))}26.27%{translate:0 calc(var(--k1y)*var(--u))}41.18%{translate:0 calc(var(--k2y)*var(--u))}45.1%{translate:0 calc(var(--k2y)*var(--u))}60.78%{translate:0 calc(var(--k5y)*var(--u))}82.35%{translate:0 calc(var(--k5y)*var(--u))}100%{translate:0 calc(var(--k3y)*var(--u))}}
  @keyframes ua-vi-1-x{0%{transform:translateX(calc(var(--v0x)*var(--u))) var(--pomak)}8.79%{transform:translateX(calc(var(--v4x)*var(--u))) var(--pomak)}89.01%{transform:translateX(calc(var(--v4x)*var(--u))) var(--pomak)}100%{transform:translateX(calc(var(--v1x)*var(--u))) var(--pomak)}}
  @keyframes ua-vi-1-y{0%{translate:0 calc(var(--v0y)*var(--u))}8.79%{translate:0 calc(var(--v4y)*var(--u))}89.01%{translate:0 calc(var(--v4y)*var(--u))}100%{translate:0 calc(var(--v1y)*var(--u))}}
  @keyframes ua-kupac-2-x{0%{transform:translateX(calc(var(--k3x)*var(--u))) var(--pomak)}100%{transform:translateX(calc(var(--k4x)*var(--u))) var(--pomak)}}
  @keyframes ua-kupac-2-y{0%{translate:0 calc(var(--k3y)*var(--u))}100%{translate:0 calc(var(--k4y)*var(--u))}}
  @keyframes ua-vi-2-x{0%{transform:translateX(calc(var(--v1x)*var(--u))) var(--pomak)}100%{transform:translateX(calc(var(--v2x)*var(--u))) var(--pomak)}}
  @keyframes ua-vi-2-y{0%{translate:0 calc(var(--v1y)*var(--u))}100%{translate:0 calc(var(--v2y)*var(--u))}}
  @keyframes ua-kupac-3-x{0%{transform:translateX(calc(var(--k4x)*var(--u))) var(--pomak)}100%{transform:translateX(calc(var(--k0x)*var(--u))) var(--pomak)}}
  @keyframes ua-kupac-3-y{0%{translate:0 calc(var(--k4y)*var(--u))}100%{translate:0 calc(var(--k0y)*var(--u))}}
  @keyframes ua-vi-3-x{0%{transform:translateX(calc(var(--v2x)*var(--u))) var(--pomak)}48.33%{transform:translateX(calc(var(--v3x)*var(--u))) var(--pomak)}58.33%{transform:translateX(calc(var(--v3x)*var(--u))) var(--pomak)}100%{transform:translateX(calc(var(--v0x)*var(--u))) var(--pomak)}}
  @keyframes ua-vi-3-y{0%{translate:0 calc(var(--v2y)*var(--u))}48.33%{translate:0 calc(var(--v3y)*var(--u))}58.33%{translate:0 calc(var(--v3y)*var(--u))}100%{translate:0 calc(var(--v0y)*var(--u))}}
  @keyframes ua-sina-1{from{transform:translateY(calc(3*var(--stavka)))}to{transform:none}}
  @keyframes ua-sina-2{from{transform:none}to{transform:translateY(var(--stavka))}}
  @keyframes ua-sina-3{0%{transform:translateY(var(--stavka))}16%,86%{transform:translateY(calc(2*var(--stavka)))}100%{transform:translateY(calc(3*var(--stavka)))}}
  @keyframes ua-stavka-prihodi{0%,86%{color:var(--bela)}100%{color:var(--na-tegetu)}}
  @keyframes ua-stavka-cene{0%,86%{color:var(--na-tegetu)}100%{color:var(--bela)}}

  .ua-tece [aria-pressed=true] .ua-napredak i{animation:ua-napredak var(--t) linear both}

  /* Poglavlje 1: kupac bira termin, kartica leti u panel, vi potvrđujete. 6,5 s */
  .ua-tece .aktivna .ua-o1{animation:ua-sina-1 .45s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-usluga::before{animation:ua-sirenje .35s .22s var(--izlaz) backwards;transform-origin:left}
  .ua-tece .aktivna>.vi.v1{animation:ua-vi-1-x 4.55s .05s var(--put-a) backwards,ua-vi-1-y 4.55s .05s var(--put-b) backwards}
  .ua-tece .aktivna>.kupac.k1{animation:ua-kupac-1-x 2.55s .45s var(--put-a) backwards,ua-kupac-1-y 2.55s .45s var(--put-b) backwards}
  .ua-tece .aktivna>.kupac.k1 svg{animation:ua-pritisak .22s .98s,ua-pritisak .22s 1.48s,ua-pritisak .22s 1.98s,ua-pritisak .22s 2.98s}
  .ua-tece .aktivna>.kupac.k1::before{animation:ua-talas .5s 1.02s var(--izlaz),ua-talas .5s 1.52s var(--izlaz),ua-talas .5s 2.02s var(--izlaz),ua-talas .5s 3.02s var(--izlaz)}
  .ua-tece .aktivna .ua-uto::before{animation:ua-izbor .3s 1.04s var(--opruga) backwards}
  .ua-tece .aktivna .ua-sat::before{animation:ua-izbor .3s 1.54s var(--opruga) backwards}
  .ua-tece .aktivna .ua-unos .ua-prsten{animation:ua-treptaj .85s 2s var(--glatko) backwards}
  .ua-tece .aktivna .ua-kucano::before{animation:ua-zavesa 2.08s steps(1,end)}
  .ua-tece .aktivna .ua-kucano::after{animation:ua-kucanje .46s 2.08s steps(8,end)}
  .ua-tece .aktivna .ua-sajt-dugme{animation:ua-pritisak-dugme .22s 2.98s var(--glatko),ua-nestanak .16s 3.18s backwards}
  .ua-tece .aktivna .ua-gotovo.prvi{animation:ua-iskok .34s 3.3s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-zahtev{--lx:var(--l1x);--ly:var(--l1y);--lr:-1.5deg;animation:ua-let-x .85s 3.1s var(--put-b) backwards,ua-let-y .85s 3.1s var(--put-a) backwards,ua-let-s .95s 3.1s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-zahtev::after{animation:ua-senka-leta .95s 3.1s linear backwards}
  .ua-tece .aktivna .ua-zahtev::before{animation:ua-pojava .3s 4.78s backwards}
  .ua-tece .aktivna .ua-prazno{animation:ua-nestanak .16s 3.72s linear backwards}
  .ua-tece .aktivna .ua-odluka{animation:ua-ulaz .3s 3.98s var(--izlaz) backwards}
  .ua-tece .aktivna>.vi.v1 svg{animation:ua-pritisak .22s 4.58s}
  .ua-tece .aktivna>.vi.v1::before{animation:ua-talas .5s 4.62s var(--izlaz)}
  .ua-tece .aktivna .ua-potvrdite{animation:ua-pritisak-dugme .22s 4.58s var(--glatko),ua-nestanak .16s 4.76s backwards}
  .ua-tece .aktivna .ua-potvrdjeno{animation:ua-iskok .34s 4.86s var(--izlaz) backwards}

  /* Poglavlje 2: isti kupac u ponudi, a ponuda leti na njegovu stranu. 7 s */
  .ua-tece .aktivna .ua-o2{animation:ua-sina-2 .45s var(--izlaz) backwards}
  .ua-tece .ua-pozornica:has(.ua-alat.aktivna) .ua-put-1{animation:ua-silaz .18s 3.82s backwards}
  .ua-tece .ua-pozornica:has(.ua-alat.aktivna) .ua-put-2{animation:ua-sledeca .22s 3.86s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-ime2{animation:ua-pomak-za .55s .05s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-za-tekst{animation:ua-pojava .3s .28s backwards}
  .ua-tece .aktivna>.vi.v2{animation:ua-vi-2-x .65s .5s var(--put-a) backwards,ua-vi-2-y .65s .5s var(--put-b) backwards}
  .ua-tece .aktivna .ua-r0{animation:ua-ulaz .34s .75s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-r1{animation:ua-ulaz .34s 1.2s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-r2{animation:ua-ulaz .34s 1.65s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-desno .ua-zbir{animation:ua-ulaz .34s 2.1s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-link-panel{animation:ua-ulaz .34s 2.4s var(--izlaz) backwards}
  .ua-tece .aktivna>.vi.v2 svg{animation:ua-pritisak .22s 2.86s}
  .ua-tece .aktivna>.vi.v2::before{animation:ua-talas .5s 2.9s var(--izlaz)}
  .ua-tece .aktivna .ua-ponuda-dugme{animation:ua-pritisak-dugme .22s 2.86s var(--glatko),ua-nestanak .16s 3.08s backwards}
  .ua-tece .aktivna .ua-gotovo.drugi{animation:ua-iskok .34s 3.2s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-dokument{--lx:var(--l2x);--ly:var(--l2y);--ls:.52;--lr:1.5deg;animation:ua-let-x .95s 3s var(--put-b) backwards,ua-let-y .95s 3s var(--put-a) backwards,ua-let-s 1.05s 3s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-dokument::after{animation:ua-senka-leta 1.05s 3s linear backwards}
  .ua-tece .aktivna .ua-cekanje-u{animation:ua-nestanak .18s 3.78s linear backwards}
  .ua-tece .aktivna>.kupac.k2{animation:ua-kupac-2-x .55s 4.1s var(--put-a) backwards,ua-kupac-2-y .55s 4.1s var(--put-b) backwards}
  .ua-tece .aktivna .ua-link{animation:ua-ulaz .36s 4.7s var(--izlaz) backwards}

  /* Poglavlje 3: isti iznos u prihodima, a promenjena cena se vraća na sajt. 7,5 s */
  .ua-tece .aktivna .ua-o3{animation:ua-sina-3 2.6s var(--izlaz) backwards}
  .ua-tece .ua-pozornica:has(.ua-posao.aktivna) .ua-st-3{animation:ua-stavka-prihodi 2.6s linear}
  .ua-tece .ua-pozornica:has(.ua-posao.aktivna) .ua-st-4{animation:ua-stavka-cene 2.6s linear}
  .ua-tece .ua-pozornica:has(.ua-posao.aktivna) .ua-od-3{animation:ua-silaz .18s 2.22s backwards}
  .ua-tece .ua-pozornica:has(.ua-posao.aktivna) .ua-od-4{animation:ua-sledeca .25s 2.26s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-iznos{animation:ua-pomak-iznos .65s var(--put-a) backwards}
  .ua-tece .aktivna .ua-ana,.ua-tece .aktivna .ua-prvi-klijent{animation:ua-pojava .28s .38s backwards}
  .ua-tece .aktivna .ua-posle-iznosa{animation:ua-ulaz .32s .5s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-cena{animation:ua-ulaz .32s .62s var(--izlaz) backwards}
  .ua-tece .aktivna>.vi.v3{animation:ua-vi-3-x 1.2s .7s var(--put-a) backwards,ua-vi-3-y 1.2s .7s var(--put-b) backwards}
  .ua-tece .aktivna>.vi.v3 svg{animation:ua-pritisak .22s 1.26s,ua-pritisak .22s 2.6s}
  .ua-tece .aktivna>.vi.v3::before{animation:ua-talas .5s 1.3s var(--izlaz),ua-talas .5s 2.64s var(--izlaz)}
  .ua-tece .aktivna .ua-upisi{animation:ua-nestanak .2s 1.38s backwards}
  .ua-tece .aktivna .ua-upisano-t{animation:ua-iskok .3s 1.42s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-cek{animation:ua-iskok .3s 1.42s var(--opruga) backwards}
  .ua-tece .aktivna .ua-iznos-let{--lx:var(--l4x);--ly:var(--l4y);animation:ua-let-kratak-x .52s 1.6s var(--put-b) backwards,ua-let-y .52s 1.6s var(--put-a) backwards}
  .ua-tece .aktivna .ua-plocica-p::before{animation:ua-dah 1.15s 1.98s var(--glatko)}
  .ua-tece .aktivna .ua-plocica-p .ua-tok>span{animation:ua-tok .62s 2.03s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-polje .ua-prsten{animation:ua-treptaj 1.5s 2.62s var(--glatko) backwards}
  .ua-tece .aktivna .ua-polje .ua-tok>span{animation:ua-tok .55s 2.76s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-cena-let{--lx:var(--l3x);--ly:var(--l3y);animation:ua-let-kratak-x .72s 3.36s var(--put-b) backwards,ua-let-y .72s 3.36s var(--put-a) backwards}
  .ua-tece .aktivna .ua-nova-cena .ua-tok>span{animation:ua-tok .5s 3.99s var(--izlaz) backwards}
  .ua-tece .aktivna .ua-nova-cena{animation:ua-boja 4.03s}
  .ua-tece .aktivna .ua-oznacen::before{animation:ua-sirenje .4s 4.03s var(--izlaz) backwards;transform-origin:right}
  .ua-tece .aktivna .ua-na-sajtu{animation:ua-ulaz .36s 4.5s var(--izlaz) backwards}
  .ua-tece .aktivna>.kupac.k3{animation:ua-kupac-3-x .55s 4.95s var(--put-a) backwards,ua-kupac-3-y .55s 4.95s var(--put-b) backwards}
  .ua-tece .aktivna>.kupac.k3 svg{animation:ua-pritisak .22s 7.08s}
  .ua-tece .aktivna>.kupac.k3::before{animation:ua-talas .4s 7.1s var(--izlaz)}
  .ua-tece .aktivna .ua-termin{animation:ua-pritisak-dugme .22s 7.08s var(--glatko)}

  /* Stoji kad je posetilac zaustavi, kad hero nije na ekranu i kad je tab skriven. */
  .ua-stoji *,.ua-stoji *::before,.ua-stoji *::after{animation-play-state:paused!important}
}


/* Izlog radova: jedan uredjaj koji se menja. Merama i polozajima upravlja src/js/izlog.js, direktno na elementima.
   Nema nasledjenih promenljivih koje se menjaju u svakom kadru, ni blur filtera, ni mesanja boja: sve sto se pomera ide transformacijom. */
.izlog{padding-inline:12px}
.i-pista{position:relative}
.i-bina{--ak:color-mix(in srgb,var(--sjaj,#52aa24) 58%,#fff);position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.5vh,16px);min-height:680px;max-width:1400px;margin-inline:auto;padding:clamp(14px,2.4vh,24px) clamp(14px,2.4vw,32px);border-radius:var(--r-panel);overflow:hidden;background:var(--fon,#0f1216);color:#fff;transition:background-color .7s}
.js .i-pista{height:calc(100svh + 440vh)}
.js .i-bina{position:sticky;top:84px;height:calc(100svh - 96px);min-height:540px}

/* pozadina */
.i-fon{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.i-mreza{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 78%);mask:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 78%)}
.i-sjaj{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:.34;-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);transition:background-color .8s;will-change:transform}
.i-sjaj-1{left:-22vmax;top:-26vmax;background:var(--sjaj,#52aa24);animation:i-lebdi-1 19s ease-in-out infinite alternate}
.i-sjaj-2{right:-24vmax;bottom:-30vmax;background:var(--sjaj2,#e35205);animation:i-lebdi-2 23s ease-in-out infinite alternate}
@keyframes i-lebdi-1{to{transform:translate3d(12vmax,8vmax,0) scale(1.15)}}
@keyframes i-lebdi-2{to{transform:translate3d(-10vmax,-10vmax,0) scale(.9)}}
.js .i-mreza{display:none}
/* linije se gase pre ivica ekrana */
.i-platno{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
html:not(.js) .i-platno{display:none}
.i-rec{position:absolute;left:50%;top:50%;font-weight:600;font-size:clamp(56px,14vw,210px);line-height:1;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);will-change:transform,opacity}

.ilu{position:absolute;left:var(--x);top:var(--y);width:var(--s);color:#f2f5fb;will-change:transform,opacity,filter}
.ilu-o{transform:translate(-50%,-50%);animation:ilu-lebdi 8s ease-in-out infinite alternate}
@keyframes ilu-lebdi{to{transform:translate(-50%,calc(-50% - 12px)) rotate(1.6deg)}}
.ilu svg{display:block;width:100%;height:auto;overflow:visible}
.ilu .p{fill:rgba(255,255,255,.055)}
.ilu .a{stroke:var(--ak)}
.ilu .f{fill:var(--ak);stroke:none}
.ilu .f2{fill:color-mix(in srgb,var(--ak) 30%,transparent);stroke:var(--ak)}
.ilu .p-pun{fill:#fff;stroke:none}
.ilu .p-pun2{fill:var(--fon,#0f1216)}
.ilu .a-pun rect{fill:#fff;stroke:var(--ak)}
.ilu .s1{fill:var(--sjaj);stroke:none}.ilu .s2{fill:var(--sjaj2);stroke:none}.ilu .s3{fill:var(--ak);stroke:none}.ilu .s4{fill:#fff;stroke:none}
.ilu .t-a{fill:var(--ak)}.ilu .t-b{fill:#fff;font-weight:600}
.ilu .trep{animation:ilu-trep 1.1s steps(2,jump-none) infinite}
@keyframes ilu-trep{to{opacity:0}}
.ilu .crtanje{stroke-dasharray:280;animation:ilu-crta 5s ease-in-out infinite alternate}
@keyframes ilu-crta{from{stroke-dashoffset:280}to{stroke-dashoffset:0}}
.ilu .prekidac{animation:ilu-prekidac 2.6s ease-in-out infinite alternate}
@keyframes ilu-prekidac{to{transform:translateX(22px)}}
.ilu .stubic{transform-box:fill-box;transform-origin:50% 100%;animation:ilu-stubic 2.8s ease-in-out infinite alternate}
.ilu .stubic:nth-of-type(even){animation-delay:-1.3s}
@keyframes ilu-stubic{from{transform:scaleY(.55)}}
.ilu .puls{transform-box:fill-box;transform-origin:center;animation:ilu-puls 2.2s ease-in-out infinite alternate}
@keyframes ilu-puls{to{transform:scale(1.12)}}
.ilu .kursor{transform-box:fill-box;animation:ilu-kursor 3.4s ease-in-out infinite alternate}
@keyframes ilu-kursor{to{transform:translate(-26px,-18px)}}
.ilu .plamen{animation:ilu-puls 1s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
.i-bina:not(.u-vidu) .ilu-o,.i-bina:not(.u-vidu) .ilu-o *,.i-bina:not(.u-vidu) .i-sjaj,.ilu.spava *{animation-play-state:paused}
html:not(.js) .ilu,html:not(.js) .i-rec{display:none}

/* glava: naslov i izbor rada */
.i-glava{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.i-naslov{min-width:0;flex:1 1 300px}
.i-naslov h2{font-size:clamp(1.35rem,2.4vw,1.875rem);color:#fff}
.i-naslov p{max-width:40em;margin-top:2px;color:#d7deea;font-size:.8438rem;line-height:1.5}
.i-radovi{position:relative;display:flex;align-items:center;max-width:100%;min-width:0;border-radius:999px;background:rgba(10,14,22,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.i-radovi ul{position:relative;flex:1 1 auto;min-width:0;display:flex;gap:2px;padding:4px;overflow-x:auto;scrollbar-width:none}
.i-radovi ul::-webkit-scrollbar{display:none}
/* kad radovi ne staju, skroluju se između strelica: stavke se pretapaju na ivicama umesto da budu odsecene */
.i-radovi ul[data-preliv]{padding-inline:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
/* strelica je 38 px kao i stavke, a površina za dodir je 44 px */
.i-rad-strelica{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:38px;height:38px;margin-left:4px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.i-rad-strelica::after{content:"";position:absolute;inset:-3px}
.i-rad-strelica:hover{background:rgba(255,255,255,.2)}
.i-rad-sledeci{margin:0 4px 0 0;background:var(--zelena);color:var(--teget)}
.i-rad-sledeci:hover{background:#4fe0aa}
.i-rad-strelica:active{transform:scale(.94)}
.i-rad-strelica:focus-visible{outline:2px solid #fff;outline-offset:2px}
.i-rad:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.i-rad[aria-current=true]:focus-visible{outline-color:var(--zelena-tamna)}
html:not(.js) .i-rad-strelica{display:none}
.i-rad{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 12px;border-radius:999px;color:#e6ebf4;font-weight:500;font-size:.8125rem;line-height:1.2;white-space:nowrap;text-decoration:none;transition:color .25s,background .2s}
.i-rad i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.i-rad:hover{color:#fff;background:rgba(255,255,255,.08)}
.i-rad[aria-current=true],.i-rad[aria-current=true]:hover{color:var(--teget);font-weight:600;background:none}
/* prototip nije živ sajt, pa mu je tačka prazna */
.i-rad[data-prototip] i{background:none;box-shadow:inset 0 0 0 2px var(--c)}
/* izabrana stavka je deblja, a sirina je unapred rezervisana, da se susedne stavke ne pomere */
.i-rad span,.i-u span{display:inline-grid}
.i-rad span::after,.i-u span::after{content:attr(data-t);height:0;overflow:hidden;visibility:hidden;font-weight:600}
.i-klizac{position:absolute;left:0;top:4px;bottom:4px;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.i-radovi .i-klizac{transition:transform .5s cubic-bezier(.3,1.35,.5,1),width .5s cubic-bezier(.3,1.35,.5,1)}
html:not(.js) .i-klizac,html:not(.js) .i-poziv,html:not(.js) .i-skica{display:none}
html:not(.js) .i-rad{background:rgba(255,255,255,.1)}

/* scena i uredjaj */
.i-scena{position:relative;z-index:2;min-height:0;transition:transform .6s cubic-bezier(.2,.85,.2,1)}
html:not(.js) .i-scena{min-height:min(60vw,520px)}
.i-oreol{position:absolute;left:50%;top:0;width:100px;height:100px;background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.34) 70%,transparent);pointer-events:none;will-change:transform}
.i-senka{position:absolute;left:50%;top:0;width:100px;height:100px;margin-top:-50px;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);pointer-events:none;will-change:transform}
html:not(.js) .i-oreol,html:not(.js) .i-senka,html:not(.js) .i-mera{display:none}
.i-uredjaj{position:absolute;left:50%;top:50%;width:min(80vw,760px);height:calc(min(80vw,760px)*.625);transform:translate(-50%,-50%);transform-style:preserve-3d;will-change:transform}
.i-okvir{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 100%}
.i-lice{position:relative;width:100%;height:100%;padding:9px;border-radius:14px 14px 0 0;background:#0a0c11;box-shadow:inset 0 0 0 1.5px #424956;backface-visibility:hidden;transition:box-shadow .2s}
.aktivan .i-lice{box-shadow:inset 0 0 0 1.5px #424956,0 0 0 3px var(--zelena)}
.i-ledja{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px 14px 0 0;background:linear-gradient(160deg,#cbd0da,#9aa2b0);transform:rotateY(180deg);backface-visibility:hidden}
.i-ledja svg{width:11%;height:auto;opacity:.8;transform:rotate(180deg)}
html:not(.js) .i-ledja,html:not(.js) .i-ploca{display:none}
.i-ploca{position:absolute;left:0;right:0;top:calc(100% + 2px);height:92%;transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 18px 18px;background:linear-gradient(#b8bec9,#d3d7df);box-shadow:0 0 0 1px #a4abb8}
.i-tastatura{position:absolute;left:7%;right:7%;top:7%;height:52%;border-radius:6px;background:repeating-linear-gradient(90deg,#2b303a 0 6.2%,#b8bec9 6.2% 6.9%),#2b303a;-webkit-mask:repeating-linear-gradient(#000 0 15.5%,transparent 15.5% 19%);mask:repeating-linear-gradient(#000 0 15.5%,transparent 15.5% 19%)}
.i-tabla{position:absolute;left:34%;right:34%;top:64%;bottom:6%;border-radius:8px;background:#c3c8d2;box-shadow:inset 0 0 0 1px #a4abb8}
.i-kamera{position:absolute;z-index:4;left:50%;width:5px;height:5px;border-radius:99px;background:#000;box-shadow:inset 0 0 0 1px #2a2f3a;transform:translateX(-50%)}
.i-dugmici{position:absolute;inset:0;opacity:0;pointer-events:none}
.i-dugmici::before,.i-dugmici::after{content:"";position:absolute;width:3px;border-radius:2px;background:#39404d}
.i-dugmici::before{left:-2.5px;top:21%;height:11%}
.i-dugmici::after{right:-2.5px;top:27%;height:15%}
.i-ekran{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:3px;background:#fff;color:var(--teget);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bez-skrola .i-ekran{cursor:default}
.aktivan .i-ekran{cursor:grab;touch-action:none}
.aktivan .i-ekran.vuce{cursor:grabbing}
.i-traka{flex:none;display:flex;align-items:center;justify-content:center;height:0;overflow:hidden;background:#eceef3}
.i-adresa{display:inline-flex;align-items:center;gap:6px;max-width:70%;padding:2px 12px;border-radius:99px;background:#fff;font-weight:500;font-size:.6875rem;line-height:1.4;text-decoration:none;white-space:nowrap}
.i-adresa .ikona-mala{width:11px;height:11px;color:var(--zelena-tamna)}
.i-adresa[href]:hover{color:var(--zelena-tamna)}
.i-adresa:not([href]){cursor:default}
.i-sadrzaj{position:relative;flex:1;min-height:0;overflow:hidden;background:#e7eaf0}
.i-set{position:absolute;inset:0;overflow:hidden}
.i-zid{position:absolute;left:0;right:0;top:0;height:0;overflow:hidden}
.i-zid:first-child{height:100%}
.i-sloj{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;transform-origin:0 0;pointer-events:none;will-change:transform;-webkit-user-drag:none}
.i-video{position:absolute;left:0;top:0;max-width:none;height:auto;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .35s}
.i-video.pusten{opacity:1}
/* paralaks sekcija sajta: okvir se skroluje sa stranicom, a slika u njemu stoji u odnosu na ekran uredjaja */
.i-paralaks{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s}
.i-paralaks.spreman{opacity:1}
.i-paralaks img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;-webkit-user-drag:none}
.i-paralaks .i-p-slika{will-change:transform}
.i-skener{position:absolute;z-index:3;left:0;right:0;top:0;height:46px;margin-top:-23px;opacity:0;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,var(--ak) 55%,transparent) 48%,#fff 50%,color-mix(in srgb,var(--ak) 55%,transparent) 52%,transparent);will-change:transform,opacity}
.i-odsjaj{position:absolute;z-index:3;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none;background:radial-gradient(circle at 34% 18%,rgba(255,255,255,.13),transparent 40%);will-change:transform}

/* skica: nacrt sajta koji prekrije ekran pri promeni rada */
.i-skica{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;gap:5%;padding:6% 7%;overflow:hidden;background-color:#0b1220;background-image:linear-gradient(color-mix(in srgb,var(--ak) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ak) 16%,transparent) 1px,transparent 1px);background-size:24px 24px;color:var(--ak);transform:translate3d(0,102%,0);pointer-events:none;will-change:transform}
.i-skica::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff;box-shadow:0 0 22px 6px var(--ak)}
.i-sk-traka{display:flex;align-items:center;justify-content:space-between;gap:8px;height:7%;min-height:14px}
.i-sk-traka b{width:18%;height:60%;border:1.5px solid currentColor;border-radius:4px}
.i-sk-traka i{width:38%;height:30%;border-radius:4px;background:repeating-linear-gradient(90deg,currentColor 0 22%,transparent 22% 28%);opacity:.75}
.i-sk-hero{flex:1 1 42%;display:grid;grid-template-columns:1.1fr 1fr;gap:6%;min-height:0}
.i-sk-tekst{display:flex;flex-direction:column;justify-content:center;gap:10%}
.i-sk-tekst i{display:block;height:9%;min-height:5px;border-radius:4px;background:currentColor;opacity:.8}
.i-sk-tekst i:nth-child(2){width:72%}
.i-sk-tekst i:nth-child(3){width:48%;opacity:.45}
.i-sk-tekst b{display:block;width:38%;height:14%;min-height:9px;border:1.5px solid currentColor;border-radius:99px}
.i-sk-slika{position:relative;border:1.5px solid currentColor;border-radius:6px;background:linear-gradient(to top right,transparent calc(50% - 1px),currentColor,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),currentColor,transparent calc(50% + 1px))}
.i-sk-kartice{flex:1 1 26%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;min-height:0}
.i-sk-kartice i{border:1.5px solid currentColor;border-radius:6px;opacity:.7}

/* poziv na skrol stoji na meri ispod uredjaja, da ne pokriva sajt */
.i-poziv{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;min-height:24px;padding:3px 12px;border:0;border-radius:99px;background:#16335f;color:#fff;font-weight:500;font-size:.6875rem;line-height:1.2;white-space:nowrap;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.35);transition:opacity .25s,background-color .2s,color .2s}
.i-poziv:hover{background:#1e4479}
.i-poziv::before{content:"";position:absolute;inset:-4px;border-radius:99px;border:2px solid var(--zelena);opacity:0;animation:i-puls 2.4s ease-out infinite}
@keyframes i-puls{0%{opacity:.8;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.1)}}
.skrol-aktivan .i-poziv{background:var(--zelena);color:var(--teget);font-weight:600}
.skrol-aktivan .i-poziv::before{animation:none}
.ide-tura .i-poziv,.bez-skrola .i-poziv{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}
.i-baza{position:absolute;left:-6.500%;right:-6.500%;top:100%;height:12px;background:linear-gradient(#dfe3ea,#8d95a3);transform-origin:50% 0;will-change:transform,opacity}
.i-baza::before{content:"";position:absolute;left:42%;right:42%;top:0;height:38%;border-radius:0 0 8px 8px;background:#7d8593}

/* klizac polozaja */
.i-klizna{position:absolute;z-index:3;left:50%;top:0;width:18px;height:200px;padding:0 6px;cursor:ns-resize;touch-action:none;transition:opacity .3s;will-change:transform}
.i-klizna::before{content:"";display:block;width:6px;height:100%;border-radius:6px;background:rgba(255,255,255,.22)}
.i-palac{position:absolute;left:4px;top:0;width:10px;height:40px;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.i-klizna:hover .i-palac,.i-klizna:focus-visible .i-palac{background:#4fe0aa}
.bez-skrola .i-klizna{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
html:not(.js) .i-klizna{display:none}

/* mera */
.i-mera{position:absolute;left:50%;top:0;width:200px;height:24px;pointer-events:none;will-change:transform}
.i-mera::before{content:"";position:absolute;left:0;right:0;top:50%;height:7px;margin-top:-3.500px;border:solid rgba(255,255,255,.5);border-width:0 1.5px;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 0 50%/100% 1.5px no-repeat}
.i-rucka{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(1,172,110,.55);cursor:ew-resize;pointer-events:auto;touch-action:none;transition:scale .18s}
.i-rucka::after{content:"";position:absolute;inset:-16px}
.i-rucka:hover,.drzi-lenjir .i-rucka{scale:1.3}
.i-rucka-l{left:0}.i-rucka-d{left:100%}

/* oznake rada kuca src/js/izlog.js na svom platnu, po linijama mreze; ovaj spisak je za citace ekrana */
.i-cipovi{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);list-style:none}
.i-oznake{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
html:not(.js) .i-oznake{display:none}

/* opis levo od uredjaja: stoji na stalnom mestu, a tekst se pri promeni rada samo pretopi, bez pomeranja */
.i-opis{position:absolute;z-index:3;left:0;top:50%;width:300px;pointer-events:none}
.i-opis-u{position:relative;isolation:isolate;display:grid;opacity:0;visibility:hidden;clip-path:inset(-100px 100% -100px -130px);transition:opacity .3s,clip-path .45s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.i-opis-u::before{content:"";position:absolute;z-index:-1;inset:-80px -110px;background:radial-gradient(closest-side,color-mix(in srgb,var(--fon,#0f1216) 78%,transparent) 55%,transparent);pointer-events:none}
.ima-opis .i-opis{pointer-events:auto}
.ima-opis .i-opis-u{opacity:1;visibility:visible;clip-path:inset(-100px -130px -100px -130px);transition:opacity .3s,clip-path .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.i-opis-rad{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;opacity:0;visibility:hidden;transition:opacity .16s,visibility 0s .16s}
.i-opis-rad.na{opacity:1;visibility:inherit;transition:opacity .3s .12s}
.i-opis small{display:block;color:#7df0c1;font-weight:600;font-size:.75rem}
.i-opis h3{margin-top:4px;font-size:clamp(1.5rem,2.6vw,2.125rem);color:#fff}
.i-opis p{margin-top:10px;color:#e0e6f0;font-size:.9063rem;line-height:1.6}
.i-opis .veza-strelica{margin-top:8px;padding:0;border:0;background:none;color:#7df0c1;font-size:.875rem;cursor:pointer}
/* traka sa strelicom: stoji na levoj ivici dok je opis sklonjen */
.i-jezicak{--vuci:0px;--skriven:-100%;position:absolute;z-index:3;left:calc(-1*clamp(14px,2.4vw,32px));top:50%;display:grid;place-items:center;width:20px;height:72px;padding:0;border:0;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--zelena) 24%,rgba(10,14,22,.78));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#7df0c1;cursor:grab;touch-action:none;opacity:0;visibility:hidden;transform:translate3d(calc(var(--skriven) + var(--vuci)),-50%,0);transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .25s,visibility 0s .35s,background-color .18s,color .18s}
.i-jezicak::after{content:"";position:absolute;inset:-10px -16px -10px 0}
.i-jezicak .ikona-mala{width:14px;height:14px}
.i-jezicak:hover{background:var(--zelena);color:var(--teget)}
.i-jezicak:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ima-jezicak .i-jezicak,.i-jezicak.vuce{--skriven:0%;opacity:1;visibility:visible;transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .25s,visibility 0s,background-color .18s,color .18s}
.i-jezicak.vuce{cursor:grabbing;transition:opacity .15s}
.ima-opis .i-jezicak.vuce{opacity:0} /* cim se opis pojavi, traka mu se sklanja sa teksta */
.ima-jezicak .i-jezicak svg{animation:i-jezicak-migni 1.2s ease-in-out .6s 2}
@keyframes i-jezicak-migni{50%{translate:3px 0}}
.ide-tura .i-jezicak{opacity:0;visibility:hidden;pointer-events:none}
html:not(.js) .i-opis,html:not(.js) .i-cipovi,html:not(.js) .i-jezicak{display:none}

/* komande */
.i-komande{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;margin-top:4px}
html:not(.js) .i-lenjir,html:not(.js) .i-tura,html:not(.js) .i-auto{display:none}

/* lenjir sirine: dugmad uredjaja stoje na njemu, palac pokazuje sirinu */
.i-lenjir{flex:1 1 320px;max-width:440px;min-width:0;padding:3px 36px 5px;border-radius:14px;background:rgba(10,14,22,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.i-stanice{position:relative;height:24px}
.i-u{--tx:-50%;position:absolute;top:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;height:24px;padding:0 6px;border:0;border-radius:10px;background:none;color:#cdd5e2;font-weight:500;font-size:.6875rem;white-space:nowrap;cursor:pointer;transform:translateX(var(--tx));transition:color .2s}
.i-u .ikona-mala{width:13px;height:13px}
.i-u:hover{color:#fff}
.i-u[aria-pressed=true]{color:#6df2bb;font-weight:600}
.i-staza{position:relative;height:24px;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.i-crtice{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.i-crtice i{display:block;flex:none;width:1.5px;height:7px;border-radius:1px;background:rgba(255,255,255,.34);margin-inline:-.75px;will-change:transform}
.i-crtice i:nth-child(4n+1){height:12px;background:rgba(255,255,255,.58)}
.i-put{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--zelena);transform:scaleX(1);transform-origin:0 50%;pointer-events:none;will-change:transform}
.i-zarez{position:absolute;top:1px;bottom:1px;width:2px;margin-left:-1px;border-radius:2px;background:#6df2bb;pointer-events:none}
.i-sirina{position:absolute;left:0;top:50%;width:0;height:0;pointer-events:none;will-change:transform}
.i-sirina span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:56px;padding:0 8px;border-radius:99px;background:var(--zelena);color:var(--teget);font-weight:600;font-size:.6875rem;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;transform:translate(-50%,-50%);box-shadow:0 4px 14px rgba(0,0,0,.4);transition:scale .18s,box-shadow .18s;cursor:grab;pointer-events:auto}
.drzi-lenjir .i-sirina span{scale:1.12;box-shadow:0 0 0 4px rgba(1,172,110,.3),0 8px 20px rgba(0,0,0,.45);cursor:grabbing}
.i-staza:focus-visible{outline:none}
.i-staza:focus-visible .i-sirina span{outline:3px solid #fff;outline-offset:2px}

/* automatski prikaz: prsten pokazuje koliko je ostalo do sledeceg koraka */
.i-auto{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(10,14,22,.58);color:#fff;cursor:pointer}
.i-auto[hidden]{display:none}
.i-auto-prsten{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:2.5;transform:rotate(-90deg)}
.i-auto-prsten circle{stroke:rgba(255,255,255,.2)}
.i-auto-prsten .i-auto-krug{stroke:var(--zelena);stroke-dasharray:119.4;stroke-dashoffset:119.4;stroke-linecap:round}
.i-auto .i-a-pusti{display:none}
.i-auto[aria-pressed=false] .i-a-pauza{display:none}
.i-auto[aria-pressed=false] .i-a-pusti{display:block}
.i-akcije{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.i-dugme{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 14px;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(10,14,22,.35);color:#fff;font-weight:600;font-size:.75rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.i-dugme:hover,.i-dugme[aria-pressed=true]{background:#fff;color:var(--teget);border-color:#fff}
.i-nema{visibility:hidden}
/* izlog je zakačen dok se ne iskroluje ceo, pa je ovo izlaz iz njega: stoji u donjem desnom uglu i uočava se */
.i-dalje{margin-left:auto;background:#fff;border-color:#fff;color:var(--teget);white-space:nowrap}
.i-dalje:hover{background:var(--zelena);border-color:var(--zelena)}
.i-dalje:focus-visible{outline:2px solid #fff;outline-offset:2px}
html:not(.js) .i-dalje{display:none}
@media (min-width:1440px){.i-dalje{position:absolute;right:0;top:50%;margin:0;transform:translateY(-50%)}}
/* na manjem laptopu sve staje u jedan red, da uređaj ne izgubi visinu: tura ostaje kao ikonica */
@media (max-width:1279px){.i-lenjir{flex-basis:260px}}
@media (min-width:761px) and (max-width:1099px){
  .i-tura{min-width:44px;padding-inline:12px}
  .i-tura span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
.i-d-kratko{display:none}
.i-komande .dugme{gap:6px;min-height:36px;padding:6px 16px;font-size:.75rem}

/* ilustracija prototipa: po jedna tabla za svaki uredjaj, kao tri snimka istog sajta */
.i-via{display:flex;flex-direction:column;height:100%;background:#17110d;color:#fff;font-size:15px;line-height:1.35}
.i-via header{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:16px 20px;background:#e35205;color:#14181b}
.i-via header strong{font-weight:600;font-size:1.3em}
.i-via header span{font-size:.9em}
.i-via-tabla{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:12px;min-height:0;padding:14px;overflow:hidden}
.i-via-kol{min-width:0;min-height:0;padding:12px;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.07)}
.i-via-kol h5{margin:0 0 10px;font-weight:600;font-size:.95em}
.i-via-kar{margin-bottom:8px;padding:10px 12px;border-radius:10px;background:#fff;color:#14181b}
.i-via-kar b{display:block;font-weight:600}
.i-via-t .i-via-tabla{grid-template-columns:repeat(2,minmax(0,1fr))}
.i-via-m header{padding-top:46px}
.i-via-m .i-via-tabla{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px}
.i-via-m .i-via-kol{padding:8px 10px}
.i-via-m .i-via-kol h5{margin-bottom:6px}
.i-via-m .i-via-kar{margin-bottom:5px;padding:6px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-via-m .i-via-kar b{display:inline}

/* panel sa detaljima */
html.i-zakljucano{overflow:hidden;scrollbar-gutter:stable}
.i-panel{position:fixed;inset:0 0 0 auto;width:min(540px,100vw);height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:var(--r-panel) 0 0 var(--r-panel);background:#fff;color:var(--teget);overflow-y:auto;overscroll-behavior:contain;box-shadow:-30px 0 80px rgba(0,0,0,.35)}
.i-panel::backdrop{background:rgba(6,12,24,.28)}
.i-p-vrh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;background:rgba(255,255,255,.96)}
.i-p-vrh small{font-weight:600;font-size:.8125rem;color:var(--siva)}
.i-p-okrugli{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--ivica);border-radius:50%;background:#fff;color:var(--teget);cursor:pointer;transition:background-color .15s,color .15s}
.i-p-okrugli:hover{background:var(--teget);color:#fff}
.i-p-telo{padding:6px 28px 32px}
.i-p-telo h2{font-size:clamp(1.75rem,4vw,2.375rem)}
.i-p-traka{height:6px;width:64px;margin-bottom:14px;border-radius:6px;background:var(--c,var(--zelena))}
.i-p-uvod{margin-top:12px;font-size:1rem}
.i-p-dugmad{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.i-p-telo h3{margin:26px 0 10px;font-size:1.0625rem}
.i-p-telo .spisak{margin-top:0;gap:10px}
.i-p-telo .spisak li{font-size:.9063rem;line-height:1.6}
.i-p-cipovi{display:flex;flex-wrap:wrap;gap:6px}
.i-p-cipovi li{padding:3px 12px;border-radius:999px;background:var(--pozadina);border:1px solid var(--ivica);font-size:.75rem;font-weight:500}
.i-p-napomena{margin-top:24px;padding:16px 20px;border:1px dashed #cdd4e0;border-radius:var(--r-kartica);color:var(--siva);font-size:.8438rem;line-height:1.6}
.i-p-napomena strong{display:block;margin-bottom:4px;color:var(--teget);font-weight:600}
.i-p-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--ivica)}
.i-p-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 0;border:0;background:none;color:var(--teget);font-weight:600;font-size:.875rem;text-align:left;cursor:pointer}
.i-p-nav button:hover{color:var(--zelena-tamna)}
.i-p-nav .desno{text-align:right}
.i-p-nav .desno svg{transform:scaleX(-1)}

/* na užem računaru traka ide u svoj red, a naslov i uvod u jedan iznad nje, da uređaj ne izgubi visinu */
@media (min-width:761px) and (max-width:1439px){
  .i-naslov{flex-basis:100%;display:flex;align-items:center;gap:20px}
  .i-naslov h2{flex:none}
  .i-naslov p{max-width:none;margin-top:0}
}
@media (max-width:1100px){.i-rad{padding-inline:11px}}
@media (min-width:901px){.panel-otvoren .i-scena{transform:translate3d(-200px,0,0)}}
@media (max-width:900px){
  .i-panel{inset:auto 0 0 0;width:100vw;height:88dvh;border-radius:var(--r-panel) var(--r-panel) 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.35)}
}
@media (max-width:760px){
  .izlog{padding-inline:8px}
  .js .i-pista{height:calc(100svh + 320vh)}
  .js .i-bina{top:70px;height:calc(100svh - 78px);min-height:0}
  .i-oznake,.i-opis,.i-jezicak{display:none}
  .i-naslov{flex-basis:100%}
  .i-naslov p{display:none}
  .i-radovi{width:100%}
  .i-komande{gap:10px 12px}
  .i-lenjir{flex-basis:100%;max-width:none;order:-1}
  .i-stanice,.i-u{height:28px}
  .i-auto{width:40px;height:40px}
  .i-dugme,.i-komande .dugme{min-height:40px}
  .i-akcije{gap:8px}
  .i-akcije{flex:1 1 0;min-width:0;flex-wrap:nowrap}
  .i-akcije .dugme{min-width:0;padding-inline:12px}
  .i-akcije .dugme .ikona-mala{display:none}
  .i-rucka{display:none}
  .i-akcije .dugme{flex:1 1 auto}
  /* uska traka: uredjaj se skroluje prstom, pa tura ne zauzima mesto; otvaranje sajta ostaje kao ikonica */
  .i-tura{display:none}
  .i-otvori span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .i-otvori{padding-inline:12px;min-width:44px}
  /* na telefonu je natpis u dva reda, da dugme stane pored ostalih */
  .i-dalje{flex:none;margin:0;padding-inline:12px;white-space:normal;text-align:left;line-height:1.15}
  .i-dalje span{width:min-content}
  .ilu:not([data-m]){display:none}
  .ilu{left:var(--mx);top:var(--my);width:var(--ms)}
  .i-rec{top:44%}
}
@media (max-width:560px){
  .js .i-bina{padding:12px 12px 10px;gap:8px}
  .i-komande{gap:8px}
  .i-lenjir{padding:2px 30px 4px}
  .i-stanice,.i-u{height:24px}
  .i-akcije .dugme{white-space:nowrap}
}
/* na nizem telefonu naslov ostaje za citace ekrana, a mesto dobija uredjaj */
@media (max-width:560px) and (max-height:700px){.i-naslov{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (max-width:400px){.i-u .ikona-mala{display:none}}
@media (max-width:380px){.i-d-puno{display:none}.i-d-kratko{display:inline}}
@media (max-width:340px){.i-akcije .dugme{padding-inline:8px}}
@media (max-width:300px){.i-dalje{flex-basis:100%}.i-dalje span{width:auto}}
@media (max-height:720px) and (min-width:761px){.i-naslov p{display:none}}
@media (max-height:560px){
  .js .i-pista{height:auto}
  .js .i-bina{position:relative;top:0;height:640px}
  .i-dalje{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .i-pista{height:auto}
  .js .i-bina{position:relative;top:0;height:calc(100vh - 96px);min-height:600px}
  .i-dalje{display:none}
  .i-sjaj,.i-poziv::before,.ilu-o,.ilu-o *,.ima-jezicak .i-jezicak svg{animation:none}
}
@media print{.izlog{display:none}}