/* =========================================================================
   D. J. Logistics — izgled komponenti.

   RASPORED sekcija, kolona i podnozja (sirine, razmaci, smer, prelom) NIJE ovde:
   generise ga build.py u css/strane/<slug>.css iz merenja originala po
   opsezima njegovih breakpointa (>=1751 | do 1750 | do 1460 | do 1366 | do 1024 | do 767).
   Tamo je i tipografija po widgetu po opsezima, isecanje slika i razdelnici.
   Ovde je samo izgled komponenti + zaglavlje (pravila iz post-17.css originala).
   ========================================================================= */

/* ---------- 1. Tokeni ---------- */
:root {
  --tamna:      #002a34;   /* hero i tamne sekcije */
  --crvena:     #ec0000;   /* akcenat, aktivni meni, nadnaslov, kvadratici */
  --narandzasta:#f55b1f;   /* hover mobilnog menija, minijatura galerije, dugme 404 */
  --svetla:     #f7f8fa;   /* svetla sekcija */
  --crna:       #090909;   /* naslovi, podloga podnozja */
  --mastilo:    #121315;   /* sitni naslovi */
  --siva:       #666666;   /* telo teksta */
  --bela:       #ffffff;
  --ivica:      #e5e5e5;
  --ivica-2:    #ebebeb;
  --plava-ls:   #143852;   /* ivica prekidaca jezika */

  --naslovni: "Oswald", sans-serif;
  --telo:     "Rubik", sans-serif;
  --oznaka:   "Outfit", sans-serif;
  --broj:     "Plus Jakarta Sans", sans-serif;   /* original ga navodi, a ne ucitava — crta se sans-serif */
}

/* ---------- 2. Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--telo);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--siva);
  background: var(--bela);
}

/* Tema originala: html, body { overflow-x: hidden } — sadrzaj koji na originalu viri desno
   (panel na /skladiste/, rotirani natpis, red portfolija, otkrivanje slike, siroka tabela)
   sece ivica prozora. `clip` umesto `hidden`: body ne postaje skrol-kontejner (lepljive
   stavke i kolona rade), a strana nema bocni skrol ni na telefonu. */
html, body { overflow-x: clip; }

img, svg, iframe, video { max-width: 100%; display: block; }

/* Kao Elementor (.e-con, .e-con .elementor-widget { min-width: 0 }, izmereno na svim stranama):
   kontejneri i widgeti (element sa klasom s-<id>) mogu biti uzi od svog sadrzaja — sirok
   sadrzaj (npr. drustvene mreze u podnozju) viri, a kolona se zbog njega ne siri. */
[class^="s-"], [class*=" s-"] { min-width: 0; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--naslovni);
  font-weight: 700;
  color: var(--crna);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* unutrasnji omot „boxed" sekcije: max-width i vertikalni padding iz CSS-a strane */
.omot { width: 100%; margin-inline: auto; }

/* ---------- 3. Zaglavlje ----------
   Pravila iz post-17.css + tema responsive.css originala:
   >=1751 | 1367–1750 | 1025–1366 | 768–1024 | <=767 */
/* kao na originalu: podloga #002a34 na svim stranama; z-index 9999 — zaglavlje je iznad
   sadrzaja strane (hero naslov ima z-index 111) */
.zaglavlje { position: absolute; inset: 0 0 auto 0; z-index: 9999; background-color: var(--tamna); }

/* gornja traka: padding 15/30/0; na mobilnom se krije. Dugme „Prijava" je uklonjeno
   (Marko, 25.9.2026): traka je visine kontakata, kao da je dugme uklonjeno u Elementoru
   (kontejner nema min-height) */
.zaglavlje__vrh { padding: 15px 30px 0; }
.traka-vrh {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  padding: 10px;
  font-size: 15px; line-height: 28px; color: var(--bela);
}
.traka-vrh a { color: var(--bela); }
.traka-vrh__crta {                     /* uspravna crtica izmedju e-poste i adrese: 1×15 */
  width: 1px; height: 15px; flex: 0 0 1px;
  background: rgba(255, 255, 255, .1);
}

/* linija ispod gornje trake: red sa padding 10, linija sa kvadraticima */
.zaglavlje__crta-red { padding: 10px; }
.zaglavlje__crta > span { background: rgba(235, 235, 235, .16); }

/* glavni red: logo kolona | kolona menija */
.traka-glavna { display: flex; align-items: center; gap: 20px; padding: 0 30px; }
/* desna ivica menija (768–1024px: hamburgera) u liniji sa krajem linije ispod gornje trake, 40px od
   ivice — po nalogu 28.9.2026 (original: 30px iznad 1750px, 20px do 1366px). Na 1367–1750px meni nije
   uz desnu ivicu, a do 767px gornje trake nema — tu ostaje kao original. Lepljivo zaglavlje nema liniju. */
@media (min-width: 1751px), (min-width: 768px) and (max-width: 1366px) {
  .zaglavlje .traka-glavna { padding-right: 40px; }
}
.logo { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; width: 25%; padding: 10px; }
.logo a { display: block; }
.logo img { width: auto; height: 116px; max-width: 100%; }
.traka-glavna__meni {
  display: flex; justify-content: flex-end; align-items: center; column-gap: 35px;
  flex: 0 1 auto; min-width: 0; width: 100%;
}

@media (min-width: 1367px) and (max-width: 1750px) {
  .traka-glavna { padding: 0 20px; }
  .traka-glavna__meni { width: 45%; }
}
@media (max-width: 1366px) {
  .traka-glavna { padding: 0 20px; }
  .logo { width: 20%; padding: 0; }
  .logo img { height: 50px; }
}
@media (max-width: 1024px) {
  .traka-glavna { padding: 15px 20px; justify-content: space-between; }
  .logo, .traka-glavna__meni { width: 45%; }
}
@media (max-width: 767px) {
  .zaglavlje__vrh { display: none; }
  .traka-glavna { flex-wrap: wrap; }
  .logo { width: 75%; }
  .traka-glavna__meni { width: 15%; }
}

/* --- glavni meni ---
   Stavka = display:flex, padding 40/0/48, Rubik 16/16 500 (izmereno).
   Razmak stavki: 42px, 28px na 1367–1460px, 20px do 1366px; poslednja stavka 0
   osim na 1367–1460px (post-17.css + tema responsive.css). */
.meni > ul { display: flex; align-items: center; }
.meni li { position: relative; }
.meni > ul > li { margin-right: 42px; }
.meni > ul > li:last-child { margin-right: 0; }      /* post-17.css: li:last-child { margin: 0 } */
.meni > ul > li > a,
.meni__prekidac {
  display: flex; align-items: center;
  padding: 40px 0 48px;
  font-family: var(--telo);
  font-size: 16px; line-height: 16px; font-weight: 500;
  color: var(--bela);
  background: none; border: 0; cursor: auto;
  transition: color .25s;
}
.meni > ul > li > a:hover,
.meni__prekidac:hover,
.meni .je-tekuca > a,
.meni .je-tekuca > .meni__prekidac { color: var(--crvena); }   /* „Usluge" na podstrani usluge: current-menu-ancestor */

/* strelica „Usluge": glif arrow-down-s-line 16×16, 4px desno od teksta,
   margin -10/-4/-10/4 (izmereno) */
.meni__strelica {
  flex: 0 0 16px; width: 16px; height: 16px;
  margin: -10px -4px -10px 4px;
  fill: currentColor;
}

@media (min-width: 1367px) and (max-width: 1460px) {
  /* tema (responsive.css) ovde daje 28px svim stavkama, i poslednjoj (izmereno) */
  .meni > ul > li,
  .meni > ul > li:last-child { margin-right: 28px; }
}
@media (max-width: 1366px) {
  .meni > ul > li { margin-right: 20px; }
}

/* padajuci meni „Usluge" (izmereno na originalu): 260px, desna ivica poravnata sa
   stavkom, podloga #003643, senka 0 4 10 -2 rgba(0,0,0,.1); otvara se odozgo
   (scaleY 0 -> 1, providnost 0 -> 1, .5s). (Traka ::before teme je na originalu
   ispod podloge stavki, pa se ne vidi — ne prenosi se.) Stavke: Rubik 15/15 500
   bele, padding 15/20, razdelnik 1px
   rgba(255,255,255,.07); hover #ec0000 (.3s). */
.meni__podmeni {
  position: absolute; top: 100%; right: 0; z-index: 9999;
  min-width: 260px;
  background: #003643;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .1);
  text-align: left;
  opacity: 0; visibility: hidden;
  transform: scaleY(0); transform-origin: 0 0;
  transition: .5s;
}
.meni li:hover > .meni__podmeni,
.meni li:focus-within > .meni__podmeni {
  opacity: 1; visibility: visible; transform: scaleY(1);
}
.meni__podmeni li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.meni__podmeni a {
  display: flex; align-items: center;
  padding: 15px 20px;
  font-family: var(--telo);
  font-size: 15px; line-height: 15px; font-weight: 500;
  color: var(--bela);
  transition: .3s;
}
.meni__podmeni a:hover,
.meni__podmeni .je-tekuca > a { color: var(--crvena); }

/* --- hamburger: glif menu-3 24px, okvir 24×55, samo do 1024px (izmereno) --- */
.hamburger {
  display: none;
  width: 24px; height: 55px; padding: 0;
  align-items: center; justify-content: center;
  color: var(--bela); background: none; border: 0; cursor: pointer;
}
.hamburger svg { width: 24px; height: 24px; }

@media (max-width: 1024px) {
  .meni { display: none; }
  .hamburger { display: flex; }
}

/* --- mobilni meni (nav.right_menu_togle na originalu) ---
   Panel 400px (na uzem ekranu ceo ekran), ulazi sdesna: right -400px -> 0, .3s;
   podloga #f7f8fa, padding 40; iza njega zavesa iste boje, opacity .9, ulazi .8s.
   Stavke Rubik 18/28 600 #121315, hover #f55b1f; razdelnik 1px rgba(0,0,0,.06).
   Dugme ✕ 35×35 #ec0000 radius 3, glif 21px beo, top 5 / right 12 (izmereno). */
.mob-zavesa {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--svetla); opacity: .9;
  visibility: hidden; transform: translateX(100%);
  transition: transform .8s ease-out, visibility .8s;
}
.mob-zavesa.je-vidljiv { visibility: visible; transform: none; }
.mob-meni {
  position: fixed; top: 0; right: -400px; z-index: 999999;
  width: 400px; max-width: 100%; height: 100vh;
  padding: 40px;
  background: var(--svetla);
  overflow-y: auto;
  visibility: hidden;
  transition: right .3s ease-in-out, visibility .3s;
}
.mob-meni.je-otvoren { right: 0; visibility: visible; }
.mob-meni__zatvori {
  position: absolute; top: 5px; right: 12px;
  width: 35px; height: 35px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--crvena); color: var(--bela);
  border: 0; border-radius: 3px; cursor: pointer;
}
.mob-meni__zatvori svg { width: 21px; height: 21px; }
.mob-meni ul { padding: 8px 0; }
.mob-meni li { margin: 11px 0 -1px; padding-top: 10px; }
.mob-meni li + li { border-top: 1px solid rgba(0, 0, 0, .06); }
.mob-meni a {
  font-family: var(--telo); font-size: 18px; line-height: 28px; font-weight: 600;
  color: var(--mastilo);
}
.mob-meni a:hover { color: var(--narandzasta); }

/* ---------- 4. Naslov (rs-heading): nadnaslov + naslov + opis ---------- */
/* heading.css originala; margine po widgetu (nadnaslov, naslov, opis) su u CSS-u strane.
   Nadnaslov: inline-block, ukrasi su SVG 31×8 u tekstu (viewBox 25×9, „meet"),
   razmak 5px levo/desno i -3px gore; ceo nadnaslov 6px ulevo. */
.nadnaslov {
  display: inline-block;
  margin: 0 0 0 -6px;
  font-family: var(--oznaka);
  font-size: 16px; line-height: 28px; font-weight: 600;
  color: var(--crvena);
  text-transform: uppercase;
}
.nadnaslov svg { display: inline; width: 31px; height: 8px; margin: -3px 5px 0; }
.naslov-sekcije {
  margin: 0 0 11px;
  font-size: 60px; line-height: 72px;
  color: var(--crna);
}
/* najcesce boje po nivou naslova na originalu (odstupanja pojedinih widgeta su u CSS-u strane):
   rs-heading h1 i h4 beli; obican naslov h2 #f30a0a, h3 #121315 */
h1.naslov-sekcije, h4.naslov-sekcije { color: var(--bela); }
/* strane usluga bez sekcije sa naslovom strane (po nalogu 28.9.2026, build.py BEZ_VRHA): zaglavlje je apsolutno
   preko vrha, pa sadrzaj pocinje ispod njega — visina zaglavlja (izmereno): 220, do 1366 px 188, do 1024 px 169,
   do 767 px 85; prvi veliki naslov je tu H1 iste boje kao pre (h1.naslov-sekcije je inace beo; :where ne dize
   specificnost, pa boja iz CSS-a strane i dalje ima prednost) */
main.bez-vrha { padding-top: 220px; }
@media (max-width: 1366px) { main.bez-vrha { padding-top: 188px; } }
@media (max-width: 1024px) { main.bez-vrha { padding-top: 169px; } }
@media (max-width: 767px) { main.bez-vrha { padding-top: 85px; } }
:where(.bez-vrha) h1.naslov-sekcije { color: var(--crna); }
.naslov--jednostavan h2 { color: #f30a0a; }
.naslov--jednostavan h3 { color: var(--mastilo); }
.naslov-opis { font-size: 18px; line-height: 28px; color: var(--siva); }
.naslov-opis p { margin: 0 0 10px; }
/* tema (responsive.css): do 590px prelomi redova u opisu naslova se ne prikazuju */
@media (max-width: 590px) { .naslov-opis br { display: none; } }
/* naslovi u tekstu (opis naslova, tekst): osnovna pravila teme (default.css) */
.naslov-opis :is(h1, h2, h3, h4, h5, h6),
.tekst :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 26px; color: var(--mastilo); }
.naslov-opis h1, .tekst h1 { font-size: 80px; line-height: 94px; }
.naslov-opis h2, .tekst h2 { font-size: 48px; line-height: 60px; }
.naslov-opis h3, .tekst h3 { font-size: 30px; line-height: 42px; }
.naslov-opis h4, .tekst h4 { font-size: 24px; line-height: 32px; }
.naslov-opis h5, .tekst h5 { font-size: 20px; line-height: 28px; }
.naslov-opis h6, .tekst h6 { font-size: 18px; line-height: 26px; }
/* liste u opisu naslova: pravila teme (style.css) — kruzici, uvuceno 3em, ispod 1.5em */
.naslov-opis ul, .naslov-opis ol { margin: 0 0 1.5em 3em; padding: 0; }
.naslov-opis ul { list-style: disc; }
.naslov-opis ol { list-style: decimal; }
@media (max-width: 1024px) { .naslov-opis h2, .tekst h2 { font-size: 40px; line-height: 52px; } }
@media (max-width: 767px) { .naslov-opis h2, .tekst h2 { font-size: 35px; line-height: 45px; } }

/* ---------- 5. Hero pocetne (izgled; raspored iz CSS-a strane) ---------- */
.hero { background-color: var(--tamna); }
.hero__marka-red { position: relative; z-index: 111; }   /* naslov ide preko fotografije */
.hero .hero__marka-omot .naslov-sekcije {
  background-image: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, .02) 84%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* foto-blok sa brodom: preko fotografije gradijent u boji sekcije (izmereno) */
.hero__tekst { position: relative; }
.hero__tekst::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgb(0, 42, 52) 1.26%, rgba(0, 42, 52, .5) 98.51%);
}
.hero__tekst-omot { position: relative; }

/* ---------- 6. Marquee traka (rs-gsap-marquee-slide + rs-anim-int.js originala) ----------
   gsap-marquee-slide.css: okvir flex, centriran, bez preliva, velika slova; stavke su
   inline-flex u inline-block redu (visina reda = linija tela, kao original).
   Set stavki je u traci ponovljen (kopije sa obe strane; pravi set je u sredini, na istom
   mestu kao jedini set originala), pa traka ide bez praznine: za --marquee-trajanje se
   pomeri za --marquee-krug (razmak dva susedna seta) i krene ispocetka — brzinom originala
   u px/s; obe vrednosti meri sajt.js. Original set ne ponavlja, pa se posle nekoliko
   sekundi otvori praznina i traka skoci nazad (odstupanje po Markovom nalogu 25.9.2026).
   Dok okvir prolazi kroz ekran, traka dobija jos 0 -> 6% sirine seta (GSAP xPercent,
   power1.out; --marquee-skrol); ikonice sa rotate-anim se okrecu 0 -> 72deg (vrh na 90%
   ekrana -> dno na vrhu). Bez pauze na hover.
   Razmak iza teksta i velicina ikonice su po widgetu u CSS-u strane. */
.marquee {
  display: flex; justify-content: center; align-items: center;
  max-width: 100%;                     /* kao Elementor widget (.e-con > .elementor-widget) */
  overflow: hidden;
  text-transform: uppercase; text-align: center;
  view-timeline: --marquee block;
}
.marquee__traka { min-width: max-content; animation: marquee-pomak var(--marquee-trajanje) linear infinite; }
.marquee__stavke { display: inline-block; }
.marquee__stavka { display: inline-flex; align-items: center; }
.marquee__stavka p { margin: 0; font-family: var(--naslovni); font-weight: 700; color: var(--bela); }
.marquee__stavka p.je-obris { color: rgba(255, 255, 255, 0); -webkit-text-stroke: 1px rgba(255, 255, 255, .58); }
.marquee__razmak { display: inline-block; position: relative; margin: 0 50px; }
.marquee__slika { width: auto; height: 80px; }
@keyframes marquee-pomak { to { transform: translateX(var(--marquee-krug)); } }
@keyframes marquee-skrol { to { translate: var(--marquee-skrol) 0; } }
@keyframes marquee-rotacija { to { rotate: 72deg; } }
@supports (animation-timeline: view()) {
  .marquee__traka {
    animation: marquee-pomak var(--marquee-trajanje) linear infinite,
               marquee-skrol 1ms cubic-bezier(.3333, .6667, .6667, 1) both;
    animation-timeline: auto, --marquee;
  }
  .marquee--rotacija .marquee__slika {
    animation: marquee-rotacija 1ms cubic-bezier(.3333, .6667, .6667, 1) both;
    animation-timeline: --marquee;
    animation-range: cover 10vh cover 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__traka, .marquee__slika { animation: none; }
}

/* ---------- 7. Dugme style6 („Vidi vise", „Kontaktiraj nas") ----------
   Izmereno (button.css + Elementor jedinica 45px): visina 45+14, desni padding 45+34,
   kvadrat 45×45 #ec0000 na 6px od desne ivice, sa polukrugom (krug 28px) koji viri
   levo. Na hover: ivica #ec0000, paddinzi zamene strane, kvadrat izlazi desno,
   drugi (--ulaz) ulazi sleva; sve .3s. */
.dugme {
  position: relative;
  display: inline-flex; align-items: center; align-self: flex-start;
  height: 59px;
  padding: 0 79px 0 20px;
  border: 1px solid var(--ivica);
  overflow: hidden;
  font-family: var(--naslovni);
  font-size: 18px; line-height: 28px; font-weight: 600;
  color: var(--crna);
  transition: .3s;
}
.dugme > span { z-index: 1; }
.dugme .dugme__ikona {
  position: absolute; top: 50%; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 45px; height: 45px;
  transform: translateY(-50%);
  background: var(--crvena);
  border: 1px solid var(--crvena);
  color: var(--bela);
  transition: .3s;
}
.dugme__ikona::after {
  content: ""; position: absolute; top: 50%; left: -14px;
  width: 28px; height: 28px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--crvena);
  transition: .3s;
}
.dugme__ikona svg { position: relative; z-index: 1; width: 16px; height: 16px; }
.dugme .dugme__ikona--ulaz { left: -100%; right: auto; }
.dugme__ikona--ulaz::after { left: auto; right: -14px; }
.dugme:hover { border-color: var(--crvena); padding: 0 20px 0 79px; }
.dugme:hover .dugme__ikona { right: -100%; }
.dugme:hover .dugme__ikona--ulaz { left: 6px; }

/* ---------- 8. Slike ----------
   Kao Elementor image widget: prirodna velicina, ogranicena kolonom.
   Isecanje (clip-path) je po widgetu, iz merenja — u CSS-u strane. */
.slika-isecak img { width: auto; max-width: 100%; height: auto; }

/* ---------- 9. Razdelnik (rs-divider) ----------
   Linija 1px unutar widgeta; visina widgeta, polozaj i sirina linije po widgetu
   su u CSS-u strane. Kvadratici 8×8 #ec0000 na krajevima, centrirani na liniji. */
.crta { position: relative; flex: 0 0 auto; width: 100%; }
.crta > span { position: relative; display: block; height: 1px; width: 100%; }
.crta--kvadrati > span::before,
.crta--kvadrati > span::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 8px;
  background: var(--crvena);
  transform: translateY(-50%);
}
.crta--kvadrati > span::before { left: 0; }
.crta--kvadrati > span::after { right: 0; }


/* ---------- 10. Lista usluga (rs-service-list, raspored „thumb-aside") ----------
   rs-service-list.css + default.css originala. Stavka: tekst levo, slika desno, oba
   vertikalno centrirana; <=767 tekst gore, slika ispod, blok teksta centriran.
   Stavke se lepe uz vrh prozora i slazu jedna preko druge (na originalu GSAP pin sa
   pinSpacing: false do dna liste) -> position: sticky; top je po widgetu u CSS-u strane.
   Visina stavke je visina pri ucitavanju (GSAP je na originalu zakljuca): okvir slike
   drzi svoju visinu (pocetno aktivna: visinu aktivne), a slika aktivne/predjene stavke
   raste centrirano preko okvira, bez pomeranja stavki. Padding, podloga, ivice, okvir i
   visine slike, sirina i razmak donjeg dela teksta, margina naslova i boje pri prelasku
   misa su po widgetu u CSS-u strane (build.py css_liste_usluga, izmereno). */
.usluge-lista__stavka {
  position: sticky;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.usluge-lista__tekst { display: flex; flex-direction: column; align-items: flex-start; }
.usluge-lista__naslov { font-family: var(--naslovni); color: var(--crna); transition: .3s; }
.usluge-lista__dno { display: flex; flex-direction: column; align-items: flex-start; }
.usluge-lista__opis { color: var(--siva); }
/* dugme „Detaljnije" (jedini widget sa dugmetom, index 40d8174): razmak 7, strelica 12×12 */
.usluge-lista__dugme { display: flex; align-items: center; gap: 7px; color: var(--crna); transition: .3s; }
.usluge-lista__dugme svg { width: 12px; height: 12px; }
.usluge-lista__slika { flex-shrink: 0; display: flex; align-items: center; }
.usluge-lista__slika img { width: 100%; object-fit: cover; transition: .3s; }
/* clip-path-enable na originalu (rs-service-list.css) */
.usluge-lista--isecak .usluge-lista__slika img { clip-path: polygon(88% 0%, 100% 50%, 88% 100%, 0% 100%, 12% 50%, 0% 0%); }
/* /door-to-air/, stavka „Aviootpremu do krajnje destinacije": slika poravnata uz donju ivicu, da se kamioni vide
   celi (okvir prikazuje ~83% visine slike, na originalu centrirano — tockovi odseceni); po nalogu 28.9.2026 */
.usluge-lista__slika img[src*="31eb6c4b02bd20797230a94703444a30"] { object-position: 50% 100%; }

/* ---------- 11. Kartica prednosti (rs-service-grid, stilovi 1/3/7) ----------
   Padding, podloga, slika podloge, ikona (velicina, okvir), polozaj broja, razmaci
   naslova i opisa razlikuju se od widgeta do widgeta -> CSS strane (izmereno), kao i
   boje pri prelasku misa. Ovde: struktura, prelazi i animacija ikone (foldAnimation). */
.prednost { position: relative; transition: .5s; }
.prednost__ikona { position: relative; color: var(--crvena); }
.prednost__ikona svg { fill: currentColor; }
.prednost:hover .prednost__ikona svg { animation: savijanje .5s ease 1; }
.prednost--style1:hover .prednost__ikona svg { animation-duration: .3s; animation-timing-function: linear; }
@keyframes savijanje {
  0%, 100% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
}
.prednost__broj { margin: 0; transition: .5s; }
.prednost__naslov, .prednost__naslov a, .prednost__opis { transition: .3s; }
.prednost__naslov { color: var(--crna); }
.prednost__opis { color: var(--siva); }
/* style7: broj je obris (1px #090909, na hover #ec0000) */
.prednost--style7 .prednost__broj { font-family: var(--telo); color: rgba(255, 255, 255, 0); -webkit-text-stroke: 1px var(--crna); }
.prednost--style7:hover .prednost__broj { -webkit-text-stroke-color: var(--crvena); }

/* ---------- 12. Kontakt kartica (rs-contact-box) ----------
   Kutija, ikona (velicina, podloga, senka, razmak), razmaci oznake i teksta i boje
   pri prelasku misa su podesavanja widgeta -> CSS strane (izmereno po opsezima).
   Ovde: struktura. Ikona je SVG vertikalno „middle" u liniji visine kvadrata. */
.kontakt-kartica__oznaka, .kontakt-kartica__tekst { display: block; }
.kontakt-kartica__oznaka { font-weight: 700; color: var(--crna); }
.kontakt-kartica__tekst { color: var(--siva); }
.kontakt-kartica a { color: inherit; transition: color .3s; }
.kontakt-kartica a:hover { color: var(--crvena); }

.kontakt-kartica__ikona {
  display: inline-block;
  font-size: 18px; text-align: center;
  color: var(--crvena);
  transition: .3s;
}
.kontakt-kartica__ikona svg { display: inline-block; vertical-align: middle; fill: currentColor; }


/* ---------- 13. Brojac (odometar kao na originalu) ----------
   Broj i znak „+" u redu, vertikalno centrirani. Svaka cifra je inline-block
   (vertical-align: middle) sirine cifre „8"; u njoj traka vrednosti koja se pri
   ulasku u ekran pomeri do kraja (translateY(-100%), 2s). Poslednja vrednost je
   van toka trake (absolute), pa na kraju pomeranja stoji na mestu cifre.
   Bez JS-a (ili uz smanjeno kretanje) odmah se vidi krajnji broj. */
.brojac__broj { display: flex; align-items: center; margin: 0; color: var(--crna); }
.brojac__cifre {
  display: block;
  font-family: var(--telo);
  font-size: 64px; line-height: 60px; font-weight: 700; letter-spacing: 5px;
}
.brojac__cifra { position: relative; display: inline-block; vertical-align: middle; }
.brojac__mera { display: inline-block; vertical-align: middle; visibility: hidden; }
.brojac__traka { position: absolute; inset: 0; overflow: hidden; }
.brojac__vrednosti { display: block; transform: translateY(-100%); transition: transform 2s; }
.brojac__vrednosti > span { display: block; }
.brojac__vrednosti > span:last-child { position: absolute; }
.brojac.je-na-nuli .brojac__vrednosti { transform: none; transition: none; }
.brojac__sufiks { font-size: 64px; line-height: 28px; font-weight: 700; color: #000; }
.brojac__oznaka {
  margin: 0;
  font-size: 18px; line-height: 18px; font-weight: 500; color: var(--mastilo);
}

/* ---------- 14. Kartice tipova transporta (rsportfolio-filter, style9) ----------
   Mreza po Bootstrap klasama originala (col-lg-3 col-md-6): 4 / 2 / 1 kolona na
   >=992 / 768–991 / <768; red je sirok 100%+24px, pomeren 12px ulevo (izmereno).
   Kartica: slika, preko nje dole zamucena traka 143px (rgba(0,0,0,.09), blur 21px);
   naslov levo 30px, 5px ispod ivice. Hover: traka preko cele kartice (.5s), naslov
   se podigne na 30px (.3s), pojavi se broj (obris .3px, .5s). */
/* Bez belog pojasa izmedju kartica i podnozja (po nalogu 28.9.2026): original ispod poslednjeg reda
   ima marginu kartice 30px + .portfolio-filter 20px (do 991px 60px) + sekcija 55px (do 1024px 20px).
   Razmak izmedju redova kartica ostaje 30px (row-gap); sekcija: section.tipovi-blok je jaci od
   pravila iz CSS-a strane. */
section.tipovi-blok { padding-bottom: 0; }
.tipovi__red { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; margin: 0 -12px; }
.tip { position: relative; overflow: hidden; }
.tip::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 143px;
  background: rgba(0, 0, 0, .09);
  -webkit-backdrop-filter: blur(21px);
  backdrop-filter: blur(21px);
  transition: .5s;
  pointer-events: none;
}
.tip:hover::before { height: 100%; }
.tip img { width: 100%; height: auto; }
.tip__broj {
  position: absolute; top: 39px; left: 37px; z-index: 10;
  margin: 0;
  font-family: var(--broj);
  font-size: 70px; line-height: 54px; font-weight: 700;
  color: transparent;
  -webkit-text-stroke: .3px rgba(255, 255, 255, .733);
  opacity: 0; visibility: hidden;
  transition: .5s;
}
.tip:hover .tip__broj { opacity: 1; visibility: visible; }
.tip__sadrzaj {
  position: absolute; left: 30px; bottom: -5px;
  border-radius: 6px;
  transition: .3s;
}
.tip:hover .tip__sadrzaj { bottom: 30px; }
.tip__naslov {
  margin: 10px 0 12px;
  font-size: 24px; line-height: 36px; font-weight: 600;
  color: var(--mastilo);
}
.tip__naslov a { font-size: 30px; color: var(--bela); text-transform: capitalize; transition: color .3s; }
/* pravopis (po nalogu 28.9.2026): u srpskom i ruskom veliko je samo prvo slovo naslova („Drumski transport",
   ne „Drumski Transport" kako ga pravi capitalize teme); engleski ostaje kao original */
:lang(sr) .tip__naslov a, :lang(ru) .tip__naslov a { text-transform: none; }
.tip__naslov a:hover { color: var(--crvena); }
@media (max-width: 991px) { .tipovi__red { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tipovi__red { grid-template-columns: minmax(0, 1fr); } }

/* /organizacija-transporta/: bez belih linija (razmak 20px) iznad prvog reda kartica usluga i izmedju
   dva reda (po nalogu 28.9.2026); section.s-… je jaci od pravila iz CSS-a strane */
section.s-9d379b4 { row-gap: 0; }

/* /skladiste/, siva sekcija sa uslugama (po nalogu 28.9.2026): isti razmak gore i dole, bez preklapanja.
   Original: naslov 3px iznad vrha sekcije (768–1024px: 80px ispod vrha, pa preklapa listu), lista 120px od dna.
   Od 768px (lista i slika jedna pored druge): naslov 50px od vrha, lista 50px od dna. Do 767px (sve jedno ispod
   drugog): naslov u toku strane, lista odmah ispod njega. section.s-… je jaci od pravila iz CSS-a strane. */
section.s-6dec15b .s-760211d { top: 50px; }
section.s-6dec15b .usluge-panel__lista { padding-bottom: 50px; }
@media (max-width: 767px) {
  section.s-6dec15b .s-44a13f5 { padding-top: 0; }
  section.s-6dec15b .s-760211d { position: static; padding: 50px 20px 0; width: auto; }   /* tekst poravnat sa listom (20px) */
}

/* /door-to-air/ i /cargo/ (ista sekcija s-4e4829e): donji razmak sekcije 45px umesto 110px (do 1024px 70px) —
   na /door-to-air/ je ispod linije isto prostora kao iznad nje, na /cargo/ je to razmak ispod slike (po nalogu 28.9.2026) */
section.s-4e4829e > .omot { padding-bottom: 45px; }

/* ---------- 15. Podnozje (izgled; raspored iz CSS-a strane) ---------- */
.podnozje { background: var(--crna); color: var(--bela); }
.podnozje .naslov-sekcije { margin: 0; font-size: 24px; line-height: 32px; color: var(--bela); }
/* logo u podnozju: visina 204, sirina ogranicena kolonom (na originalu se slika tako
   suzi po sirini — isto i ovde); levo, <=1024 centrirano, <=767 opet levo */
.podnozje__logo img { width: auto; height: 204px; max-width: 100%; }
@media (max-width: 1024px) { .podnozje__logo img { margin-inline: auto; } }
@media (max-width: 767px) { .podnozje__logo img { margin-inline: 0; } }
/* nize podnozje (po nalogu 28.9.2026): razmak iznad i ispod glavnog dela 80 -> 40px, do 1366px
   50 -> 25px (original: .s-7f5a970 > .omot; footer.podnozje je jaci od pravila iz CSS-a strane) */
footer.podnozje .omot { padding-block: 40px; }
@media (max-width: 1366px) { footer.podnozje .omot { padding-block: 25px; } }


/* korisni linkovi: stavka 14px razmaka, tekst uvucen 25px, marker = glif
   arrow-right-double 20px na levoj ivici (izmereno) */
.linkovi li { margin: 0 0 14px; }
.linkovi li:last-child { margin-bottom: 0; }
.linkovi a {
  position: relative; display: flex;
  padding-left: 25px;
  font-size: 18px; line-height: 20px; color: var(--bela);
}
.linkovi a svg { position: absolute; left: 0; top: 0; width: 20px; height: 20px; }
.linkovi a:hover { color: var(--crvena); }

/* drustvene mreze: pilula 14/34, ivica 1px rgba(255,255,255,.13), radius 100;
   razmak desno 15, ispod 10 (izmereno). Na hover: ivica #ec0000, krug 40px sa
   ikonom se pojavljuje levo (left 20), tekst se pomera 35px udesno; .3s. */
.drustvene { display: flex; }      /* original: ul { display: flex } bez prelamanja — uska kolona: druga pilula viri */
.drustvene a {
  position: relative;
  display: inline-flex; align-items: center;
  margin: 0 15px 10px 0;
  padding: 14px 34px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 100px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  font-size: 18px; line-height: 28px; color: var(--bela);
  transition: .3s;
}
.drustvene a > span:last-child { position: relative; transition: .3s; }
.drustvene__ikona {
  position: absolute; top: 50%; left: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--crvena);
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden;
  transition: .3s;
}
.drustvene__ikona svg { width: 18px; height: 18px; fill: var(--bela); }
.drustvene a:hover { border-color: var(--crvena); }
.drustvene a:hover .drustvene__ikona { opacity: 1; visibility: visible; }
.drustvene a:hover > span:last-child { padding-left: 35px; }

.mapa-blok iframe { width: 100%; height: 300px; border: 0; background: #f7f7f7; }

/* donja traka: gornja ivica i srednja kolona uokvirena levo/desno (izmereno) */
.podnozje .s-446796b { border-top: 1px solid rgba(255, 255, 255, .13); }
.podnozje .s-fb9e570 {
  border-left: 1px solid rgba(255, 255, 255, .13);
  border-right: 1px solid rgba(255, 255, 255, .13);
  align-items: center;
}
.autor { margin: 0; font-size: 18px; line-height: 28px; color: var(--bela); }
.autor a { color: rgba(255, 255, 255, .62); }
.autor a:hover { color: var(--bela); }

/* ---------- 16. Plutajuci prekidac jezika: right = 10% (izmereno 144/1440, 39/390) ---------- */
/* prekidac jezika (TranslatePress v2 na originalu, izmereno): dno ekrana, 10vw od desne
   ivice, 152.42px; lista se otvara NAGORE na prelaz misa ili fokus (max-height 0 -> 350px,
   .2s ease-in-out), na dodir klikom (je-otvoren). Stavka 7/16 (min. visina 19, content-box),
   zastavica 18×13.5 radius 2, ime sistemskim pismom 14/1.2 #143852; hover: podloga #000,
   ime belo. */
.jezici {
  position: fixed; right: 10vw; bottom: 0; z-index: 99999;
  display: flex; flex-direction: column-reverse;
  width: 152.42px;
  padding: 10px 0;
  background: var(--bela);
  border: 1px solid var(--plava-ls);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .05);
  overflow: hidden;
}
/* na mobilnom (do 767 px) levo, 10vw od leve ivice — kao na desktopu, samo sa druge strane (po nalogu 28.9.2026) */
@media (max-width: 767px) { .jezici { right: auto; left: 10vw; } }
.jezici__lista {
  display: flex; flex-direction: column-reverse;
  max-height: 0; overflow: hidden;
  transition: max-height .2s ease-in-out;
}
.jezici:hover .jezici__lista,
.jezici:focus-within .jezici__lista,
.jezici.je-otvoren .jezici__lista { max-height: 350px; }
.jezici__tekuci,
.jezici a {
  box-sizing: content-box;
  display: flex; align-items: center; gap: 8px;
  min-height: 19px; padding: 7px 16px;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.jezici span {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px; line-height: 1.2;
  color: var(--plava-ls);
}
.jezici a:hover { background: #000; }
.jezici a:hover span { color: var(--bela); }
.jezici img { width: 18px; height: 13.5px; border-radius: 2px; flex: 0 0 18px; }

/* ---------- 17. Dugme na vrh (#scrollUp originala: default.css + main.js) ----------
   Pojavljuje se posle 150px skrola: fade 400ms „swing" (= easeInOutSine). Prsten oko
   strelice pokazuje koliko je strana preskrolovana (CSS animacija vezana za skrol).
   Hover: providnost .8 odmah (filter, da ne deli tranziciju sa fade-om). */
.na-vrh {
  position: fixed; right: 40px; bottom: 20px; z-index: 10;
  width: 42px; height: 42px; padding: 1px;
  border: 0; border-radius: 50%;
  background: var(--crvena);
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: background .3s, opacity .4s cubic-bezier(.37, 0, .63, 1), visibility .4s;
}
.na-vrh.je-vidljiv { opacity: 1; visibility: visible; }
.na-vrh:hover { filter: opacity(.8); }
.na-vrh__strelica {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; fill: var(--bela);
}
.na-vrh__prsten { display: block; stroke: var(--bela); }
/* browser bez animation-timeline: prsten ostaje prazan (pocetno stanje originala) */
@keyframes na-vrh-napredak { to { stroke-dashoffset: 0; } }
@supports (animation-timeline: scroll()) {
  .na-vrh__prsten circle {
    animation: na-vrh-napredak linear both;
    animation-timeline: scroll(root block);
  }
}
@media (max-width: 480px) {
  .na-vrh { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .na-vrh { transition: none; }
}

/* ---------- 17a. Naslovi koji ulaze slovo po slovo (GSAP SplitText + ScrollTrigger) ----------
   Slovo: providnost 0 i pomak 20px (sleva ili odozdo) -> na mesto za .8s, razmak .02s po
   slovu, kriva power1.out; kad vrh naslova predje 90% visine ekrana. Povratak (skrol
   nagore ispod te linije): obrnuto — poslednje slovo prvo, kriva power1.in. */
.podeli__rec,
.podeli__slovo { display: inline-block; position: relative; }
.podeli__slovo {
  opacity: 0;
  transform: translate(-20px, 0);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(.3333, 0, .6667, .3333);      /* power1.in */
  transition-delay: calc((var(--n) - 1 - var(--i)) * 20ms);
}
.podeli--gore .podeli__slovo { transform: translate(0, 20px); }
.podeli.je-vidljiv .podeli__slovo {
  opacity: 1;
  transform: none;
  transition-timing-function: cubic-bezier(.3333, .6667, .6667, 1);      /* power1.out */
  transition-delay: calc(var(--i) * 20ms);
}

/* ---------- 17b. Otkrivanje slike (rs-image .scroll_reveal.reveal_right) ----------
   Kad vrh slike udje u ekran odozdo: omot klizi 50% -> 0 (sdesna), slika u njemu -50% -> 0
   i 1.3 -> 1 — slika stoji, prozor se siri nalevo. 1s power1.out; povratak obrnuto (power1.in). */
.otkrivanje {
  max-width: max-content;
  overflow: hidden;
  visibility: hidden;
  transform: translateX(50%);
  transition: transform 1s cubic-bezier(.3333, 0, .6667, .3333), visibility 0s 1s;
}
.otkrivanje img {
  transform: translateX(-50%) scale(1.3);
  transition: transform 1s cubic-bezier(.3333, 0, .6667, .3333);
}
.otkrivanje.je-vidljiv {
  visibility: visible;
  transform: none;
  transition: transform 1s cubic-bezier(.3333, .6667, .6667, 1), visibility 0s;
}
.otkrivanje.je-vidljiv img {
  transform: none;
  transition: transform 1s cubic-bezier(.3333, .6667, .6667, 1);
}

/* ---------- 17c. Lepljivo zaglavlje (1dbdcf5 + frontend.css logitic-header-footer) ----------
   Kopija glavnog reda, fiksna iznad ekrana (-120%); uleti za .6s kad je skrol >= 200px i
   korisnik skroluje nagore, a svaki skrol nadole je sakrije (je-vidljiv — sajt.js,
   ista logika kao main.js originala). */
.zaglavlje-lepljivo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: var(--tamna);
  transform: translateY(-120%);
  opacity: 0; visibility: hidden;
  transition: .6s cubic-bezier(.24, .74, .58, 1);
}
.zaglavlje-lepljivo.je-vidljiv { transform: translateY(0); opacity: 1; visibility: visible; }
/* razlike od glavnog reda (izmereno): bocni padding 150 iznad 1750px, stavke menija 48/48 */
@media (min-width: 1751px) {
  .traka-glavna--lepljiva { padding: 0 150px; }
}
@media (min-width: 1025px) {
  .traka-glavna--lepljiva .meni > ul > li > a,
  .traka-glavna--lepljiva .meni__prekidac { padding: 48px 0; }
}

/* ---------- 17d. Prilagodjeni kursor (#rs-mouse #cursor-ball: default.css + rs-anim-int.js) ----------
   Prsten 40px prati mis sa ~.08s zaostatka, u sredini crvena tacka 3px. Uvek isti izgled (po nalogu
   28.9.2026): bez promena nad linkom i dugmetom „Na vrh" koje original ima; ivica je siva kakvu
   original ima posle prvog prelaska preko linka. Samo iznad 1024px; tu se sistemski kursor ne vidi —
   mis je samo krug (po nalogu 28.9.2026, na originalu sistemski ostaje), osim nad podnozjem.
   Do 1024px kruga nema, pa sistemski kursor ostaje. */
.kursor { display: none; }
@media (min-width: 1025px) {
  .kursor {
    display: block;
    position: fixed; left: 0; top: 0; z-index: 999999;
    width: 40px; height: 40px;
    border: 1px solid rgba(156, 156, 156, .5); border-radius: 50%;
    pointer-events: none;
    translate: calc(var(--kursor-x, 0px) - 50%) calc(var(--kursor-y, 0px) - 50%);
    transition: translate .08s cubic-bezier(.3333, .6667, .6667, 1);
  }
  .kursor::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--crvena);
    transform: translate(-50%);            /* kao original: samo po X */
  }
  /* :not(#_) dize specificnost iznad pravila sa klasama (dugmad, slajderi, lightbox) — bez !important.
     Nad podnozjem sistemski kursor ostaje, a krug se krije (po nalogu 28.9.2026). */
  :root:not(#_), :root:not(#_) :not(.podnozje, .podnozje *) { cursor: none; }
  .podnozje { cursor: auto; }
  body:has(.podnozje:hover) .kursor { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .podeli__slovo { opacity: 1; transform: none; transition: none; }
  .otkrivanje, .otkrivanje img { visibility: visible; transform: none; transition: none; }
  .zaglavlje-lepljivo, .kursor { transition: none; }
  .karusel__traka, .galerija__traka, .galerija__minijature-traka, .svetlo__traka,
  .svetlo__uvecanje, .svetlo__slika { transition: none; }
  .svetlo[open], .svetlo[open] .svetlo__sadrzaj, .svetlo.je-zatvaranje { animation: none; }
}

/* ---------- 18. Unutrasnja strana: naslov + putanja (izgled) ---------- */
.strana-vrh {
  position: relative;
  background-color: var(--tamna);   /* NE `background:` — ne sme da ugasi sliku iz CSS-a strane */
  color: var(--bela);
  overflow: hidden;
}
.strana-vrh h1 { color: var(--bela); }   /* velicina: CSS strane, po opsezima */
/* putanja (breadcrumb style3, isto na svim stranama i sirinama — izmereno):
   kutija rgba(0,42,52,.51), padding 4/5/0, visina 38; stavke Rubik 16/28 500 bele
   sa razmakom 4+4px; razdelnik je glif arrow-right-s (19px, kao u fontu: vrh 4px
   iznad glifa, osnova 3px ispod linije), pomeren 7px udesno. */
.putanja {
  padding: 4px 5px 0;
  background: rgba(0, 42, 52, .51);
  font-size: 0; line-height: 28px;
  color: var(--bela);
}
.putanja a, .putanja [aria-current] { font-size: 16px; font-weight: 500; }
.putanja a { margin: 0 4px 0 8px; color: var(--bela); transition: color .3s; }
.putanja a:hover { color: var(--crvena); }
.putanja [aria-current] { margin: 0 8px 0 12px; }
.putanja svg {
  display: inline-block;
  position: relative; left: 7px;
  width: 19px; height: 19px;
  margin-top: 4px;
  vertical-align: -3px;
}

/* ---------- 19. Tekstualni sadrzaj (text-editor) ----------
   Tema originala: pasus 26px ispod (i poslednji), liste sa listicima,
   strong bold. Stilovi upisani u sam sadrzaj idu u CSS strane (build.py). */
.tekst p { margin: 0 0 26px; }
.tekst ul { list-style: disc; }
.tekst strong { font-weight: 700; }

/* ---------- 20. Lista sa kvacicama (rsfeatureslist) ----------
   rsaddons feature-list.css + podesavanja widgeta. Ikona je uvek 20px (flex-shrink: 0);
   na originalu se suzi kad je tekst stavke dug (6–18px na telefonu) — ispravljeno po
   Markovom nalogu 25.9.2026 (README, odstupanja). */
.kvacice { display: flex; flex-direction: column; gap: 7px; }
.kvacice li { display: flex; align-items: center; gap: 12px; margin: 0 0 7px; }
.kvacice li:last-child { margin-bottom: 0; }
.kvacice svg { flex-shrink: 0; width: 20px; height: 20px; fill: var(--crvena); }
.kvacice__tekst { text-align: left; }
.kvacice__tekst span { font-family: var(--oznaka); color: var(--crna); }

/* ---------- 21. Tabela (cenovnik) ----------
   TablePress originala (default.css plugina) + WPCode snipet „prikaz cenovnika
   na mobilnim uredjajima": iste vrednosti za sve tri tabele. Tipografija je
   nasledjena iz body (Rubik 18/28). */
.tabela-omot { max-width: 100%; }      /* kao Elementor widget: ne siri se preko kolone */
.tabela {
  width: 100%; margin: 0 auto 1rem;
  border: none; border-collapse: collapse; border-spacing: 0;
  table-layout: auto;
}
.tabela th,
.tabela td {
  padding: .5rem;
  text-align: left; vertical-align: top; white-space: nowrap;
  color: #111;
}
.tabela thead th {
  vertical-align: middle; word-break: normal;
  font-weight: 700; background-color: #d9edf7;
}
.tabela tbody td { background-color: var(--bela); border-top: 1px solid #ddd; }
.tabela tbody tr:nth-child(even) td { background-color: #f9f9f9; }
.tabela tbody tr:hover td { background-color: #f3f3f3; }
/* tabela staje u sirinu strane (po nalogu 28.9.2026): opisi i naslovi kolona se prelamaju, cene i jedinice
   ostaju u jednom redu. Na originalu nista ne prelama (nowrap), pa je tabela 1128 px: na 768–1138 px treca
   kolona se odsece, a do 768 px (snipet originala) tabela skroluje vodoravno i vidi se samo prva kolona.
   Na desktopu, gde ima mesta, izgleda isto kao original; omot skroluje samo ako ni sa prelamanjem ne stane. */
.tabela th,
.tabela td:first-child { white-space: normal; }
.tabela-omot { overflow-x: auto; }
/* telefon: tri kolone u ~370 px — manji font i uze celije, prelamaju se i jedinice mere (build.py dodaje
   mesto preloma posle „/"); cene (td.cena) ostaju u jednom redu */
@media (max-width: 767px) {
  .tabela { font-size: 15px; line-height: 1.45; }
  .tabela th, .tabela td { padding: .45rem .4rem; white-space: normal; }
  .tabela td.cena { white-space: nowrap; }
}
@media (max-width: 400px) {
  .tabela { font-size: 14px; }
  .tabela th, .tabela td { padding-inline: .25rem; }
}

/* ---------- 22. Forme ----------
   Izgled WPForms „modern" originala (wpforms-full.min.css + podrazumevane
   --wpforms-* promenljive). Isto u obe forme i na svim sirinama; izuzetak je
   <=600px (media upit WPForms-a) i red Ime/Prezime (kontejnerski upit 260px). */
:root {
  --forma-akcenat: #066aab;            /* dugme, fokus, izabran radio */
  --forma-greska:  #d63637;            /* zvezdica, greske */
  --forma-oznaka:  rgba(0, 0, 0, .85);
  --forma-tekst:   rgba(0, 0, 0, .7);
  --forma-ivica:   rgba(0, 0, 0, .25);
  /* ikonica upozorenja ispred poruke o gresci (SVG sa originala) */
  --ikona-upozorenje: url("data:image/svg+xml,%3Csvg width='17' height='15' viewBox='0 0 17 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0264 12.3086L9.46387 0.90625C8.97168 0.0585938 7.68652 0.03125 7.19434 0.90625L0.631836 12.3086C0.139648 13.1562 0.768555 14.25 1.78027 14.25H14.8779C15.8896 14.25 16.5186 13.1836 16.0264 12.3086ZM8.34277 9.92969C9.02637 9.92969 9.60059 10.5039 9.60059 11.1875C9.60059 11.8984 9.02637 12.4453 8.34277 12.4453C7.63184 12.4453 7.08496 11.8984 7.08496 11.1875C7.08496 10.5039 7.63184 9.92969 8.34277 9.92969ZM7.13965 5.41797C7.1123 5.22656 7.27637 5.0625 7.46777 5.0625H9.19043C9.38184 5.0625 9.5459 5.22656 9.51855 5.41797L9.32715 9.13672C9.2998 9.32812 9.16309 9.4375 8.99902 9.4375H7.65918C7.49512 9.4375 7.3584 9.32812 7.33105 9.13672L7.13965 5.41797Z' fill='currentColor'/%3E%3C/svg%3E");
}
.forma { margin: 24px 0; }
.polje--sakriveno { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* polje = omot sa razmakom (kao .wpforms-field); fieldset u njemu bez okvira —
   padding NE ide na sam fieldset, jer legend tada staje u gornji padding */
.polje { position: relative; padding: 15px 0; }
.polje__grupa { min-width: 0; margin: 0; padding: 0; border: 0; }
.polje__oznaka {
  display: block; margin: 0 0 15px; padding: 0;
  font-size: 16px; line-height: 19px; font-weight: 700; color: var(--forma-oznaka);
  word-break: break-word; overflow-wrap: break-word; hyphens: auto;
}
.obavezno { font-weight: 400; color: var(--forma-greska); }
.polje__unos {
  display: block; width: 100%; max-width: 60%; height: 43px;
  margin: 0; padding: 0 14px;
  font-family: inherit; font-size: 16px; line-height: 100%; font-weight: 400;
  color: var(--forma-tekst);
  background: var(--bela) padding-box;
  border: 1px solid var(--forma-ivica); border-radius: 3px;
  box-shadow: none; outline: none;
  transition: border .15s, box-shadow .15s;
}
.polje__unos::placeholder { color: var(--forma-tekst); opacity: .5; }
.polje__unos:focus {
  border-color: var(--forma-akcenat);
  box-shadow: 0 0 0 1px var(--forma-akcenat), 0 1px 2px rgba(0, 0, 0, .15);
}
textarea.polje__unos {
  max-width: 100%; height: calc(43px * 2.8); min-height: 43px;
  padding: 14px; line-height: 1.3; resize: vertical;
}
/* Ime i prezime: red od 60% sa dva unosa; pod-oznake samo za citac ekrana */
.polje__red {
  position: relative; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: start;
  max-width: 60%; container-type: inline-size;
}
.polje__deo { width: 50%; padding: 0 10px; }
.polje__deo:first-child { padding-left: 0; }
.polje__deo:last-child { padding-right: 0; }
.polje__red .polje__unos { max-width: 100%; }
.polje__podoznaka {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
@container (max-width: 260px) {
  .polje__deo { width: 100%; padding: 0; }
  .polje__deo:not(:last-child) { margin-bottom: 15px; }
}
/* radio: uspravna lista, krug crta ::before, tacku ::after */
.polje__izbor { display: grid; grid-template-columns: repeat(1, auto); gap: 15px; }
.polje__izbor li { display: flex; align-items: flex-start; line-height: 16px; }
.polje__izbor input {
  position: relative; width: 16px; min-width: 16px; height: 16px;
  margin: 3.2px 0 0 2px;
  appearance: none; background: none; border: 0; border-radius: 50%; outline: none;
}
.polje__izbor input::before,
.polje__izbor input::after {
  content: ""; position: absolute; left: -2px; top: -2px;
  width: 16px; height: 16px; box-sizing: content-box; cursor: pointer;
}
.polje__izbor input::before {
  background: var(--bela) padding-box; border: 1px solid var(--forma-ivica); border-radius: 50%;
}
.polje__izbor input:checked::before,
.polje__izbor input:focus::before {
  border-color: var(--forma-akcenat);
  box-shadow: 0 0 0 1px var(--forma-akcenat), 0 1px 2px rgba(0, 0, 0, .15);
}
.polje__izbor input:checked::after {
  background: var(--forma-akcenat); border: 1px solid transparent; border-radius: 50%;
  transform: scale(.5);
}
.polje__izbor label {
  position: relative; padding-left: 12px;
  font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--forma-oznaka);
  cursor: pointer;
}
/* dugme */
.forma__dno { margin-top: 10px; }
.forma__posalji {
  position: relative; display: inline-block; height: 41px; margin: 0; padding: 0 15px;
  font-family: inherit; font-size: 17px; line-height: 100%; font-weight: 500;
  color: var(--bela); background: var(--forma-akcenat);
  border: 0; border-radius: 3px; box-shadow: none; outline: none;
  cursor: pointer; transition: all .15s ease-in-out;
}
.forma__posalji:hover,
.forma__posalji:active {
  background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--forma-akcenat);
}
.forma__posalji:focus::after {
  content: ""; position: absolute; inset: -5px;
  border: 2px solid var(--forma-akcenat); border-radius: 5px;
}
/* spinner tokom slanja (wpforms-submit-spinner) */
.forma__spiner { display: inline-block; max-width: 26px; margin-inline-start: 15px; vertical-align: middle; }
.forma__spiner[hidden] { display: none; }     /* opste img { display: block } bi ga inace prikazalo */
/* greske (dodaje ih sajt.js posle pokusaja slanja) */
.polje__unos.je-greska { border-color: var(--forma-greska); }
.polje__unos.je-greska:focus { box-shadow: 0 0 0 1px var(--forma-greska); }
.polje__greska {
  position: relative; display: block; min-width: 120px;
  margin-top: 15px; padding-left: 5px;
  font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;
  color: var(--forma-greska); cursor: default;
}
.polje__greska::before {
  content: ""; position: relative; right: 5px; top: 1.5px;
  display: inline-block; width: 16px; height: 14px;
  background-color: var(--forma-greska);
  -webkit-mask-image: var(--ikona-upozorenje);
  mask-image: var(--ikona-upozorenje);
}
.forma__greska {                       /* greska slanja, iznad dugmeta */
  padding: 10px 0 8px;
  font-size: 16px; line-height: 19px; font-weight: 700; color: var(--forma-greska);
}
/* potvrda: zamenjuje sadrzaj forme; margina forme (24px) ostaje oko nje */
.forma__potvrda {
  padding: 15px; color: #333; background: #e0ffc7; border: 1px solid #b4d39b;
  overflow-wrap: break-word;
}
.forma.je-poslata > :not(.forma__potvrda) { display: none; }
@media (max-width: 600px) {
  .polje { padding-inline: 1px; }
  .polje:not(.polje--izbor) { overflow-x: hidden; }   /* original: sva polja osim radio */
  .polje__unos, .polje__red { max-width: 100%; }
}
/* /carinsko-zastupanje/ (s-8bd3839) kompaktnije (po nalogu 28.9.2026): razmak izmedju polja 16 px umesto 30,
   oznaka 8 px iznad polja umesto 15, radio opcije u jednom redu (na 320 px EN/RU treca prelazi u novi red);
   forma 717 px umesto 956. Forma na /kontakt/ ostaje kao original. */
form.s-8bd3839 .polje { padding-block: 8px; }
form.s-8bd3839 .polje__oznaka { margin-bottom: 8px; }
form.s-8bd3839 .polje__izbor { display: flex; flex-wrap: wrap; gap: 15px 30px; }

/* ---------- 23. Karusel slika (/skladiste/, image-carousel 7912c21) ----------
   Original: Elementor + Swiper 8.4.5. Slika po ekranu: 1, od 767px 2 (Swiper breakpoints su
   min-width po prozoru), razmak 0, prelaz 500ms ease, loop, autoplay 5000ms (sajt.js).
   Donjih 30px je prostor za tackice (paginacija „outside"). Strelice su centrirane na slici. */
.karusel { position: relative; padding-bottom: 30px; --na-ekranu: 1; }
@media (min-width: 767px) { .karusel { --na-ekranu: 2; } }
.karusel__okvir { overflow: hidden; touch-action: pan-y; }
.karusel__traka {
  display: flex;
  transform: translateX(calc(var(--pomak, 0) * -100% / var(--na-ekranu) + var(--vuci, 0px)));
  transition: transform .5s ease;
}
.karusel__slajd { flex: 0 0 calc(100% / var(--na-ekranu)); min-width: 0; }
.karusel__slajd a { display: block; }
.karusel__slajd img { margin-inline: auto; }   /* original: text-align center (uza slika bi bila u sredini) */
.karusel__strelica {
  position: absolute; top: calc(50% - 15px);
  display: inline-flex; padding: 0; border: 0; background: none;
  font-size: 30px; color: rgba(237, 237, 237, .9); cursor: pointer;
  transform: translateY(-50%);
}
.karusel__strelica svg { width: 1em; height: 1em; fill: currentColor; }
.karusel__strelica--nazad { left: 10px; }
.karusel__strelica--napred { right: 10px; }
/* tackice 7×7, razmak 8px, 13px iznad donje ivice (original: bottom 5px + red visine 28px) */
.karusel__tacke {
  position: absolute; left: 0; right: 0; bottom: 13px;
  display: flex; justify-content: center; gap: 8px;
}
.karusel__tacka {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: #000; opacity: .2; cursor: pointer;
}
.karusel__tacka[aria-current="true"] { opacity: 1; }

/* ---------- 23b. Galerija sa minijaturama (/door-to-air/, rs-gallery-slider 6c66314) ----------
   Original: rsaddons + Swiper 11.1.15, gallery-slider-widget.css (bez media upita).
   Glavni: 1 slika, loop, 500ms ease, slika na punu sirinu, visina = najvisa slika.
   Minijature: kolona 110×602, 3 vidljive, razmak 10 / 20 od 576px / 30 od 768px (Swiper breakpoints),
   pomeranje 300ms ease-out (free mode), aktivna ivica #f55b1f.
   Odstupanje (po nalogu 28.9.2026): kolona nikad visa od slike, do 767px sličice u redu ispod slike. */
.galerija { display: flex; align-items: center; justify-content: space-between; position: relative; }
.galerija__glavni {
  flex: 0 0 auto; width: 100%; max-width: calc(100% - 140px);
  overflow: hidden; touch-action: pan-y;
}
.galerija__traka {
  display: flex; align-items: flex-start;
  transform: translateX(calc(var(--pomak, 0) * -100% + var(--vuci, 0px)));
  transition: transform .5s ease;
}
.galerija__slajd { flex: 0 0 100%; min-width: 0; }
.galerija__slajd a { display: block; }
/* sve slike iste visine, 16:9 (po nalogu 28.9.2026): na originalu je galerija visoka koliko najvisa slika
   (air3), pa ispod nize ostaje prazno (~140px na desktopu); visa slika se malo iseca gore i dole */
.galerija__slajd img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 45px izmedju galerije i podnozja, kao ispod ostalih sekcija (original 10px + prazno ispod slike) */
section.s-7604dc2 > .omot { padding-bottom: 45px; }
/* kolona uz desnu ivicu, centrirana po visini, visoka koliko slika, a najvise 602px (po nalogu 28.9.2026):
   na originalu uvek 602px, pa je na tabletu (slika niza od 602px) prazno iznad i ispod slike.
   Gde je slika visa (sire od ~1230px) isto kao original. */
.galerija__minijature {
  position: absolute; top: 0; right: 0; bottom: 0; margin-block: auto;
  width: 100%; max-width: 110px; height: min(602px, 100%);
  overflow: hidden; touch-action: pan-x; --razmak: 10px;
}
@media (min-width: 576px) { .galerija__minijature { --razmak: 20px; } }
@media (min-width: 768px) { .galerija__minijature { --razmak: 30px; } }
/* korak = visina minijature + razmak = (100% + razmak) / 3; --m-pomak je broj koraka (moze i razlomak) */
.galerija__minijature-traka {
  display: flex; flex-direction: column; gap: var(--razmak); height: 100%;
  transform: translateY(calc(var(--m-pomak, 0) * (-100% - var(--razmak)) / 3));
  transition: transform .3s ease-out;
}
.galerija__minijatura {
  flex: 0 0 calc((100% - 2 * var(--razmak)) / 3);
  padding: 0; border: 2px solid transparent; background: none;
  overflow: hidden; transition: .3s;
}
.galerija__minijatura[aria-current="true"] { border-color: var(--narandzasta); }
.galerija__minijatura img { width: 100%; height: 100%; object-fit: cover; }
/* telefon (po nalogu 28.9.2026): slika preko cele sirine, ispod nje red od 3 sličice 16:9, ostale
   prevlacenjem levo-desno (sajt.js prati pravac trake); korak = (100% + razmak) / 3 kao u koloni */
@media (max-width: 767px) {
  .galerija { display: block; }
  .galerija__glavni { max-width: none; }
  .galerija__minijature {
    position: static; max-width: none; height: auto; margin-top: var(--razmak); touch-action: pan-y;
  }
  .galerija__minijature-traka {
    flex-direction: row; height: auto;
    transform: translateX(calc(var(--m-pomak, 0) * (-100% - var(--razmak)) / 3));
  }
  .galerija__minijatura { aspect-ratio: 16 / 9; }
}

/* prevlacenje i skok petlje: traka bez prelaza */
.karusel__traka.je-bez-prelaza,
.galerija__traka.je-bez-prelaza,
.galerija__minijature-traka.je-bez-prelaza,
.svetlo__traka.je-bez-prelaza { transition: none; }
.svetlo__traka.je-bez-prelaza { cursor: grabbing; }

/* ---------- 23c. Lightbox (na originalu Elementor lightbox: custom-lightbox.min.css) ----------
   Nemodalni <dialog> (show()), z-index 9999 kao original — plutajuci izbor jezika (z 99999)
   ostaje iznad, kao na originalu. Otvaranje: fade 400ms (jQuery „swing") + zoomIn .3s;
   zatvaranje: fade 400ms. */
.svetlo {
  position: fixed; inset: 0; z-index: 9999;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(0, 0, 0, .8); color: rgba(237, 237, 237, .9); line-height: 1.5;
}
.svetlo:focus { outline: 0; }   /* fokus na samom dijalogu (otvaranje misem), kao original bez prstena */
.svetlo[open] { animation: svetlo-pojava .4s cubic-bezier(.37, 0, .63, 1); }
.svetlo[open] .svetlo__sadrzaj { animation: svetlo-uvecanje .3s ease; }
.svetlo.je-zatvaranje { animation: svetlo-nestajanje .4s cubic-bezier(.37, 0, .63, 1) forwards; }
@keyframes svetlo-pojava { from { opacity: 0; } }
@keyframes svetlo-nestajanje { to { opacity: 0; } }
@keyframes svetlo-uvecanje {
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  50% { opacity: 1; }
}
.svetlo__sadrzaj { height: 100%; }
.svetlo__okvir { height: 100%; overflow: hidden; touch-action: pan-y; }
.svetlo__traka {
  display: flex; height: 100%; gap: 100px; cursor: grab;
  transform: translateX(calc(var(--pomak, 0) * (-100% - 100px) + var(--vuci, 0px)));
  transition: transform .3s ease;
}
.svetlo__slajd {
  position: relative; flex: 0 0 100%; min-width: 0; padding: 70px;
  display: flex; align-items: center; justify-content: center;
}
.svetlo__uvecanje {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .3s;
}
.svetlo__slika {
  max-height: 100%; user-select: none;
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
  transition: transform .3s;
}
.svetlo__slajd.je-uvecan .svetlo__slika { transform: scale(3); }
/* spiner dok se slika ucitava (Swiper lazy preloader: 42px, ivica 4px, #000, 1s) */
.svetlo__slajd:not(.je-ucitano)::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border: 4px solid #000; border-top-color: transparent; border-radius: 50%;
  animation: svetlo-spiner 1s linear infinite;
}
@keyframes svetlo-spiner { to { transform: rotate(360deg); } }

.svetlo__zaglavlje {
  position: absolute; top: 0; left: 0; z-index: 10; width: 100%;
  display: flex; align-items: center;
  padding: 15px 52px 15px 20px; font-size: 20px; transition: .3s;
}
.svetlo__brojac { margin-right: auto; font-size: 15px; }
.svetlo__ikona, .svetlo__zatvori, .svetlo__strelica {
  border: 0; background: none; color: inherit; cursor: pointer;
}
.svetlo__ikona { display: flex; margin: 0 7px; padding: 5px; }
.svetlo__ikona svg, .svetlo__zatvori svg { width: 20px; height: 20px; fill: currentColor; }
.svetlo__ikona:hover, .svetlo__zatvori:hover, .svetlo__strelica:hover { color: #fff; }
.svetlo__ikona-ne,
.svetlo__ikona[aria-pressed="true"] .svetlo__ikona-da { display: none; }
.svetlo__ikona[aria-pressed="true"] .svetlo__ikona-ne { display: block; }
.svetlo__zatvori {
  position: absolute; top: 13px; right: 15px; z-index: 11;   /* iznad zaglavlja i sloja deljenja, kao original */
  display: flex; padding: 5px; transition: .3s;
}
.svetlo__strelica {
  position: absolute; top: 0; z-index: 1; width: 15%; height: 100%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 25px; transition: .3s;
}
.svetlo__strelica svg { width: 1em; height: 1em; fill: currentColor; }
.svetlo__strelica--nazad { left: 0; }
.svetlo__strelica--napred { right: 0; }
.svetlo__podnozje {
  position: fixed; bottom: 0; left: 0; z-index: 5; width: 100%;
  padding: 15px 20px; text-align: center; transition: .3s;
}
.svetlo__naslov { margin: 0; font-size: 16px; font-weight: 700; }
.svetlo.je-jedna .svetlo__strelica,
.svetlo.je-jedna .svetlo__brojac { visibility: hidden; }
/* uvecanje: zaglavlje i podnozje dobijaju podlogu, strelice nestaju */
.svetlo.je-uvecano .svetlo__zaglavlje,
.svetlo.je-uvecano .svetlo__podnozje { background: rgba(0, 0, 0, .5); }
.svetlo.je-uvecano .svetlo__strelica { opacity: 0; pointer-events: none; }
/* deljenje: providni sloj preko celog dijaloga + bela kutija sa trouglicem */
.svetlo__deljenje {
  position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden;
  transition: background-color .4s;
}
.svetlo.je-deljenje .svetlo__deljenje { width: 100vw; height: 100vh; background: rgba(0, 0, 0, .5); cursor: default; }
.svetlo__deljenje-kutija {
  position: absolute; top: 60px; right: 56px; min-width: 200px;
  padding: 14px 20px; border-radius: 3px; background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transform: scale(0); transform-origin: 90% 10%; transition: .25s .1s;
}
.svetlo__deljenje-kutija::before {
  content: ""; position: absolute; top: 1px; right: 10px;
  border: 9px solid transparent; border-bottom-color: #fff;
  transform: translateY(-100%) scaleX(.7);
}
.svetlo.je-deljenje .svetlo__deljenje-kutija { opacity: 1; visibility: visible; transform: scale(1); }
.svetlo__deli-link {
  display: block; font-size: 12px; line-height: 2.5; color: #0c0d0e;
  opacity: 0; transition: opacity .5s .1s;
}
.svetlo.je-deljenje .svetlo__deli-link { opacity: 1; }
.svetlo__deli-link:hover { color: #000; }
.svetlo__deli-ikona { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: middle; }
.svetlo__deli-ikona--facebook { fill: #3b5998; }
.svetlo__deli-ikona--x { fill: #000; }
.svetlo__deli-ikona--pinterest { fill: #bd081c; }
.svetlo__deli-ikona--preuzmi { fill: #9da5ae; }

/* ---------- 24. Usluge sa slikom (rs-service-expand-effect) ----------
   Izmereno na originalu (service-expand-effect.css + post CSS strane), 1920…390.
   Aktivnu stavku (je-aktivna) menja prelazak misa (sajt.js); odlaskom misa se ne vraca.

   style1 -> .usluge-kartice: pozadinske slike jedna preko druge (aktivna vidljiva, ostale
   providne i uvecane 1.1; prelaz .6s), preko njih veo rgba(44,44,60,.7), pa red kartica
   visine 424 sa naslovom i opisom uz dno. Aktivna kartica: zamucenje 21px iza nje, opis se
   razvije (scaleY 0 -> 1, .3s) do visine zadate po widgetu, naslov 8px iznad opisa umesto -6.
   Padding kartice i visina opisa aktivne kartice su po widgetu -> CSS strane (MAPA_KUTIJA).
   Na originalu tekst visi od zadate visine izlazi iz kartice (preko sledece, ili ga sece koren);
   kod nas opis raste sa tekstom, a kartica po potrebi (po nalogu 28.9.2026, pravila ispod). */
.usluge-kartice { position: relative; overflow: hidden; }
.usluge-kartice::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(44, 44, 60, .7);
}
.usluge-kartice__slika {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1); opacity: 0; visibility: hidden;
  transition: .6s ease-in-out;
}
.usluge-kartice__slika.je-aktivna { opacity: 1; visibility: visible; transform: scale(1); }
/* /organizacija-transporta/, kartica 04: kamion sa slike „Transport za Rusiju" (pozadina drugog reda) ceo —
   slika poravnata levo-dole umesto na sredinu (po nalogu 28.9.2026) */
.usluge-kartice__slika[src*="transportRusija"] { object-position: 0% 100%; }
.usluge-kartice__red { position: relative; z-index: 1; display: flex; flex-wrap: wrap; }
.usluga-kartica {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 0 0 auto;
  min-height: 424px;
  border-right: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(0px);   /* Safari do 17 zna samo za prefiks (puna provera 28.9.2026) */
  backdrop-filter: blur(0px);
  transition: backdrop-filter .3s, -webkit-backdrop-filter .3s;
}
.usluga-kartica:last-child { border-right-width: 0; }
.usluga-kartica.je-aktivna { -webkit-backdrop-filter: blur(21px); backdrop-filter: blur(21px); }
.usluga-kartica__ikona { position: absolute; top: 40px; left: 40px; }
.usluga-kartica__ikona svg { width: 40px; height: 40px; fill: var(--bela); }
/* broj: linija 30px sa vrhom na top -> glif na istom mestu kao span u div-u originala */
.usluga-kartica__broj {
  position: absolute; top: 45px; right: 35px;
  font-family: var(--oznaka); font-size: 30px; line-height: 30px; font-weight: 600;
  color: var(--bela);
}
.usluga-kartica__naslov { margin: 0 0 -6px; font-size: 24px; line-height: 42px; }
.usluga-kartica.je-aktivna .usluga-kartica__naslov { margin-bottom: 8px; }
.usluga-kartica__naslov a { color: var(--bela); transition: color .3s; }
.usluga-kartica__naslov a:hover { color: var(--crvena); }
.usluga-kartica__opis { height: 0; margin: 0; color: var(--bela); transform: scaleY(0); transition: .3s; }
.usluga-kartica.je-aktivna .usluga-kartica__opis { transform: scaleY(1); }
/* tekst visi od zadate visine opisa (po nalogu 28.9.2026; na originalu do 1366 px u svim jezicima izlazi iz
   kartice): opis aktivne kartice je visok najmanje koliko tekst (--visina-teksta meri sajt.js), a razmak
   ::before drzi naslov bar 10 px ispod ikonice, pa kartica raste kad treba. Gde tekst staje, isto kao
   original: zadata visina opisa, naslov tacno 10 px ispod ikonice (razmak = dno ikonice + 10 - padding vrha). */
.usluga-kartica.je-aktivna .usluga-kartica__opis { min-height: var(--visina-teksta, 0px); }
.usluga-kartica::before { content: ""; flex: 0 0 auto; }
.s-a5b04e2 .usluga-kartica::before { height: 50px; }   /* ikonica 40-80 px, padding vrha 40 */
.s-ba07665 .usluga-kartica::before { height: 44px; }   /* ikonica 40-80 px, padding vrha 46 */
/* kolone po Bootstrap klasama originala: --3-2-2 = col-lg-4 col-md-6 col-sm-6,
   --2-1-1 = col-lg-6 col-md-12 col-sm-12 (granice 992 i 576) */
.usluge-kartice--3-2-2 .usluga-kartica { width: 33.33333333%; }
.usluge-kartice--2-1-1 .usluga-kartica { width: 50%; }

/* style2 -> .usluge-panel: lista naslova (45%) i panel (55%, visina 805) u redu, razmak 21,
   poravnati uz dno. Zbir je 100% + 21px: panel izlazi 21px desno i sece ga prozor (original).
   Paneli su jedan preko drugog, aktivni vidljiv (prelaz .6s). Kutija sa sadrzajem dole levo,
   zamucena 11px, sa crvenim uglom; ikona uz gornju ivicu kutije, van toka (apsolutno, top 0);
   nagib kutije prati mis (sajt.js postavlja --nagib-x / --nagib-y). */
.usluge-panel { display: flex; align-items: flex-end; gap: 21px; }
.usluge-panel > * { flex: 0 0 auto; }
.usluge-panel__lista { width: 45%; padding-bottom: 120px; }
.usluge-panel__stavka {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-family: var(--naslovni); font-size: 24px; line-height: 32px; font-weight: 700;
  color: rgba(255, 255, 255, .5);
  transition: color .3s, padding .3s, font-weight .3s;
}
.usluge-panel__stavka:last-child { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.usluge-panel__stavka svg { width: 23px; height: 23px; fill: var(--bela); transition: fill .3s; }
.usluge-panel__stavka.je-aktivna {
  padding: 28px 24px; font-weight: 600; color: var(--crvena);
  background-color: var(--mastilo);
}
.usluge-panel__stavka.je-aktivna svg { fill: var(--crvena); }
.usluge-panel__prikaz { position: relative; width: 55%; min-height: 805px; overflow: hidden; }
.usluge-panel__slajd {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-color: #f3f4f7;
  transform: scale(1.1); opacity: 0; visibility: hidden;
  transition: .6s ease-in-out;
}
.usluge-panel__slajd.je-aktivna { opacity: 1; visibility: visible; transform: scale(1); }
.usluge-panel__slika { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.usluge-panel__kutija {
  position: absolute; left: 40px; bottom: 40px; z-index: 1;
  max-width: 548px;
  padding: 30px;
  overflow: hidden;
  background: radial-gradient(151.64% 120.36% at 47.19% -0.63%, rgba(37, 65, 76, .4) 0%, rgba(37, 65, 76, 0) 100%);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(11px);  /* Safari do 17 zna samo za prefiks (puna provera 28.9.2026) */
  backdrop-filter: blur(11px);
  transition: transform .1s;
}
.usluge-panel__kutija.je-nagnuta {
  transform: perspective(500px) rotateX(var(--nagib-x)) rotateY(var(--nagib-y));
}
.usluge-panel__kutija::after {
  content: ""; position: absolute; top: -16px; right: 4px;
  border: 40px solid transparent; border-right-width: 0; border-left-color: var(--crvena);
  transform: rotate(-45deg);
}
/* ikonica u toku kutije, 30px od vrha kao i ostale ivice, 10px iznad naslova (po nalogu 28.9.2026;
   original: apsolutno na samoj gornjoj ivici kutije) */
.usluge-panel__ikona { display: block; margin-bottom: 10px; }
.usluge-panel__ikona svg { width: 34px; height: 34px; fill: var(--bela); }
.usluge-panel__naslov { margin: 0 0 10px; font-size: 24px; line-height: 32px; }
.usluge-panel__naslov a { color: var(--bela); transition: color .3s; }
.usluge-panel__naslov a:hover { color: var(--crvena); }
.usluge-panel__opis { margin: 0 0 10px; color: var(--bela); }

@media (max-width: 1366px) {
  .usluga-kartica__ikona { top: 20px; left: 20px; }
  .usluga-kartica__broj { top: 20px; right: 20px; }
  .s-a5b04e2 .usluga-kartica::before, .s-ba07665 .usluga-kartica::before { height: 70px; }   /* ikonica 20-60, padding vrha 0 */
}
@media (max-width: 1024px) {
  .usluge-panel__kutija { left: 20px; bottom: 20px; }
}
@media (max-width: 991px) {
  .usluge-kartice--3-2-2 .usluga-kartica { width: 50%; }
  .usluge-kartice--2-1-1 .usluga-kartica { width: 100%; }
}
@media (max-width: 767px) {
  .usluge-panel { flex-direction: column; align-items: flex-start; }
  .usluge-panel__lista { width: 100%; padding: 0 20px; }
  .usluge-panel__prikaz { width: 100%; }
  .usluge-panel__kutija { bottom: 40px; max-width: 260px; }
}
@media (max-width: 575px) {
  .usluge-kartice--3-2-2 .usluga-kartica { width: 100%; }
}

/* ---------- 26b. Strana bez Elementor sadrzaja (obican sablon teme: /coming-soon/) ----------
   Tema: #content { padding: 120px 0 }, do 767px 70px — prazan sadrzaj ostaje razmak
   izmedju zaglavlja i podnozja. */
.sadrzaj-tema { padding: 120px 0; }
@media (max-width: 767px) { .sadrzaj-tema { padding: 70px 0; } }

/* ---------- 27. Strana 404 (tema: .page-error — default.css + responsive.css originala) ----------
   Sadrzaj na sredini prozora (fiksno, polovina visine), sirina kao Bootstrap .container
   (utice samo na 576–767px: 540), 60px iznad i ispod; naslov do 550px, dugme ispod.
   Strelica dugmeta: glif remixicon 19px, 22px od desne ivice (polozaj izmeren). */
.greska {
  position: fixed; top: 50%; left: 0; right: 0;
  margin: 0 auto; padding: 60px 12px;
  text-align: center;
  transform: translateY(-50%);
}
.greska__sadrzaj { display: inline-block; }
.greska__naslov {
  max-width: 550px; margin: 0 auto 40px;
  font-size: 35px; line-height: 50px; color: var(--mastilo);
}
.greska__naslov span { display: block; font-size: 250px; line-height: 270px; }
.greska__dugme {
  position: relative; display: inline-block;
  padding: 16px 48px 16px 32px;
  font-size: 16px; line-height: 28px; font-weight: 600;
  color: var(--mastilo); background: var(--crvena);
  border: 1px solid #d7d7d7;
  transition: .4s;
}
.greska__dugme svg { position: absolute; top: 21.7px; right: 22px; width: 19px; height: 19px; fill: var(--mastilo); }
.greska__dugme:hover { color: var(--bela); background: var(--narandzasta); border-color: var(--narandzasta); }
.greska__dugme:hover svg { fill: var(--bela); }
@media (min-width: 576px) and (max-width: 767px) {
  .greska { max-width: 540px; }
}
@media (max-width: 767px) {
  .greska__sadrzaj { padding: 20px; }
  .greska__naslov span { margin: 0 0 20px; font-size: 110px; line-height: 75px; }
}
@media (max-width: 480px) {
  .greska__naslov { margin: 40px auto 20px; font-size: 25px; line-height: 40px; }
  .greska__naslov span { margin-bottom: 0; font-size: 80px; line-height: 80px; }
}

/* =========================================================================
   Mobilni (<=767px) — unutrasnjost komponenti, izmereno na 390×844.
   (Raspored sekcija i tipografija po widgetu su u CSS-u strane.)
   ========================================================================= */
@media (max-width: 767px) {
  .usluge-lista__stavka { flex-direction: column; }

  .prednost { padding: 20px 30px 30px 55px; }

  .svetlo__slajd { padding: 70px 0; }
  .svetlo__strelica { width: 20%; }
  .svetlo__strelica--nazad { justify-content: flex-start; }
  .svetlo__strelica--napred { justify-content: flex-end; }

}

/* ---------- Kineski/cirilica: bez CJK webfonta, kao na originalu ----------
   Izmereno CDP-om: ZH tekst se na originalu renderuje sistemskim CJK fontom
   (Microsoft YaHei na Windowsu), latinica ostaje Oswald/Rubik.
   RU cirilicu ispisuje Oswald/Rubik cirilicni subset sa Google Fonts.
   Zato se NE dodaje nikakav CJK webfont — fallback radi isto. */