/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 06 2025 | 13:10:57 */
/******** MTS Netflix-like slider – mobilni 1.2 slajda bez uvećanja ********/
:root{
  --card-w-desktop: 480px;
  --card-w-mobile:  200px;   /* fallback, pregaziće se u @media */
  --gap:            10px;
  --radius:         10px;
  --shadow:         0 8px 20px rgba(0,0,0,.14);
  --rail-h-desktop: 540px;
  --rail-h-mobile:  450px;
}

/* Wrapper poravnanje */
.mts-like-hero { padding-left: 0 !important; }
.mts-like-hero .swiper { margin-left: 0 !important; }

/* Kontejner */
.mts-like-hero{
  position: relative;
  width: 100%;
  height: var(--rail-h-desktop);
  overflow: visible; /* desktop sme da viri */
}

/* Swiper visine */
.mts-like-hero .swiper{
  height: 100%;
  cursor: grab;
  overflow: visible;
}
.mts-like-hero .swiper:active{ cursor: grabbing; }
.mts-like-hero .swiper-wrapper{
  height: 100%;
  align-items: stretch;
  will-change: transform;
}

/* Slajd */
.mts-like-hero .swiper-slide{
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w-desktop);
  height: 100%;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  box-sizing: border-box;
  will-change: width, box-shadow, opacity;

  /* SPORIJE širenje/skupljanje (bilo .35s) */
  transition: width 1.1s ease-in-out, box-shadow .8s ease-in-out, opacity .8s ease-in-out;
}

/* Slika — pan/reveal efekat (bez zooma, proširivanje kadra) */
.mts-like-hero .swiper-slide img{
  position: absolute;
  inset: 0;
  width: auto;                     /* širina slike se širi umesto skaliranja */
  height: 100% !important;
  object-fit: cover;
  object-position: 60% 100%;       /* startni kadar — blago desno i dno */
  transform: none;                 /* bez scale */
  transform-origin: center bottom;
  will-change: object-position;
  transition: object-position 1.3s ease-in-out; /* glatko “otkrivanje” */
}

/* Fokusirani slajd (desktop) — pomerimo kadar da se vidi širi deo slike */
.mts-like-hero .swiper-slide.is-focus{
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  z-index: 3;
}
.mts-like-hero .swiper-slide.is-focus img{
  object-position: 40% 100%;       /* kadar se “otvara” ulevo */
}

/* Strelice */
.mts-like-hero .swiper-button-prev,
.mts-like-hero .swiper-button-next{
  color: #000; width: 42px; height: 42px;
  border-radius: 999px; background: rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.mts-like-hero .swiper-button-prev::after,
.mts-like-hero .swiper-button-next::after{ font-size: 18px; }

/* Paginacija ispod */
.mts-like-hero .swiper-pagination{
  position: relative !important; margin-top: 12px; text-align: center;
}
.mts-like-hero .swiper-pagination-bullet{
  width: 24px; height: 12px; border: 2px solid #999; border-radius: var(--radius);
  background: transparent; opacity: 1; margin: 0 4px !important; transition: all .2s ease;
}
.mts-like-hero .swiper-pagination-bullet-active{
  width: 14px; height: 14px; border-radius: 50%; background: #999; border-color: #999;
}

/* MOBILNI */
@media (max-width: 767px){
  /* Tačno 1 ceo + 20% sledećeg:
     w * 1.2 + gap = 100vw  =>  w = (100vw - gap)/1.2
  */
  :root{
    --card-w-mobile: calc((100vw - var(--gap)) / 1.2);
  }

  .mts-like-hero,
  .mts-like-hero .swiper{ overflow: hidden !important; } /* nema horizontalnog skrola */

  .mts-like-hero{ height: var(--rail-h-mobile); }
  .mts-like-hero .swiper-slide{ width: var(--card-w-mobile) !important; }

  /* Bez uvećanja/zooma na mobilnom (ostaje spor CSS, ali transform se NE primenjuje) */
  .mts-like-hero .swiper-slide.is-focus{ box-shadow: var(--shadow); }
  .mts-like-hero .swiper-slide.is-focus img{ transform: none; }

  /* Strelice gasimo na mobilnom */
  .mts-like-hero .swiper-button-prev,
  .mts-like-hero .swiper-button-next{ display: none !important; }
}

/* Paginacija – kapsula sa tačkicama */
.mts-like-hero .swiper-pagination{
  position: relative !important;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                         /* razmak između bullita */
  padding: 6px 12px;                /* “punjenje” kapsule */
  background: #e9e9e9;              /* svetlosiva pozadina kapsule */
  border-radius: 999px;             /* potpuno zaobljeno */
  width: auto;
  height: auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 2px 6px rgba(0,0,0,.06);
}

/* Osnovni bullet – mala tamna tačka */
.mts-like-hero .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  margin: 0 !important;             /* ukloni default margine */
  border-radius: 50%;
  background: #333;                 /* tamnosiva tačka */
  opacity: 1;                       /* uvek potpuno vidljivo */
  border: 0;
  transform: scale(1);
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

/* Aktivni bullet – prsten (transparentna unutrašnjost kroz sivu kapsulu) */
.mts-like-hero .swiper-pagination-bullet-active{
  width: 10px;                      /* blago veći da prsten bude izražen */
  height: 10px;
  background: transparent;          /* “rupa” – vidi se siva kapsula iza */
  border: 2px solid #333;           /* tamni prsten */
  box-sizing: border-box;
  transform: scale(1);              /* bez skoka veličine */
}

/* (opciono) hover/focus efekat za miša/tastaturu */
.mts-like-hero .swiper-pagination-bullet:hover,
.mts-like-hero .swiper-pagination-bullet:focus{
  outline: none;
  transform: scale(1.1);
}

/* Malo zbijenije na mobilnom, da ostane kompaktno */
@media (max-width: 767px){
  .mts-like-hero .swiper-pagination{
    gap: 6px;
    padding: 5px 10px;
  }
  .mts-like-hero .swiper-pagination-bullet{ width: 7px; height: 7px; }
  .mts-like-hero .swiper-pagination-bullet-active{ width: 9px; height: 9px; border-width: 2px; }
}