/**
 * sekcije.css — sastavni dijelovi pojedinih sekcija.
 *
 * app.css nosi ljusku (zaglavlje, podnozje, polja, gumbi); ovdje su stvari
 * koje postoje samo unutar sadrzaja: hero, kartice, koraci, ljepljivi split,
 * tablice cinjenica, kontakt.
 *
 * Kao i drugdje: nijedna boja nije zapisana doslovno, sve ide kroz var().
 */

/* ================================================================== */
/* Zaglavlje sekcije i opci blokovi                                    */
/* ================================================================== */
.zaglavlje-sekcije {
  display: grid;
  gap: var(--p3);
  margin-bottom: var(--p7);
}
.zaglavlje-sekcije .uvod { margin-top: var(--p1); }

.blok {
  display: grid;
  gap: var(--p3);
  margin-bottom: var(--p6);
}

.akcije {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p3);
  margin-top: var(--p5);
}

.popis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--p2);
}
.popis li {
  position: relative;
  padding-left: var(--p5);
  color: var(--tekst-2);
  font-size: var(--vel-malo);
}
.popis li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--hes-tekst);
}

/* Varijanta s ikonama: crtica ustupa mjesto znaku, redak postaje flex. */
.popis--ikone li {
  display: flex;
  align-items: center;
  gap: var(--p3);
  padding-left: 0;
  padding-block: var(--p2);
  font-size: var(--vel-tekst);
}
.popis--ikone li::before { content: none; }
.popis--ikone svg {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: var(--r-mali);
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
}

/* Naglasena fraza unutar naslova. Bojanje je uklonjeno na zahtjev klijenta —
   klasa ostaji samo zato da <em> ne padne u kurziv. */
.istaknuto {
  font-style: normal;
}

/*
 * Redovi cinjenica. Citaju se kao specifikacija a ne kao marketing: oznaka
 * lijevo, vrijednost desno, tanka crta izmedu. Isti sastavni dio koriste
 * industrial na naslovnici i rental-intro na stranici najma.
 */
.cinjenice { margin: 0; }
.cinjenice > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--p4);
  padding: var(--p3) 0;
  border-bottom: 1px solid var(--rub);
}
.cinjenice dt {
  font-size: var(--vel-oznaka);
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
}
.cinjenice dd {
  margin: 0;
  font-size: var(--vel-malo);
  font-weight: 500;
  text-align: right;
}
.cinjenice--vodoravno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 var(--p6);
  margin-block: var(--p6);
}
.cinjenice--vodoravno > div {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--p2);
}
.cinjenice--vodoravno dd { text-align: left; }

/* Tvrdi uvjet u boji naglaska; prednosti ostaju prigusene. Kandidat se
   procijeni u nekoliko sekundi samo ako se "mora" i "dobro je" razlikuju
   bez citanja. */
.cinjenice--uvjet dd { color: var(--hes-tekst); font-weight: 600; }

/* Namjerno najtisi element sekcije: nadu ga kandidati, kupci ga preskoce. */
.uvlaka {
  max-width: 44ch;
  padding: var(--p4);
  border-left: 2px solid var(--rub-jaci);
  background: var(--plohica);
  border-radius: 0 var(--r-mali) var(--r-mali) 0;
  display: grid;
  gap: var(--p2);
  margin-bottom: var(--p6);
}

/* ================================================================== */
/* Hero                                                                */
/* ================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Nize nego prije: nakon uklanjanja natuknica i partnerske pilule sadrzaj
     je krace, pa isti razlog (gornji rub sljedece sekcije vidljiv pri
     ucitavanju) sad trazi manju visinu da ne ostane prazan prostor. */
  min-height: min(72vh, 640px);
  padding-block: var(--p9) var(--p7);
  overflow: hidden;
}
.hero__slika {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

/*
 * Postupno zamucenje slijeva nadesno. Razbija ravnu plohu bez da dira sam
 * kadar: maska gasi backdrop-filter prije nego stigne do ormara (koji sjedi
 * oko 72% pozicije slike), pa ormar ostaje posve ostar, samo je prostor oko
 * teksta lijevo staklen. Zaseban sloj, ne zamjena za .hero::after ispod —
 * oba se sloje jedno na drugo, oba iza sadrzaja.
 */
.hero__zamucenje {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 58%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__zamucenje { display: none; }
}

/*
 * Kosi zastor: slika je najsvjetlija desno, tekst stoji lijevo.
 *
 * Zastor je NEUTRALAN, bez tona. Ranije je bio tealni i bojao je cijelu
 * fotografiju u plavo — a upravo je boja ormara ono zbog cega ta slika
 * uopce stoji na stranici. Zatamnjenje sluzi samo citljivosti teksta, pa
 * je najjace lijevo gdje tekst je, a nad motivom desno ga gotovo nema.
 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.62) 30%,
    rgba(0, 0, 0, 0.22) 58%,
    rgba(0, 0, 0, 0.10) 78%,
    rgba(0, 0, 0, 0.30) 100%
  );
}
.hero__sadrzaj {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--p5);
  justify-items: start;
}
.hero .naslov-hero { max-width: 20ch; }
.hero .uvod { max-width: 54ch; }

/*
 * Ime tvrtke. Znak plus verzal na punoj boji teksta, s crtom koja se produzuje
 * udesno — potez koji natpis veze uz rub stupca umjesto da lebdi sam.
 */
.hero__marka {
  display: flex;
  align-items: center;
  gap: var(--p3);
  font-size: var(--vel-malo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tekst);
}
.hero__marka img { height: 26px; width: auto; }
.hero__marka::after {
  content: "";
  width: clamp(24px, 8vw, 88px);
  height: 1px;
  background: linear-gradient(90deg, var(--hes-tekst), transparent);
  background-size: 200% 100%;
}
/* Spor sjaj koji putuje niz crtu — jedna od par tocaka na stranici gdje
   pokret ponavlja u razmacima, umjesto da se odigra jednom i stane. */
@media (prefers-reduced-motion: no-preference) {
  .hero__marka::after { animation: sjaj-crte 4s ease-in-out infinite alternate; }
}
@keyframes sjaj-crte {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/*
 * Dva trzista. Obrisi drzava su maknuti — na 32 px su bili siva mrlja lijevo
 * od naziva, a naziv je ionako nosio cijelo prepoznavanje. Umjesto njih redak
 * drzi kratak okomiti potez u boji naglaska: dovoljno da se dvije stavke citaju
 * kao dva zapisa, a ne kao jedan tekst prelomljen preko dva stupca.
 */
.trzista {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rub);
  border-bottom: 1px solid var(--rub);
}
.trzista li {
  position: relative;
  display: grid;
  align-items: center;
  padding: var(--p4) var(--p5) var(--p4) var(--p4);
  margin-right: var(--p5);
}
/* Potez uz lijevi rub retka. Ne ide preko cijele visine nego kroz sredinu —
   uz naziv, ne uz razmak iznad i ispod njega. */
.trzista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 2.1em;
  border-radius: var(--r-pilula);
  background: linear-gradient(180deg, var(--hes-tekst), transparent);
}
.trzista__tekst { display: grid; gap: 2px; }
.trzista__ime {
  font-size: var(--vel-tekst);
  font-weight: 600;
  color: var(--tekst);
}
.trzista__opis {
  font-size: var(--vel-malo);
  color: var(--tekst-2);
}
/* Crta razdvajanja je maknuta: potez naglaska uz svaki redak vec kaze gdje
   jedan zapis pocinje, a crta uz njega bi bila druga okomita linija na
   razmaku od 8 px. */

.hero__akcije { display: flex; flex-wrap: wrap; gap: var(--p3); }

@media (max-width: 719px) {
  .hero { min-height: min(78vh, 560px); padding-block: var(--p8) var(--p6); }
  .hero__slika img { object-position: center 26%; }
  .hero__zamucenje { display: none; } /* kadar na mobitelu nema odmaknut motiv koji treba stititi */

  /*
   * Znak s natpisom i traka trzista izlaze iz mobilnog heroja (zahtjev
   * klijenta). Oboje je ponavljanje: znak stoji u traci dva centimetra iznad,
   * a dva trzista zauzimaju cetiri retka na ekranu na kojem naslov, uvod i
   * dva gumba tek stanu. Na desktopu oboje ostaje.
   */
  .hero__marka,
  .trzista { display: none; }
}

/* ================================================================== */
/* Kartice                                                             */
/* ================================================================== */
.kartice {
  display: grid;
  gap: var(--p4);
}
.kartice--tri { grid-template-columns: repeat(3, 1fr); }
/*
 * Kartice pozicija su razlicite duljine (cetiri uvjeta naspram dva) i prije su
 * se obje rastezale na visinu duze, pa je kraca imala pola prazne plohe.
 * `start` joj dopusta da bude kratka kolika jest.
 */
.kartice--dvije { grid-template-columns: repeat(2, 1fr); align-items: start; }

.kartica {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--p3);
  padding: var(--p5);
  background: var(--ploha-2);
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  box-shadow: var(--odsjaj-kartice);
  overflow: hidden;
  transition:
    transform var(--srednje) var(--krivulja),
    border-color var(--srednje) var(--krivulja),
    background var(--srednje) var(--krivulja);
}
/* Tanka crta naglaska preko vrha kartice na hover. */
.kartica::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hes), transparent);
  opacity: 0;
  transition: opacity var(--srednje) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .kartica:hover {
    transform: var(--pomak-kartice);
    border-color: var(--hes-rub);
    background: var(--ploha-3);
  }
  .kartica:hover::before { opacity: 0.9; }
}
/* Pilule vise ne stoje ni na jednoj kartici — trziste na karticama usluga je
   postalo mjerilo, a oznake zaposlenja plocice. `.pilula` i dalje zivi u
   webshopu ("Na stanju", js/pogledi.js), ali ne unutar `.kartica`. */

.kartica__cta {
  justify-self: start;
  align-self: end;
  margin-top: var(--p2);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--vel-malo);
  font-weight: 600;
  color: var(--hes-tekst);
  text-decoration: none;
  transition: transform var(--brzo) var(--krivulja);
}
.kartica__cta::after {
  content: "";
  width: 1.1em;
  height: 1px;
  background: currentColor;
  transition: width var(--srednje) var(--krivulja);
}
.kartica__cta.van::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .kartica__cta:hover { transform: var(--pomak-retka); }
  .kartica__cta:hover::after { width: 1.9em; }
}
.kartica__akcije { display: grid; gap: var(--p2); justify-items: start; }

/*
 * Kartica djelatnosti kao prozor.
 *
 * Cetiri poteza koja nosi, i zasto svaki:
 *  - traka s tri tockice: kartica prestaje biti pravokutnik s tekstom i
 *    postaje ploha koja nesto sadrzi. Bez naziva datoteke — naziv se drugdje
 *    na stranici uklanja, pa ga ovdje ne uvodimo.
 *  - `--vrh`: ikona i naslov U ISTOM RETKU. Prije su stajali jedan ispod
 *    drugog i kartica je pocinjala s 90 px prije prve rijeci.
 *  - `--duh`: redni broj krupno i jedva vidljivo, pomaknut ispod trake.
 *  - lijevi potez koji na hover naraste s 3 na 5 px. Pomak koji se osjeti a
 *    ne pomakne raspored — kartica ne mijenja sirinu.
 *
 * `overflow: hidden` vec stoji na `.kartica` i drzi duh unutar radijusa.
 */
.kartica--djelatnost {
  padding-left: calc(var(--p5) + 3px);
  /* CTA pada na dno kartice; bez ovoga tri kartice razlicite duljine teksta
     zavrsavaju s tri poveznice na tri razlicite visine. */
  align-content: space-between;
}
.kartica--djelatnost::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hes), transparent 85%);
  transition: width var(--srednje) var(--krivulja);
  /* Iznad trake prozora, inace ga ona presijece. */
  z-index: 1;
}
/* Traka mora dosegnuti rub kartice, a kartica ima vlastiti padding. Lijevo je
   za 3 px veci zbog poteza naglaska, pa se i traka mora povuci za toliko. */
.kartica--djelatnost.prozor .prozor__traka {
  margin: calc(-1 * var(--p5)) calc(-1 * var(--p5)) 0 calc(-1 * (var(--p5) + 3px));
}
.kartica__vrh {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--p3);
}
.kartica__vrh .naslov-3 {
  font-size: var(--vel-tekst);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--razmak-naslov);
  text-wrap: balance;
}
.kartica__duh {
  position: absolute;
  top: calc(-1 * var(--p2));
  right: var(--p3);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 600;
  line-height: 1;
  color: var(--hes-tekst);
  opacity: 0.09;
  pointer-events: none;
}
/* Ispod trake prozora, da ne stoji preko tockica. */
.kartica--djelatnost .kartica__duh { top: var(--p6); }
.kartica__ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-tile);
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
  margin-bottom: var(--p1);
}
.kartica__ikona svg { width: 22px; height: 22px; }
/* U retku s naslovom ikona ne treba donji razmak — poravnata je okomito. */
.kartica__vrh .kartica__ikona { margin-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
  .kartica--djelatnost:hover::after { width: 5px; }
  .kartica--djelatnost:hover .kartica__duh { opacity: 0.16; }
  .kartica--djelatnost:hover .kartica__ikona {
    background: color-mix(in oklab, var(--hes) 22%, transparent);
  }
  /* Traka mjerila se puni do kraja na hover: kartica se javi i prije nego se
     na nju klikne, a mjerilo je jedini element na njoj koji ima cime. */
  .kartica--djelatnost:hover .mjerilo__ispuna { --ispuna: 1; }
}

/* Mjerilo unutar kartice stoji uz dno, iznad poveznice. */
.kartica .mjerilo { margin-top: var(--p1); }

@media (max-width: 1023px) {
  .kartice--tri { grid-template-columns: repeat(2, 1fr); }
}
/* ================================================================== */
/* Koraci — opseg isporuke                                             */
/* ================================================================== */
/*
 * Tri koraka na jednoj neprekinutoj crti. Tvrdnja JEST lanac, i jedna linija
 * kaze "ovo ne predajemo dalje" ekonomicnije nego tri ikone.
 *
 * Cijela sekcija je centrirana i brojevi su krupni. Prije su bili krugici od
 * 22 px s tekstom od 10 px — mjera na kojoj se lanac uopce nije citao kao
 * lanac nego kao popis s tockama.
 */
.opseg .zaglavlje-sekcije { justify-items: center; text-align: center; }
.opseg .zaglavlje-sekcije .stupac--tekst { margin-inline: auto; }
.koraci {
  /*
   * Mjera brojke stoji OVDJE, a ne na `.korak`: crtu crta `.koraci::before` i
   * mora znati istu vrijednost da bi je presjekla po sredini. Prilagodena
   * svojstva se nasljeduju prema dolje, pa je s roditelja vide oboje.
   */
  --visina-broja: clamp(44px, 5.5vw, 68px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p5);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Crta prolazi kroz sredinu brojki, ne iznad njih. */
.koraci::before {
  content: "";
  position: absolute;
  top: calc(var(--visina-broja) / 2);
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rub-jaci) 12%, var(--rub-jaci) 88%, transparent);
}
/*
 * Ovdje je stajala traka napretka: druga crta preko sive, koja se punila sa
 * skrolom i skakala na klik po koraku. Maknuta je — s njom i klik, jer bez
 * trake nije imao sto pokazati osim promjene boje jedne brojke.
 * Lanac je opet ono sto je i bio: tri koraka na jednoj crti, sva tri
 * jednako vidljiva od trenutka kad sekcija ude u prikaz.
 */
.korak {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--p2);
}
.korak__broj {
  display: grid;
  place-items: center;
  height: var(--visina-broja);
  margin-bottom: var(--p2);
  padding-inline: var(--p4);
  /* Brojka sjedi NA crti, pa mora imati vlastitu plohu koja crtu prekida. */
  background: var(--ploha-1);
  color: var(--hes-tekst);
  font-size: var(--visina-broja);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

@media (max-width: 719px) {
  .koraci { grid-template-columns: 1fr; gap: var(--p6); }
  /* Na jednom stupcu crta ide okomito kroz sredinu. */
  .koraci::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--rub-jaci) 8%, var(--rub-jaci) 92%, transparent);
  }
}

/* ================================================================== */
/* Ljepljivi split                                                     */
/* ================================================================== */
.split__mreza {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--p8);
  align-items: start;
}
/*
 * Jedna slika, bez zamjene na hover. Omjer stranica je omjer same uspravne
 * fotografije, pa `object-fit` nema sto rezati.
 */
.split__medij {
  position: sticky;
  top: calc(var(--visina-zaglavlja) + var(--p6));
  aspect-ratio: 1149 / 1369;
  border-radius: var(--r-ploha);
  overflow: hidden;
}
.split__slika {
  display: block;
  height: 100%;
}
.split__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__sadrzaj > *:last-child { margin-bottom: 0; }

/* Ispod 1024 px split se raspada u sliku pa blokove; ljepljivost se gasi jer
   bi na uskom ekranu pojela pola vidljive visine. */
@media (max-width: 1023px) {
  .split__mreza { grid-template-columns: 1fr; gap: var(--p6); }
  /*
   * Kvadratni kadar, ne 4:3. Fotografija je 1149x1369 (uspravna); u 4:3 se
   * gubilo oko 37 % njezine visine, pa se od ormara vidjela samo sredina.
   * Kvadrat odrezuje oko 15 % i ostavlja i vrh i dno.
   */
  .split__medij { position: static; aspect-ratio: 1 / 1; max-height: 56vh; }
}

/* ------------------------------------------------------------------ */
/* Spec prozor                                                         */
/* ------------------------------------------------------------------ */
/*
 * Prozor sa specifikacijom. Zamjenjuje dva <details> bloka koja su stajala
 * otvorena od pocetka i nisu skrivala nista — tri retka popisa i tri retka
 * tablice. Strelica koja obeca sazimanje sadrzaja koji stane na ekran je
 * obecanje bez pokrica, pa je maknuta zajedno s njima.
 *
 * Dvije polovice, odvojene crtom: gore sto se radi, dolje pod kojim uvjetima.
 */
.spec {
  margin-bottom: var(--p6);
  border-radius: var(--r-kartica);
}
.spec__popis {
  padding: var(--p4) var(--p5);
}
.spec__mjerila {
  display: grid;
  gap: var(--p3);
  padding: var(--p4) var(--p5) var(--p5);
  border-top: 1px solid var(--rub);
}
/* Trake se pune tek kad prozor ude u prikaz. `data-otkrij` na prozoru vec
   pomice cijeli blok, a ovo dodaje da se i mjerila "napune" umjesto da
   dodu gotova. Pocetno stanje postavlja CSS jer je nula ovdje bezopasna:
   bez JS-a se `--otkrivanje` prijelaz nikad ne pokrene, ali vrijednost iz
   markupa (`--ispuna` na samoj ispuni) svejedno vrijedi. */
.spec .mjerilo__ispuna { transition: transform var(--sporo) var(--krivulja) 120ms; }

@media (max-width: 599px) {
  .spec__popis { padding: var(--p3) var(--p4); }
  .spec__mjerila { padding: var(--p3) var(--p4) var(--p4); }
}

/* ================================================================== */
/* Zavrsni radovi                                                      */
/* ================================================================== */
/*
 * Asimetricna mreza: uvod lijevo i ljepljiv, kartice radova desno. Sedam
 * stavki je predugacko da stoji ispod naslova a da naslov ostane na ekranu.
 */
.zavrsni__mreza {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--p7);
  align-items: start;
}
/*
 * Podizanje na hover je maknuto. Ovo je ljepljiv STUPAC, ne kartica — pomicao
 * se cijeli uvod sekcije zajedno s naslovom i dva gumba cim bi pokazivac
 * presao preko bilo cega u njemu, i to dok stoji zalijepljen uz vrh prozora.
 * Hover pripada elementima na koje se klika; ovaj to nije.
 */
/*
 * Ljepljivi uvod je UKLONJEN na zahtjev klijenta. Naslov je stajao prikovan uz
 * vrh prozora dok bi sedam kartica promicalo pokraj njega; efekt je bio
 * namjeran, ali se citao kao da se stranica zaglavila. Stupac sada skrola sa
 * svime ostalim, a mreza kartica desno ostaje kakva jest.
 */
.zavrsni__uvod { position: static; }
.zavrsni__uvod .zaglavlje-sekcije { margin-bottom: var(--p5); }

/*
 * Kartica posla. Uze nego prije (190 px umjesto 260) i krupnijeg tipa, pa se
 * naziv cita kao naslov a ne kao redak popisa. Ikona i duh-broj rade isto sto
 * i na karticama djelatnosti — daju kartici vrh koji se vidi prije citanja.
 */
/*
 * `auto-fit`, ne `auto-fill`: sedam kartica u mrezi od cetiri stupca ostavlja
 * tri prazna mjesta u zadnjem redu. `auto-fill` ih drzi kao prazne stupce i
 * zadnja kartica visi lijevo uz rupu; `auto-fit` prazne stupce urusi, pa se
 * tri kartice zadnjeg reda rastegnu i red izgleda namjerno.
 */
.radovi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--p3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rad {
  position: relative;
  display: grid;
  /* Ikona gore, naziv uz dno: kartice razlicite duljine naziva time dobivaju
     istu unutarnju crtu umjesto da im tekst pluta na razlicitim visinama. */
  align-content: space-between;
  gap: var(--p4);
  min-height: 156px;
  padding: var(--p4);
  overflow: hidden;
  background: var(--ploha-2);
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  box-shadow: var(--odsjaj-kartice);
  transition:
    border-color var(--srednje) var(--krivulja),
    background var(--srednje) var(--krivulja),
    transform var(--srednje) var(--krivulja);
}
/* Brojka je bila odrezana gornjim rubom kartice (`top: -4px`); sad stoji
   unutar nje, poravnata s ikonom. */
.rad__broj {
  position: absolute;
  top: var(--p3);
  right: var(--p4);
  font-size: 46px;
  font-weight: 600;
  line-height: 0.8;
  color: var(--hes-tekst);
  opacity: 0.1;
  pointer-events: none;
}
.rad__ikona {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-mali);
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
}
.rad__ikona svg { width: 20px; height: 20px; }
.rad__ime {
  font-size: var(--vel-tekst);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--razmak-naslov);
  text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
  .rad:hover {
    border-color: var(--hes-rub);
    background: var(--ploha-3);
    transform: var(--pomak-kartice);
  }
  .rad:hover .rad__broj { opacity: 0.16; }
  .rad:hover .rad__ikona { background: color-mix(in oklab, var(--hes) 22%, transparent); }
}

@media (max-width: 1023px) {
  .zavrsni__mreza { grid-template-columns: 1fr; gap: var(--p6); }
}

/*
 * Sedam poslova na mobitelu: dva u redu, bez duh-brojeva.
 *
 * `auto-fit, minmax(200px, 1fr)` je ispod 440 px padao na JEDAN stupac, pa je
 * sekcija bila sedam kartica visoka. Dva fiksna stupca stanu jer kartica
 * ovdje nosi samo ikonu i naziv — broj 01–07 je maknut (zahtjev klijenta) i
 * time je nestala i jedina stvar koja je trazila sirinu.
 */
@media (max-width: 719px) {
  .radovi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p2); }
  .rad {
    min-height: 0;
    gap: var(--p3);
    padding: var(--p3);
  }
  .rad__broj { display: none; }
  .rad__ikona { width: 32px; height: 32px; }
  .rad__ikona svg { width: 16px; height: 16px; }
  .rad__ime { font-size: var(--vel-malo); }
}

/* ================================================================== */
/* Kucne elektroinstalacije                                            */
/* ================================================================== */
/*
 * Tekst lijevo, jedna fotografija desno s karticom koja joj preklapa donji
 * rub. Zavrsni radovi iznad koriste ljepljiv uvod i mrezu kartica; da i ova
 * sekcija radi isto, dvije sekcije iste djelatnosti citale bi se kao jedna
 * predugacka.
 */
.kucne__mreza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--p8);
  align-items: center;
}
.kucne__tekst .zaglavlje-sekcije { margin-bottom: var(--p5); }

/* Inline umjesto stupca: tri kratke cinjenice citaju se kao skup pilula
   u retku, ne kao popis od tri retka. */
.kucne__natuknice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p2) var(--p3);
  list-style: none;
  margin: var(--p3) 0 0;
  padding: 0;
}
.kucne__natuknice li {
  display: inline-flex;
  align-items: center;
  gap: var(--p2);
  padding: 5px var(--p3);
  border: 1px solid var(--rub);
  border-radius: var(--r-pilula);
  font-size: var(--vel-malo);
  font-weight: 500;
  color: var(--tekst-2);
}
.kucne__natuknice svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--hes-tekst);
}

.kucne__medij { position: relative; }
.kucne__slika { display: block; }
.kucne__slika img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-ploha);
}
/*
 * Kartica preklapa donji rub fotografije. Loxone je ovdje dodatak kucnoj
 * instalaciji, a ne zasebna ponuda — kartica koja stoji NA slici to kaze bez
 * recenice, dok bi kartica pokraj slike rekla suprotno.
 */
.kucne__kartica {
  position: relative;
  z-index: 1;
  transition:
    transform var(--srednje) var(--krivulja),
    border-color var(--srednje) var(--krivulja);
  display: grid;
  gap: var(--p2);
  justify-items: start;
  width: calc(100% - var(--p7));
  /* Kartica je nakon micanja tablice cinjenica niza, pa preklapa sliku za
     manje nego prije — inace bi joj donji rub visio ispod fotografije. */
  margin: calc(-1 * var(--p7)) auto 0;
  padding: var(--p5);
  border-radius: var(--r-ploha);
}

@media (hover: hover) and (pointer: fine) {
  .kucne__kartica:hover {
    transform: var(--pomak-kartice);
    border-color: var(--hes-rub);
  }
}

@media (max-width: 1023px) {
  .kucne__mreza { grid-template-columns: 1fr; gap: var(--p6); }
}
@media (max-width: 599px) {
  /* Na uskom ekranu preklapanje pojede pola fotografije. */
  .kucne__kartica {
    width: 100%;
    margin-top: var(--p4);
    padding: var(--p4);
  }
}

/* ================================================================== */
/* Loxone pojas                                                        */
/* ================================================================== */
.traka-loxone { position: relative; overflow: hidden; }
/*
 * Slika komponenata. Prozirna je, pa ispod nje ostaje tirkizno polje otoka i
 * nije joj potrebna nikakva ploha ispod.
 *
 * `contain` umjesto `cover`: izvor je kvadrat, a pojas je sirok — `cover` bi
 * od skupa odrezao gornju i donju trecinu i ostavio pola uredaja presjecenih
 * na pola. Ovako skup stoji cijel.
 *
 * LIJEVO, ne desno. Udesno je zavrsio iza sest kartica skupina i vidjeli su
 * se samo rubovi izmedu njih. Lijevo je iza teksta, gdje ga pokriva samo
 * usmjereni zastor — a njega se smije popustiti, sto se ispod i radi.
 *
 * 0.6 je gornja granica koju zastor jos podnosi: mjereno na najgorem pikselu
 * (bijelo tipkalo) tekst i na njoj ostaje na 6.0:1.
 */
.traka-loxone__slika { position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.traka-loxone__slika img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
/*
 * Jedini animirani mesh gradijent na stranici. Ovo je otok bez fotografije u
 * prvom planu, pa pokret ovdje ne otima paznju nicemu — za razliku od heroja
 * (koji vec dobiva zamucenje) ili industrijske sekcije (koja se cita kao
 * specifikacija, ne kao ukras).
 *
 * VAZNO — redoslijed slaganja, i zasto ima CETIRI sloja a ne dva:
 *
 *   0  fotografija
 *   1  osnovni zastor (.traka-loxone::after)  — spusta cijeli kadar
 *   2  mesh (mix-blend-mode: screen)          — vraca svjetlo i boju
 *   3  usmjereni zastor (.traka-loxone__zastor) — stiti tekst
 *   4  sadrzaj
 *
 * Mesh MORA biti iznad osnovnog zastora: ispod njega je `screen` posvijetlio
 * fotografiju, a zastor bi mu odmah oduzeo sve sto je dodao — to je bio pravi
 * razlog zasto se gradijent uopce nije vidio (oba sloja su imala `z-index: 1`,
 * a pseudoelement se crta nakon djece, pa je crnina padala preko mesha).
 *
 * Ali cim je mesh iznad zastora, on osvjetljava i plohu ispod teksta. Na
 * svijetlom izboju fotografije bijeli tekst tako pada na 1.8:1. Zato sloj 3:
 * jak ondje gdje tekst stoji, gotovo nikakav ondje gdje stoje kartice.
 */
.traka-loxone__mreza-boja {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.85;
}
/*
 * Sloj mesha. Svaki nosi JEDNU mrlju i giba se po vlastitom rasporedu.
 * `inset: -25%` prekriva rub tako da translate/scale nikad ne otkrije brid;
 * animira se iskljucivo `transform`, sto ostaje na kompozitoru.
 */
.mreza-boja__sloj {
  position: absolute;
  inset: -25%;
  display: block;
}
.mreza-boja__sloj--1 {
  background-image: radial-gradient(
    42% 52% at 24% 32%,
    color-mix(in oklab, var(--hes) 78%, transparent) 0%,
    transparent 68%
  );
}
.mreza-boja__sloj--2 {
  background-image: radial-gradient(
    48% 58% at 78% 68%,
    color-mix(in oklab, var(--sjaj) 52%, transparent) 0%,
    transparent 70%
  );
}
.mreza-boja__sloj--3 {
  background-image: radial-gradient(
    38% 46% at 58% 16%,
    color-mix(in oklab, var(--tekst-na-tealu) 22%, transparent) 0%,
    transparent 64%
  );
}
@media (prefers-reduced-motion: no-preference) {
  /* Tri razlicita trajanja, tri razlicite putanje. Da su ista, tri sloja bi
     se ponasala kao jedan i cijeli bi trud bio uzalud. */
  .mreza-boja__sloj--1 { animation: mreza-boja-1 19s ease-in-out infinite alternate; }
  .mreza-boja__sloj--2 { animation: mreza-boja-2 27s ease-in-out infinite alternate; }
  .mreza-boja__sloj--3 { animation: mreza-boja-3 35s ease-in-out infinite alternate; }
}
@keyframes mreza-boja-1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(9%, -6%) scale(1.18); }
}
@keyframes mreza-boja-2 {
  from { transform: translate(0, 0) scale(1.1); }
  to { transform: translate(-11%, 7%) scale(0.94); }
}
@keyframes mreza-boja-3 {
  from { transform: translate(4%, 3%) scale(0.96); }
  to { transform: translate(-6%, -8%) scale(1.14); }
}
/*
 * Sloj 1 — osnovni zastor. Bio je .42/.26 dok je ispod stajala svijetla
 * fotografija izboja; sada je ondje prozirna slika na tamnom polju, pa se
 * spusta na .26/.16 — inace bi zastor pojeo upravo uredaje zbog kojih je
 * slika i dodana. Citljivost teksta i dalje nosi sloj 3 ispod.
 */
.traka-loxone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.26),
    rgba(0, 0, 0, 0.16)
  );
}

/*
 * Sloj 3 — usmjereni zastor koji stiti tekst.
 *
 * Kut je isti kao na heroju (100deg): tekst je lijevo, kartice desno, pa
 * zastor pada preko sirine. Desni kraj nije nula jer i kartice nose tekst —
 * staklo ispod njih dobiva na racun toga jos malo dubine.
 *
 * Lijevi kraj je popusten s .58 na .50 otkako slika komponenata stoji ondje:
 * na .58 se od uredaja iza teksta vidio samo obris. Mjereno na najgorem
 * pikselu (bijelo tipkalo ispod mesha), s tekstom `--tekst-na-tealu`:
 *
 *              .58     .50
 *   kontrast   7.6:1   6.0:1
 *
 * Oboje je iznad AA praga od 4.5:1, pa je razlika cisto na racun toga koliko
 * se pozadine vidi.
 */
.traka-loxone__zastor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.50) 0%,
    rgba(0, 0, 0, 0.46) 34%,
    rgba(0, 0, 0, 0.28) 58%,
    rgba(0, 0, 0, 0.20) 100%
  );
}
/*
 * Dva dijela: tvrdnja lijevo, sest skupina proizvoda desno. Kartice su
 * staklene jer leze na fotografiji — neprozirna ploha bi ovdje izgledala kao
 * zakrpa preko slike, a staklo pusta izboje da se naziru kroz nju.
 */
.traka-loxone__sadrzaj {
  position: relative;
  /* Sloj 4: iznad usmjerenog zastora (3), mesha (2), zastora (1) i slike (0). */
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--p7);
  align-items: center;
}
.traka-loxone__tekst {
  display: grid;
  gap: var(--p4);
  justify-items: start;
  max-width: 46ch;
}
/* Natpis gumba je bijel, ne --hes-na-plohi: na ovom otoku treba fiksnu
   bjelinu bez obzira na temu, ne racunicu koja se mijenja s njom. */
.traka-loxone .gumb--glavni { color: #fff; }

.skupine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--p3);
}
/*
 * Kartica skupine: BIJELA ploha i CRN tekst, u obje teme, tvrdim
 * vrijednostima umjesto tokena.
 *
 * Razlog je isti onaj koji `--tekst-na-tealu` ima nekoliko stotina redaka
 * iznad: otok ostaje taman i u svijetloj temi, pa bi token ovdje pod jednom
 * temom dao pogresnu boju. Ali smjer je obrnut od ostatka otoka — kadrovi
 * proizvoda su snimljeni na bijeloj plohi, pa kartica mora biti ta ista
 * bjelina. Staklo bi kroz sebe pustilo teal i fotografiju ispod, i bijeli bi
 * kadar na njemu izgledao kao izrezan pravokutnik zalijepljen preko.
 *
 * Zato kartice vise NEMAJU `staklo` u markupu: ploha je puna, ne zamucena.
 * Crn tekst na #FFF daje 19.6:1, sto je gornja granica koju kontrast uopce
 * doseze.
 */
.skupina {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--p1);
  padding: var(--p3);
  border-radius: var(--r-kartica);
  text-decoration: none;
  background: #fff;
  color: #0A0908;
  border: 1px solid rgba(10, 9, 8, 0.10);
  box-shadow: 0 2px 10px -4px rgba(10, 9, 8, 0.35);
  overflow: hidden;
  transition:
    transform var(--srednje) var(--krivulja),
    border-color var(--srednje) var(--krivulja);
}
/* `.jedva` je globalno `--tekst-4`, sto je u tamnoj temi #8B857A — na bijeloj
   kartici 2.9:1. Ista uloga, vrijednost iz svijetle palete: 5.2:1. */
.skupina .jedva { color: #6B665D; }
.skupina__slika {
  display: block;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--p2);
  border-radius: var(--r-mali);
  overflow: hidden;
}
.skupina__slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sporo) var(--krivulja);
}

/*
 * Video u kadru skupine. Ponasa se kao slika: isti okvir, isti radijus, isti
 * `object-fit`. Razlika je samo u tome sto se na hover pokrene — vidi
 * pokreniVideoNaHover() u js/interakcije.js.
 *
 * Podloga je bijela, ne crna: dok se prvi kadar ne dekodira, prazan <video>
 * je inace crn pravokutnik nasred bijele kartice.
 */
/* Visinu daje `aspect-ratio` iz `.skupina__slika` (video nosi obje klase), pa
   ovdje NE ide `height: 100%` — postotak visine u gridu bez odredene visine
   roditelja se ne racuna i tukao bi se s omjerom. */
.skupina__video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #fff;
  transition: transform var(--sporo) var(--krivulja);
}
/* Dok svira, kadar se ne uvecava — mjerilo bi reklo da se nesto dogada, a
   ovdje se vec dogada. Uvecanje ostaje samo na mirnom videu, kao na slikama. */
@media (hover: hover) and (pointer: fine) {
  .skupina:hover .skupina__video:not([data-svira]) { transform: scale(1.06); }
}
.skupina__ime {
  font-size: var(--vel-malo);
  font-weight: 600;
  line-height: 1.25;
}

@media (hover: hover) and (pointer: fine) {
  .skupina:hover { transform: var(--pomak-kartice); border-color: var(--hes-rub); }
  .skupina:hover .skupina__slika img { transform: scale(1.06); }
}

@media (max-width: 1023px) {
  .traka-loxone__sadrzaj { grid-template-columns: 1fr; gap: var(--p6); }
  .traka-loxone__tekst { max-width: none; }
  /* Slozeni raspored: tekst vise nije lijevo nego GORE, pa se i zastor
     okrece. Da ostane vodoravan, stitio bi lijevi rub kartica umjesto
     naslova iznad njih. */
  .traka-loxone__zastor {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.50) 0%,
      rgba(0, 0, 0, 0.46) 38%,
      rgba(0, 0, 0, 0.28) 62%,
      rgba(0, 0, 0, 0.20) 100%
    );
  }
}


/* Sjaj iza teksta je uklonjen na zahtjev klijenta — vidi i `.cijena` u
   app.css. Naslovi se sada isticu velicinom i polozajem, ne mrljom iza sebe. */

/* ================================================================== */
/* Najam alata — teaser na naslovnici                                  */
/* ================================================================== */
/*
 * Galerija kategorija. Zamjenjuje cetiri retka s crtama koji su izgledali kao
 * izvadak iz tablice: kategorija alata se bira okom, ne citanjem.
 *
 * Prva kartica je dvostruko sira. Cetiri jednake plocice se citaju kao mreza
 * ikona; jedna veca daje redu vrh i kaze da je ovo ponuda, a ne izbornik.
 */
/*
 * `.najam__mreza` i `.najam__brojka` su obrisani zajedno sa sekcijom "Ponuda"
 * na /najam-alata: ta je stranica svedena na cjenik, a naslovnica taj raspored
 * nikad nije koristila (ondje stoji galerija kategorija).
 */

/*
 * Vodoravno zaglavlje: tvrdnja lijevo, cjenovni panel desno, na istoj crti.
 * Panel je prije stajao ispod uvoda i gurao galeriju za cijelu svoju visinu
 * nize, dok je prostor desno od uvoda stajao prazan.
 */
.najam__vrh {
  display: grid;
  /* Cjenovni panel je uklonjen; zaglavlje sad samo slobodno zauzima red. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--p8);
  align-items: end;
  margin-bottom: var(--p6);
}
.najam__zaglavlje {
  display: grid;
  gap: var(--p3);
  justify-items: start;
  margin-bottom: 0;
}
.najam__panel {
  display: grid;
  gap: var(--p1);
  padding: var(--p5);
  border-radius: var(--r-ploha);
  white-space: nowrap;
}
.cijena--velika { font-size: clamp(22px, 3vw, 30px); }
.najam__panel .marke { margin-top: var(--p2); }

/*
 * Cetiri jednaka uspravna kadra u jednom redu. Fotografija je nosivi
 * element — kategorija alata se bira okom, ne citanjem tablice — a naziv,
 * broj i raspon stoje na staklenoj traci preko nje.
 */
.najam__galerija {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--p3);
}
/*
 * Kadar je 4:5, ne 3:4. Fotografije alata su 3:2 na bijelom i stoje u kadru
 * CIJELE (`contain`) — rezanje bi brusilici odsjeklo rucku, a skeli vrh. U
 * uspravnijem 3:4 kadru bi oko slike ostalo previse prazne plohe.
 */
.alat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  /* Fotografije alata dolaze ujednacene na bijelom (scripts/proizvodi.mjs),
     pa i kartica mora biti bijela — inace se vidi bijeli pravokutnik na
     pjescanom polju. Bijela je ista u obje teme, kao i na karticama
     Loxone skupina; s njom i rub i tekst moraju izaci iz tokena. */
  background: #FFFFFF;
  border-radius: var(--r-kartica);
  border: 1px solid rgba(10, 9, 8, 0.10);
  box-shadow: 0 2px 10px -4px rgba(10, 9, 8, 0.35);
  overflow: hidden;
  text-decoration: none;
  color: #0A0908;
  transition: border-color var(--srednje) var(--krivulja), transform var(--srednje) var(--krivulja);
}
.alat__slika { display: block; width: 100%; height: 100%; }
.alat__slika img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Alat sjedi iznad sredine, da ga staklena traka pri dnu ne presijeca. */
  object-position: center 38%;
  transition: transform var(--sporo) var(--krivulja);
}
/*
 * Zastor pri dnu je UKLONJEN zajedno sa staklom. Oboje je postojalo zbog
 * tamnih tekstura koje su ovdje stajale kao placeholder: staklo je trebalo
 * imati sto zamutiti, zastor mu je davao dubinu. Preko bijele plohe crnina
 * izgleda kao mrlja, a staklo kao zaprljano staklo — traka je sada puna
 * ploha odvojena vlasnom crtom, isto kao kartice Loxone skupina.
 */
/*
 * Ikona kategorije. Cita se prije nego naziv i razlikuje kategorije na jedan
 * pogled, i sada kad su fotografije prave.
 */
.alat__ikona {
  position: absolute;
  z-index: 1;
  top: var(--p3);
  right: var(--p3);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-mali);
  background: color-mix(in oklab, var(--hes) 82%, transparent);
  color: var(--hes-na-plohi);
}
.alat__ikona svg { width: 18px; height: 18px; }
.alat__traka {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: var(--p3) var(--p4);
  background: #FFFFFF;
  border-top: 1px solid rgba(10, 9, 8, 0.10);
}
/* Tekst na bijeloj plohi ne smije ici kroz tokene: u tamnoj temi bi
   `--tekst` bio svijetao i traka bi ostala prazna. Ista odluka i isti
   brojevi kao na `.skupina` iznad. */
.alat__ime { font-size: var(--vel-malo); font-weight: 600; line-height: 1.25; color: #0A0908; }
.alat .jedva { color: #6B665D; }
.alat__traka .cijena { font-size: var(--vel-malo); margin-top: var(--p1); color: #12695A; }

@media (hover: hover) and (pointer: fine) {
  .alat:hover { border-color: var(--hes-rub); transform: var(--pomak-kadra); }
  .alat:hover .alat__slika img { transform: scale(1.06); }
}

.najam__dno { justify-content: center; margin-top: var(--p6); }
.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--p2);
  font-size: var(--vel-malo);
  letter-spacing: 0.06em;
  color: var(--tekst-4);
}
.marke svg { color: var(--hes-tekst); }

@media (max-width: 999px) {
  .najam__vrh { grid-template-columns: 1fr; gap: var(--p5); align-items: start; }
  .najam__panel { justify-self: start; white-space: normal; }
  .najam__galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ================================================================== */
/* Zaposlenje                                                          */
/* ================================================================== */
.jobs { position: relative; overflow: hidden; }
/*
 * Zastor preko fotografije je uklonjen. Prije je stajala na 20 % neprozirnosti
 * i izgledala kao siva mrlja; sada ide gotovo puna, ali MASKIRANA — topi se
 * prema dolje umjesto da je prigusena po cijeloj plohi. Citljivost teksta
 * rjesavaju staklene plohe ispod, lokalno, tamo gdje tekst stvarno stoji.
 */
.jobs__slika { position: absolute; inset: 0 0 auto 0; z-index: 0; opacity: 0.85; }
.jobs__slika img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 46%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 46%, transparent 82%);
}
.jobs > .stupac { position: relative; z-index: 2; }

/*
 * Luk u zelenom pranju. Jedini cisto dekorativan oblik na stranici: stoji iza
 * kartica pozicija i daje sekciji dubinu koju ravno polje nema. Namjerno je
 * ogroman i jedva vidljiv — da se primijeti, citao bi se kao greska.
 */
.jobs__luk {
  position: absolute;
  z-index: 1;
  top: 22%;
  left: 50%;
  width: min(120vw, 1400px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--hes-pranje) 0%, transparent 62%);
  pointer-events: none;
}

.jobs__zaglavlje { justify-items: start; }
/* Natpis gumba "Nazovi" prati temu (`--tekst`). Fiksna bijela koja je ovdje
   stajala bila je u svijetloj temi bijelo na bijelom. */

/*
 * Tri plocice umjesto tri pilule.
 *
 * Pilula je oblik za JEDNU kratku rijec — status, oznaka, filter. Ovdje su
 * nosile tri para "naziv: vrijednost" i sve se stapalo u jedan redak sitnog
 * teksta u ovalu: nije se vidjelo gdje prestaje pitanje a pocinje odgovor.
 * Plocica to razdvaja po visini i svakoj daje vlastiti pokazatelj.
 */
.posao__pokazatelji {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--p3);
  list-style: none;
  margin: var(--p4) 0 0;
  padding: 0;
  width: 100%;
}
.pokazatelj {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--p1) var(--p3);
  padding: var(--p3) var(--p4);
  border-radius: var(--r-kartica);
}
.pokazatelj__ikona {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-mali);
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
}
.pokazatelj__ikona svg { width: 18px; height: 18px; }
.pokazatelj__ime {
  font-size: var(--vel-oznaka);
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
}
.pokazatelj__vrijednost {
  font-size: var(--vel-malo);
  font-weight: 600;
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

.pokazatelj__vrijednost--raspon {
  display: grid;
  gap: var(--p1);
  max-width: 12ch;
}

.pokazatelj__granica {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p3);
}

.pokazatelj__granica-ime {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
}

/* Prijave su trajno otvorene, pa ikona nosi zivu tocku umjesto da ceka svoj
   red u `pokreniZivot()` — jedini pokazatelj na stranici koji javlja STANJE,
   a stanje se ne javlja svakih par sekundi nego stalno. */
.pokazatelj__ikona--zivo {
  position: relative;
  color: var(--na-stanju);
  border-color: color-mix(in oklab, var(--na-stanju) 45%, transparent);
}
.pokazatelj__ikona--zivo::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--na-stanju);
  border: 2px solid var(--ploha-1);
}
@media (prefers-reduced-motion: no-preference) {
  .pokazatelj__ikona--zivo::after { animation: puls-zivota 2.2s ease-in-out infinite; }
}

/*
 * Satnica: jedina traka na stranici koja prikazuje pravu skalu. Raspon
 * 10–15 € lezi na ljestvici 0–20 €, pa se vidi i GDJE pocinje, ne samo koliki
 * je — kandidat odmah zna da donja granica nije pri dnu.
 *
 * Plocica je iste sirine kao druge dvije, ne siroka preko dva stupca:
 * `grid-column: span 2` na trecoj od tri stavke u mrezi koja se sama slozila
 * u tri stupca trazi cetvrti stupac, dobije ga kao implicitni i cijeli red
 * izade iz sirine stranice.
 */
.pokazatelj__traka {
  position: relative;
  grid-column: 2;
  height: 5px;
  margin-top: var(--p2);
  border-radius: var(--r-pilula);
  background: var(--plohica-2);
  overflow: hidden;
}
.pokazatelj__ispuna {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--od, 0%);
  width: calc(var(--do, 100%) - var(--od, 0%));
  border-radius: inherit;
  background-image: var(--gradijent-sjaj);
}
.pokazatelj__skala {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tekst-4);
  font-variant-numeric: tabular-nums;
}
/* Plocice su iste visine, a sadrzaj im je razlicite duljine — bez ovoga bi
   ime i vrijednost u prve dvije lebdjeli po sredini prema trecoj. */
.pokazatelj { align-content: start; }

/*
 * Kartica pozicije. Padding je spusten s `--p5` na `--p4`, redci cinjenica s
 * `--p3` na `--p2`: kartica je prije imala vise praznine nego sadrzaja, a
 * cetiri retka uvjeta i dva naslova ne trebaju 24 px zraka sa svake strane.
 *
 * Duh-broj je uklonjen iz markupa, pa nema ni pravila za njega.
 */
.kartica--pozicija {
  padding: var(--p4);
  gap: var(--p2);
}
/* Zelen potez preko vrha stoji odmah, ne tek na hover kao drugdje. */
.kartica--pozicija::before {
  opacity: 0.75;
}
/* Prozor-traka nadoknadi kartice vlastiti padding negativnom marginom da
   dosegne rub. */
.kartica--pozicija.prozor .prozor__traka {
  margin: calc(-1 * var(--p4)) calc(-1 * var(--p4)) var(--p3);
}
.kartica--pozicija .cinjenice > div { padding: var(--p2) 0; }
.kartica--pozicija .kartica__vrh { margin-bottom: var(--p1); }
.kartica--pozicija .kartica__vrh .oznaka { display: block; margin-bottom: 2px; }

@media (hover: hover) and (pointer: fine) {
  .kartica--pozicija:hover { transform: var(--pomak-kartice); }
  .kartica--pozicija:hover .kartica__ikona {
    background: color-mix(in oklab, var(--hes) 22%, transparent);
  }
}

/* ------------------------------------------------------------------ */
/* Provjera uvjeta                                                     */
/* ------------------------------------------------------------------ */
/*
 * Kartica vec kaze "Provjeri ispunjavas li uvjete." — kvadratici to cine
 * doslovnim. Sve gradi js/interakcije.js; bez njega ovih pravila nema sto
 * uhvatiti i tablica ostaje tablica.
 */
.cinjenice--provjerivo dt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--p2);
}
.uvjet__kvadratic {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--hes);
  cursor: pointer;
}
.uvjet__oznaka { cursor: pointer; }
.uvjet__kvadratic:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}
/* Oznaceni uvjet prelazi iz prigusenog u punu boju teksta: popis se cita kao
   napredak, a ne kao popis s kvadraticima. */
.cinjenice--provjerivo:has(.uvjet__kvadratic:checked) dt { color: var(--tekst-2); }

.provjera__mjerilo {
  margin-top: var(--p2);
  padding-top: var(--p3);
  border-top: 1px solid var(--rub);
}
.provjera__mjerilo[hidden] { display: none; }
/* Sve oznaceno: kartica se javi rubom u naglasku. */
.kartica--spreman { border-color: var(--hes-rub); }
.kartica--spreman .provjera__mjerilo .mjerilo__vrijednost { color: var(--hes-tekst); }

/* Klijentova vlastita recenica, jedan stupanj krupnije od okolnog teksta —
   redak koji najvise uvjeri kandidata koji je mislio da nije kvalificiran. */
.naucit-cemo {
  margin-top: var(--p2);
  font-size: var(--vel-tekst);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tekst);
}

/*
 * Sest stavki ponude. Uze kartice nego prije (150 px umjesto 200) i po jedna
 * ikona iznad naziva: na 200 px su se slagale u dva neujednacena reda, a bez
 * ikone su izgledale kao sest jednakih pravokutnika s tekstom.
 */
.ponuda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--p3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ponuda li {
  display: grid;
  gap: var(--p1);
  align-content: start;
  padding: var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  background: var(--ploha-2);
  box-shadow: var(--odsjaj-kartice);
  transition:
    border-color var(--srednje) var(--krivulja),
    background var(--srednje) var(--krivulja),
    transform var(--srednje) var(--krivulja);
}
.ponuda__ikona {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--p2);
  border-radius: var(--r-mali);
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
}
.ponuda__ikona svg { width: 19px; height: 19px; }
.ponuda__ime { font-weight: 600; font-size: var(--vel-malo); line-height: 1.3; }

@media (hover: hover) and (pointer: fine) {
  .ponuda li:hover {
    border-color: var(--hes-rub);
    background: var(--ploha-3);
    transform: var(--pomak-kartice);
  }
  .ponuda li:hover .ponuda__ikona {
    background: color-mix(in oklab, var(--hes) 22%, transparent);
  }
}

/* Zavrsni poziv: jedini centriran blok u sekciji. */
.jobs__blok { margin-top: var(--p7); }
.jobs__cta {
  justify-items: center;
  text-align: center;
  margin-top: var(--p7);
  margin-bottom: 0;
}
.jobs__cta .akcije { justify-content: center; }

/* ================================================================== */
/* Kontakt                                                             */
/* ================================================================== */
/* Jedino pozicioniranje koje je klijent sam napisao. Bez navodnika i bez
   okvira: tako se cita kao tvrtka koja govori, a ne kao svjedocanstvo. */
.pozicioniranje {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--p9);
  font-size: var(--vel-h2);
  font-weight: 600;
  line-height: var(--red-naslov);
  letter-spacing: var(--razmak-naslov);
  text-align: center;
  text-wrap: balance;
}

.kontakt__mreza {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--p8);
  align-items: start;
}
.kontakt__kanali {
  display: grid;
  gap: var(--p5);
  align-content: start;
}
.kontakt__kanali .zaglavlje-sekcije { margin-bottom: 0; }

/*
 * Oba kanala u jednom prozoru, kao dva retka.
 *
 * Prije su bile dvije zasebne kartice u mrezi 2x1 unutar uzeg stupca. Svaka
 * je dobila oko 200 px, u koje uz ikonu od 42 px stane jedva 14 znakova — pa
 * je e-posta prelamala nasred domene (`word-break: break-word` je to i
 * dopustao), a broj u drugi redak. Puna sirina rjesava oboje, a redak visok
 * 64 px je veca meta za tap nego pola kartice.
 */
.kanali {
  border-radius: var(--r-ploha);
}
.kanal {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--p4);
  min-height: 64px;
  padding: var(--p4) var(--p5);
  text-decoration: none;
  color: var(--tekst);
  transition: background var(--srednje) var(--krivulja);
}
/* Crta izmedu redaka, ne oko svakog: unutar jednog prozora rub po retku bi
   nacrtao dvije kartice unutar trece. */
.kanal + .kanal { border-top: 1px solid var(--rub); }
.kanal__ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-mali);
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
}
.kanal__ikona svg { width: 21px; height: 21px; }
.kanal__tekst {
  display: grid;
  gap: 2px;
  min-width: 0;
  /* Gura strelicu na desni rub retka. */
  margin-right: auto;
}
.kanal__veza {
  font-size: var(--vel-h3);
  font-weight: 600;
  color: var(--tekst);
  /* `break-word` je maknut: u punoj sirini se nema sto lomiti, a lomio je
     e-postu nasred domene. Ako ikad zafali mjesta, lomi se na @ i tockama. */
  overflow-wrap: anywhere;
}
.kanal__strelica {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--tekst-4);
  transition: transform var(--srednje) var(--krivulja), color var(--srednje) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  /* Podize se PLOHA retka, ne cijela kartica: redak unutar prozora koji se
     odmakne od susjeda razbio bi prozor kojem pripada. */
  .kanal:hover { background: var(--plohica); }
  .kanal:hover .kanal__veza { color: var(--hes-tekst); }
  .kanal:hover .kanal__strelica { color: var(--hes-tekst); transform: translateX(4px); }
}
.kanal:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: -3px;
}

@media (max-width: 599px) {
  .kanal { padding: var(--p3) var(--p4); gap: var(--p3); }
  .kanal__veza { font-size: var(--vel-tekst); }
}

/* ------------------------------------------------------------------ */
/* Obrazac upita                                                       */
/* ------------------------------------------------------------------ */
.kontakt__obrazac {
  display: grid;
  gap: var(--p4);
  padding: var(--p6);
  border-radius: var(--r-ploha);
}
.kontakt__obrazac .naslov-3 { margin-bottom: calc(-1 * var(--p2)); }
.kontakt__obrazac.prozor .prozor__traka {
  margin: calc(-1 * var(--p6)) calc(-1 * var(--p6)) var(--p6);
}

.obrazac__vrste {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--p3);
}
.obrazac__vrste legend { padding: 0; margin-bottom: var(--p2); }

/*
 * Sest vrsta kao vidljivi cipovi. Ime je `cip-upita`, a ne `cip`: katalog u
 * trgovina.css vec ima svoj `.cip` za filtre, a webshop i najam ucitavaju oba
 * lista stilova., ne kao padajuci izbornik. Usmjeravanje je
 * cijela svrha bloka, a zatvoren izbornik skriva da tvrtka radi sest
 * razlicitih stvari upravo od posjetitelja koji nije siguran sto mu treba.
 *
 * Stanje nosi `:checked` na skrivenom radiju, pa odabir radi bez ijedne
 * linije JavaScripta i ispravno se ponasa na tipkovnici.
 */
.cipovi-upita { display: flex; flex-wrap: wrap; gap: var(--p2); }

/*
 * Omot cipova. Iznad 600 px ga zapravo nema: gumb je skriven i vidi se samo
 * red cipova kao i prije.
 *
 * Ispod 600 px sest cipova bi zauzelo cetiri retka usred obrasca, pa se
 * skupljaju u padajuci izbornik — ISTI kao u navigaciji (`.izbornik__pod`):
 * ploha s rubom i sjenom, retci umjesto pilula i isti ulaz (prozirnost i
 * pomak od 6 px). Stanje vodi js/interakcije.js (`pokreniVrsteUpita`).
 */
.vrste__naslov { display: none; }

@media (max-width: 599px) {
  .vrste { position: relative; }
  .vrste__naslov {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p3);
    width: 100%;
    min-height: 44px;
    padding: var(--p3) var(--p4);
    border: 1px solid var(--rub);
    border-radius: var(--r-mali);
    background: var(--plohica);
    font-size: var(--vel-malo);
    font-weight: 500;
    color: var(--tekst);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--brzo) var(--krivulja);
  }
  .vrste.je-otvoren .vrste__naslov { border-color: var(--hes-rub); }
  .vrste.je-otvoren .vrste__naslov .chevron { transform: rotate(180deg); opacity: 1; }

  .vrste .cipovi-upita {
    position: absolute;
    top: calc(100% + var(--p2));
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 2px;
    padding: var(--p3);
    background: var(--ploha-1);
    border: 1px solid var(--rub);
    border-radius: var(--r-kartica);
    box-shadow: var(--sjena-plohe);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--brzo) var(--krivulja),
      transform var(--brzo) var(--krivulja),
      visibility var(--brzo);
  }
  .vrste.je-otvoren .cipovi-upita {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Retci kao `.izbornik__pod a`; odabrani nosi kvacicu kao `.sort__opcija`,
     ne ispunu — ovo je stanje, ne gumb. */
  .vrste .cip-upita {
    display: block;
    padding: var(--p3);
    border: 0;
    border-radius: var(--r-mali);
    background: none;
    color: var(--tekst-2);
  }
  .vrste .cip-upita__ulaz:checked + .cip-upita {
    background: none;
    color: var(--hes-tekst);
    font-weight: 600;
  }
  .vrste .cip-upita__ulaz:checked + .cip-upita::after {
    content: "";
    float: right;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
    mask: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  }
}
.cip-upita {
  display: inline-flex;
  align-items: center;
  padding: var(--p2) var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-pilula);
  background: var(--plohica);
  font-size: var(--vel-malo);
  font-weight: 500;
  color: var(--tekst-3);
  cursor: pointer;
  transition:
    background var(--brzo) var(--krivulja),
    border-color var(--brzo) var(--krivulja),
    color var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
.cip-upita__ulaz:checked + .cip-upita {
  background: var(--hes-ploha);
  border-color: var(--hes-ploha);
  color: var(--hes-na-plohi);
  font-weight: 600;
}
/* Fokus mora biti vidljiv iako je sam radio skriven citacu ekrana. */
.cip-upita__ulaz:focus-visible + .cip-upita {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .cip-upita__ulaz:not(:checked) + .cip-upita:hover {
    border-color: var(--hes-rub);
    color: var(--tekst);
    transform: var(--pomak-kontrole);
  }
}

.obrazac__red {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p3);
}
.polje-obrasca { display: grid; gap: var(--p2); margin: 0; }
.polje-obrasca[hidden] { display: none; }
#upit-obrazac { scroll-margin-top: 100px; }
input[type="file"].polje-obrasca__ulaz { min-width: 0; }
input[type="file"].polje-obrasca__ulaz::file-selector-button {
  margin-right: var(--p3);
  padding: var(--p2) var(--p3);
  border: 1px solid var(--rub);
  border-radius: var(--r-mali);
  background: var(--plohica-2);
  color: var(--tekst);
  font: inherit;
  cursor: pointer;
}
.polje-obrasca__oznaka {
  font-size: var(--vel-oznaka);
  font-weight: 500;
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
}
.polje-obrasca__ulaz {
  width: 100%;
  min-height: 44px;
  padding: var(--p3) var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-mali);
  background: var(--plohica);
  color: var(--tekst);
  font-size: var(--vel-malo);
  transition: border-color var(--brzo) var(--krivulja), background var(--brzo) var(--krivulja);
}
.polje-obrasca__ulaz::placeholder { color: var(--tekst-4); }
.polje-obrasca__ulaz:focus {
  outline: none;
  border-color: var(--hes-rub);
  background: var(--plohica-2);
}
.polje-obrasca__ulaz:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 1px;
}
textarea.polje-obrasca__ulaz { resize: vertical; min-height: 108px; }

/*
 * Traka napretka obrasca. Broji tri obavezna polja (vrsta je uvijek odabrana,
 * pa ne ulazi u racun) i puni se dok se popunjavaju. Kad su sva tri gotova,
 * natpis prelazi u "Spremno za slanje" — gumb ispod time dobiva potvrdu prije
 * klika, umjesto poruke o gresci poslije njega.
 */
.obrazac__napredak {
  padding-top: var(--p3);
  border-top: 1px solid var(--rub);
}
.obrazac__napredak[hidden] { display: none; }
.mjerilo--gotovo .mjerilo__vrijednost { color: var(--hes-tekst); }

.obrazac__dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p3) var(--p4);
  margin-top: var(--p2);
}

/*
 * Slanje (js/obrazac.js). Sazetak kosarice stoji iznad polja, stanje
 * slanja iznad gumba — ondje gdje je pogled u trenutku klika.
 */
.obrazac__kosarica {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p2) var(--p4);
  padding: var(--p3) var(--p4);
  border: 1px solid var(--hes-rub);
  border-radius: var(--r-mali);
  background: var(--plohica);
  font-size: var(--vel-malo);
}
.obrazac__kosarica[hidden] { display: none; }

.polje-obrasca__ulaz[aria-invalid="true"] { border-color: var(--opasnost); }
.polje-obrasca__greska { color: var(--opasnost); font-size: 13px; font-weight: 500; }

.obrazac__stanje {
  display: grid;
  gap: var(--p2);
  padding: var(--p3) var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-mali);
  font-size: var(--vel-malo);
}
.obrazac__stanje[hidden] { display: none; }
.obrazac__stanje .gumb { justify-self: start; }
.obrazac__stanje a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.obrazac__stanje--uspjeh { border-color: var(--hes-rub); }
.obrazac__stanje--uspjeh strong { color: var(--hes-tekst); }
.obrazac__stanje--greska { border-color: color-mix(in oklab, var(--opasnost) 55%, transparent); }
.obrazac__stanje--greska strong { color: var(--opasnost); }

.kontakt__obrazac [aria-busy="true"] { cursor: progress; opacity: 0.72; }

/* Zamka za automate: izvan ekrana, ali u dokumentu. */
.obrazac__zamka {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.obrazac__privatnost { margin: 0; }

/* ------------------------------------------------------------------ */
/* Pravni tekst — /privatnost                                          */
/* ------------------------------------------------------------------ */
.pravni-tekst {
  display: grid;
  gap: var(--p4);
  max-width: 70ch;
}
.pravni-tekst h2 { margin-top: var(--p5); }
.pravni-tekst p,
.pravni-tekst li { color: var(--tekst-2); }
.pravni-tekst ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--p2); }
.pravni-tekst a { color: var(--hes-tekst); text-decoration: underline; text-underline-offset: 2px; }
.pravni-tekst .cinjenice dd { font-size: var(--vel-malo); }

/*
 * Podatak koji jos nije dostavljen. Mora upasti u oko: stranica s ovom
 * oznakom ne smije u objavu (npm run provjeri:objava pada).
 */
mark.nedostaje {
  padding: 0 0.25em;
  border-radius: 3px;
  background: color-mix(in oklab, var(--opasnost) 18%, transparent);
  color: var(--tekst);
}

/* ------------------------------------------------------------------ */
/* Galerija radova — /galerija (js/galerija.js)                        */
/* ------------------------------------------------------------------ */
/*
 * Poveznica na galeriju stoji skrivena dok galerija nema fotografija
 * (scripts/galerija.mjs). Sam `hidden` ne bi bio dovoljan: stavke izbornika
 * imaju vlastiti `display`, koji nadjaca pravilo preglednika za [hidden].
 */
[data-galerija-veza][hidden] { display: none !important; }

.radovi__filtri { display: grid; gap: var(--p3); }
.radovi__cipovi { display: flex; flex-wrap: wrap; gap: var(--p2); }
.radovi__cipovi:empty { display: none; }
.radovi__cip {
  display: inline-flex;
  align-items: center;
  gap: var(--p2);
  padding: var(--p2) var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-pilula);
  background: var(--plohica);
  color: var(--tekst-3);
  font: inherit;
  font-size: var(--vel-malo);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--brzo) var(--krivulja), color var(--brzo) var(--krivulja);
}
.radovi__cip span { opacity: 0.75; font-variant-numeric: tabular-nums; }
.radovi__cip[aria-pressed="true"] {
  background: var(--hes-ploha);
  border-color: var(--hes-ploha);
  color: var(--hes-na-plohi);
  font-weight: 600;
}
.radovi__cip:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .radovi__cip[aria-pressed="false"]:hover { border-color: var(--hes-rub); color: var(--tekst); }
}

.radovi-mreza {
  display: grid;
  grid-template-columns: repeat(var(--stupaca, 1), minmax(0, 1fr));
  gap: var(--p3);
  align-items: start;
  margin-top: var(--p4);
}
.radovi-mreza__stupac { display: grid; gap: var(--p3); }
.radovi-mreza__slika {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-kartica);
  background: var(--ploha-2);
  cursor: zoom-in;
}
.radovi-mreza__slika img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--krivulja);
}
.radovi-mreza__slika:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Natpis na tamnom prijelazu preko fotografije — bijelo, neovisno o temi. */
.radovi-mreza__natpis {
  position: absolute;
  inset: auto 0 0;
  padding: var(--p5) var(--p3) var(--p2);
  background: linear-gradient(to top, rgb(0 0 0 / 0.62), transparent);
  color: #fff;
  font-size: 13px;
  text-align: left;
  opacity: 0;
  transition: opacity var(--brzo) var(--krivulja);
}
.radovi-mreza__slika:focus-visible .radovi-mreza__natpis { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .radovi-mreza__slika:hover img { transform: scale(1.03); }
  .radovi-mreza__slika:hover .radovi-mreza__natpis { opacity: 1; }
}
/* Na dodirniku nema hovera, pa natpis stoji uvijek. */
@media (hover: none) {
  .radovi-mreza__natpis { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Svjetlo — fotografija preko cijelog ekrana                          */
/* ------------------------------------------------------------------ */
/* Uvijek tamno, bez obzira na temu: fotografija se gleda na tamnom. */
.svjetlo {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 9 8 / 0.97);
  color: #F4F1EA;
}
.svjetlo::backdrop { background: rgb(0 0 0 / 0.7); }
.svjetlo__okvir {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}
.svjetlo__traka { display: flex; align-items: center; justify-content: space-between; gap: var(--p3); padding: var(--p3) var(--p4); }
.svjetlo__brojac { font-size: var(--vel-malo); font-variant-numeric: tabular-nums; }
.svjetlo__kadar { display: grid; place-items: center; min-height: 0; padding: 0 var(--p8); touch-action: pan-y; }
.svjetlo__kadar picture { display: contents; }
.svjetlo__kadar img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-mali);
  user-select: none;
  -webkit-user-drag: none;
}
.svjetlo__natpis { margin: 0; padding: var(--p3) var(--p4) var(--p5); color: rgb(244 241 234 / 0.82); font-size: var(--vel-malo); text-align: center; }
.svjetlo__zatvori,
.svjetlo__strelica {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.svjetlo__zatvori { width: 44px; height: 44px; border: 0; background: none; }
.svjetlo__strelica {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(0 0 0 / 0.4);
  transform: translateY(-50%);
}
.svjetlo__zatvori svg,
.svjetlo__strelica svg { width: 22px; height: 22px; }
.svjetlo__strelica--natrag { left: var(--p3); }
.svjetlo__strelica--naprijed { right: var(--p3); }
.svjetlo__strelica:disabled { opacity: 0.3; cursor: default; }
.svjetlo__zatvori:focus-visible,
.svjetlo__strelica:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 599px) {
  .svjetlo__kadar { padding: 0; }
  .svjetlo__strelica { top: auto; bottom: var(--p3); transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .svjetlo[open] .svjetlo__kadar img { animation: svjetlo-ulaz 0.22s var(--krivulja); }
}
@media (prefers-reduced-motion: reduce) {
  .radovi__cip,
  .radovi-mreza__slika img,
  .radovi-mreza__natpis { transition: none; }
}
@keyframes svjetlo-ulaz {
  from { opacity: 0; transform: scale(0.985); }
}
.obrazac__privatnost a,
.podnozje__dno a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Telefonska publika dobiva broj bez skrolanja kroz obrazac. */
@media (max-width: 899px) {
  .kontakt__mreza { grid-template-columns: 1fr; gap: var(--p6); }
  .pozicioniranje { margin-bottom: var(--p7); }
}
@media (max-width: 599px) {
  .kontakt__obrazac { padding: var(--p5); }
  .kontakt__obrazac.prozor .prozor__traka {
    margin: calc(-1 * var(--p5)) calc(-1 * var(--p5)) var(--p5);
  }
  .obrazac__red { grid-template-columns: 1fr; }
}


/* ================================================================== */
/* Karuseli na mobitelu                                                */
/* ================================================================== */
/*
 * OVAJ ODJELJAK MORA STAJATI NA KRAJU DATOTEKE.
 *
 * `.skupine` i `.najam__galerija` svoju osnovnu mrezu dobivaju nize u ovoj
 * datoteci nego sto je stajao ovaj blok. Specificnost im je ista (jedna
 * klasa), a medijski upit je ne podize — pa je kod jednake specificnosti
 * odlucivao REDOSLIJED i osnovno pravilo je pobjedivalo. Posljedica se
 * vidjela tocno onako kako zvuci: staza se nije ni pojavila, a sirina
 * zadana za karticu ostala je na karticama u mrezi.
 *
 * Zato je blok ovdje, iza svih osnovnih pravila, i zato ovaj komentar stoji.
 *
 * ---
 *
 * Tri mreze na naslovnici — usluge, Loxone skupine i kategorije najma — u
 * jednom stupcu daju stranicu koja se skrola dvije minute. Vodoravna staza sa
 * `scroll-snap` drzi ih na jednom ekranu, a kartica koja viri desno kaze da
 * ih ima jos, sto okomiti popis ne moze.
 *
 * Bez ijednog reda JS-a i bez strelica: prst je ovdje jedina kontrola koja
 * ima smisla. Isto rjesenje kao `.karusel__staza` na stranici proizvoda.
 *
 * Negativna margina i jednaki padding vrate stazu na SAM rub ekrana, dok prva
 * kartica ostaje poravnata s tekstom iznad. Bez toga kartica koja izlazi
 * izgleda kao da je odrezana rubom sekcije, a ne kao da se nastavlja.
 */
@media (max-width: 719px) {
  .kartice--dvije { grid-template-columns: 1fr; }

  .kartice--tri,
  .skupine,
  .najam__galerija {
    display: flex;
    gap: var(--p3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--p5) * -1);
    padding-inline: var(--p5);
    scroll-padding-inline: var(--p5);
    /* Sjena kartice se inace odrezuje na donjem rubu staze. */
    padding-bottom: var(--p2);
  }
  .kartice--tri::-webkit-scrollbar,
  .skupine::-webkit-scrollbar,
  .najam__galerija::-webkit-scrollbar { display: none; }

  .kartice--tri > *,
  .skupine > *,
  .najam__galerija > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Sirine: usluga jedna po ekranu (kartica ima mjerilo i dva gumba),
     skupine dvije (kadar 3:2 i dva retka teksta), alati nesto uze od jedne. */
  .kartice--tri > .kartica { width: 84%; }
  .skupine > .skupina { width: calc((100% - var(--p3)) / 2); }
  .najam__galerija > .alat { width: 62%; }
}

/* ================================================================== */
/* Svijetla tema - obrada slika                                        */
/* ================================================================== */
:root[data-theme="svijetla"] .hero__slika img {
  filter: brightness(1.08) saturate(0.82) contrast(0.94);
}

:root[data-theme="svijetla"] .hero::after {
  background: linear-gradient(
    100deg,
    rgba(6, 18, 16, 0.72) 0%,
    rgba(6, 18, 16, 0.52) 30%,
    rgba(6, 18, 16, 0.18) 58%,
    rgba(6, 18, 16, 0.08) 78%,
    rgba(6, 18, 16, 0.22) 100%
  );
}

:root[data-theme="svijetla"] .split__medij,
:root[data-theme="svijetla"] .kucne__slika img {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6f2 100%);
  border: 1px solid color-mix(in oklab, var(--hes) 20%, var(--rub));
  box-shadow: 0 10px 22px -20px rgba(38, 34, 26, 0.55);
}

:root[data-theme="svijetla"] .split__slika img,
:root[data-theme="svijetla"] .kucne__slika img {
  filter: brightness(1.06) saturate(0.86) contrast(0.96);
}

:root[data-theme="svijetla"] .traka-loxone__slika {
  opacity: 0.5;
}

:root[data-theme="svijetla"] .traka-loxone__mreza-boja {
  opacity: 0.62;
}

:root[data-theme="svijetla"] .traka-loxone__zastor {
  background: linear-gradient(
    100deg,
    rgba(7, 24, 22, 0.54) 0%,
    rgba(7, 24, 22, 0.48) 34%,
    rgba(7, 24, 22, 0.26) 58%,
    rgba(7, 24, 22, 0.18) 100%
  );
}

:root[data-theme="svijetla"] .skupina,
:root[data-theme="svijetla"] .alat {
  background: #fffefa;
  border-color: color-mix(in oklab, var(--hes) 22%, #d8dfd5);
  box-shadow: 0 2px 8px -6px rgba(38, 34, 26, 0.5);
}

:root[data-theme="svijetla"] .skupina__slika,
:root[data-theme="svijetla"] .alat__slika {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7f3 100%);
}

:root[data-theme="svijetla"] .skupina__slika::after,
:root[data-theme="svijetla"] .alat__slika::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(18, 105, 90, 0.1), inset 0 -42px 58px -52px rgba(18, 105, 90, 0.28);
  pointer-events: none;
}

:root[data-theme="svijetla"] .skupina__slika img,
:root[data-theme="svijetla"] .skupina__video,
:root[data-theme="svijetla"] .alat__slika img {
  filter: contrast(1.04) saturate(1.02);
}

:root[data-theme="svijetla"] .alat__traka {
  background: rgba(255, 254, 250, 0.94);
  border-top-color: color-mix(in oklab, var(--hes) 18%, #d8dfd5);
}

/*
 * Jacina pozadinskih slika u svijetloj temi, po sekciji (app.css, odjeljak
 * 2). Odredena na snimkama: tekst mora ostati citljiv i preko najgusceg
 * dijela slike, a slika se mora vidjeti kao slika, ne kao mrlja.
 */
:root[data-theme="svijetla"] #usluge .tekstura img { --tekstura-svijetla: 0.35; }
:root[data-theme="svijetla"] .opseg .tekstura img { --tekstura-svijetla: 0.45; }
/* techno-bg3 je zutozelen; nakon okretanja se gura prema brendovskom tealu. */
:root[data-theme="svijetla"] #zavrsni-radovi .tekstura img {
  --tekstura-svijetla: 0.55;
  --tekstura-ton: 205deg;
}
/* Val je u donjoj polovici slike. Maska "kut" iz tamne teme ga na papiru
   skriva iza kartica, pa ga ovdje otkriva odozdo. */
:root[data-theme="svijetla"] #najam-alata .tekstura img {
  --tekstura-svijetla: 0.7;
  --tekstura-maska: linear-gradient(180deg, transparent 25%, #000 70%);
}
:root[data-theme="svijetla"] #kontakt .tekstura img { --tekstura-svijetla: 0.4; }

/*
 * Zaposlenje: fotografija na 90 %, bez zastora. Crni dio fotografije okrece
 * se u papir (isto kao `.tekstura--obrni`), pa preko vrha sekcije vise nema
 * sivog gradijenta, a val ostaje tamnoteal linija iza plocica. Maska iz
 * tamne teme ostaje: slika se prema dnu topi u papir, ne u sivo.
 * `multiply` radi jer `.jobs` nije kontekst slaganja.
 */
:root[data-theme="svijetla"] .jobs__slika {
  opacity: 0.9;
  mix-blend-mode: multiply;
}
:root[data-theme="svijetla"] .jobs__slika img {
  filter: invert(1) hue-rotate(180deg);
}