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

/* ❯❯❯ separator blink */
b.sep {
  display: inline-block;
  animation: sepBlink 5s ease-in-out infinite;
}

@keyframes sepBlink {
  0%, 65%, 100% { opacity: 1; text-shadow: none; }
  72%  { opacity: 0.2; text-shadow: none; }
  78%  { opacity: 1;   text-shadow: 0 0 8px currentColor, 0 0 18px currentColor; }
  84%  { opacity: 0.3; text-shadow: none; }
  90%  { opacity: 1;   text-shadow: 0 0 6px currentColor; }
  95%  { opacity: 1;   text-shadow: none; }
}

/*=============== 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:           #fff;
  --bg-surface:   #f2f2f2;
  --bg-card:      #ebebeb;
  --text-primary: #000;
  --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: .938rem;
  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: .938rem;
  font-weight: 300;
  color: var(--text-primary);
}
.navigacija__logo b {
  display: inline-block;
  animation: busyBlink 7s ease-in-out infinite;
  animation-delay: 3.4s;
}
@keyframes busyBlink {
  0%, 90%, 100% { opacity: 1; text-shadow: none; }
  91%  { opacity: .3; text-shadow: none; }
  92%  { opacity: 1;  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
  93%  { opacity: .2; text-shadow: none; }
  94%  { opacity: 1;  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
  95%  { opacity: 1;  text-shadow: none; }
}

/* 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;
  position: relative;
}
.usluga-blok + .usluga-blok::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 1px;
  background-color: var(--border);
}

/* 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: baseline;
  flex-wrap: nowrap;
  gap: .2rem .4rem;
  font-size: var(--fs-xs);
  color: var(--text-primary);
  line-height: 1.7;
}
.usluga-blok__stavka i {
  font-size: .85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: .22rem;
}
.stavka-label {
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: .04em;
}
.stavka-label b { font-weight: 700; }
.stavka-opis {
  font-weight: 300;
  opacity: .6;
  flex: 1;
  min-width: 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__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  display: block;
}
.busyprint__anim {
  filter: invert(1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
body.light-theme .busyprint__anim {
  filter: none;
}
.busymedia__logo-anim {
  filter: invert(1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
body.light-theme .busymedia__logo-anim {
  filter: none;
}
.busymedia__paleta {
  filter: invert(1);
  transform: translateZ(0);
  backface-visibility: hidden;
  border-radius: .5rem;
}
body.light-theme .busymedia__paleta {
  filter: none;
}
.busymedia__community-anim {
  filter: invert(1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
body.light-theme .busymedia__community-anim {
  filter: none;
}

.usluga-blok__slika-wrap--reel {
  aspect-ratio: 9 / 16;
  width: min(100%, 240px);
  min-height: unset;
  margin: 0 auto;
  border-radius: 1rem;
}
.usluga-blok__klijent-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}
.usluga-blok__klijent-logo img {
  height: 42px;
  width: auto;
  opacity: 0.4;
  filter: grayscale(1) invert(1);
  transition: opacity .3s, filter .3s;
}
.usluga-blok__klijent-logo img:last-of-type {
  height: 48px;
}
#pos-sistemi .usluga-blok__klijent-logo img:last-of-type {
  height: 76px;
}
.usluga-blok__klijent-logo img:hover {
  opacity: 0.7;
  filter: grayscale(0) invert(1);
}
body.light-theme .usluga-blok__klijent-logo img {
  filter: grayscale(1);
}
body.light-theme .usluga-blok__klijent-logo img:hover {
  filter: grayscale(0);
}
.usluga-blok__klijent-x {
  font-size: 1.1rem;
  opacity: 0.25;
  font-weight: 300;
  line-height: 1;
}
.usluga-blok__format {
  font-size: .75em;
  opacity: .55;
  font-weight: 400;
  letter-spacing: .05em;
}
.usluga-blok__placeholder {
  font-size: 7rem;
  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%
  );
}

/* Suptilni border glow — neutralan, bez boja */
.tim__glow {
  position: absolute;
  inset: 0;
  border-radius: .75rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  pointer-events: none;
  transition: box-shadow .4s;
}
.tim__swiper .swiper-slide-active .tim__glow {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* 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: 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);
}

/* Coverflow efekat — strane manje i u senci, centar pun */
.tim__swiper .swiper-slide .tim__kartica {
  transform: scale(0.78);
  opacity: 0.38;
  filter: brightness(0.55);
  transition: transform .5s cubic-bezier(0.25, 1, 0.5, 1),
              opacity .5s,
              filter .5s;
}
.tim__swiper .swiper-slide-active .tim__kartica {
  transform: scale(1);
  opacity: 1;
  filter: brightness(1);
}

/* Diskretne strelice — samo ikonica, bez dugmeta */
.tim__prev,
.tim__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  opacity: 0.35;
  font-size: 1.5rem;
  transition: opacity .25s;
  margin-top: -1.5rem;
}
.tim__prev:hover,
.tim__next:hover {
  opacity: 0.9;
}
.tim__prev { left: 0; }
.tim__next { right: 0; }
.tim__prev.swiper-button-disabled,
.tim__next.swiper-button-disabled {
  opacity: .1;
  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;
  }
}