@charset "utf-8";
/* ==========================================================================
   baxiservice.at — jedan stilski fajl, bez okvira i bez eksternih zahteva.
   Boje su preuzete iz Lovable verzije (HSL vrednosti iz index.css), pa je
   izgled isti; prigusena boja teksta je potamnjena sa 45% na 38% svetline
   jer na beloj kartici nije prolazila WCAG AA (4,5:1).
   ========================================================================== */

/* ------------------------------------------------------------------ fontovi */
@font-face {
  font-family: 'Inter var';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter var';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Jakarta var';
  src: url('/fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta var';
  src: url('/fonts/jakarta-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* -------------------------------------------------------------------- tokeni */
:root {
  --pozadina: 210 25% 97%;
  --tekst: 204 35% 18%;
  --kartica: 0 0% 100%;
  --primarna: 204 100% 30%;
  --primarna-tekst: 0 0% 100%;
  --sekundarna: 204 100% 40%;
  --prigusen: 210 20% 92%;
  --prigusen-tekst: 204 15% 38%;
  --ivica: 210 20% 88%;
  --opasnost: 0 72% 42%;
  --upozorenje: 28 85% 36%;
  --uspeh: 148 58% 30%;

  --r: 0.625rem;
  --r-l: 0.875rem;
  --r-xl: 1rem;
  --senka: 0 2px 12px -2px hsl(204 100% 30% / .08);
  --senka-h: 0 8px 24px -4px hsl(204 100% 30% / .14);
  --senka-l: 0 10px 30px -8px hsl(204 35% 18% / .2);
  --heroj-preliv: linear-gradient(135deg, hsl(204 100% 30%) 0%, hsl(204 100% 20%) 100%);
  --hitno-preliv: linear-gradient(135deg, hsl(204 100% 35%) 0%, hsl(204 100% 26%) 100%);
  --okvir-max: 1200px;
  --okvir-pad: 1rem;
  --odeljak-y: 4rem;
}
@media (min-width: 640px) { :root { --okvir-pad: 1.5rem; } }
@media (min-width: 1024px) { :root { --okvir-pad: 2rem; --odeljak-y: 6rem; } }

/* --------------------------------------------------------------------- osnova */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: hsl(var(--pozadina));
  color: hsl(var(--tekst));
  font-family: 'Inter var', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 5.5rem; /* mesto za plovak nad podnozjem */
}
@media (min-width: 640px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 {
  font-family: 'Jakarta var', 'Inter var', system-ui, sans-serif;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.0625rem; }
p { text-wrap: pretty; }

img, svg { display: block; max-inline-size: 100%; }
img { height: auto; }
ul, ol { padding: 0; list-style: none; }

a { color: hsl(var(--primarna)); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
a:hover { color: hsl(var(--sekundarna)); }

:focus-visible {
  outline: 3px solid hsl(var(--sekundarna));
  outline-offset: 2px;
  border-radius: 4px;
}

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

.okvir {
  width: 100%; max-width: var(--okvir-max);
  margin-inline: auto; padding-inline: var(--okvir-pad);
}
.okvir--uzak { max-width: 56rem; }
.sredina { text-align: center; }

.preskoci {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: hsl(var(--primarna)); color: hsl(var(--primarna-tekst));
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.preskoci:focus { left: 0; }

/* --------------------------------------------------------------------- ikone */
.ikona { width: 1.375rem; height: 1.375rem; flex: none; }
.ikona--mala { width: 1rem; height: 1rem; }
.ikona--dugme { width: 1.125rem; height: 1.125rem; }

/* -------------------------------------------------------------------- dugmici */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.4rem; min-height: 2.875rem;
  border: 2px solid transparent; border-radius: var(--r);
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.dugme:hover { transform: translateY(-1px); }
.dugme--puno {
  background: hsl(var(--primarna)); color: hsl(var(--primarna-tekst));
  border-color: hsl(var(--primarna));
}
.dugme--puno:hover {
  background: hsl(var(--sekundarna)); border-color: hsl(var(--sekundarna));
  color: hsl(var(--primarna-tekst));
}
.dugme--obrub {
  background: hsl(var(--kartica)); color: hsl(var(--primarna));
  border-color: hsl(var(--ivica));
}
.dugme--obrub:hover { border-color: hsl(var(--primarna)); }
.dugme--svetlo {
  background: #fff; color: hsl(204 100% 24%); border-color: #fff;
  box-shadow: var(--senka-l);
}
.dugme--svetlo:hover { background: hsl(210 30% 95%); color: hsl(204 100% 20%); }
.dugme--prozirno {
  background: hsl(0 0% 100% / .14); color: #fff;
  border-color: hsl(0 0% 100% / .7);
}
.dugme--prozirno:hover { background: hsl(0 0% 100% / .26); color: #fff; }
.dugme--puna-sirina { width: 100%; }

.dugmici { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.dugmici--sredina { justify-content: center; }
@media (max-width: 420px) {
  .dugmici { flex-direction: column; align-items: stretch; }
  .dugme { width: 100%; }
}

/* ----------------------------------------------------------------- zaglavlje */
.zaglavlje {
  position: sticky; top: 0; z-index: 100;
  background: hsl(var(--kartica) / .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(var(--ivica));
}
.traka-gore { background: hsl(var(--primarna)); color: hsl(var(--primarna-tekst)); }
.traka-gore__red {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding-block: .4rem; font-size: .8125rem;
}
.traka-gore__tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traka-gore__tel {
  display: inline-flex; align-items: center; gap: .4rem;
  color: inherit; font-weight: 700; text-decoration: none; flex: none;
}
.traka-gore__tel:hover { color: inherit; text-decoration: underline; }

.zaglavlje__red {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .7rem;
}
.logo { display: inline-flex; flex-direction: column; align-items: flex-start;
        gap: .1rem; text-decoration: none; flex: none; line-height: 1.1; }
.logo__red { display: flex; align-items: baseline; gap: .45rem; }
.logo img { height: 1.6rem; width: auto; }
.logo__dodatak {
  font-family: 'Jakarta var', sans-serif; font-weight: 700;
  font-size: .95rem; color: hsl(var(--prigusen-tekst)); letter-spacing: -.01em;
}
/* Drugi red ispod logoa. Mali je namerno: nosi poruku, ne takmici se sa
   imenom. Sirina se poravnava sa pocetkom BAXI znaka, ne centrira. */
.logo__podnaslov {
  font-family: 'Jakarta var', sans-serif; font-weight: 700;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--primarna));
}

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: .125rem; }
.nav-link {
  display: block; padding: .5rem .6rem; border-radius: var(--r);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  color: hsl(var(--prigusen-tekst)); text-decoration: none;
}
.nav-link:hover { background: hsl(var(--prigusen)); color: hsl(var(--tekst)); }
.nav-link--akt { background: hsl(var(--prigusen)); color: hsl(var(--tekst)); font-weight: 600; }

.dugme--zaglavlje { display: none; padding: .6rem 1.1rem; min-height: 2.5rem;
                    font-size: .875rem; }

.nav-prekidac {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid hsl(var(--ivica));
  border-radius: var(--r); cursor: pointer; color: hsl(var(--tekst));
}
.nav-prekidac:hover { background: hsl(var(--prigusen)); }
.nav-prekidac .ikona { width: 1.5rem; height: 1.5rem; }
.nav-prekidac__x { display: none; }
.nav-prekidac[aria-expanded="true"] .nav-prekidac__menu { display: none; }
.nav-prekidac[aria-expanded="true"] .nav-prekidac__x { display: block; }

.nav-mobilni {
  border-top: 1px solid hsl(var(--ivica));
  background: hsl(var(--kartica));
}
.nav-mobilni[hidden] { display: none; }
.nav-mobilni ul { display: flex; flex-direction: column; gap: .125rem;
                  padding-block: .75rem; }
.nav-mobilni .nav-link { padding: .7rem .75rem; font-size: .9375rem; }
.nav-mobilni .dugme { margin-bottom: 1rem; }

@media (min-width: 1080px) {
  .nav-desktop { display: block; }
  .dugme--zaglavlje { display: inline-flex; }
  .nav-prekidac, .nav-mobilni { display: none !important; }
}

/* -------------------------------------------------------------------- odeljci */
.odeljak { padding-block: var(--odeljak-y); }
.odeljak--karta { background: hsl(var(--kartica)); }
.odeljak--tanak { padding-block: 2rem; }

.naslov-sekcije { margin-bottom: 2.5rem; }
.naslov-sekcije--centar { text-align: center; }
.naslov-sekcije--centar p { margin-inline: auto; }
.naslov-sekcije p {
  margin-top: .75rem; max-width: 42rem;
  color: hsl(var(--prigusen-tekst)); font-size: 1.0625rem;
}

.nadnaslov {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
  color: hsl(var(--primarna)); font-weight: 600; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .04em;
}

.proza > * + * { margin-top: 1.1rem; }
.proza p { color: hsl(var(--prigusen-tekst)); }
.proza h2, .proza h3 { color: hsl(var(--tekst)); margin-top: 2rem; }
.proza h2:first-child, .proza h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------- heroj */
.heroj { position: relative; color: #fff; isolation: isolate; }
.heroj--boja { background: var(--heroj-preliv); }
.heroj--slika { background: hsl(204 100% 24%); }
.heroj__slika { position: absolute; inset: 0; z-index: -1; }
.heroj__slika img { width: 100%; height: 100%; object-fit: cover; }
.heroj--slika::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, hsl(204 100% 24% / .94) 0%,
                                      hsl(204 100% 20% / .86) 60%,
                                      hsl(204 100% 18% / .8) 100%);
}
/* Na telefonu tekst ide preko cele sirine, pa i preko svetlog dela
   fotografije. Kosa prekrivka je tamo najtanja — zato ravnomernija i gusca. */
@media (max-width: 767px) {
  .heroj--slika::before {
    background: linear-gradient(170deg, hsl(204 100% 22% / .93) 0%,
                                        hsl(204 100% 19% / .91) 100%);
  }
}
.heroj__sadrzaj { padding-block: 4.5rem; max-width: 46rem; }
@media (min-width: 768px) { .heroj__sadrzaj { padding-block: 6.5rem; } }
.heroj__oznaka {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.25rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: #fff; color: hsl(204 100% 24%);
  font-size: .8125rem; font-weight: 700;
}
.heroj h1 { color: #fff; }
.heroj__uvod {
  margin-top: 1.1rem; font-size: 1.0625rem; max-width: 38rem;
  color: hsl(0 0% 100% / .9);
}
@media (min-width: 768px) { .heroj__uvod { font-size: 1.1875rem; } }

/* ------------------------------------------------------------------ poverenje */
.trust { background: hsl(var(--kartica)); border-bottom: 1px solid hsl(var(--ivica)); }
.trust__mreza {
  display: grid; gap: 1.5rem; padding-block: 1.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .trust__mreza { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust__st { display: flex; align-items: flex-start; gap: .75rem; }
.trust__ik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--r);
  background: hsl(var(--primarna) / .1); color: hsl(var(--primarna));
}
.trust__st > span:last-child { display: flex; flex-direction: column; }
.trust__st strong { font-size: .9375rem; font-weight: 600; }
.trust__st span span { font-size: .875rem; color: hsl(var(--prigusen-tekst)); }

/* --------------------------------------------------------------- mreze kartica */
.mreza-usluga, .mreza-kartica, .mreza-koraka, .mreza-regija,
.mreza-kodova, .mreza-saveta { display: grid; gap: 1.25rem; }

.mreza-usluga { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.mreza-regija { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mreza-kodova { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mreza-koraka { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* Broj kolona je zakucan, ne auto-fit: sa auto-fit se cetiri kartice na
   sirokom ekranu prelome 3+1, a sest saveta 4+2 — razbijen red izgleda kao
   greska. Ovako je uvek 2+2 odnosno 3+3. */
.mreza-kartica--2, .mreza-kartica--3, .mreza-saveta {
  grid-template-columns: minmax(0, 1fr);
}
.mreza-kartica--2 { max-width: 56rem; margin-inline: auto; }
@media (min-width: 700px) {
  .mreza-kartica--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 620px) {
  .mreza-kartica--3, .mreza-saveta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .mreza-kartica--3, .mreza-saveta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kartica-usluge {
  display: flex; flex-direction: column; height: 100%;
  background: hsl(var(--kartica)); border: 1px solid hsl(var(--ivica));
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--senka); text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .2s;
}
.kartica-usluge:hover { box-shadow: var(--senka-h); transform: translateY(-3px); color: inherit; }
.kartica-usluge__slika { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.kartica-usluge__slika img { width: 100%; height: 100%; object-fit: cover;
                             transition: transform .3s; }
.kartica-usluge:hover .kartica-usluge__slika img { transform: scale(1.04); }
.kartica-usluge__telo { display: flex; flex-direction: column; gap: .5rem;
                        padding: 1.25rem; flex: 1; }
.kartica-usluge__telo strong { font-family: 'Jakarta var', sans-serif;
                               font-size: 1.0625rem; font-weight: 700; }
.kartica-usluge__opis { font-size: .9375rem; color: hsl(var(--prigusen-tekst)); flex: 1; }
.kartica-usluge__vise {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem;
  color: hsl(var(--primarna)); font-size: .875rem; font-weight: 600;
}
.kartica-usluge:hover .kartica-usluge__vise { gap: .6rem; }

.kartica {
  background: hsl(var(--pozadina)); border: 1px solid hsl(var(--ivica));
  border-radius: var(--r-l); padding: 1.5rem;
}
.odeljak:not(.odeljak--karta) .kartica { background: hsl(var(--kartica));
                                         box-shadow: var(--senka); }
.kartica__ik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: var(--r); background: hsl(var(--primarna) / .1);
  color: hsl(var(--primarna));
}
.kartica strong { display: block; font-family: 'Jakarta var', sans-serif;
                  font-size: 1.0625rem; font-weight: 700; margin-bottom: .4rem; }
.kartica p { font-size: .9375rem; color: hsl(var(--prigusen-tekst)); }

.kartica-regije {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  height: 100%; padding: 1.75rem 1.25rem; text-align: center;
  background: hsl(var(--kartica)); border: 1px solid hsl(var(--ivica));
  border-radius: var(--r-l); box-shadow: var(--senka);
  text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.kartica-regije:hover { box-shadow: var(--senka-h); transform: translateY(-3px); color: inherit; }
.kartica-regije strong { font-family: 'Jakarta var', sans-serif; font-size: 1.0625rem; }
.kartica-regije > span:last-child { font-size: .875rem; color: hsl(var(--prigusen-tekst)); }

/* -------------------------------------------------------------- slika + tekst */
.par { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .par { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.par__slika { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--senka-l); }
.par__slika img { width: 100%; height: 100%; object-fit: cover; }
.par__tekst > p { margin-top: 1rem; color: hsl(var(--prigusen-tekst)); }

.kvacice { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem; }
.kvacice li { display: flex; align-items: flex-start; gap: .65rem; }
.kvacice .ikona { color: hsl(var(--primarna)); margin-top: .3rem; }

.koraci-lista { display: flex; flex-direction: column; gap: .65rem;
                margin-top: 1.5rem; counter-reset: k; }
.koraci-lista li {
  display: flex; align-items: flex-start; gap: .75rem; counter-increment: k;
  padding: .85rem 1rem; background: hsl(var(--kartica));
  border: 1px solid hsl(var(--ivica)); border-radius: var(--r);
  font-size: .9375rem;
}
.koraci-lista li::before {
  content: counter(k);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: 999px;
  background: hsl(var(--primarna)); color: hsl(var(--primarna-tekst));
  font-size: .8125rem; font-weight: 700;
}

/* -------------------------------------------------------------------- koraci */
.korak { text-align: center; }
.korak__broj {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 999px;
  background: hsl(var(--primarna) / .1); color: hsl(var(--primarna));
  font-family: 'Jakarta var', sans-serif; font-size: 1.1rem; font-weight: 700;
}
.korak strong { display: block; font-size: .9375rem; font-weight: 600; }
.korak p { font-size: .875rem; color: hsl(var(--prigusen-tekst)); }

/* -------------------------------------------------------------------- oznake */
.mreza-oznaka {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.oznaka {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .9rem; background: hsl(var(--pozadina));
  border: 1px solid hsl(var(--ivica)); border-radius: var(--r);
  font-size: .875rem; font-weight: 500;
}
.odeljak--karta .oznaka { background: hsl(var(--pozadina)); }
.oznaka .ikona { color: hsl(var(--primarna)); }

/* -------------------------------------------------------------------- kodovi */
.trazilica { max-width: 30rem; margin: 0 auto 2.5rem; }
.trazilica__labela {
  display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 600;
  color: hsl(var(--prigusen-tekst));
}
.trazilica__polje { position: relative; }
.trazilica__ik {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: hsl(var(--prigusen-tekst)); pointer-events: none;
}
.trazilica input {
  width: 100%; padding: .8rem 1rem .8rem 2.85rem; min-height: 3rem;
  background: hsl(var(--kartica)); color: hsl(var(--tekst));
  border: 1px solid hsl(var(--ivica)); border-radius: var(--r);
  font-size: 1rem;
}
.trazilica input::placeholder { color: hsl(var(--prigusen-tekst) / .8); }
.trazilica__prazno {
  margin-top: 1rem; padding: 1rem; text-align: center;
  background: hsl(var(--upozorenje) / .08); border-radius: var(--r);
  color: hsl(var(--tekst)); font-size: .9375rem;
}

.kod {
  position: relative; padding: 1.25rem;
  background: hsl(var(--kartica)); border: 1px solid hsl(var(--ivica));
  border-left: 3px solid hsl(var(--ivica)); border-radius: var(--r-l);
  box-shadow: var(--senka);
}
.odeljak--karta .kod { background: hsl(var(--pozadina)); }
.kod--hoch { border-left-color: hsl(var(--opasnost)); }
.kod--mittel { border-left-color: hsl(var(--upozorenje)); }
.kod--gering { border-left-color: hsl(var(--uspeh)); }
.kod[hidden] { display: none; }
.kod__gore { display: flex; align-items: center; justify-content: space-between;
             gap: .5rem; margin-bottom: .6rem; }
.kod__oznaka {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 1.25rem; font-weight: 700; color: hsl(var(--primarna));
  letter-spacing: .02em;
}
.kod__nivo {
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
}
.kod--hoch .kod__nivo { background: hsl(var(--opasnost) / .1); color: hsl(var(--opasnost)); }
.kod--mittel .kod__nivo { background: hsl(var(--upozorenje) / .12); color: hsl(var(--upozorenje)); }
.kod--gering .kod__nivo { background: hsl(var(--uspeh) / .1); color: hsl(var(--uspeh)); }
.kod__znacenje { display: block; font-size: 1rem; margin-bottom: .3rem; }
.kod__resenje { font-size: .9375rem; color: hsl(var(--prigusen-tekst)); }

/* ----------------------------------------------------------------------- FAQ */
.faq { display: flex; flex-direction: column; gap: .65rem; }
.faq__st {
  background: hsl(var(--kartica)); border: 1px solid hsl(var(--ivica));
  border-radius: var(--r-l); overflow: hidden;
}
.odeljak--karta .faq__st { background: hsl(var(--pozadina)); }
.faq__st summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer;
  font-family: 'Jakarta var', sans-serif; font-weight: 600; font-size: 1.0625rem;
  list-style: none;
}
.faq__st summary::-webkit-details-marker { display: none; }
.faq__st summary::after {
  content: ""; width: .6rem; height: .6rem; flex: none;
  border-right: 2px solid hsl(var(--primarna));
  border-bottom: 2px solid hsl(var(--primarna));
  transform: rotate(45deg); transition: transform .2s;
}
.faq__st[open] summary::after { transform: rotate(-135deg); }
.faq__st summary:hover { background: hsl(var(--primarna) / .04); }
.faq__odg { padding: 0 1.25rem 1.25rem; }
.faq__odg p { color: hsl(var(--prigusen-tekst)); }

/* ----------------------------------------------------------------------- CTA */
.cta-hitno {
  position: relative; overflow: hidden;
  background: var(--hitno-preliv); color: #fff;
  padding-block: 4rem;
}
.cta-hitno::after {
  content: ""; position: absolute; top: -6rem; right: -6rem;
  width: 20rem; height: 20rem; border-radius: 999px;
  background: hsl(0 0% 100% / .06); pointer-events: none;
}
.cta-hitno__gore {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
  margin-bottom: 1.25rem; font-size: .875rem; font-weight: 600;
  color: hsl(0 0% 100% / .85);
}
.cta-hitno__gore span { display: inline-flex; align-items: center; gap: .4rem; }
.cta-hitno__naslov {
  font-family: 'Jakarta var', sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.18;
  letter-spacing: -.02em;
}
.cta-hitno__uvod {
  max-width: 34rem; margin: .9rem auto 0; color: hsl(0 0% 100% / .85);
  font-size: 1.0625rem;
}
.cta__naslov { margin-bottom: .75rem; }
.cta__tekst { max-width: 34rem; margin-inline: auto;
              color: hsl(var(--prigusen-tekst)); font-size: 1.0625rem; }

/* ---------------------------------------------------------------------- info */
.info {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem;
  background: hsl(var(--upozorenje) / .07);
  border: 1px solid hsl(var(--upozorenje) / .3);
  border-left: 3px solid hsl(var(--upozorenje));
  border-radius: var(--r-l);
}
.info__ik { color: hsl(var(--upozorenje)); flex: none; }
.info strong { display: block; font-family: 'Jakarta var', sans-serif;
               font-size: 1.0625rem; margin-bottom: .35rem; }
.info p { font-size: .9375rem; }
.info__tel { margin-top: 1rem; }
/* Napomena na pravnoj stranici dok podaci firme nisu kompletni — bez ikone,
   pa ne treba ni mesto za nju. */
.info--pravno { margin-bottom: 2rem; }
.info--pravno p { margin-top: .35rem; }

/* ------------------------------------------------------------------- kontakt */
.kontakt { display: flex; flex-direction: column; gap: 1.25rem; }
.kontakt__st { display: flex; align-items: flex-start; gap: 1rem; }
.kontakt__ik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r);
  background: hsl(var(--primarna) / .1); color: hsl(var(--primarna));
}
.kontakt__telo { display: flex; flex-direction: column; }
.kontakt__labela { font-size: .8125rem; font-weight: 600;
                   color: hsl(var(--prigusen-tekst)); text-transform: uppercase;
                   letter-spacing: .04em; }
.kontakt__vrednost { font-family: 'Jakarta var', sans-serif;
                     font-size: 1.1875rem; font-weight: 700; }
.kontakt__vrednost a { text-decoration: none; }
.kontakt__vrednost a:hover { text-decoration: underline; }
.kontakt__nota { font-size: .875rem; color: hsl(var(--prigusen-tekst)); }

/* --------------------------------------------------------------------- karta */
.karta {
  position: relative; border: 1px solid hsl(var(--ivica));
  border-radius: var(--r-xl); overflow: hidden;
  background: hsl(var(--pozadina)); min-height: 20rem;
}
.karta__zastor {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 3rem 1.5rem; text-align: center; min-height: 20rem;
}
.karta__ik { color: hsl(var(--primarna)); }
.karta__naslov { font-family: 'Jakarta var', sans-serif; font-weight: 700;
                 font-size: 1.0625rem; }
.karta__tekst { max-width: 32rem; font-size: .875rem;
                color: hsl(var(--prigusen-tekst)); }
.karta__zastor .dugme { margin-top: .5rem; }
.karta iframe { display: block; width: 100%; height: 25rem; border: 0; }

/* -------------------------------------------------------------------- akcija */
.akcija-okvir { background: hsl(var(--kartica)); }
.akcija {
  display: grid; gap: 0; overflow: hidden;
  background: hsl(var(--pozadina));
  border: 1px solid hsl(var(--ivica));
  border-radius: var(--r-xl); box-shadow: var(--senka);
}
@media (min-width: 900px) { .akcija { grid-template-columns: 5fr 7fr; } }
.akcija__slika { position: relative; min-height: 14rem; }
.akcija__slika img { width: 100%; height: 100%; object-fit: cover; }
.akcija__telo { padding: 1.75rem; }
@media (min-width: 900px) { .akcija__telo { padding: 2.25rem; } }

.akcija__nadnaslov {
  display: inline-block; margin-bottom: .6rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: hsl(var(--primarna)); color: hsl(var(--primarna-tekst));
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.akcija__naslov { margin-bottom: .6rem; }
.akcija__tekst { color: hsl(var(--prigusen-tekst)); }
.akcija__lista { margin-top: 1.1rem; }
.akcija__lista li { font-size: .9375rem; }

.akcija__cena {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid hsl(var(--ivica));
}
.akcija__iznos {
  font-family: 'Jakarta var', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1;
  color: hsl(var(--primarna)); font-variant-numeric: tabular-nums;
}
.akcija__nota { font-size: .9375rem; color: hsl(var(--prigusen-tekst)); }
.akcija__napomena {
  margin-top: .6rem; font-size: .875rem; color: hsl(var(--prigusen-tekst));
}
.akcija .dugmici { margin-top: 1.4rem; }

/* -------------------------------------------------------------------- saveti */
.savet {
  padding: 1.25rem; background: hsl(var(--kartica));
  border: 1px solid hsl(var(--ivica)); border-left: 3px solid hsl(var(--primarna));
  border-radius: var(--r-l); box-shadow: var(--senka);
}
.savet strong { display: block; font-family: 'Jakarta var', sans-serif;
                font-size: 1.0625rem; margin-bottom: .35rem; }
.savet p { font-size: .9375rem; color: hsl(var(--prigusen-tekst)); }

/* -------------------------------------------------------------------- pravno */
.proza--pravno h3 { font-size: 1.1875rem; margin-top: 2.25rem; }
.pravno-lista {
  display: grid; gap: .1rem 1.5rem; margin: 1.5rem 0;
  padding: 1.5rem; background: hsl(var(--kartica));
  border: 1px solid hsl(var(--ivica)); border-radius: var(--r-l);
}
@media (min-width: 640px) { .pravno-lista { grid-template-columns: 14rem 1fr; } }
.pravno-lista dt { font-weight: 600; font-size: .9375rem;
                   color: hsl(var(--prigusen-tekst)); padding-top: .45rem; }
.pravno-lista dd { margin: 0; padding-bottom: .45rem; }
@media (max-width: 639px) { .pravno-lista dd { padding-bottom: .9rem; } }
mark.fali {
  background: hsl(45 100% 86%); color: hsl(28 85% 24%);
  padding: .1rem .4rem; border-radius: 4px;
  font-size: .875rem; font-weight: 600;
}
.spisak-404 { display: flex; flex-direction: column; gap: .5rem; }

/* Nabrajanje unutar pravnog teksta. ul globalno nema list-style, pa marker
   crtamo sami — bez ovoga lista u Datenschutz-u izgleda kao niz pasusa. */
.kvacice-pravno { display: flex; flex-direction: column; gap: .4rem;
                  margin: 1rem 0 1rem .25rem; }
.kvacice-pravno li { position: relative; padding-left: 1.4rem;
                     color: hsl(var(--prigusen-tekst)); font-size: .9375rem; }
.kvacice-pravno li::before {
  content: ""; position: absolute; left: .25rem; top: .62em;
  width: .35rem; height: .35rem; border-radius: 999px;
  background: hsl(var(--primarna));
}

/* ------------------------------------------------------------------ podnozje */
.podnozje { background: hsl(var(--primarna)); color: hsl(var(--primarna-tekst)); }
.podnozje__mreza {
  display: grid; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.podnozje__logo { height: 1.6rem; width: auto; margin-bottom: 1rem; }
.podnozje__opis { font-size: .9rem; color: hsl(0 0% 100% / .8); max-width: 20rem; }
.podnozje__naslov {
  font-family: 'Jakarta var', sans-serif; font-size: 1rem; font-weight: 700;
  margin-bottom: .9rem; color: #fff;
}
.podnozje ul { display: flex; flex-direction: column; gap: .5rem; }
.podnozje a { color: hsl(0 0% 100% / .82); text-decoration: none; font-size: .9rem; }
.podnozje a:hover { color: #fff; text-decoration: underline; }
.podnozje__kontakt li { display: flex; align-items: center; gap: .5rem;
                        color: hsl(0 0% 100% / .82); font-size: .9rem; }
.podnozje__dno {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding-top: 1.75rem; padding-bottom: 2.5rem; text-align: center;
  border-top: 1px solid hsl(0 0% 100% / .15);
}
.podnozje__gas { font-size: .9rem; color: hsl(0 0% 100% / .85); }
.podnozje__gas a { color: #fff; text-decoration: underline; }
.podnozje__pravno { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.podnozje__copy { font-size: .8125rem; color: hsl(0 0% 100% / .6); }

/* ---------------------------------------------------------------- tel plovak */
.tel-plovak {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.25rem; border-radius: 999px;
  background: hsl(var(--primarna)); color: #fff;
  font-family: 'Jakarta var', sans-serif; font-weight: 700; font-size: 1.0625rem;
  text-decoration: none; box-shadow: var(--senka-l);
  transition: transform .18s, background-color .18s;
}
.tel-plovak:hover { background: hsl(var(--sekundarna)); color: #fff;
                    transform: translateY(-2px); }
@media (max-width: 480px) {
  .tel-plovak { left: 1rem; right: 1rem; justify-content: center; }
}
/* Na desktopu je suvisan — broj stoji u gornjoj traci, a dugme „Notdienst
   rufen" je u fiksiranom zaglavlju. Ovako ne pokriva sadrzaj dole desno. */
@media (min-width: 1080px) { .tel-plovak { display: none; } }

/* -------------------------------------------------------------- pojavljivanje */
/* Sadrzaj NIKAD ne ceka JavaScript. Klasu .anim app.js dodaje samo elementima
   koji su u tom trenutku ispod ekrana — tako nema ni treperenja na pocetku,
   ni praznih mesta kad skripta ne radi. */
.anim {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.anim.vidljivo { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .anim { opacity: 1; transform: none; }
  .dugme:hover, .kartica-usluge:hover, .kartica-regije:hover,
  .tel-plovak:hover { transform: none; }
}

/* ------------------------------------------------------------------- stampa */
@media print {
  .zaglavlje, .nav-mobilni, .tel-plovak, .cta-hitno, .dugmici, .karta { display: none; }
  body { background: #fff; padding: 0; }
  .odeljak { padding-block: 1rem; }
}