/* ==========================================================================
   D&S Company – glavni stil sajta
   --------------------------------------------------------------------------
   Boje i osnovna podešavanja su na jednom mestu (sekcija :root ispod).
   Ako želite da promenite boju sajta, menjajte samo vrednosti u :root.
   ========================================================================== */

:root {
  /* Osnovne boje firme (preuzete iz logoa) */
  --boja-tamna: #0f3566;        /* tamna varijanta plave iz logoa: footer, naslovi, trake */
  --boja-primarna: #1f64ba;     /* plava iz logoa: linkovi, meni, detalji */
  --boja-logo-zelena: #5cb74a;  /* zelena iz logoa: linije i ukrasni detalji */
  --boja-akcent: #378a2f;       /* tamnija zelena: dugmad (bolje čitljiv beli tekst) */
  --boja-akcent-hover: #2d7326;

  /* Neutralne boje */
  --boja-tekst: #1b2733;
  --boja-tekst-svetli: #5b6b7a;
  --boja-pozadina: #ffffff;
  --boja-pozadina-siva: #f3f5f7;
  --boja-linija: #dde3e8;
  --boja-placeholder: #d6dbe0;  /* sivi placeholder za slike */

  --font: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 8px;
  --sirina: 1200px;             /* maksimalna širina sadržaja */
  --senka: 0 2px 10px rgba(15, 53, 102, 0.08);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--boja-tekst);
  background: var(--boja-pozadina);
}

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

a { color: var(--boja-primarna); }

h1, h2, h3 {
  color: var(--boja-tamna);
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

.kontejner {
  width: 100%;
  max-width: var(--sirina);
  margin: 0 auto;
  padding: 0 20px;
}

.sekcija { padding: 64px 0; }
.sekcija--siva { background: var(--boja-pozadina-siva); }

.sekcija-uvod {
  max-width: 720px;
  color: var(--boja-tekst-svetli);
  margin-bottom: 32px;
}

/* ----- Dugmad ----- */
.dugme {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid var(--boja-akcent);
  border-radius: var(--radius);
  background: var(--boja-akcent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.dugme:hover { background: var(--boja-akcent-hover); border-color: var(--boja-akcent-hover); }

.dugme--obrub {
  background: transparent;
  color: var(--boja-akcent);
}
.dugme--obrub:hover { color: #fff; }

.dugme--veliko { padding: 16px 32px; font-size: 1.1rem; }
.dugme--puna-sirina { width: 100%; text-align: center; }

/* ==========================================================================
   PLACEHOLDER ZA SLIKE
   Svaka slika na sajtu je u okviru <figure class="slika">.
   Dok fajl slike ne postoji, vidi se sivi okvir sa natpisom "SLIKA: ime".
   Kada ubacite fajl sa tačnim imenom u folder /images, slika se sama prikaže.
   ========================================================================== */
.slika {
  position: relative;
  margin: 0;
  background: var(--boja-placeholder);
  aspect-ratio: 4 / 3;          /* podrazumevani odnos; menja se klasama ispod */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slika--3x2 { aspect-ratio: 3 / 2; }
.slika--1x1 { aspect-ratio: 1 / 1; }
.slika--16x9 { aspect-ratio: 16 / 9; }
.slika--zaobljena { border-radius: var(--radius); box-shadow: var(--senka); }

.slika__natpis {
  padding: 8px 12px;
  color: #56636f;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

.slika img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Beli header (logo ima belu pozadinu) sa zelenom linijom kao u logou */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 3px solid var(--boja-logo-zelena);
  box-shadow: 0 2px 8px rgba(15, 53, 102, 0.08);
}

.header__unutra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 16px;
}

/* Logo: visina 52 px, širina se prilagođava sama */
.logo {
  display: block;
  flex-shrink: 0;
}
.logo img {
  height: 52px;
  width: auto;
}

.meni {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.meni a {
  display: block;
  padding: 8px 12px;
  color: var(--boja-tamna);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  border-radius: 6px;
}
.meni a:hover { background: #eef4fb; color: var(--boja-primarna); }
.meni a.aktivno { color: var(--boja-primarna); background: #e4edf9; font-weight: 600; }
.meni .meni__dugme a { background: var(--boja-akcent); color: #fff; margin-left: 8px; }
.meni .meni__dugme a:hover { background: var(--boja-akcent-hover); }

/* Prekidač jezika SR / EN */
.meni__jezik {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  padding: 3px;
  border: 1px solid var(--boja-linija);
  border-radius: 8px;
}
.meni .meni__jezik a {
  padding: 5px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--boja-tekst-svetli);
}
.meni .meni__jezik a.aktivno { background: var(--boja-primarna); color: #fff; }

/* Padajući meni "Proizvodi" */
.meni__grupa { position: relative; }
.meni__otvori {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--boja-tamna);
  cursor: pointer;
  white-space: nowrap;
}
.meni__otvori:hover { background: #eef4fb; color: var(--boja-primarna); }
.meni__otvori.aktivno { color: var(--boja-primarna); background: #e4edf9; font-weight: 600; }
.strelica {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
.meni__grupa.otvoren .strelica { transform: rotate(-135deg) translateY(-2px); }
.podmeni {
  display: none;
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 230px;
  background: #fff;
}
.meni__grupa.otvoren .podmeni { display: block; }

/* Na računaru: podmeni lebdi ispod dugmeta i otvara se i prelaskom miša */
@media (min-width: 901px) {
  .podmeni {
    position: absolute;
    top: 100%;
    left: 0;
    border-top: 3px solid var(--boja-logo-zelena);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 24px rgba(15, 53, 102, 0.15);
  }
  .meni__grupa:hover .podmeni,
  .meni__grupa:focus-within .podmeni { display: block; }
}

/* Dugme za meni na telefonu (hamburger) */
.meni-prekidac {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.meni-prekidac span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--boja-tamna);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .meni__otvori { width: 100%; justify-content: space-between; padding: 12px; }
  .meni__jezik { align-self: flex-start; margin: 12px 0 0; }
  .podmeni { padding: 0 0 4px 16px; min-width: 0; }
  .meni-prekidac { display: block; order: 3; }
  .meni {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 20px 20px;
    background: #fff;
    border-bottom: 3px solid var(--boja-logo-zelena);
    box-shadow: 0 8px 16px rgba(15, 53, 102, 0.12);
  }
  .logo img { height: 44px; }
  .meni.otvoren { display: flex; }
  .meni a { padding: 12px; }
  .meni .meni__dugme a { margin: 8px 0 0; text-align: center; }
}

/* ==========================================================================
   HERO SEKCIJA SA VIDEOM (početna strana)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--boja-tamna);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tamni providni sloj preko videa */
.hero__sloj {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 37, 72, 0.85) 0%, rgba(10, 37, 72, 0.55) 100%);
}
.hero__sadrzaj {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  padding-bottom: 48px;
}
.hero h1 {
  color: #fff;
  max-width: 820px;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  margin-bottom: 28px;
}

/* ==========================================================================
   NASLOVNA TRAKA NA UNUTRAŠNJIM STRANAMA
   ========================================================================== */
.naslovna-traka {
  background: var(--boja-tamna);
  color: #dbe5ee;
  padding: 48px 0;
}
.naslovna-traka h1 { color: #fff; }
.naslovna-traka p { max-width: 760px; margin: 0; }

/* ==========================================================================
   O KOMPANIJI (početna strana, odmah ispod videa)
   ========================================================================== */
.nadnaslov {
  margin: 0 0 8px;
  color: var(--boja-akcent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.o-kompaniji__unutra {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: center;
}
.o-kompaniji__tekst p { color: var(--boja-tekst-svetli); }
.o-kompaniji__tekst .dugme { margin-top: 8px; }
.o-kompaniji__brojke {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.o-kompaniji__brojke li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px;
  background: var(--boja-pozadina-siva);
  border-left: 4px solid var(--boja-logo-zelena);
  border-radius: var(--radius);
}
.o-kompaniji__brojke strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--boja-primarna);
  min-width: 90px;
}
.o-kompaniji__brojke span { color: var(--boja-tekst); font-weight: 500; }

/* ==========================================================================
   SLIKA PREKO CELE ŠIRINE (traka između sekcija)
   Slika se pomera sporije od stranice dok se skroluje (efekat dubine).
   ========================================================================== */
.traka {
  position: relative;
  height: 60vh;
  min-height: 320px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.traka__slika {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.traka__slika img {
  inset: -15% 0 auto 0;      /* slika je viša od trake da bi imala prostora za pomeranje */
  height: 130%;
  will-change: transform;
}
.traka::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 37, 72, 0.75) 0%, rgba(10, 37, 72, 0) 60%);
  pointer-events: none;
}
.traka__tekst {
  position: relative;
  z-index: 1;
  padding-bottom: 36px;
}
.traka__tekst p {
  margin: 0;
  max-width: 640px;
  color: #fff;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
}

/* ==========================================================================
   SNIMCI IZ PROIZVODNJE (početna strana)
   Tekst na jednoj strani, uspravni video na drugoj.
   Klasa video-traka--obrnuto stavlja video levo.
   ========================================================================== */
.video-traka {
  background: var(--boja-tamna);
  color: #dbe5ee;
  padding: 64px 0;
}
.video-traka__unutra {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.video-traka--obrnuto .video-traka__video { order: -1; }
.video-traka h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.video-traka .nadnaslov { color: var(--boja-logo-zelena); }
.video-traka__tekst p { max-width: 520px; }
.video-traka__tekst .dugme { margin-top: 8px; }
.video-traka__video {
  justify-self: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  border: 3px solid var(--boja-logo-zelena);
}
.video-traka__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-traka--obrnuto { background: #0b2a52; }

/* ==========================================================================
   KARTICE KATEGORIJA (početna strana)
   ========================================================================== */
.kategorije {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.kategorija {
  display: block;
  background: #fff;
  border: 1px solid var(--boja-linija);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--senka);
  transition: transform 0.2s, box-shadow 0.2s;
}
.kategorija:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(15, 45, 69, 0.15); }
.kategorija__tekst { padding: 20px 24px 24px; }
.kategorija__tekst h3 { font-size: 1.4rem; margin-bottom: 6px; }
.kategorija__tekst p { color: var(--boja-tekst-svetli); margin-bottom: 12px; }
.kategorija__link { color: var(--boja-akcent); font-weight: 600; }

/* ==========================================================================
   ZAŠTO MI
   ========================================================================== */
.prednosti {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.prednost {
  background: #fff;
  border-top: 4px solid var(--boja-logo-zelena);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--senka);
}
.prednost h3 { font-size: 1.05rem; }
.prednost p { color: var(--boja-tekst-svetli); font-size: 0.95rem; margin: 0; }

/* ==========================================================================
   POZIV NA SARADNJU (traka)
   ========================================================================== */
.poziv {
  background: var(--boja-primarna);
  color: #e8f0f6;
  padding: 56px 0;
}
.poziv__unutra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.poziv h2 { color: #fff; }
.poziv p { margin: 0; max-width: 680px; }
.poziv .dugme { flex-shrink: 0; }

/* ==========================================================================
   KARTICE PROIZVODA (stranice kategorija)
   ========================================================================== */
.proizvodi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.proizvod {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--boja-linija);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--senka);
}
.proizvod__telo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.proizvod__telo p { color: var(--boja-tekst-svetli); font-size: 0.95rem; }
.proizvod__cena {
  font-weight: 600;
  color: var(--boja-tamna);
  margin: 4px 0 16px;
}
.proizvod .dugme { margin-top: auto; }

/* Minijature ispod glavne slike proizvoda (npr. boje creva) */
.minijature {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
}
.minijatura {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--boja-linija);
  border-radius: 6px;
  overflow: hidden;
  background: var(--boja-pozadina-siva);
  cursor: pointer;
}
.minijatura img { width: 100%; height: 100%; object-fit: cover; }
.minijatura:hover { border-color: var(--boja-primarna); }
.minijatura.aktivna { border-color: var(--boja-logo-zelena); }

/* Tabela tehničkih karakteristika */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.tabela th,
.tabela td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--boja-linija);
  vertical-align: top;
}
.tabela th { width: 48%; color: var(--boja-tekst-svetli); font-weight: 500; }

/* Dodatna napomena ispod vrednosti u tabeli (npr. izrada po zahtevu kupca) */
.tabela__napomena {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--boja-akcent);
}

/* Podsekcije na stranici Prateća oprema */
.podsekcija + .podsekcija { margin-top: 56px; }
.podsekcija__naslov {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--boja-linija);
  margin-bottom: 24px;
}
.podnaslov-grupe { margin: 32px 0 16px; font-size: 1.1rem; color: var(--boja-primarna); }
.podnaslov-grupe:first-of-type { margin-top: 0; }

/* ==========================================================================
   O NAMA
   ========================================================================== */
.dve-kolone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.galerija {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.galerija .slika { border-radius: var(--radius); }

/* ==========================================================================
   FORME
   ========================================================================== */
.forma {
  background: #fff;
  border: 1px solid var(--boja-linija);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--senka);
}
.forma__red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.polje { margin-bottom: 16px; }
.polje label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.polje input,
.polje select,
.polje textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #c4ccd4;
  border-radius: 6px;
}
.polje input:focus,
.polje select:focus,
.polje textarea:focus {
  outline: 2px solid var(--boja-primarna);
  outline-offset: 0;
  border-color: var(--boja-primarna);
}
.polje textarea { min-height: 130px; resize: vertical; }
.obavezno { color: #c0392b; }
.forma__napomena { font-size: 0.85rem; color: var(--boja-tekst-svetli); }

/* Poruka posle slanja forme */
.forma__poruka {
  display: none;
  padding: 14px 16px;
  border-radius: 6px;
  margin-top: 16px;
  font-weight: 500;
}
.forma__poruka.uspeh { display: block; background: #e5f4ea; color: #1e5e33; }
.forma__poruka.greska { display: block; background: #fbe9e7; color: #8e2a1d; }

/* Lista prednosti saradnje */
.lista-prednosti { list-style: none; padding: 0; margin: 0; }
.lista-prednosti li {
  position: relative;
  padding: 0 0 16px 32px;
}
.lista-prednosti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--boja-logo-zelena);
  box-shadow: inset 0 0 0 5px #dcf0d7;
}
.lista-prednosti strong { color: var(--boja-tamna); }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.kontakt-podaci { list-style: none; padding: 0; margin: 0 0 24px; }
.kontakt-podaci li { padding: 12px 0; border-bottom: 1px solid var(--boja-linija); }
.kontakt-podaci strong { display: block; color: var(--boja-tamna); font-size: 0.9rem; }

/* Sekcija "Gde se nalazimo" na početnoj */
.lokacija__unutra {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: center;
}

/* Mesto za Google mapu */
.mapa {
  aspect-ratio: 16 / 9;
  background: var(--boja-placeholder);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--boja-tamna);
  color: #b9c7d3;
  padding: 48px 0 0;
  font-size: 0.95rem;
}
.footer__kolone {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
.footer h3 { color: #fff; font-size: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: #b9c7d3; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__dno {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
  font-size: 0.85rem;
  color: #8ea1b2;
}

/* ==========================================================================
   PRILAGOĐAVANJE ZA TABLET I TELEFON
   ========================================================================== */
@media (max-width: 1024px) {
  .prednosti { grid-template-columns: repeat(3, 1fr); }
  .proizvodi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .sekcija { padding: 44px 0; }
  .kategorije,
  .proizvodi,
  .dve-kolone,
  .o-kompaniji__unutra,
  .lokacija__unutra,
  .video-traka__unutra,
  .forma__red,
  .footer__kolone { grid-template-columns: 1fr; }
  .prednosti { grid-template-columns: 1fr 1fr; }
  .galerija { grid-template-columns: 1fr; }
  .video-traka { padding: 44px 0; }
  .video-traka__unutra { gap: 28px; }
  .video-traka--obrnuto .video-traka__video { order: 0; }
  .poziv__unutra { flex-direction: column; align-items: flex-start; }
  .hero { min-height: 72vh; }
  .forma { padding: 20px; }
}

@media (max-width: 480px) {
  .prednosti { grid-template-columns: 1fr; }
  .dugme--veliko { width: 100%; text-align: center; }
}