/**
 * app.css — raspored i komponente.
 *
 * Nijedna boja ovdje nije zapisana doslovno; sve dolazi iz tokens.css kroz
 * var(). Zbog toga zamjena teme ne dira ovu datoteku.
 *
 * Redoslijed:
 *   1. temelji            reset, tipografija, fokus
 *   2. ukrasni slojevi    zrno, plava mreza, platno
 *   3. raspored           stupci, polja sekcija, razdjelnice
 *   4. tipografske uloge  oznaka, naslovi, cijena
 *   5. kontrole           gumbi, veze
 *   6. zaglavlje          sticky traka, izbornik, mobilni izbornik
 *   6b. plutajuce plohe   ladica kosarice, dijalog postavki
 *   7. podnozje
 *   8. otkrivanje         pocetna stanja za pokret pri skrolanju
 */

/* ================================================================== */
/* 1. Temelji                                                          */
/* ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /*
   * Sidra moraju sletjeti ispod ljepljivog zaglavlja. Bez ovoga se nadnaslov
   * sekcije sakrije pod traku i svaki klik u izborniku djeluje malo pokvareno
   * — najgore na /najam-alata, gdje se dolazi izvana ravno na sredinu.
   */
  scroll-padding-top: calc(var(--visina-zaglavlja) + var(--p5));
  -webkit-text-size-adjust: 100%;
  /* Vidi `body` nize: stranica nikad ne klizi vodoravno. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ploha-0);
  color: var(--tekst);
  font-family: var(--pismo);
  font-size: var(--vel-tekst);
  font-weight: 400;
  line-height: var(--red-tekst);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*
   * Katalog i tablice imaju svoje vodoravno klizanje; tijelo nikad.
   *
   * `clip`, a ne `hidden`. `hidden` pretvara tijelo u spremnik za skrolanje
   * cim <html> dobije vlastiti overflow — a dobiva ga dok je mobilni izbornik
   * otvoren (zakljucavanje skrolanja nize). Ljepljivo zaglavlje se tada
   * lijepi uz tijelo umjesto uz prozor i skoci na vrh dokumenta. `clip`
   * reze isto, ali spremnik ne stvara. `hidden` ostaje kao zamjena za
   * preglednike koji `clip` ne znaju.
   */
  overflow-x: hidden;
  overflow-x: clip;
}

.js-pokret:not(.stranica-spremna) body {
  overflow: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--red-naslov);
  letter-spacing: var(--razmak-naslov);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* iOS zumira stranicu pri fokusu svakog polja s pismom manjim od 16 px.
   Na dodirnim ekranima polja zato nikad ne idu ispod te mjere. */
@media (max-width: 1023px) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* Fokus se vidi samo kad se stvarno navigira tipkovnicom. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Vidljivo samo citacu ekrana. */
.samo-citac {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Preskoci na sadrzaj — prva stvar u tab redoslijedu. */
.preskoci {
  position: fixed;
  top: var(--p3);
  left: var(--p3);
  z-index: 200;
  padding: var(--p3) var(--p4);
  background: var(--hes-ploha);
  color: var(--hes-na-plohi);
  border-radius: var(--r-mali);
  font-weight: 600;
  transform: translateY(calc(-100% - var(--p5)));
  transition: transform var(--srednje) var(--krivulja);
}
.preskoci:focus {
  transform: translateY(0);
}

/* ================================================================== */
/* 1b. Kostur ucitavanja                                                */
/* ================================================================== */
.kostur-stranice {
  display: none;
}

.js-pokret .kostur-stranice {
  --kostur-baza: color-mix(in oklab, var(--tekst) 8%, var(--ploha-1));
  --kostur-sjaj: color-mix(in oklab, var(--sjaj) 20%, var(--kostur-baza));

  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--p8);
  min-height: 100dvh;
  padding: var(--p5);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--hes) 18%, transparent), transparent 30%),
    linear-gradient(180deg, var(--ploha-0), var(--ploha-1));
  color: var(--tekst);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--sporo) var(--krivulja),
    visibility 0s linear var(--sporo);
}

.stranica-spremna .kostur-stranice {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.kostur-stranice__traka {
  width: min(calc(100% - 2 * var(--p5)), max(var(--najmanja-sirina-zaglavlja), var(--sirina-zaglavlja)));
  max-width: calc(100% - 2 * var(--p4));
  min-height: var(--visina-zaglavlja);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--p4);
}

.kostur-stranice__sadrzaj {
  width: min(calc(100% - 2 * var(--p5)), var(--sirina));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(280px, 0.68fr);
  gap: var(--p7);
  align-items: start;
}

.kostur-stranice__tekst,
.kostur-stranice__ploca,
.kostur-stranice__kartice {
  display: grid;
  gap: var(--p4);
}

.kostur-stranice__kartice {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
  margin-top: var(--p3);
}

[data-kostur-oblik] {
  position: relative;
  overflow: hidden;
  background: var(--kostur-baza);
  border: 1px solid color-mix(in oklab, var(--tekst) 7%, transparent);
  border-radius: var(--r-mali);
}

.kostur-stranice__znak {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.kostur-stranice__nav {
  width: min(34vw, 440px);
  height: 12px;
  margin-inline: auto;
}

.kostur-stranice__alat {
  width: 42px;
  height: 42px;
  border-radius: var(--r-pilula);
  flex: 0 0 auto;
}

.kostur-stranice__linija {
  height: 14px;
  max-width: var(--sirina-teksta);
}

.kostur-stranice__linija--oznaka {
  width: 118px;
  height: 10px;
}

.kostur-stranice__linija--naslov {
  width: min(100%, 720px);
  height: clamp(42px, 7vw, 68px);
  border-radius: var(--r-kartica);
}

.kostur-stranice__linija--kratka {
  width: min(58%, 360px);
}

.kostur-stranice__gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p3);
  margin-top: var(--p2);
}

.kostur-stranice__gumb {
  width: 148px;
  height: 42px;
  border-radius: var(--r-pilula);
}

.kostur-stranice__kadar {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-ploha);
}

.kostur-stranice__kartica {
  min-height: 176px;
  border-radius: var(--r-kartica);
}

@media (prefers-reduced-motion: no-preference) {
  [data-kostur-oblik]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 30%,
      var(--kostur-sjaj) 48%,
      transparent 66%
    );
    transform: translateX(-120%);
    animation: kostur-prolaz 1350ms var(--krivulja) infinite;
  }

  .kostur-stranice__tekst [data-kostur-oblik]::after { animation-delay: 80ms; }
  .kostur-stranice__ploca [data-kostur-oblik]::after { animation-delay: 180ms; }
  .kostur-stranice__kartica:nth-child(2)::after { animation-delay: 120ms; }
  .kostur-stranice__kartica:nth-child(3)::after { animation-delay: 240ms; }
}

@keyframes kostur-prolaz {
  to { transform: translateX(120%); }
}

@media (max-width: 899px) {
  .js-pokret .kostur-stranice {
    gap: var(--p6);
    padding: var(--p4);
  }

  .kostur-stranice__traka,
  .kostur-stranice__sadrzaj {
    width: 100%;
    max-width: none;
  }

  .kostur-stranice__nav {
    width: 36vw;
    margin-left: var(--p2);
  }

  .kostur-stranice__sadrzaj {
    grid-template-columns: 1fr;
    gap: var(--p5);
  }

  .kostur-stranice__kartice {
    grid-template-columns: 1fr;
  }
}

/* Predlosci skeletona prate stvarnu arhitekturu stranica: hero, katalog i
   proizvod. Markup je isti, a data atribut bira koji se oblik crta. */
.kostur-stranice__sadrzaj {
  grid-template-columns: 1fr;
}

.kostur-predlozak {
  display: none;
}

.kostur-stranice[data-kostur-tip="naslovnica"] .kostur-predlozak--naslovnica,
.kostur-stranice[data-kostur-tip="katalog"] .kostur-predlozak--katalog,
.kostur-stranice[data-kostur-tip="najam"] .kostur-predlozak--katalog,
.kostur-stranice[data-kostur-tip="proizvod"] .kostur-predlozak--proizvod {
  display: grid;
}

.kostur-hrpa {
  display: grid;
  gap: var(--p3);
}

.kostur-redak {
  height: 14px;
  width: min(100%, 58ch);
}

.kostur-redak--oznaka {
  width: 120px;
  height: 10px;
}

.kostur-redak--kratak { width: min(46%, 320px); }
.kostur-redak--srednji { width: min(72%, 520px); }

.kostur-naslov {
  width: min(100%, 700px);
  height: clamp(42px, 6.5vw, 74px);
  border-radius: var(--r-kartica);
}

.kostur-gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p3);
  margin-top: var(--p2);
}

.kostur-gumb {
  width: 148px;
  height: 42px;
  border-radius: var(--r-pilula);
}

.kostur-predlozak--naslovnica {
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.78fr);
  gap: var(--p7);
  align-items: end;
  min-height: min(66vh, 610px);
}

.kostur-hero__tekst {
  align-content: end;
  padding-block: var(--p7) var(--p4);
}

.kostur-hero__medij {
  aspect-ratio: 1149 / 1369;
  align-self: stretch;
  border-radius: var(--r-ploha);
}

.kostur-hero__cinjenice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--p3);
  grid-column: 1 / -1;
  padding-top: var(--p4);
  border-top: 1px solid color-mix(in oklab, var(--tekst) 10%, transparent);
}

.kostur-cinjenica {
  display: grid;
  gap: var(--p2);
}

.kostur-cinjenica span:first-child {
  width: 70px;
  height: 9px;
}

.kostur-cinjenica span:last-child {
  width: min(100%, 170px);
  height: 16px;
}

.kostur-predlozak--katalog {
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--p7);
  align-items: start;
}

.kostur-katalog__rail,
.kostur-katalog__sadrzaj {
  display: grid;
  gap: var(--p4);
}

.kostur-katalog__rail {
  position: sticky;
  top: calc(var(--visina-zaglavlja) + var(--p4));
}

.kostur-rail-redak {
  height: 34px;
  border-radius: var(--r-mali);
}

.kostur-katalog__glava {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
  gap: var(--p3) var(--p6);
  align-items: center;
}

.kostur-katalog__glava .kostur-redak--srednji {
  grid-column: 1 / 2;
}

.kostur-pretraga {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  height: 46px;
  border-radius: var(--r-pilula);
}

.kostur-katalog__traka,
.kostur-katalog__cipovi {
  display: flex;
  gap: var(--p2);
  overflow: hidden;
}

.kostur-kat {
  width: 84px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: var(--r-mali) var(--r-mali) 0 0;
}

.kostur-cip {
  width: 104px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-pilula);
}

.kostur-katalog__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--p4);
}

.kostur-kartica-proizvoda {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: color-mix(in oklab, var(--kostur-baza) 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--tekst) 7%, transparent);
  border-radius: var(--r-kartica);
}

.kostur-kartica-proizvoda__slika {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-kartica) var(--r-kartica) 0 0;
}

.kostur-kartica-proizvoda__tijelo {
  display: grid;
  gap: var(--p2);
  padding: var(--p4);
  border-top: 1px solid color-mix(in oklab, var(--tekst) 8%, transparent);
}

.kostur-kartica-proizvoda__akcije {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: var(--p2);
  margin-top: var(--p1);
}

.kostur-kartica-proizvoda__akcije .kostur-gumb,
.kostur-proizvod__akcije .kostur-gumb {
  width: 100%;
}

.kostur-kartica-proizvoda__akcije .kostur-gumb {
  height: 36px;
  border-radius: var(--r-mali);
}

.kostur-stranice[data-kostur-tip="najam"] .kostur-katalog__mreza {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.kostur-stranice[data-kostur-tip="najam"] .kostur-kartica-proizvoda__slika {
  aspect-ratio: 4 / 5;
}

.kostur-predlozak--proizvod {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--p8);
  align-items: start;
}

.kostur-proizvod__galerija,
.kostur-proizvod__podaci {
  display: grid;
  gap: var(--p3);
}

.kostur-proizvod__glavni {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-ploha);
}

.kostur-proizvod__slicice {
  display: flex;
  gap: var(--p2);
  overflow: hidden;
}

.kostur-slicica {
  width: 84px;
  aspect-ratio: 3 / 2;
  flex: 0 0 auto;
  border-radius: var(--r-mali);
}

.kostur-proizvod__cijena {
  width: 154px;
  height: 34px;
  border-radius: var(--r-mali);
}

.kostur-proizvod__akcije {
  display: grid;
  grid-template-columns: 132px minmax(200px, 1fr);
  gap: var(--p3);
  margin-block: var(--p2);
}

.kostur-proizvod__spec {
  display: grid;
  gap: var(--p3);
  margin-top: var(--p3);
  padding: var(--p4);
  border: 1px solid color-mix(in oklab, var(--tekst) 8%, transparent);
  border-radius: var(--r-kartica);
}

@media (prefers-reduced-motion: no-preference) {
  .kostur-kat:nth-child(2)::after,
  .kostur-cip:nth-child(2)::after,
  .kostur-kartica-proizvoda:nth-child(2) [data-kostur-oblik]::after,
  .kostur-slicica:nth-child(2)::after {
    animation-delay: 120ms;
  }

  .kostur-kat:nth-child(3)::after,
  .kostur-cip:nth-child(3)::after,
  .kostur-kartica-proizvoda:nth-child(3) [data-kostur-oblik]::after,
  .kostur-slicica:nth-child(3)::after {
    animation-delay: 240ms;
  }

  .kostur-kartica-proizvoda:nth-child(4) [data-kostur-oblik]::after,
  .kostur-kartica-proizvoda:nth-child(7) [data-kostur-oblik]::after {
    animation-delay: 360ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-kostur-oblik]::after {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .kostur-predlozak--naslovnica,
  .kostur-predlozak--katalog,
  .kostur-predlozak--proizvod {
    grid-template-columns: 1fr;
    gap: var(--p5);
  }

  .kostur-katalog__rail {
    position: static;
    display: flex;
    gap: var(--p2);
    overflow: hidden;
  }

  .kostur-rail-redak {
    width: 112px;
    flex: 0 0 auto;
  }

  .kostur-proizvod__akcije {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 719px) {
  .kostur-stranice__traka {
    min-height: 64px;
  }

  .kostur-stranice__nav {
    display: none;
  }

  .kostur-predlozak--naslovnica {
    min-height: auto;
  }

  .kostur-hero__tekst {
    padding-block: var(--p4) 0;
  }

  .kostur-naslov {
    height: clamp(38px, 14vw, 58px);
  }

  .kostur-hero__medij {
    aspect-ratio: 1 / 1;
    max-height: 44vh;
  }

  .kostur-hero__cinjenice {
    grid-template-columns: 1fr;
  }

  .kostur-katalog__glava {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--p3);
  }

  .kostur-katalog__glava .kostur-redak--srednji {
    display: none;
  }

  .kostur-pretraga {
    grid-column: 1 / 2;
    width: 44px;
    height: 44px;
  }

  .kostur-katalog__cipovi {
    grid-column: 1 / -1;
  }

  .kostur-katalog__mreza {
    grid-template-columns: 1fr;
  }
}

/* ================================================================== */
/* 2. Ukrasni slojevi                                                  */
/* ================================================================== */
/*
 * Platno s valnim poljem stoji fiksno iza svega. Sadrzajni stupac je uzi od
 * prozora, pa polje izlazi van njega s obje strane — to je potez posuden iz
 * ../imi-portfolio-netlify i on nosi najveci dio dojma.
 */
.platno-pozadina {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.platno-pozadina canvas {
  width: 100%;
  height: 100%;
}

/*
 * Zrno. Jedan sloj za cijelu stranicu, nikad po sekciji — hes-style.md §5.
 * U svijetloj temi je `--zrno` nula, pa sloj postoji ali se ne vidi:
 * jeftinije nego gasiti ga selektorom po temi.
 */
.ljuska::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--zrno);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)'/%3E%3C/svg%3E");
}

/*
 * Tekstura sekcije.
 *
 * Sve ove slike su svjetlo na crnom, pa se ne stavljaju kao obicna pozadina
 * nego kroz `mix-blend-mode: screen`: crnina tada posve nestane i ostanu samo
 * svijetle niti. Zato preko sadrzaja nema nikakve plohe koja bi mijenjala boju
 * — tekstura se doda svjetlom umjesto da se preklopi bojom.
 *
 * U svijetloj temi se gase. Isti razlog kao za zrno (`--zrno: 0`): sjaj na
 * crnom je efekt tamne sobe, a na papiru izgleda kao prljavstina. Gdje je
 * tekstura potrebna i na svijetlom, postoji parna slika (`--svijetla`).
 */
.tekstura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.tekstura picture {
  display: block;
  width: 100%;
  height: 100%;
}
.tekstura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--tekstura-jacina, 0.5);
  mix-blend-mode: screen;
  /* Uvijek maskirana: tvrd rub teksture odmah oda da je slika zalijepljena. */
  -webkit-mask-image: var(--tekstura-maska, linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent));
  mask-image: var(--tekstura-maska, linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent));
}
/* Sadrzaj sekcije mora ostati iznad teksture.
   `:not(.tekstura)` je bitan: sekcija s parom slika ima dvije teksture
   jednu do druge, i bez njega bi druga (svijetla) dobila `position:
   relative`, ispala iz pozadine i stala u tok stranice kao prazan blok
   visok cijelu sliku — iznad sadrzaja sekcije. */
.tekstura ~ :not(.tekstura) { position: relative; z-index: 1; }

.tekstura--tiha img { opacity: 0.28; }
.tekstura--jaka img { opacity: 0.7; }
.tekstura--kut img {
  --tekstura-maska: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 68%);
}
.tekstura--dno img {
  --tekstura-maska: linear-gradient(180deg, transparent, #000 65%);
}

:root[data-theme="svijetla"] .tekstura--tamna { display: none; }
:root:not([data-theme="svijetla"]) .tekstura--svijetla { display: none; }

/*
 * Svijetla tema: ista kompozicija kao tamna, ali na papiru.
 *
 * Svaka sekcija zadrzava sliku, masku i polozaj iz tamne teme. Slike koje su
 * svjetlost na crnom (valovi, cestice, tamni circuitboard, fotografija
 * plocice) nose `.tekstura--obrni`: u svijetloj temi CSS ih okrece u tamne
 * teal linije na svijetlom — `invert` okrene svjetlinu, `hue-rotate(180deg)`
 * vrati ton — pa ista datoteka sluzi objema temama. Gdje postoji prava
 * svijetla parnjakinja (`.tekstura--svijetla`), koristi se ona.
 *
 * `multiply` polaze linije na papir, a svijetla podloga slike nestaje. Da bi
 * mijesanje uopce vidjelo plohu sekcije, tekstura ne smije biti vlastiti
 * kontekst slaganja — zato `z-index: auto`. Sadrzaj ionako stoji iznad nje
 * (`.tekstura ~ :not(.tekstura)`).
 *
 * Nema tamnih zastora ni sivih gradijenata. Jacinu po sekciji odreduje
 * `--tekstura-svijetla` (sekcije.css, kraj datoteke), mjerena tako da tekst
 * ostane citljiv i preko najgusceg dijela slike. Jedna jacina za sve (90 %)
 * probana je i odbacena: gusti valovi su prelazili preko teksta.
 */
:root[data-theme="svijetla"] .tekstura { z-index: auto; }
:root[data-theme="svijetla"] .tekstura img {
  mix-blend-mode: multiply;
  opacity: var(--tekstura-svijetla, 0.4);
}
:root[data-theme="svijetla"] .tekstura--obrni { display: block; }
:root[data-theme="svijetla"] .tekstura--obrni img {
  filter: invert(1) hue-rotate(var(--tekstura-ton, 180deg));
}

/*
 * Paralaksa: slika dobiva visak visine da translateY iz js/pokret.js
 * (pokreniParalaksu) nikad ne otkrije rub. Sam pomak je inline stil koji
 * postavlja JS; ovdje samo pripremamo prostor za njega.
 *
 * Rezerva je 22 % gore i dolje. Raspon pomaka je podignut na 72 px (prije 24,
 * na cemu se efekt naprosto nije vidio), a uz njega ide i `scale`, pa 15 %
 * koliko je ovdje stajalo prije vise nije dovoljno ni na niskim sekcijama.
 */
.tekstura--paralaksa img {
  position: relative;
  top: -22%;
  height: 144%;
  will-change: transform;
}

/*
 * Mreza tragova. Odjek circuit-bg.png, u vise mjerila, uvijek s maskom da
 * nema tvrdog ruba. Postavlja se na polje, ne globalno.
 */
.mreza {
  position: relative;
  isolation: isolate;
}
.mreza::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--linija-mreze) 1px, transparent 1px),
    linear-gradient(90deg, var(--linija-mreze) 1px, transparent 1px);
  background-size: var(--korak-mreze, 96px) var(--korak-mreze, 96px);
  background-position: center top;
  -webkit-mask-image: var(--maska-mreze, linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent));
  mask-image: var(--maska-mreze, linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent));
}
.mreza {
  --linija-mreze: color-mix(in oklab, var(--hes) 16%, transparent);
}
.mreza--gusta { --korak-mreze: 36px; }
.mreza--srednja { --korak-mreze: 64px; }
.mreza--zrak {
  --maska-mreze: radial-gradient(88% 88% at 50% 22%, #000 18%, transparent 76%);
}

/* ================================================================== */
/* 3. Raspored                                                         */
/* ================================================================== */
.ljuska {
  position: relative;
  z-index: 2;
}

.stupac {
  width: min(100% - 2 * var(--p5), var(--sirina));
  margin-inline: auto;
}
.stupac--uzak {
  width: min(100% - 2 * var(--p5), var(--sirina-uska));
  margin-inline: auto;
}
.stupac--tekst {
  max-width: var(--sirina-teksta);
}

/*
 * Polja sekcija. Izmjena pozadine je glavni razmak na stranici — ono je to
 * sto deset sekcija cini da se citaju kao deset stvari, bez ijedne crte
 * razdjelnice. hes-content.md §0.3.
 */
.polje {
  position: relative;
  padding-block: var(--p9);
  background: var(--ploha-0);
}
.polje--podignuto { background: var(--ploha-1); }
.polje--zbijeno { padding-block: var(--p7); }
.polje--prostrano { padding-block: var(--p10); }

/*
 * Tealno polje ostaje tamno u obje teme, pa mora ponijeti i svoj tekst.
 * Bez ovih redova bi u svijetloj temi tekst pao na gotovo crno i nestao.
 *
 * PLOHE se moraju prenijeti iz istog razloga iz kojeg i tekst, a to je dugo
 * nedostajalo: `.staklo` gradi svoju poluprozirnu plohu iz `--ploha-2`. Kako
 * je polje tekst prebacilo na gotovo bijeli `--tekst-na-tealu`, a `--ploha-2`
 * je u svijetloj temi ostajao #FAF8F3, staklene kartice skupina na Loxone
 * otoku su u svijetloj temi bile bijeli tekst na gotovo bijelom staklu —
 * izmjereno 1.6:1. Tealne plohe to vracaju na 5.7:1 u OBJE teme.
 *
 * `--tekst-4` je iz istog razloga podignut na punu vrijednost: 72 % alfe na
 * fotografiji ispod stakla daje 3.1:1, sto za natpis od 14 px nije dovoljno.
 * `--tekst-3` je ionako vec bio pun, pa ovo uklanja i nedosljednost.
 */
.polje--teal {
  background: var(--ploha-teal);
  color: var(--tekst-na-tealu);
  --tekst: var(--tekst-na-tealu);
  --tekst-2: var(--tekst-2-na-tealu);
  --tekst-3: var(--tekst-2-na-tealu);
  --tekst-4: var(--tekst-2-na-tealu);
  --hes-tekst: var(--hes-na-tealu);
  --ploha-2: #163544;
  --ploha-3: var(--ploha-teal);
  --rub: color-mix(in oklab, var(--tekst-na-tealu) 18%, transparent);
  --rub-jaci: color-mix(in oklab, var(--tekst-na-tealu) 30%, transparent);
}
.polje--dubina {
  background-image: var(--gradijent-dubina);
  color: var(--tekst-na-tealu);
}

/*
 * Otok. Polje koje se povlaci od rubova prozora i dobiva zaobljene kutove,
 * pa se cita kao ploha polozena NA stranicu a ne kao jos jedna vodoravna
 * traka. Stoji na Loxone pojasu i nigdje drugdje — da stoji na svakoj drugoj
 * sekciji, ritam punih polja bi nestao i s njim razlog zasto ovo iskace.
 *
 * `isolation` je nuzan: sekcija ima apsolutno pozicioniranu pozadinsku sliku,
 * a bez vlastitog konteksta slaganja bi `overflow: hidden` na zaobljenom
 * roditelju u nekim preglednicima propustio kut slike preko radijusa.
 */
/* Nosac otoka: nastavlja polje susjednih sekcija u razmaku oko otoka. */
.otok-nosac {
  background: var(--ploha-1);
}

.polje--otok {
  width: 96%;
  margin-inline: auto;
  border-radius: clamp(20px, 2.2vw, 34px);
  overflow: hidden;
  isolation: isolate;
}

/*
 * Kosa razdjelnica je UKLONJENA na zahtjev klijenta. Stajala je iznad
 * zaposlenja i kontakta; razmak koji je nosila sada nose obicna polja
 * (`--p9`), a promjenu publike i dalje oznacava izmjena pozadine.
 */

/*
 * Vizualna razdjelnica.
 *
 * Stoji na cetiri mjesta na naslovnici, i svaki put iz istog razloga: ondje
 * gdje se pozadina NE mijenja, pa granicu nema sto drugo oznaciti. To su
 * heroj/podrucja rada, Loxone/najam alata, te obje strane kucnih
 * elektroinstalacija — one dijele podignuto polje sa zavrsnim radovima iznad
 * i s otokom ispod. Da stoji izmedu svake dvije sekcije, prestala bi bilo sto
 * znaciti i stranica bi se procitala kao niz odvojenih letaka.
 *
 * Ploha se navodi klasom jer razdjelnica lezi IZMEDU sekcija i mora nastaviti
 * boju polja koje slijedi — inace se u njezinoj visini vidi treca boja.
 */
.razdjelnica {
  display: flex;
  align-items: center;
  gap: var(--p4);
  width: min(100% - 2 * var(--p5), var(--sirina));
  margin-inline: auto;
  padding-block: var(--p5);
}
.razdjelnica__crta {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rub-jaci));
}
.razdjelnica__crta:last-child {
  background: linear-gradient(90deg, var(--rub-jaci), transparent);
}
.razdjelnica__znak {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hes-pranje);
  border: 1px solid var(--hes-rub);
  color: var(--hes-tekst);
}
.razdjelnica__znak svg { width: 20px; height: 20px; }

/* Nosac nosi boju polja; razdjelnica sama je providna. */
.razdjelnica-polje { background: var(--ploha-0); }
.razdjelnica-polje--podignuto { background: var(--ploha-1); }

/*
 * Sekcija iza razdjelnice skracuje svoj gornji razmak. Bez ovoga se zbroje
 * puni razmak sekcije i visina razdjelnice, pa izmedu heroja i prve kartice
 * ostane preko 250 px praznine i granica se procita kao rupa u prijelomu.
 *
 * Otok nosi svoj razmak u sekciji unutar nosaca, pa mu se skracuje ondje.
 */
.razdjelnica-polje + .polje { padding-top: var(--p6); }
.razdjelnica-polje + .otok-nosac > .polje { padding-top: var(--p6); }

.hairline {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--rub);
}

/* ================================================================== */
/* 4. Tipografske uloge                                                */
/* ================================================================== */
/*
 * Jedan glas, dva registra: isti rez nosi i naslove i natpise, a razliku
 * rade velicina, tezina i razmak medu slovima — ne drugo pismo.
 *
 * `.monr` je ostala od vremena kad je drugi rez (Monr) stajao na brojevima i
 * cijenama. Pismo je maknuto (vidi tokens.css), ali klasa se zadrzala jer je
 * na svih ~40 mjesta gdje stoji zapravo trazila JEDNU stvar — da se znamenke
 * ne pomicu: cijene u tablici, brojaci kolicine, rasponi. To sada radi
 * `tabular-nums`, bez ijedne izmjene u markupu.
 */
.oznaka {
  font-size: var(--vel-oznaka);
  font-weight: 500;
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
  margin: 0;
}
.oznaka--naglasak { color: var(--hes-tekst); }
.monr { font-variant-numeric: tabular-nums; }

.naslov-hero {
  font-size: var(--vel-hero);
  line-height: var(--red-hero);
  letter-spacing: var(--razmak-hero);
  font-weight: 600;
}
.naslov-2 { font-size: var(--vel-h2); }
.naslov-3 { font-size: var(--vel-h3); }

.uvod {
  font-size: var(--vel-uvod);
  line-height: 1.55;
  color: var(--tekst-2);
}
.tiho { color: var(--tekst-3); }
.jedva { color: var(--tekst-4); font-size: var(--vel-malo); }

/*
 * Cijena. Ista velicina i tezina svugdje.
 *
 * Zamuceni sjaj iza brojke je UKLONJEN na zahtjev klijenta (isto kao
 * `.sjaj-iza` u sekcije.css). Isticanje sada nosi samo tipografija: krupnije,
 * tezina 600 i tabularne znamenke. Klasa `.cijena--istaknuta` vise ne postoji
 * — ako se negdje vrati, nista ne radi.
 */
.cijena {
  display: inline-block;
  font-size: var(--vel-cijena);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cijena__osnova {
  font-size: var(--vel-malo);
  font-weight: 400;
  color: var(--tekst-3);
}

/* ================================================================== */
/* 5. Kontrole                                                         */
/* ================================================================== */
.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p2);
  padding: var(--p3) var(--p5);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-mali);
  background: none;
  font-size: var(--vel-malo);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--srednje) var(--krivulja),
    border-color var(--srednje) var(--krivulja),
    color var(--srednje) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}

.gumb--glavni {
  background: var(--hes-ploha);
  color: var(--hes-na-plohi);
  box-shadow: var(--sjena-gumba);
}
.gumb--sporedni {
  border-color: var(--rub-jaci);
  color: var(--tekst);
}
.gumb--tihi {
  color: var(--tekst-3);
  padding-inline: var(--p3);
}

/* Podizanje samo tamo gdje postoji pravi pokazivac — na dodir bi ostalo
   zaglavljeno u hover stanju nakon tapa. */
@media (hover: hover) and (pointer: fine) {
  .gumb--glavni:hover { background: color-mix(in oklab, var(--hes-ploha) 88%, #fff); }
  .gumb--sporedni:hover { border-color: var(--hes-rub); color: var(--hes-tekst); }
  .gumb--tihi:hover { color: var(--tekst); }
  .gumb:hover { transform: var(--pomak-kontrole); }
}
.gumb:active { transform: scale(0.98); }

/* Oznaka vanjske poveznice: cetiri stavke izbornika skrolaju, dvije vode na
   drugu stranicu. Bez razlike se izbornik cita kao nepredvidiv. */
.van::after {
  content: "";
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.15em;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6 2h8v8h-2V5.4L4.4 13 3 11.6 10.6 4H6z'/%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 16 16'%3E%3Cpath fill='%23000' d='M6 2h8v8h-2V5.4L4.4 13 3 11.6 10.6 4H6z'/%3E%3C/svg%3E");
  display: inline-block;
  vertical-align: baseline;
}

/*
 * Stakleni sloj.
 *
 * Zamucena poluprozirna ploha umjesto neprozirne kartice. Stoji na plohama
 * koje LEZE na necemu — suzeno zaglavlje, biracu jezika, kartici preko
 * fotografije, panelu s cijenom, obrascu — jer im zamucenje daje dubinu koju
 * ravna ploha nema.
 *
 * Dvije stvari koje se lako promase:
 *  - `backdrop-filter` je skup i ne postoji svugdje, pa `@supports` vraca
 *    neprozirnu plohu umjesto da ploha ostane providna i tekst nestane;
 *  - ploha mora imati `position` razlicit od `static` i vlastiti kontekst
 *    slaganja, inace zamucenje ne uhvati ono sto je iza njega.
 */
.staklo {
  position: relative;
  isolation: isolate;
  background: color-mix(in oklab, var(--ploha-2) 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--rub);
  box-shadow: var(--odsjaj-kartice);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .staklo { background: var(--ploha-2); }
}

/*
 * Prosirenje.
 *
 * `<details>` umjesto rucnog JS-a za sadrzaj koji se moze sazeti: naslov
 * je `<summary>`, strelica se okrece na `[open]`. Zadano OTVOREN gdje god se
 * koristi — sazimanje je ovdje uredenje prostora, ne skrivanje sadrzaja koji
 * kupac mora vidjeti bez klika.
 */
.prosirenje {
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  padding: var(--p4);
}
.prosirenje__naslov {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p3);
  cursor: pointer;
  list-style: none;
}
.prosirenje__naslov::-webkit-details-marker { display: none; }
.prosirenje__naslov::marker { content: ""; }
.prosirenje__naslov .naslov-3 { margin: 0; }
.prosirenje__strelica {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--tekst-3);
  transition: transform var(--srednje) var(--krivulja);
}
.prosirenje[open] .prosirenje__strelica { transform: rotate(180deg); }
.prosirenje__sadrzaj { margin-top: var(--p3); }

/*
 * "macOS" prozor.
 *
 * Traka s tri tocke gore, u tonovima stranice (ne crvena/zuta/zelena) — samo
 * dozom prepoznatljivog okvira, ne doslovnom imitacijom sustava.
 */
/*
 * .prozor__traka namjerno NE nosi negativnu marginu ovdje: roditelji na
 * kojima se koristi (kartica, obrazac) imaju razlicit padding, pa svaki
 * mora sam poravnati traku s vlastitim rubom (vidi sekcije.css).
 */
.prozor { overflow: hidden; }
.prozor__traka {
  /* `position` i `overflow` nose `.zivo--crta` (odjeljak 8): potez svjetla je
     apsolutno pozicioniran unutar trake i ne smije izaci iz nje. */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--p3) var(--p4);
  background: var(--ploha-3);
  border-bottom: 1px solid var(--rub);
}
.prozor__tocka {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hes-rub);
}
.prozor__tocka:nth-child(2) { background: color-mix(in oklab, var(--hes) 55%, var(--hes-rub)); }
.prozor__tocka:nth-child(3) { background: var(--hes-tekst); }
.prozor__naslov {
  margin-left: var(--p2);
  font-size: var(--vel-oznaka);
  font-weight: 500;
  color: var(--tekst-3);
}

/*
 * Traka napretka skrolanja. `js/pokret.js` (pokreniSkrolTraku) postavlja
 * sirinu ispune izravno iz postotka skrolane stranice — nije prijelaz nego
 * ocitanje stanja, pa nije vezano na prefers-reduced-motion (isto kao sto
 * ni sam scrollbar nije).
 */
.skrol-traka {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 101;
  pointer-events: none;
}
.skrol-traka__ispuna {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--hes-ploha);
}

/*
 * Obrisi drzava su uklonjeni sa stranice zajedno sa spriteom na dnu
 * index.html — na 18–32 px su bili siva mrlja uz naziv, a naziv je ionako
 * nosio cijelo prepoznavanje.
 */

.pilula {
  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: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-3);
}
.pilula--stanje {
  color: var(--na-stanju);
  border-color: color-mix(in oklab, var(--na-stanju) 40%, transparent);
  background: color-mix(in oklab, var(--na-stanju) 10%, transparent);
}
.pilula--stanje::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* `puls-zivota` je ostao bez `.pilula--zivo`: jedina pilula koja ga je nosila
   ("Prijave: stalno otvorene") zamijenjena je plocicom pokazatelja, i puls je
   presao na `.pokazatelj__ikona--zivo` u sekcije.css. Keyframe zato ostaje,
   klasa ne. */
@keyframes puls-zivota {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.35); }
}

/* ================================================================== */
/* 5b. Mjerilo — indikator traka                                       */
/* ================================================================== */
/*
 * Redak specifikacije s trakom umjesto gole vrijednosti: naziv lijevo, traka
 * u sredini, vrijednost desno.
 *
 * Traka NE prikazuje postotak necega mjerljivog — nema takvih podataka na
 * stranici i izmisljati ih bi bilo laganje. Ona radi isto sto i duljina retka
 * u tablici: daje oku mjeru koju moze usporediti izmedu redaka, pa se tri
 * cinjenice procitaju kao specifikacija a ne kao tri recenice. Jedina traka
 * na stranici koja nosi PRAVU skalu je satnica u zaposlenju, i ona zato ima
 * vlastitu komponentu (`.pokazatelj__traka` u sekcije.css) s pocetkom i
 * krajem raspona, a ne ovu.
 *
 * VAZNO — `--ispuna` se u markupu pise na `.mjerilo`, NIKAD na
 * `.mjerilo__ispuna`. Inline stil nadjacava svako pravilo iz stylesheeta, pa
 * bi zapisan na samoj ispuni zakljucao vrijednost i `:hover` je vise ne bi
 * mogao promijeniti. S roditelja se nasljeduje, a nasljedivanje gubi od bilo
 * koje deklaracije na samom elementu — sto je tocno ono sto hover treba.
 * Iz JS-a se pise izravno na ispunu, jer ondje hover ne sudjeluje.
 *
 * Sirina ide kroz `transform: scaleX` a ne `width`: scaleX se odvija na
 * kompozitoru, sto na sest traka odjednom nije svejedno.
 */
.mjerilo {
  display: grid;
  grid-template-columns: auto minmax(48px, 1fr) auto;
  align-items: center;
  gap: var(--p3);
  margin: 0;
  font-size: var(--vel-oznaka);
}
.mjerilo__ime {
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
}
.mjerilo__traka {
  position: relative;
  height: 4px;
  border-radius: var(--r-pilula);
  background: var(--plohica-2);
  overflow: hidden;
}
.mjerilo__ispuna {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--gradijent-sjaj);
  transform-origin: left center;
  transform: scaleX(var(--ispuna, 0));
  transition: transform var(--sporo) var(--krivulja);
}
.mjerilo__vrijednost {
  display: inline-flex;
  align-items: center;
  gap: var(--p2);
  font-size: var(--vel-malo);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tekst-2);
  font-variant-numeric: tabular-nums;
}

/* Nositelj naglaska: ista traka, ali na tisoj podlozi i s punom bojom teksta.
   Stoji tamo gdje mjerilo nosi glavnu tvrdnju bloka, ne pratecu cinjenicu. */
.mjerilo--jak .mjerilo__vrijednost { color: var(--tekst); }
.mjerilo--jak .mjerilo__traka { background: var(--plohica); }

/*
 * U uskom stupcu (kartica usluge) naziv, traka i vrijednost ne stanu u isti
 * redak, pa traka pada u drugi red preko cijele sirine.
 *
 * PAZI na redoslijed u markupu: ova varijanta ide `ime, vrijednost, traka`, a
 * osnovna `ime, traka, vrijednost` — jer u obje redoslijed citanja mora biti
 * jednak redoslijedu na ekranu. Polozaji su svejedno navedeni izricito, da
 * premjestanje jednog spana ne razmjesti cijeli redak.
 */
.mjerilo--slozeno {
  grid-template-columns: 1fr auto;
  gap: var(--p2) var(--p3);
}
.mjerilo--slozeno .mjerilo__ime { grid-area: 1 / 1; }
.mjerilo--slozeno .mjerilo__vrijednost { grid-area: 1 / 2; }
.mjerilo--slozeno .mjerilo__traka { grid-area: 2 / 1 / 3 / -1; }

/* ================================================================== */
/* 6. Zaglavlje                                                        */
/* ================================================================== */
/*
 * Traka je neprozirna, ne staklena. Poluprozirna traka propusta sadrzaj koji
 * klizi ispod nje, pa se cini da tekst curi kroz navigaciju; zamucenje to
 * omeksa ali ne makne. Na stranici s 59 redaka tablice to bi se vidjelo
 * cijelo vrijeme.
 */
.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--visina-zaglavlja);
  background: var(--ploha-0);
  border-bottom: 1px solid var(--rub);
  transition:
    height var(--srednje) var(--krivulja),
    background var(--srednje) var(--krivulja),
    border-color var(--srednje) var(--krivulja);
}
/*
 * Tri zone: znak lijevo, poveznice u sredini, alati desno.
 *
 * Mreza `1fr auto 1fr` je ovdje bitna, a ne flex s `margin: auto`: samo ona
 * drzi izbornik u STVARNOJ sredini trake. S flexom bi se sredina pomicala kad
 * god se promijeni sirina znaka ili broj alata desno — a to se dogada na
 * svakoj od tri stranice i pri svakoj promjeni jezika.
 */
.zaglavlje__sadrzaj {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--p5);
  height: 100%;
  width: min(100% - 2 * var(--p5), max(var(--sirina-zaglavlja), var(--najmanja-sirina-zaglavlja)));
  transition: width var(--srednje) var(--krivulja);
}
.zaglavlje__sadrzaj > .znak { justify-self: start; }
.zaglavlje__sadrzaj > .izbornik { justify-self: center; }
.zaglavlje__sadrzaj > .alati-zaglavlja { justify-self: end; }

/*
 * Suzeno stanje. `js/zaglavlje.js` dodaje klasu pri skrolanju prema dolje i
 * skida je pri skrolanju prema gore.
 *
 * Traka se u tom stanju smanjuje i suzava, a neprozirna ploha ustupa mjesto
 * staklenoj: dok se skrola, sadrzaj koji promice ispod zamucenja pokaze da
 * traka lezi NA stranici. Na vrhu stranice se vraca neprozirna, jer tamo
 * ispod nje nema niceg sto bi zamucenje imalo pokazati.
 *
 * VAZNO: `--visina-zaglavlja` se ne mijenja. O njemu ovise `scroll-padding-top`,
 * ljepljiva slika u splitu i vrh mobilnog izbornika; kad bi pratio suzenu
 * traku, sidra bi slijetala prekratko cim se traka prosiri natrag.
 */
.zaglavlje--zbijeno {
  height: 58px;
  background: color-mix(in oklab, var(--ploha-0) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 0 var(--rub), var(--sjena-plohe);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .zaglavlje--zbijeno { background: var(--ploha-0); }
}
/* Suzeno stanje ide na 78 %: suzavanje se vidi, ali se traka ne trza. Prije je
   stajalo na 68 %, sto je na sirokom ekranu bio skok od preko 200 px. */
.zaglavlje--zbijeno .zaglavlje__sadrzaj {
  width: min(100% - 2 * var(--p5), max(78%, var(--najmanja-sirina-zaglavlja)));
}
.zaglavlje--zbijeno .znak img { height: 30px; }

/* Bez pokreta traka ne treperi: klasa se i dalje dodaje, ali bez prijelaza. */
@media (prefers-reduced-motion: reduce) {
  .zaglavlje,
  .zaglavlje__sadrzaj,
  .znak img { transition: none; }
}

.znak {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
/* Samo znak, bez natpisa: natpis se u traci od 64 px ionako nije mogao
   procitati, a kvadratni znak podnosi vecu mjeru. */
.znak img {
  height: 34px;
  width: auto;
  /*
   * `max-width: none` ponistava globalno pravilo iz odjeljka 1. Bez njega se
   * znak u uskoj traci ne suzi nego SPLJOSTI: visina ostaje 34 px, a sirinu
   * odrezuje stupac mreze, pa logo izgleda razvucen po vodoravnoj osi. Vidi
   * se samo na mobitelu, gdje alati desno pojedu polovicu trake.
   */
  max-width: none;
  transition:
    height var(--srednje) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .znak:hover img { transform: var(--pop-ikone); }
}
/* Logo u boji radi na obje teme; bijeli samo na tamnoj. */
.znak__tamni { display: none; }
:root[data-theme="svijetla"] .znak__svijetli { display: none; }
:root[data-theme="svijetla"] .znak__tamni { display: block; }

.izbornik {
  display: flex;
  align-items: center;
  gap: var(--p1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.izbornik__veza {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: var(--p2) var(--p3);
  border-radius: var(--r-mali);
  font-size: var(--vel-malo);
  font-weight: 500;
  color: var(--tekst-2);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--brzo) var(--krivulja),
    background var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .izbornik__veza:hover {
    color: var(--tekst);
    background: var(--plohica);
    transform: var(--pomak-kontrole);
  }
}
/* Aktivna stavka dolazi od scroll-spyja; podcrta je 2px poteza naglaska. */
.izbornik__veza[aria-current] {
  color: var(--tekst);
  background: var(--plohica);
}
.izbornik__veza[aria-current]::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--p3);
  right: var(--p3);
  height: 2px;
  background: var(--hes-tekst);
  border-radius: 2px;
}
.izbornik__stavka { position: relative; }

/* Strelica prema dolje uz "Usluge" — jedina stavka koja se otvara. Okrene se
   kad se padajuci dio pokaze, pa je stanje vidljivo i bez pomicanja misa. */
.chevron {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform var(--srednje) var(--krivulja), opacity var(--brzo) var(--krivulja);
}
.izbornik__stavka:hover > .izbornik__veza .chevron,
.izbornik__stavka:focus-within > .izbornik__veza .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Padajuci dio "Usluge". Otvara se na hover i na fokus — bez fokusa je
   nedostupan tipkovnicom, sto je najcesci propust ovog obrasca. */
/*
 * Padajuci dio je centriran ISPOD svoje stavke, ne poravnat uz njezin lijevi
 * rub. Otkad izbornik stoji u sredini trake, stavke su i lijevo i desno od
 * sredista; poravnanje ulijevo bi kod desnih stavki izletjelo iz prozora.
 */
.izbornik__pod {
  position: absolute;
  top: calc(100% + var(--p2));
  left: 50%;
  min-width: 260px;
  max-width: min(92vw, 560px);
  padding: var(--p3);
  background: var(--ploha-1);
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  box-shadow: var(--sjena-plohe);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja),
    visibility var(--brzo);
}
.izbornik__stavka:hover > .izbornik__pod,
.izbornik__stavka:focus-within > .izbornik__pod {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.izbornik__pod .oznaka { padding: var(--p2) var(--p3) var(--p3); }

/*
 * Jedanaest Loxone skupina u jednom stupcu bi bio popis visok kao pola
 * prozora. U dva stupca stane u jedan pogled, a naslov i "cijeli katalog"
 * drze punu sirinu kako bi red ostao citljiv kao okvir popisa.
 */
.izbornik__pod--dvostupacni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--p2);
  min-width: 460px;
}
.izbornik__pod--dvostupacni .izbornik__pod-naslov,
.izbornik__pod--dvostupacni .izbornik__pod-sve { grid-column: 1 / -1; }

/* Zadnji redak vodi na cijeli popis; odvojen crtom da se ne cita kao jos
   jedna kategorija. */
.izbornik__pod-sve {
  margin-top: var(--p2);
  padding-top: var(--p2);
  border-top: 1px solid var(--rub);
}
.izbornik__pod-sve a { color: var(--hes-tekst); font-weight: 600; }
.izbornik__pod a {
  display: block;
  padding: var(--p2) var(--p3);
  border-radius: var(--r-mali);
  font-size: var(--vel-malo);
  color: var(--tekst-2);
  text-decoration: none;
  transition:
    background var(--brzo) var(--krivulja),
    color var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .izbornik__pod a:hover {
    background: var(--plohica);
    color: var(--tekst);
    transform: var(--pomak-retka);
  }
}

.alati-zaglavlja {
  display: flex;
  align-items: center;
  gap: var(--p2);
  flex-shrink: 0;
}

.ikona-gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rub);
  border-radius: var(--r-mali);
  background: none;
  color: var(--tekst-2);
  cursor: pointer;
  transition:
    border-color var(--brzo) var(--krivulja),
    color var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .ikona-gumb:hover {
    border-color: var(--hes-rub);
    color: var(--hes-tekst);
    transform: var(--pomak-kontrole);
  }
}
.ikona-gumb:active { transform: scale(0.92); }
.ikona-gumb svg { width: 17px; height: 17px; }

/* Sunce i mjesec se krizno prelijevaju; gumb pokazuje temu u koju vodi. */
.tema-gumb { position: relative; }
.tema-gumb svg {
  position: absolute;
  transition: opacity var(--srednje) var(--krivulja), transform var(--sporo) var(--krivulja);
}
.tema-gumb .ikona-sunce { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.tema-gumb .ikona-mjesec { opacity: 1; transform: rotate(0) scale(1); }
.tema-gumb[data-vodi-u="tamna"] .ikona-sunce { opacity: 1; transform: rotate(0) scale(1); }
.tema-gumb[data-vodi-u="tamna"] .ikona-mjesec { opacity: 0; transform: rotate(90deg) scale(0.4); }

.kosarica-gumb { position: relative; }
.kosarica-brojac {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pilula);
  background: var(--hes-ploha);
  color: var(--hes-na-plohi);
  font-family: var(--pismo-oznaka);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kosarica-brojac[hidden] { display: none; }

/*
 * Birac jezika — segmentirani prekidac.
 *
 * Tri stavke ostaju prave veze na svoju jezicnu inacicu: bez JS-a, bez
 * bljeska pri prebacivanju i s ispravnim ponasanjem srednjeg klika. Ono sto
 * je novo je ploha: staklo umjesto praznog okvira, i aktivna stavka kao pun
 * jezicak umjesto obojanog teksta, pa se odabrani jezik vidi perifernim
 * pogledom a ne tek kad se procita.
 */
.jezici {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pilula);
}
.jezici a {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding-inline: var(--p2);
  border-radius: var(--r-pilula);
  font-family: var(--pismo-oznaka);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-4);
  text-decoration: none;
  transition:
    color var(--brzo) var(--krivulja),
    background var(--brzo) var(--krivulja),
    box-shadow var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
.jezici a[aria-current] {
  background: var(--hes-ploha);
  color: var(--hes-na-plohi);
  font-weight: 600;
  box-shadow: var(--sjena-gumba);
}
@media (hover: hover) and (pointer: fine) {
  .jezici a:not([aria-current]):hover {
    color: var(--tekst);
    background: var(--plohica-2);
    transform: var(--pomak-kontrole);
  }
}

.otvori-izbornik,
.postavke-gumb { display: none; }

/*
 * Uska desktop traka, 1024-1279 px.
 *
 * S izbornikom u sredini traka mora stati u tri zone: znak, pet stavki i
 * alati. Pri 1024 px to je oko 30 px preusko i zadnja stavka izleti pod
 * alate. Stisnjeni razmaci i uze stavke vrate oko 40 px, sto je dovoljno; za
 * to je bolje nego skrivati stavke ili spustati izbornik u mobilni ranije.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .zaglavlje__sadrzaj { gap: var(--p3); }
  .izbornik__veza { padding-inline: var(--p2); }
  .alati-zaglavlja { gap: var(--p1); }
}

/* --- mobilno zaglavlje ------------------------------------------------ */
@media (max-width: 1023px) {
  .izbornik { display: none; }
  .otvori-izbornik,
  .postavke-gumb { display: inline-flex; }

  /*
   * Tema i jezik se sele u dijalog postavki. U traci ostaju tri mete —
   * kosarica, postavke, izbornik — i znak lijevo. Sa svih pet kontrola je
   * stupac znaka na 360 px padao ispod njegove vlastite sirine.
   */
  .alati-zaglavlja .jezici,
  .alati-zaglavlja .tema-gumb { display: none; }

  /* Bez izbornika u sredini mreza `1fr auto 1fr` dijeli traku na pola i
     znaku daje tocno onoliko koliko mu alati ostave. `auto 1fr` mu daje
     njegovu sirinu, a alatima sve ostalo. */
  .zaglavlje__sadrzaj { grid-template-columns: auto 1fr; }
  /* Suzavanje je potez za misa i dugi skrol; na mobitelu bi traka poskakivala
     pri svakom trzaju prsta, pa ondje stoji mirno. */
  .zaglavlje--zbijeno { height: var(--visina-zaglavlja); }
  .zaglavlje--zbijeno .zaglavlje__sadrzaj { width: min(100% - 2 * var(--p5), var(--sirina)); }
  .zaglavlje--zbijeno .znak img { height: 34px; }
}

.mobilni-izbornik {
  position: fixed;
  inset: var(--visina-zaglavlja) 0 auto 0;
  z-index: 99;
  max-height: calc(100dvh - var(--visina-zaglavlja));
  overflow-y: auto;
  padding: var(--p3) 0 var(--p5);
  background: var(--ploha-1);
  border-bottom: 1px solid var(--rub);
  box-shadow: var(--sjena-plohe);
}
.mobilni-izbornik[hidden] { display: none; }
.mobilni-izbornik a {
  display: flex;
  align-items: center;
  gap: var(--p2);
  padding: var(--p4) var(--p5);
  font-size: 16px;
  color: var(--tekst-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rub);
  transition: color var(--brzo) var(--krivulja), transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .mobilni-izbornik a:hover { color: var(--tekst); transform: var(--pomak-retka); }
}
.mobilni-izbornik .oznaka { padding: var(--p4) var(--p5) var(--p2); }

/*
 * Skupine u mobilnom izborniku.
 *
 * Isti padajuci dio kao na desktopu (`.izbornik__pod`), samo ugraden u
 * izbornik umjesto da pluta: ploha s rubom i zaobljenim kutovima, retci s
 * istim razmakom i isti ulaz — prozirnost i pomak od 6 px. Visina se otvara
 * preko `grid-template-rows`, pa sadrzaj ispod klizne umjesto da skoci.
 *
 * Redak ima DVIJE mete: naziv vodi na stranicu (Loxone -> /webshop), a
 * strelica desno otvara popis. Zato "Cijeli katalog" i "Cijeli cjenik" vise
 * ne stoje u popisu — do njih vodi sam naziv skupine. Stanje vodi
 * js/main.js (`pokreniMobilniIzbornik`).
 */
.mob-skupina { border-bottom: 1px solid var(--rub); }
.mob-skupina__red {
  display: flex;
  align-items: stretch;
}
.mobilni-izbornik .mob-skupina__veza {
  flex: 1;
  border-bottom: 0;
}
.mob-skupina__strelica {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  border: 0;
  border-left: 1px solid var(--rub);
  background: none;
  color: var(--tekst-3);
  cursor: pointer;
}
.mob-skupina__strelica .chevron { width: 18px; height: 18px; }
.mob-skupina.je-otvorena .mob-skupina__veza { color: var(--hes-tekst); }
.mob-skupina.je-otvorena .mob-skupina__strelica .chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.mob-pod {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--srednje) var(--krivulja);
}
.mob-skupina.je-otvorena .mob-pod { grid-template-rows: 1fr; }
/* Okvir reze sadrzaj dok redak raste; plohu nosi popis u njemu. Da je
   padding na samom retku mreze, `0fr` ga ne bi mogao stisnuti do nule. */
.mob-pod__okvir { min-height: 0; overflow: hidden; }

.mob-pod__popis {
  margin: 0 var(--p4) var(--p4);
  padding: var(--p3);
  list-style: none;
  background: var(--ploha-2);
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja),
    visibility var(--brzo);
}
.mob-skupina.je-otvorena .mob-pod__popis {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Jedanaest Loxone skupina u dva stupca, kao `--dvostupacni` na desktopu. */
.mob-pod__popis--dvostupacni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--p2);
}
.mob-pod__popis--dvostupacni .mob-pod__naslov { grid-column: 1 / -1; }
@media (max-width: 359px) {
  .mob-pod__popis--dvostupacni { grid-template-columns: 1fr; }
}
.mobilni-izbornik .mob-pod__naslov .oznaka { padding: var(--p2) var(--p3) var(--p3); }
/* Retci kao `.izbornik__pod a`, samo visi: 44 px je prst, 36 px je mis. */
.mobilni-izbornik .mob-pod__popis a {
  display: block;
  padding: var(--p3);
  border-bottom: 0;
  border-radius: var(--r-mali);
  font-size: 15px;
  color: var(--tekst-2);
}
@media (hover: hover) and (pointer: fine) {
  .mobilni-izbornik .mob-pod__popis a:hover {
    background: var(--plohica);
    color: var(--tekst);
  }
}

/*
 * Kontakt i telefon stoje u istom retku. Dvije kratke mete jedna do druge
 * citaju se kao par, a izbornik time gubi jedan redak visine.
 */
.mob-red {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mob-red a { justify-content: center; }
.mob-red a + a { border-left: 1px solid var(--rub); }

.zastor {
  position: fixed;
  inset: var(--visina-zaglavlja) 0 0 0;
  z-index: 98;
  background: color-mix(in oklab, #000 30%, transparent);
  backdrop-filter: blur(3px);
}
.zastor[hidden] { display: none; }

/* Zakljucaj skrolanje bez JS-a dok je bilo sto modalno otvoreno. */
html:has(.mobilni-izbornik:not([hidden])),
html:has(dialog[open]) {
  overflow: hidden;
}

/* ================================================================== */
/* 6b. Plutajuce plohe — kosarica                                      */
/* ================================================================== */
/*
 * Ladica kosarice stoji OVDJE, a ne u trgovina.css, iz jednog razloga:
 * kosarica postoji na svakoj stranici (js/main.js je uvijek ucitava), a
 * trgovina.css se ucitava samo na webshopu, najmu i stranicama proizvoda.
 * Dok su ova pravila stajala ondje, ladica se na naslovnici otvarala kao
 * goli <dialog> — centrirana kutija s dvopikselnim rubom.
 */
.ladica {
  width: min(440px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--rub);
  background: var(--ploha-1);
  color: var(--tekst);
  box-shadow: var(--sjena-plohe);
}
.ladica::backdrop {
  background: color-mix(in oklab, #000 45%, transparent);
  backdrop-filter: blur(3px);
}
/* Dva retka, tijelo klizi: gumb "Zatrazite ponudu" na dnu tijela mora biti
   dohvatljiv i kad je kosarica duga. */
.ladica[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ladica__vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p3);
  padding: var(--p4) var(--p5);
  border-bottom: 1px solid var(--rub);
}
.ladica__tijelo { overflow-y: auto; padding: var(--p5); display: grid; gap: var(--p6); align-content: start; }

.ladica__skupina { display: grid; gap: var(--p3); }
.ladica__zaglavlje { display: flex; align-items: baseline; justify-content: space-between; gap: var(--p3); }
.ladica__popis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--p3); }

.ladica__stavka {
  display: grid;
  gap: var(--p2);
  padding: var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-kartica);
  background: var(--ploha-2);
}

/*
 * Stavka sa slicicom: slika lijevo, podaci desno.
 *
 * Stavke bez slike (najam alata — ondje nema nijedne fotografije) zadrzavaju
 * stari jednostupacni raspored umjesto da dobiju prazan kvadrat, pa se dvije
 * skupine u kosarici i dalje citaju kao dvije stvari.
 */
.ladica__stavka--sa-slikom {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--p3);
  align-items: start;
}
.ladica__podaci { display: grid; gap: var(--p2); min-width: 0; }

/*
 * Slicica je BIJELA u obje teme, iz istog razloga iz kojeg i kartica u mrezi:
 * fotografije su isporucene na bijeloj pozadini. Na tamnoj plohi bi svaka
 * stavka kosarice bila bijeli kvadrat u tamnom okviru.
 */
.ladica__slika {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rub);
  border-radius: var(--r-mali);
  background: #FFFFFF;
}
.ladica__slika img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ladica__glava { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--p3); }
.ladica__ime { font-weight: 500; font-size: var(--vel-malo); }
.ladica__red { display: flex; align-items: center; gap: var(--p3); flex-wrap: wrap; }
.ladica__red .cijena { margin-left: auto; }
.ladica__dana { white-space: nowrap; }

/*
 * Gumb razdoblja u stavci najma. Otvara js/kalendar.js; zamijenio je dva
 * polja datuma, koja nisu znala zasiviti dane vec zauzete u bazi.
 */
.ladica__razdoblje {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--p2) var(--p3);
  border: 1px solid var(--rub);
  border-radius: var(--r-mali);
  background: var(--ploha-0);
  color: var(--tekst);
  font: inherit;
  font-size: var(--vel-malo);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--brzo) var(--krivulja);
}
.ladica__razdoblje:hover { border-color: var(--hes-rub); }
.ladica__razdoblje:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.ladica__razdoblje--sukob { border-color: var(--opasnost); }

/* ------------------------------------------------------------------ */
/* Kalendar najma (js/kalendar.js)                                     */
/* ------------------------------------------------------------------ */
.kalendar {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--rub);
  border-radius: var(--r-ploha);
  background: var(--ploha-1);
  color: var(--tekst);
  overflow: auto;
}
.kalendar::backdrop { background: rgb(0 0 0 / 0.5); }
.kalendar__tijelo { display: grid; gap: var(--p4); padding: var(--p5); }
.kalendar__glava { display: flex; align-items: center; justify-content: space-between; gap: var(--p3); }
.kalendar__uputa { margin: 0; font-size: var(--vel-malo); color: var(--tekst-3); text-align: center; }
.kalendar__mjeseci {
  display: grid;
  grid-template-columns: repeat(var(--broj-mjeseci, 1), minmax(0, 1fr));
  gap: var(--p5);
}
.kalendar__mjesec { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalendar__mjesec caption { padding-bottom: var(--p2); font-weight: 600; text-align: left; }
.kalendar__mjesec caption::first-letter { text-transform: uppercase; }
.kalendar__mjesec th { padding-bottom: var(--p1); font-size: var(--vel-oznaka); font-weight: 500; color: var(--tekst-4); }
.kalendar__mjesec td { padding: 1px; }
.kalendar__dan {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: var(--r-mali);
  background: none;
  color: var(--tekst);
  font: inherit;
  font-size: var(--vel-malo);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .kalendar__dan:not([aria-disabled="true"]):hover { background: var(--plohica-2); }
}
.kalendar__dan:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--fokus); outline-offset: 1px; }
.kalendar__dan[aria-disabled="true"] { color: var(--tekst-4); cursor: not-allowed; }
/* Zauzet dan: pruge i precrtan broj — razlika koja se vidi i bez boje. */
.kalendar__dan--zauzet {
  background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklab, var(--opasnost) 26%, transparent) 4px 6px);
  text-decoration: line-through;
}
.kalendar__dan--u-rasponu { border-radius: 0; background: color-mix(in oklab, var(--hes) 22%, transparent); }
.kalendar__dan--rub { background: var(--hes-ploha); color: var(--hes-na-plohi); font-weight: 600; text-decoration: none; }
.kalendar__dan--danas:not(.kalendar__dan--rub) { box-shadow: inset 0 0 0 1px var(--hes-rub); }
.kalendar__dno { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--p2) var(--p4); }
.kalendar__sazetak { margin: 0; min-height: 1.5em; font-size: var(--vel-malo); }
.kalendar__legenda { margin: 0; display: flex; align-items: center; gap: var(--p2); font-size: var(--vel-oznaka); color: var(--tekst-3); }
.kalendar__uzorak {
  width: 14px;
  height: 14px;
  border: 1px solid var(--rub);
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in oklab, var(--opasnost) 40%, transparent) 3px 5px);
}
.kalendar__gumbi { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--p2); }
@media (max-width: 639px) {
  .kalendar__tijelo { padding: var(--p4); }
  .kalendar__dno { grid-template-columns: 1fr; }
  .kalendar__gumbi .gumb { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ladica__razdoblje { transition: none; }
}

/* Popis vec rezerviranih razdoblja na stranici alata. */
.zauzetost { margin: var(--p2) 0 0; }

.brojac {
  display: inline-flex;
  align-items: center;
  gap: var(--p1);
  border: 1px solid var(--rub);
  border-radius: var(--r-pilula);
  padding: 2px;
}
.brojac button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tekst-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--brzo) var(--krivulja), color var(--brzo) var(--krivulja), transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  .brojac button:hover {
    background: var(--plohica);
    color: var(--tekst);
    transform: var(--pop-ikone);
  }
}
.brojac span { min-width: 22px; text-align: center; font-size: var(--vel-malo); font-variant-numeric: tabular-nums; }

.ladica__zbroj {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p3);
  padding-top: var(--p3);
  border-top: 1px solid var(--rub);
}
.ladica__ograda { font-size: 13px; }
.ladica__upozorenje { color: var(--opasnost); font-size: 13px; font-weight: 500; }
.ladica__dno { display: grid; gap: var(--p2); }
.ladica__dno .gumb { width: 100%; }
.ladica__dno .gumb[disabled] { opacity: 0.45; cursor: default; }
.ladica__prazno { display: grid; gap: var(--p3); justify-items: start; }

.ikona-gumb--sitni { width: 28px; height: 28px; border: 0; }
.ikona-gumb--sitni svg { width: 14px; height: 14px; }

/* Prazno stanje popisa — dijele ga katalog i ladica. */
.prazno {
  display: grid;
  gap: var(--p4);
  justify-items: start;
  padding: var(--p8) var(--p5);
  border: 1px dashed var(--rub-jaci);
  border-radius: var(--r-ploha);
}


/* --- prozor na mobitelu ------------------------------------------------ */
/*
 * Ispod 1024 px kosarica prestaje biti bocna ploca. Puna visina ekrana s
 * rubom slijeva ondje izgleda kao stranica koja se ucitala preko stranice;
 * prozor nasred ekrana s trakom od tri tocke kaze da je privremen i da se
 * zatvara. Isti okvir nosi i dijalog postavki, pa se to dvoje ne cita kao
 * dvije razlicite vrste sadrzaja.
 */
.ladica > .prozor__traka { display: none; }

@media (max-width: 1023px) {
  .ladica {
    width: min(440px, calc(100% - 2 * var(--p4)));
    height: auto;
    max-height: 86dvh;
    margin: auto;
    border: 1px solid var(--rub);
    border-radius: var(--r-ploha);
  }
  .ladica > .prozor__traka { display: flex; }
  .ladica[open] { grid-template-rows: auto auto minmax(0, 1fr); }
  /* Naslov "Kosarica" bi uz traku s natpisom kosarica.hes bio isti podatak
     dvaput; ostaje gumb za zatvaranje, poravnat udesno. */
  .ladica__vrh h2 { font-size: var(--vel-tekst); }
}

/* --- dijalog postavki --------------------------------------------------- */
/*
 * Postoji samo na mobitelu. Iznad 1024 px tema i jezik stoje u traci, pa se
 * dijalog ne otvara — gumb koji ga otvara ondje nije ni iscrtan.
 */
.postavke {
  width: min(360px, calc(100% - 2 * var(--p4)));
  max-width: 100%;
  margin: auto;
  padding: 0;
  border: 1px solid var(--rub);
  border-radius: var(--r-ploha);
  background: var(--ploha-1);
  color: var(--tekst);
  box-shadow: var(--sjena-plohe);
}
.postavke::backdrop {
  background: color-mix(in oklab, #000 45%, transparent);
  backdrop-filter: blur(3px);
}
.postavke[open] { display: block; }
.postavke__tijelo {
  display: grid;
  gap: var(--p3);
  padding: var(--p5);
}
.postavke__red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p4);
  min-height: 44px;
}
.postavke__red + .postavke__red {
  padding-top: var(--p3);
  border-top: 1px solid var(--rub);
}
/* Traka prozora nosi i gumb za zatvaranje: gura se skroz udesno, jer tri
   tocke i natpis stoje slijeva. */
.prozor__zatvori { margin-left: auto; }

/* ================================================================== */
/* 7. Podnozje                                                         */
/* ================================================================== */
.podnozje {
  position: relative;
  padding-block: var(--p8) var(--p6);
  background: var(--ploha-1);
  border-top: 1px solid var(--rub);
}

/*
 * Pilula "Ovlasteni partneri firme Loxone" je uklonjena iz podnozja svih triju
 * stranica. Ista tvrdnja stoji kao NASLOV Loxone otoka na naslovnici, gdje je
 * nosi puna sekcija; u podnozju je bila treci put da se izgovori.
 */

/*
 * Tri stupca, centrirana. Cetvrti (Adresa) je maknut na zahtjev klijenta, a s
 * njim i `auto-fit`: tri stupca rastegnuta na punu sirinu ostavljaju rupu
 * nasred podnozja, pa stupci sada nose svoju sirinu i stoje u sredini.
 */
.podnozje__stupci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: center;
  gap: var(--p6) var(--p9);
  text-align: center;
}
.podnozje__stupci h3 {
  font-size: var(--vel-oznaka);
  font-weight: 500;
  letter-spacing: var(--razmak-oznaka);
  text-transform: uppercase;
  color: var(--tekst-4);
  margin-bottom: var(--p3);
}
.podnozje__stupci ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--p2);
}
.podnozje__stupci a {
  display: inline-block;
  font-size: var(--vel-malo);
  color: var(--tekst-2);
  text-decoration: none;
  transition: color var(--brzo) var(--krivulja), transform var(--brzo) var(--krivulja);
}
@media (hover: hover) and (pointer: fine) {
  /* `inline-block` je nuzan: `transform` na inline elementu ne radi nista. */
  .podnozje__stupci a:hover { color: var(--hes-tekst); transform: var(--pomak-retka); }
}

.podnozje__dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p4);
  margin-top: var(--p7);
  padding-top: var(--p5);
  border-top: 1px solid var(--rub);
  font-size: var(--vel-malo);
  color: var(--tekst-4);
}

/*
 * Na mjestu jezicne trake sada stoji povratak na vrh. Na stranici od preko
 * deset sekcija to je jedina kontrola koja u podnozju ima sto raditi —
 * jezicna traka je ista ona koja stoji u zaglavlju, dva metra iznad.
 */
.na-vrh {
  display: inline-flex;
  align-items: center;
  gap: var(--p2);
  margin-left: auto;
  padding: var(--p2) var(--p4);
  border: 1px solid var(--rub);
  border-radius: var(--r-pilula);
  background: var(--plohica);
  font-size: var(--vel-malo);
  color: var(--tekst-2);
  cursor: pointer;
  transition:
    color var(--brzo) var(--krivulja),
    border-color var(--brzo) var(--krivulja),
    transform var(--brzo) var(--krivulja);
}
.na-vrh svg { width: 16px; height: 16px; }
.na-vrh:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .na-vrh:hover {
    color: var(--hes-tekst);
    border-color: var(--hes-rub);
    transform: var(--pomak-kontrole);
  }
}

/*
 * Mobilno podnozje. Tri stupca jedan ispod drugoga davala su preko 600 px
 * praznog hoda prije kraja stranice. Popisi ovdje leze VODORAVNO i lome se u
 * dva-tri retka, pa podnozje stane u pola ekrana umjesto u cijeli.
 */
@media (max-width: 719px) {
  .podnozje { padding-block: var(--p6) var(--p5); }
  .podnozje__stupci {
    grid-template-columns: 1fr;
    gap: var(--p5);
  }
  .podnozje__stupci ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--p2) var(--p4);
  }
  .podnozje__stupci h3 { margin-bottom: var(--p2); }
  .podnozje__dno {
    justify-content: center;
    margin-top: var(--p5);
    padding-top: var(--p4);
  }
  .podnozje__dno .na-vrh { margin-left: 0; }
}

/* ================================================================== */
/* 8. Ambijentalni pokret                                              */
/* ================================================================== */
/*
 * Sitne animacije koje se okidaju U RAZMACIMA, ne u trajnim petljama.
 *
 * Razlika nije kozmeticka. Dvadesetak elemenata s `animation: ... infinite`
 * drzi isto toliko slojeva za slaganje do kraja posjeta i cita se kao sum —
 * oko prestane primjecivati pokret koji nikad ne prestaje. `pokreniZivot()` u
 * js/pokret.js umjesto toga svakih ~2.6 s doda klasu JEDNOM vidljivom
 * elementu i skine je kad animacija zavrsi. Stranica time dobije puls, a ne
 * treperenje.
 *
 * Klase se dodaju iz JS-a, pa bez njega ovdje nista ne postoji — isti razlog
 * i isti obrazac kao kod otkrivanja pri skrolanju (odjeljak 9).
 */
@media (prefers-reduced-motion: no-preference) {
  /* Ikona u plocici: obrub i pozadina bljesnu u naglasku pa se vrate. */
  .zivo--iskra {
    animation: zivo-iskra 1100ms var(--krivulja) both;
  }
  /* Plocica se jedva rasiri i vrati — disanje, ne skok. */
  .zivo--titraj {
    animation: zivo-titraj 1400ms var(--krivulja) both;
  }
  /* Potez svjetla prijede preko elementa slijeva nadesno. */
  .zivo--crta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
      100deg,
      transparent 35%,
      color-mix(in oklab, var(--sjaj) 26%, transparent) 50%,
      transparent 65%
    );
    background-size: 300% 100%;
    animation: zivo-crta 1200ms var(--krivulja) both;
  }
}

@keyframes zivo-iskra {
  0% { border-color: var(--hes-rub); }
  35% {
    border-color: var(--sjaj);
    background: color-mix(in oklab, var(--sjaj) 20%, transparent);
    color: var(--sjaj);
  }
  100% { border-color: var(--hes-rub); }
}
@keyframes zivo-titraj {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}
@keyframes zivo-crta {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

/* Tri tocke u traci prozora: kad `.zivo--crta` stoji na traci, tocke se
   redom upale. Kasnjenja su vezana na polozaj, pa se cita kao slijed. */
@media (prefers-reduced-motion: no-preference) {
  .zivo--crta .prozor__tocka { animation: zivo-tocka 900ms var(--krivulja) both; }
  .zivo--crta .prozor__tocka:nth-child(2) { animation-delay: 90ms; }
  .zivo--crta .prozor__tocka:nth-child(3) { animation-delay: 180ms; }
}
@keyframes zivo-tocka {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.5); }
}

/* ================================================================== */
/* 9. Otkrivanje pri skrolanju                                         */
/* ================================================================== */
/*
 * Pocetna stanja postavlja JS (js/pokret.js), ne ovaj CSS. Razlog: ako se
 * `opacity: 0` napise ovdje, a JS se ne ucita ili korisnik ima ugasen pokret,
 * sadrzaj ostane trajno nevidljiv. Ovako je bez JS-a sve odmah vidljivo.
 *
 * `will-change` visi na `data-otkriva-se`, atributu koji pokret.js postavlja
 * dok element ulazi i skida kad ulaz zavrsi — a ne na `data-otkrij`, koji
 * stoji zauvijek. Razlika je stvarna: prvo drzi sloj za slaganje na
 * cetrdesetak elemenata do kraja posjeta, drugo samo dok se doista animiraju.
 */
.js-pokret [data-otkriva-se] {
  will-change: opacity, transform;
}