/* ============================================================================
   WELL BIOME KOMBUCHA — STILOVI SLAJDERA (WordPress plugin verzija)
   ----------------------------------------------------------------------------
   Layout, tipografija, slojevi (z-index), responzivnost, a11y (reduced motion).
   Animacije se zasebno definišu u js/animations.js (GSAP).

   ⚠ PLUGIN ADAPTACIJA: Globalni resetovi (*, html, body, img, button, a) iz
   dev verzije su uklonjeni ili scope-ovani pod .kombuha-slider. Bez ovoga
   bi plugin LOMIO ostatak WordPress teme.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   AGRESIVNI SCOPE-OVAN RESET — neutralizuje theme overrides
   ----------------------------------------------------------------------------
   Tipičan WP theme primenjuje stilove na sve `h1, h2, ..., p, a, button, ul, li`
   sa specifičnošću (0,1,0) ili (0,2,0). Bez ovog reseta, theme pravila bi
   probijala plugin stilove (boja, font, padding, margin, border, background).

   Reset radi u 2 prolazka:
     1) UNIVERZAL: svi child elementi → margin:0, padding:0, font: inherit
     2) FOKUSIRAN: za semantičke tagove (h1-h6, p, span, a, button, ul, li, svg)
        agresivnije isključujemo theme stilove

   Korišćenje `!important` ovde je opravdano — namera je da theme NIKAD ne
   pobedi plugin stilove. Scope `.kombuha-slider` osigurava da reset ne curi
   van slajder kontejnera.
   ---------------------------------------------------------------------------- */

/* Pass 1: univerzalni box-sizing + font/color inherit za sve elemente */
.kombuha-slider,
.kombuha-slider *,
.kombuha-slider *::before,
.kombuha-slider *::after {
  box-sizing: border-box !important;
}

.kombuha-slider * {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

/* Glavni kontejner — postavlja font + boju koje child-i nasleđuju */
.kombuha-slider {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pass 2: agresivan reset za semantičke tagove koji theme često stiluje */
.kombuha-slider h1,
.kombuha-slider h2,
.kombuha-slider h3,
.kombuha-slider h4,
.kombuha-slider h5,
.kombuha-slider h6,
.kombuha-slider p,
.kombuha-slider span,
.kombuha-slider a,
.kombuha-slider button,
.kombuha-slider ul,
.kombuha-slider ol,
.kombuha-slider li,
.kombuha-slider div,
.kombuha-slider section,
.kombuha-slider article,
.kombuha-slider figure,
.kombuha-slider picture,
.kombuha-slider svg {
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: none !important;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none !important;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  list-style: none;
  box-shadow: none;
  outline: none;
}

.kombuha-slider img {
  display: block !important;
  max-width: 100%;
  height: auto;
  border: 0 !important;
}

.kombuha-slider button {
  cursor: pointer !important;
  -webkit-appearance: none;
  appearance: none;
}

.kombuha-slider a {
  color: inherit;
  text-decoration: none !important;
}


/* ----------------------------------------------------------------------------
   GLAVNA SEKCIJA SLAJDERA — pun viewport sa svim slojevima
   ---------------------------------------------------------------------------- */
.kombuha-slider {
  position: relative !important;
  /* width/height !important — SAMO na root containeru. Bez ovoga, tema može
     da overrid-uje (npr. .elementor-section { height: auto }) i ceo slajder
     se sklupča. JS NE postavlja width/height na .kombuha-slider (postavlja
     samo na child elemente .ks-box / .ks-pouch / .ks-fruit, gde !important
     OSTAJE UKLONJEN da JS može da kontroliše). */
  width: 100% !important;
  height: 100vh !important;
  min-height: 720px !important;
  overflow: hidden !important;
  background: #1a0a0a !important;            /* fallback dok se pozadina ne učita */
  isolation: isolate;             /* novi stacking context za z-index */
  --akcent: #F39C12;              /* boja akcenta — menja se po ukusu kroz JS */
}

@media (max-width: 1024px) {
  .kombuha-slider { min-height: 640px; }
}

@media (max-width: 640px) {
  .kombuha-slider { min-height: 560px; }
}


/* ============================================================================
   SLOJ 1 — POZADINSKA SCENA (background.webp po ukusu)
   ============================================================================ */
.kombuha-slider .ks-bg-scene {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.kombuha-slider .ks-bg-scene__img {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0;
  /* Cross-fade kontroliše GSAP tokom tranzicije.
     CSS preuzima samo statične "aktivan/neaktivan" promene preko fallbacka u slider.js. */
}

.kombuha-slider .ks-bg-scene__img img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
}

/* Aktivna pozadina je vidljiva */
.kombuha-slider[data-aktivan="breskva"]       .ks-bg-scene__img[data-ukus="breskva"],
.kombuha-slider[data-aktivan="limun-tresnja"] .ks-bg-scene__img[data-ukus="limun-tresnja"],
.kombuha-slider[data-aktivan="grozdje"]       .ks-bg-scene__img[data-ukus="grozdje"] {
  opacity: 1;
}


/* ============================================================================
   SLOJ 1B — POZADINSKI TEKST (kreće se levo-desno, ista dubina kao pozadina)
   ============================================================================ */
.kombuha-slider .ks-bg-text {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none !important;
  overflow: hidden !important;
}

.kombuha-slider .ks-bg-text__track {
  /* SVI trackovi su uvek u layout-u (display: flex), samo aktivan ima
     opacity:1. Cross-fade je čist CSS opacity transition — GSAP NE dira
     opacity bgText-a tokom tranzicije, samo idle xPercent yoyo nastavlja
     nepromenjeno (smooth, bez "resetovanja" pozicije). */
  display: flex !important;
  position: absolute !important;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  user-select: none;
  will-change: transform;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
  pointer-events: none !important;
}

.kombuha-slider .ks-bg-text__word {
  display: inline-block !important;
  padding: 0 0.3em;
}

/* Aktivan track: opacity 1 (cross-fade kroz CSS transition). */
.kombuha-slider[data-aktivan="breskva"]       .ks-bg-text__track[data-ukus="breskva"],
.kombuha-slider[data-aktivan="limun-tresnja"] .ks-bg-text__track[data-ukus="limun-tresnja"],
.kombuha-slider[data-aktivan="grozdje"]       .ks-bg-text__track[data-ukus="grozdje"] {
  opacity: 1;
  visibility: visible;
}


/* ============================================================================
   SLOJ 2 i 4 — VOĆE (iza i ispred kutije)
   Pozicije i veličine se generišu iz config.js → renderuje slider.js
   ============================================================================ */
.kombuha-slider .ks-fruits {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.kombuha-slider .ks-fruits--iza    { z-index: 2; }  /* SLOJ 2 — iza kutije, blurovano */
.kombuha-slider .ks-fruits--ispred { z-index: 4; }  /* SLOJ 4 — ispred kutije, oštro */

.kombuha-slider .ks-fruit {
  position: absolute !important;
  transform: translate(-50%, -50%);
  /* will-change: transform postavljen stalno — sprečava repaint kad GSAP
     start-uje/stop-uje tween-ove. Sa fiksnim brojem slotsa (16) memory
     overhead je zanemarljiv. */
  will-change: transform, opacity;
  user-select: none;
}

.kombuha-slider .ks-fruit img {
  width: 100%;
  height: auto;
  display: block !important;
}

/* Voće IZA: blur 4-5px + scale 0.8 + opacity 0.75 (3D dubinski efekat) */
.kombuha-slider .ks-fruits--iza .ks-fruit {
  filter: blur(4px);
  opacity: 0.75;
}
/* Scale 0.8 se postavlja kroz GSAP u animations.js (xPercent + scale) */


/* ============================================================================
   YOYO LEBDENJE — voće i listići "lebde" u 2D ravni (X + Y nezavisno)
   ----------------------------------------------------------------------------
   Wrapper struktura (kreirana u slider.js renderujVoce):
     .kombuha-slider .ks-fruit > .ks-fruit__yoyo-y > .ks-fruit__yoyo-x > picture > img
   Wrapperi koriste CSS `translate` property (odvojena od `transform`),
   pa ne diraju postojeću rotaciju/poziciju .ks-fruit elementa.
   Lifecycle: animations.js dodaje/uklanja .yoyo-active klasu po fazi
   tranzicije (off tokom + 500ms posle, on inače).

   RAMP-UP AMPLITUDE: amplituda se postepeno povećava od 0 do pune vrednosti
   (8px Y, 5px X) tokom 1.5s kad se .yoyo-active doda. Tako voće ne "skoči"
   u punu amplitudu — kretanje se "rodi" iz statične pozicije.
   Tehnika: CSS @property registruje --yoyo-amp-y i --yoyo-amp-x kao <length>
   tipove, što omogućuje smooth CSS transition. Keyframes čitaju te varijable
   preko var()/calc() umesto hardkodovanih vrednosti.
   ============================================================================ */
@property --yoyo-amp-y {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --yoyo-amp-x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

.kombuha-slider .ks-fruit__yoyo-y {
  display: block !important;
  --yoyo-amp-y: 0px;
  translate: 0 0;
  /* Amplituda Y ramp-uje od 0 do 8px tokom 1.5s; translate snap-back
     na 0,0 tokom 0.3s kad se animacija ugasi */
  transition: --yoyo-amp-y 1.5s ease-out, translate 0.3s ease-out;
  will-change: translate;
}

.kombuha-slider .ks-fruit__yoyo-x {
  display: block !important;
  --yoyo-amp-x: 0px;
  translate: 0 0;
  transition: --yoyo-amp-x 1.5s ease-out, translate 0.3s ease-out;
  will-change: translate;
}

.kombuha-slider .ks-fruit__yoyo-y.yoyo-active {
  --yoyo-amp-y: 8px;
  animation: kombuha-yoyo-y 5s ease-in-out infinite;
  /* Animacija sada vozi translate (amplituda raste preko --yoyo-amp-y
     transition iz base rule-a); translate transition je nepotrebna i bila bi
     u koliziji sa keyframes — pa ostavljamo samo amplitude transition */
  transition: --yoyo-amp-y 1.5s ease-out;
}

.kombuha-slider .ks-fruit__yoyo-x.yoyo-active {
  --yoyo-amp-x: 5px;
  animation: kombuha-yoyo-x 7s ease-in-out infinite;
  transition: --yoyo-amp-x 1.5s ease-out;
}

@keyframes kombuha-yoyo-y {
  0%, 100% { translate: 0 calc(var(--yoyo-amp-y) * -1); }
  50%      { translate: 0 var(--yoyo-amp-y); }
}

@keyframes kombuha-yoyo-x {
  0%, 100% { translate: calc(var(--yoyo-amp-x) * -1) 0; }
  50%      { translate: var(--yoyo-amp-x) 0; }
}

/* Reduced motion: bez yoyo lebdenja */
@media (prefers-reduced-motion: reduce) {
  .kombuha-slider .ks-fruit__yoyo-y.yoyo-active,
  .kombuha-slider .ks-fruit__yoyo-x.yoyo-active {
    animation: none;
  }
}


/* ============================================================================
   SLOJ 3A — KESICA (stick package)
   PRIBIJENA UZ desnu ivicu kutije, blago nagnuta UDESNO (pozitivan ugao).
   Z-index 4 je iznad kutije (z:3) — kesica vidno preklapa kutiju.
   Specifikacija: left: calc(50% + 8%), height: 55% slider visine.
   ============================================================================ */
.kombuha-slider .ks-pouch {
  position: absolute !important;
  z-index: 4 !important;
  /* top, left, height postavlja slider.js iz cfg.raspored.kesica
     Transform postavlja GSAP iz cfg.raspored.kesica.rotacija */
  top: 50%;
  left: 50%;
  height: 55%;
  width: auto;
  /* Default centriranje + rotacija pre nego što JS učita (anti-FOUC).
     GSAP override-uje ovo posle učitavanja. */
  transform: translate(-50%, -50%) rotate(10deg);
  will-change: transform;
  pointer-events: none !important;
  /* ANTI-FOUC: nevidljiva dok slider.js ne postavi prave pozicije.
     INSTANT prikaz (bez transition) — kesica odmah pojavi na pravoj poziciji,
     bez ikakve animacije ulaza. */
  opacity: 0;
}
.kombuha-slider .ks-pouch.is-positioned { opacity: 1; }

.kombuha-slider .ks-pouch__img {
  position: relative !important;
  display: block !important;
  height: 100%;
  width: auto;
  opacity: 0;
}

.kombuha-slider .ks-pouch__img img {
  height: 100%;
  width: auto;
  display: block !important;
}

.kombuha-slider[data-aktivan="breskva"]       .ks-pouch__img[data-ukus="breskva"],
.kombuha-slider[data-aktivan="limun-tresnja"] .ks-pouch__img[data-ukus="limun-tresnja"],
.kombuha-slider[data-aktivan="grozdje"]       .ks-pouch__img[data-ukus="grozdje"] {
  opacity: 1;
}

/* Više pouch elemenata u istom kontejneru — stack apsolutno na istom mestu */
.kombuha-slider .ks-pouch__img:not(:first-child) {
  position: absolute !important;
  inset: 0 !important;
}


/* ============================================================================
   SLOJ 3B — KUTIJA (set framova + statična, po ukusu)
   Specifikacija: height 60% slider visine, width: auto (aspect 3:4 sledi).
   Daje 20% praznine iznad i 20% ispod kutije.
   ============================================================================ */
.kombuha-slider .ks-box {
  position: absolute !important;
  z-index: 3 !important;
  left: 50%;
  top: 50%;
  height: 60%;       /* KRITIČNO — 60% visine slidera, NE 60vh */
  width: auto;
  aspect-ratio: 3 / 4 !important;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none !important;
  /* ANTI-FOUC: nevidljiva dok slider.js ne postavi prave pozicije.
     INSTANT prikaz (bez transition) — kutija odmah pojavi na pravoj poziciji,
     bez ikakve animacije ulaza. */
  opacity: 0;
}
.kombuha-slider .ks-box.is-positioned { opacity: 1; }

.kombuha-slider .ks-box__set {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0;
  /* GSAP kontroliše opacity tokom tranzicije */
}

.kombuha-slider[data-aktivan="breskva"]       .ks-box__set[data-ukus="breskva"],
.kombuha-slider[data-aktivan="limun-tresnja"] .ks-box__set[data-ukus="limun-tresnja"],
.kombuha-slider[data-aktivan="grozdje"]       .ks-box__set[data-ukus="grozdje"] {
  opacity: 1;
}

.kombuha-slider .ks-box__frame {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.kombuha-slider .ks-box__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  /* Drop-shadow uklonjen — bio je skup paint operation tokom rotacije
     (Gaussian blur 50px radius na alpha mask, 72 re-paint-ova po tranziciji
     × 36 frejmova). Kutija sada bez senke ispod, performans značajno bolji. */
}

/* Statična je default vidljiva */
.kombuha-slider .ks-box__frame.is-static {
  opacity: 1;
}

/* Aktivan rotacioni frame (postavlja JS preko klase .is-active-frame) */
.kombuha-slider .ks-box__frame.is-active-frame {
  opacity: 1;
}

/* Kad je rotacija aktivna, sakrij statičnu sliku.
   Selektor cilja .ks-box__set (individualni set) umesto .ks-box (parent),
   jer stari i novi set imaju nezavisne rotation lifecycle — ako klasa
   bude na zajedničkom parent-u, stara rotacija na kraju (~1.4s) uklanja
   klasu i nova's static postaje vidljiv ispod nove rotacije = ghost frame. */
.kombuha-slider .ks-box__set.is-rotating .ks-box__frame.is-static {
  opacity: 0;
}

/* Responsive — kutija ostaje 60% slider visine na svim breakpointima */
@media (max-width: 900px) {
  .kombuha-slider .ks-box { height: 50%; }
}
@media (max-width: 640px) {
  .kombuha-slider .ks-box { height: 45%; }
}
@media (max-width: 400px) {
  .kombuha-slider .ks-box { height: 40%; }
}


/* ============================================================================
   SLOJ 5 — PREDNJE KAMENJE
   Specifikacija: bottom: 0, left: 50% sa translateX(-50%), width: 100%.
   Slika prirodno proporcionalno (16:9), prilepljena za dno scene.
   ============================================================================ */
.kombuha-slider .ks-front-rocks {
  position: absolute !important;
  z-index: 5 !important;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  pointer-events: none !important;
}

.kombuha-slider .ks-front-rocks__img {
  position: relative !important;
  display: block !important;
  width: 100%;
  opacity: 0;
  will-change: transform;
}

.kombuha-slider .ks-front-rocks__img img {
  width: 100%;
  height: auto;
  display: block !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  /* DEPTH OF FIELD — kamenje u prednjem planu van fokusa.
     Konstantan blur (ne reaguje na parallax). NEMA will-change: filter —
     držao je permanentan GPU composite layer čak i u idle stanju, što je
     u kombinaciji sa SVG motion blur-om tokom tranzicije dramatično
     usporavalo composite pipeline. Browser ionako auto-promoviše layer
     kad treba (filter primenjen + parent ima transform). */
  filter: blur(3px);   /* DoF prepolovljen 6→3px (desktop + mobile, namerno oba) */
}

/* Drugi pouch elementi za druge ukuse — apsolutno preklapaju prvi */
.kombuha-slider .ks-front-rocks__img:not(:first-of-type) {
  position: absolute !important;
  inset: 0 !important;
}

.kombuha-slider[data-aktivan="breskva"]       .ks-front-rocks__img[data-ukus="breskva"],
.kombuha-slider[data-aktivan="limun-tresnja"] .ks-front-rocks__img[data-ukus="limun-tresnja"],
.kombuha-slider[data-aktivan="grozdje"]       .ks-front-rocks__img[data-ukus="grozdje"] {
  opacity: 1;
}


/* ============================================================================
   SLOJ 8 — UI (strelice, tekstovi, dugmad)
   ============================================================================ */
.kombuha-slider .ks-ui {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto 1fr auto !important;
  grid-template-rows: 1fr auto !important;
  grid-template-areas:
    "prev text-left . text-right next"
    "tabs tabs       tabs tabs      tabs";
  align-items: center;
  gap: 24px !important;
  padding: 0 48px 40px;
}

/* Srednji desktop / laptop — kutija dominira, tekstovi se moraju suziti */
@media (max-width: 1366px) {
  .kombuha-slider .ks-ui {
    padding: 0 32px 32px;
    gap: 18px !important;
  }
  .kombuha-slider .ks-text-left,
  .kombuha-slider .ks-text-right { max-width: 280px; }
  .kombuha-slider .ks-text-left__title { font-size: clamp(20px, 2.4vw, 30px); }
  .kombuha-slider .ks-text-right__desc { font-size: clamp(12px, 1vw, 14px); }
}

/* Tablet landscape — još manja tipografija, kutija ostaje centralni hero */
@media (max-width: 1100px) {
  .kombuha-slider .ks-text-left,
  .kombuha-slider .ks-text-right { max-width: 220px; }
  .kombuha-slider .ks-text-left__title { font-size: 18px; line-height: 1.1; }
  .kombuha-slider .ks-text-right__desc { font-size: 11px; line-height: 1.5; }
  .kombuha-slider .ks-text-left__cta { padding: 12px 24px; font-size: 12px; }
}

/* Tablet portrait + mobile — vertikalan layout, kutija centar */
/* Granica 1024 jer ispod tog horizontalan layout više nema dovoljno mesta
   pored centralne kutije za tekstove sa obe strane. */
@media (max-width: 1024px) {
  .kombuha-slider .ks-ui {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto auto !important;
    grid-template-areas:
      "text-left"
      "."
      "text-right"
      "tabs";
    padding: 60px 24px 24px;
    gap: 14px !important;
    justify-items: start;
  }
  .kombuha-slider .ks-text-left,
  .kombuha-slider .ks-text-right { max-width: 100%; margin: 0; text-align: left; }
  .kombuha-slider .ks-text-left__title { font-size: clamp(22px, 4vw, 30px); }
  .kombuha-slider .ks-text-right__desc { font-size: clamp(12px, 2vw, 14px); }
  /* Više prostora između text-right i tabs — kutija drži centar */
  .kombuha-slider .ks-text-right { padding-bottom: 24px; }
}

@media (max-width: 640px) {
  .kombuha-slider .ks-ui {
    padding: 80px 20px 20px;
    gap: 12px !important;
  }
  .kombuha-slider .ks-text-left__title { font-size: 20px; }
  .kombuha-slider .ks-text-left__cta { padding: 14px 26px; }
}


/* ---------- Strelice prev/next ---------- */
.kombuha-slider .ks-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.kombuha-slider .ks-arrow:hover,
.kombuha-slider .ks-arrow:focus-visible {
  background: var(--akcent) !important;
  color: #ffffff;
  transform: scale(1.08);
  outline: none;
}

.kombuha-slider .ks-arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}

.kombuha-slider .ks-arrow--prev { grid-area: prev; }
.kombuha-slider .ks-arrow--next { grid-area: next; }

/* Vertikalan layout — strelice idu na bočne ivice scene (absolute) */
@media (max-width: 1024px) {
  .kombuha-slider .ks-arrow {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11 !important;
    width: 48px;
    height: 48px;
  }
  .kombuha-slider .ks-arrow--prev { left: 12px; }
  .kombuha-slider .ks-arrow--next { right: 12px; }
  .kombuha-slider .ks-arrow:hover,
  .kombuha-slider .ks-arrow:focus-visible {
    transform: translateY(-50%) scale(1.08);
  }
}

@media (max-width: 640px) {
  /* Na mobilu strelice se kriju, koristi se swipe */
  .kombuha-slider .ks-arrow { display: none; }
}


/* ---------- Tekstualni blok LEVO ---------- */
.kombuha-slider .ks-text-left {
  grid-area: text-left !important;
  max-width: 420px;
  align-self: center;
}

.kombuha-slider .ks-text-left__chevrons {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  color: var(--akcent);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.9;
}

.kombuha-slider .ks-text-left__title {
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.kombuha-slider .ks-text-left__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: #ffffff !important;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.kombuha-slider .ks-text-left__cta:hover,
.kombuha-slider .ks-text-left__cta:focus-visible {
  background: var(--akcent) !important;
  color: #ffffff;
  transform: translateY(-2px);
  outline: none;
}

.kombuha-slider .ks-text-left__cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
}


/* ---------- Tekstualni blok DESNO ---------- */
.kombuha-slider .ks-text-right {
  grid-area: text-right !important;
  max-width: 420px;
  margin-left: auto;
  align-self: center;
  text-align: right !important;
}

.kombuha-slider .ks-text-right__desc {
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #f5f5f5;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .kombuha-slider .ks-text-left, .ks-text-right { max-width: 100%; margin: 0; text-align: left; }
}


/* ---------- Dugmad ispod (3 ukusa) ---------- */
.kombuha-slider .ks-tabs {
  grid-area: tabs !important;
  display: flex !important;
  justify-content: center;
  gap: 8px !important;
  flex-wrap: wrap;
}

.kombuha-slider .ks-tab {
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.kombuha-slider .ks-tab:hover,
.kombuha-slider .ks-tab:focus-visible {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.3);
  outline: none;
}

.kombuha-slider .ks-tab.is-active {
  background: var(--akcent) !important;
  border-color: var(--akcent);
  color: #ffffff;
}

.kombuha-slider .ks-tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}

@media (max-width: 640px) {
  .kombuha-slider .ks-tab {
    padding: 10px 14px;
    font-size: 11px;
    flex: 1 1 auto;
    min-width: 0;
  }
}


/* ============================================================================
   STANJE TRANZICIJE — MOTION BLUR (SVG filter)
   Gaussian blur (mutno u svim pravcima) zamenjen sa horizontalnim motion blur-om
   (razvlači sliku u pravcu kretanja). Implementacija:
     • SVG filter #kombuha-motion-blur u <body> sa feGaussianBlur stdDeviation="X 0"
     • JS animira stdDeviation kroz GSAP timeline (0 → 20 → 0)
     • CSS ovde samo aktivira filter kroz klasu is-transitioning
   ============================================================================ */
.kombuha-slider.is-transitioning .ks-bg-scene,
.kombuha-slider.is-transitioning .ks-pouch,
.kombuha-slider.is-transitioning .ks-fruits,
.kombuha-slider.is-transitioning .ks-front-rocks,
.kombuha-slider.is-transitioning .ks-box {
  filter: url(#kombuha-motion-blur);
}

/* Sloj UI (tekstovi, dugmad) NE blurujemo — ostaje čitljiv */


/* ============================================================================
   PRISTUPAČNOST — POŠTOVANJE prefers-reduced-motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }

  .kombuha-slider .ks-bg-text__track { opacity: 0.04; }
  .kombuha-slider .ks-fruit { transition: none; }
}


/* ============================================================================
   UTILITY — sakrij vizuelno ali ostavi za screen reader
   ============================================================================ */
.kombuha-slider .ks-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden !important;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0 !important;
}


/* ============================================================================
   MOBILE (≤767px) — Elementor "Mobilni portret" breakpoint
   ----------------------------------------------------------------------------
   🔒 DESKTOP JE ZAKON: SVA pravila ovde su isključivo unutar ovog @media bloka
   → fizički ne mogu da utiču na ≥768px ekrane.

   PODELA ODGOVORNOSTI:
     • VELIČINE (kutija/kesica/voće px) postavlja JS (isMobile() grana u
       slider.js) — jer inline px pobeđuje CSS @media. NISU ovde.
     • LAYOUT/TEKST/TABOVI + fix max-width klešta na kesici → OVDE (CSS).
     • KAMENJE (mobilna 9:16 slika) → native <picture> source u shortcode-html.php.
   ============================================================================ */
@media (max-width: 767px) {

  /* 1. UI tekst levo (chevrons + naslov + CTA) spušten DODATNIH 20px niže */
  .kombuha-slider .ks-text-left { margin-top: 20px; }

  /* 1. Opis desno (.ks-text-right) — sakriven na mobile */
  .kombuha-slider .ks-text-right { display: none !important; }

  /* 2. Tabovi — kratak naziv preko ::before (data-tekst iz PHP-a), VELIKA SLOVA.
        font-size:0 sakriva pun desktop naziv (a11y safe — screen reader i dalje
        čita pravi tekst iz DOM-a). flex:0 0 auto = kompaktno, centrirano. */
  /* CENTRIRANJE: .ks-ui u @media(max-width:1024px) ima justify-items:start, što
     .ks-tabs svodi na širinu sadržaja i gura ulevo (unutrašnji justify-content:
     center tad nema šta da centrira). justify-self:stretch vraća .ks-tabs na
     punu širinu ćelije → justify-content:center centrira 3 taba na sredinu. */
  .kombuha-slider .ks-tabs {
    justify-self: stretch;
  }
  .kombuha-slider .ks-tab {
    font-size: 0;
    flex: 0 0 auto;
  }
  .kombuha-slider .ks-tab::before {
    content: attr(data-tekst);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* 4. Pozadinski tekst — veličinu (fontSize) na mobilu postavlja slider.js
        INLINE iz KONFIGURACIJA.mobileRaspored.pozadinskiTekst (jedan izvor istine,
        editable iz raspored-mobile.html). Desktop clamp 120–280px ostaje netaknut. */

  /* 5. KESICA — gasi max-width:100% klešta (uzrok deformacije "visoka + uska").
        Globalni reset .kombuha-slider img{max-width:100%} je, u kombinaciji sa
        forsiranom height:100% i width:auto na left:62%, stezao širinu slike na
        ~širinu preostalog prostora → razvučena slika. Bez klešta, width:auto
        prati height po PRAVOM aspektu. Visinu (2/3 ≈ 473px) postavlja JS. */
  .kombuha-slider .ks-pouch__img img { max-width: none; }

}