/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap");

/*=============== VARIJABLE ===============*/
:root {
  --header-height: 3.5rem;

  /* Boje — tamna tema (podrazumevana) */
  --bg:           #000;
  --bg-surface:   #0d0d0d;
  --bg-card:      #111;
  --text-primary: #fff;
  --text-muted:   #888;
  --border:       rgba(255,255,255,0.08);

  /* Tipografija */
  --font:         'Montserrat', sans-serif;
  --fw-light:     200;
  --fw-regular:   300;
  --fw-medium:    400;
  --fw-semibold:  500;
  --fw-bold:      600;

  --fs-xl:    1.75rem;
  --fs-lg:    1.25rem;
  --fs-md:    1rem;
  --fs-sm:    .875rem;
  --fs-xs:    .75rem;
  --fs-xxs:   .65rem;

  /* Z-index */
  --z-header: 100;
}

/* Svetla tema */
body.light-theme {
  --bg:           #fafafa;
  --bg-surface:   #f2f2f2;
  --bg-card:      #ebebeb;
  --text-primary: #0a0a0a;
  --text-muted:   #666;
  --border:       rgba(0,0,0,0.08);
}

/* Responzivna tipografija */
@media (min-width: 968px) {
  :root {
    --fs-xl:  2.5rem;
    --fs-lg:  1.5rem;
    --fs-md:  1rem;
    --fs-sm:  .9rem;
    --fs-xs:  .8rem;
    --fs-xxs: .7rem;
  }
}

/*=============== RESET ===============*/
*, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  background-color: var(--bg);
  color: var(--text-primary);
  transition: background-color .35s, color .35s;
  line-height: 1.6;
}
h1, h2, h3, h4 { line-height: 1.2; color: var(--text-primary); }
ul  { list-style: none; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; outline: none; font-family: var(--font); }

/*=============== POMOCNE KLASE ===============*/
.kontejner {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.mreza { display: grid; gap: 1.5rem; }
.glavni { overflow: hidden; }

/*=============== HEADER ===============*/
.zaglavlje {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: var(--bg);
  z-index: var(--z-header);
  transition: background-color .35s, box-shadow .35s;
}
.zaglavlje.scroll-header {
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
}
body.light-theme .zaglavlje.scroll-header {
  box-shadow: 0 2px 20px rgba(0,0,0,.12);
}

.navigacija {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigacija__logo {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  letter-spacing: .02em;
}
.navigacija__logo b { font-weight: var(--fw-bold); }

/* Nav meni — plutajuci na dnu */
.navigacija__meni {
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 65%);
  background-color: hsla(0, 0%, 8%, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 4rem;
  padding: .85rem 2rem;
  transition: background-color .35s;
  z-index: var(--z-header);
}
body.light-theme .navigacija__meni {
  background-color: hsla(0, 0%, 82%, 0.88);
}

.navigacija__lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigacija__veza {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .35rem;
  font-size: 1.2rem;
  color: var(--text-muted);
  border-radius: 50%;
  transition: color .25s;
}
.navigacija__veza:hover { color: var(--text-primary); }

.active-link {
  color: var(--text-primary);
  background: rgba(255,255,255,0.1);
}
body.light-theme .active-link {
  background: rgba(0,0,0,0.08);
}

.promena-teme {
  font-size: 1.2rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: color .25s;
}
.promena-teme:hover { color: var(--text-muted); }

/*=============== DUGME ===============*/
.dugme {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.4rem;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  border-radius: .35rem;
  transition: .25s;
  cursor: pointer;
}
.dugme--puno {
  background-color: var(--text-primary);
  color: var(--bg);
}
.dugme--puno:hover {
  background-color: transparent;
  color: var(--text-primary);
  outline: 1.5px solid var(--text-primary);
}
.dugme--okvir {
  background-color: transparent;
  color: var(--text-primary);
  outline: 1.5px solid var(--text-primary);
}
.dugme--okvir:hover {
  background-color: var(--text-primary);
  color: var(--bg);
}

/*=============== HERO — POCETNA ===============*/
.pocetna {
  padding: 8rem 0 5rem;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.pocetna__kontejner {
  text-align: center;
}
.pocetna__oznaka {
  display: inline-block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.pocetna__naslov {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  max-width: 700px;
  margin-inline: auto;
}
.pocetna__naslov b { font-weight: var(--fw-bold); }
.pocetna__opis {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.85;
}
.pocetna__dugmad {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/*=============== USLUGA BLOK — DETALJI ===============*/
.usluga-blok {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.usluga-blok:first-of-type { border-top: none; }

/* Dva reda: tekst + slika */
.usluga-blok__red {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3.5rem;
}
.usluga-blok__red:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .usluga-blok__red {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
  /* Naizmenicno: parni redovi imaju sliku levo */
  .usluga-blok__red:nth-child(even) .usluga-blok__slika-wrap {
    order: -1;
  }
}

/* Tekst strana */
.usluga-blok__oznaka {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .6rem;
}
.usluga-blok__naslov {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.usluga-blok__naslov b { font-weight: var(--fw-bold); }
.usluga-blok__opis {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.9;
  margin-bottom: 1.5rem;
}
.usluga-blok__lista {
  display: grid;
  gap: .6rem;
}
.usluga-blok__stavka {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}
.usluga-blok__stavka i {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Slika strana */
.usluga-blok__slika-wrap {
  
  border-radius: .5rem;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usluga-blok__slika {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}
.usluga-blok__placeholder {
  font-size: 3.5rem;
  color: var(--text-muted);
  opacity: .25;
}

/* Sekcija naslov */
.usluga-blok__sekcija-naslov {
  text-align: center;
  margin-bottom: 3rem;
}
.usluga-blok__sekcija-naslov h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
}
.usluga-blok__sekcija-naslov h2 b { font-weight: var(--fw-bold); }
.usluga-blok__sekcija-naslov p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: .6rem;
  max-width: 520px;
  margin-inline: auto;
  line-height: 1.75;
}

/*=============== PODNOZJE ===============*/
.podnozje {
  background-color: var(--text-primary);
  color: var(--bg);
  padding: 3rem 0 6rem;
}
.podnozje__naslov {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--bg);
  margin-bottom: 2rem;
}
.podnozje__naslov b { font-weight: var(--fw-bold); }
.podnozje__lista {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.podnozje__veza {
  font-size: var(--fs-xs);
  color: var(--bg);
  font-weight: var(--fw-regular);
  opacity: .75;
  transition: opacity .2s;
}
.podnozje__veza:hover { opacity: 1; }
.podnozje__veza b { font-weight: var(--fw-bold); }

.podnozje__drustvene {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.podnozje__ikonica {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-color: var(--bg);
  color: var(--text-primary);
  font-size: 1rem;
  border-radius: .2rem;
  transition: opacity .2s;
}
.podnozje__ikonica:hover { opacity: .75; }

.podnozje__kopiraje {
  display: block;
  text-align: center;
  font-size: var(--fs-xxs);
  color: var(--bg);
  opacity: .45;
  letter-spacing: .06em;
}
.podnozje__kopiraje b { font-weight: var(--fw-bold); }

/*=============== SCROLLBAR ===============*/
::-webkit-scrollbar { width: 4px; background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: #333; }
body.light-theme ::-webkit-scrollbar-thumb { background: #bbb; }

/*=============== BREAKPOINTS ===============*/
@media (max-width: 400px) {
  .navigacija__meni { width: 72%; }
  .pocetna__dugmad  { flex-direction: column; align-items: center; }
}
@media (min-width: 992px) {
  .kontejner { padding-inline: 2rem; }
}

/*=============== TIM SEKCIJA ===============*/
.tim {
  padding: 5rem 0 4rem;
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.tim__naslov-blok {
  text-align: center;
  margin-bottom: 3rem;
}
.tim__oznaka {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .6rem;
}
.tim__naslov {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--text-primary);
}
.tim__naslov b { font-weight: var(--fw-bold); }

/* Swiper container */
.tim__swiper {
  position: relative;
  padding: 1rem 2.5rem 3.5rem;
}

/* Swiper slide — sirina se kontrolise ovde */
.tim__swiper .swiper-slide {
  width: 70vw;
  max-width: 280px;
  display: flex;
  justify-content: center;
}

/* Kartica — portrait gaming stil */
.tim__kartica {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 145%;
  border-radius: .75rem;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.tim__kartica:active { cursor: grabbing; }

/* Slika */
.tim__slika {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tim__kartica:hover .tim__slika {
  transform: scale(1.04);
}

/* Gradient overlay odozdo */
.tim__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.0)  75%
  );
}

/* Glow u boji — jedinstven po kartici, setuje se inline --glow-boja */
.tim__glow {
  position: absolute;
  inset: 0;
  border-radius: .75rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 30px -6px var(--glow-boja, rgba(255,255,255,.25)),
    inset 0 0 30px -12px var(--glow-boja, rgba(255,255,255,.1));
  pointer-events: none;
  transition: box-shadow .4s;
}
.tim__kartica:hover .tim__glow {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 0 50px -4px var(--glow-boja, rgba(255,255,255,.4)),
    inset 0 0 40px -8px var(--glow-boja, rgba(255,255,255,.15));
}

/* Tekst info na dnu kartice */
.tim__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1rem 1rem;
  z-index: 2;
}
.tim__ime {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: .25rem;
  letter-spacing: .02em;
}
.tim__zvanje {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-regular);
  color: rgba(255,255,255,.65);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.tim__uloga {
  display: inline-block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-medium);
  color: var(--glow-boja, rgba(255,255,255,.8));
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2rem;
  padding: .15rem .55rem;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}

/* Swiper strelice */
.tim__prev,
.tim__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-top: -1.5rem; /* kompenzacija za pagination */
}
.tim__prev:hover,
.tim__next:hover {
  background: var(--text-primary);
  color: var(--bg);
  border-color: var(--text-primary);
}
.tim__prev { left: 0; }
.tim__next { right: 0; }
.tim__prev.swiper-button-disabled,
.tim__next.swiper-button-disabled {
  opacity: .25;
  pointer-events: none;
}

/* Swiper pagination dots */
.tim__swiper .swiper-pagination-bullet {
  background: var(--text-muted);
  opacity: .4;
  width: 5px;
  height: 5px;
  transition: opacity .2s, width .3s;
  border-radius: 3px;
}
.tim__swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--text-primary);
  width: 18px;
}

/* Desktop — strelice imaju prostora, kartice vece */
@media (min-width: 576px) {
  .tim__swiper .swiper-slide {
    width: 240px;
    max-width: 240px;
  }
}

@media (min-width: 768px) {
  .tim__swiper {
    padding-inline: 3.5rem;
  }
  .tim__swiper .swiper-slide {
    width: 260px;
    max-width: 260px;
  }
}

@media (min-width: 992px) {
  .tim__swiper .swiper-slide {
    width: 280px;
    max-width: 280px;
  }
}