/*
  MAGLICA — sekcije i komponente (style.css)

  Mobile-first: sve ovde je telefon (390×844). Tablet i desktop su u
  queries.css. Boje isključivo kroz tokene uloga iz general.css.

  Z-SLOJEVI
  -1  .ambijent (fiksiran, iza svega)
  45  .rez-pilula
  50  .header, .tab-traka
  150 body::after — tamni okvir oko „uvučene" strane
  200 .sheet
  300 .lightbox
  400 .tost-omot
*/

/* ////////////////////////////////////////////////////////////////////
   ZAGLAVLJE
   //////////////////////////////////////////////////////////////////// */

/* Razmak od vrha je `top`, NE padding: kutija zaglavlja ne sme da
   dodiruje gornju ivicu, inače Safari 26 (iOS) traku iznad sadržaja
   oboji punom bojom umesto da kroz nju pusti sadržaj (vidi .ambijent u
   staklo.css). Isto važi za traku sa tabovima dole. */
.header {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1.4rem);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 1.4rem;
  /* samo kapsula hvata dodir — prostor oko nje propušta klik na stranu */
  pointer-events: none;
}

.header-omot {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 124rem;
  height: var(--visina-zaglavlja);
  margin-inline: auto;
  padding: 0 0.6rem 0 1.4rem;
  border-radius: var(--r-pilula);
  transform-origin: 50% 0;
  transition: translate 640ms var(--opruga), scale 640ms var(--opruga),
    opacity 360ms var(--ease-ios), background-color 400ms var(--ease-ios);
}

/* posle prvog pomeraja staklo postaje gušće — tekst ispod ne sme da
   „probija" kroz logo */
body.skrolovano .header-omot {
  background-color: var(--staklo-traka);
}

/* Gost lista nadole: zaglavlje odlazi gore. Providnost se menja na
   SAMOJ kapsuli (koja je staklo), ne na .header — vidi staklo.css. */
body.nav-skriven .header-omot {
  translate: 0 calc(-100% - 2rem - env(safe-area-inset-top, 0px));
  scale: 0.92;
  opacity: 0;
  pointer-events: none;
}

body.sloj-otvoren .header-omot {
  translate: 0 -1.2rem;
  opacity: 0;
  pointer-events: none;
}

/* LOGO */
.logo,
.logo:link,
.logo:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 4.4rem;
  color: var(--naslov);
  text-decoration: none;
}

.logo-znak {
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* prozor brvnare — jedini topli piksel u zaglavlju */
.logo-zar {
  fill: var(--akcenat);
  stroke: none;
}

.logo-magla--tiha {
  opacity: 0.45;
}

.logo-tekst {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

/* NAVIGACIJA — vidi se tek na desktopu (queries.css) */
.header-nav {
  display: none;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  display: inline-flex;
  align-items: center;
  height: 4rem;
  padding: 0 1.4rem;
  border-radius: var(--r-pilula);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tab-tekst);
  text-decoration: none;
  transition: color 300ms var(--ease-ios), background-color 300ms var(--ease-ios);
}

.nav-link.je-aktivan {
  color: var(--naslov);
  background-color: var(--nav-aktivan);
}

/* AKCIJE — jezik, tema, poziv / rezervacija */
.header-akcije {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.prekidac-jezik,
.prekidac-jezik:link,
.prekidac-jezik:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 1rem;
  border-radius: var(--r-pilula);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--tekst);
  text-decoration: none;
  transition: background-color 300ms var(--ease-ios), transform 500ms var(--opruga);
}

.prekidac-tema {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--tekst);
  transition: background-color 300ms var(--ease-ios), transform 500ms var(--opruga);
}

/* dve ikonice na istom mestu; vidi se ona koja NUDI drugu temu */
.prekidac-tema .ikona {
  grid-area: 1 / 1;
  width: 2.1rem;
  height: 2.1rem;
  transition: transform 640ms var(--opruga), opacity 280ms var(--ease-ios);
}

.prekidac-tema .ikona--sunce {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

[data-tema="tamna"] .prekidac-tema .ikona--mesec {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

[data-tema="tamna"] .prekidac-tema .ikona--sunce {
  opacity: 1;
  transform: none;
}

.header-poziv {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  color: var(--dugme-puno-tekst);
  background-color: var(--dugme-puno-pozadina);
  box-shadow: var(--dugme-puno-senka);
  transition: transform 500ms var(--opruga);
}

.header-poziv .ikona {
  width: 2rem;
  height: 2rem;
}

/* navodi se i sa :link/:visited — inače `.btn:link` (veća
   specifičnost) vrati display i CTA se vidi na telefonu */
.header-cta,
.header-cta:link,
.header-cta:visited {
  display: none;
}

.prekidac-jezik:active,
.prekidac-tema:active,
.header-poziv:active {
  transform: scale(0.9);
  transition-duration: 120ms;
}

@media (hover: hover) {
  .nav-link:hover {
    color: var(--naslov);
  }

  .prekidac-jezik:hover,
  .prekidac-tema:hover {
    background-color: var(--nav-aktivan);
  }
}

/* ////////////////////////////////////////////////////////////////////
   TRAKA SA TABOVIMA — plutajuća, na dnu (samo < 64em)
   //////////////////////////////////////////////////////////////////// */

/* odmaknuta od dna preko `bottom`, ne paddingom — vidi .header */
.tab-traka {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0 1.2rem;
  pointer-events: none;
  transform-origin: 50% 100%;
  transition: translate 640ms var(--opruga), scale 640ms var(--opruga);
}

.tab-traka > * {
  pointer-events: auto;
}

.tab-traka-grupa {
  flex: 1 1 auto;
  max-width: 30.4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 6.4rem;
  padding: 0.4rem;
  border-radius: var(--r-pilula);
  background-color: var(--staklo-traka);
  transition: opacity 360ms var(--ease-ios);
}

/* „Sočivo" iza aktivnog taba. JS postavlja --indikator-x / -w (px,
   u odnosu na grupu); `translate` i `scale` su zasebna svojstva, pa
   razvlačenje u pokretu ne gazi položaj. */
.tab-traka-indikator {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: var(--indikator-w, 0px);
  translate: var(--indikator-x, 0px) 0;
  border-radius: var(--r-pilula);
  background: var(--tab-socivo);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj);
  transition: translate 560ms var(--opruga), width 560ms var(--opruga),
    scale 320ms var(--ease-ios), opacity 300ms var(--ease-ios);
}

.tab-traka-grupa.u-pokretu .tab-traka-indikator {
  scale: 1.12 0.9;
}

.tab-traka-grupa.bez-indikatora .tab-traka-indikator {
  opacity: 0;
  scale: 0.7;
}

.tab-traka-link,
.tab-traka-link:link,
.tab-traka-link:visited {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  border-radius: var(--r-pilula);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--tab-tekst);
  text-decoration: none;
  transition: color 300ms var(--ease-ios), transform 500ms var(--opruga);
}

.tab-traka-link .ikona {
  width: 2.4rem;
  height: 2.4rem;
}

.tab-traka-link.je-aktivan {
  color: var(--naslov);
}

.tab-traka-akcija,
.tab-traka-akcija:link,
.tab-traka-akcija:visited {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  color: var(--naslov);
  background-color: var(--staklo-traka);
  text-decoration: none;
  transition: opacity 360ms var(--ease-ios), transform 500ms var(--opruga),
    background-color 300ms var(--ease-ios), color 300ms var(--ease-ios);
}

.tab-traka-akcija .ikona {
  width: 2.6rem;
  height: 2.6rem;
}

/* mala tačka žara — poziv na rezervaciju, bez vikanja */
.tab-traka-akcija::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 1.45rem;
  z-index: 2;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--akcenat);
  box-shadow: 0 0 0 0.25rem var(--staklo-pozadina-gusto);
  transition: transform 400ms var(--opruga), opacity 300ms var(--ease-ios);
}

.tab-traka-akcija.je-aktivan {
  color: var(--dugme-puno-tekst);
  background-color: var(--dugme-puno-pozadina);
}

.tab-traka-akcija.je-aktivan::after {
  transform: scale(0);
  opacity: 0;
}

.tab-traka-link:active,
.tab-traka-akcija:active {
  transform: scale(0.9);
  transition-duration: 120ms;
}

/* Sklanjanje: lista nadole, tastatura otvorena ili sloj preko strane.
   Roditelj se samo pomera; providnost ide na sama stakla. Mora CELA da
   ode ispod ekrana (i razmak od dna), da ne dodiruje donju ivicu. */
body.nav-skriven .tab-traka,
body.kucanje .tab-traka,
body.sloj-otvoren .tab-traka {
  translate: 0 calc(100% + 2.4rem + max(1.2rem, env(safe-area-inset-bottom, 0px)));
  scale: 0.92;
  pointer-events: none;
}

body.nav-skriven .tab-traka > *,
body.kucanje .tab-traka > *,
body.sloj-otvoren .tab-traka > * {
  opacity: 0;
  pointer-events: none;
}

/* ////////////////////////////////////////////////////////////////////
   HERO
   //////////////////////////////////////////////////////////////////// */

.hero {
  padding: calc(env(safe-area-inset-top, 0px) + 0.8rem) 0.8rem 0;
}

.hero-okvir {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: max(64rem, calc(100vh - 0.8rem));
  min-height: max(64rem, calc(100svh - 0.8rem - env(safe-area-inset-top, 0px)));
  border-radius: 3.2rem;
  background: var(--pozadina-2);
}

/* slika se na ulazu polako „smiruje" (scale 1.08 → 1). Animacija je na
   omotaču, a ne na <img>, jer JS na <img> piše transform za parallax —
   popunjena animacija bi ga zauvek pregazila. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -4;
  transform-origin: 50% 40%;
  animation: hero-smiri 2600ms var(--ease-izlaz) backwards;
}

.hero-slika {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* MAGLA — tri meka sloja koja sporo plove. Samo transform. */
.hero-magla {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.hero-magla-sloj {
  position: absolute;
  left: -40%;
  right: -40%;
  will-change: transform;
  animation: magla-plovi 72s ease-in-out infinite alternate;
}

.hero-magla-sloj--1 {
  top: 30%;
  height: 34%;
  background: radial-gradient(38% 50% at 22% 50%, var(--magla-sloj), transparent 72%),
    radial-gradient(34% 44% at 66% 58%, var(--magla-sloj), transparent 72%);
}

.hero-magla-sloj--2 {
  top: 54%;
  height: 40%;
  opacity: 0.9;
  background: radial-gradient(42% 50% at 36% 50%, var(--magla-sloj), transparent 72%),
    radial-gradient(30% 40% at 84% 44%, var(--magla-sloj), transparent 72%);
  animation-duration: 96s;
  animation-direction: alternate-reverse;
}

.hero-magla-sloj--3 {
  top: 4%;
  height: 30%;
  opacity: 0.7;
  background: radial-gradient(36% 50% at 58% 50%, var(--magla-sloj), transparent 72%);
  animation-duration: 54s;
}

/* VEO — čitljivost i po suncu: gusta magla iza naslova, slika se vidi
   oko njega, a dno se topi u boju strane (--veo-rgb = --pozadina) */
.hero-veo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      130% 56% at 50% 30%,
      rgb(var(--veo-rgb) / 0.82) 0%,
      rgb(var(--veo-rgb) / 0.58) 46%,
      rgb(var(--veo-rgb) / 0) 80%
    ),
    linear-gradient(
      180deg,
      rgb(var(--veo-rgb) / 0.6) 0%,
      rgb(var(--veo-rgb) / 0) 24%,
      rgb(var(--veo-rgb) / 0) 58%,
      rgb(var(--veo-rgb) / 0.72) 84%,
      rgb(var(--veo-rgb)) 100%
    );
}

/* ŽAR — jedan topli sjaj u sredini kadra, kao prozor u magli */
.hero-zar {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: -1;
  width: 44rem;
  height: 44rem;
  margin: -22rem 0 0 -22rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    var(--zar-sjaj) 0%,
    rgb(236 158 70 / 0.16) 46%,
    rgb(236 158 70 / 0) 100%
  );
  animation: zar-disanje 7s ease-in-out infinite alternate;
}

.hero-sadrzaj {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--visina-zaglavlja) + 5.6rem) 1.6rem 0;
  text-align: center;
}

.hero-mesto {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding: 0 1.4rem 0 1.1rem;
  border-radius: var(--r-pilula);
  font-size: 1.35rem;
  font-weight: 550;
  color: var(--tekst);
  animation: ulaz-gore 900ms var(--ease-izlaz) 50ms backwards;
}

.hero-mesto .ikona {
  width: 1.7rem;
  height: 1.7rem;
}

.hero-naslov {
  margin: 2rem 0 1.6rem;
  font-size: var(--fs-hero);
  font-weight: 680;
  line-height: 0.98;
  letter-spacing: -0.048em;
  color: var(--naslov);
  text-wrap: balance;
}

/* Reči ulaze redom: pomeraj + zamućenje → oštro + providnost. Blur je
   dozvoljen samo ovde — jednom, na ulazu. */
.hero-rec {
  display: inline-block;
  animation: rec-ulaz 1200ms var(--ease-izlaz) backwards;
  animation-delay: calc(180ms + var(--i, 0) * 100ms);
}

.hero-podnaslov {
  max-width: 34rem;
  font-size: 1.7rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--hero-podnaslov);
  text-wrap: balance;
  animation: ulaz-gore 1000ms var(--ease-izlaz) 520ms backwards;
}

.hero-dugmad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.6rem;
}

/* animira se svako dugme posebno — providnost na roditelju bi
   isključila zamućenje staklenog dugmeta dok traje ulaz */
.hero-dugmad > * {
  animation: ulaz-gore 1000ms var(--ease-izlaz) 680ms backwards;
}

/* uži unutrašnji razmak da oba dugmeta stanu u red i na 360 px */
.hero-dugmad .btn {
  padding: 0 1.9rem;
}

.hero-dugmad > :nth-child(2) {
  animation-delay: 760ms;
}

.hero-cipovi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  padding: 0 1.2rem calc(max(1.2rem, env(safe-area-inset-bottom, 0px)) + 9.6rem);
}

.hero-cipovi > * {
  background-color: var(--staklo-pozadina);
  animation: ulaz-gore 1000ms var(--ease-izlaz) 900ms backwards;
}

.hero-cipovi > :nth-child(2) {
  animation-delay: 980ms;
}

.hero-cipovi > :nth-child(3) {
  animation-delay: 1060ms;
}

/* ////////////////////////////////////////////////////////////////////
   KUĆA
   //////////////////////////////////////////////////////////////////// */

.sekcija--kuca {
  padding-top: 5.6rem;
}

.kuca-uvod {
  display: grid;
  gap: 3.2rem;
  margin-bottom: 3.2rem;
}

.kuca-tekst .naslov-sekcije {
  margin-bottom: 1.8rem;
}

.kuca-tekst .tekst--uvod {
  margin-bottom: 1.4rem;
}

.kuca-slika {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-kartica);
  background: var(--pozadina-2);
  box-shadow: var(--senka-2);
}

.kuca-slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kuca-domacini {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem 1.2rem 1.2rem;
  /* koncentrično: radijus okvira minus razmak od ivice */
  border-radius: calc(var(--r-kartica) - 1.2rem);
  background: var(--kartica-na-slici);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), var(--senka-1);
}

.domacini-lica {
  display: flex;
  flex-shrink: 0;
}

.domacini-lica span {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--lice-tekst);
  background: var(--lice-1);
  box-shadow: 0 0 0 0.25rem var(--kartica-na-slici);
}

.domacini-lica span + span {
  margin-left: -1rem;
  background: var(--lice-2);
}

.domacini-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--tekst-tiho);
}

.domacini-tekst strong {
  font-size: 1.55rem;
  color: var(--tekst);
}

/* ČINJENICE — staklene pločice */
.cinjenice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cinjenica {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.6rem 1.6rem 1.8rem;
  border-radius: var(--r-kartica-mala);
}

.cinjenica .ikona {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.4rem;
  color: var(--naslov);
}

.cinjenica strong {
  font-size: 2.6rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--naslov);
}

.cinjenica > span {
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--tekst-tiho);
}

.sadrzaj-kuce {
  margin-top: 3.2rem;
}

.sadrzaj-kuce-naslov {
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tekst-tiho);
}

.sadrzaj-cipovi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ////////////////////////////////////////////////////////////////////
   GALERIJA — na telefonu vodoravno prevlačenje sa „virenjem" sledeće
   slike; mreža od 48em (queries.css). JS crta sadržaj.
   //////////////////////////////////////////////////////////////////// */

.galerija-mreza {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 1.2rem;
  /* van zaštitne margine — kartice idu do ivice ekrana */
  margin: -0.8rem calc(var(--gutter) * -1) -1.6rem;
  padding: 0.8rem var(--gutter) 2.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.galerija-mreza::-webkit-scrollbar {
  display: none;
}

.galerija-mreza:empty {
  display: none;
}

.galerija-stavka {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-kartica);
  background: var(--pozadina-2);
  box-shadow: var(--senka-1);
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: transform 520ms var(--opruga), box-shadow 420ms var(--ease-ios);
}

.galerija-stavka:active {
  transform: scale(0.97);
  transition-duration: 160ms;
}

.galerija-stavka:focus-visible {
  outline-offset: -3px;
}

.galerija-stavka img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-izlaz);
}

/* natpis preko fotografije: taman gradijent garantuje kontrast belog
   teksta i na svetloj slici */
.galerija-natpis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 5.6rem 1.6rem 1.5rem;
  background: linear-gradient(0deg, rgb(8 12 10 / 0.7) 0%, rgb(8 12 10 / 0.34) 55%, rgb(8 12 10 / 0) 100%);
  color: #ffffff;
  pointer-events: none;
}

.galerija-naslov {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.galerija-oznaka {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0 1rem;
  border-radius: var(--r-pilula);
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
}

.galerija-oznaka::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--p-zar-svetli);
}

/* OKOLINA — kartice mesta u dve kolone */
.galerija-mreza--okolina {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.galerija-mreza--okolina .galerija-stavka {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-kartica-mala);
}

.galerija-mreza--okolina .galerija-natpis {
  padding: 4.8rem 1.2rem 1.2rem;
}

.galerija-mreza--okolina .galerija-naslov {
  font-size: 1.45rem;
}

.galerija-mreza--okolina .galerija-stavka--velika {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 11;
}

.galerija-mreza--okolina .galerija-stavka--velika .galerija-naslov {
  font-size: 1.9rem;
}

/* poslednja kartica koja bi ostala sama u redu — ide preko cele širine */
.galerija-mreza--okolina .galerija-stavka--velika ~ .galerija-stavka:last-child:nth-child(even),
.galerija-mreza--okolina .galerija-stavka:first-child:not(.galerija-stavka--velika) ~ .galerija-stavka:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* ////////////////////////////////////////////////////////////////////
   USLUGE I PROIZVODI
   //////////////////////////////////////////////////////////////////// */

.sekcija--usluge .podnaslov-sekcije {
  margin-bottom: 1.6rem;
}

.usluge-podnaslov {
  margin: 4.8rem 0 1.6rem;
}

.usluge-podnaslov .podnaslov-sekcije {
  margin-bottom: 0.6rem;
}

/* usluge: vodoravno prevlačenje, kao galerija */
.usluge-mreza {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 1.2rem;
  margin: -0.8rem calc(var(--gutter) * -1) -1.6rem;
  padding: 0.8rem var(--gutter) 2.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.usluge-mreza::-webkit-scrollbar {
  display: none;
}

.usluge-mreza:empty {
  display: none;
}

.usluga-kartica {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-kartica);
  scroll-snap-align: start;
  transition: box-shadow 420ms var(--ease-ios), transform 520ms var(--opruga);
}

/* slika uvučena od ivice kartice, sa koncentričnim radijusom */
.usluga-slika {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: 0.6rem 0.6rem 0;
  border-radius: calc(var(--r-kartica) - 0.6rem);
  background: var(--pozadina-2);
}

.usluga-slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-izlaz);
}

.usluga-telo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.6rem 1.8rem 1.8rem;
}

.usluga-naziv {
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--naslov);
}

.usluga-pakovanje {
  margin-top: 0.2rem;
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

.usluga-opis {
  flex: 1;
  margin-top: 0.6rem;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--tekst-tiho);
}

.usluga-dno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
}

.usluga-cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4rem;
  min-width: 0;
  line-height: 1.2;
}

.usluga-cena strong {
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--naslov);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usluga-cena span {
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

.btn-dodaj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-shrink: 0;
  min-height: 4.4rem;
  padding: 0 1.6rem 0 1.2rem;
  border-radius: var(--r-pilula);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--dodaj-tekst);
  background-color: var(--dodaj-pozadina);
  transition: background-color 300ms var(--ease-ios), color 300ms var(--ease-ios),
    transform 520ms var(--opruga);
}

.btn-dodaj .ikona {
  width: 1.8rem;
  height: 1.8rem;
}

.btn-dodaj:active {
  transform: scale(0.94);
  transition-duration: 120ms;
}

.btn-dodaj.je-dodato {
  color: var(--dodato-tekst);
  background-color: var(--dodato-pozadina);
}

.btn-dodaj.je-dodato .ikona {
  animation: kvacica-iskoci 520ms var(--opruga) backwards;
}

.usluga-kartica.je-izabrana {
  box-shadow: inset 0 0 0 2px var(--izabrano-obod), var(--kartica-senka);
}

/* proizvodi: mreža od dve kolone, kvadratna slika, dugme kao krug */
.usluge-mreza--proizvodi {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.usluga-kartica--proizvod {
  border-radius: var(--r-kartica-mala);
}

.usluga-kartica--proizvod .usluga-slika {
  aspect-ratio: 1 / 1;
  margin: 0.5rem 0.5rem 0;
  border-radius: calc(var(--r-kartica-mala) - 0.5rem);
}

.usluga-kartica--proizvod .usluga-telo {
  padding: 1.2rem 1.2rem 1.2rem 1.4rem;
}

.usluga-kartica--proizvod .usluga-naziv {
  font-size: 1.5rem;
  letter-spacing: -0.018em;
}

.usluga-kartica--proizvod .usluga-pakovanje {
  font-size: 1.25rem;
}

.usluga-kartica--proizvod .usluga-opis {
  font-size: 1.3rem;
  line-height: 1.45;
}

.usluga-kartica--proizvod .usluga-dno {
  margin-top: 1rem;
  gap: 0.6rem;
}

.usluga-kartica--proizvod .usluga-cena strong {
  font-size: 1.6rem;
}

.usluga-kartica--proizvod .btn-dodaj {
  width: 4.4rem;
  padding: 0;
}

.usluga-kartica--proizvod .btn-dodaj .ikona {
  width: 2rem;
  height: 2rem;
}

/* tekst ostaje za čitač ekrana — dugme bez njega ne bi imalo ime */
.usluga-kartica--proizvod .btn-dodaj-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ////////////////////////////////////////////////////////////////////
   CENE
   //////////////////////////////////////////////////////////////////// */

.cene-mreza {
  display: grid;
  gap: 1.2rem;
}

.cena-kartica {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 2.2rem 2.2rem;
  border-radius: var(--r-kartica);
}

.cena-naziv {
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--naslov);
}

.cena-opis {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--tekst-tiho);
}

.cena-iznos {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2rem 0 1.8rem;
}

.cena-iznos strong {
  font-size: 5.2rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--naslov);
  font-variant-numeric: tabular-nums;
}

.cena-iznos > span {
  font-size: 1.5rem;
  color: var(--tekst-tiho);
}

.cena-lista {
  display: grid;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ivica);
}

.cena-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--tekst);
}

.cena-lista .ikona {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.05rem;
  color: var(--uspeh);
}

/* ISTAKNUTA — tamna kartica sa sjajem žara u uglu */
.cena-kartica--istaknuta {
  color: var(--istaknuto-tekst);
  background:
    radial-gradient(30rem 22rem at 88% -6%, rgb(232 160 78 / 0.34), rgb(232 160 78 / 0) 70%),
    var(--istaknuto-pozadina);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px var(--istaknuto-ivica),
    var(--senka-2);
}

.cena-kartica--istaknuta .cena-naziv,
.cena-kartica--istaknuta .cena-iznos strong {
  color: var(--istaknuto-tekst);
}

.cena-kartica--istaknuta .cena-opis,
.cena-kartica--istaknuta .cena-iznos > span {
  color: var(--istaknuto-tiho);
}

.cena-kartica--istaknuta .cena-lista {
  border-top-color: var(--istaknuto-ivica);
}

.cena-kartica--istaknuta .cena-lista li {
  color: var(--istaknuto-tekst);
}

.cena-kartica--istaknuta .cena-lista .ikona {
  color: var(--akcenat);
}

.cena-oznaka {
  position: absolute;
  top: 2.2rem;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0 1.2rem;
  border-radius: var(--r-pilula);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--na-akcentu);
  background: var(--akcenat);
}

/* PRAVILA — kako se računa */
.pravila {
  margin-top: 1.2rem;
  padding: 2.4rem 2rem 2rem;
  border-radius: var(--r-kartica);
}

.pravila-naslov {
  margin-bottom: 0.8rem;
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--naslov);
}

.pravilo {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--ivica);
}

.pravilo:first-child {
  border-top: 0;
}

.pravilo-ikona {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 1.3rem;
  color: var(--naslov);
  background: var(--povrsina-2);
}

.pravilo-ikona .ikona {
  width: 2.1rem;
  height: 2.1rem;
}

.pravilo-tekst {
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--tekst-tiho);
}

.pravilo-tekst strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.6rem;
  color: var(--tekst);
}

.pravila .btn {
  margin-top: 1.2rem;
}

/* ////////////////////////////////////////////////////////////////////
   REZERVACIJA — forma kao iOS ekran
   //////////////////////////////////////////////////////////////////// */

.rez-forma {
  display: grid;
  gap: 1.2rem;
}

.rez-blok {
  min-width: 0;
  padding: 1.8rem 1.6rem;
  border-radius: var(--r-kartica);
}

.rez-blok-zaglavlje {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  margin-bottom: 1.2rem;
}

.rez-korak {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dugme-puno-tekst);
  background: var(--dugme-puno-pozadina);
}

.rez-blok-naslov {
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--naslov);
}

/* ---------- KALENDAR ---------- */

/* Kartica je „container" da bi visina mreže mogla da se izračuna iz
   širine (100cqi / 7 = jedna ćelija) — mesec od 5 i od 6 redova tada
   zauzimaju isto mesto i ništa ispod ne skače pri listanju. */
.rez-kalendar {
  --kal-vrh: 7rem;
  display: flex;
  flex-direction: column;
  padding-inline: 1.2rem;
  container-type: inline-size;
}

/* .kal-vrh nema svoj okvir: strelice sede u redu sa naslovom meseca,
   a poruka ide na dno kartice (order) */
.kal-vrh {
  display: contents;
}

.kal-strelica {
  position: absolute;
  top: var(--kal-vrh);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--naslov);
  background: var(--povrsina-2);
  transition: opacity 300ms var(--ease-ios), transform 500ms var(--opruga),
    background-color 300ms var(--ease-ios);
}

.kal-strelica .ikona {
  width: 2rem;
  height: 2rem;
}

.kal-strelica--nazad {
  left: 1.2rem;
}

.kal-strelica--napred {
  right: 1.2rem;
}

.kal-strelica:disabled {
  opacity: 0.3;
  cursor: default;
}

.kal-strelica:active:not(:disabled) {
  transform: scale(0.88);
  transition-duration: 120ms;
}

.kal-poruka {
  order: 4;
  margin-top: 1.2rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tekst-tiho);
}

.kal-poruka:empty {
  display: none;
}

.kal-meseci {
  order: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3.2rem;
  min-height: 38rem;
  min-height: calc(4.4rem + 3.4rem + 6 * (100cqi / 7) + 2rem);
}

.kal-izbor {
  order: 2;
}

.kal-legenda {
  order: 3;
}

/* mek indikator učitavanja: bledi kostur mreže + pilula sa tačkama */
.kal-ucitavanje {
  position: absolute;
  top: var(--kal-vrh);
  left: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  height: 38rem;
  height: calc(4.4rem + 3.4rem + 6 * (100cqi / 7) + 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.kal-ucitavanje-mreza {
  position: absolute;
  inset: 7.8rem 0 0;
  background: radial-gradient(circle, var(--povrsina-2) 0 1.5rem, transparent 1.55rem) 0 0 /
    calc(100% / 7) calc(100% / 6);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 100%);
  mask: linear-gradient(180deg, #000 30%, transparent 100%);
  animation: kostur-pulsira 1400ms ease-in-out infinite alternate;
}

.kal-ucitavanje-tekst {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0 1.8rem 0 1.4rem;
  border-radius: var(--r-pilula);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--tekst);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.kal-ucitavanje-tacke {
  display: inline-flex;
  gap: 0.35rem;
}

.kal-ucitavanje-tacke i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--akcenat);
  animation: tacka-skace 1100ms var(--ease-ios) infinite;
}

.kal-ucitavanje-tacke i:nth-child(2) {
  animation-delay: 140ms;
}

.kal-ucitavanje-tacke i:nth-child(3) {
  animation-delay: 280ms;
}

/* poruka za slučaj da JavaScript ne radi (html bez klase .js) */
.kal-bez-js {
  display: none;
}

html:not(.js) .kal-ucitavanje {
  position: static;
  height: auto;
  order: 1;
  padding: 2.4rem 0.8rem;
  pointer-events: auto;
}

html:not(.js) .kal-ucitavanje-mreza,
html:not(.js) .kal-ucitavanje-tekst,
html:not(.js) .kal-strelica {
  display: none;
}

html:not(.js) .kal-bez-js {
  display: block;
  font-size: 1.55rem;
  line-height: 1.5;
  text-align: center;
  color: var(--tekst);
}

html:not(.js) .kal-bez-js a {
  font-weight: 650;
  white-space: nowrap;
}

html:not(.js) .kal-meseci {
  min-height: 0;
}

/* MESEC */
.kal-mesec {
  min-width: 0;
}

.kal-meseci--napred .kal-mesec {
  animation: kal-napred 460ms var(--ease-izlaz) backwards;
}

.kal-meseci--nazad .kal-mesec {
  animation: kal-nazad 460ms var(--ease-izlaz) backwards;
}

.kal-meseci--napred .kal-mesec + .kal-mesec,
.kal-meseci--nazad .kal-mesec + .kal-mesec {
  animation-delay: 50ms;
}

.kal-naslov {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--naslov);
}

.kal-dani-nedelje {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  height: 3.4rem;
}

.kal-dani-nedelje span {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: var(--tekst-tiho);
}

/* Bez vodoravnog razmaka između ćelija: traka raspona mora da bude
   neprekidna, inače se u razmaku vidi „kvadrat" (zamka sa Studenca). */
.kal-mreza {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0.4rem;
}

/* DAN
   Svaki dan je sopstveni stacking context (isolation), a crta se u
   dva pseudo-sloja ISPOD broja:
   ::before — traka raspona (neprovidna)
   ::after  — krug (izabran / hover / šrafura zauzetog)
   Zato „iskakanje" izabranog dana (transform na ::after) ne povlači
   traku i ne prebacuje je preko kruga — to je bila greška na Savskom
   izlogu kad je transform stajao na samom danu. */
.dan {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 420ms var(--opruga), color 200ms var(--ease-ios);
}

.dan::before,
.dan::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

button.dan {
  cursor: pointer;
}

button.dan:active {
  transform: scale(0.9);
  transition-duration: 120ms;
}

.dan:focus-visible {
  outline-offset: -1px;
}

.dan--prazan {
  visibility: hidden;
}

.dan--proslo {
  color: var(--dan-proslo-tekst);
}

/* danas — broj u boji žara, kao crveni broj u iOS kalendaru */
.dan--danas {
  font-weight: 700;
  color: var(--akcenat-tekst);
}

/* sezona — tačka žara ispod broja (pozadina samog dana, pa je krug
   izabranog dana prirodno prekrije) */
.dan--sezona {
  background-image: radial-gradient(
    circle at 50% calc(100% - 0.75rem),
    var(--akcenat) 0 0.22rem,
    transparent 0.26rem
  );
}

/* zauzeto — prigušen broj i šrafura; bez precrtavanja (smetalo je čitanju) */
.dan--zauzet {
  color: var(--dan-zauzet-tekst);
}

.dan--zauzet::after {
  content: "";
  inset: 0.3rem;
  border-radius: 50%;
  background: repeating-linear-gradient(
    -45deg,
    var(--dan-zauzet-srafura) 0 1px,
    transparent 1px 4.5px
  );
}

/* zauzet dan koji sme da bude dan ODLASKA: jutro je slobodno, noć
   nije — šrafirana je samo desna polovina */
.dan--odlazak-moguc {
  color: var(--tekst);
}

.dan--odlazak-moguc::after {
  clip-path: inset(0 0 0 50%);
}

/* RASPON */
.dan--u-rasponu {
  font-weight: 600;
  color: var(--dan-raspon-tekst);
}

.dan--u-rasponu::before,
.dan--pocetak::before,
.dan--kraj::before {
  content: "";
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0;
  right: 0;
  background: var(--dan-raspon);
}

.dan--pocetak::before {
  left: 50%;
}

.dan--kraj::before {
  right: 50%;
}

.dan--pocetak.dan--kraj::before {
  content: none;
}

/* na krajevima reda (i meseca) traka se zaobljava kao kapsula */
.dan--u-rasponu:nth-child(7n + 1)::before,
.dan--prazan + .dan--u-rasponu::before,
.dan--kraj:nth-child(7n + 1)::before,
.dan--prazan + .dan--kraj::before {
  border-top-left-radius: 10rem;
  border-bottom-left-radius: 10rem;
}

.dan--u-rasponu:nth-child(7n)::before,
.dan--u-rasponu:last-child::before,
.dan--u-rasponu:has(+ .dan--prazan)::before,
.dan--pocetak:nth-child(7n)::before,
.dan--pocetak:last-child::before {
  border-top-right-radius: 10rem;
  border-bottom-right-radius: 10rem;
}

/* HOVER — samo uređaji sa mišem. Na dodir bi se „zalepio" posle
   dodira (zamka iz ranijih projekata). */
@media (hover: hover) {
  .dan--slobodan:hover::after,
  .dan--odlazak-moguc:hover::after {
    content: "";
    inset: 0.2rem;
    border-radius: 50%;
    clip-path: none;
    background: var(--dan-hover);
  }

  .dan--u-rasponu:hover::after {
    background: var(--dan-hover-raspon);
  }
}

/* IZABRAN — dolazi POSLE hover pravila iste specifičnosti, pa izabran
   dan zadržava svoje boje i pod mišem */
.dan.dan--izabran {
  font-weight: 650;
  color: var(--dan-izabran-tekst);
}

.dan.dan--izabran::after {
  content: "";
  inset: 0.2rem;
  border-radius: 50%;
  clip-path: none;
  background: var(--dan-izabran-pozadina);
  box-shadow: 0 0.4rem 1.2rem -0.3rem rgb(14 17 15 / 0.4);
  animation: dan-iskoci 560ms var(--opruga) backwards;
}

.dan.dan--izabran.dan--danas::after {
  box-shadow: inset 0 0 0 2px var(--akcenat), 0 0.4rem 1.2rem -0.3rem rgb(14 17 15 / 0.4);
}

/* Dodirni ekrani: :hover ostaje „zalepljen" posle dodira. Ovde nema
   hover efekata (sve je pod (hover: hover)), ali izabran dan izričito
   zadržava i boju TEKSTA — bez toga je na Savskom izlogu ostajao taman
   broj na tamnoj podlozi. */
@media (hover: none) {
  .dan.dan--izabran:hover {
    color: var(--dan-izabran-tekst);
  }

  .dan.dan--izabran:hover::after {
    background: var(--dan-izabran-pozadina);
  }
}

/* LEGENDA */
.kal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-top: 1.4rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

.kal-legenda-stavka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.kal-uzorak {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}

.kal-uzorak--slobodno {
  box-shadow: inset 0 0 0 1px var(--ivica-jaka);
}

.kal-uzorak--zauzeto {
  color: var(--dan-zauzet-tekst);
  background: repeating-linear-gradient(
    -45deg,
    var(--dan-zauzet-srafura) 0 1px,
    transparent 1px 4px
  );
}

.kal-uzorak--izabrano {
  color: var(--dan-izabran-tekst);
  background: var(--dan-izabran-pozadina);
}

.kal-uzorak--sezona {
  background-image: radial-gradient(
    circle at 50% calc(100% - 0.35rem),
    var(--akcenat) 0 0.18rem,
    transparent 0.22rem
  );
  box-shadow: inset 0 0 0 1px var(--ivica);
}

/* IZBOR — šta je gost do sada izabrao */
.kal-izbor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.6rem;
  margin-top: 1.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  border-radius: 1.8rem;
  background: var(--povrsina-2);
  transition: background-color 400ms var(--ease-ios);
}

.kal-izbor--gotov {
  background: var(--dan-raspon);
}

.kal-izbor-tekst {
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--tekst-tiho);
}

.kal-izbor-tekst strong {
  font-weight: 650;
  color: var(--naslov);
}

.kal-ponisti {
  flex-shrink: 0;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: var(--r-pilula);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tekst);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
  transition: transform 500ms var(--opruga);
}

.kal-ponisti:active {
  transform: scale(0.94);
  transition-duration: 120ms;
}

/* ---------- GOSTI ---------- */

.rez-red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--ivica);
}

.rez-red-tekst {
  min-width: 0;
}

.rez-oznaka {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tekst);
}

.rez-pomoc {
  margin-top: 0.2rem;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--tekst-tiho);
}

.rez-pomoc:empty {
  display: none;
}

/* STEPPER — generički; JS obrađuje svaki [data-stepper] */
.stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.2rem;
  padding: 0.3rem;
  border-radius: var(--r-pilula);
  background: var(--povrsina-2);
}

.stepper button {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--naslov);
  background: var(--stepper-dugme);
  box-shadow: 0 0.1rem 0.3rem rgb(14 17 15 / 0.1);
  transition: transform 460ms var(--opruga), opacity 300ms var(--ease-ios);
}

.stepper button .ikona {
  width: 1.8rem;
  height: 1.8rem;
  stroke-width: 2;
}

.stepper button:active:not(:disabled) {
  transform: scale(0.86);
  transition-duration: 120ms;
}

.stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.stepper input {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  font-size: 1.9rem;
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper--malo input {
  width: 3.2rem;
  font-size: 1.6rem;
}

/* PREKIDAČ (iOS switch) — tekst levo, klizač desno */
.prekidac {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.8rem;
  padding-top: 0.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.prekidac input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.prekidac-klizac {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 5.2rem;
  height: 3.2rem;
  border-radius: var(--r-pilula);
  background: var(--prekidac-pozadina);
  transition: background-color 300ms var(--ease-ios);
}

.prekidac-klizac::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-pilula);
  background: var(--prekidac-dugme);
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.18), 0 0 0 0.05rem rgb(0 0 0 / 0.04);
  transition: transform 520ms var(--opruga), width 320ms var(--ease-ios);
}

.prekidac input:checked + .prekidac-klizac {
  background: var(--prekidac-ukljucen);
}

.prekidac input:checked + .prekidac-klizac::after {
  transform: translateX(2rem);
}

/* dok se drži prst, dugme se razvuče — kao na iOS-u */
.prekidac:active .prekidac-klizac::after {
  width: 3.4rem;
}

.prekidac:active input:checked + .prekidac-klizac::after {
  transform: translateX(1.4rem);
}

.prekidac input:focus-visible + .prekidac-klizac {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.prekidac-tekst {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tekst);
}

.prekidac-tekst .ikona {
  color: var(--tekst-tiho);
}

/* ---------- DODACI ---------- */

.rez-grupa + .rez-grupa {
  border-top: 1px solid var(--ivica);
}

.rez-grupa summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.6rem;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.rez-grupa summary::-webkit-details-marker {
  display: none;
}

/* strelica harmonike — nacrtana ivicama, bez teksta u CSS-u */
.rez-grupa summary::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  margin: 0 0.8rem 0.4rem auto;
  border: solid var(--tekst-tiho);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
  transition: transform 460ms var(--opruga), margin 460ms var(--opruga);
}

.rez-grupa[open] summary::after {
  margin-bottom: -0.4rem;
  transform: rotate(-135deg);
}

.rez-grupa-broj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border-radius: var(--r-pilula);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--na-akcentu);
  background: var(--akcenat);
  animation: broj-iskoci 480ms var(--opruga) backwards;
}

.rez-dodaci-lista {
  padding-bottom: 0.8rem;
}

.dodatak {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  min-height: 6rem;
  padding: 0.8rem 0.2rem;
  border-top: 1px solid var(--ivica);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dodatak--komad {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
}

.dodatak-cek {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* krug koji postaje kvačica (kvačica je nacrtana ivicama) */
.dodatak-oznaka {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ivica-jaka);
  transition: background-color 260ms var(--ease-ios), box-shadow 260ms var(--ease-ios),
    transform 460ms var(--opruga);
}

.dodatak-oznaka::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.55rem;
  width: 0.65rem;
  height: 1.15rem;
  border: solid var(--dodato-tekst);
  border-width: 0 0.22rem 0.22rem 0;
  transform: rotate(45deg) scale(0);
  transition: transform 460ms var(--opruga);
}

.dodatak-cek:checked + .dodatak-oznaka,
.dodatak.je-izabran .dodatak-oznaka {
  background: var(--dodato-pozadina);
  box-shadow: none;
}

.dodatak-cek:checked + .dodatak-oznaka::after,
.dodatak.je-izabran .dodatak-oznaka::after {
  transform: rotate(45deg) scale(1);
}

.dodatak:active .dodatak-oznaka {
  transform: scale(0.88);
  transition-duration: 120ms;
}

.dodatak-cek:focus-visible + .dodatak-oznaka {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.dodatak-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.dodatak-naziv {
  font-size: 1.55rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--tekst);
}

.dodatak-cena {
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--tekst-tiho);
}

.dodatak.je-izabran .dodatak-naziv {
  font-weight: 650;
}

/* ---------- KONTAKT ---------- */

.rez-polja {
  display: grid;
  gap: 1.4rem;
}

.polje {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.polje label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tekst);
}

.polje label em {
  margin-left: 0.4rem;
  font-style: normal;
  font-weight: 400;
  color: var(--tekst-tiho);
}

/* 1.7rem = 17px: ispod 16px iOS uveličava stranu pri fokusu */
.polje input,
.polje textarea {
  width: 100%;
  min-height: 5.2rem;
  padding: 1.3rem 1.6rem;
  border: 0;
  border-radius: var(--r-polje);
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--tekst);
  background: var(--polje-pozadina);
  box-shadow: inset 0 0 0 1px var(--ivica);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 260ms var(--ease-ios), background-color 260ms var(--ease-ios);
}

.polje textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.5;
}

.polje input::placeholder,
.polje textarea::placeholder {
  color: var(--tekst-tiho);
  opacity: 0.7;
}

.polje input:focus,
.polje textarea:focus {
  background: var(--polje-pozadina-fokus);
  box-shadow: inset 0 0 0 1.5px var(--fokus), 0 0 0 0.4rem var(--izabrano-pozadina);
}

/* polje ima svoj fokus (ivica + oreol) — outline bi bio duplo */
.polje input:focus-visible,
.polje textarea:focus-visible {
  outline: none;
}

.polje input[aria-invalid="true"],
.polje textarea[aria-invalid="true"],
.polje--greska input {
  box-shadow: inset 0 0 0 1.5px var(--greska-tekst), 0 0 0 0.4rem var(--greska-pozadina);
}

/* zamka za botove — van ekrana, ne display:none */
.rez-zamka {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.rez-poziv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 1.45rem;
  color: var(--tekst-tiho);
}

/* ---------- RAČUN (kao Apple Pay list) ---------- */

.rez-racun {
  min-width: 0;
  padding: 2.2rem 2rem 2rem;
  border-radius: var(--r-kartica);
}

.rez-racun-naslov {
  margin-bottom: 0.6rem;
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--naslov);
}

.rez-stavke {
  display: grid;
}

.rez-stavka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--ivica);
  font-size: 1.5rem;
  line-height: 1.35;
}

.rez-stavka:first-child {
  border-top: 0;
}

.rez-stavka-opis {
  min-width: 0;
  color: var(--tekst);
}

.rez-stavka-opis em {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  font-style: normal;
  color: var(--tekst-tiho);
}

.rez-stavka-iznos {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}

.rez-stavka--popust .rez-stavka-iznos {
  color: var(--uspeh);
}

.rez-ukupno {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ivica-jaka);
}

.rez-ukupno span {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tekst);
}

.rez-ukupno strong {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
}

.rez-avans {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  font-size: 1.4rem;
  color: var(--tekst-tiho);
}

.rez-avans::before {
  content: "";
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--akcenat);
}

.rez-avans:empty,
.rez-napomena-cena:empty {
  display: none;
}

.rez-napomena-cena {
  margin-top: 0.8rem;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--tekst-tiho);
}

.rez-greska {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1.4rem;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--greska-tekst);
  background: var(--greska-pozadina);
  animation: ulaz-gore 420ms var(--opruga) backwards;
}

#rez-posalji {
  margin-top: 1.8rem;
}

.rez-sitno {
  margin-top: 1.2rem;
  font-size: 1.25rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tekst-tiho);
}

/* ---------- USPEH ---------- */

.rez-uspeh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 4rem 2.4rem;
  border-radius: var(--r-kartica);
  text-align: center;
  animation: uspeh-ulaz 720ms var(--opruga) backwards;
}

.rez-uspeh-ikona {
  width: 7.2rem;
  height: 7.2rem;
  fill: none;
  stroke: var(--uspeh);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rez-uspeh-krug {
  stroke-dasharray: 158;
  stroke-dashoffset: 158;
  animation: crtaj 820ms var(--ease-izlaz) 150ms forwards;
}

.rez-uspeh-kvacica {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: crtaj 480ms var(--ease-izlaz) 700ms forwards;
}

.rez-uspeh-naslov {
  font-size: 2.6rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--naslov);
}

.rez-uspeh-tekst {
  max-width: 44ch;
  color: var(--tekst-tiho);
}

.rez-demo-veza,
.rez-demo-veza:link,
.rez-demo-veza:visited {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.8rem;
  border-radius: var(--r-pilula);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--akcenat-tekst);
  background: var(--akcenat-sjaj);
  text-decoration: none;
}

.rez-uspeh .btn {
  margin-top: 0.8rem;
}

/* ---------- LEBDEĆA PILULA SA CENOM ---------- */

.rez-pilula {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: calc(max(1.2rem, env(safe-area-inset-bottom, 0px)) + 7.4rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: fit-content;
  max-width: calc(100% - 3.2rem);
  margin-inline: auto;
  min-height: 5.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.8rem;
  border: 0;
  border-radius: var(--r-pilula);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--tekst);
  white-space: nowrap;
  animation: pilula-ulaz 620ms var(--opruga) backwards;
  transition: translate 640ms var(--opruga), opacity 300ms var(--ease-ios),
    transform 460ms var(--opruga);
}

.rez-pilula-opis {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rez-pilula-iznos {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 4rem;
  padding: 0 1.6rem;
  border-radius: var(--r-pilula);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dugme-puno-tekst);
  background: var(--dugme-puno-pozadina);
}

.rez-pilula:active {
  transform: scale(0.96);
  transition-duration: 120ms;
}

/* traka sa tabovima se sklonila — pilula silazi na njeno mesto */
body.nav-skriven .rez-pilula {
  translate: 0 7.2rem;
}

body.kucanje .rez-pilula,
body.sloj-otvoren .rez-pilula {
  opacity: 0;
  pointer-events: none;
}

/* ////////////////////////////////////////////////////////////////////
   UTISCI
   //////////////////////////////////////////////////////////////////// */

.utisci-vrh {
  display: grid;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}

.utisci-vrh .zaglavlje-sekcije {
  margin-bottom: 0;
}

.ocena {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.ocena-broj {
  font-size: 5.6rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--naslov);
}

.zvezde {
  width: 9rem;
  height: 1.8rem;
  color: var(--akcenat);
}

.ocena-opis {
  margin-top: 0.4rem;
  font-size: 1.35rem;
  color: var(--tekst-tiho);
}

.utisci-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 1.2rem;
  margin: -0.8rem calc(var(--gutter) * -1) -1.6rem;
  padding: 0.8rem var(--gutter) 2.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.utisci-lista::-webkit-scrollbar {
  display: none;
}

.utisak {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 2.4rem 2.2rem 2.2rem;
  border-radius: var(--r-kartica);
  scroll-snap-align: start;
}

.utisak .zvezde {
  width: 8rem;
  height: 1.6rem;
}

.utisak-tekst {
  flex: 1;
  font-size: 1.7rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--tekst);
}

.utisak-autor {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.utisak-inicijali {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--naslov);
  background: var(--povrsina-2);
}

.utisak-ime {
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--tekst-tiho);
}

.utisak-ime strong {
  font-size: 1.5rem;
  color: var(--tekst);
}

/* ////////////////////////////////////////////////////////////////////
   LOKACIJA
   //////////////////////////////////////////////////////////////////// */

.lokacija-omot {
  display: grid;
  gap: 3.2rem;
}

.lokacija-tekst .naslov-sekcije {
  margin-bottom: 1.4rem;
}

.udaljenosti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.4rem;
}

.udaljenost {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.4rem 1.6rem 1.5rem;
  border-radius: var(--r-kartica-mala);
}

.udaljenost span {
  font-size: 1.35rem;
  color: var(--tekst-tiho);
}

.udaljenost strong {
  font-size: 2.1rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--naslov);
}

.napomena-put {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem;
  border-radius: 1.8rem;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--akcenat-sjaj);
}

.napomena-put .ikona {
  margin-top: 0.05rem;
  color: var(--akcenat-tekst);
}

.adresa {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--tekst);
}

.adresa .ikona {
  color: var(--tekst-tiho);
}

.lokacija-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.mapa-okvir {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-kartica);
  background: var(--pozadina-2);
  box-shadow: inset 0 0 0 1px var(--kartica-ivica), var(--senka-2);
}

.mapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: var(--mapa-filter);
}

/* ////////////////////////////////////////////////////////////////////
   PITANJA — harmonika (<details>)
   //////////////////////////////////////////////////////////////////// */

.pitanja-omot {
  display: grid;
  gap: 0.8rem;
}

.pitanja-poziv {
  margin-top: 1.8rem;
}

.pitanja-lista {
  padding: 0.4rem 0;
  border-radius: var(--r-kartica);
}

.pitanje {
  margin: 0 2rem;
}

.pitanje + .pitanje {
  border-top: 1px solid var(--ivica);
}

.pitanje summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 6.4rem;
  padding: 1.6rem 0;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--tekst);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.pitanje summary::-webkit-details-marker {
  display: none;
}

.pitanje summary:focus-visible {
  outline-offset: 0;
  border-radius: 1rem;
}

/* plus koji se okretanjem pretvara u × */
.pitanje-ikona {
  position: relative;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  color: var(--naslov);
  background: var(--povrsina-2);
  transition: transform 520ms var(--opruga), background-color 300ms var(--ease-ios),
    color 300ms var(--ease-ios);
}

.pitanje-ikona::before,
.pitanje-ikona::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 0.17rem;
  margin: -0.085rem 0 0 -0.6rem;
  border-radius: 1rem;
  background: currentColor;
}

.pitanje-ikona::after {
  transform: rotate(90deg);
}

.pitanje[open] .pitanje-ikona {
  transform: rotate(45deg);
  color: var(--dugme-puno-tekst);
  background: var(--dugme-puno-pozadina);
}

.pitanje-odgovor {
  padding: 0 4.8rem 2rem 0;
  font-size: 1.55rem;
  line-height: 1.6;
  color: var(--tekst-tiho);
}

/* ////////////////////////////////////////////////////////////////////
   FOOTER — tamna šumska kartica, kao hero: okvir sa malom marginom
   //////////////////////////////////////////////////////////////////// */

.footer {
  padding: 4rem 0.8rem calc(env(safe-area-inset-bottom, 0px) + 0.8rem);
}

.footer-okvir {
  overflow: hidden;
  padding: 5.6rem 0 calc(max(1.2rem, env(safe-area-inset-bottom, 0px)) + 8.8rem);
  border-radius: 3.2rem;
  color: var(--footer-tekst);
  background:
    radial-gradient(56rem 36rem at 88% 0%, rgb(232 160 78 / 0.16), rgb(232 160 78 / 0) 70%),
    var(--footer-pozadina);
}

.footer-naslov {
  font-size: var(--fs-h2);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--footer-tekst);
  text-wrap: balance;
}

.footer-uvod {
  max-width: 44ch;
  margin-top: 1.6rem;
  font-size: 1.65rem;
  line-height: 1.55;
  color: var(--footer-tiho);
}

.footer-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.8rem;
}

.footer-mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2rem 2rem;
  margin-top: 5.6rem;
  padding-top: 4rem;
  border-top: 1px solid var(--footer-ivica);
}

.footer-kolona {
  min-width: 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--footer-tiho);
}

.footer-kolona--logo,
.footer-kolona:nth-child(2) {
  grid-column: 1 / -1;
}

.footer-kolona p + p {
  margin-top: 0.6rem;
}

.logo--footer,
.logo--footer:link,
.logo--footer:visited {
  margin-bottom: 0.8rem;
  color: var(--footer-tekst);
}

.footer-naslov-kolone {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--footer-tekst);
}

.footer-lista a,
.footer-lista a:link,
.footer-lista a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 4rem;
  color: var(--footer-tiho);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 300ms var(--ease-ios);
}

.footer-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--footer-ivica);
  font-size: 1.3rem;
  color: var(--footer-tiho);
}

.footer-jezik,
.footer-jezik:link,
.footer-jezik:visited {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  font-weight: 600;
  color: var(--footer-tekst);
  text-decoration: underline;
  text-decoration-color: var(--footer-ivica);
  text-underline-offset: 0.3em;
}

@media (hover: hover) {
  .footer-lista a:hover {
    color: var(--footer-tekst);
  }

  .footer-jezik:hover {
    text-decoration-color: currentColor;
  }
}

/* ////////////////////////////////////////////////////////////////////
   STRANA SE „UVLAČI" IZA SHEET-A (kao kartice u iOS-u)
   .strana se smanjuje oko sredine VIDLJIVOG dela (JS postavlja
   --skrol-y), a body::after crta taman okvir sa zaobljenim uglovima
   tačno oko tog dela — isti transform, isti centar, pa se okvir i
   strana poklapaju tokom cele animacije. Ovo je namerno umesto
   clip-path-a: ako --skrol-y izostane, strana je samo pomerena, a ne
   odsečena u crno.
   //////////////////////////////////////////////////////////////////// */

.strana {
  display: block;
  /* bez vodoravnog skrola; clip (ne hidden) ne pravi novi skrol
     kontejner, pa position: sticky u računu i dalje radi */
  overflow-x: hidden;
  overflow-x: clip;
  transform-origin: 50% calc(var(--skrol-y, 0px) + 50vh);
  transition: transform 640ms var(--ease-ios), background-color 300ms var(--ease-ios);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--iza-strane);
  /* visibility, ne opacity: sakriven sloj se uopšte ne crta */
  visibility: hidden;
  transition: transform 640ms var(--ease-ios), border-radius 640ms var(--ease-ios),
    visibility 0s linear 640ms;
}

body.sloj-otvoren {
  background-color: var(--iza-strane);
}

body.sloj-otvoren .ambijent {
  opacity: 0;
}

body.sloj-otvoren .strana {
  background-color: var(--pozadina);
  transform: scale(0.94);
}

body.sloj-otvoren::after {
  visibility: visible;
  border-radius: 3.2rem;
  transform: scale(0.94);
  transition-delay: 0s;
}

/* ZAKLJUČAN SKROL — iOS-bezbedno (JS stavlja top: -Ypx) */
body.skrol-zakljucan {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* ////////////////////////////////////////////////////////////////////
   SHEET — ulazi odozdo oprugom; na desktopu dijalog u sredini
   //////////////////////////////////////////////////////////////////// */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 560ms;
}

.sheet.je-otvoren {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sheet-pozadina {
  position: absolute;
  inset: 0;
  background: rgb(8 12 10 / 0.36);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 460ms var(--ease-ios);
}

.sheet.je-otvoren .sheet-pozadina {
  opacity: 1;
}

.sheet-panel {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.8rem);
  max-height: calc(100vh - 4rem);
  max-height: calc(100svh - 4rem - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem 1.6rem 1.6rem;
  border-radius: 3.6rem;
  background-color: var(--staklo-pozadina-gusto);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), inset 0 0 0 0.5px var(--staklo-ivica),
    var(--senka-3);
  scrollbar-width: none;
  transform: translateY(calc(100% + 4rem));
  transition: transform 640ms var(--opruga);
}

.sheet-panel::-webkit-scrollbar {
  display: none;
}

.sheet.je-otvoren .sheet-panel {
  transform: translateY(var(--povlacenje, 0px));
}

/* dok prst vuče, panel ga prati bez kašnjenja */
.sheet.se-vuce .sheet-panel,
.sheet-panel.se-vuce {
  transition: none;
}

.sheet-rucica {
  width: 3.6rem;
  height: 0.5rem;
  margin: 0 auto 0.4rem;
  border-radius: 1rem;
  background: var(--ivica-jaka);
}

.sheet-zatvori {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--tekst);
  background: var(--dodaj-pozadina);
  transition: transform 460ms var(--opruga), background-color 300ms var(--ease-ios);
}

.sheet-zatvori:active {
  transform: scale(0.88);
  transition-duration: 120ms;
}

.sheet-glava {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.6rem 4.4rem 2.2rem;
  text-align: center;
}

.domacini-lica--veliko span {
  width: 5.2rem;
  height: 5.2rem;
  font-size: 1.7rem;
  box-shadow: 0 0 0 0.3rem var(--staklo-pozadina-gusto);
}

.sheet-naslov {
  margin-top: 1rem;
  font-size: 2.4rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--naslov);
}

.sheet-podnaslov {
  font-size: 1.4rem;
  color: var(--tekst-tiho);
}

/* grupisana lista kao u iOS podešavanjima */
.kontakt-akcije {
  overflow: hidden;
  border-radius: 2.2rem;
  background: var(--lista-pozadina);
  box-shadow: inset 0 0 0 1px var(--ivica);
}

.kontakt-akcija,
.kontakt-akcija:link,
.kontakt-akcija:visited {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 6.4rem;
  padding: 1rem 1.4rem 1rem 1.2rem;
  color: var(--tekst);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms var(--ease-ios);
}

/* razdelnik počinje posle ikonice — kao u iOS listi */
.kontakt-akcije li + li .kontakt-akcija::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6.6rem;
  right: 0;
  height: 1px;
  background: var(--ivica);
}

.kontakt-akcija:active {
  background-color: var(--dodaj-pozadina);
}

.kontakt-ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 1.2rem;
  color: #ffffff;
  background: var(--kontakt-telefon);
}

.kontakt-ikona .ikona {
  width: 2.1rem;
  height: 2.1rem;
}

.kontakt-ikona--viber {
  background: var(--kontakt-viber);
}

.kontakt-ikona--whatsapp {
  background: var(--kontakt-whatsapp);
}

.kontakt-ikona--instagram {
  background: var(--kontakt-instagram);
}

.kontakt-ikona--mejl {
  background: var(--kontakt-mejl);
}

.kontakt-tekst {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.kontakt-tekst strong {
  font-size: 1.6rem;
}

.kontakt-tekst span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.35rem;
  color: var(--tekst-tiho);
}

.kontakt-strelica {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--tekst-ugaseno);
}

.sheet-adresa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-size: 1.35rem;
  color: var(--tekst-tiho);
}

.sheet-adresa .ikona {
  width: 1.7rem;
  height: 1.7rem;
}

@media (hover: hover) {
  .kontakt-akcija:hover {
    background-color: var(--dodaj-pozadina);
  }

  .sheet-zatvori:hover {
    background-color: var(--dodaj-pozadina-hover);
  }
}

/* ////////////////////////////////////////////////////////////////////
   LIGHTBOX
   JS postavlja --povlacenje-x/-y (px) i --providnost (0–1) na
   .lightbox; FLIP otvaranje ide kroz inline transform na slici, pa
   CSS na .lightbox-slika ne sme da ima svoj transform — pomeranje
   prstom ide kroz `translate` na okviru.
   //////////////////////////////////////////////////////////////////// */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  /* staklo za tamnu pozadinu, u obe teme */
  --staklo-pozadina: rgb(38 44 40 / 0.46);
  --staklo-pozadina-gusto: rgb(38 44 40 / 0.62);
  --staklo-cvrsto: rgb(30 34 32 / 0.96);
  --staklo-ivica: rgb(255 255 255 / 0.14);
  --staklo-odsjaj: rgb(255 255 255 / 0.2);
  --staklo-obod-1: rgb(255 255 255 / 0.35);
  --staklo-obod-2: rgb(255 255 255 / 0.1);
  --fokus: #f6c98a;
  color: #f2f4f0;
  transition: visibility 0s linear 480ms;
}

.lightbox.je-otvoren {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.lightbox-pozadina {
  position: absolute;
  inset: 0;
  background: rgb(6 8 7 / 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 460ms var(--ease-ios);
}

.lightbox.je-otvoren .lightbox-pozadina {
  opacity: var(--providnost, 1);
}

.lightbox.se-zatvara .lightbox-pozadina {
  opacity: 0;
}

.lightbox-okvir {
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) + 7.2rem) 1.2rem
    calc(env(safe-area-inset-bottom, 0px) + 8.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  translate: var(--povlacenje-x, 0px) var(--povlacenje-y, 0px);
  transition: translate 560ms var(--opruga);
}

.lightbox.se-vuce .lightbox-okvir,
.lightbox.se-vuce .lightbox-pozadina,
.lightbox.se-vuce .lightbox-vrh,
.lightbox.se-vuce .lightbox-opis {
  transition: none;
}

.lightbox-slika {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 1.8rem;
  box-shadow: 0 2.4rem 6rem -1.6rem rgb(0 0 0 / 0.6);
  opacity: 0;
  transition: opacity 320ms var(--ease-ios), transform 560ms var(--opruga);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.lightbox.je-otvoren .lightbox-slika {
  opacity: 1;
}

.lightbox.se-zatvara .lightbox-slika {
  opacity: 0;
}

.lightbox-vrh {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 1.2rem);
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  translate: 0 -1.2rem;
  transition: opacity 360ms var(--ease-ios), translate 560ms var(--opruga);
}

.lightbox-brojac {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: var(--r-pilula);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lightbox-brojac:empty {
  visibility: hidden;
}

.lightbox-dugme {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: #f2f4f0;
  transition: transform 460ms var(--opruga), background-color 300ms var(--ease-ios);
}

.lightbox-dugme:active {
  transform: scale(0.88);
  transition-duration: 120ms;
}

/* centrirano preko left/right + margin: auto, ne preko left: 50% —
   tada bi pilula za prelamanje teksta imala samo pola širine ekrana */
.lightbox-opis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  width: fit-content;
  max-width: calc(100% - 3.2rem);
  margin-inline: auto;
  padding: 1.1rem 1.8rem;
  border-radius: var(--r-pilula);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  translate: 0 1.2rem;
  transition: opacity 360ms var(--ease-ios), translate 560ms var(--opruga);
}

.lightbox-opis:empty {
  display: none;
}

.lightbox.je-otvoren .lightbox-vrh,
.lightbox.je-otvoren .lightbox-opis {
  opacity: var(--providnost, 1);
  translate: 0 0;
}

.lightbox.se-zatvara .lightbox-vrh,
.lightbox.se-zatvara .lightbox-opis {
  opacity: 0;
}

/* strelice samo uz miš; na dodir se lista prstom */
.lightbox-nazad,
.lightbox-napred {
  position: absolute;
  top: 50%;
  display: none;
  width: 5.2rem;
  height: 5.2rem;
  margin-top: -2.6rem;
  opacity: 0;
  transition: opacity 360ms var(--ease-ios), transform 460ms var(--opruga);
}

.lightbox-nazad {
  left: 2rem;
}

.lightbox-napred {
  right: 2rem;
}

.lightbox.je-otvoren .lightbox-nazad,
.lightbox.je-otvoren .lightbox-napred {
  opacity: var(--providnost, 1);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox-nazad,
  .lightbox-napred {
    display: grid;
  }

  .lightbox-dugme:hover {
    background-color: var(--staklo-pozadina-gusto);
  }
}

/* ////////////////////////////////////////////////////////////////////
   TOST — spušta se ispod zaglavlja, kao obaveštenje u iOS-u
   //////////////////////////////////////////////////////////////////// */

.tost-omot {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8.2rem);
  left: 50%;
  z-index: 400;
  width: max-content;
  max-width: calc(100% - 3.2rem);
  translate: -50% 0;
  pointer-events: none;
}

.tost {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.8rem;
  border-radius: var(--r-pilula);
  font-size: 1.45rem;
  font-weight: 550;
  color: var(--tekst);
  background-color: var(--staklo-pozadina-gusto);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), inset 0 0 0 0.5px var(--staklo-ivica),
    var(--senka-3);
  opacity: 0;
  transform: translateY(-1.6rem) scale(0.92);
  transition: transform 620ms var(--opruga), opacity 280ms var(--ease-ios);
}

.tost.je-vidljiv,
.tost-omot.je-vidljiv .tost {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tost .ikona {
  width: 2rem;
  height: 2rem;
  color: var(--uspeh);
}

.tost a,
.tost a:link,
.tost a:visited,
.tost button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 4rem;
  padding: 0 1.6rem;
  border-radius: var(--r-pilula);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--dugme-puno-tekst);
  background: var(--dugme-puno-pozadina);
  text-decoration: none;
}

/* ////////////////////////////////////////////////////////////////////
   ANIMACIJE
   //////////////////////////////////////////////////////////////////// */

@keyframes rec-ulaz {
  from {
    opacity: 0;
    transform: translateY(0.42em);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes ulaz-gore {
  from {
    opacity: 0;
    transform: translateY(1.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-smiri {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@keyframes magla-plovi {
  from {
    transform: translate3d(-9%, 0, 0);
  }
  to {
    transform: translate3d(9%, 0, 0);
  }
}

@keyframes zar-disanje {
  from {
    opacity: 0.62;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes kal-napred {
  from {
    opacity: 0;
    transform: translateX(2.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kal-nazad {
  from {
    opacity: 0;
    transform: translateX(-2.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dan-iskoci {
  from {
    opacity: 0.4;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes broj-iskoci {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kvacica-iskoci {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-30deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pilula-ulaz {
  from {
    opacity: 0;
    transform: translateY(1.6rem) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes uspeh-ulaz {
  from {
    opacity: 0;
    transform: translateY(2rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes crtaj {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes kostur-pulsira {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

@keyframes tacka-skace {
  0%,
  60%,
  100% {
    transform: none;
    opacity: 0.5;
  }
  30% {
    transform: translateY(-0.4rem);
    opacity: 1;
  }
}

/* smanjene animacije: strana se ne uvlači, magla stoji */
@media (prefers-reduced-motion: reduce) {
  body.sloj-otvoren .strana,
  body.sloj-otvoren::after {
    transform: none;
  }

  .hero-magla-sloj,
  .hero-zar {
    animation: none;
  }
}