/* =========================================================
   BMV Opruge - SVETLA TEMA
   Nije invert tamne. Zamisao je tehnicki crtez na papiru:
   bela strana, ostro crno-plavo mastilo, tanke sive linije,
   i dve tamne trake koje drze ritam strane (referentne
   primene i podnozje). Hero ostaje taman jer je fotografija
   opruge na crnoj podlozi najjaci vizuelni adut sajta.
   Ucitava se uvek, primenjuje se samo pod html[data-tema=svetla].
   ========================================================= */

html[data-tema="svetla"]{
  /* Papir i mastilo */
  --crna:#FFFFFF;         /* osnovna pozadina strane */
  --tamna:#FFFFFF;        /* odeljak--tamni -> bela */
  --panel:#EEF2F6;        /* odeljak--panel -> svetlo siva */
  --panel2:#E3E9EF;
  --linija:#DCE4EB;
  --linija2:#C1CDD8;

  --tekst:#101C27;
  --tekst2:#54677A;
  --tekst3:#67798C;

  /* Plava je zatamnjena da bi imala kontrast na beloj.
     Puna markica brenda (#2E9FDA) ostaje za ispune i ivice. */
  --plava:#14719F;
  --plava-sv:#0F5B80;
  --plava-tm:#0C4E6E;
  --plava-mek:rgba(20,113,159,.09);

  /* odeljak--svetli se OKRECE: postaje tamna traka od mastila */
  --svetla:#0F1922;
  --svetla2:#DCE4EB;      /* ostaje svetla, koristi se za ivice belih kartica */
  --bela:#FFFFFF;
  --tm-tekst:#EDF2F7;     /* tekst na tamnoj traci */
  --tm-tekst2:#9AACBC;
}

/* ---------- Zaglavlje: uvek puno, bez providnog stanja ---------- */
html[data-tema="svetla"] .zaglavlje,
html[data-tema="svetla"] .zaglavlje.zalepljeno,
html[data-tema="svetla"] body:not(.naslovna) .zaglavlje{
  background:rgba(255,255,255,.93);
  border-bottom-color:var(--linija);
  backdrop-filter:saturate(150%) blur(10px);
}
html[data-tema="svetla"] body.meni-otvoren .zaglavlje{background:#fff}
html[data-tema="svetla"] .zaglavlje{box-shadow:0 1px 0 rgba(16,28,39,.03)}
html[data-tema="svetla"] .meni .sub-menu{
  background:#fff;box-shadow:0 18px 40px rgba(16,28,39,.13)
}
html[data-tema="svetla"] .meni .sub-menu a:hover{background:var(--panel)}
/* Na desktopu .nav mora da bude providan, inace se vidi kao bela ploca
   preko blago providne pozadine zaglavlja. Bela je samo za mobilni preklop. */
@media(max-width:900px){
  html[data-tema="svetla"] .nav{background:#fff}
}

/* ---------- Hero ostaje tamna traka ---------- */
/* Hero ostaje tamna traka. Veo se ne dira: --veo je zakucano taman u main.css
   i sam se prilagođava mobilnom, pa ga ovde ne treba pregaziti. */
html[data-tema="svetla"] .hero{background:#0A0E13}
html[data-tema="svetla"] .hero h1{color:#F3F7FA}
html[data-tema="svetla"] .hero h1 em{color:#5CBDF0}
html[data-tema="svetla"] .hero .oznaka{color:#5CBDF0}
html[data-tema="svetla"] .hero .oznaka::before{background:#5CBDF0}
html[data-tema="svetla"] .hero-uvod{color:#B9C8D6}
html[data-tema="svetla"] .hero-legenda{color:#8A9CAD}
html[data-tema="svetla"] .hero-legenda b{color:#5CBDF0}
html[data-tema="svetla"] .hero .dugme--glavno{background:#2E9FDA;border-color:#2E9FDA;color:#04131D}
html[data-tema="svetla"] .hero .dugme--glavno:hover{background:#5CBDF0;border-color:#5CBDF0}
html[data-tema="svetla"] .hero .dugme--obris{border-color:rgba(255,255,255,.4);color:#EDF2F7}
html[data-tema="svetla"] .hero .dugme--obris:hover{border-color:#5CBDF0;color:#5CBDF0}

/* ---------- Traka brojki: bela sa jakim ivicama ---------- */
html[data-tema="svetla"] .brojke{background:#fff}
html[data-tema="svetla"] .brojka b{color:var(--tekst)}
html[data-tema="svetla"] .brojka b i{color:var(--plava)}
html[data-tema="svetla"] .brojka::before{background:#2E9FDA}

/* ---------- Mreza kao milimetarski papir ---------- */
html[data-tema="svetla"] .mreza::before{
  background-image:
    linear-gradient(rgba(16,28,39,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,28,39,.045) 1px,transparent 1px);
}
/* na okrenutoj tamnoj traci mreza mora da bude svetla */
html[data-tema="svetla"] .odeljak--svetli.mreza::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
}

/* ---------- Kartice programa ---------- */
html[data-tema="svetla"] .kartica-program{background:#fff}
html[data-tema="svetla"] .kartica-program:hover{background:var(--panel)}
html[data-tema="svetla"] .kartica-program .ikona{color:var(--plava)}

/* ---------- Grane ---------- */
html[data-tema="svetla"] .kartica-grana{background:#fff;border-color:var(--linija)}
html[data-tema="svetla"] .kartica-grana:hover{border-color:var(--linija2);box-shadow:0 10px 26px rgba(16,28,39,.06)}
html[data-tema="svetla"] .kartica-grana--nosac{
  border-color:#9FCDE6;background:linear-gradient(160deg,rgba(46,159,218,.1),#fff 62%)
}

/* ---------- Odeljak--svetli je sada TAMNA traka ---------- */
html[data-tema="svetla"] .odeljak--svetli{color:var(--tm-tekst)}
html[data-tema="svetla"] .odeljak--svetli h2,
html[data-tema="svetla"] .odeljak--svetli h3{color:var(--tm-tekst)}
html[data-tema="svetla"] .odeljak--svetli p{color:var(--tm-tekst2)}
html[data-tema="svetla"] .odeljak--svetli .oznaka{color:#5CBDF0}
html[data-tema="svetla"] .odeljak--svetli .oznaka::before{background:#5CBDF0}
html[data-tema="svetla"] .odeljak--svetli .veza{color:#5CBDF0}
html[data-tema="svetla"] .odeljak--svetli .spisak-kvacica li{color:var(--tm-tekst2)}
html[data-tema="svetla"] .odeljak--svetli .spisak-kvacica .ikona{color:#5CBDF0}
html[data-tema="svetla"] .odeljak--svetli .tabela-param th{color:var(--tm-tekst2)}
html[data-tema="svetla"] .odeljak--svetli .tabela-param td{color:var(--tm-tekst)}
html[data-tema="svetla"] .odeljak--svetli .tabela-param th,
html[data-tema="svetla"] .odeljak--svetli .tabela-param td{border-color:rgba(255,255,255,.12)}
html[data-tema="svetla"] .odeljak--svetli .dugme--obris{border-color:rgba(255,255,255,.34);color:var(--tm-tekst)}
html[data-tema="svetla"] .odeljak--svetli .dugme--obris:hover{border-color:#5CBDF0;color:#5CBDF0}
html[data-tema="svetla"] .odeljak--svetli .napomena-kalk{color:var(--tm-tekst2);border-top-color:rgba(255,255,255,.14)}

/* Bele kartice primene na toj tamnoj traci */
html[data-tema="svetla"] .kartica-primena{border-color:transparent;box-shadow:0 12px 30px rgba(0,0,0,.28)}
html[data-tema="svetla"] .kartica-primena:hover{box-shadow:0 20px 44px rgba(0,0,0,.38)}
html[data-tema="svetla"] .primena-slika{
  background:radial-gradient(ellipse at 50% 45%,#fff 0%,#EDF1F5 70%);
  border-bottom-color:#E2E8EE
}
html[data-tema="svetla"] .kartica-primena h3{color:#101C27}
html[data-tema="svetla"] .kartica-primena p{color:#54677A}
html[data-tema="svetla"] .kartica-primena .grana{color:var(--plava)}

/* ---------- Materijali ---------- */
html[data-tema="svetla"] .materijal{background:#fff}
html[data-tema="svetla"] .materijal .norma{color:var(--plava);border-color:#A7CFE6;background:rgba(46,159,218,.07)}

/* ---------- Izdvojeni blokovi ---------- */
html[data-tema="svetla"] .izdvojeno{
  background:linear-gradient(135deg,#F5F8FA 0%,#fff 60%);
  border-color:var(--linija);border-left-color:#2E9FDA;
  box-shadow:0 8px 24px rgba(16,28,39,.05)
}

/* ---------- Slike ---------- */
html[data-tema="svetla"] .red-slika{border-color:var(--linija);box-shadow:0 10px 30px rgba(16,28,39,.07)}
html[data-tema="svetla"] .red-slika::after{
  background:linear-gradient(180deg,transparent 55%,rgba(16,28,39,.28) 100%)
}
html[data-tema="svetla"] .red-slika--proizvod{
  background:radial-gradient(ellipse at 50% 45%,#FFFFFF 0%,#E9EEF3 74%);
  border-color:var(--linija)
}
html[data-tema="svetla"] .red-slika--proizvod img{
  filter:drop-shadow(0 18px 26px rgba(16,28,39,.22))
}
html[data-tema="svetla"] .red-slika--proizvod::after{display:none}

/* ---------- Kalkulator ---------- */
html[data-tema="svetla"] .kalk-panel{background:#fff;box-shadow:0 8px 24px rgba(16,28,39,.05)}
html[data-tema="svetla"] .kalk-crtez{background:#FBFCFD;border-color:var(--linija)}
html[data-tema="svetla"] .izlaz{background:#fff}
html[data-tema="svetla"] .kalk-red input[type=number],
html[data-tema="svetla"] .kalk-red select{background:#F7F9FB;border-color:var(--linija2);color:var(--tekst)}
html[data-tema="svetla"] .kalk-upozorenje--ok{background:rgba(20,113,159,.07);border-color:#A7CFE6;color:#2C4657}
html[data-tema="svetla"] .kalk-upozorenje--pazi{background:rgba(186,110,20,.08);border-color:#E0BA84;color:#8A5A10}
html[data-tema="svetla"] .kalk-upozorenje--lose{background:rgba(190,50,50,.07);border-color:#E5A5A5;color:#9E2C2C}

/* ---------- Obrasci ---------- */
html[data-tema="svetla"] .grupa-obrasca{background:#fff;box-shadow:0 6px 20px rgba(16,28,39,.04)}
html[data-tema="svetla"] .polje input,
html[data-tema="svetla"] .polje select,
html[data-tema="svetla"] .polje textarea{background:#F7F9FB;border-color:var(--linija2);color:var(--tekst)}
html[data-tema="svetla"] .tip span{background:#F7F9FB;border-color:var(--linija2)}
html[data-tema="svetla"] .tip span:hover{background:#fff}
html[data-tema="svetla"] .tip input:checked+span{background:rgba(46,159,218,.1);border-color:#2E9FDA}
html[data-tema="svetla"] .prilog{background:#F7F9FB;border-color:var(--linija2)}
html[data-tema="svetla"] .prilog .izbor{background:#fff;border-color:var(--linija2)}
html[data-tema="svetla"] .poruka--ok{background:rgba(30,140,90,.09);border-color:#9FD3BA;color:#1B6A47}
html[data-tema="svetla"] .poruka--greska{background:rgba(190,50,50,.07);border-color:#E5A5A5;color:#9E2C2C}

/* ---------- Zaglavlje podstrane ---------- */
html[data-tema="svetla"] .zag-strane{
  background:linear-gradient(180deg,#F4F7FA 0%,#fff 100%);
  border-bottom-color:var(--linija)
}

/* ---------- Kontakt ---------- */
html[data-tema="svetla"] .mapa{border-color:var(--linija)}
html[data-tema="svetla"] .mapa iframe{filter:grayscale(.35) contrast(1.02)}

/* ---------- CTA ostaje plava ---------- */
html[data-tema="svetla"] .cta{
  background:linear-gradient(120deg,#1B7CB0 0%,#12546F 58%,#0F1922 100%)
}
html[data-tema="svetla"] .cta h2{color:#fff}
html[data-tema="svetla"] .cta p{color:rgba(255,255,255,.85)}

/* ---------- Podnozje: druga tamna traka, zatvara stranu ---------- */
html[data-tema="svetla"] .podnozje{background:#0F1922;border-top-color:#0F1922}
html[data-tema="svetla"] .podnozje h4{color:#5CBDF0}
html[data-tema="svetla"] .podnozje p,
html[data-tema="svetla"] .podnozje a,
html[data-tema="svetla"] .podnozje li{color:#9AACBC}
html[data-tema="svetla"] .podnozje a:hover{color:#5CBDF0}
html[data-tema="svetla"] .podnozje .logo-tekst b{color:#EDF2F7}
html[data-tema="svetla"] .podnozje-dno{border-top-color:rgba(255,255,255,.1);color:#7E90A1}
html[data-tema="svetla"] .podnozje-dno a{color:#7E90A1}
html[data-tema="svetla"] .podnozje .potpis strong{color:#B7C6D3}

/* ---------- Prekidac teme ---------- */
.tema-dugme{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  background:none;border:1px solid var(--linija2);border-radius:var(--r);
  color:var(--tekst2);padding:0;transition:all .2s var(--pr)
}
.tema-dugme:hover{border-color:var(--plava);color:var(--plava)}
.tema-dugme .ikona{width:19px;height:19px;stroke-width:1.7}
.tema-dugme .ik-svetla{display:none}
html[data-tema="svetla"] .tema-dugme .ik-svetla{display:block}
html[data-tema="svetla"] .tema-dugme .ik-tamna{display:none}
/* na naslovnoj u tamnoj temi zaglavlje je providno preko hera */
body.naslovna .zaglavlje:not(.zalepljeno) .tema-dugme{border-color:rgba(255,255,255,.28);color:#E9EEF4}
html[data-tema="svetla"] body.naslovna .zaglavlje:not(.zalepljeno) .tema-dugme{
  border-color:var(--linija2);color:var(--tekst2)
}
@media(max-width:900px){
  /* na uskim ekranima prekidac ide levo od hamburgera */
  .tema-dugme{margin-left:auto}
  .meni-dugme{order:1;margin-left:.6rem}
}