/* ============================================================
   NAJAMKORPE.RS  |  VM Elektro
   Boje iz logotipa: crna #141414 i bela. Akcenat je duboka
   plava, koristi se za akcije, kote i naglaske.
   Font: Big Shoulders Display (naslovi) + Work Sans (tekst).
   Mobile-first. Bez emodzija, bez crtica iznad naslova.
   ============================================================ */

:root{
  --crna:#141414;
  --crna-blaga:#1F1F1F;
  --ugalj:#2B2B2B;
  --bela:#FFFFFF;
  --papir:#F6F6F4;
  --plava:#1A3E8C;
  --plava-tamna:#102A63;
  --plava-tint:#EFF2F8;
  --tekst:#4A4A4A;
  --meta:#757575;
  --linija:#E3E3E0;
  --linija-tamna:rgba(255,255,255,.16);

  --naslov:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --sans:'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --sirina:1160px;
  --zaglavlje-v:60px;
  --traka-v:64px;
}

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

/* dodir bez kasnjenja od 300 ms i bez podrazumevanog sivog bleska */
a, button, summary, label, input[type="range"], .snimak-teren{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(26,62,140,.12);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--zaglavlje-v) + 12px);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--tekst);
  background:var(--bela);
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(var(--traka-v) + env(safe-area-inset-bottom, 0px) + 8px);
}
@media (min-width: 860px){ body{ padding-bottom:0; } }

h1,h2,h3{
  font-family:var(--naslov);
  color:var(--crna);
  margin:0 0 .4em;
  font-weight:700;
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
h1{ font-size:clamp(42px, 11vw, 88px); }
h2{ font-size:clamp(32px, 8vw, 56px); }
h3{ font-size:clamp(21px, 4.5vw, 27px); line-height:1.08; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--crna); }
img{ max-width:100%; height:auto; display:block; }
strong,b{ color:var(--crna); font-weight:600; }

:focus-visible{ outline:3px solid var(--plava); outline-offset:2px; }

.preskoci{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--crna); color:var(--bela); padding:12px 20px; font-weight:600;
}
.preskoci:focus{ left:10px; top:10px; }

/* ---------- omotac i sekcije ---------- */
.omot{
  width:100%; max-width:var(--sirina); margin-inline:auto;
  padding-inline:clamp(18px, 5vw, 44px);
}
.sekcija{ padding-block:clamp(52px, 9vw, 96px); }
.sekcija--papir{ background:var(--papir); }
.sekcija--istaknuta{ background:var(--plava-tint); }
.uvod{ max-width:62ch; font-size:clamp(17px, 4.2vw, 19px); }

/* ---------- dugmad ---------- */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:15px 28px;
  background:var(--plava); color:var(--bela);
  border:2px solid var(--plava); border-radius:3px;
  font-family:var(--sans); font-size:17px; font-weight:700; line-height:1.15;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.dugme:hover{ background:var(--plava-tamna); border-color:var(--plava-tamna); }
.dugme:active{ transform:translateY(1px); }
a.dugme{ color:var(--bela); }
.dugme--crno,a.dugme--crno{ background:var(--crna); border-color:var(--crna); color:var(--bela); }
.dugme--crno:hover{ background:#000; border-color:#000; }
a.dugme--okvir,.dugme--okvir{ background:transparent; border-color:var(--crna); color:var(--crna); }
a.dugme--okvir:hover{ background:var(--crna); border-color:var(--crna); color:var(--bela); }

.hero .dugme--okvir:hover{ background:var(--bela); border-color:var(--bela); color:var(--crna); }
.dugme--okvir:hover{ background:var(--crna); border-color:var(--crna); color:var(--bela); }
.akcije{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.akcije .dugme{ flex:1 1 100%; }
@media (min-width: 560px){ .akcije .dugme{ flex:0 1 auto; } }

/* ---------- naslovi se sklapaju iz reda ---------- */
.naslov-anim{ }
.rec-omot{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.rec{ display:inline-block; will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  .js .naslov-anim .rec{
    transform:translateY(108%);
    transition:transform .62s cubic-bezier(.2,.84,.24,1);
    transition-delay:calc(var(--r, 0) * 48ms);
  }
  .js .naslov-anim.vidljiv .rec{ transform:translateY(0); }
}

/* ---------- zaglavlje ---------- */
.zaglavlje{
  position:sticky; top:0; z-index:60;
  background:var(--bela);
  border-bottom:3px solid var(--plava);
  transition:box-shadow .25s ease;
}
/* visina se menja odmah, jer animiranje visine tera preracunavanje rasporeda
   kroz celih 250 ms, i to bas dok covek pocinje da skroluje */
.logo-veza img,
.logo-tekst{ transform-origin:left center; transition:transform .25s ease; }
.zaglavlje.zbijeno{ box-shadow:0 6px 22px rgba(20,20,20,.09); }
.zaglavlje.zbijeno .zaglavlje-red{ min-height:50px; }
.zaglavlje.zbijeno .logo-veza img{ transform:scale(.82); }
.zaglavlje.zbijeno .logo-tekst{ transform:scale(.85); }
@media (min-width: 860px){
  .zaglavlje-tel{ transform-origin:right center; transition:transform .25s ease; }
  .zaglavlje.zbijeno .zaglavlje-tel{ transform:scale(.9); }
}
@media (prefers-reduced-motion: reduce){
  .zaglavlje, .logo-veza img, .logo-tekst, .zaglavlje-tel{ transition:none; }
}
.zaglavlje-red{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:var(--zaglavlje-v);
}
.logo-veza{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo-veza img{ height:38px; width:auto; }
.logo-tekst{
  font-family:var(--naslov); font-size:20px; font-weight:700;
  color:var(--crna); text-transform:uppercase; letter-spacing:.02em; line-height:1;
}
.nav-prekidac{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  background:none; border:2px solid var(--crna); border-radius:3px; cursor:pointer;
}
.nav-prekidac span,
.nav-prekidac span::before,
.nav-prekidac span::after{
  content:""; display:block; width:20px; height:2px; background:var(--crna); position:relative;
}
.nav-prekidac span::before{ position:absolute; top:-6px; }
.nav-prekidac span::after{ position:absolute; top:6px; }
.glavna-nav{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--bela); border-bottom:3px solid var(--plava); padding:4px 0 14px;
}
.glavna-nav.otvorena{ display:block; }
.glavna-nav ul{
  list-style:none; margin:0; padding:0 clamp(18px, 5vw, 44px);
  display:flex; flex-direction:column;
}
.glavna-nav a{
  display:block; padding:14px 2px; color:var(--crna); text-decoration:none;
  font-weight:600; font-size:16px; border-bottom:1px solid var(--linija);
}
.glavna-nav a:hover{ color:var(--plava); }
.zaglavlje-tel{ display:none; }
@media (min-width: 860px){
  .nav-prekidac{ display:none; }
  .glavna-nav{ display:block; position:static; border:0; padding:0; background:none; }
  .glavna-nav ul{ flex-direction:row; gap:22px; padding:0; }
  .glavna-nav a{ border:0; padding:6px 0; font-size:15px; }
  .zaglavlje-tel{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--plava); color:var(--bela);
    padding:11px 20px; border-radius:3px;
    font-weight:700; text-decoration:none; white-space:nowrap;
  }
  .zaglavlje-tel:hover{ background:var(--plava-tamna); }
}

/* ---------- stalna traka za poziv na telefonu ---------- */
.traka-poziv{
  padding-bottom:env(safe-area-inset-bottom, 0px);
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr;
  border-top:3px solid var(--plava);
}
@media (prefers-reduced-motion: no-preference){
  .js .traka-poziv{
    transform:translateY(110%);
    transition:transform .34s cubic-bezier(.2,.84,.26,1);
  }
  .js .traka-poziv.vidljiva{ transform:translateY(0); }
}
.traka-poziv a{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--traka-v); text-decoration:none;
  font-weight:700; font-size:16px;
}
.traka-poziv .tp-zovi{ background:var(--plava); color:var(--bela); }
.traka-poziv .tp-racun{ background:var(--crna); color:var(--bela); }
@media (min-width: 860px){ .traka-poziv{ display:none; } }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--papir);
  padding-block:clamp(44px, 8vw, 88px);
}
.hero::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background-image:radial-gradient(rgba(0,24,69,.17) 1.4px, transparent 1.4px);
  background-size:18px 18px;
  /* tackice jenjavaju ka levoj strani, da tekst ostane na cistom */
  -webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 26%, #000 58%, #000 100%);
  mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 26%, #000 58%, #000 100%);
}
.hero h1{ max-width:14ch; }
.hero .naglas{ color:var(--plava); }
.hero-uvod{ max-width:46ch; font-size:clamp(17px, 4.4vw, 20px); margin-top:14px; }
.hero-oznake{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding:0; list-style:none;
}
.hero-oznake li{
  border:1px solid var(--linija); background:var(--bela); border-radius:3px;
  padding:8px 14px; font-size:14.5px; font-weight:600; color:var(--crna);
}

/* ---------- traka kljucnih brojki ---------- */
.brojke{
  background:var(--plava); color:var(--bela); padding-block:clamp(22px, 4vw, 32px);
  position:relative; isolation:isolate; overflow:hidden;
}
/* traka se popunjava sleva dok brojke odbrojavaju */
@media (prefers-reduced-motion: no-preference){
  /* Zastor sa mekom desnom ivicom sklizne udesno i otkrije cistu plavu.
     Ide preko transform-a, pa nema tvrde ivice ni preracunavanja rasporeda. */
  .js .brojke::before{
    content:""; position:absolute; inset:0 -20% 0 0; z-index:-1;
    background:linear-gradient(to right,
      rgba(11,11,11,.34) 0 62%, rgba(11,11,11,0) 100%);
    transform:translateX(0);
    transition:transform 1s cubic-bezier(.22,.72,.24,1);
  }
  .js .brojke.puna::before{ transform:translateX(120%); }
}
.brojke-red{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 16px; }
@media (min-width: 760px){ .brojke-red{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.brojka b{
  display:block; color:var(--bela); font-family:var(--naslov); font-weight:700;
  font-size:clamp(34px, 8vw, 50px); line-height:.9; letter-spacing:-.01em;
}
.brojka span{
  display:block; margin-top:5px; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- kalkulator ---------- */
.kalk{
  background:var(--bela); border:2px solid var(--crna);
  padding:clamp(20px, 5vw, 32px);
}
.kalk{ box-shadow:0 10px 30px rgba(20,20,20,.06); }

/* carobnjak: jedno pitanje na ekranu */
.carobnjak fieldset{ border:0; margin:0; padding:0; }
.tacke{ display:flex; gap:7px; list-style:none; margin:0 0 22px; padding:0; }
.tacke li{
  width:38px; height:4px; background:var(--linija); flex:none;
  position:relative; overflow:hidden;
}
.tacke li::before{
  content:""; position:absolute; inset:0; background:var(--plava);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .32s cubic-bezier(.22,.72,.24,1);
}
.tacke li.on::before{ transform:scaleX(1); }
.tacke li:nth-child(2)::before{ transition-delay:.06s; }
.tacke li:nth-child(3)::before{ transition-delay:.12s; }
@media (prefers-reduced-motion: reduce){
  .tacke li::before{ transition:none; }
}
.korak-panel[hidden]{ display:none; }
.korak-br{
  font-family:var(--naslov); font-size:15px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--plava); margin:0 0 8px; padding:0;
}
.korak-pitanje{
  display:block; font-family:var(--naslov); font-weight:700;
  font-size:clamp(26px,5.6vw,34px); line-height:1.04; text-transform:uppercase;
  color:var(--crna); margin:0 0 20px; padding:0;
}
.izbori{ display:grid; gap:10px; }
.izbori label{
  display:block; border:2px solid var(--linija); border-radius:3px;
  padding:16px 18px; cursor:pointer; background:var(--bela);
  transition:border-color .18s ease, background .18s ease;
}
.izbori label:hover{ border-color:var(--meta); }
.izbori input{ position:absolute; opacity:0; width:0; height:0; }
.izbori span{ display:block; font-size:14.5px; color:var(--tekst); }
.izbori span b{ display:block; font-size:17px; color:var(--crna); margin-bottom:3px; }
.izbori span em{ font-style:normal; color:var(--meta); font-size:14px; }
.izbori label:has(input:checked){ border-color:var(--plava); background:var(--plava-tint); }
.izbori label:has(input:focus-visible){ outline:3px solid var(--plava); outline-offset:2px; }
.korak-dugmad{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.korak-dugmad .dugme{ cursor:pointer; font-family:inherit; }
@media (max-width: 520px){ .korak-dugmad .dugme{ width:100%; text-align:center; } }

/* zone kao spojeni prekidac */
.segment{
  display:grid; gap:1px; background:var(--linija);
  grid-template-columns:minmax(0,1fr);
  border:2px solid var(--crna); border-radius:3px; overflow:hidden;
}
/* tri u redu samo kada kalkulator ima punu sirinu za njih,
   inace jedan ispod drugog, da nikad ne ostane prazna celija */
@media (min-width: 620px) and (max-width: 779px){
  .segment{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1120px){
  .segment{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.segment label{
  display:block; padding:14px 13px; cursor:pointer; background:var(--bela);
  transition:background .18s ease, color .18s ease;
}
.segment input{ position:absolute; opacity:0; width:0; height:0; }
.segment span{ display:block; font-size:15px; line-height:1.35; color:var(--tekst); }
.segment span b{ display:block; font-size:15px; color:var(--crna); white-space:nowrap; }
.segment span em{ font-style:normal; color:var(--meta); font-size:13px; }
.segment label:hover{ background:var(--plava-tint); }
.segment label:has(input:checked){ background:var(--plava); }
.segment label:has(input:checked) span,
.segment label:has(input:checked) span b{ color:var(--bela); }
.segment label:has(input:checked) span em{ color:rgba(255,255,255,.78); }
.segment label:has(input:focus-visible){ outline:3px solid var(--crna); outline-offset:-3px; }

/* sati: veliki broj i klizac */
.sati-red{ display:flex; align-items:center; gap:14px; }
.sati-red button{
  width:52px; height:52px; flex:none;
  border:2px solid var(--crna); background:var(--bela); color:var(--crna);
  font-size:26px; line-height:1; font-weight:700; cursor:pointer; border-radius:3px;
  transition:background .18s ease, color .18s ease;
}
.sati-red button:hover{ background:var(--crna); color:var(--bela); }
.sati-broj{
  flex:1; text-align:center;
  font-family:var(--naslov); font-size:clamp(46px,11vw,62px); font-weight:700;
  line-height:.9; color:var(--crna);
}
.klizac{
  -webkit-appearance:none; appearance:none;
  width:100%; height:30px; margin:14px 0 0; background:transparent; display:block;
}
.klizac::-webkit-slider-runnable-track{
  height:8px; border-radius:4px;
  background:linear-gradient(to right,
    var(--plava) 0 var(--p,4%), var(--linija) var(--p,4%) 100%);
}
.klizac::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; margin-top:-10px; border-radius:50%;
  background:var(--bela); border:3px solid var(--plava);
  box-shadow:0 1px 4px rgba(20,20,20,.22); cursor:pointer;
}
.klizac::-moz-range-track{ height:8px; border-radius:4px; background:var(--linija); }
.klizac::-moz-range-progress{ height:8px; border-radius:4px; background:var(--plava); }
.klizac::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; border:3px solid var(--plava);
  background:var(--bela); cursor:pointer;
}
.klizac:focus-visible{ outline:3px solid var(--plava); outline-offset:4px; }
.klizac-skala{
  display:flex; justify-content:space-between;
  font-size:12px; font-weight:600; color:var(--meta); margin-top:2px;
}

/* zbir u punoj plavoj traci */
.kalk-rezultat{ margin-top:0; }
.kalk-zbir{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--plava); color:var(--bela);
  margin-top:clamp(22px,4vw,32px); padding:clamp(16px,3.4vw,22px) clamp(18px,4vw,26px);
  border-radius:3px;
}
.kz-oznaka{
  font-family:var(--naslov); font-size:clamp(21px,5vw,27px); font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.kz-iznos{
  position:relative; display:inline-block; overflow:hidden;
  font-family:var(--naslov); font-size:clamp(42px,11vw,64px); font-weight:700;
  line-height:.86; white-space:nowrap;
  padding-block:.06em;
}
.kz-cifre{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .kz-cifre.ulazi{ animation:cifra-odozdo .38s cubic-bezier(.2,.82,.24,1) both; }
  .kz-cifre.izlazi{
    position:absolute; right:0; top:.06em;
    animation:cifra-gore .38s cubic-bezier(.4,0,.2,1) forwards;
  }
}
@keyframes cifra-odozdo{ from{ transform:translateY(108%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes cifra-gore{ to{ transform:translateY(-108%); opacity:0; } }

.kalk-rezultat{ margin-top:16px; }
.kalk-stavka{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; font-size:15.5px;
}
.kalk-stavka span:last-child{ font-weight:600; color:var(--crna); white-space:nowrap; }
.kalk-napomena{ margin-top:12px; font-size:13.5px; color:var(--meta); }

.kalk-stavka span:first-child{ color:var(--tekst); }

/* ---------- cenovnik ---------- */
.cene{ display:grid; gap:16px; }
@media (min-width: 800px){ .cene{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.cena-kartica{
  border:2px solid var(--linija); padding:24px 22px; background:var(--bela);
  display:flex; flex-direction:column;
}
.cena-kartica--istaknuta{ border-color:var(--crna); }
.cena-kartica h3{ margin-bottom:6px; }
.cena-iznos{
  font-family:var(--naslov); font-size:clamp(38px,9vw,52px); font-weight:700;
  color:var(--crna); line-height:.9; margin:10px 0 4px;
}
.cena-iznos small{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--meta); }
.cena-kartica ul{ list-style:none; margin:16px 0 0; padding:0; }
.cena-kartica li{
  padding:8px 0 8px 22px; position:relative; font-size:15.5px; border-top:1px solid var(--linija);
}
.cena-kartica li::before{
  content:""; position:absolute; left:0; top:16px;
  width:10px; height:2px; background:var(--plava);
}

/* ---------- specifikacije ---------- */
.spec{ list-style:none; margin:0; padding:0; border-top:2px solid var(--crna); }

.spec li{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--linija);
}

.spec dt,.spec .s-ime{ font-size:15.5px; }
.spec .s-vrednost{
  font-family:var(--naslov); font-size:22px; font-weight:700;
  color:var(--crna); white-space:nowrap;
}


/* ---------- kartice usluga ---------- */
.mreza{ display:grid; gap:16px; }
@media (min-width: 700px){ .mreza{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px){ .mreza--tri{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.kartica{
  border:2px solid var(--linija); background:var(--bela);
  transition:border-color .2s ease;
}
.sekcija--istaknuta .kartica{ background:var(--bela); }
.kartica h3{ margin-bottom:8px; }
.kartica p{ font-size:15.5px; }

/* kartica se otvara na mestu, bez novog ekrana */
.kartica summary{
  cursor:pointer; list-style:none; display:block;
  padding:22px 46px 22px 20px; position:relative;
}
.kartica summary::-webkit-details-marker{ display:none; }
.kartica summary::after{
  content:""; position:absolute; right:20px; top:30px;
  width:11px; height:11px;
  border-right:2.5px solid var(--plava); border-bottom:2.5px solid var(--plava);
  transform:rotate(45deg); transition:transform .25s ease;
}
.kartica[open] summary::after{ transform:rotate(-135deg); top:34px; }
.kartica:hover{ border-color:#C9C9C5; }
.kartica[open]{ border-color:var(--plava); }
.k-ime{
  display:block; font-family:var(--naslov); font-weight:700;
  font-size:clamp(20px,4.4vw,23px); line-height:1.05;
  text-transform:uppercase; color:var(--crna); margin-bottom:7px;
}
.k-kratko{ display:block; font-size:15.5px; color:var(--tekst); }
.kartica-telo{ padding:0 20px 22px; border-top:1px solid var(--linija); margin-top:2px; }
.kartica-telo p{ margin:18px 0 0; }
.k-podaci{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.k-podaci > div{
  flex:1 1 150px; background:var(--plava-tint);
  padding:12px 14px; border:1px solid var(--linija);
}
.k-podaci dt{
  font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--meta); margin-bottom:5px;
}
.k-podaci dd{
  margin:0; font-family:var(--naslov); font-size:22px; font-weight:700;
  color:var(--crna); line-height:1;
}
.k-veza{
  display:inline-block; justify-self:start; align-self:start;
  margin-top:16px; font-weight:600; font-size:15px;
  color:var(--plava); border-bottom:2px solid var(--plava); padding-bottom:2px;
}
.k-veza:hover{ color:var(--plava-tamna); border-color:var(--plava-tamna); }
@media (min-width: 700px){
  .kartica[open]{ grid-column:1 / -1; }
  .kartica[open] .kartica-telo{
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:26px; align-items:start; padding-top:18px;
  }
  .kartica[open] .kartica-telo p{ margin-top:0; }
  .kartica[open] .k-podaci{ margin-top:0; }
}

/* uvod sekcije sa video detaljem */
.poslovi-uvod{ display:grid; gap:24px; align-items:center; }
@media (min-width: 820px){
  .poslovi-uvod{ grid-template-columns:minmax(0,1fr) 300px; gap:40px; }
}
.petlja{ margin:0; max-width:300px; }
@media (min-width: 820px){ .petlja{ max-width:none; } }
.petlja img,
.petlja video{ width:100%; height:auto; display:block; }
/* Snimak umesto animiranog WebP-a. WebP je isao na 3,8 sličica u sekundi jer se
   usporavalo produzavanjem kadra; snimak drzi 24 i dekodira ga grafika. */
/* Studijska pozadina je skinuta i podmetnuta bela, pa masina stoji na strani bez
   kutije, isto kao kadrovi u hero-u. Okvir je zato beo, ne siv. */
.petlja-snimak{ background:#fff; }
.petlja figcaption{
  font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--meta); margin-top:2px;
}

/* iznos u lepljivoj traci kada kalkulator prodje */
.tp-racun .tp-cena{ font-family:var(--naslov); font-size:20px; letter-spacing:.02em; }

/* ---------- pitanja i odgovori ---------- */
.pitanja{ border-top:2px solid var(--crna); }
.pitanje{ border-bottom:1px solid var(--linija); }
.pitanje summary{
  cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font-family:var(--naslov); font-size:clamp(19px,4.6vw,23px); font-weight:700;
  color:var(--crna); text-transform:uppercase; line-height:1.1;
}
.pitanje summary::-webkit-details-marker{ display:none; }
.pitanje summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:14px; height:14px; margin-top:-9px;
  border-right:3px solid var(--plava); border-bottom:3px solid var(--plava);
  transform:rotate(45deg); transition:transform .22s ease;
}
.pitanje[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.pitanje .odgovor{ padding:0 0 20px; font-size:16px; margin:0; }
/* Glatko otvaranje ide preko grid-template-rows, jer se tako ne animira
   visina nego samo raspodela reda, pa nema preracunavanja rasporeda. */
.pitanje .omot-odgovora{ display:grid; grid-template-rows:0fr; }
.pitanje .omot-odgovora > div{ overflow:hidden; min-height:0; }
.pitanje[open] .omot-odgovora{ grid-template-rows:1fr; }
.pitanje.zatvara .omot-odgovora{ grid-template-rows:0fr; }
@media (prefers-reduced-motion: no-preference){
  .js .pitanje .omot-odgovora{ transition:grid-template-rows .3s cubic-bezier(.22,.72,.24,1); }
}

/* ---------- galerija ---------- */
.galerija{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
@media (min-width: 760px){ .galerija{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; } }

/* na telefonu se galerija prevlaci, sledeca slika viri sa desne ivice */
.galerija-vodic{ display:none; }
@media (max-width: 759px){
  .galerija{
    display:flex; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* izlazi iz okvira do same ivice ekrana */
    margin-inline:calc(-1 * clamp(18px, 5vw, 44px));
    padding-inline:clamp(18px, 5vw, 44px);
    scroll-padding-inline:clamp(18px, 5vw, 44px);
    scrollbar-width:none;
  }
  .galerija::-webkit-scrollbar{ display:none; }
  .snimak-teren{ flex:none; width:78%; scroll-snap-align:start; }
  .galerija img{ aspect-ratio:3/2; }
  .lupa-otvori{ cursor:default; }

  .galerija-vodic{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-top:14px;
  }
  .gv-broj{
    font-family:var(--naslov); font-size:17px; font-weight:700; color:var(--crna);
    letter-spacing:.04em;
  }
  .gv-broj b{ color:var(--plava); }
  .gv-tacke{ display:flex; gap:5px; flex:1; }
  .gv-tacke i{
    width:20px; height:7px; flex:none; position:relative; background:none;
  }
  /* siri se unutrasnja crtica preko transform-a, da se raspored ne preracunava */
  .gv-tacke i::before{
    content:""; position:absolute; inset:0 auto 0 50%;
    width:7px; margin-left:-3.5px; border-radius:4px; background:#C4CBD6;
    transform:scaleX(1); transform-origin:50% 50%;
    transition:transform .2s ease, background .2s ease;
  }
  .gv-tacke i.on::before{ transform:scaleX(2.86); background:var(--plava); }
  @media (prefers-reduced-motion: reduce){
    .gv-tacke i::before{ transition:none; }
  }
  .gv-uput{
    font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--meta);
  }
}
.snimak-teren{ margin:0; }
.lupa-otvori{
  display:block; width:100%; padding:0; border:2px solid var(--crna);
  background:var(--bela); cursor:zoom-in; line-height:0;
  transition:border-color .18s ease;
}
.lupa-otvori:hover{ border-color:var(--plava); }
.lupa-otvori:focus-visible{ outline:3px solid var(--plava); outline-offset:3px; }
.galerija img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.snimak-teren figcaption{
  margin-top:8px; font-size:13.5px; line-height:1.45; color:var(--meta);
}

/* uvecana slika */
.lupa{
  border:0; padding:0; background:transparent;
  max-width:min(94vw, 1400px); max-height:92vh;
  overscroll-behavior:contain;
}
.lupa::backdrop{ background:rgba(20,20,20,.86); }
.lupa img{ display:block; width:100%; height:auto; max-height:82vh; object-fit:contain; }
.lupa figcaption{
  color:var(--bela); font-size:14.5px; padding:12px 4px 0; text-align:left;
}
.lupa-zatvori{
  position:absolute; top:-46px; right:0;
  background:none; border:2px solid var(--bela); color:var(--bela);
  width:38px; height:38px; font-size:20px; line-height:1; cursor:pointer; border-radius:3px;
}
.lupa-zatvori:hover{ background:var(--bela); color:var(--crna); }
.lupa-omot{ position:relative; }

/* fotografija uz elektro radove */
.elektro-snimak{ margin:0; }
.elektro-snimak img{ width:100%; height:auto; display:block; border:2px solid var(--crna); }
.elektro-snimak figcaption{
  margin-top:8px; font-size:13.5px; color:var(--meta);
}

/* veza iz cenovnika u kalkulator */
.cena-veza{
  display:inline-block; align-self:flex-start;
  margin-top:auto; padding-top:16px; font-weight:600; font-size:15px;
  color:var(--plava); border-bottom:2px solid var(--plava); padding-bottom:2px;
}
.cena-veza:hover{ color:var(--plava-tamna); border-color:var(--plava-tamna); }
.cena-kartica{ }
.galerija-prazno{
  border:2px dashed var(--linija); padding:34px 20px; text-align:center; color:var(--meta);
  font-size:15.5px;
}

/* ---------- kontakt ---------- */
.kontakt-mreza{ display:grid; gap:26px; }
@media (min-width: 860px){ .kontakt-mreza{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; } }
.kontakt-lista{ list-style:none; margin:0; padding:0; border-top:2px solid var(--plava); }
.kontakt-lista li{ padding:16px 0; border-bottom:1px solid var(--linija); }
.kontakt-lista .k-oznaka{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--plava); margin-bottom:4px;
}
.kontakt-lista a,.kontakt-lista strong{
  font-family:var(--naslov); font-size:clamp(24px,5.5vw,30px); font-weight:700;
  color:var(--crna); text-decoration:none; line-height:1.05;
}
.kontakt-lista a:hover{ color:var(--plava); }

/* ---------- podnozje ---------- */
.podnozje{
  background:#0B0B0B; color:#8E8E8B; padding-block:36px; font-size:14.5px;
  border-top:1px solid rgba(255,255,255,.1);
}
.podnozje a{ color:#C9C9C6; }
.podnozje a:hover{ color:var(--plava); }
.podnozje img{ height:44px; width:auto; margin-bottom:14px; }
.podnozje-red{ display:flex; flex-direction:column; gap:18px; }
@media (min-width: 780px){
  .podnozje-red{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
}

/* ---------- otkrivanje pri skrolu ---------- */
.js .otkrij{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.68,.28,1), transform .6s cubic-bezier(.22,.68,.28,1);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.js .otkrij.vidljiv{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .otkrij{ opacity:1; transform:none; transition:none; }
  .pitanje summary::after{ transition:none; }
}

/* ---------- pomocne ---------- */
.razmak-gore{ margin-top:clamp(24px, 5vw, 40px); }
.centar-mera{ max-width:70ch; }


/* ---------- dugmad za poruke ---------- */
.poruke{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.poruka-dugme{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:13px 22px; flex:1 1 100%;
  border:2px solid var(--crna); border-radius:3px;
  background:var(--bela); color:var(--crna);
  font-weight:700; font-size:16px; text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
.poruka-dugme:hover{ background:var(--crna); color:var(--bela); }
@media (min-width: 560px){ .poruka-dugme{ flex:0 1 auto; } }
.poruke-uvod{ font-size:14.5px; color:var(--meta); margin:18px 0 0; }

/* ---------- animirana masina u hero-u ---------- */
.hero-mreza{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,5vw,48px); align-items:center; }
@media (min-width: 900px){ .hero-mreza{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } }
.hero-masina{ width:100%; }
.masina{ width:100%; height:auto; display:block; }

/* ---------- fotografije masine u hero-u ---------- */
/* masina je izdvojena sa providnom pozadinom, bez okvira i bez maske */
.masina-foto{ position:relative; width:100%; aspect-ratio:1830/1034; }
.masina-foto::after{
  content:""; position:absolute; z-index:-1;
  left:5%; right:57%; bottom:1%; height:7%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(20,20,20,.30) 0%, rgba(20,20,20,.16) 40%, rgba(20,20,20,0) 72%);
}
.masina-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
}
/* svaki kadar je svoj sloj, menja se samo prozirnost, bez ponovnog dekodiranja.
   Bez klase .sloj slika je vidljiva, pa radi i kada JavaScript ne prodje. */
.masina-foto img.sloj{ opacity:0; }
.masina-foto img.sloj.tekuci{ opacity:1; }
/* masina uklizava u kadar cim se stranica ucita */
@media (prefers-reduced-motion: no-preference){
  .js .masina-foto{ animation:ulazak 1.15s cubic-bezier(.17,.78,.26,1) both; }
}
@keyframes ulazak{
  from{ transform:translateX(26%) scale(.98); opacity:0; }
  55%{ opacity:1; }
  to{ transform:translateX(0) scale(1); opacity:1; }
}

@media (max-width: 700px){
  .masina-foto img{ transform:scale(1.06); transform-origin:50% 62%; }
}

/* na telefonu je hero centriran */
@media (max-width: 899px){
  .hero-mreza > div:first-child{ text-align:center; }
  .hero h1{ max-width:none; }
  .hero-uvod{ margin-inline:auto; }
  .hero-oznake{ justify-content:center; }
  .hero .akcije{ justify-content:center; }
  .hero .akcije .dugme{ min-width:min(300px, 100%); }
}

/* ---------- koliko je 20 metara ---------- */
.visina-blok{ display:grid; gap:30px; }
@media (min-width: 860px){ .visina-blok{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; } }

.visina{ max-width:400px; }
.visina-crtez{ width:100%; height:auto; display:block; overflow:visible; }
.v-sprat{ font-family:var(--sans); font-size:11.5px; font-weight:600; fill:#A8A8A4; }
.v-kota{ font-family:var(--sans); font-size:11px; font-weight:600; fill:var(--meta); }
.v-dohvat{
  stroke:var(--plava); opacity:.45;
  transform-box:fill-box; transform-origin:100% 50%;
  transform:scaleX(0);
  transition:transform .62s cubic-bezier(.22,.72,.24,1) 1.3s;
}
.visina.vidljiv .v-dohvat{ transform:scaleX(1); }
.v-plocica{ fill:var(--plava); }
.v-vrh{
  font-family:var(--naslov); font-size:24px; font-weight:700;
  fill:var(--bela); letter-spacing:.01em;
}
.v-traka{
  stroke:var(--plava);
  stroke-dasharray:380; stroke-dashoffset:380;
  transition:stroke-dashoffset 1.3s cubic-bezier(.22,.72,.24,1);
}
.visina.vidljiv .v-traka{ stroke-dashoffset:0; }
.v-plocica, .v-vrh{
  opacity:0; transform:translateY(-16px);
  transition:opacity .34s ease 1.1s, transform .52s cubic-bezier(.2,.88,.26,1) 1.1s;
}
.visina.vidljiv .v-plocica, .visina.vidljiv .v-vrh{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .v-traka{ transition:none; stroke-dashoffset:0; }
  .v-plocica, .v-vrh{ opacity:1; transform:none; transition:none; }
  .v-dohvat{ transform:none; transition:none; }
}

/* ---------- bocni dohvat ---------- */
.dohvat{ position:relative; }

.dohvat img{
  width:100%; height:auto; display:block;
  border:2px solid var(--crna);
}
.dohvat-kota{
  position:absolute; left:4%; bottom:10%;
  background:var(--plava); color:var(--bela);
  padding:8px 15px; border-radius:3px;
  font-family:var(--naslov); font-size:22px; font-weight:700; letter-spacing:.01em;
}

/* ---------- prolazi li vozilo kroz kapiju ---------- */
.prolaz{ }
.prolaz h3{ margin-bottom:16px; }
.prolaz-blok{ display:grid; gap:clamp(20px,4vw,36px); align-items:center; }
@media (min-width: 820px){
  .prolaz-blok{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
}
.prolaz-crtez{
  width:100%; height:auto; display:block; max-width:520px;
  background:var(--bela); border:2px solid var(--linija); border-radius:3px;
}
.p-kota{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--crna); }
.p-mera{ font-family:var(--naslov); font-size:19px; font-weight:700; fill:var(--plava); }
#mera-levo{ stroke:var(--plava); }
#stub-levi, #stub-desni{ transition:x .18s ease; }
.prolaz-crtez image{ pointer-events:none; }
.prolaz-crtez.tesno #stub-levi, .prolaz-crtez.tesno #stub-desni{ fill:#8A6A16; }
.prolaz-crtez.ne-staje #stub-levi, .prolaz-crtez.ne-staje #stub-desni{ fill:#A32C1E; }
.prolaz-crtez.ne-staje .p-mera, .prolaz-crtez.ne-staje #mera-levo{ fill:#A32C1E; stroke:#A32C1E; }
.prolaz-crtez.tesno .p-mera, .prolaz-crtez.tesno #mera-levo{ fill:#8A6A16; stroke:#8A6A16; }
.prolaz-broj{
  display:block; font-family:var(--naslov); font-size:clamp(40px,9vw,54px);
  font-weight:700; line-height:.9; color:var(--crna); margin:4px 0 6px;
}
.prolaz-stanje{
  margin:16px 0 0; padding:12px 15px; border:2px solid var(--plava);
  background:var(--plava-tint); font-weight:600; font-size:15.5px; color:var(--crna);
}
.prolaz-stanje.tesno{ border-color:#8A6A16; background:#FBF5E4; }
.prolaz-stanje.ne-staje{ border-color:#A32C1E; background:#FBEDEB; }
@media (prefers-reduced-motion: reduce){
  #stub-levi, #stub-desni{ transition:none; }
}

/* ---------- zbijanje sekcije Oprema, samo ovde ---------- */
#oprema .spec li{ padding-block:11px; }
#oprema .razmak-gore{ margin-top:28px; }
#oprema .prolaz-crtez{ max-width:470px; }
#oprema .prolaz h3{ margin-bottom:12px; }

/* ---------- reklame i podrucje rada ---------- */
@media (min-width: 700px){ .mreza--dva{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.kartica-usluga{
  border:2px solid var(--linija); background:var(--bela);
  padding:22px 20px; transition:border-color .2s ease;
}
.kartica-usluga:hover{ border-color:var(--plava); }
.kartica-usluga h3{ margin-bottom:8px; }
.kartica-usluga p{ font-size:15.5px; margin:0; }

.podrucje-mreza{ display:grid; gap:16px; }
@media (min-width: 700px){ .podrucje-mreza{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; } }
.podrucje-blok{
  background:var(--plava-tint); padding:22px 22px 24px;
  border-top:3px solid var(--plava);
}
.podrucje-blok h3{ margin-bottom:8px; }
.podrucje-blok p{ margin:0; font-size:16px; }

/* ---------- ciljevi za prst ---------- */
/* Zona dodira se siri preko pseudoelementa, pa se izgled ne menja
   a prst dobija najmanje 44 px, koliko traze i iOS i WCAG. */
@media (pointer: coarse){
  .cena-veza, .k-veza, .kontakt-lista a, .podnozje a,
  .glavna-nav a, .poruka-dugme{
    position:relative;
  }
  .cena-veza::after, .k-veza::after, .kontakt-lista a::after,
  .podnozje a::after, .glavna-nav a::after{
    content:""; position:absolute; left:0; right:0;
    top:50%; height:44px; transform:translateY(-50%);
  }
  .logo-veza{ min-height:44px; display:inline-flex; align-items:center; }
  .lupa-zatvori{ min-width:44px; min-height:44px; }
}

/* ---------- brojevi ne poskakuju ---------- */
.kz-iznos, .kalk-stavka span:last-child, .brojka b,
.cena-iznos, .prolaz-broj, .sati-broj, .gv-broj{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- naslovi bez usamljene reci u redu ---------- */
h1, h2, h3{ text-wrap:balance; }
.uvod, .lid{ text-wrap:pretty; }

/* ---------- odziv na pritisak ---------- */
/* Na telefonu nema hover stanja, pa je pritisak jedini trenutak kada
   sajt moze da potvrdi da je dodir primljen. Izlaz je brzi od ulaza. */
@media (prefers-reduced-motion: no-preference){
  .dugme, .poruka-dugme, .zaglavlje-tel, .traka-poziv a,
  .sati-red button, .cena-veza, .k-veza, .izbori label{
    transition:transform .16s cubic-bezier(.2,.8,.3,1),
               background .18s ease, color .18s ease, border-color .18s ease;
  }
  .dugme:active, .poruka-dugme:active, .zaglavlje-tel:active,
  .traka-poziv a:active, .sati-red button:active, .izbori label:active{
    transform:scale(.97);
    transition-duration:.09s;
  }
  .cena-veza:active, .k-veza:active{ transform:translateY(1px); transition-duration:.09s; }
}

/* ---------- 5. cenovnik se prevlaci na telefonu ---------- */
@media (max-width: 799px){
  .cene{
    display:flex; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * clamp(18px, 5vw, 44px));
    padding-inline:clamp(18px, 5vw, 44px);
    scroll-padding-inline:clamp(18px, 5vw, 44px);
    scrollbar-width:none;
  }
  .cene::-webkit-scrollbar{ display:none; }
  .cena-kartica{ flex:none; width:82%; scroll-snap-align:start; }

  /* Sekcija je na telefonu bila 877 px, taman toliko da ne stane u ekran od 812.
     Zbijena je na 759 px bez izbacivanja sadrzaja: iznos stane u jedan red pa
     treca kartica vise ne lomi cenu na dva reda i ne dize sve tri. */
  #cene .uvod{ font-size:16px; line-height:1.5; margin-bottom:10px; }
  #cene .cene{ margin-top:16px; }
  .cena-kartica{ padding:18px; }
  .cena-iznos{ font-size:30px; line-height:1.05; margin:6px 0 2px; }
  .cena-iznos small{ font-size:13px; }
  .cena-kartica ul{ margin-top:10px; }
  .cena-kartica li{ padding:6px 0 6px 20px; font-size:15px; }
  .cena-kartica li::before{ top:14px; }
  .cena-veza{ padding-top:12px; }
  #cene .kalk-napomena{ margin-top:14px; font-size:13px; line-height:1.5; }
}