/* Strane Delatnosti i Aplikacija skice F: vlakno koje se grana u delatnosti i staklene makete ekrana koje se slazu.
   Dopuna na e.css, f.css i strane.css. Pokret daje strane-delatnosti.js (SV petlja); bez njega je sve citljivo. */

.strana--delatnosti .uvodna h1,
.strana--delatnost .uvodna h1 { max-width: 15ch; font-size: clamp(2.5rem, 9.4vw, 6.4rem); }
.strana--app .uvodna h1 { max-width: 12ch; font-size: clamp(2.7rem, 10vw, 6.8rem); }
.oznake--veze { margin-top: 6px; }
@media (min-width: 900px) { .scena-red--pun { grid-template-columns: minmax(0, 1fr); } .scena-red--pun .scena-red__glava { position: relative; top: auto; } }
.oznake--veze a { color: var(--sivo); text-decoration: none; }
.oznake--veze li { padding: 0; }
.oznake--veze a { display: block; padding: 10px 13px; }
.oznake--veze a:hover { color: var(--zrak2); }

/* ---------- vlakno koje se grana ---------- */
.grane { position: relative; max-width: calc(var(--sir) + var(--rub) * 2); margin: 0 auto; padding: clamp(60px, 11vh, 120px) var(--rub) 0; }
.grane__glava { position: relative; max-width: 46em; margin: 0 0 clamp(30px, 6vh, 64px); }
.grane__glava h2 { margin-top: 16px; font: 800 clamp(2.1rem, 8.4vw, 4.6rem)/.96 var(--naslov); letter-spacing: -.04em; text-wrap: balance; }
.grane__glava h2 em { font-style: normal; color: var(--zrak2); }
.grane__tok { position: relative; }
.grane__svg { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ima-js .grane__svg { display: block; }
.grane__lista { display: flex; flex-direction: column; gap: clamp(20px, 4vh, 34px); padding: 0 0 0 34px; }
.grane--cetiri .grane__lista { gap: clamp(20px, 4vh, 30px); }
.v-sjaj { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .16; }
.v-jezgro { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.v-cvor { fill: var(--noc); stroke-width: 2; opacity: .35; transition: opacity .4s, fill .4s; }
.v-cvor--tu { opacity: 1; fill: currentColor; }
.v-sjajcvor { opacity: 0; transition: opacity .5s; }
.v-cvor--tu + .v-sjajcvor { opacity: .35; }
.v-izvor { fill: var(--noc); stroke: var(--zrak); stroke-width: 2; }

.grana { position: relative; padding: 18px 20px 20px; --b: var(--zrak); transition: border-color .5s, box-shadow .6s; }
.grana__br { display: flex; align-items: center; gap: 10px; color: var(--tiho); }
.grana__br b { color: var(--b); font-weight: 600; }
.grana h3 { margin: 10px 0 8px; font: 700 clamp(1.2rem, 4.4vw, 1.5rem)/1.12 var(--naslov); letter-spacing: -.03em; text-wrap: balance; }
.grana h3 a { text-decoration: none; }
.grana h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.grana h3 a:focus-visible { outline: none; }
.grana:has(h3 a:focus-visible) { outline: 2px solid var(--zrak); outline-offset: 3px; }
.grana__strelica { color: var(--b); transition: transform .25s var(--lako); display: inline-block; margin-left: .3em; white-space: pre; }
.grana:hover .grana__strelica { transform: translateX(4px); }
.grana__tekst { color: var(--sivo); font-size: .98rem; line-height: 1.55; }
.grana__nap { margin-top: 14px; color: var(--b); font-size: 10.5px; letter-spacing: .08em; }
.grana--tu { border-color: color-mix(in srgb, var(--b) 55%, transparent); box-shadow: inset 0 1px 0 rgba(220, 250, 255, .18), 0 0 46px -14px var(--b), 0 30px 70px -30px rgba(0, 0, 0, .9); }
.grane__nap { max-width: 46em; padding: 22px 24px; color: var(--sivo); line-height: 1.7; }
.delatnost__pain { max-width: 46em; padding: clamp(20px, 3vw, 32px); color: var(--sivo); font-size: 1.1rem; line-height: 1.75; }

@media (min-width: 900px) {
  .grane__lista { padding: 0; gap: clamp(26px, 5vh, 44px); }
  .grane--cetiri .grane__lista { gap: clamp(26px, 5vh, 40px); }
  .grana { width: min(460px, 43%); }
  .grana:nth-child(odd) { align-self: flex-start; }
  .grana:nth-child(even) { align-self: flex-end; margin-top: -64px; }
  .grane--cetiri .grana:nth-child(even) { margin-top: -40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .grane--zivo .grana { opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .6s, transform .8s var(--lako), border-color .5s, box-shadow .6s; }
  .grane--zivo .grana--tu { opacity: 1; transform: none; }
}

/* ---------- aplikacija: uvod i predmet ---------- */
.app-uvod__predmet { display: none; }
@media (min-width: 900px) {
  .app-uvod__predmet { display: block; position: absolute; right: max(2vw, calc(50% - 680px)); top: 50%; z-index: 0; width: min(36vw, 520px); aspect-ratio: 1; transform: translateY(-46%); pointer-events: none;
    background: url("../z/k/predmet-aplikacija-720.webp") center / contain no-repeat;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); opacity: .92; }
}
.app-glava { max-width: calc(var(--sir) + var(--rub) * 2); margin: 0 auto; padding: clamp(60px, 11vh, 120px) var(--rub) clamp(24px, 4vh, 44px); }
.app-glava h2 { margin-top: 16px; max-width: 15em; font: 800 clamp(2.1rem, 8.4vw, 4.6rem)/.96 var(--naslov); letter-spacing: -.04em; text-wrap: balance; }
.app-glava h2 em { font-style: normal; color: var(--zrak2); }

/* ---------- lepljiva scena sa ekranima ---------- */
.ekrani { position: relative; }
.ekrani__scena { position: relative; isolation: isolate; padding: 28px var(--rub) 72px; overflow: clip; }
.ekrani__pozadina { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.ekrani__pozadina img, .ekrani__pozadina video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ekrani__pozadina video { opacity: 0; transition: opacity .9s; }
.ekrani__pozadina video.ide { opacity: 1; }
.ekrani__pozadina::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 5, 8, .8), rgba(3, 5, 8, .25) 45%, transparent 70%), radial-gradient(90% 70% at 62% 50%, rgba(3, 5, 8, .1), rgba(3, 5, 8, .72)), linear-gradient(180deg, var(--noc), transparent 14%, transparent 86%, var(--noc)); }
.ekrani__unutra { display: grid; gap: 30px; max-width: var(--sir); margin: 0 auto; }
.ekrani__lev { display: none; }
.ekrani__stek { display: grid; gap: 40px; width: 100%; max-width: 380px; margin: 0 auto; }
.ekran-kor__tekst { margin-top: 14px; }
.ekran-kor__tekst .mono { color: var(--zrak); }
.ekran-kor__tekst h3 { margin: 6px 0 4px; font: 700 1.35rem/1.1 var(--naslov); letter-spacing: -.03em; }
.ekran-kor__tekst p:last-child { color: var(--sivo); }
@media (min-width: 900px) {
  .ekrani__unutra { gap: 56px; }
  .ekrani__stek { max-width: 860px; }
}

.ekrani--zivo { height: calc(100svh + (var(--n, 5) - 1) * 78svh); }
.ekrani--zivo .ekrani__scena { position: sticky; top: 0; height: 100svh; padding: 78px var(--rub) 70px; display: grid; align-items: center; }
.ekrani--zivo .ekrani__unutra { width: 100%; grid-template-rows: auto minmax(0, 1fr); gap: 14px; align-content: center; }
.ekrani--zivo .ekrani__lev { display: block; position: relative; }
.ekrani--zivo .ekran-kor__tekst { display: none; }
.ekrani--zivo .ekrani__stek { position: relative; display: block; perspective: 1700px; width: min(100%, calc((100svh - 300px) * 34 / 48)); aspect-ratio: 34 / 48; }
.ekrani--zivo .ekran-kor { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; will-change: transform, opacity; }
.ekrani--zivo .ekran-kor:first-child { opacity: 1; }
.ekrani__opis { display: grid; }
.ekrani__opis li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .55s var(--lako); pointer-events: none; }
.ekrani__opis li[aria-current] { opacity: 1; transform: none; pointer-events: auto; }
.ekrani__br { color: var(--zrak); font-size: 12px; letter-spacing: .1em; }
.ekrani__br b { font-weight: 600; }
.ekrani__opis h3 { margin: 6px 0 6px; font: 800 clamp(1.7rem, 6vw, 3.4rem)/.98 var(--naslov); letter-spacing: -.04em; text-wrap: balance; }
.ekrani__opis p:last-child { max-width: 28em; color: var(--sivo); font-size: 1.02rem; line-height: 1.55; }
.ekrani__tacke { display: flex; gap: 8px; margin-top: 16px; }
.ekrani__tacke i { width: 26px; height: 3px; border-radius: 2px; background: var(--ivica2); transition: background .4s, box-shadow .4s, width .4s; }
.ekrani__tacke i.on { width: 44px; background: var(--zrak); box-shadow: 0 0 12px rgba(57, 225, 255, .7); }
@media (min-width: 900px) {
  .ekrani--zivo .ekrani__scena { padding-top: 70px; padding-bottom: 60px; }
  .ekrani--zivo .ekrani__unutra { grid-template-columns: minmax(0, .74fr) minmax(0, 1.5fr); grid-template-rows: none; align-items: center; gap: clamp(28px, 4vw, 70px); }
  .ekrani--zivo .ekrani__stek { width: 100%; max-width: min(860px, calc((100svh - 150px) * 64 / 40)); aspect-ratio: 64 / 40; margin-left: auto; margin-right: 0; }
  .ekrani__tacke { margin-top: 28px; }
}

/* ekran: staklena maketa, sve u em jedinicama, velicina prati sirinu ekrana (container query) */
.ekran { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 34 / 48; overflow: hidden; border: 1px solid rgba(190, 240, 255, .26); border-radius: 16px;
  background: linear-gradient(165deg, #121e2c, #070b11 60%); box-shadow: inset 0 1px 0 rgba(220, 250, 255, .2), 0 50px 90px -34px #000, 0 0 60px -26px rgba(57, 225, 255, .5); }
.ekrani--zivo .ekran { height: 100%; aspect-ratio: auto; transform: rotateY(-4deg) rotateX(2deg); transform-origin: 50% 60%; }
@media (min-width: 900px) { .ekran { aspect-ratio: 64 / 40; } }
.ekran__traka { display: flex; align-items: center; gap: .6em; height: 3em; padding: 0 1.2em; border-bottom: 1px solid var(--ivica); font-size: calc(100cqw / 34); background: rgba(150, 220, 255, .04); }
.ekran__traka i { width: .8em; height: .8em; border-radius: 50%; background: rgba(176, 208, 236, .26); }
.ekran__traka i:first-child { background: var(--amber); opacity: .85; }
.ekran__traka span { margin-left: .8em; color: var(--tiho); font-size: .92em; }
.ekran__ui { --u: calc(100cqw / 34); display: flex; flex-direction: column; gap: 1em; height: calc(100% - 3em); padding: 1.3em 1.4em 1.4em; font-size: var(--u); line-height: 1.3; color: var(--kost); }
.ekran__zatamni { position: absolute; inset: 0; background: #02040a; opacity: 0; pointer-events: none; }
@media (min-width: 900px) {
  .ekran__traka { font-size: calc(100cqw / 60); }
  .ekran__ui { --u: calc(100cqw / 60); gap: 1.2em; padding: 1.6em 1.8em 1.8em; }
}
.ekran .oz { color: var(--tiho); font: 500 .78em/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.ekran .seg { display: inline-flex; padding: .25em; border: 1px solid var(--ivica2); border-radius: .6em; font-size: .9em; }
.ekran .seg span, .ekran .seg b { padding: .45em .9em; border-radius: .45em; color: var(--tiho); font-weight: 500; }
.ekran .seg b { background: rgba(57, 225, 255, .14); color: var(--zrak2); }
.t1 { --tc: 57, 225, 255; }
.t2 { --tc: 255, 178, 77; }
.t3 { --tc: 168, 150, 255; }

/* kalendar */
.kal__vrh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8em; }
.legenda { display: flex; gap: 1em; font-size: .86em; color: var(--sivo); }
.legenda span::before { content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .45em; border-radius: 50%; background: rgb(var(--tc)); }
.kal__mreza { flex: 1; min-height: 0; display: grid; grid-template-columns: 3.4em repeat(3, minmax(0, 1fr)); grid-template-rows: 2.2em repeat(8, minmax(0, 1fr)); gap: .35em; }
.kal__mreza .gl { align-self: center; justify-self: center; color: rgb(var(--tc, 176, 208, 236)); font: 600 .85em/1 var(--mono); }
.kal__mreza .sat { color: var(--tiho); font: 500 .74em/1.2 var(--mono); padding-top: .2em; }
.blok { padding: .5em .7em; border-left: .25em solid rgb(var(--tc)); border-radius: .5em; background: rgba(var(--tc), .14); font-weight: 600; font-size: .9em; line-height: 1.15; overflow: hidden; }
.blok small { display: block; margin-top: .2em; color: var(--sivo); font-weight: 400; font-size: .86em; }
.slobodno { display: grid; place-items: center; border: 1px dashed var(--ivica2); border-radius: .5em; color: var(--tiho); font: 500 .72em/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.blok.podignut { position: relative; z-index: 2; background: rgba(var(--tc), .3); box-shadow: 0 1em 2em -.6em #000, 0 0 0 1px rgba(var(--tc), .8); transform: translate(.4em, -.5em) rotate(1.6deg); }
@media (prefers-reduced-motion: no-preference) {
  .ekran--tu .blok.podignut { animation: dragni 3.2s ease-in-out infinite; }
}
@keyframes dragni { 0%, 100% { transform: translate(.4em, -.5em) rotate(1.6deg); } 50% { transform: translate(1.2em, -2.6em) rotate(2.6deg); } }
@media (max-width: 899px) { .legenda { display: none; } .kal__mreza .sat:nth-of-type(n+3) { display: none; } }

/* rezervacija */
.koraci { display: flex; gap: .6em; font-size: .9em; }
.koraci li { display: flex; align-items: center; gap: .55em; padding: .5em .9em; border: 1px solid var(--ivica); border-radius: 999px; color: var(--tiho); }
.koraci li b { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ivica); font: 600 .85em/1 var(--mono); }
.koraci .gotov { color: var(--sivo); }
.koraci .gotov b { background: rgba(57, 225, 255, .25); color: var(--zrak2); }
.koraci .tu { border-color: var(--amber); color: var(--svetlo); }
.koraci .tu b { background: var(--amber); color: #1b1307; }
.rez__telo { flex: 1; min-height: 0; display: grid; gap: 1.2em; align-content: center; }
.rez__sazetak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em .8em; padding: .7em .9em; border: 1px solid var(--ivica2); border-radius: .6em; color: var(--sivo); font-size: .9em; }
.rez__sazetak b { color: var(--svetlo); font-weight: 600; }
.rez__lev, .rez__des { display: grid; gap: .7em; align-content: start; }
.izbor { display: flex; align-items: center; gap: .7em; padding: .6em .8em; border: 1px solid var(--ivica2); border-radius: .7em; font-weight: 600; }
.izbor i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(57, 225, 255, .2); color: var(--zrak2); font-style: normal; font-weight: 700; }
.usl { display: grid; gap: .4em; }
.usl li { display: flex; justify-content: space-between; padding: .6em .8em; border: 1px solid var(--ivica); border-radius: .6em; color: var(--sivo); }
.usl li small { color: var(--tiho); font: 500 .8em/1.5 var(--mono); }
.usl .on { border-color: var(--zrak); background: rgba(57, 225, 255, .1); color: var(--kost); }
.dani { display: flex; gap: .4em; font: 500 .8em/1 var(--mono); }
.dani span, .dani b { flex: 1; padding: .7em 0; border: 1px solid var(--ivica); border-radius: .5em; text-align: center; color: var(--tiho); font-weight: 500; }
.dani b { border-color: var(--zrak); background: rgba(57, 225, 255, .12); color: var(--zrak2); }
.slotovi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; font: 500 .86em/1 var(--mono); }
.slotovi span, .slotovi b { padding: .75em 0; border: 1px solid var(--ivica2); border-radius: .5em; text-align: center; color: var(--kost); font-weight: 500; }
.slotovi .zauz { color: var(--tiho); border-color: var(--ivica); text-decoration: line-through; opacity: .6; }
.slotovi b { border-color: var(--amber); background: rgba(255, 178, 77, .18); color: var(--svetlo); }
.rez__dugme { padding: .9em 1em; border-radius: .5em; background: var(--svetlo); color: #1b1307; text-align: center; font-weight: 700; }
.rez__nap { color: var(--tiho); font-size: .74em; text-align: center; }
@media (max-width: 899px) { .usl li:nth-child(n+3) { display: none; } .slotovi span:nth-child(n+7), .slotovi .zauz:nth-child(n+7) { display: none; } }
@media (min-width: 900px) { .rez__telo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2em; } }

/* podsetnici */
.pod__vrh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8em; }
.pod__telo { flex: 1; min-height: 0; display: grid; gap: 1.2em; align-content: center; }
.pod__nit { display: grid; gap: .8em; align-content: start; }
.vreme { color: var(--tiho); font-size: .74em; text-align: center; }
.mehur { max-width: 88%; padding: .9em 1.1em; border-radius: 1.1em; line-height: 1.4; }
.mehur.ap { background: rgba(150, 220, 255, .1); border: 1px solid var(--ivica2); border-top-left-radius: .3em; }
.mehur.kl { justify-self: end; background: rgba(57, 225, 255, .2); border-top-right-radius: .3em; }
.dugmici { display: flex; gap: .5em; margin-top: .8em; font-size: .9em; }
.dugmici b, .dugmici span { padding: .5em 1em; border-radius: .5em; font-weight: 600; }
.dugmici b { background: var(--svetlo); color: #1b1307; }
.dugmici span { border: 1px solid var(--ivica2); color: var(--sivo); }
.pod__stanje { display: flex; align-items: center; gap: .7em; padding: .8em 1em; border: 1px solid rgba(57, 225, 255, .4); border-radius: .7em; background: rgba(57, 225, 255, .08); color: var(--zrak2); font-size: .9em; }
.pod__stanje i, .pod__bocno i { width: .7em; height: .7em; border-radius: 50%; background: var(--zrak); box-shadow: 0 0 .8em var(--zrak); flex: none; }
.pod__bocno { display: none; }
.pod__bocno ul { display: grid; gap: .6em; margin-top: 1em; color: var(--sivo); }
.pod__bocno li { display: flex; align-items: center; gap: .7em; padding: .7em .9em; border: 1px solid var(--ivica); border-radius: .6em; }
.pod__bocno .s1 { background: var(--tiho); box-shadow: none; }
.pod__bocno .s3 { background: var(--amber); box-shadow: 0 0 .8em var(--amber); }
@media (max-width: 899px) { .pod__vrh .seg span { display: none; } }
@media (min-width: 900px) { .pod__telo { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 2em; } .pod__bocno { display: block; } }

/* klijenti */
.kli { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.2em; }
.kli__lista ul { display: grid; gap: .4em; margin-top: .9em; }
.kli__lista li { display: flex; align-items: center; gap: .8em; padding: .55em .8em; border: 1px solid var(--ivica); border-radius: .6em; color: var(--sivo); }
.kli__lista li i, .kli__ime i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(168, 150, 255, .22); color: #d8d0ff; font-style: normal; font-weight: 700; }
.kli__lista .on { border-color: var(--zrak); background: rgba(57, 225, 255, .09); color: var(--kost); }
.kli__kart { display: grid; gap: .9em; align-content: start; padding: 1.1em; border: 1px solid var(--ivica2); border-radius: .8em; background: rgba(150, 220, 255, .04); }
.kli__ime { display: flex; align-items: center; gap: .9em; }
.kli__ime i { width: 2.8em; height: 2.8em; font-size: 1.05em; }
.kli__ime strong { display: block; font: 700 1.25em/1.1 var(--naslov); }
.kli__ime small { color: var(--tiho); }
.kli__kart dl { display: grid; gap: .7em; }
.kli__kart dt { color: var(--tiho); font: 500 .72em/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.kli__kart dd { margin: .35em 0 0; color: var(--kost); }
.cip { display: inline-block; margin: 0 .4em .3em 0; padding: .3em .8em; border: 1px solid var(--ivica2); border-radius: 999px; font-size: .9em; }
.prepos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; }
.prepos figure { display: grid; gap: .4em; }
.prepos span { display: block; aspect-ratio: 16 / 9; border-radius: .5em; }
.prepos .pre { background: linear-gradient(135deg, #263647, #141d29); }
.prepos .posle { background: linear-gradient(135deg, rgba(57, 225, 255, .35), rgba(255, 178, 77, .3)); }
.prepos figcaption { color: var(--tiho); font-size: .72em; }
@media (max-width: 899px) { .kli__lista li:nth-child(n+4), .kli__kart dl > div:nth-child(3) { display: none; } .prepos span { aspect-ratio: 3 / 1; } }
@media (min-width: 900px) { .kli { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 1.8em; } }

/* statistika */
.sta__kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.sta__kpi div { padding: .8em .9em; border: 1px solid var(--ivica2); border-radius: .7em; background: rgba(150, 220, 255, .04); }
.sta__kpi b { display: block; font: 800 1.9em/1 var(--naslov); letter-spacing: -.03em; color: var(--zrak2); }
.sta__kpi span { display: block; margin-top: .4em; color: var(--tiho); font: 500 .68em/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sta__telo { flex: 1; min-height: 0; display: grid; gap: 1.2em; align-content: stretch; grid-template-rows: minmax(0, 1.3fr) auto; }
.sta__bar { display: flex; flex-direction: column; gap: .8em; min-height: 0; }
.stubovi { position: relative; flex: 1; min-height: 6em; border-bottom: 1px solid var(--ivica2); }
.stubovi span { position: absolute; bottom: 0; left: calc(var(--k) * 14.3% + 1.2%); width: 11.8%; height: calc((100% - 2em) * var(--h) + 2em); border-radius: .35em .35em 0 0; background: linear-gradient(180deg, rgba(57, 225, 255, .75), rgba(57, 225, 255, .15)); }
.stubovi .max { background: linear-gradient(180deg, var(--amber), rgba(255, 178, 77, .2)); }
.stubovi em { position: absolute; left: 0; right: 0; bottom: .5em; text-align: center; color: var(--kost); font: 500 .72em/1 var(--mono); font-style: normal; }
.sta__top ul { display: grid; gap: 1.2em; margin-top: 1em; }
.sta__top li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: center; gap: .8em; color: var(--sivo); font-size: 1em; }
.sta__top li i { display: block; height: .7em; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--zrak), rgba(57, 225, 255, .3)); }
@media (max-width: 899px) { .sta__top li:nth-child(n+4) { display: none; } }
@media (min-width: 900px) { .sta__telo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: none; gap: 2em; } }

/* ---------- funkcije, druge aplikacije ---------- */
.funkcije { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.funkcija { padding: 22px 22px 24px; }
.funkcija__br { color: var(--zrak); letter-spacing: .1em; }
.funkcija h3 { margin: 12px 0 8px; font: 700 1.3rem/1.12 var(--naslov); letter-spacing: -.03em; }
.funkcija p:not([class]) { color: var(--sivo); line-height: 1.6; }
.funkcija p.funkcija__nap { margin-top: 12px; color: var(--tiho); font: 500 12px/1.45 var(--mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.funkcija__veza a { color: var(--zrak2); font: 500 14px/1.4 var(--mono); overflow-wrap: anywhere; }
.funkcija__veza a:hover { color: var(--kost); }
.funkcije__dugmad { margin-top: 22px; }
.srodni--tekst a { padding: 20px 20px 22px; }
.srodni--tekst strong { margin: 0 0 8px; }
.srodni--tekst span { margin: 0; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ekran--prvi .blok.podignut { transform: translate(.4em, -.5em) rotate(1.6deg); }
}

/* klip preobrazaja: niti se zapetljaju i zgusnu u predmet dok se ide kroz delatnosti; stoji uz ekran dok traje sekcija */
.grane__film-okvir { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.grane__film { position: sticky; top: 0; height: 100svh; overflow: hidden; opacity: .42; -webkit-mask-image: radial-gradient(75% 65% at 60% 50%, #000 35%, transparent 80%); mask-image: radial-gradient(75% 65% at 60% 50%, #000 35%, transparent 80%); }
.grane__film picture { display: contents; }
.grane__film img, .grane__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grane__film video { opacity: 0; transition: opacity .8s; }
.grane__film video.ide { opacity: 1; }
.grane > .grane__glava, .grane > .grane__tok { position: relative; z-index: 1; }
@media (min-width: 900px) { .grane__film { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .grane__film video { display: none; } }

.grane__glava .sek__lid, .uvodna .uvodna__lid { text-shadow: 0 0 8px rgba(2, 3, 6, 1), 0 0 22px rgba(2, 3, 6, .9); }

.scena-red__telo a.dugme--puno { color: #1b1307; }

/* ---------- delatnost: dug predmet u naslovu, primeri sa zive strane ---------- */
.strana--delatnost .uvodna h1.h1--dug { max-width: 17ch; font-size: clamp(2.3rem, 7.4vw, 5.4rem); }
.primeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.primer { display: flex; flex-direction: column; padding: 6px 6px 16px; color: var(--kost); transition: transform .4s var(--lako), border-color .3s; }
.primer:hover { transform: translateY(-4px); border-color: rgba(205, 250, 255, .6); }
.primer img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: top; border-radius: 9px; }
.primer h3 { margin: 12px 8px 4px; font: 700 1.15rem/1.15 var(--naslov); letter-spacing: -.02em; }
.primer h3 a { color: var(--kost); text-decoration: none; }
.primer h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.primer h3 a:focus-visible { outline: none; }
.primer:has(h3 a:focus-visible) { outline: 2px solid var(--zrak); outline-offset: 3px; }
.primer p { margin: 0 8px; color: var(--sivo); font-size: .95rem; line-height: 1.5; }
.primer .primer__sajt { position: relative; z-index: 1; margin-top: auto; padding-top: 12px; }
.primer__sajt a { color: var(--zrak2); font: 500 13px/1.3 var(--mono); text-decoration: none; overflow-wrap: anywhere; }
.primer__sajt a:hover { text-decoration: underline; }

/* ---------- ekrani ostalih aplikacija: zajednicki delovi, sve u em kao kod salona ---------- */
.ui-vrh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em .9em; }
.ui-dva { flex: 1; min-height: 0; display: grid; gap: 1em; align-content: start; }
.ui-dva--kratko { flex: none; }
.ui-kol { display: grid; gap: .65em; align-content: start; min-width: 0; }
.ui-kol > .seg, .ui-kol > .oz, .ui-kol > .ui-dug { justify-self: start; }
@media (min-width: 900px) { .ui-dva { grid-template-columns: minmax(0, var(--a, 1fr)) minmax(0, var(--b, 1fr)); gap: 1.6em; } }
@media (max-width: 899px) { .ekran .sk { display: none !important; } }
@media (min-width: 900px) { .ekran .st { display: none !important; } }
.ekran__ui > .rez__nap { margin-top: auto; }
.cip--on { border-color: var(--zrak); background: rgba(57, 225, 255, .12); color: var(--zrak2); }
.znak { --zc: 57, 225, 255; display: inline-flex; align-items: center; gap: .45em; padding: .38em .75em; border: 1px solid rgba(var(--zc), .45); border-radius: 999px; background: rgba(var(--zc), .12); color: rgb(var(--zc)); font: 600 .74em/1 var(--mono); font-style: normal; letter-spacing: .03em; white-space: nowrap; }
.znak i { width: .6em; height: .6em; border-radius: 50%; background: currentColor; box-shadow: 0 0 .6em currentColor; }
.znak--upoz { --zc: 255, 178, 77; }
.znak--tiho { --zc: 176, 194, 214; }

.ui-polje { display: grid; gap: .4em; }
.ui-polje b { display: block; padding: .62em .85em; border: 1px solid var(--ivica2); border-radius: .6em; background: rgba(150, 220, 255, .04); color: var(--kost); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-polje--fokus b { border-color: var(--zrak); background: rgba(57, 225, 255, .07); box-shadow: 0 0 0 .22em rgba(57, 225, 255, .12); }
.ui-trazi b { position: relative; padding-left: 2.5em; font-family: var(--mono); }
.ui-trazi b::before { content: ''; position: absolute; left: .95em; top: 50%; width: .72em; height: .72em; margin-top: -.5em; border: .13em solid var(--sivo); border-radius: 50%; }
.ui-trazi b::after { content: ''; position: absolute; left: 1.55em; top: calc(50% + .22em); width: .42em; height: .13em; border-radius: 1em; background: var(--sivo); transform: rotate(45deg); }

.ui-redovi { display: grid; gap: .4em; align-content: start; }
.ui-redovi > div { display: flex; align-items: center; gap: .75em; padding: .55em .75em; border: 1px solid var(--ivica); border-radius: .6em; color: var(--sivo); min-width: 0; }
.ui-redovi > div > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-redovi small { display: block; color: var(--tiho); font: 500 .8em/1.35 var(--mono); }
.ui-redovi > div > i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(57, 225, 255, .16); color: var(--zrak2); font-style: normal; font-weight: 700; }
.ui-redovi > div > em { flex: none; color: var(--tiho); font: 500 .82em/1 var(--mono); font-style: normal; }
.ui-redovi .on { border-color: var(--zrak); background: rgba(57, 225, 255, .09); color: var(--kost); }
.ui-redovi .on > em { color: var(--zrak2); }
.ui-ugaseno { opacity: .55; }

.ui-tab { display: grid; gap: .3em; align-content: start; font-size: .92em; }
.ui-tab > div { display: grid; grid-template-columns: var(--km); gap: .8em; align-items: center; padding: .55em .75em; border: 1px solid var(--ivica); border-radius: .55em; color: var(--sivo); }
@media (min-width: 900px) { .ui-tab > div { grid-template-columns: var(--k); } }
.ui-tab > div > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tab .gl { padding-top: 0; padding-bottom: .1em; border: 0; color: var(--tiho); font: 500 .8em/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.ui-tab .on { border-color: var(--zrak); background: rgba(57, 225, 255, .08); color: var(--kost); }
.ui-tab b { color: var(--kost); font-weight: 600; }
.ui-tab .m { font-family: var(--mono); font-size: .92em; }
.ui-tab .ui-unos { padding: .15em .4em; border: 1px solid var(--zrak); border-radius: .35em; background: rgba(57, 225, 255, .1); color: var(--zrak2); }
.ui-bar { display: block; height: .5em; width: var(--w); border-radius: 1em; background: linear-gradient(90deg, var(--zrak), rgba(57, 225, 255, .3)); }

.ui-dug { display: flex; flex-wrap: wrap; gap: .45em; }
.ui-dug b, .ui-dug span { padding: .62em 1em; border-radius: .5em; font-size: .9em; font-weight: 600; line-height: 1.2; }
.ui-dug b { background: var(--svetlo); color: #1b1307; }
.ui-dug span { border: 1px solid var(--ivica2); color: var(--sivo); }

.ui-mapa { position: relative; min-height: 12em; border: 1px solid var(--ivica2); border-radius: .7em; overflow: hidden;
  background:
    linear-gradient(24deg, transparent 47%, rgba(165, 243, 255, .14) 47.5% 49.5%, transparent 50%),
    linear-gradient(-58deg, transparent 58%, rgba(165, 243, 255, .1) 58.5% 60%, transparent 60.5%),
    linear-gradient(90deg, transparent 33%, rgba(176, 208, 236, .08) 33.3% 35%, transparent 35.3%),
    linear-gradient(0deg, transparent 63%, rgba(176, 208, 236, .08) 63.3% 65%, transparent 65.3%),
    repeating-linear-gradient(0deg, rgba(176, 208, 236, .045) 0 1px, transparent 1px 2.4em),
    repeating-linear-gradient(90deg, rgba(176, 208, 236, .045) 0 1px, transparent 1px 2.4em),
    radial-gradient(60% 50% at 70% 30%, rgba(57, 225, 255, .08), transparent), #08101a; }
.ui-mapa--visoka { min-height: 16em; }
.ui-ruta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-ruta path { fill: none; stroke: var(--zrak); stroke-width: 2.2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(57, 225, 255, .7)); }
.pin { --pc: 57, 225, 255; position: absolute; left: var(--x); top: var(--y); width: .95em; height: .95em; margin: -.475em 0 0 -.475em; border-radius: 50%; background: rgb(var(--pc)); box-shadow: 0 0 0 .3em rgba(var(--pc), .22), 0 0 1.1em rgba(var(--pc), .8); }
.pin em { position: absolute; left: 1.35em; top: 50%; transform: translateY(-50%); padding: .22em .5em; border-radius: .35em; background: rgba(3, 5, 8, .82); color: var(--kost); font: 500 .8em/1.2 var(--mono); font-style: normal; white-space: nowrap; }
.pin--cilj { --pc: 255, 178, 77; }
.pin--zauzet { --pc: 143, 155, 176; }
@media (prefers-reduced-motion: no-preference) {
  .ekran--tu .pin--cilj::after { content: ''; position: absolute; inset: -.2em; border-radius: 50%; border: 2px solid rgb(var(--pc)); animation: puls 1.8s ease-out infinite; }
}
@keyframes puls { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

.ui-poslovi { display: grid; gap: .65em; align-content: start; }
.ui-posao { display: grid; gap: .65em; padding: .8em .9em; border: 1px solid var(--ivica2); border-radius: .7em; background: rgba(150, 220, 255, .03); }
.ui-posao.on { border-color: rgba(57, 225, 255, .55); }
.ui-posao p { display: flex; justify-content: space-between; gap: .8em; }
.ui-posao p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kost); }
.ui-posao p span { flex: none; color: var(--tiho); font: 500 .82em/1.5 var(--mono); }
.ui-faze { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35em; }
.ui-faze--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-faze li { position: relative; padding-top: .9em; color: var(--tiho); font: 500 .74em/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-faze li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .4em; border-radius: 1em; background: var(--ivica2); }
.ui-faze small { display: block; color: var(--sivo); }
.ui-faze .gotov { color: var(--zrak2); }
.ui-faze .gotov::before { background: var(--zrak); box-shadow: 0 0 .6em rgba(57, 225, 255, .55); }
.ui-faze .tu { color: var(--svetlo); }
.ui-faze .tu::before { background: var(--amber); box-shadow: 0 0 .6em rgba(255, 178, 77, .6); }

.ui-racun { display: flex; flex-direction: column; gap: .6em; padding: 1em 1.1em; border: 1px solid var(--ivica2); border-radius: .8em; background: linear-gradient(180deg, rgba(232, 237, 243, .07), rgba(232, 237, 243, .02)); }
.ui-racun__vrh { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3em .8em; padding-bottom: .65em; border-bottom: 1px dashed var(--ivica2); }
.ui-racun__vrh b { font: 700 1.1em/1.15 var(--naslov); letter-spacing: -.01em; }
.ui-racun__vrh span { color: var(--tiho); font: 500 .8em/1.6 var(--mono); }
.ui-racun dl { display: grid; gap: .5em; }
.ui-racun dl div { display: flex; justify-content: space-between; gap: 1em; color: var(--sivo); }
.ui-racun dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-racun dd { flex: none; color: var(--kost); font: 500 .9em/1.5 var(--mono); }
.ui-racun__pdf { display: flex; align-items: center; gap: .3em; margin-top: auto; padding-top: .65em; border-top: 1px solid var(--ivica2); color: var(--sivo); font: 500 .82em/1.3 var(--mono); }
.ui-racun__pdf .cip { margin: 0 .3em 0 0; font-family: var(--mono); }

.ui-cek { display: grid; gap: .4em; align-content: start; }
.ui-cek > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .45em .5em .45em .75em; border: 1px solid var(--ivica); border-radius: .6em; color: var(--sivo); }
.ui-cek > div > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-cek .on { border-color: rgba(255, 120, 120, .55); color: var(--kost); }
.tri { display: inline-flex; gap: .25em; font: 600 .72em/1 var(--mono); }
.tri span, .tri b { padding: .5em .6em; border: 1px solid var(--ivica); border-radius: .4em; color: var(--tiho); font-weight: 600; }
.tri .da { border-color: rgba(57, 225, 255, .6); background: rgba(57, 225, 255, .16); color: var(--zrak2); }
.tri .ne { border-color: rgba(255, 120, 120, .7); background: rgba(255, 120, 120, .16); color: #ffc2c2; }
.tri .op { border-color: rgba(255, 178, 77, .6); background: rgba(255, 178, 77, .16); color: var(--svetlo); }
.ui-foto { position: relative; display: grid; place-items: end start; aspect-ratio: 4 / 3; padding: .7em; border: 1px solid rgba(255, 120, 120, .45); border-radius: .6em; overflow: hidden;
  background: radial-gradient(42% 46% at 50% 54%, #10161e 0 52%, #2b3542 53% 66%, #151c25 67%), linear-gradient(135deg, #1d2836, #0b1119); }
.ui-foto span { padding: .25em .5em; border-radius: .3em; background: rgba(3, 5, 8, .8); color: var(--sivo); font: 500 .74em/1.2 var(--mono); }
@media (max-width: 899px) { .ui-foto { aspect-ratio: 3 / 1; } }

.ui-nalepnica { display: grid; gap: .45em; padding: .85em .95em; border-radius: .5em; background: #eef1f4; color: #0b1018; box-shadow: 0 1em 2em -1em #000; }
.ui-nalepnica b { font: 700 1.15em/1 var(--mono); letter-spacing: .06em; }
.ui-nalepnica small { font: 500 .76em/1.3 var(--mono); }
.ui-barkod { display: block; height: 3em; background: repeating-linear-gradient(90deg, #0b1018 0 .12em, transparent .12em .3em, #0b1018 .3em .38em, transparent .38em .5em, #0b1018 .5em .72em, transparent .72em .84em, #0b1018 .84em .9em, transparent .9em 1.06em); }

.ui-linija { display: grid; gap: .45em; align-content: start; margin-left: .5em; padding-left: 1.2em; border-left: 1px solid var(--ivica2); }
.ui-linija > div { position: relative; display: flex; justify-content: space-between; gap: .8em; padding: .55em .75em; border: 1px solid var(--ivica); border-radius: .55em; color: var(--sivo); }
.ui-linija > div::before { content: ''; position: absolute; left: -1.62em; top: 50%; width: .75em; height: .75em; margin-top: -.375em; border: 1px solid var(--zrak); border-radius: 50%; background: var(--noc); }
.ui-linija em { color: var(--tiho); font: 500 .82em/1.5 var(--mono); font-style: normal; }
.ui-linija .on { border-color: var(--zrak); background: rgba(57, 225, 255, .08); color: var(--kost); }
.ui-linija .on::before { background: var(--zrak); box-shadow: 0 0 .7em var(--zrak); }

.ui-mere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
@media (min-width: 900px) { .ui-mere { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ui-mera { display: grid; gap: .45em; padding: .75em .85em; border: 1px solid var(--ivica2); border-radius: .7em; background: rgba(150, 220, 255, .04); }
.ui-mera span { color: var(--tiho); font: 500 .7em/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.ui-mera b { font: 800 1.7em/1 var(--naslov); letter-spacing: -.02em; color: var(--zrak2); }
.ui-mera i { height: .4em; border-radius: 1em; background: linear-gradient(90deg, var(--zrak) var(--w), var(--ivica) var(--w)); }
.ui-mera--upoz b { color: var(--svetlo); }
.ui-mera--upoz i { background: linear-gradient(90deg, var(--amber) var(--w), var(--ivica) var(--w)); }
.ui-graf { flex: 1; min-height: 6em; display: flex; flex-direction: column; gap: .6em; }
.ui-graf svg { flex: 1; width: 100%; min-height: 0; border-bottom: 1px solid var(--ivica2); }
.ui-graf__pov { fill: rgba(57, 225, 255, .14); }
.ui-graf__lin { fill: none; stroke: var(--zrak); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui-alarm { display: flex; align-items: center; gap: .7em; padding: .75em 1em; border: 1px solid rgba(255, 178, 77, .5); border-radius: .7em; background: rgba(255, 178, 77, .1); color: var(--svetlo); font-size: .9em; }
.ui-alarm i { flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 .8em var(--amber); }

.ui-kod { padding: .8em .9em; border: 1px solid var(--ivica2); border-radius: .6em; background: #050a10; color: var(--zrak2); font: 500 .84em/1.55 var(--mono); }
.ui-kod i { color: var(--svetlo); font-style: normal; }

.ui-sirena { display: flex; align-items: center; gap: .8em; padding: .75em .8em .75em 1em; border: 1px solid rgba(255, 120, 120, .7); border-radius: .7em; background: rgba(255, 120, 120, .14); color: #ffd6d6; font-weight: 600; }
.ui-sirena span { flex: 1; }
.ui-sirena i { flex: none; width: .85em; height: .85em; border-radius: 50%; background: #ff7878; box-shadow: 0 0 1em #ff7878; }
.ui-sirena b { padding: .5em .9em; border-radius: .45em; background: var(--svetlo); color: #1b1307; font-size: .9em; }
@media (prefers-reduced-motion: no-preference) { .ekran--tu .ui-sirena i { animation: sirena 1s ease-in-out infinite; } }
@keyframes sirena { 50% { transform: scale(1.45); opacity: .5; } }
.ui-kolone { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
@media (min-width: 900px) { .ui-kolone { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-kolone > div { display: grid; gap: .5em; align-content: start; padding: .65em; border: 1px solid var(--ivica); border-radius: .7em; background: rgba(150, 220, 255, .025); }
.ui-kart { padding: .6em .7em; border: 1px solid var(--ivica2); border-radius: .55em; background: rgba(8, 13, 20, .85); }
.ui-kart b { display: block; color: var(--kost); font: 600 .95em/1.3 var(--mono); }
.ui-kart small { display: block; color: var(--sivo); font-size: .82em; line-height: 1.35; }
.ui-kart--nova { border-color: rgba(255, 120, 120, .7); box-shadow: 0 0 1.2em -.3em rgba(255, 120, 120, .7); }
.ui-kart--gotova { border-color: rgba(57, 225, 255, .55); }
.ui-meni > div > i { width: 2.4em; height: 2.4em; border-radius: .5em; background: linear-gradient(135deg, #6b2a20, #2c140f); }
.ui-meni > div > em { display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 1px solid var(--ivica2); border-radius: 50%; color: var(--kost); font-size: .9em; }
.ui-meni .on > em { border-color: var(--zrak); background: rgba(57, 225, 255, .16); }
.ui-ocena { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .55em .75em; border: 1px solid var(--ivica); border-radius: .6em; }
.ui-ocena b { color: var(--svetlo); letter-spacing: .12em; }

/* stvaran snimak sajta u okviru ekrana; dole se odseca traka sa obavestenjem sa vrha snimka */
.ekran__snimak { position: relative; height: calc(100% - 3em); }
.ekran__snimak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 57%; }
@media (max-width: 899px) { .ekran__snimak img { object-position: 50% 24%; } }

/* pozivnica: koverta, kartica, odbrojavanje */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../z/f/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.ekrani--digitalna-pozivnica .ekran { background: linear-gradient(165deg, #241a20, #0c0a0e 62%); }
.poz { position: relative; align-items: center; justify-content: center; text-align: center; background: radial-gradient(70% 55% at 50% 45%, rgba(215, 164, 164, .16), transparent 72%); overflow: hidden; }
.poz .oz { color: #d9b8b8; }
.poz-nap { color: var(--tiho); font: 500 .78em/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.poz-koverta { position: relative; width: min(100%, 24em); aspect-ratio: 1.5; border: 1px solid rgba(215, 164, 164, .45); border-radius: .6em; overflow: hidden; background: linear-gradient(160deg, #3c2b31, #1e1519); box-shadow: 0 2.4em 3.4em -1.6em #000, 0 0 3em -1em rgba(215, 164, 164, .35); }
.poz-koverta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 1; background: linear-gradient(180deg, #4d3840, #30232a); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.poz-koverta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, #2b1f24 49.6%, transparent 50%) left bottom / 51% 62% no-repeat, linear-gradient(to top left, #2b1f24 49.6%, transparent 50%) right bottom / 51% 62% no-repeat; }
.poz-pecat { position: absolute; left: 50%; top: 60%; z-index: 2; display: grid; place-items: center; width: 4.4em; height: 4.4em; margin: -2.2em 0 0 -2.2em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9b9b9, #a95f5f 58%, #6f3333); color: #fff3f3; font: italic 400 1.5em/1 'Instrument Serif', Georgia, serif; box-shadow: 0 .5em 1.2em rgba(0, 0, 0, .6), inset 0 0 0 .18em rgba(255, 255, 255, .15); }
.poz-karta { display: grid; justify-items: center; gap: .7em; width: min(100%, 24em); padding: 1.8em 1.4em; border-radius: .9em; background: linear-gradient(170deg, #f7eeec, #ebdad6); color: #3b2629; box-shadow: 0 2em 3em -1.4em #000; }
.poz-karta small { color: #7d5a5e; font: 500 .7em/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.poz-karta b { color: #7a3a41; font: italic 400 3em/1 'Instrument Serif', Georgia, serif; }
.poz-karta p { font-size: 1em; line-height: 1.4; }
.poz-odbroj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; width: min(100%, 28em); }
.poz-odbroj div { padding: .9em .2em .8em; border: 1px solid rgba(215, 164, 164, .4); border-radius: .7em; background: rgba(215, 164, 164, .08); }
.poz-odbroj b { display: block; color: #f6d6d6; font: 800 2.3em/1 var(--broj); font-variant-numeric: tabular-nums; }
.poz-odbroj span { display: block; margin-top: .4em; color: var(--tiho); font: 500 .66em/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.poz-konfete { position: absolute; inset: 0; pointer-events: none; }
.poz-konfete i { position: absolute; left: var(--x); top: var(--y); width: .45em; height: .85em; border-radius: .1em; background: hsl(var(--h) 75% 72%); transform: rotate(var(--r)); opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .ekran--tu .poz-konfete i { animation: konfete 3s ease-in var(--d) infinite; } }
@keyframes konfete { from { transform: translateY(-1em) rotate(var(--r)); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(24em) rotate(calc(var(--r) + 260deg)); opacity: 0; } }
@media (min-width: 900px) { .poz-koverta, .poz-karta { width: min(100%, 30em); } .poz-odbroj { width: min(100%, 36em); } }

/* kompres: prevlacenje, redovi fajlova, pregled */
.kmp-drop { display: grid; justify-items: center; gap: .45em; padding: 1.5em 1em; border: 2px dashed rgba(112, 201, 255, .5); border-radius: .9em; background: rgba(112, 201, 255, .06); text-align: center; }
.kmp-drop i { position: relative; width: 2.4em; height: 2.4em; border: 2px solid rgba(112, 201, 255, .7); border-radius: .5em; }
.kmp-drop i::before { content: ''; position: absolute; left: 50%; top: 22%; width: .7em; height: .7em; margin-left: -.35em; border-left: 2px solid #70c9ff; border-top: 2px solid #70c9ff; transform: rotate(45deg); }
.kmp-drop i::after { content: ''; position: absolute; left: 50%; top: 30%; width: 2px; height: 46%; margin-left: -1px; background: #70c9ff; }
.kmp-drop b { color: var(--kost); font-weight: 600; }
.kmp-drop small { color: var(--tiho); font: 500 .76em/1 var(--mono); letter-spacing: .06em; }
.kmp { display: grid; gap: .45em; align-content: start; }
.kmp-red { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45em .8em; align-items: center; padding: .6em .8em; border: 1px solid var(--ivica); border-radius: .6em; }
.kmp-red > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kost); font: 500 .86em/1.3 var(--mono); }
.kmp-red > b { color: #8fe0ff; font: 600 .9em/1 var(--mono); }
.kmp-red > small { color: var(--tiho); font: 500 .78em/1 var(--mono); }
.kmp-red > i { grid-column: 1 / -1; height: .3em; border-radius: 1em; background: linear-gradient(90deg, #70c9ff var(--w), var(--ivica) var(--w)); }
.ui-klizac { position: relative; display: block; height: .4em; margin: .5em .5em .8em 0; border-radius: 1em; background: linear-gradient(90deg, #70c9ff var(--w), var(--ivica2) var(--w)); }
.ui-klizac::after { content: ''; position: absolute; left: var(--w); top: 50%; width: 1.15em; height: 1.15em; margin: -.575em 0 0 -.575em; border-radius: 50%; background: var(--kost); box-shadow: 0 0 0 .25em rgba(112, 201, 255, .3); }
.kmp-pre { display: grid; gap: .6em; align-content: start; }
.kmp-pre__slika { aspect-ratio: 16 / 9; border: 1px solid var(--ivica2); border-radius: .6em; background: linear-gradient(180deg, rgba(3, 5, 8, 0) 55%, rgba(3, 5, 8, .5)), radial-gradient(40% 50% at 70% 35%, #ffd49c, transparent 70%), linear-gradient(160deg, #1d4e6b, #0c2233 60%, #102a1d); }
.kmp-pre p { display: flex; justify-content: space-between; gap: .8em; color: var(--sivo); font: 500 .84em/1.3 var(--mono); }
.kmp-pre b { color: #8fe0ff; }
@media (max-width: 899px) { .kmp-pre__slika { aspect-ratio: 3 / 1; } }
.kmp-mejl { display: grid; gap: .6em; padding: .8em .9em; border: 1px solid var(--ivica2); border-radius: .7em; background: rgba(232, 237, 243, .04); }
.kmp-mejl p { display: flex; justify-content: space-between; gap: .8em; color: var(--sivo); font-size: .88em; }
.kmp-mejl p span:first-child { color: var(--kost); font-weight: 600; }
.kmp-mejl__slike { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.kmp-mejl__slike i { aspect-ratio: 4 / 3; border-radius: .4em; background: radial-gradient(40% 50% at 70% 35%, rgba(255, 212, 156, .9), transparent 70%), linear-gradient(160deg, #1d4e6b, #0c2233 60%, #102a1d); }
.kmp-mejl__slike i:nth-child(2) { background: radial-gradient(45% 55% at 30% 40%, rgba(165, 243, 255, .7), transparent 70%), linear-gradient(200deg, #3a2b45, #141022 65%); }
.kmp-mejl__slike i:nth-child(3) { background: radial-gradient(50% 50% at 55% 60%, rgba(255, 178, 77, .6), transparent 70%), linear-gradient(140deg, #2a3a2a, #0d140d 65%); }

/* na racunaru ekrani ostalih aplikacija imaju manje sadrzaja od kalendara salona: krupniji tekst, kolone do dna */
@media (min-width: 900px) {
  .ekrani:not(.ekrani--frizerski-salon) .ekran__ui { --u: calc(100cqw / 54); }
  .ui-dva { align-content: stretch; }
}
.ekran__ui > .ui-stubovi { flex: 1; min-height: 0; }