/* Skica F: scena preko celog ekrana. Dopuna na e.css. */
.ima-js .scena--f { background: #020306; }
.ima-js .scena--f::before { display: none; }
.ima-js .scena--f .scena__foto { width: 100vw; height: 179.17vw; -webkit-mask-image: none; mask-image: none; }
.scena__foto picture { display: contents; }
.scena__sena { display: none; }
.ima-js .scena__sena { display: block; position: absolute; inset: 0; z-index: 11; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(2, 3, 6, .7)), linear-gradient(180deg, rgba(2, 3, 6, .55), transparent 16%); }

/* film: kadrovi klipa na platnu */
.scena__film { display: none; }
.ima-js .scena__film { display: block; position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; mix-blend-mode: lighten; opacity: 0; transition: opacity .7s; transform-origin: 50% 45%; pointer-events: none; }
.scena--film .scena__film { opacity: 1; }
video.scena__film { object-fit: cover; background: transparent; }
@media (min-width: 900px) {
  .ima-js video.scena__film { right: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
}
.scena--film .scena__foto { opacity: 0; transition: opacity .7s; }
.scena--film .scena__sjaj { display: none; }

/* rezim ulaza: krupni prsljen iz klipa i projekcija sajta iz stakla */
.prs { display: none; }
.ima-js .prs { display: block; position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform-origin: 50% 47%; will-change: transform, opacity; }
.scena--prsljeni .karte { display: none; }
.scena--prsljeni .scena__film { transition: none; }
.proj { display: none; }
.ima-js .scena--prsljeni .proj { display: block; position: absolute; left: 0; top: 0; z-index: 30; overflow: hidden; border-radius: 8px; opacity: 0; pointer-events: none;
  transform-origin: 50% 50%; will-change: transform, opacity; background: #06121a; text-decoration: none;
  outline: 1px solid rgba(190, 245, 255, .75); box-shadow: 0 0 0 1px rgba(57, 225, 255, .25), 0 0 70px rgba(57, 225, 255, .35), 0 30px 60px -20px #000; }
.proj img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.proj::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(150, 240, 255, .14), transparent 30%, transparent 70%, rgba(57, 225, 255, .12)), repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.proj__tekst { display: none; }
.proj--prazno img { display: none; }
.proj--prazno .proj__tekst { display: grid; position: absolute; inset: 0; place-content: center; gap: 8px; padding: 8%; text-align: center; border: 2px dashed var(--amber); border-radius: 8px; }
.proj__tekst b { font: 800 clamp(1.5rem, 6vw, 2.4rem)/.95 var(--naslov); letter-spacing: -.02em; color: var(--amber); }
.proj:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* staklene ploce */
.ima-js .scena--f .karta { padding: 5px; border-radius: 11px; outline: 0; border: 1px solid rgba(190, 240, 255, .4); overflow: visible;
  background: linear-gradient(135deg, rgba(170, 235, 255, .2), rgba(18, 36, 54, .55));
  box-shadow: inset 0 1px 0 rgba(220, 250, 255, .28), 0 16px 44px rgba(0, 0, 0, .6); }
.ima-js .scena--f .karta img { border-radius: 7px; }
.ima-js .scena--f .karta i { inset: 5px; border-radius: 7px; }
.ima-js .scena--f .karta b { left: 13px; top: 13px; }
.ima-js .scena--f .karta::after { inset: 5px; border-radius: 7px;
  background: linear-gradient(112deg, rgba(255, 255, 255, .22), transparent 22%, transparent 66%, rgba(57, 225, 255, .14)); background-size: 220% 100%; background-position: 50% 0; }
.ima-js .scena--f .karta--napred { border-color: rgba(205, 250, 255, .9);
  box-shadow: 0 0 0 1px rgba(165, 243, 255, .22), 0 0 90px rgba(57, 225, 255, .34), 0 0 22px rgba(165, 243, 255, .3), 0 34px 70px -22px #000; }
.ima-js .scena--f .karta--prazna { padding: 8%; border: 2px dashed var(--amber); background: rgba(6, 9, 14, .78); box-shadow: 0 30px 60px -20px #000; }

/* izbor nacina kruzenja na traci skica */
.skica-traka [data-orbita-veza] { padding: 9px 10px; }
.dno ~ .skica-traka { width: auto; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; white-space: normal; border-radius: 22px; }

/* stajalista i sina za prelistavanje */
.stajaliste { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.sina { display: none; }
.ima-js .sina { display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 37; right: 2px; top: 44%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s; }
.ima-js .sina--vidi { opacity: 1; pointer-events: auto; }
.sina ol { display: flex; flex-direction: column; margin: 2px 0; }
.sina button { display: grid; place-items: center; width: 34px; height: 19px; padding: 0; border: 0; background: none; color: var(--tiho); cursor: pointer; }
.sina [data-i] i { display: block; width: 10px; height: 3px; border-radius: 2px; background: rgba(190, 225, 245, .34); transition: width .25s, background .25s, box-shadow .25s; }
.sina [data-i][aria-current] i { width: 22px; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.sina__korak { height: 34px !important; font-size: 11px; }
.ima-js .scena--f .preskok { top: 68px; min-height: 44px; padding: 0 14px; border-color: var(--amber); background: rgba(3, 5, 8, .78); color: var(--svetlo); font-weight: 600; letter-spacing: .06em; }
.ima-js .scena--f .karta--daleko { pointer-events: none; }

/* pregled projekta: strelice */
.rad__nav { position: fixed; z-index: 5; left: 12px; top: 10px; display: flex; align-items: center; gap: 6px; }
.rad__nav button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ivica2); border-radius: 3px; background: rgba(3, 5, 8, .8); cursor: pointer; font: 400 22px/1 var(--tekst); }
.rad__nav p { padding: 0 8px; color: var(--svetlo); }

/* petlja u sekciji provere */
.provera__film { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; overflow: hidden; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.provera__film img, .provera__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.provera__film video { opacity: 0; transition: opacity .6s; }
.provera__film video.ide { opacity: 1; }
.provera:has(.provera__film)::before { display: none; }
.provera > :not(.provera__film) { position: relative; }

/* svetlosna vlakna iza sekcije (Higgsfield slika; kad stigne petlja, ide video preko nje) */
.sek__traka { position: absolute; left: 0; right: 0; top: 21%; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); }
.sek__traka picture { display: contents; }
.sek__traka img, .sek__traka video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sek__traka video { opacity: 0; transition: opacity .8s; }
.sek__traka video.ide { opacity: 1; }
.sek__traka + .sek__unutra { z-index: 1; }
#osnova .osnova li { background: rgba(5, 8, 13, .78); }
@media (min-width: 900px) {
  .sek__traka { top: 24%; bottom: -8%; opacity: .9; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); }
  #osnova .osnova li { background: rgba(5, 8, 13, .5); -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2); }
}

/* hala sa celim stubom iza kontakta (Higgsfield slika; kad stigne petlja, ide video preko nje) */
.sek__sala { position: absolute; left: 0; right: 0; top: 0; height: 64vh; z-index: 0; overflow: hidden; pointer-events: none; opacity: .62;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.sek__sala picture { display: contents; }
.sek__sala img, .sek__sala video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sek__sala + .sek__unutra { z-index: 1; }
#kontakt h2, #kontakt .sek__lid { text-shadow: 0 2px 28px rgba(2, 3, 6, .9), 0 0 2px rgba(2, 3, 6, .6); }
@media (min-width: 900px) { .sek__sala { height: 82vh; opacity: .85; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } }

/* otvaranje prsljena */
.otv { position: absolute; inset: 0; z-index: 4; overflow: hidden; background: #020306; pointer-events: none; }
.otv[hidden] { display: none; }
.otv::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(80% 62% at 50% 49%, transparent 52%, rgba(2, 3, 6, .88)); }
.otv__zum { position: absolute; inset: 0; will-change: transform, filter; }
.otv__kadar { position: absolute; transform-origin: 50% 49%; will-change: transform; }
.otv__sloj { position: absolute; inset: 0; width: 100%; height: 100%; }
.otv__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.otv--film .otv__film { display: block; }
.otv--film .otv__sloj, .otv--film .otv__blizu, .otv--film .otv__sjaj { display: none; }
.otv__sred { clip-path: inset(33.5% 0 35.5% 0); transform-origin: 50% 49%; will-change: transform; }
.otv__gore { z-index: 2; clip-path: inset(0 0 65.5% 0); will-change: transform; }
.otv__dole { z-index: 2; clip-path: inset(63.5% 0 0 0); will-change: transform; }
.otv__sjaj { position: absolute; left: 0; right: 0; top: 30%; height: 38%; z-index: 1; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(50% 50% at 50% 50%, rgba(205, 250, 255, .9), rgba(57, 225, 255, .35) 45%, transparent 75%); }
.otv__ekran { position: absolute; left: 34.5%; top: 42.5%; width: 28%; height: 13%; z-index: 1; overflow: hidden; opacity: 0; border-radius: 2px;
  box-shadow: 0 0 34px rgba(120, 235, 255, .65); transform-origin: 50% 50%; }
.otv__blizu { position: absolute; z-index: 2; object-fit: cover; object-position: 45% 47%; opacity: 0; will-change: opacity, transform; pointer-events: none; }
.otv__ekran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.otv__ekran::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(150, 240, 255, .2), rgba(57, 225, 255, .06)), repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px); }

@media (min-width: 900px) { .otv__blizu, .otv__kadar { -webkit-mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent); mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent); } }

/* ulazak u prsljen */
.scena--f .karte, .scena--f .preskok { transition: opacity .25s; }
.scena--ulaz .karte, .scena--ulaz .tabla, .scena--ulaz .preskok, .scena--ulaz .dnk { opacity: 0 !important; }
.scena--ulaz::before { content: ''; display: block !important; position: absolute; inset: 0; z-index: 45; pointer-events: none; opacity: 0; mask-image: none; -webkit-mask-image: none;
  background: radial-gradient(40% 32% at var(--ux, 50%) var(--uy, 40%), rgba(215, 252, 255, .98), rgba(57, 225, 255, .5) 42%, transparent 76%); animation: ulaz .64s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes ulaz { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: .8; } 100% { opacity: 1; transform: scale(3.4); } }

@media (min-width: 900px) {
  .provera__film { width: 44%; opacity: .9; }
  .scena--f .uvod h1 { font-size: clamp(3.4rem, min(6.4vw, 13vh), 7.4rem); }
  .ima-js .sina { right: 14px; top: 50%; }
  .sina button { width: 40px; height: 22px; }
  .ima-js .scena--f .preskok { top: auto; bottom: 26px; }
  .ima-js .scena--f .tabla { width: min(33vw, 480px); }
  .ima-js .scena--f .scena__foto { width: 235.72vh; height: 100vh; }
  .ima-js .scena__sena { background: linear-gradient(90deg, rgba(2, 3, 6, .9), rgba(2, 3, 6, .62) 30%, transparent 56%), radial-gradient(120% 90% at 60% 45%, transparent 58%, rgba(2, 3, 6, .7)); }
}
@media (prefers-reduced-motion: reduce) { .scena--ulaz::before { animation: none; } }

/* usluge sa predmetima iz istog sveta: predmet pluta iznad kartice, crna pozadina slike se stapa sa karticom */
.usluge--predmeti li { position: relative; overflow: hidden; }
.usluga__predmet { grid-column: 1 / -1; justify-self: center; display: block; width: min(180px, 52vw); height: auto; aspect-ratio: 1; margin: -6px auto 8px; mix-blend-mode: lighten; animation: plovi 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s); }
.usluga__predmet--prazno { position: relative; border: 1px solid rgba(190, 240, 255, .16); border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(57, 225, 255, .14), transparent 62%); }
.usluga__predmet--prazno i { position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--zrak), transparent); box-shadow: 0 0 18px var(--zrak); opacity: .7; }
@keyframes plovi { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
@media (min-width: 900px) { .usluga__predmet { width: 220px; } .usluge--predmeti { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* o meni: stub otpozadi sa desne strane */
.sek__strana { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; width: 72%; overflow: hidden; pointer-events: none; opacity: .32; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
.sek__strana img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sek__strana + .sek__unutra { z-index: 1; }
@media (min-width: 900px) { .sek__strana { width: 42%; opacity: .62; } }

/* proces: kamera se spusta niz stub dok se ide kroz pet koraka */
.proces__film { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; width: 100%; overflow: hidden; pointer-events: none; opacity: .3; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.proces__film picture { display: contents; }
.proces__film img, .proces__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.proces__film video, .sek__sala video { opacity: 0; transition: opacity .8s; }
.proces__film video.ide, .sek__sala video.ide { opacity: 1; }
.proces__film + .sek__unutra { z-index: 1; }
/* telefon: siroki kadar preko cele sirine, pa prsljen na kraju uvek staje u ekran (uski isecak ga je sekao levo i desno) */
@media (max-width: 899px) { .proces__film img, .proces__film video { inset: auto; top: 50%; left: 50%; width: 150%; height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); } }
@media (min-width: 900px) {
  .proces__film { width: 48%; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 75%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 30%, #000 75%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
  #proces .proces { max-width: 56%; }
}
@media (prefers-reduced-motion: reduce) { .usluga__predmet { animation: none; } }

/* uvod pri prvom ulasku: zid izabranih radova koji se odzumira, pa kamera uleti u scenu */
.upit-poziv { display: grid; gap: 18px; align-content: start; padding: clamp(20px, 4vw, 34px); }
.upit-poziv__lid { margin: 0; color: var(--kost); font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.35 var(--naslov); letter-spacing: -.01em; }
.upit-poziv__koraci { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: k; }
.upit-poziv__koraci li { counter-increment: k; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border: 1px solid var(--ivica2); border-radius: 999px; color: var(--sivo); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.upit-poziv__koraci li::before { content: counter(k); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(57, 225, 255, .16); color: var(--zrak2); font-weight: 600; }
.upit-poziv .dugme { justify-self: start; }
.intro { display: none; }
.intro-ide .intro { display: block; position: fixed; inset: 0; z-index: 120; overflow: hidden; background: var(--noc); animation: intro-sigurno 0s linear 6s forwards; }
@keyframes intro-sigurno { to { visibility: hidden; } }
.intro__scena { position: absolute; inset: 0; display: grid; place-items: center; }
.intro__mreza { position: relative; width: min(calc(100vw - 2 * var(--rub)), calc(64vh * var(--asp-m))); aspect-ratio: var(--asp-m); will-change: transform; }
.intro__p { position: absolute; left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: calc(var(--mw) * 1%); aspect-ratio: 16 / 10; translate: -50% -50%; border-radius: 3px;
  background-color: var(--ploca); background-repeat: no-repeat; background-position: var(--bp); outline: 1px solid rgba(190, 240, 255, .16); }
img.intro__p { display: block; height: auto; object-fit: cover; outline-color: rgba(205, 250, 255, .5); }
.intro__tekst { position: absolute; z-index: 2; right: var(--rub); top: 11vh; max-width: 14em; text-align: right; font: 800 clamp(1.3rem, 2.4vw, 2.4rem)/1.02 var(--naslov); letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .85); pointer-events: none; }
.intro__tekst span { display: block; transition: opacity .45s, transform .45s; }
.intro__tekst span + span { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(12px); color: var(--zrak2); }
.intro--pola .intro__tekst span:first-child { opacity: 0; transform: translateY(-12px); }
.intro--pola .intro__tekst span + span { opacity: 1; transform: none; }
.intro__brojac { position: absolute; z-index: 2; left: var(--rub); bottom: 5vh; display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.intro__brojac b { min-width: 1.15em; font: 900 clamp(4.4rem, min(13vw, 16vh), 11rem)/.78 var(--broj); font-stretch: 62%; letter-spacing: -.03em; color: var(--zrak2); text-shadow: 0 0 40px rgba(57, 225, 255, .45); font-variant-numeric: tabular-nums; }
.intro__brojac span { padding-bottom: .5em; color: var(--sivo); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.intro__preskoci { position: absolute; z-index: 3; right: var(--rub); bottom: 5vh; min-height: 40px; padding: 0 14px; border: 1px solid var(--ivica2); border-radius: 3px; background: rgba(3, 5, 8, .6); color: var(--sivo); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.intro--kraj { opacity: 0; transition: opacity .6s ease .15s; pointer-events: none; }
@media (min-width: 900px) { .intro__mreza { width: min(calc(100vw - 2 * var(--rub)), calc(80vh * var(--asp-d))); aspect-ratio: var(--asp-d); }
  .intro__p { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); } }
@media (max-width: 899px) { .intro__preskoci { top: max(14px, env(safe-area-inset-top)); bottom: auto; } .intro__tekst { top: 8vh; font-size: clamp(1.15rem, 5.4vw, 1.5rem); } }

/* pocetna: umesto drugog spiska radova samo veza ka strani Radovi */
.radovi-veza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; border-top: 1px solid var(--ivica); border-bottom: 1px solid var(--ivica); }
.radovi-veza .oznake { margin: 0; }
.radovi-veza .oznake { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.radovi-veza .oznake li { padding: 7px 12px; border: 1px solid var(--ivica2); border-radius: 999px; background: rgba(6, 10, 16, .55); color: var(--sivo); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.radovi-veza .oznake li b { margin-left: 4px; color: var(--zrak2); font-weight: 600; }
@media (max-width: 899px) { .provera__film { opacity: .28; } }
.direktno a[href^="mailto"] { text-transform: none; letter-spacing: .02em; }

/* traka za kolacice (kolacici.js): staklo pri dnu, ne pomera raspored */
.kolacici { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(640px, calc(100% - 32px)); padding: 18px 20px; transform: translate(-50%, 14px); opacity: 0; transition: opacity .26s ease, transform .26s ease; border: 1px solid var(--ivica2); border-radius: 14px; background: rgba(5, 9, 15, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.kolacici[hidden] { display: none; }
.kolacici--tu { opacity: 1; transform: translate(-50%, 0); }
.kolacici__naslov { margin: 0 0 6px; color: var(--zrak2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.kolacici__tekst { margin: 0; color: var(--sivo); font-size: .95rem; line-height: 1.5; }
.kolacici__tekst a { color: var(--zrak2); }
.kolacici__dugmad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.kolacici__dugmad .dugme { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .kolacici { transition: none; } }

/* podnozje: svi profili na mrezama, sa ikonicom (spisak u alat/skica-e/podaci/mreze.json) */
.dno__mreze { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ivica); list-style: none; }
.dno .dno__mreze li a { gap: 9px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ivica2); border-radius: 999px; background: rgba(6, 10, 16, .5); color: var(--sivo); font-size: .9rem; }
.dno .dno__mreze li a:hover, .dno .dno__mreze li a:focus-visible { border-color: var(--zrak); color: var(--kost); }
.dno__mreze svg { width: 17px; height: 17px; flex: none; color: var(--zrak2); }
/* kontakt na pocetnoj: posle telefona i mejla svi profili, isti izgled kao u podnozju */
.direktno__mreze { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.direktno__mreze a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ivica2); border-radius: 999px; background: rgba(6, 10, 16, .5); color: var(--sivo); font-size: .9rem; text-decoration: none; }
.direktno__mreze a:hover, .direktno__mreze a:focus-visible { border-color: var(--zrak); color: var(--kost); }
.direktno__mreze svg { width: 17px; height: 17px; flex: none; color: var(--zrak2); }
.kontakt__desno { align-self: start; min-width: 0; }

/* arapski (dir rtl): slova se spajaju, pa bez razmaka medju slovima; uvod na racunaru ne sme da dodirne plocu sajta */
html[lang="ar"] * { letter-spacing: 0 !important; }
@media (min-width: 900px) { html[dir="rtl"].ima-js .uvod { padding: 0 6vw 0 var(--rub); } }