/* ═══════════════════════════════════════════════════════════════════════════
   RECIKLICA — stilovi jedine strane sajta.
   Dizajn sistem (boje, dugmad, paneli) je u ds-styles.css; ovde su delovi
   koji postoje samo ovde: slajder, odbrojavanje, program, galerija, FAQ.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Heder je fiksiran i lebdi iznad sadržaja, pa njegova visina mora da bude
   poznata i sadržaju vrha strane i skoku na sidro. */
:root {
  --heder-visina: 65px;
  /* Širina maskote i njen odmak od desne ivice. Iz ove dve vrednosti se računa
     i koliko se prostora rezerviše sadržaju vrha, pa stoje na jednom mestu. */
  --maskota-sirina: clamp(136px, 32vw, 440px);
  --maskota-desno: clamp(10px, 9vw, 150px);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--heder-visina) + 12px);
}

/* ── Animacije ───────────────────────────────────────────────────────────── */
@keyframes recUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes recZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes recTraka { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes recNjih { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.ulazi { animation: recUp 0.55s cubic-bezier(0.22, 0.7, 0.16, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Preskoči na sadržaj — vidljivo tek kad se dođe tastaturom. */
.preskoci {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lime);
  color: var(--teal-900);
  font-weight: 700;
  padding: 12px 18px;
  text-decoration: none;
}
.preskoci:focus { left: 8px; top: 8px; }

/* ══ SLAJDER NA VRHU ═════════════════════════════════════════════════════ */
.vrh {
  position: relative;
  min-height: min(96vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-bg-dark);
}

.slajder { position: absolute; inset: 0; z-index: 0; }
.slajder-traka {
  display: flex;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.5, 0.05, 0.2, 1);
  will-change: transform;
}
.slajd { flex: 0 0 100%; height: 100%; position: relative; }
.slajd .slajd-medij {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Polagano približavanje ide samo slikama — snimak se i sam kreće. */
.slajd img.slajd-medij { animation: recZoom 8s ease-out both; }
.slajd-prazno {
  background:
    radial-gradient(120% 90% at 50% 30%, var(--teal-600) 0%, var(--teal-900) 100%);
}
/* Preliv preko slike — bez njega se krem tekst gubi na svetlim fotografijama. */
.slajder::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 43, 47, 0.72) 0%, rgba(15, 43, 47, 0.35) 35%, rgba(15, 43, 47, 0.86) 100%),
    radial-gradient(120% 80% at 50% 20%, transparent 40%, rgba(15, 43, 47, 0.55) 100%);
}

/* Samo gornji i donji razmak — bočni stiže iz .omot i ne sme da se prepiše,
   inače naslov na telefonu dodiruje ivicu ekrana. */
.vrh-sadrzaj {
  position: relative;
  z-index: 2;
  /* .vrh je flex, a "margin: 0 auto" iz .omot gasi rastezanje flex stavke —
     bez ove širine blok bi se skupio na širinu najdužeg reda i iscentrirao. */
  width: 100%;
  /* Ispod hedera, da mu nadnaslov ne ulazi pod noge. */
  padding-top: calc(var(--heder-visina) + clamp(18px, 3vw, 40px));
  padding-bottom: clamp(28px, 4vw, 48px);
}

/* Na širokim ekranima se desna kolona rezerviše za maskotu, pa ni najduži
   natpis ne može da se podvuče pod nju. Naslov je izuzet — on je i zamišljen
   tako da mu maskota naleže na kraj. */
@media (min-width: 561px) {
  /* Ograničenje širine, ne padding: uz box-sizing: border-box padding bi se
     oduzimao od već postavljenog max-width-a i prelomio uvodni pasus u traku. */
  .vrh-sadrzaj > *:not(.vrh-naslov) {
    max-width: calc(100% - var(--maskota-sirina) - var(--maskota-desno) - 20px);
  }
}

.vrh-naslov {
  /* Gornja granica je merena tako da najduži red naslova stane u omot i na
     najužem telefonu i na širokom ekranu — veće vrednosti seku naslov. */
  font-size: clamp(40px, 10.5vw, 130px);
  margin: 0 0 var(--space-4);
  max-width: 100%;
  overflow-wrap: break-word;
}
/* ── Maskota uz naslov ───────────────────────────────────────────────────
   Vezana je za vrh strane, a ne za tekst: kreće tik ispod hedera i stoji uz
   desnu ivicu. Sadržaj vrha je poravnat po dnu, pa naslov menja visinu sa
   veličinom ekrana — da je maskota okačena o tekst, klizila bi gore-dole. */
.vrh-lik {
  position: absolute;
  top: calc(var(--heder-visina) + 4px);
  right: var(--maskota-desno);
  width: var(--maskota-sirina);
  height: auto;
  max-width: none;
  z-index: 3;      /* ispred naslova — otud i senka koja pada na slova */
  pointer-events: none;
  /* drop-shadow prati oblik izreza, pa senka pada tačno po liniji maskote. */
  filter: drop-shadow(-16px 13px 10px rgba(8, 26, 29, 0.55))
          drop-shadow(-3px 3px 0 rgba(8, 26, 29, 0.25));
}

/* Na telefonu maskota zauzima desnu trećinu vrha, pa nadnaslov mora da se
   prelomi pre nje, a i sama mora da bude uža da ne padne na nalepnice. */
@media (max-width: 560px) {
  .vrh-lik { width: 122px; }
  .vrh-sadrzaj > .kicker { max-width: calc(100% - 165px); }
}

/* Logo sponzora u vrhu: vezan za maskotu (a ona za desnu ivicu), pa uvek pada
   u istu prazninu — desno od naslova, iznad podignute ruke. */
.vrh-jungic {
  position: absolute;
  top: calc(var(--heder-visina) + 4px);
  /* Desna ivica staje tamo gde počinju nacrtani pikseli maskote na toj visini
     (izmereno: ruka i kapa kreću na ~31% njene širine), pa logo ide do nje ali
     ne preko nje. Ostatak se pruža ulevo, do samog naslova. */
  right: calc(var(--maskota-desno) + var(--maskota-sirina) * 0.70);
  /* Slika je sada isečena do slova (bez providnih margina), pa je za istu
     vidljivu veličinu potreban manji broj nego dok su margine bile u njoj. */
  width: calc(var(--maskota-sirina) * 0.48);
  height: auto;
  max-width: none;
  z-index: 2;
  transform: rotate(-3deg);
  filter: drop-shadow(-3px 4px 0 rgba(8, 26, 29, 0.35));
  pointer-events: none;
}
/* Na telefonu za njega nema mesta — logo ostaje u hederu. */
@media (max-width: 560px) {
  .vrh-jungic { display: none; }
}

.vrh-uvod { max-width: 52ch; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6; }
.vrh-dugmad { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Natpis vezan za trenutni slajd */
.slajd-natpis {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cream);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard-sm);
  padding: 8px 14px;
  margin-bottom: var(--space-4);
  transform: rotate(-1.5deg);
  max-width: min(420px, 90vw);
}
.slajd-natpis b { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.slajd-natpis span { font-size: 12.5px; opacity: 0.75; }

/* Dugme za pokretanje videa u natpisu slajda */
.pusti-dugme {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 13px;
  color: var(--cream-100);
  background: var(--red);
  border: 2px solid var(--teal-900);
  border-radius: var(--radius-pill);
}
.pusti-dugme:hover { background: var(--red-500); }

/* Strelice i tačkice */
.slajder-kontrole {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(20px, 4vw, 44px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.slajder-strelica {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: 50%;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.slajder-strelica:hover { background: var(--lime); transform: translateY(-2px); }
.slajder-tacke { display: flex; gap: 8px; align-items: center; }
.slajder-tacka {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.slajder-tacka[aria-current='true'] { background: var(--lime); border-color: var(--teal-900); }

/* ══ ODBROJAVANJE ════════════════════════════════════════════════════════ */
.odbrojavanje { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.odbroj-polje {
  min-width: 78px;
  text-align: center;
  background: color-mix(in srgb, var(--teal-900) 55%, transparent);
  border: 2px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  backdrop-filter: blur(3px);
}
.odbroj-broj {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  color: var(--lime);
}
.odbroj-opis {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 5px;
  opacity: 0.8;
}

/* ══ POKRETNA TRAKA ══════════════════════════════════════════════════════ */
.traka {
  background: var(--red);
  color: var(--cream-100);
  border-top: var(--border-ink);
  border-bottom: var(--border-ink);
  overflow: hidden;
  padding: 12px 0;
}
.traka-sadrzaj {
  display: flex;
  width: max-content;
  animation: recTraka 26s linear infinite;
}
.traka-sadrzaj span {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 30px);
  text-transform: uppercase;
  padding-right: 36px;
  white-space: nowrap;
}
.traka:hover .traka-sadrzaj { animation-play-state: paused; }

/* ══ BRZI PODACI ═════════════════════════════════════════════════════════ */
.podaci { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.podatak {
  background: var(--cream);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
  padding: 18px 20px;
}
.podatak-oznaka {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-700);
  margin: 0 0 6px;
}
.podatak-vrednost { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); margin: 0; line-height: 1.1; }
.podatak-nota { font-size: 13px; margin: 6px 0 0; opacity: 0.7; }

/* ══ BROJKE ══════════════════════════════════════════════════════════════ */
.brojke { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.brojka { text-align: center; }
.brojka b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  color: var(--lime);
}
.brojka span { display: block; font-size: 13px; margin-top: 8px; opacity: 0.85; }

/* ══ PROGRAM ═════════════════════════════════════════════════════════════ */
.dan { margin-bottom: clamp(32px, 4vw, 52px); }
.dan-naslov { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.dan-naslov h3 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); }

.stavka {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--space-4);
  align-items: start;
  background: var(--cream);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.stavka-izdvojena { background: var(--lime); }
.stavka-vreme {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.1;
  color: var(--red-700);
}
.stavka-mesto { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65; margin-top: 4px; }
.stavka h4 { margin: 0 0 4px; font-size: 18px; }
.stavka p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: 0.85; }

@media (max-width: 560px) {
  .stavka { grid-template-columns: 1fr; gap: 6px; }
}

/* ══ PROZA (propozicije i slični duži tekstovi) ══════════════════════════ */
.proza { max-width: 68ch; font-size: 15.5px; line-height: 1.75; }
.proza h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  color: var(--red-700);
  margin: 34px 0 10px;
}
.proza h3:first-child { margin-top: 0; }
.proza p { margin: 0 0 16px; }
.proza ul { margin: 0 0 18px; padding: 0; list-style: none; }
.proza li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
}
/* Crtica iz teksta se zamenjuje znakom reciklaže u boji festivala. */
.proza li::before {
  content: '♻';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-size: 15px;
}
.proza-napomena {
  max-width: 68ch;
  margin: 26px 0 0;
  padding: 14px 18px;
  font-size: 14.5px;
  background: var(--cream-100);
  border: 3px solid var(--teal-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
}

/* ══ GALERIJA ════════════════════════════════════════════════════════════ */
.galerija { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.galerija-stavka {
  padding: 0;
  border: var(--border-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--teal-800);
  box-shadow: var(--shadow-hard-sm);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.galerija-stavka { position: relative; }
.galerija-stavka img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.galerija-stavka:hover img { transform: scale(1.06); }
.galerija-prazno {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 40%, var(--teal-600) 0%, var(--teal-900) 100%);
}
/* Znak da se ispod krije snimak, a ne slika */
.igraj-znak {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--cream-100);
  background: var(--red);
  border: 3px solid var(--teal-900);
  border-radius: 50%;
  box-shadow: var(--shadow-hard-sm);
  pointer-events: none;
  transition: transform 0.2s ease;
}
.galerija-stavka:hover .igraj-znak { transform: translate(-50%, -50%) scale(1.1); }

/* Uvećana slika iz galerije */
.svetlo {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 30, 33, 0.94);
}
.svetlo[hidden] { display: none; }
.svetlo img,
.svetlo video {
  max-width: 100%;
  max-height: 82vh;
  border: var(--border-ink);
  border-radius: var(--radius-md);
  background: var(--teal-900);
}
.svetlo video { width: 100%; }
.svetlo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border: var(--border-ink);
  border-radius: var(--radius-md);
  background: var(--teal-900);
}
.svetlo-opis { margin-top: 14px; text-align: center; font-size: 14px; color: var(--cream); }
.svetlo-zatvori { position: absolute; top: 16px; right: 16px; }
.svetlo-prev { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.svetlo-next { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* ══ PARTNERI ════════════════════════════════════════════════════════════ */
.partneri { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 130px;
  padding: 18px;
  text-align: center;
  text-decoration: none;
  background: var(--cream);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.15s ease;
}
.partner:hover { transform: translateY(-3px) rotate(-1deg); }
.partner img { max-height: 62px; width: auto; object-fit: contain; }
.partner b { font-size: 14px; letter-spacing: 0.02em; }
.partner-glavni { grid-column: span 2; min-height: 170px; background: var(--cream-100); }
@media (max-width: 480px) {
  .partner-glavni { grid-column: span 1; }
}

/* ══ ČESTA PITANJA ═══════════════════════════════════════════════════════ */
.pitanje {
  background: var(--cream);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.pitanje > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 52px 16px 18px;
  font-weight: 800;
  font-size: 16.5px;
  position: relative;
}
.pitanje > summary::-webkit-details-marker { display: none; }
.pitanje > summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--red);
  transition: transform 0.2s ease;
}
.pitanje[open] > summary::after { content: '−'; }
.pitanje[open] > summary { background: var(--lime); }
.pitanje-odgovor { padding: 0 18px 16px; font-size: 15px; line-height: 1.6; }

/* ══ FORMA ═══════════════════════════════════════════════════════════════ */
.forma-red { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }
/* Zamka za botove: skriveno od ljudi, vidljivo automatima. */
.hp-polje {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.koraci { counter-reset: korak; list-style: none; margin: 0; padding: 0; }
.koraci li {
  counter-increment: korak;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 2px solid var(--color-divider);
}
.koraci li:last-child { border-bottom: 2px solid var(--color-divider); }
.koraci li::before {
  content: '0' counter(korak);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--lime);
}

/* ══ HEDER ═══════════════════════════════════════════════════════════════
   Preko slajdera stoji providan, da poster na vrhu ostane ceo; čim se krene
   naniže dobija krem podlogu i ivicu, pa se odvaja od sadržaja. */
.heder {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 75;
  border-bottom: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.heder-omot {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  min-height: 62px;
  padding-block: 9px;
}
.heder-znak {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1;
  color: var(--cream-100);
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--red);
}
.heder-znak small {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  text-shadow: none;
  opacity: 0.75;
}
/* Logo glavnog sponzora uz naziv festivala.
   Slika je isečena do samih slova, pa je visina ovde visina slova. */
.heder-sponzor {
  flex: none;
  height: 17px;
  width: auto;
  display: block;
}

.heder-nav {
  margin-left: auto;
  display: flex;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.heder-nav::-webkit-scrollbar { display: none; }
.heder-nav a {
  flex: none;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cream);
  transition: background 0.15s ease, color 0.15s ease;
}
.heder-nav a:hover { background: color-mix(in srgb, var(--cream) 18%, transparent); }
.heder-nav a.aktivna { background: var(--red); color: var(--cream-100); }

/* Stanje posle skrolovanja */
.heder.zalepljen {
  background: var(--cream);
  border-bottom-color: var(--teal-900);
  box-shadow: 0 4px 0 rgba(15, 43, 47, 0.18);
}
.heder.zalepljen .heder-znak { color: var(--red); text-shadow: none; }
/* Limun-zelen logo na krem podlozi gubi ivicu — tanka tamna kontura ga vraća. */
.heder.zalepljen .heder-sponzor {
  filter: drop-shadow(0 0 1px rgba(15, 43, 47, 0.85)) drop-shadow(0 1px 1px rgba(15, 43, 47, 0.5));
}
.heder.zalepljen .heder-znak small { color: var(--teal-900); }
.heder.zalepljen .heder-nav a { color: var(--teal-900); }
.heder.zalepljen .heder-nav a:hover { background: var(--cream-300); }
.heder.zalepljen .heder-nav a.aktivna { background: var(--red); color: var(--cream-100); }

@media (max-width: 560px) {
  :root { --heder-visina: 56px; }
  .heder-omot { min-height: 52px; gap: 8px; }
  .heder-znak small { display: none; }
  .heder-nav a { padding: 8px 11px; font-size: 11.5px; }
  .heder-sponzor { height: 13px; }
}

/* ══ PODNOŽJE ════════════════════════════════════════════════════════════ */
.podnozje { background: var(--color-bg-dark); padding: clamp(40px, 5vw, 64px) 0 28px; }
.podnozje-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.podnozje a { color: var(--cream); text-decoration: none; }
.podnozje a:hover { color: var(--lime); }
.podnozje-dno {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 2px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12.5px;
  opacity: 0.75;
}
.mreze { display: flex; gap: 10px; flex-wrap: wrap; }
.mreze a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-divider);
  border-radius: 50%;
}
.mreze a:hover { background: var(--lime); color: var(--teal-900); border-color: var(--teal-900); }

/* ══ PORUKE (toast) ══════════════════════════════════════════════════════ */
.poruke-stek {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
}
.poruka-toast {
  background: var(--lime);
  color: var(--teal-900);
  border: var(--border-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard);
  padding: 13px 16px;
  font-weight: 600;
  font-size: 14px;
  animation: recUp 0.25s ease;
}
.poruka-toast.greska { background: var(--red); color: var(--cream-100); }