/* ARHIFARM d.o.o. — stil maketa
   Reprodukcija zatecenog izgleda (Joomla/Protostar + vtemmenu theme1-green);
   boje i mere su iz template.css i mod_vtemmenu/styles.css starog sajta.
   Autor: D. Svilenkovic, 2026 */

/* ---------- 0. Mere ---------- */

/* Razmaci po lestvici od 4px; pre su bile razbacane vrednosti iz Bootstrap 2
   nasledja (9, 10, 12, 14, 20, 22, 35). Svaka mera u fajlu dolazi odavde. */
:root {
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 24px;
  --r6: 32px;

  /* Sirina okvira — jedna za ceo sajt, vidi odeljak 2a. */
  --okvir: clamp(1010px, 82vw + 100px, 1560px);

  /* Mat od zalfije oko okvira. Nikad nula: i na 320px mora da se vidi da je
     beli ram ram, a ne ivica ekrana. */
  --mat: clamp(8px, 1.5vw, 20px);

  /* Citljiv tekst ne ide od ivice do ivice sirokog monitora, ali ni ne ostaje
     zalepljen u uskoj levoj polovini panela. Gornja granica daje dovoljno
     prostora za duze pasuse, a `100%` cuva male ekrane. */
  --mera: min(82ch, 100%);

  /* Obrazac i sve uz njega (ishod, poverenje, kontakt podaci, mapa) — ista
     leva I ista desna ivica. */
  --obrazac: 760px;

  /* Izmerena visina lepljive trake (5+44+5 razmak i 2+2 hairline); ista i na
     telefonu. Sidra je racunaju, inace naslov zavuce pod traku. */
  --traka-h: 62px;

  --prelaz: .16s;
}

/* ---------- 1. Osnova ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ⚑ Strana nosi ugradjen `overflow-x:hidden` na html i body; to pravi kontekst
   skrolovanja u kome `position:sticky` prestaje da radi. `clip` odseca isto ali
   ne pravi skrol-kutiju. Bez podrske za `clip` pravilo otpadne i vrati se na
   `hidden` — traka tada ne lepi, ostalo radi. `!important` je nuzan jer
   ugradjeni blok stoji nize u glavi dokumenta. */
html, body { overflow-x: clip !important; }

body {
  margin: 0;
  padding: 10px var(--mat) var(--plutaj-dno, 104px);   /* body.site{padding-top:10px} + bocni mat */
  background: #a7b97e;                  /* inline: body.site{background-color:#a7b97e}, bez teksture */
  color: #333;                          /* body{color:#333} */
  font-family: Verdana, Tahoma, Arial, sans-serif;  /* *{font-family:Verdana,Tahoma,Arial} */
  font-size: 15px;                      /* original 13px, podignuto zbog citljivosti */
  line-height: 1.55;                    /* original 18px/13px = 1.38 */
}

a { color: #800101; text-decoration: none; }          /* a{color:#800101} */

/* Original je na hover isao na #BE0000 — na zalfiji 3,10:1, pada AA. #8f0000
   drzi 4,56:1 na zalfiji i 6,61:1 na panelu; podvlaka nosi glavni signal. */
a:hover, a:focus { color: #8f0000; text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible { outline: 3px solid #800101; outline-offset: 2px; }

img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }

/* Sidro ne sme da zavuce naslov pod lepljivu traku. Mera je izmerena. */
main [id] { scroll-margin-top: calc(var(--traka-h, 58px) + var(--r4)); }

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

/* „Preskoci na sadrzaj" je nekad bila zaklonjena i pod fokusom. Sada iskoci,
   bez pomeranja rasporeda (10,92:1). */
a.samo-citac:focus {
  position: absolute;
  top: var(--r2); left: var(--r2); z-index: 100;
  width: auto; height: auto; margin: 0;
  padding: var(--r2) var(--r3);
  overflow: visible; clip: auto; clip-path: none;
  background: #fff; color: #800101;
  border: 2px solid #800101; border-radius: 3px;
  font-weight: bold; text-decoration: none;
}

/* ---------- 2. Okvir strane ---------- */

/* .body .container: bg #cddbad, beli okvir 15px, radijus 8px, padding 20px,
   sirina sadrzaja 940px (Bootstrap 2 .container), min-height 600px */
.okvir {
  --ram: 15px;                 /* beli ram; lepljiva traka i podnozje ga racunaju */
  --pad: var(--r5);            /* unutrasnji razmak panela; isto */
  width: var(--okvir-sirina, var(--okvir));
  max-width: 100%;
  margin: var(--r3) auto 0;
  background: #cddbad;
  border: var(--ram) solid #fff;
  border-radius: 8px;
  padding: var(--pad);
  box-shadow: 0 0 6px rgba(0, 0, 0, .05);
}

.strana > .okvir { min-height: 600px; }   /* div.body > div.container{min-height:600px} */

/* ---------- 2a. PRAVILO PORAVNANJA ----------
   Trake, mreze, tabele i ostali siroki blokovi vise o unutrasnjoj levoj ivici
   panela. Tekuci tekst je citljive mere i centriran kada nema prateci medij;
   uz sliku ostaje levo da zajedno popune red. Ostali izuzeci su:
   1. Zaglavlje — traka a ne sadrzaj; broj se trazi na desnom kraju.
   2. Slike uz tekst (hero, tekst+slika) idu DESNO od teksta: tekst tako dobija
      istu levu ivicu kao sve ostalo, a slika popuni pojas koji bi zjapio.
   3. Plutajuca dugmad — ona po definiciji stoje u uglu ekrana.
   Sirina reda ostaje ogranicena SAMO za tekuci tekst. Spiskovi dozvola,
   referenci i vesti su podaci a ne stivo — idu punom sirinom kao i tabele. */
main .blok--text,
main .blok--faq,
main .blok--notice,
main .blok--steps,
main .sadrzaj-uvod { max-width: var(--mera); margin-inline: auto; }

/* CMS moze eksplicitno da oznaci tekst kao sirok. Ta odluka ima prednost nad
   merom za tekuce pasuse, npr. kod spiskova registracija i referenci. */
main .blok--text.blok--full { max-width: none; margin-inline: 0; }

/* Druga strana iste misli: kad je u tekstualnom bloku spisak a ne pasus, mera
   reda se na njega ne odnosi. Pasusi u istom bloku ostaju u meri — nju nosi
   pravilo za `.sadrzaj-uvod` iznad. */
main .blok--text:has(> .reference) { max-width: none; }

/* Dug spisak se na sirokom ekranu lomi u dva stupca; kratak nema sta da deli.
   Prag stoji u samom pravilu (`nth-child(12)`) pa se ne racuna nigde drugde. */
@media (min-width: 1400px) {
  main .blok--text:has(> ul > li:nth-child(12)) { max-width: none; }
  main .blok--text > ul:has(> li:nth-child(12)) { columns: 2; column-gap: var(--r6); }
  main .blok--text > ul:has(> li:nth-child(12)) > li { break-inside: avoid; }
}

/* Zastavica stoji na body da je pokupe i podnozje i oznaka makete. */
body { --okvir-sirina: var(--okvir); }

/* ---------- 3. Zaglavlje ---------- */

.zaglavlje {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--r4);
  margin-bottom: var(--r3);     /* .header{margin-bottom:10px} */
}

/* inline-flex a ne inline-block: na telefonu je slika znaka 41px visoka i veza
   je bila taman ispod dodirne mete od 44px */
.znak { display: inline-flex; align-items: center; min-height: 44px; line-height: 0; }
.znak img { width: 416px; height: 65px; }   /* images/arhifarm-logo.jpg 416x65 */

/* Desna strana zaglavlja: dezurni broj iznad prekidaca jezika, kao na
   zatecenom sajtu. Kad zaglavlje odskroluje, broj preuzima plutajuce dugme. */
.uz-znak { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }

.broj-zaglavlje {
  display: flex;
  align-items: center;
  gap: var(--r2);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
}
.broj-zaglavlje .oznaka { font-size: 12px; color: #4a4a4a; }   /* 6,05:1 na panelu */

/* Broj je uvek veza na tel: i uvek dodirna meta od 44px. */
.broj {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--r1);
  color: #800101;                /* 7,45:1 na panelu, 5,14:1 na zalfiji */
  font-weight: bold;
  font-size: 17px;
  letter-spacing: .01em;
}

/* prekidac jezika — tekstualni, umesto zastavica */
.jezik {
  display: flex;
  align-items: center;
  gap: var(--r1);
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.jezik [aria-current] { font-weight: bold; color: #333; padding: 10px 2px; }
.jezik span[aria-hidden] { color: #4a4a4a; }
/* dodirna meta: 15px teksta u 44px visokoj meti, bez pomeranja rasporeda */
.jezik a, .jezik-neaktivan { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--r2); }

/* ---------- 4. Meni ---------- */

/* Lepljiva traka. Lepi se SAMO traka menija; znak, telefon i prekidac jezika
   odlaze sa skrolom — sa njima bi na polozenom telefonu uzela 188px umesto 62.
   Siri se preko unutrasnjeg razmaka panela (negativna margina + isti razmak
   nazad kao padding) da sadrzaj ne promice pored nje; pozadina je boja panela,
   inace tekst prosijava kroz 5px iznad i ispod. */
.meni {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #cddbad;
  margin: 0 calc(-1 * var(--pad, var(--r5))) var(--r3);
  padding: 5px var(--pad, var(--r5));              /* .navigation{padding:5px 0} */
  border-top: 1px solid rgba(0, 0, 0, .075);
  border-bottom: 1px solid rgba(0, 0, 0, .075);
}

/* traka: .theme1.green .vt-main-mega-menu */
.meni-traka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #44700d;
  border: 1px solid #5b8303;
  border-radius: 3px;
  box-shadow: 0 1px 0 0 #80a133 inset;
  font-family: Arial, Helvetica, sans-serif;       /* .vt-mega-menu{font-family:arial} */
  font-size: 13px;                                 /* original 11px */
}

.meni-traka > li { position: relative; }

.meni-traka > li > a {
  display: block;
  padding: 12px 20px 14px;        /* original 10px 20px 14px; 44px visina zbog dodira */
  line-height: 18px;
  color: #fff;                    /* .vt-main-mega-menu li a{color:#fff} */
  font-weight: bold;              /* theme1 > li > a{font-weight:bold} */
  text-decoration: none;
  border-radius: 3px 3px 0 0;
}

.meni-traka > li > a:hover,
.meni-traka > li > a:focus,
.meni-traka > li:focus-within > a,
.meni-traka > li:hover > a {
  background: #eee;               /* li.mega-hover a{background-color:#eee} */
  color: #333;                    /* li.mega-hover a{color:#333 !important} */
  text-decoration: none;
}

/* Bordo prsten na zelenoj traci daje 1,86:1. Stavka pod fokusom prelazi na
   #eee, pa prsten ide unutra: 9,41:1. */
.meni-traka > li > a:focus-visible { outline: 3px solid #800101; outline-offset: -3px; }

.meni-traka > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 #cddbad; }   /* 4,01:1 na zelenoj */
.meni-traka > li > a[aria-current="page"]:hover,
.meni-traka > li > a[aria-current="page"]:focus,
.meni-traka > li:hover > a[aria-current="page"] { box-shadow: inset 0 -3px 0 #44700d; }  /* 5,07:1 na #eee */

/* strelica kod stavki sa podmenijem (zamena za images/arrow.png) */
.meni-traka > li.ima-pod > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: var(--r2);
  vertical-align: 2px;
  border: 4px solid transparent;
  border-top-color: currentColor;
}

/* podmeni: .vt-main-mega-menu li .sub-container{background:#eee} */
.podmeni {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  display: none;
  min-width: 260px;
  margin: 0;
  padding: var(--r2);
  list-style: none;
  background: #eee;
  border-bottom: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-radius: 0 0 3px 3px;
  box-shadow: -1px 0 0 #ccc;
}

.meni-traka > li:hover > .podmeni,
.meni-traka > li:focus-within > .podmeni { display: block; }

.podmeni li { margin: 0; }
.podmeni a {
  display: block;
  padding: var(--r2) var(--r3);
  color: #333;                    /* li li a{color:#333} */
  border-radius: 3px;
  font-weight: normal;
}
.podmeni a:hover, .podmeni a:focus { background: #dcdcdc; color: #333; text-decoration: underline; }

/* prekidac podmenija: vidi se samo na uskim i dodirnim ekranima */
.dugme-pod { display: none; }

/* pretraga u traci — .search-query iz originala */
.meni-traka > li.pretraga-stavka { margin-left: auto; }

.pretraga { margin: 0 5px 0 0; padding: 0; }
/* 44px a ne 30px: jedina dodirna meta ispod mere. Traka ne raste — stavke
   menija su ionako 44px. */
.pretraga input {
  width: 162px;
  min-height: 44px;
  padding: 5px;
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
}
.pretraga input:hover { border-color: #5b8303; }
.pretraga input:focus-visible { outline: 3px solid #fff; outline-offset: 1px; border-color: #fff; }

/* Hamburger i prekidaci podmenija — bez JS-a, prekidac je polje za potvrdu.
   Na sirokom ekranu `display:none` da ih tastatura ne obilazi. */
.prekidac { position: absolute; display: none; opacity: 0; width: 0; height: 0; }
.dugme-meni { display: none; }

/* ---------- 5. Traka naslova sekcije ---------- */

/* original: .page-header{margin:2px 0 10px;border-bottom:1px solid #eee},
   h2{background:#e1edc8;border-radius:5px;box-shadow:5px 5px 5px #555} */
.traka-naslova {
  margin: var(--r3) 0 var(--r5);
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

/* Pravilo 2a: veza stoji uz naslov, ne na desnom kraju trake. Podvlaka i
   sitniji slog da se ne cita kao deo naslova. */
.traka-naslova > .naslov {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--r2) var(--r5);
  margin: 0 0 var(--r3);
  padding: 3px var(--r3);
  background: #e1edc8;
  color: #800101;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #555;
  font-family: Arial, Helvetica, sans-serif;   /* original: Open Sans sa Google fonts */
  font-size: 22px;
  line-height: 24px;
  font-weight: bold;
}

.traka-naslova .naslov h1 { margin: 0; font: inherit; color: inherit; }

.traka-naslova .uz-naslov {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: underline;
}

/* neaktivan jezik u prekidacu */
.jezik-neaktivan { color: #4a4a4a; }

/* ---------- 6. Sadrzaj ---------- */

/* Naslov pripada onome ispod sebe: razmak iznad veci od razmaka ispod. */
h1, h2, h3, h4, h5, h6 {
  margin: var(--r5) 0 var(--r2);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #333;
}
h2 { font-size: 20px; line-height: 24px; }   /* original h2 22/24 */
h3 { font-size: 18px; line-height: 22px; }   /* original 18/20 */
h4 { font-size: 15px; line-height: 20px; }   /* original 14/16 */
h5 { font-size: 14px; line-height: 18px; }
h6 { font-size: 13px; line-height: 17px; }

p { margin: 0 0 var(--r3); }
ul, ol { padding: 0; margin: 0 0 var(--r3) var(--r5); }   /* ul,ol{margin:0 0 9px 25px} */
li { line-height: 1.55; margin-bottom: var(--r1); }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; margin-top: var(--r1); }

hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .12); margin: var(--r5) 0; }

/* Po pravilu 2a levo. Negativna margina ponistava 12px razmaka prvog linka,
   da mu se slova poklope sa ivicom trake. */
.prelaz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--r1);
  font-size: 14px;
  margin: 0 0 var(--r5) calc(-1 * var(--r3));
}
.prelaz a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--r3);
  border-radius: 3px;
  font-weight: bold;
}
.prelaz a:hover, .prelaz a:focus { background: #e1edc8; }   /* #8f0000 na #e1edc8 = 7,91:1 */

/* dopuna uz stavku liste */
.dopuna { color: #4a4a4a; }
.napomena { font-size: 13px; color: #4a4a4a; font-weight: normal; }

/* tabela skroluje unutar svog okvira */
.tabela-okvir { overflow-x: auto; margin: 0 0 var(--r3); -webkit-overflow-scrolling: touch; }
/* Sirina do sadrzaja a ne do okvira: `width:100%` je tabelu od dve kolone na
   1281px razvlacio, pa je izmedju „Napon" i „230 V" zjapilo pola metra. */
table.podaci {
  width: auto;
  min-width: 30em;              /* uze od ovoga kolone se slepe, pa radije skrol u okviru */
  max-width: 100%;
  border-collapse: collapse;
  background: #dbe6c2;
  font-size: 14px;
}
table.podaci caption { text-align: left; padding: 0 0 6px; font-weight: bold; color: #800101; }
table.podaci th, table.podaci td {
  padding: var(--r2) var(--r3);
  border: 1px solid #b6c795;
  text-align: left;
  vertical-align: top;
}
table.podaci thead th { background: #e1edc8; color: #800101; }
table.podaci tbody tr:hover { background: #e6eed3; }   /* #333 na #e6eed3 = 10,7:1 */

/* slike u sadrzaju — .reciklaza img{border:5px solid silver;padding:3px} */
.slika-okvir {
  border: 5px solid silver;
  padding: 3px;
  background: #fff;
  display: inline-block;
  line-height: 0;
}
.slika-okvir:hover, a:hover > .slika-okvir, a:focus-visible > .slika-okvir { border-color: #44700d; }

figure { margin: 0 0 var(--r4); }
figcaption { font-size: 13px; color: #4a4a4a; padding-top: var(--r1); }

/* ---------- 7. Blokovi (19 tipova) ---------- */

.blok { margin: 0 0 var(--r5); }
.blok:last-child { margin-bottom: 0; }
.blok > h2:first-child, .blok > h3:first-child { margin-top: 0; }

/* panel u panelu */
.polje {
  background: #e1edc8;
  border: 1px solid #b6c795;
  border-radius: 5px;
  padding: var(--r3) var(--r4);
}

/* hero i text_image — slika DESNO od teksta (`order:2`), izuzetak 2 iz
   pravila 2a. Na telefonu se red lomi i tekst dolazi prvi, sto je i bolje. */
.blok--hero { display: flex; align-items: center; gap: var(--r5); flex-wrap: wrap; }
.blok--hero .hero-znak { order: 2; flex: 0 1 auto; min-width: 0; }
.blok--hero .hero-znak img { width: 400px; max-width: 100%; height: auto; }
.blok--hero .hero-tekst { flex: 1 1 320px; min-width: 260px; max-width: var(--mera); }
.blok--hero .hero-tekst > :first-child { margin-top: 0; }
.blok--hero:not(:has(.hero-znak)) .hero-tekst { margin-inline: auto; }

.blok--text_image { display: flex; gap: var(--r5); flex-wrap: wrap; align-items: flex-start; }
.blok--text_image .ti-slika { order: 2; flex: 0 1 auto; min-width: 0; }
.blok--text_image .ti-tekst { flex: 1 1 300px; min-width: 240px; max-width: var(--mera); }
.blok--text_image .ti-tekst > :first-child { margin-top: 0; }
.blok--text_image:not(:has(.ti-slika)) .ti-tekst { margin-inline: auto; }

/* gallery — mreza umesto centriranog flexa: poslednji red ide levo, kolone
   same popune okvir */
.galerija {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--r2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.galerija li { margin: 0; }
.galerija img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 2px; }

.galerija-posla {
  margin: var(--r3) 0;
  border: 1px solid #b6c795;
  border-radius: 5px;
  background: #f4f8eb;
}
.galerija-posla summary {
  cursor: pointer;
  padding: var(--r3);
  color: #800101;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.galerija-posla summary span::after { content: "+"; float: right; }
.galerija-posla[open] summary span::after { content: "−"; }
.galerija-posla .galerija { margin: 0 var(--r3) var(--r3); }

/* services_grid / products_grid */
.mreza { display: grid; gap: var(--r3); margin: 0; padding: 0; list-style: none; }
.mreza--3 { grid-template-columns: repeat(3, 1fr); }
.mreza--2 { grid-template-columns: repeat(2, 1fr); }
.mreza > li { margin: 0; }

.kartica {
  display: block;
  height: 100%;
  padding: var(--r3) var(--r4);
  background: #e1edc8;
  border: 1px solid #b6c795;
  border-radius: 5px;
  color: #800101;
  font-weight: bold;
  font-size: 14px;
}
/* Sama pozadina se jedva videla; tamnozelena ivica daje 5,21:1 prema kartici. */
.kartica:hover, .kartica:focus { background: #edf4dd; border-color: #44700d; text-decoration: none; }
.kartica:focus-visible { outline: 3px solid #800101; outline-offset: 2px; }
.kartica .opis { display: block; color: #333; font-weight: normal; padding-top: var(--r1); font-size: 13px; }

/* references */
.reference { margin: 0; padding: 0; list-style: none; }
.reference li {
  padding: var(--r2) 0 var(--r2) var(--r4);
  border-bottom: 1px solid rgba(0, 0, 0, .09);
  position: relative;
  margin: 0;
}
.reference li::before {
  content: "\2013";
  position: absolute; left: 0; top: var(--r2); color: #44700d;
}
.reference li:last-child { border-bottom: 0; }
.reference li:hover { background: #d6e2b9; }
/* rezultat pretrage je cela stavka — mora da bude dodirna meta */
.reference li > a { display: inline-flex; align-items: center; min-height: 44px; }
.reference .godina { color: #4a4a4a; font-size: 13px; }

/* faq */
.pitanja { margin: 0; }
.pitanja > div { border-bottom: 1px solid rgba(0, 0, 0, .12); padding: var(--r3) 0; }
.pitanja > div:last-child { border-bottom: 0; }
.pitanja dt { font-weight: bold; color: #800101; }
.pitanja dd { margin: var(--r1) 0 0; }

/* steps */
.koraci { counter-reset: korak; list-style: none; margin: 0; padding: 0; }
.koraci > li {
  position: relative;
  padding: 0 0 var(--r2) 44px;
  margin: 0 0 var(--r3);
  min-height: 34px;
}
.koraci > li:last-child { margin-bottom: 0; padding-bottom: 0; }
.koraci > li::before {
  counter-increment: korak;
  content: counter(korak);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  background: #44700d;
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  line-height: 32px;
}
.koraci strong { display: block; color: #800101; }

/* stats */
.brojke { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r3); margin: 0; padding: 0; list-style: none; }
/* pravilo poravnanja: i brojke idu levo, ranije su bile jedina centrirana stvar
   u nizu levo poravnatih blokova */
.brojke > li { margin: 0; padding: var(--r3) var(--r4); background: #e1edc8; border: 1px solid #b6c795; border-radius: 5px; }
.brojke .broj { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 26px; line-height: 30px; font-weight: bold; color: #800101; }
.brojke .oznaka { display: block; font-size: 13px; padding-top: 2px; }

/* cta */
/* Pravilo 2a: bez `space-between` — dugme je odletalo na desni kraj panela. */
.poziv {
  background: #e1edc8;
  border: 1px solid #b6c795;
  border-radius: 5px;
  padding: var(--r4);
  display: flex;
  align-items: center;
  gap: var(--r4) var(--r5);
  flex-wrap: wrap;
}
.poziv p { margin: 0; max-width: var(--mera); }

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--r3) var(--r5);
  background: #44700d;
  border: 1px solid #5b8303;
  border-radius: 3px;
  box-shadow: 0 1px 0 0 #80a133 inset;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}
.dugme:hover, .dugme:focus { background: #365a0a; color: #fff; text-decoration: none; }
/* dvostruki prsten: beli unutra (8,00:1 na tamnozelenoj), bordo spolja
   (7,45:1 na panelu) — vidi se i na dugmetu i na pozadini oko njega */
.dugme:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px #800101, 0 1px 0 0 #80a133 inset;
}

/* ---------- contact_form ----------
   Mreza od dva stupca: kratka polja u parove, duga preko oba. Raspored ide po
   IMENU polja preko `:has()`, ne po redosledu — `nth-child` bi pukao cim se
   doda polje. Bez `:has()` ostaje jedan stubac, dakle zatecen izgled.
   ⚑ Logika obrasca se ne dira (zamka, vremenska brana, provera kontakta,
   preusmerenje) — ovde je samo raspored. */
.obrazac {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--r4) var(--r5);
  max-width: var(--obrazac);
}

/* Polje je stubac: natpis, uputa, pa polje na dnu. `margin-top:auto` gura polje
   na dno celije, pa par ima poravnate ivice i kad jedno ima uputu a drugo nema
   (Telefon ima, E-posta nema). Bez toga su stepenasta. */
.obrazac > p { grid-column: 1 / -1; display: flex; flex-direction: column; margin: 0; }
.obrazac > p > input,
.obrazac > p > select,
.obrazac > p > textarea { margin-top: auto; }

/* Kratka polja u parove; pravilo ne zavisi od redosleda u dokumentu. */
.obrazac > p:has(> input[name="firma"]),
.obrazac > p:has(> input[name="ime"]),
.obrazac > p:has(> input[name="telefon"]),
.obrazac > p:has(> input[name="eposta"]),
.obrazac > p:has(> select[name="objekat"]),
.obrazac > p:has(> input[name="obim"]) { grid-column: span 1; }

/* Bez ovoga bi „Posaljite upit" bilo siroko 760px (`align-items:stretch`). */
.obrazac > p:has(> .dugme) { align-items: flex-start; }
.obrazac > p > .dugme { margin-top: var(--r2); }

.obrazac label { display: block; font-weight: bold; font-size: 14px; padding-bottom: var(--r1); }
.obrazac input, .obrazac textarea, .obrazac select {
  width: 100%;
  min-height: 46px;             /* jedna visina za sva polja, i za <select> */
  padding: var(--r3) var(--r2);
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  color: #333;
  background: #fff;
  /* Racunato: `#ccc` (nasledje Bootstrapa, gde je strana bila bela) daje na
     zelenom panelu 1,10:1 — ivica polja se ne vidi, pada 1.4.11. `#5b8303` je
     iz iste palete: 3,05:1 prema panelu, 4,48:1 prema ispuni; pod misem
     `#44700d` (4,02:1), pa se stanje i dalje razlikuje. */
  border: 1px solid #5b8303;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;
}
.obrazac input:hover, .obrazac textarea:hover, .obrazac select:hover { border-color: #44700d; }
.obrazac input:focus-visible, .obrazac textarea:focus-visible, .obrazac select:focus-visible { border-color: #800101; }
.obrazac textarea { min-height: 130px; resize: vertical; }
.obrazac .napomena { font-size: 13px; color: #4a4a4a; font-weight: normal; }

/* Uputa ide izmedju natpisa i polja: cita se pre kucanja. */
.obrazac .uputa {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #4a4a4a;               /* 6,05:1 na panelu okvira */
  padding-bottom: var(--r1);
}

/* Boja nije jedini nosilac znacenja — uz nju idu masna slova, tekst greske i
   deblja ivica polja. */
.obrazac .greska-polja {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #800101;               /* 7,45:1 na panelu okvira */
  padding-bottom: var(--r1);
}
.obrazac [aria-invalid="true"] { border: 2px solid #800101; }

/* Polje-zamka: `aria-hidden` i `tabindex=-1` ga vade iz citaca i reda fokusa,
   ali <input> je i dalje imao kutiju 44x18px. Svodi se na 1x1; `.obrazac`
   ispred da nadjaca `.obrazac input`. */
.samo-citac input, .samo-citac label,
.obrazac .samo-citac input, .obrazac .samo-citac label {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

/* Poruka nosi znacenje i bez boje. */
.ishod {
  background: #fff;
  border: 1px solid #b6c795;
  border-left: 5px solid #44700d;
  border-radius: 3px;
  padding: var(--r3) var(--r4);
  margin: 0 0 var(--r4);
  max-width: var(--obrazac);
}
.ishod > :first-child { margin-top: 0; }
.ishod > :last-child { margin-bottom: 0; }
.ishod--zastoj { border-left-color: #800101; }
.ishod-naslov { font-weight: bold; font-size: 16px; color: #800101; }   /* 10,92:1 na belom */
.ishod ul { margin: 0 0 var(--r3) var(--r5); }
.ishod .broj { font-size: 16px; }

/* Brojevi resenja: konkurencija tvrdi da ima dozvole a dokument ne pokazuje. */
.poverenje {
  max-width: var(--obrazac);
  margin: var(--r5) 0 0;
  padding: var(--r3) var(--r4);
  background: #e1edc8;
  border: 1px solid #b6c795;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.5;
}
.poverenje-uvod { margin: 0 0 var(--r2); font-weight: bold; color: #333; }   /* 10,32:1 */
.poverenje ul { margin: 0 0 var(--r2) var(--r4); }
.poverenje li { margin-bottom: 2px; }
.poverenje-vise { margin: 0; }
.poverenje-vise a { display: inline-flex; align-items: center; min-height: 44px; font-weight: bold; }

/* documents */
.dokumenti { list-style: none; margin: 0; padding: 0; }
.dokumenti li { padding: var(--r2) 0; border-bottom: 1px solid rgba(0, 0, 0, .09); margin: 0; }
.dokumenti li:last-child { border-bottom: 0; }
.dokumenti li:hover { background: #d6e2b9; }
.dokumenti a { display: inline-flex; align-items: center; min-height: 44px; }
.dokumenti .vrsta { color: #4a4a4a; font-size: 13px; }

/* notice */
.napomena-blok {
  background: #fff;
  border: 1px solid #b6c795;
  border-left: 5px solid #44700d;
  border-radius: 3px;
  padding: var(--r3) var(--r4);
}
.napomena-blok > :first-child { margin-top: 0; }
.napomena-blok > :last-child { margin-bottom: 0; }

/* video */
.video-okvir { max-width: 640px; }
.video-okvir video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border: 5px solid silver;
  padding: 3px;
}

/* news_list */
.vesti { list-style: none; margin: 0; padding: 0; }
.vesti > li { padding: var(--r3) 0; border-bottom: 1px solid rgba(0, 0, 0, .09); margin: 0; }
.vesti > li:last-child { border-bottom: 0; }
.vesti > li:hover { background: #d6e2b9; }
.vesti .datum { display: block; font-size: 13px; color: #4a4a4a; }
.vesti h3 { margin: 2px 0 var(--r1); font-size: 15px; }
.vesti h3 a { color: #800101; }

/* map — kutija je napomena sa adresom, a ne prava mapa, pa je siroka koliko joj
   treba. Na 760px (sirina obrasca) je bila skoro prazna i obecavala mapu koje
   nema; u dva stupca bi se razvukla na celu sirinu stupca. */
.mapa { max-width: 440px; border: 5px solid silver; padding: 3px; background: #fff; }
.mapa .mapa-polje {
  /* Polje je napomena sa adresom, ne prava mapa: 260px je bilo cetiri petine
     prazno. Tolika kutija obecava mapu koje nema. */
  min-height: 190px;
  background: #dbe6c2;
  border: 1px dashed #96a877;
  display: flex;
  align-items: center;
  padding: var(--r5);
  font-size: 14px;
}
.mapa .mapa-polje a { display: inline-flex; align-items: center; min-height: 44px; }

/* contact_info — dva stupca: pojam levo, podatak desno; ista sirina kao
   obrazac iznad njega. */
.blok--contact_info { max-width: var(--obrazac); }
.kontakt-podaci {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--r5);
  row-gap: var(--r1);
  margin: 0;
}
.kontakt-podaci dt { grid-column: 1; font-weight: bold; color: #800101; }
.kontakt-podaci dd { grid-column: 2; margin: 0; }
.kontakt-podaci dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* Naslov grupe usluga na pregledu. Omotac bloka nosi sidro iz podmenija, h2 mu
   je prvo dete — skok sleti na naslov, ne u neoznacenu mrezu kartica. */
.grupa { margin: 0 0 var(--r5); }
.grupa > h2, .blok--services_grid > h2 {
  margin: 0 0 var(--r3);
  padding: 3px var(--r3);
  background: #e1edc8;
  border-radius: 5px;
  color: #800101;
  font-size: 16px;
  line-height: 22px;
}
.broj-stavki { font-size: 13px; font-weight: normal; color: #4a4a4a; }  /* 7,24:1 na #e1edc8 */

/* naslov posla iznad galerije: veci razmak iznad nego ispod, da se vidi
   da naslov pripada slikama pod sobom */
.posao { margin: 0 0 var(--r2); }

/* oznaka makete */
.oznaka-makete {
  max-width: var(--okvir-sirina, var(--okvir));
  margin: 0 auto var(--r2);
  padding: var(--r1) var(--r3);
  background: #fff;
  border: 1px solid #b6c795;
  border-radius: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #44700d;
}

/* ---------- 8. Podnozje ---------- */

/* Beli ram + razmak panela, da potpis stane ispod leve ivice teksta u okviru. */
.podnozje {
  max-width: var(--okvir-sirina, var(--okvir));
  margin: 0 auto;
  padding: var(--r3) calc(15px + var(--r5)) var(--r5);
  font-size: 14px;
}
/* „Povratak na vrh" je presao u plutajuce dugme; potpis stoji levo. */
.podnozje .red { display: flex; align-items: center; gap: var(--r4); flex-wrap: wrap; }
.podnozje p { margin: 0; }
.podnozje .red a { display: inline-flex; align-items: center; min-height: 44px; }

/* Bordo na zalfiji daje 5,14:1, radno vreme #333 (5,95:1) — #4a4a4a bi ovde
   palo na 4,17:1. */
.podnozje-kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--r5);
  align-items: center;
  margin: 0 0 var(--r1);
}
.podnozje-kontakt span { display: inline-flex; align-items: center; gap: var(--r1); }
.podnozje-kontakt a { display: inline-flex; align-items: center; min-height: 44px; }
.podnozje-kontakt .broj { font-size: 16px; }
.podnozje-radno { color: #333; margin: 0 0 var(--r2); }

/* strane koje nisu u glavnom meniju */
.podnozje-meni {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--r5);
  margin: 0 0 var(--r2);
  padding: 0 0 var(--r2);
  border-bottom: 1px solid #93a76a;
  list-style: none;
}
.podnozje-meni li { margin: 0; }
.podnozje-meni a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 8a. Plutajuca dugmad ----------
   Poziv i povratak na vrh. BEZ ijedne linije JavaScripta — obicne veze (`tel:`
   i `#vrh`). Izgled je isti kao `.dugme` u sadrzaju; beli prsten je isti kao ram
   okvira i odvaja dugme od zalfije. `body` dole nosi 104px (`--plutaj-dno`) da
   dugmad ne legnu preko podnozja.
   Klik prima samo dugme: prazan ugao omotaca bi inace jeo klik ispod sebe. */
.plutaj {
  pointer-events: none;
  position: fixed;
  right: var(--mat);
  bottom: var(--mat);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--r2);
}

.plutaj a {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--r4);
  background: #44700d;
  border: 1px solid #5b8303;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #fff, 0 1px 0 0 #80a133 inset;
  color: #fff;                       /* 5,88:1 na #44700d */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  text-decoration: none;
}
.plutaj a:hover, .plutaj a:focus { background: #365a0a; color: #fff; text-decoration: none; }
.plutaj a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px #800101, 0 1px 0 0 #80a133 inset;
}

/* Strelica se crta, ne kuca kao znak: font na Windowsu ume da nema trougao. */
.plutaj-vrh { padding: 0; }
.plutaj-vrh::before {
  content: "";
  width: 0; height: 0;
  border: 7px solid transparent;
  border-bottom-color: #fff;
  margin-top: -7px;
}

/* Gde pregledac zna skrol-vremenicu, dugme se pojavi posle 300px skrola; gde
   ne zna, pravilo otpadne i dugme stoji stalno — nista nije pokvareno. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .plutaj-vrh {
      animation: pokazi-vrh linear both;
      animation-timeline: scroll(root block);
      animation-range: 120px 320px;
    }
    @keyframes pokazi-vrh {
      from { opacity: 0; visibility: hidden; }
      to   { opacity: 1; visibility: visible; }
    }
  }
}

/* ---------- 9. Responzivno ---------- */

/* Uz uski ekran ide i svaki dodirni: na tabletu od 1180px hover ne postoji
   pa se padajuci podmeni ne bi otvorio. */
@media (max-width: 1023px), (hover: none) {
  /* ⚑ Ovde je stajalo `position:relative` i, kao nize pravilo, GASILO lepljivu
     traku na svakom dodirnom ekranu. `sticky` je isto pozicioniran predak, pa
     apsolutni podmeni radi kao i pre. */
  .meni { position: sticky; }

  .dugme-meni {
    display: flex;
    align-items: center;
    gap: var(--r3);
    min-height: 44px;
    padding: 11px var(--r4);
    background: #44700d;
    border: 1px solid #5b8303;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 #80a133 inset;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
  }
  .dugme-meni .crte,
  .dugme-meni .crte::before,
  .dugme-meni .crte::after {
    display: block;
    width: 20px; height: 2px;
    background: #fff;
    content: "";
  }
  .dugme-meni .crte { position: relative; }
  .dugme-meni .crte::before { position: absolute; top: -6px; }
  .dugme-meni .crte::after { position: absolute; top: 6px; }

  .prekidac { display: block; }

  .prekidac:focus-visible + .dugme-meni,
  .prekidac:focus-visible + .dugme-pod {
    outline: 3px solid #fff;
    outline-offset: -4px;
    box-shadow: 0 0 0 3px #800101, 0 1px 0 0 #80a133 inset;
  }

  .meni-traka { display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: 6px; }
  /* Traka lepi, pa se razvucen meni ne moze odskrolovati sa stranom: na
     polozenom telefonu (~375px visine) poslednje stavke bi bile van dohvata. */
  .prekidac:checked ~ .meni-traka {
    display: flex;
    max-height: calc(100vh - 200px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  html:has(#prekidac-meni:checked),
  body:has(#prekidac-meni:checked) { overflow-y: hidden; }

  .meni-traka > li { width: 100%; border-bottom: 1px solid #5b8303; }
  .meni-traka > li:last-child { border-bottom: 0; }
  .meni-traka > li > a { border-radius: 0; padding: 13px var(--r4); }
  .meni-traka > li.ima-pod > a::after { display: none; }

  /* Podmeni na dodir: sklopljen, otvara ga prekidac pored veze. Razvucen meni
     je bio 1082px visok i „Kontakt“ je padao van ekrana; sklopljen je ~400px. */
  .meni-traka > li.ima-pod {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
  .meni-traka > li.ima-pod > a { grid-column: 1; }

  .dugme-pod {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 44px;
    cursor: pointer;
    border-left: 1px solid #5b8303;
  }
  .dugme-pod::after {
    content: "";
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: #fff;
    margin-top: 5px;
  }
  .ima-pod > .prekidac:checked ~ .dugme-pod::after { border-top-color: transparent; border-bottom-color: #fff; margin: -5px 0 0; }
  .dugme-pod:hover { background: #365a0a; }

  .podmeni {
    grid-column: 1 / -1;
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f3f5ec;
    padding: var(--r2) var(--r3) var(--r3);
  }
  /* ⚑ Padajuca pravila iz sireg dela fajla imaju vecu tezinu od .podmeni{none}
     pa se gase izricito; pravilo za prekidac dolazi posle njih i u istoj
     tezini pobedjuje zato sto stoji nize. Media query NE dize specificnost. */
  .meni-traka > li.ima-pod:hover > .podmeni,
  .meni-traka > li.ima-pod:focus-within > .podmeni { display: none; }
  .meni-traka > li.ima-pod > .prekidac:checked ~ .podmeni { display: block; }
  .podmeni a { min-height: 44px; display: flex; align-items: center; }

  .pretraga { margin: var(--r2) 0 0; padding: 0; width: 100%; }
  .pretraga input { width: 100%; min-height: 44px; }
  .pretraga input:focus-visible { outline-color: #800101; }
}

@media (min-width: 1024px) and (hover: hover) {
  .meni-traka { display: flex; }
}

/* Preko 1600px tri kartice u redu postanu preširoke za dva reda teksta */
@media (min-width: 1600px) {
  .mreza--3 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .mreza--3 { grid-template-columns: repeat(2, 1fr); }
  .brojke { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .okvir { --ram: 8px; --pad: var(--r4); margin-top: var(--r2); }
  .zaglavlje { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: var(--r2); }
  .znak img { width: auto; height: auto; max-width: 100%; }
  .jezik { margin-left: -4px; }

  /* Na telefonu broj i prekidac jezika stoje u jednom redu ispod znaka: broj
     ostaje iznad pregiba i na 375px, a red ne trosi drugu visinu. */
  .uz-znak {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--r3);
  }
  .broj-zaglavlje { margin-left: -4px; }
  .traka-naslova { margin-bottom: var(--r4); }
  .traka-naslova > .naslov {
    display: block;
    font-size: 19px;
    line-height: 23px;
    box-shadow: 3px 3px 4px #555;
  }
  .traka-naslova .uz-naslov { display: inline-flex; margin-right: var(--r3); white-space: normal; }
  .mreza--3, .mreza--2 { grid-template-columns: 1fr; }
  .brojke { grid-template-columns: 1fr 1fr; }
  .galerija { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; }
  /* znak u hero bloku uzimao je pola prvog ekrana pre nego sto se vidi tekst */
  .blok--hero { gap: var(--r3); }
  .blok--hero .hero-znak {
    width: min(160px, 100%);
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
  }
  .blok--hero .hero-znak picture,
  .blok--hero .hero-znak img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .blok--text_image { gap: var(--r4); }
  .prelaz { margin: 0 0 var(--r4) calc(-1 * var(--r2)); }
  .prelaz a { padding: 0 var(--r2); }
  /* prati ram + razmak panela (8 + 16) */
  .podnozje { padding: var(--r3) calc(8px + var(--r4)) var(--r5); }
  .poziv { flex-direction: column; align-items: stretch; padding: var(--r3); }
  .poziv .dugme { width: 100%; }
  .koraci > li { padding-left: 40px; }
  /* Uzi razmak i sitniji slog: na 320px dugmad drze ugao a ne trecinu reda.
     Stubac a ne red — uzi je, pa preko teksta pada manje sirine. */
  .plutaj { right: var(--r2); bottom: var(--r2); gap: 6px; }
  .plutaj a { font-size: 13px; padding: 0 var(--r3); }
  /* dva stupca na 360px ne stanu */
  .kontakt-podaci { grid-template-columns: 1fr; row-gap: 0; }
  .kontakt-podaci dt, .kontakt-podaci dd { grid-column: 1; }
  .kontakt-podaci dt { padding-top: var(--r2); }
  .kontakt-podaci dt:first-child { padding-top: 0; }
}

@media (max-width: 400px) {
  body { font-size: 14px; }
  .okvir { --pad: var(--r3); }
  .podnozje { padding-inline: calc(8px + var(--r3)); }
  .traka-naslova > .naslov { font-size: 17px; line-height: 21px; }
  .galerija { grid-template-columns: 1fr 1fr; }
}

/* Na uskom ekranu obrazac ide punom sirinom, pa dugme u uglu pada preko
   poslednjeg polja. Dok je kursor u polju obrasca, dugmad se sklone — bez JS-a.
   Bez `:has()` se prosto ne sklanjaju; nista se ne kvari. */
@media (max-width: 860px) {
  body:has(.obrazac input:focus, .obrazac textarea:focus, .obrazac select:focus) .plutaj { display: none; }
}

/* Broj je vec dostupan u zaglavlju i kontaktu. Na telefonu i tabletu fiksna
   puna oznaka prelazi preko pasusa, kartica i otvorenog menija, pa ostaje samo
   malo dugme za povratak na vrh. */
@media (max-width: 1023px) {
  body { --plutaj-dno: 64px; }
  .plutaj .plutaj-poziv { display: none; }
}

/* Jedan stubac cim polja u paru padnu ispod ~330px: uze se natpis „Kvadratura
   ili broj objekata" lomi u tri reda. U mrezi sa jednim stupcem `span 1` i
   `1 / -1` daju isto, pa parovi ne moraju da se ponistavaju. */
@media (max-width: 860px) {
  .obrazac { grid-template-columns: 1fr; gap: var(--r4); }
}

/* ---------- 9a. Kontakt u dva stupca ----------
   Strana nosi dve celine koje se ne citaju jedna za drugom — „posaljite upit" i
   „ko smo i gde smo" — pa na sirokom ekranu stoje jedna pored druge.
   ⚑ Nije bocna kolona kroz sajt: uslov je da strana ima I obrazac I mapu, a to
   je samo kontakt. Stari sajt bocnu kolonu nema ni na jednoj strani.
   ⚑ Plovak a ne mreza: mreza deli redove, pa bi svaka kutija desno cekala
   visinu obrasca i izmedju njih bi zjapilo.
   Pravilo 2a vazi i dalje — samo su sada dve leve ivice, obe tvrde. */
@media (min-width: 1280px) {
  main:has(> .blok--contact_form):has(> .blok--map) {
    display: flow-root;                 /* plovak ostaje u main-u */
    /* Obrazac drzi svojih 760px dok ima mesta, a suzi se pre nego sto desni
       stubac postane preuzak za red podataka. */
    --stubac: clamp(560px, 52vw, var(--obrazac));
    --pojas: calc(var(--stubac) + var(--r6));
  }

  main:has(> .blok--map) .obrazac { float: left; width: var(--stubac); }
  main:has(> .blok--map) .blok--contact_form > h2,
  main:has(> .blok--map) .ishod { max-width: var(--stubac); }

  /* `margin-top:0` poravnava vrh desnog stupca sa prvim poljem obrasca. */
  main:has(> .blok--map) .poverenje,
  main:has(> .blok--map) .blok--contact_info,
  main:has(> .blok--map) .blok--map { margin-left: var(--pojas); max-width: none; }
  main:has(> .blok--map) .poverenje { margin-top: 0; }
}

/* ---------- 10. Pokret ---------- */

/* Prelazi se ukljucuju samo ako korisnik nije trazio manje pokreta.
   Menja se iskljucivo boja — nista ne skace i raspored se ne pomera. */
@media (prefers-reduced-motion: no-preference) {
  .kartica, .dugme, .dugme-meni, .dugme-pod,
  .meni-traka > li > a, .podmeni a, .prelaz a,
  .reference li, .dokumenti li, .vesti > li,
  table.podaci tbody tr, .slika-okvir,
  .obrazac input, .obrazac textarea, .obrazac select, .pretraga input {
    transition: background-color var(--prelaz) ease-out,
                color var(--prelaz) ease-out,
                border-color var(--prelaz) ease-out;
  }
}

@media print {
  body { background: #fff; padding: 0; }
  .okvir { border: 0; box-shadow: none; background: #fff; width: auto; }
  .meni, .pretraga, .oznaka-makete, .prelaz, .plutaj { display: none; }
  body { padding-bottom: 0; }
  .traka-naslova > .naslov { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}