/* Kodirani svijet · smjer 07 Markacija · main.css
   Specifikacija: docs/redizajn/09-specifikacija-markacija.md
   Početna stanja animacija postoje samo pod .pokret (JS radi i nije uključen reduced motion).
   Blokovi: A temelj · B polazak · C usluge i uspon · D radovi, vodič, pitanja · E vrh i kviz · F stranice */

/* ================= A · TEMELJ ================= */

/* ---------- A1. Fontovi ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Archivo zamjena";
  src: local("Arial");
  size-adjust: 102.1%;
  ascent-override: 86%;
  descent-override: 20.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces zamjena";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 95.1%;
  ascent-override: 102.8%;
  descent-override: 26.8%;
  line-gap-override: 0%;
}

/* ---------- A2. Tokeni ---------- */
:root {
  --vapnenac: #EDEDE7;
  --papir: #F7F7F3;
  --grafit: #16181A;
  --dim: #4A4F55;
  --magla: #A7AAAD;
  --ilustracija: #E4E4DE;
  --v-ispuna: #FF4D17;
  --v-linija: #E0420F;
  --v-tekst: #C23A0E;
  --v-naslov: #E0420F;
  --obrub: rgb(22 24 26 / .12);
  --sjena: 0 1px 0 rgb(22 24 26 / .06), 0 8px 24px rgb(22 24 26 / .06);
  --pismo: "Archivo", "Archivo zamjena", system-ui, sans-serif;
  --pismo-naglasak: "Fraunces", "Fraunces zamjena", Georgia, serif;
  --pismo-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t1: 150ms;
  --t2: 240ms;
  --t3: 420ms;
  --t4: 900ms;
  --zaglavlje: 72px;
  --traka: 64px;
  --mrak-gore: 28%;
  --mrak-dolje: 38%;
  --rub: clamp(1.5rem, 4vw, 3rem);
  --sirina: 1320px;
}

/* ---------- A3. Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--zaglavlje) + 1rem);
  scroll-padding-bottom: var(--traka);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--vapnenac);
  color: var(--grafit);
  font: 400 1.0625rem/1.55 var(--pismo);
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--v-linija); outline-offset: 2px; border-radius: 2px; }
.vizualno-skriveno {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.preskoci {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--grafit); color: var(--papir); padding: .6rem 1rem; border-radius: 6px;
}
.preskoci:focus { top: 1rem; }

/* ---------- A4. Tipografija ---------- */
.nadnaslov {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem;
  font: 500 .8125rem/1.4 var(--pismo-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.naslov {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.025em;
  text-wrap: balance;
}
.naslov--h1 { font-size: clamp(2.25rem, 1.25rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -.035em; }
/* engleski „without wandering.” ostaje u jednom retku (.zajedno), a dulji je od „bez lutanja.”,
   pa bi na širokom ekranu izašao iz kartice od 38 rem; zato engleski naslov raste najviše do 4 rem */
:lang(en) .naslov--h1 { font-size: clamp(2.25rem, 1.25rem + 4vw, 4rem); }
.naslov em {
  font-family: var(--pismo-naglasak); font-style: italic; font-weight: 600;
  color: var(--v-naslov); letter-spacing: -.01em;
}
.uvod {
  max-width: 36ch; margin: 1.25rem 0 0;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); color: var(--dim);
}
.povjerenje { margin: .9rem 0 0; font-size: .9375rem; color: var(--dim); }
/* riječi koje u naslovu moraju ostati zajedno; na najužim ekranima smiju se prelomiti */
@media (min-width: 360px) { .zajedno { white-space: nowrap; } }

/* ---------- A5. Gumbi, poveznice, ikone ---------- */
.gumb {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 1.75rem; padding: .75rem 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--v-ispuna); color: var(--grafit);
  font: 600 1.0625rem/1 var(--pismo); text-decoration: none; cursor: pointer;
  transition: background-color var(--t1) var(--ease-out), translate var(--t1) var(--ease-out);
}
.gumb:hover { background: #FF6A3D; }
.gumb:active { translate: 0 1px; }
.gumb[disabled] { opacity: .6; cursor: progress; }
.gumb--mali { min-height: 44px; margin-top: 0; padding: .6rem 1.25rem; font-size: 1rem; }
.gumb--obrub { background: transparent; border: 2px solid var(--v-linija); color: var(--v-tekst); }
.gumb--obrub:hover { background: rgb(255 77 23 / .08); }
.poveznica {
  color: var(--v-tekst); font-weight: 600; text-decoration: none; cursor: pointer;
}
.poveznica span { display: inline-block; transition: translate var(--t1) var(--ease-out); }
.poveznica:hover span { translate: 2px 0; }
.poveznica--tamna { color: var(--grafit); text-decoration: underline; text-underline-offset: 4px; }
.ikona { width: 1.5rem; height: 1.5rem; flex: none; color: var(--grafit); }
.ikona--mala { width: 1.25rem; height: 1.25rem; }
.ikona--akcent { color: var(--v-ispuna); }

/* ---------- A6. Zaglavlje ---------- */
.zaglavlje {
  position: sticky; top: 0; z-index: 50;
  background: var(--papir); border-bottom: 1px solid var(--obrub);
}
.zaglavlje__unutra {
  position: relative;
  display: flex; align-items: center; gap: 2rem;
  max-width: calc(var(--sirina) + 2 * var(--rub)); height: var(--zaglavlje);
  margin: 0 auto; padding: 0 var(--rub);
}
/* znak: </> sa stazom do markacije; u zaglavlju se iscrta, a svakih 8 s šetač ode do vrha */
.znak {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none;
}
.znak__ime { white-space: nowrap; }
.znak__ime em {
  font-family: var(--pismo-naglasak); font-style: italic; font-weight: 600; font-size: 1.1em;
  letter-spacing: 0; color: var(--v-tekst);
}
.znak__slika { width: 52px; height: auto; overflow: visible; }
.znak__zagrada { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.znak__staza { fill: none; stroke: var(--v-linija); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 3 5; }
.znak__markacija { fill: var(--papir); stroke: var(--v-ispuna); stroke-width: 3.2; }
.znak__setac { fill: var(--v-ispuna); opacity: 0; }
.znak__puls { fill: none; stroke: var(--v-linija); stroke-width: 1.4; opacity: 0; }
.znak__setac, .znak__puls, .znak__markacija { transform-box: fill-box; transform-origin: center; }
.pokret .zaglavlje .znak__zagrada { stroke-dasharray: 40; animation: znak-crtaj 900ms var(--ease-out) both; }
.pokret .zaglavlje .znak__zagrada + .znak__zagrada { animation-delay: 150ms; }
.pokret .zaglavlje .znak__staza { animation: znak-staza 700ms var(--ease-out) 350ms both; }
.pokret .zaglavlje .znak__markacija { animation: znak-markacija 420ms var(--ease-out) 900ms both; }
.pokret .znak__setac { animation: znak-setnja 8s ease-in-out 2s infinite; }
.pokret .znak__puls { animation: znak-puls 8s ease-out 2s infinite; }
@keyframes znak-crtaj { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes znak-staza { from { opacity: 0; } }
@keyframes znak-markacija {
  from { scale: 0; }
  70% { scale: 1.25; }
  to { scale: 1; }
}
@keyframes znak-setnja {
  0% { opacity: 0; translate: 0 0; }
  4% { opacity: 1; }
  24% { opacity: 1; translate: 11px -18px; }
  28%, 100% { opacity: 0; translate: 11px -18px; }
}
@keyframes znak-puls {
  0%, 24% { opacity: 0; scale: 1; }
  26% { opacity: .9; scale: 1; }
  44%, 100% { opacity: 0; scale: 2.4; }
}

.zaglavlje__izbornik { display: none; }
.izbornik { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.izbornik__popis { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.izbornik__popis a { font-weight: 500; text-decoration: none; }
.izbornik__popis a:hover { color: var(--v-tekst); }
.izbornik__jezik {
  padding: .3rem .5rem .25rem; border: 1px solid var(--obrub); border-radius: 4px;
  font: 500 .75rem/1 var(--pismo-mono); letter-spacing: .1em; color: var(--dim); text-decoration: none;
}
.izbornik__jezik:hover { color: var(--v-tekst); border-color: var(--v-linija); }
.izbornik__telefon {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 400 .875rem var(--pismo-mono); color: var(--dim); text-decoration: none;
}
/* slušalica se protrese svakih 8 s (mala petlja) */
.izbornik__zvono { width: 1.05rem; height: 1.05rem; color: var(--v-tekst); transform-origin: 50% 55%; }
.pokret .izbornik__zvono { animation: zvoni 8s ease-in-out 3s infinite; }
@keyframes zvoni {
  0%, 10%, 100% { rotate: 0deg; }
  1.5% { rotate: -18deg; }
  3% { rotate: 16deg; }
  4.5% { rotate: -13deg; }
  6% { rotate: 10deg; }
  7.5% { rotate: -6deg; }
  9% { rotate: 3deg; }
}
.izbornik__nazovite { display: none; }

/* padajući popisi: pokazivač ih otvara kroz :hover, tipkovnica kroz .je-otvoren (main.js),
   a .je-zatvoren (main.js, nakon klika i na Esc) ih zatvara dok pokazivač ili fokus ne izađu */
.padajuci { display: none; }
@media (min-width: 1024px) {
  .izbornik__popis { align-items: center; }
  /* stavka je visoka koliko i zaglavlje, pa se pokazivač spušta u popis bez praznine */
  .izbornik__grana { position: relative; }
  .izbornik__grana > a { display: flex; align-items: center; gap: .45rem; height: var(--zaglavlje); }
  .izbornik__grana > a::after {
    content: ""; width: .4rem; height: .4rem; margin-top: -.25rem;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg;
    transition: rotate var(--t2) var(--ease-out), margin var(--t2) var(--ease-out);
  }
  .padajuci {
    position: absolute; left: -1.5rem; top: 100%; width: 28rem;
    padding: .5rem .75rem 1rem;
    background: var(--papir); border: 1px solid var(--obrub); border-top: 0; border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 40px rgb(22 24 26 / .16);
    opacity: 0; translate: 0 -8px;
    transition: opacity var(--t2) var(--ease-out), translate var(--t2) var(--ease-out), display var(--t2) allow-discrete;
  }
  .padajuci--uski { width: 24rem; }
  .izbornik__grana--desno .padajuci { left: auto; right: -1.5rem; }
  .izbornik__grana.je-otvoren .padajuci { display: block; opacity: 1; translate: 0 0; }
  .izbornik__grana.je-otvoren > a::after { rotate: 225deg; margin-top: .25rem; }
  @starting-style {
    .izbornik__grana.je-otvoren .padajuci { opacity: 0; translate: 0 -8px; }
  }
}
@media (min-width: 1024px) and (hover: hover) {
  .izbornik__grana:hover .padajuci { display: block; opacity: 1; translate: 0 0; }
  .izbornik__grana:hover > a::after { rotate: 225deg; margin-top: .25rem; }
  @starting-style {
    .izbornik__grana:hover .padajuci { opacity: 0; translate: 0 -8px; }
  }
}
@media (min-width: 1024px) {
  .izbornik__grana.je-zatvoren .padajuci { display: none; opacity: 0; translate: 0 -8px; }
  .izbornik__grana.je-zatvoren > a::after { rotate: 45deg; margin-top: -.25rem; }
  /* --os: vodoravni položaj staze kroz markacije ili pribadače */
  .padajuci__popis { --os: 19px; position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
  .padajuci__popis--radovi { --os: 22px; }
  .padajuci__popis::before {
    content: ""; position: absolute; left: calc(var(--os) - 1px); top: 1.6rem; bottom: 1.6rem;
    border-left: 2px dashed var(--v-linija);
  }
  .padajuci__popis--ikone::before { display: none; }
  .padajuci__stavka { display: flex; align-items: center; gap: .85rem; padding: .8rem .75rem; border-radius: 8px; }
  .padajuci__stavka > .markacija, .padajuci__stavka > .ikona { position: relative; flex: none; }
  .padajuci__naziv { flex: 1; min-width: 0; font-weight: 600; line-height: 1.25; color: var(--grafit); }
  .padajuci__naziv small { display: block; font: 400 .8125rem/1.35 var(--pismo); color: var(--dim); }
  .padajuci__vrijeme { font: 400 .75rem/1.2 var(--pismo-mono); color: var(--dim); white-space: nowrap; }
  .padajuci__snimka { flex: none; width: 4.25rem; }
  .padajuci__snimka img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--obrub); border-radius: 4px; }
  .padajuci__vodic {
    display: flex; align-items: center; gap: .85rem;
    margin: .25rem 0 .35rem; padding: .75rem; border-bottom: 1px solid var(--obrub);
  }
  .padajuci__portret { flex: none; width: 3rem; }
  .padajuci__portret img { aspect-ratio: 1; background: var(--ilustracija); border: 1.5px solid var(--grafit); border-radius: 50%; }
  .padajuci__napomena { margin: .5rem .75rem 0; padding-top: .85rem; border-top: 1px solid var(--obrub); font-size: .875rem; color: var(--dim); }
  .padajuci__stavka:hover, .padajuci__stavka:focus-visible, .padajuci__vodic:hover { background: var(--vapnenac); }
  .padajuci__stavka:hover .padajuci__naziv, .padajuci__vodic:hover .padajuci__naziv { color: var(--v-tekst); }
  .padajuci__stavka:hover .markacija { scale: 1.3; }
  .padajuci .padajuci__sve {
    display: flex; justify-content: space-between; margin: .5rem .75rem 0; padding-top: .9rem;
    border-top: 1px solid var(--obrub); font-weight: 600; color: var(--v-tekst);
  }
  /* pri svakom otvaranju staza se iscrta odozgo, a stavke se pale redom */
  .pokret .padajuci__popis::before { animation: crtaj-dolje 640ms var(--ease-out) backwards; }
  .pokret .padajuci__popis > li { animation: ulaz-stavke var(--t3) var(--ease-out) calc(60ms + var(--i) * 120ms) backwards; }
  .pokret .padajuci__stavka .markacija { animation: pojava var(--t2) var(--ease-out) calc(60ms + var(--i) * 120ms) backwards; }
  .pokret .padajuci__stavka .ikona { stroke-dasharray: 70; animation: iscrtaj 900ms var(--ease-out) calc(140ms + var(--i) * 120ms) backwards; }
  .pokret .padajuci__vodic { animation: ulaz-stavke var(--t3) var(--ease-out) backwards; }
  .pokret .padajuci__sve, .pokret .padajuci__napomena { animation: ulaz-stavke var(--t3) var(--ease-out) 620ms backwards; }
}
@keyframes crtaj-dolje { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes ulaz-stavke { from { opacity: 0; translate: -8px 0; } }
@keyframes iscrtaj { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }

/* ---------- A7. Sekcije, karta, staza i svjetlo ---------- */
.sekcija {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; min-height: calc(100svh - var(--zaglavlje) - var(--traka));
}
.sekcija__slika { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* jedna karta za mobitel (21.1); na širokom ekranu svaka sekcija ima svoju */
.karta-mobitel { display: none; }
.sekcija__karta, .sekcija__karta img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sekcija__karta img { object-fit: cover; }
/* gornji i donji rub karte stapaju se u papir, pa se na prijelazu sekcija ne vidi crta (21.2) */
.sekcija__karta {
  --stapanje: 5rem;
  -webkit-mask: linear-gradient(transparent, #000 var(--stapanje), #000 calc(100% - var(--stapanje)), transparent);
  mask: linear-gradient(transparent, #000 var(--stapanje), #000 calc(100% - var(--stapanje)), transparent);
}
/* prvi kadar počinje odmah ispod zaglavlja, pa se stapa samo prema dolje */
.sekcija--polazak .sekcija__karta {
  -webkit-mask: linear-gradient(#000 calc(100% - var(--stapanje)), transparent);
  mask: linear-gradient(#000 calc(100% - var(--stapanje)), transparent);
}
.sekcija__unutra {
  position: relative; width: 100%;
  max-width: calc(var(--sirina) + 2 * var(--rub));
  margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--rub);
}
.sekcija__glava { max-width: 44rem; }
.sekcija__glava--sredina { margin: 0 auto; text-align: center; }
.sekcija__glava--sredina .nadnaslov { justify-content: center; }
.sekcija__glava--sredina .uvod { max-width: 48ch; margin-inline: auto; }
.sekcija__dno { margin: 3rem 0 0; text-align: center; }
.sekcija__dno a {
  display: inline-block; padding: .75rem 1.25rem;
  background: var(--papir); border: 1px solid var(--obrub); border-radius: 999px; box-shadow: var(--sjena);
}

/* staza: siva kopija ispod, vermilion kopija iznad otkriva se odozgo prema --p (0–1) */
.staza { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.staza path {
  fill: none; stroke-width: 3; stroke-dasharray: 10 8; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.staza--ispred path { stroke: rgb(22 24 26 / .35); }
.staza--prijedeno path { stroke: var(--v-linija); }
.staza--prijedeno { clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0); }
.pokret .sekcija[data-staza] { --p: 0; }
/* osvijetljeni put: široki prozirni trag ispod prijeđene staze (dodaje ga main.js) */
.staza .staza__sjaj { stroke: var(--v-ispuna); stroke-opacity: .2; stroke-width: 12; stroke-dasharray: none; }

.markacija {
  --d: 16px;
  position: absolute; left: var(--x); top: var(--y);
  width: var(--d); height: var(--d); translate: -50% -50%;
  border-radius: 50%; background: var(--papir);
  box-shadow: inset 0 0 0 calc(var(--d) * .28) var(--v-ispuna), 0 0 0 2px var(--papir);
  transition: scale var(--t2) var(--ease-out), opacity var(--t2) var(--ease-out), box-shadow var(--t3) var(--ease-out);
}
.markacija--u-tekstu, .markacija--u-kartici {
  --d: 14px; position: relative; left: auto; top: auto; translate: none; display: inline-block;
}
.pokret .markacija[data-at]:not(.is-on) { scale: .6; opacity: 0; }
/* markacija zasvijetli kad je staza dosegne */
.markacija[data-at]::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--v-linija); opacity: 0;
}
.pokret .markacija[data-at].is-on {
  box-shadow: inset 0 0 0 calc(var(--d) * .28) var(--v-ispuna), 0 0 0 2px var(--papir), 0 0 18px 6px rgb(255 77 23 / .45);
}
.pokret .markacija[data-at].is-on::after { animation: puls 1.2s var(--ease-out) 2; }
@keyframes pojava {
  from { scale: .6; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
@keyframes puls {
  from { opacity: .8; scale: .8; }
  to { opacity: 0; scale: 1.8; }
}

/* čeona lampa na vrhu nacrtane staze; main.js je stvara i pomiče (translate) */
.lampa {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--v-ispuna);
  box-shadow: 0 0 0 3px var(--papir), 0 0 0 6px rgb(255 77 23 / .4), 0 0 36px 16px rgb(255 77 23 / .32);
  opacity: 0; transition: opacity var(--t2) var(--ease-out);
  will-change: translate, opacity;
}
.lampa.je-upaljena { opacity: 1; }
.lampa::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid var(--v-linija); opacity: 0;
}
.pokret .lampa.je-upaljena::after { animation: puls 1.6s var(--ease-out) 2; }

/* mrak na rubovima ekrana: --gore i --dolje (0–1) postavlja main.js; iznad je samo zaglavlje i traka.
   Dolje je mrak gušći, kao neistraženo područje u igri, a oko lampe se razmiče (--lx, --ly, --lr). */
.mrak {
  --lx: 50%; --ly: 70%; --lr: 0px;
  position: fixed; inset: var(--zaglavlje) 0 0; z-index: 40; pointer-events: none;
  transition: opacity var(--t3) var(--ease-out);
  -webkit-mask: radial-gradient(circle var(--lr) at var(--lx) var(--ly), transparent 30%, #000 100%);
  mask: radial-gradient(circle var(--lr) at var(--lx) var(--ly), transparent 30%, #000 100%);
}
.mrak::before, .mrak::after { content: ""; position: absolute; left: 0; right: 0; will-change: opacity; }
.mrak::before {
  top: 0; height: var(--mrak-gore); opacity: var(--gore, 0);
  background: linear-gradient(rgb(22 24 26 / .88), rgb(22 24 26 / .5) 30%, rgb(22 24 26 / .16) 62%, rgb(22 24 26 / 0));
}
.mrak::after {
  bottom: var(--traka); height: var(--mrak-dolje); opacity: var(--dolje, 0);
  background: linear-gradient(to top, rgb(22 24 26 / .97), rgb(22 24 26 / .82) 22%, rgb(22 24 26 / .45) 48%, rgb(22 24 26 / .14) 76%, rgb(22 24 26 / 0));
  transition: translate var(--t2) var(--ease-out);
}
.mrak.bez-trake::after { translate: 0 var(--traka); }
/* dok se piše u vršnu knjigu, mrak se povuče da se vidi cijeli obrazac */
html:has(#obrazac:focus-within) .mrak { opacity: .25; }

/* sklopka „Upali svjetlo” (main.js, samo uz mrak): žarulja visi na užetu ispod zaglavlja, gore desno.
   Gornji dio užeta je iza zaglavlja, pa se pri povlačenju ne odvoji od njega. Upaljeno svjetlo gasi mrak. */
html.svjetlo-upaljeno .mrak { opacity: 0; visibility: hidden; }
html.svjetlo-pali .mrak { animation: svjetlo-pali .7s ease-out; }
.sklopka {
  --zarulja: 2rem;
  position: fixed; top: calc(var(--zaglavlje) - 1rem); right: 1.5rem; z-index: 45;
  padding: 0 0 .25rem; color: var(--grafit); background: none; border: 0; cursor: pointer;
}
.sklopka__njihalo {
  display: flex; flex-direction: column; align-items: flex-end;
  transform-origin: calc(100% - var(--zarulja) / 2) 0;
}
.sklopka__uze { width: 2px; height: 2.4rem; margin-right: calc(var(--zarulja) / 2 - 1px); background: currentColor; }
.sklopka__vrh { display: flex; align-items: center; gap: .45rem; margin-top: -1px; }
.sklopka__natpis {
  padding: .35rem .5rem .3rem; border: 1px solid var(--obrub); border-radius: 4px;
  background: rgb(247 247 243 / .94); box-shadow: var(--sjena);
  font: 500 .6875rem/1 var(--pismo-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--t1) var(--ease-out);
}
/* kad je svjetlo upaljeno, ostaje samo žarulja; natpis „Ugasi svjetlo” vidi se pod pokazivačem i uz fokus tipkovnice */
html.svjetlo-upaljeno .sklopka:not(:focus-visible) .sklopka__natpis {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
@media (hover: hover) {
  .sklopka:hover .sklopka__natpis { color: var(--v-tekst); }
  html.svjetlo-upaljeno .sklopka:hover .sklopka__natpis {
    position: static; width: auto; height: auto; padding: .35rem .5rem .3rem; border: 1px solid var(--obrub);
    overflow: visible; clip-path: none;
  }
}
.sklopka__zarulja {
  width: var(--zarulja); height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: filter var(--t2) var(--ease-out);
}
.sklopka__staklo { fill: var(--papir); transition: fill var(--t2) var(--ease-out); }
.svjetlo-upaljeno .sklopka__staklo { fill: var(--v-ispuna); }
.svjetlo-upaljeno .sklopka__zarulja { filter: drop-shadow(0 0 4px rgb(255 77 23 / .9)) drop-shadow(0 0 14px rgb(255 77 23 / .6)); }
/* dok je svjetlo ugašeno, uže se svakih 9 s trzne i žarulja zanjiše (mala petlja) */
html:not(.svjetlo-upaljeno) .sklopka__njihalo { animation: sklopka-poziv 9s ease-in-out 2s infinite; }
.sklopka.je-povucena { animation: sklopka-povuci .5s var(--ease-out); }
@keyframes sklopka-poziv {
  0%, 12%, 100% { translate: 0 0; rotate: 0deg; }
  2% { translate: 0 6px; rotate: 0deg; }
  4% { translate: 0 0; rotate: 7deg; }
  6.5% { rotate: -5deg; }
  8.5% { rotate: 3deg; }
  10.5% { rotate: -1.5deg; }
}
@keyframes sklopka-povuci {
  0%, 100% { translate: 0 0; }
  35% { translate: 0 12px; }
  70% { translate: 0 -3px; }
}
/* svjetlo se upali kao prava žarulja: jednom zatreperi, pa mrak nestane */
@keyframes svjetlo-pali {
  0% { opacity: 1; visibility: visible; }
  25% { opacity: .2; }
  40% { opacity: .75; }
  100% { opacity: 0; visibility: hidden; }
}

.karta-natpisi { position: absolute; inset: 0; }
.natpis {
  position: absolute; left: var(--x); top: var(--y);
  padding: .3rem .2rem .3rem .55rem; border-radius: 4px; background: rgb(247 247 243 / .9);
  font: 500 .8125rem/1 var(--pismo-mono); letter-spacing: .35em; text-transform: uppercase;
  color: var(--dim);
}
.natpis--vrh { color: var(--grafit); letter-spacing: .25em; }
.natpis--vrh::before {
  content: ""; display: block; width: 0; height: 0; margin: 0 0 .45rem .15rem;
  border: 9px solid transparent; border-top: 0; border-bottom: 16px solid var(--grafit);
}

.pribadaca {
  position: absolute; left: var(--x); top: var(--y);
  width: 28px; height: 36px; translate: -50% -100%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 36'%3E%3Cpath d='M14 35S2 22 2 13a12 12 0 0 1 24 0c0 9-12 22-12 22z' fill='%23FF4D17'/%3E%3Ccircle cx='14' cy='13' r='4.5' fill='%23F7F7F3'/%3E%3C/svg%3E");
}
.pribadaca__oznaka {
  position: absolute; left: calc(100% + .4rem); top: -.2rem;
  padding: .2rem .45rem; white-space: nowrap;
  background: var(--papir); border: 1px solid var(--grafit); border-radius: 4px;
  font: 500 .6875rem/1.2 var(--pismo-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--grafit);
}

/* ---------- A8. Kartice, legenda, portret i ulasci ---------- */
.kartica {
  background: var(--papir); border: 1px solid var(--obrub); border-radius: 10px; box-shadow: var(--sjena);
}
/* tekst na karti uvijek stoji na papiru, kao legenda */
.legenda, .sekcija__glava {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papir); border: 1px solid var(--obrub); border-radius: 10px; box-shadow: var(--sjena);
}
.legenda { max-width: 38rem; }
.sekcija__glava { width: fit-content; }
.portret img {
  aspect-ratio: 1; margin: 0 auto; object-fit: cover;
  background: var(--ilustracija); border: 2px solid var(--grafit); border-radius: 50%;
}
.pokret .ulazak {
  opacity: 0; translate: 0 12px;
  transition: opacity var(--t3) var(--ease-out), translate var(--t3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.pokret .ulazak.is-in { opacity: 1; translate: 0 0; }
.pokret .ulazak-niz > * {
  opacity: 0; translate: -10px 0;
  transition: opacity var(--t3) var(--ease-out), translate var(--t3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.pokret .ulazak-niz.is-in > * { opacity: 1; translate: 0 0; }

/* ---------- A9. Traka napretka ---------- */
.traka {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--traka) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--papir); border-top: 1px solid var(--obrub);
  transition: translate var(--t2) var(--ease-out), visibility 0s linear 0s;
}
.traka.je-skrivena { translate: 0 100%; visibility: hidden; transition: translate var(--t2) var(--ease-out), visibility 0s linear var(--t2); }
.traka__profil { position: absolute; left: 3%; top: 10px; width: 94%; height: 20px; overflow: visible; }
.traka__profil path { fill: none; stroke: var(--grafit); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.traka__profil--prijedeno path { stroke: var(--v-linija); stroke-width: 2.5; }
.traka__profil--prijedeno { clip-path: inset(0 calc((1 - var(--pp, 0)) * 100%) 0 0); }
.traka__stanice { position: absolute; top: 0; bottom: 0; left: 3%; width: 94%; margin: 0; padding: 0; list-style: none; }
.traka__stanice li { position: absolute; left: var(--x); top: 0; }
.traka__stanice a {
  position: absolute; left: 0; top: 0; translate: -50% 0;
  display: grid; justify-items: center; gap: .3rem; min-width: 44px; min-height: 44px; padding-top: 13px;
  font: 400 .8125rem/1.2 var(--pismo-mono); color: var(--dim); text-decoration: none; white-space: nowrap;
}
.traka__stanice a::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--papir); border: 2px solid var(--grafit);
}
.traka__stanice a.je-prijedena::before { background: var(--v-ispuna); border-color: var(--v-ispuna); }
.traka__stanice a[aria-current] { font-weight: 500; color: var(--grafit); }
.traka__stanice a[aria-current]::before {
  width: 22px; height: 22px; margin-top: -4px;
  border: 6px solid var(--v-ispuna); background: var(--papir);
}

/* male petlje (dim, ptica, ruksak, znak, zastava) vrte se stalno, pa ih gumb može zaustaviti (WCAG 2.2.2).
   Gumb dodaje main.js samo uz pokret; stoji desno od trake, pa je traka uža. */
.pokret .traka__profil, .pokret .traka__stanice { width: calc(94% - 3rem); }
.petlje-gumb {
  position: fixed; right: max(.5rem, 1.2%); bottom: calc((var(--traka) - 44px) / 2 + env(safe-area-inset-bottom)); z-index: 55;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--grafit); background: none; border: 0; cursor: pointer;
}
.petlje-gumb::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--papir); border: 1.5px solid var(--grafit); box-shadow: var(--sjena);
}
.petlje-gumb svg { position: relative; width: 12px; height: 12px; fill: currentColor; }
.petlje-gumb:hover { color: var(--v-tekst); }
.petlje-gumb__kreni, .bez-petlji .petlje-gumb__stani { display: none; }
.bez-petlji .petlje-gumb__kreni { display: block; }
.bez-petlji .petlja { animation: none !important; }
/* podnožje ima svoj gumb za pauzu (main.js, postaviPodnozje), pa se ovaj skloni */
.u-podnozju .petlje-gumb { visibility: hidden; }
.bez-petlji .dim, .bez-petlji .ptica { display: none !important; }
/* petlje miruju dok im sekcija nije u kadru */
.pokret .sekcija:not(.u-kadru) .petlja { animation-play-state: paused; }

/* ---------- A10. Podnožje ---------- */
/* podnožje ulazi 3rem u sekciju iznad; maska mu daje valoviti gornji rub (greben) */
.podnozje {
  --greben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26C80 20 150 30 230 24S390 12 470 20S610 34 700 26S860 10 950 18S1110 32 1200 22S1360 14 1440 20V48H0Z'/%3E%3C/svg%3E");
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -3rem; padding: 3rem 0 var(--traka);
  background: var(--grafit); color: var(--vapnenac);
  -webkit-mask: var(--greben) top / 100% 3rem no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 3rem + 1px) no-repeat;
  mask: var(--greben) top / 100% 3rem no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 3rem + 1px) no-repeat;
}
.podnozje__karta, .podnozje__karta img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.podnozje__karta img { object-fit: cover; }
.podnozje a { color: var(--vapnenac); text-decoration: none; }
.podnozje a:hover, .podnozje a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.podnozje :focus-visible { outline-color: var(--papir); }
.podnozje__unutra { max-width: calc(var(--sirina) + 2 * var(--rub)); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--rub) 2rem; }
.podnozje__vrh {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgb(237 237 231 / .2);
}
.znak--svijetli { margin: 0; gap: 1.25rem; font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); color: var(--vapnenac); }
.znak--svijetli .znak__slika { width: clamp(64px, 6vw, 96px); }
.znak--svijetli .znak__ime em { color: var(--v-ispuna); }
.podnozje__opis { margin: .75rem 0 0; font-size: 1.25rem; }
.podnozje__staza { width: min(26rem, 40vw); height: auto; }
.podnozje__stupci {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  padding: 2.5rem 0; border-bottom: 1px solid rgb(237 237 231 / .2);
}
.podnozje__stupci > * + * { padding-left: 2rem; border-left: 1px solid rgb(237 237 231 / .15); }
.podnozje__naslov { margin: 0 0 1.25rem; font: 500 .8125rem var(--pismo-mono); letter-spacing: .35em; text-transform: uppercase; color: var(--magla); }
.podnozje ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.podnozje p { margin: 0; line-height: 1.7; }
.legenda-popis li { display: flex; align-items: center; gap: .9rem; }
.legenda-popis .ikona { color: var(--vapnenac); }
.legenda-popis .ikona--akcent { color: var(--v-ispuna); }
.podnozje__dno {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem;
  padding-top: 1.5rem; font-size: .875rem; color: var(--magla);
}
.podnozje__dno a { color: var(--magla); }
.mjerilo {
  width: 10rem; height: .5rem; border: 1px solid var(--magla); border-top: 0;
  background: linear-gradient(90deg, var(--magla) 0 25%, transparent 25% 50%, var(--magla) 50% 75%, transparent 75%) top / 100% 2px no-repeat;
}
.podnozje__izvor { margin-left: auto !important; font-size: .75rem; }

/* legenda Panorame (žičara, toranj, most, otisci) vodi na dijelove naslovnice; mala karta Sljeme–Dubrovnik
   ima kabinu koju vozi main.js (postaviPodnozje), a gumb ispod zaustavlja sve petlje */
.podnozje .legenda-popis{gap:10px}
.podnozje .legenda-popis a{display:flex;align-items:center;gap:12px;min-height:48px;padding:3px 0}
.podnozje .legenda-popis a:hover,.podnozje .legenda-popis a:focus-visible{color:#ff8055;text-decoration:none}
.podnozje .legenda-popis svg{width:34px;height:40px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
.podnozje .legenda-popis small{display:block;font-size:13px;line-height:1.5;color:#bfc2be}
.podnozje .legend-accent{stroke:#ff632e}
.podnozje .footer-map-labels{font:13px var(--pismo-mono);letter-spacing:.04em}
.podnozje .footer-signal{animation:footer-signal 4.8s ease-out infinite;animation-play-state:paused}
.podnozje .footer-sea{animation:footer-sea 5s ease-in-out infinite;animation-play-state:paused}
.podnozje .footer-map--moving .footer-signal,.podnozje .footer-map--moving .footer-sea{animation-play-state:running}
.podnozje.footer--moving .legenda-popis a:is(:hover,:focus-visible) .legend-cabin{transform-origin:20px 5px;animation:footer-swing .85s ease-in-out}
.podnozje.footer--moving .legenda-popis a:is(:hover,:focus-visible) .legend-signal{animation:footer-signal 1.1s ease-out}
.podnozje.footer--moving .legenda-popis a:is(:hover,:focus-visible) .legend-parcel{animation:footer-parcel .85s ease-in-out}
.podnozje.footer--moving .legenda-popis a:is(:hover,:focus-visible) .legend-step{animation:footer-step .85s ease-in-out}
.podnozje .footer-motion{padding:6px 0;border:0;border-bottom:1px solid #757c76;background:none;color:#bfc2be;font:inherit;cursor:pointer}
.podnozje .footer-motion:hover{color:var(--papir)}
.podnozje .footer-motion:disabled{cursor:default;border-bottom-color:transparent}
.podnozje .footer-motion[hidden]{display:none}
@keyframes footer-signal{0%,12%,70%,100%{opacity:.15}25%,43%{opacity:1}34%,54%{opacity:.4}}
@keyframes footer-sea{0%,100%{transform:translateX(-3px);opacity:.4}50%{transform:translateX(3px);opacity:.8}}
@keyframes footer-swing{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}65%{transform:rotate(-6deg)}}
@keyframes footer-parcel{0%,100%{transform:translateX(0)}35%{transform:translateX(8px)}70%{transform:translateX(-5px)}}
@keyframes footer-step{0%,100%{transform:translateY(0)}35%{transform:translateY(-4px)}65%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.podnozje .footer-signal,.podnozje .footer-sea{animation:none}}
@media(max-width:600px){.podnozje .podnozje__vrh{flex-direction:column;align-items:flex-start;gap:24px;padding-bottom:28px}
.podnozje .znak{gap:12px}
.podnozje .podnozje__staza{width:min(360px,100%);align-self:flex-end}
.podnozje .podnozje__stupci{grid-template-columns:minmax(0,1fr);gap:30px;padding:32px 0}
.podnozje .podnozje__stupci>*:nth-child(even){padding-left:0;border-left:0}
.podnozje .podnozje__naslov{margin-bottom:16px}
.podnozje .legenda-popis{grid-template-columns:1fr 1fr;gap:12px 16px}
.podnozje .legenda-popis a{align-items:flex-start;gap:8px}
.podnozje .legenda-popis svg{width:28px;height:36px}
.podnozje .podnozje__dno{gap:16px 24px}
.podnozje .mjerilo{flex-basis:160px;margin-right:calc(100% - 160px)}
.podnozje .podnozje__izvor{flex-basis:100%;font-size:13px}
.podnozje .podnozje__unutra{padding-bottom:32px}}
@media (max-width: 600px) {
  .podnozje .legenda-popis { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .podnozje .legenda-popis a { align-items: flex-start; gap: 8px; }
  .podnozje .legenda-popis svg { width: 28px; height: 36px; }
}

/* ---------- A11. Responzivnost temelja ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .izbornik__telefon { display: none; }
}
@media (max-width: 1023px) {
  /* ---------- Jedna karta i okomita staza (21) ---------- */
  /* Sve sekcije dijele jednu kartu u pozadini: nema rezova između sekcija, a slika se učita samo jednom. */
  .sekcija__karta { display: none; }
  .karta-mobitel { display: block; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
  .karta-mobitel img { width: 100%; height: 100%; object-fit: cover; }

  /* Staze sekcija spajaju se u jednu okomitu traku uz lijevi rub; markacije sjedaju na nju. */
  .sekcija[data-staza]:not(.sekcija--vrh) { --staza-okomita: 1; --staza-x: 1.5rem; }
  .sekcija[data-staza]:not(.sekcija--vrh) .sekcija__unutra { padding-left: calc(var(--rub) + 1.5rem); }
  .sekcija[data-staza]:not(.sekcija--vrh) .staza {
    display: block; left: var(--staza-x); top: 0; width: 3px; height: 100%;
    translate: -50% 0; border-radius: 2px;
  }
  .sekcija[data-staza]:not(.sekcija--vrh) .staza path { display: none; }
  .sekcija[data-staza]:not(.sekcija--vrh) .staza--ispred {
    background: repeating-linear-gradient(rgb(22 24 26 / .35) 0 10px, transparent 10px 18px);
  }
  .sekcija[data-staza]:not(.sekcija--vrh) .staza--prijedeno { background: var(--v-linija); }
  .sekcija[data-staza]:not(.sekcija--vrh) .markacija[data-at] { display: block; left: var(--staza-x); z-index: 1; }
  /* lampa je točka na vrhu nacrtanog dijela; na početku i kraju sekcije se ugasi */
  .pokret .sekcija[data-staza]:not(.sekcija--vrh) .sekcija__slika::after {
    content: ""; position: absolute; left: var(--staza-x); top: calc(var(--p, 0) * 100%);
    width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%;
    background: var(--v-ispuna);
    box-shadow: 0 0 0 3px var(--papir), 0 0 0 6px rgb(255 77 23 / .4), 0 0 30px 12px rgb(255 77 23 / .3);
    opacity: clamp(0, min(var(--p, 0) * 14, (1 - var(--p, 0)) * 14), 1);
  }
  /* sekcija vrha zadržava svoju kratku stazu do markacije vrha, s lampom iz JS-a */

  /* izbornik u panelu; bez JS-a poveznice ostaju u zaglavlju koje se lomi u više redaka */
  .js .zaglavlje__izbornik {
    display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto;
    color: var(--grafit); background: none; border: 0;
  }
  html:not(.js) .zaglavlje { position: static; }
  html:not(.js) .zaglavlje__unutra { flex-wrap: wrap; height: auto; padding-block: .75rem; }
  .zaglavlje__izbornik svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .izbornik { flex-wrap: wrap; gap: .75rem 1.25rem; }
  .js .izbornik {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: .75rem; margin: 0;
    padding: 1rem var(--rub) 1.5rem; background: var(--papir); border-bottom: 1px solid var(--obrub);
  }
  .js .izbornik.je-otvoren { display: flex; }
  .izbornik__popis { flex-direction: column; gap: 0; }
  .izbornik__popis a { display: block; padding: .6rem 0; font-size: 1.125rem; }
  .izbornik__telefon { padding: .6rem 0; font-size: 1rem; }
  .izbornik__nazovite { display: inline; }
  /* staze su složene za desktop raspored; ispod 1024 px ostaju samo u prvom kadru i na vrhu */
  .staza, .markacija[data-at] { display: none; }
  .traka__stanice a:not([aria-current]) { font-size: 0; gap: 0; }
}
@media (max-width: 767px) {
  :root { --zaglavlje: 60px; --traka: 56px; --mrak-gore: 14%; --mrak-dolje: 20%; }
  /* na malom ekranu mrak je blaži i niži, da glavni gumb u prvom kadru ostane jasan */
  .mrak { opacity: .85; }
  /* na uskom ekranu ostaje samo žarulja, jer bi natpis prekrivao tekst (21.3) */
  .sklopka { --zarulja: 1.75rem; right: .75rem; }
  .sklopka__uze { height: 2rem; }
  .sklopka .sklopka__natpis {
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
  }
  .sklopka__natpis { font-size: .625rem; }
  .pokret .traka__profil, .pokret .traka__stanice { width: calc(84% - 2.5rem); }
  .zaglavlje .znak__ime { font-size: 1.125rem; }
  .sekcija { display: block; min-height: 0; }
  .sekcija__unutra { padding: 2.5rem var(--rub) 3rem; }
  .podnozje__vrh { flex-direction: column; align-items: flex-start; }
  .podnozje__stupci { grid-template-columns: minmax(0, 1fr); }
  .podnozje__stupci > * + * { padding-left: 0; border-left: 0; }
  .podnozje__izvor { margin-left: 0 !important; }
  .traka__profil { top: 8px; }
  .traka__profil, .traka__stanice { left: 8%; width: 84%; }
  .traka__stanice a { padding-top: 11px; }
}

/* ---------- A12. Bez pokreta ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ================= B · POLAZAK I ODAKLE KREĆETE ================= */

/* ---------- B1. Sekcija 1 · Polazak ---------- */
/* donjih 20svh ostaje slobodno za početak staze i pribadaču „Vi ste ovdje” */
.sekcija--polazak .sekcija__unutra {
  display: flex; align-items: flex-start;
  padding-top: clamp(1.5rem, 3vw, 2.75rem); padding-bottom: 20svh;
}
.sekcija--polazak .staza--ispred path { stroke-width: 2; stroke-dasharray: 6 8; }
/* u prvom kadru staza se crta vodoravno, jednom, pri učitavanju */
.staza--vodoravno { clip-path: none; }
.pokret .staza--vodoravno { animation: crtaj-vodoravno var(--t4) var(--ease-out) .3s both; }
@keyframes crtaj-vodoravno {
  from { clip-path: inset(0 83% 0 0); }
  to { clip-path: inset(0 61% 0 0); }
}
.markacija--velika { --d: 26px; }
.markacija--ispred { box-shadow: inset 0 0 0 calc(var(--d) * .28) rgb(22 24 26 / .45), 0 0 0 2px var(--papir); }
.pokret .markacija--pojava { animation: pojava var(--t2) var(--ease-out) var(--kasnjenje, 0ms) both; }
/* lampa zasvijetli na kraju nacrtanog početka staze */
.lampa--polazak { left: var(--x); top: var(--y); opacity: 1; }
.pokret .lampa--polazak { animation: pojava var(--t3) var(--ease-out) 1.2s both; }
.pokret .lampa--polazak::after { animation: puls 1.6s var(--ease-out) 1.6s 2; }
.sjever {
  position: absolute; left: var(--x); top: var(--y);
  display: grid; justify-items: center; gap: .3rem;
  font: 500 .8125rem/1 var(--pismo-mono);
}
.sjever::before {
  content: ""; width: 0; height: 0;
  border: 7px solid transparent; border-top: 0; border-bottom: 22px solid var(--grafit);
}
.pribadaca--vi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 36'%3E%3Cpath d='M14 35S2 22 2 13a12 12 0 0 1 24 0c0 9-12 22-12 22z' fill='%2316181A'/%3E%3Ccircle cx='14' cy='13' r='4.5' fill='%23F7F7F3'/%3E%3C/svg%3E");
  translate: -50% -118%;
}
/* oznaka „Vi ste ovdje” stoji iznad pribadače, jer staza ide udesno i gore */
.pribadaca--vi .pribadaca__oznaka { left: -.5rem; top: -1.9rem; }

/* ---------- B2. Sekcija 2 · Odakle krećete ---------- */
.polazista {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start; margin: 5rem 0 0; padding: 0; list-style: none;
}
.polaziste {
  position: relative; justify-self: center; width: 100%; max-width: 18rem; margin-top: var(--pomak, 0);
  padding: 2.25rem 1.5rem 1.25rem;
  background: var(--papir); border: 1px solid var(--obrub); border-radius: 10px; box-shadow: var(--sjena);
}
.pribadaca--kartica { left: 50%; top: 0; translate: -50% -55%; }
.pribadaca--kartica .pribadaca__oznaka { left: 50%; top: -1.9rem; translate: -50% 0; }
.polaziste__tekst { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.polaziste .poveznica { display: block; padding-top: .9rem; border-top: 1px solid var(--obrub); }

/* ---------- B3. Responzivnost ---------- */
@media (max-width: 1023px) {
  .sekcija--polazak .staza { display: block; }
  .sekcija--polazak .natpis:not(.natpis--vrh), .sjever { display: none; }
}
@media (max-width: 767px) {
  .sekcija--polazak .sekcija__slika { position: relative; height: 44svh; }
  .sekcija--polazak .sekcija__unutra { padding-top: 0; padding-bottom: 3rem; margin-top: -1.5rem; }
  .sekcija--polazak .legenda .gumb { display: flex; width: 100%; }
  .polazista { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; margin-top: 3.5rem; }
  .polaziste { margin-top: 0; }
}

/* ================= C · RASKRIŽJE I USPON ================= */

/* ---------- C1. Sekcija 3 · Raskrižje (usluge) ---------- */
.sekcija__unutra--usluge {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "putokaz glava" "putokaz popis";
  grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.sekcija__unutra--usluge .sekcija__glava { grid-area: glava; }
.sekcija__unutra--usluge .putokaz { grid-area: putokaz; align-self: center; }
.putokaz { position: relative; height: 34rem; }
.putokaz__stup { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; translate: -50% 0; }
.putokaz__ploce {
  position: absolute; left: 50%; top: 12%; translate: -40% 0;
  display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none;
}
.putokaz__ploca {
  --kut: -2deg;
  padding: 2px; background: var(--grafit);
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 50%, calc(100% - 1.2rem) 100%, 0 100%);
  rotate: var(--kut); transform-origin: 40% 50%; font-size: 1.0625rem; font-weight: 600;
}
.putokaz__ploca:nth-child(2) { --kut: 1deg; }
.putokaz__ploca:nth-child(3) { --kut: -1deg; }
.putokaz__ploca:nth-child(4) { --kut: 2deg; }
/* kad staza prođe (main.js, is-on), ploče se protresu, a „AI i automatizacija” se okrene oko stupa i smiri */
.pokret .putokaz__ploce { perspective: 700px; }
.pokret .putokaz__ploca.is-on { animation: protresi 900ms var(--ease-out); }
.pokret .putokaz__ploca--okret.is-on { animation: okreni 2400ms cubic-bezier(.25, .8, .3, 1); }
@keyframes protresi {
  0%, 100% { rotate: var(--kut); }
  20% { rotate: calc(var(--kut) + 5deg); }
  40% { rotate: calc(var(--kut) - 4deg); }
  60% { rotate: calc(var(--kut) + 2.5deg); }
  80% { rotate: calc(var(--kut) - 1deg); }
}
@keyframes okreni {
  0% { transform: rotateY(0); }
  48% { transform: rotateY(385deg); }
  64% { transform: rotateY(345deg); }
  78% { transform: rotateY(368deg); }
  90% { transform: rotateY(356deg); }
  100% { transform: rotateY(360deg); }
}
.putokaz__ploca span {
  display: block; padding: .45rem 2.2rem .45rem 1rem; background: var(--papir); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 1.15rem) 0, 100% 50%, calc(100% - 1.15rem) 100%, 0 100%);
}
.usluge__popis {
  grid-area: popis;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.usluga {
  display: grid; grid-template-columns: auto 3.25rem minmax(0, 1fr); column-gap: 1rem; align-items: start;
  padding: 1.5rem;
}
.usluga > .markacija { grid-column: 1; grid-row: 1 / span 2; margin-top: .4rem; }
.usluga > .ikona { grid-column: 2; grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; }
.usluga__naslov { grid-column: 3; margin: 0; font-size: 1.375rem; font-weight: 700; }
.usluga__tekst { grid-column: 3; margin: .35rem 0 0; color: var(--dim); }
.usluga__meta, .usluga__detalji { grid-column: 1 / -1; }
.usluga__meta {
  margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--obrub);
  font: 400 .8125rem/1.4 var(--pismo-mono);
}
.usluga__detalji summary { display: inline-block; margin-top: .6rem; list-style: none; }
.usluga__detalji summary::-webkit-details-marker { display: none; }
.usluga__detalji[open] summary span { rotate: 90deg; }
.usluga__stavke { margin: .75rem 0; padding-left: 1.1rem; color: var(--dim); }

/* ---------- C2. Sekcija 4 · Uspon ---------- */
.sekcija--uspon .sekcija__unutra { min-height: max(52rem, calc(100svh - var(--zaglavlje) - var(--traka))); }
/* profil uspona: --pu (0–1) računa main.js iz položaja .uspon na ekranu */
.uspon { position: absolute; left: 0; right: 0; top: 20%; height: 50%; }
.pokret .uspon { --pu: 0; }
.uspon__profil { position: absolute; inset: 0; }
.uspon__teren {
  position: absolute; inset: 0;
  clip-path: polygon(0% 92%, 12% 80%, 31% 68%, 50% 58%, 69% 48%, 88% 32%, 100% 26%, 100% 100%, 0% 100%);
  background: repeating-linear-gradient(-45deg, rgb(22 24 26 / .14) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
.uspon__linija { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uspon__linija path { fill: none; stroke: var(--grafit); stroke-width: 3; vector-effect: non-scaling-stroke; }
.uspon__linija--prijedeno path { stroke: var(--v-linija); stroke-width: 4; }
.uspon__linija--prijedeno { clip-path: inset(0 calc((1 - var(--pu, 1)) * 100%) 0 0); }
.koraci { margin: 0; padding: 0; list-style: none; }
.korak { position: absolute; left: var(--x); top: var(--y); width: 13rem; translate: -50% 0; text-align: center; scroll-margin-top: calc(var(--zaglavlje) + 7rem); }
.korak__oznaka { --d: 22px; left: 50%; top: 0; }
.korak__ploca {
  position: absolute; bottom: calc(100% + 2.25rem); left: 50%; translate: -50% 0;
  display: grid; margin: 0; padding: .35rem .9rem;
  background: var(--papir); border: 2px solid var(--grafit); border-radius: 4px;
  line-height: 1.25; white-space: nowrap;
}
.korak__ploca::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 2px; height: 2.25rem; background: var(--grafit); translate: -50% 0;
}
.korak__ploca strong { font-size: 1.0625rem; }
.korak__ploca span { font-size: .9375rem; }
.korak__tekst {
  margin: 2rem 0 0; padding: .45rem .7rem; border-radius: 8px;
  font-size: .9375rem; line-height: 1.4; color: var(--dim);
  background: var(--papir); border: 1px solid var(--obrub); box-shadow: var(--sjena);
}
/* korak koji staza još nije dosegla ima tamnu markaciju, a tekst ostaje čitljiv */
.pokret .korak:not(.is-on) .korak__oznaka {
  box-shadow: inset 0 0 0 calc(var(--d) * .28) var(--grafit), 0 0 0 2px var(--papir);
}
.korak__oznaka::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--v-linija); opacity: 0;
}
.pokret .korak.je-trenutni .korak__oznaka::after { animation: puls 1.2s var(--ease-out) 2; }
.ruksak {
  position: absolute; right: var(--rub); bottom: clamp(2rem, 5vw, 3.5rem);
  width: min(26rem, 32vw); padding: 1.5rem 1.75rem;
}
.ruksak__naslov { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; }
.ruksak__podnaslov { margin: .2rem 0 1rem; color: var(--dim); }
.ruksak__popis { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ruksak__popis li { display: flex; align-items: center; gap: .75rem; transition: color var(--t3) var(--ease-out); }
.ruksak__popis li::before {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--grafit); border-radius: 3px;
}
/* popis se sam pakira (main.js, .je-spakirano): kvačica u kućici i isprekidana crta preko riječi */
.ruksak__popis span { position: relative; }
.ruksak__popis span::before {
  content: ""; position: absolute; left: -1.95rem; top: 50%; width: 1.4rem; height: 1.4rem; translate: 0 -62%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.2 12 13.8 3' fill='none' stroke='%23E0420F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  clip-path: inset(0 100% 0 0); transition: clip-path var(--t3) var(--ease-out);
}
.ruksak__popis span::after {
  content: ""; position: absolute; left: -.15rem; right: -.15rem; top: 55%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--v-linija) 0 6px, transparent 6px 10px);
  scale: 0 1; transform-origin: left; transition: scale var(--t3) var(--ease-out) 180ms;
}
.ruksak__popis .je-spakirano { color: var(--dim); }
.ruksak__popis .je-spakirano span::before { clip-path: inset(0); }
.ruksak__popis .je-spakirano span::after { scale: 1 1; }
.pokret .ruksak.je-pun .ruksak__slika { animation: poskok 800ms var(--ease-out); }
@keyframes poskok {
  25% { translate: 0 -12px; rotate: -5deg; }
  55% { translate: 0 0; rotate: 3deg; }
  75% { rotate: -1deg; }
}
.ruksak__slika { position: absolute; right: 1rem; bottom: 1rem; width: 8.5rem; height: auto; }

/* ---------- C3. Responzivnost ---------- */
/* između 1024 i 1199 px desni stupac je preuzak za dvije kartice („automatizacija” ne stane) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .usluge__popis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .sekcija__unutra--usluge { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glava" "putokaz" "popis"; }
  .putokaz { height: 20rem; margin-top: 1.5rem; }

  /* uspon: okomita staza */
  .sekcija--uspon .sekcija__unutra { min-height: 0; }
  /* ispod 1024 px koraci su okomita staza na papiru */
  .uspon {
    position: relative; top: auto; height: auto; margin-top: 2.5rem; padding: 1.5rem 1.25rem .25rem;
    background: var(--papir); border: 1px solid var(--obrub); border-radius: 10px; box-shadow: var(--sjena);
  }
  .uspon__profil { display: none; }
  .koraci { position: relative; padding-left: 2.75rem; }
  .koraci::before, .koraci::after {
    content: ""; position: absolute; left: .9rem; top: .6rem; width: 0;
    border-left: 3px dashed rgb(22 24 26 / .35);
  }
  .koraci::before { bottom: .6rem; }
  .koraci::after { border-left-color: var(--v-linija); height: calc(var(--pu, 1) * (100% - 1.2rem)); }
  .korak { position: relative; left: auto; top: auto; width: auto; margin-bottom: 1.75rem; translate: none; text-align: left; }
  .korak__oznaka { left: -1.85rem; top: .7rem; }
  .korak__ploca { position: static; display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: 0; translate: none; background: none; border: 0; white-space: normal; }
  .korak__ploca::after { display: none; }
  .korak__ploca span { font-family: var(--pismo-mono); color: var(--dim); }
  .korak__tekst { margin: .25rem 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .ruksak { position: relative; right: auto; bottom: auto; width: auto; max-width: 30rem; margin-top: 1rem; }
}
@media (max-width: 767px) {
  .putokaz { height: 16rem; }
  .putokaz__ploca { font-size: .9375rem; }
  .usluge__popis { grid-template-columns: minmax(0, 1fr); }
}

/* ================= D · VIDIKOVAC, VODIČ, PRIJE POLASKA ================= */

/* ---------- D1. Sekcija 5 · Vidikovac (radovi) ---------- */
.sekcija__unutra--radovi {
  display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
/* lijevo pribadače, desno čist stupac koji prekriva kartu do ruba ekrana */
.radovi__popis {
  display: grid; gap: 2.25rem;
  margin: 2rem 0 0; padding: 0 0 0 clamp(4rem, 20vw, 18rem); list-style: none;
}
.radovi__stupac { position: relative; }
.radovi__stupac::before {
  content: ""; position: absolute; z-index: -1;
  top: -100vh; bottom: -100vh; left: calc(-1 * clamp(1rem, 2.5vw, 2.5rem)); right: -100vw;
  background: var(--papir); border-left: 1px solid var(--obrub);
}
.rad {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.25rem; align-items: center; padding: .75rem;
}
/* što je napravljeno: jezičci izađu iza gornjeg ruba kartice kad staza prođe (main.js, is-on) */
.rad__oznake {
  position: absolute; left: .5rem; right: .5rem; bottom: 100%;
  display: flex; justify-content: flex-end; gap: .25rem; margin: 0; padding: 0; list-style: none;
  overflow: hidden;
}
.rad__oznake li {
  flex: none; padding: .35rem .5rem .3rem;
  background: var(--papir); border: 1px solid var(--obrub); border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: inset 0 3px 0 var(--v-ispuna);
  font: 500 .625rem/1.2 var(--pismo-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.pokret .rad__oznake li { translate: 0 110%; transition: translate var(--t3) var(--ease-out); }
.pokret .rad__oznake li:nth-child(2) { transition-delay: 120ms; }
.pokret .rad__oznake li:nth-child(3) { transition-delay: 240ms; }
.pokret .rad__oznake li:nth-child(4) { transition-delay: 360ms; }
.pokret .rad.is-on .rad__oznake li { translate: 0 0; }
.rad:nth-child(2) { margin: 0 4rem 0 -4rem; }
.rad__snimka img { width: 100%; height: auto; border: 1px solid var(--obrub); border-radius: 6px; }
/* gumb za promo video u donjem lijevom kutu snimke (specifikacija 15) */
.rad__snimka { position: relative; }
.rad__video {
  position: absolute; left: .6rem; bottom: .8rem;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem;
  color: var(--papir); background: var(--grafit); border-radius: 999px;
  font: 600 .875rem/1 var(--pismo); text-decoration: none;
  box-shadow: 0 6px 18px rgb(22 24 26 / .25);
}
.rad__video::before { content: ""; border-left: .6em solid var(--v-ispuna); border-block: .36em solid transparent; }
.rad__video:hover { background: #2B2E31; }
.rad__naslov { margin: 0; font-size: 1.5rem; font-weight: 800; }
.rad__meta {
  margin: .35rem 0 .6rem;
  font: 400 .75rem/1.5 var(--pismo-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.rad__tekst { margin: 0 0 .6rem; }
.oznaka {
  float: right; margin: 0 0 .35rem .5rem; padding: .15rem .6rem;
  border: 1.5px solid var(--v-tekst); border-radius: 999px;
  font: 500 .6875rem/1.4 var(--pismo-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-tekst);
}
.radovi__veliko { margin: 0; font-size: clamp(2rem, 1rem + 2.2vw, 3rem); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; }
.radovi__srednje { margin: .25rem 0 .5rem; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--dim); }
.pribadaca--prazna {
  display: grid; place-items: center; padding-bottom: .5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 36'%3E%3Cpath d='M14 35S2 22 2 13a12 12 0 0 1 24 0c0 9-12 22-12 22z' fill='none' stroke='%23E0420F' stroke-width='1.5' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  font: 500 .875rem/1 var(--pismo-mono); color: var(--v-tekst);
  opacity: .6;
}
.pokret .pribadaca--prazna { animation: treptaj 1.2s ease-in-out 3; }
@keyframes treptaj { 50% { opacity: 1; } }
/* pribadače radova padnu 8 px i ostave prsten */
.pribadaca--pad::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 26px; height: 10px; translate: -50% -50%;
  border: 2px solid var(--v-linija); border-radius: 50%; opacity: .6;
}
.pokret .pribadaca--pad:not(.is-in) { opacity: 0; }
.pokret .pribadaca--pad.is-in { animation: pad 600ms var(--ease-out) calc(var(--i, 0) * 120ms) both; }
.pokret .pribadaca--pad.is-in::after { animation: prsten 600ms var(--ease-out) calc(var(--i, 0) * 120ms + 200ms) both; }
@keyframes pad {
  from { opacity: 0; translate: -50% calc(-100% - 8px); }
  to { opacity: 1; translate: -50% -100%; }
}
@keyframes prsten {
  from { opacity: .9; scale: .3; }
  to { opacity: .6; scale: 1; }
}

/* ---------- D2. Sekcija 6 · Vodič (o meni) ---------- */
.vodic__dom { position: absolute; right: 5%; top: 30%; width: min(24rem, 26vw); aspect-ratio: 360 / 280; }
.vodic__kuca { width: 100%; height: auto; }
/* dim iz dimnjaka i ptica: male petlje, samo uz pokret */
.dim, .ptica { display: none; }
.pokret .dim {
  display: block; position: absolute; left: 64%; top: 6%; width: 6%; aspect-ratio: 1;
  background: var(--papir); border: 1.5px solid rgb(22 24 26 / .5); border-radius: 50%;
  opacity: 0; animation: dim 4.8s ease-out calc(var(--i) * 1.6s) infinite;
}
@keyframes dim {
  0% { opacity: 0; transform: translate(0, 0) scale(.35); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translate(18px, -64px) scale(1.7); }
}
.pokret .ptica {
  display: block; position: absolute; left: 0; top: -12%; width: 9%; overflow: visible;
  fill: none; stroke: var(--grafit); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; animation: let 15s linear 3s infinite, mahanje .42s ease-in-out infinite alternate;
}
@keyframes let {
  0% { opacity: 0; translate: -150% 300%; }
  3% { opacity: 1; }
  12% { translate: 250% 0%; }
  22% { translate: 650% 200%; }
  32% { translate: 1050% -100%; }
  38% { opacity: 1; }
  42%, 100% { opacity: 0; translate: 1500% 100%; }
}
@keyframes mahanje {
  from { scale: 1 1; }
  to { scale: 1 .3; }
}
.sekcija__unutra--vodic {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .9fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.iskaznica {
  position: relative; padding: 1.75rem 1.5rem 1.5rem; rotate: -2.5deg; text-align: center;
  background: var(--papir); border: 1px solid var(--obrub); border-radius: 14px;
  box-shadow: 0 2px 0 rgb(22 24 26 / .06), 0 18px 40px rgb(22 24 26 / .12);
}
/* kartica vodiča slegne se s −4° na −2,5° */
.pokret .iskaznica.ulazak { transition-property: opacity, translate, rotate; }
.pokret .iskaznica.ulazak:not(.is-in) { rotate: -4deg; }
.iskaznica .markacija--u-kartici { --d: 22px; position: absolute; left: 1.25rem; top: 1.25rem; }
.iskaznica__znak { width: 64px; margin: 0 auto; color: var(--grafit); }
.iskaznica__oznaka { margin: .75rem 0 1rem; font: 500 .875rem var(--pismo-mono); letter-spacing: .4em; text-transform: uppercase; }
.iskaznica__portret img { width: min(15rem, 100%); }
/* portret nacrta ruka s olovkom (specifikacija 25): skica, crtež i sjene odozgo prema dolje, pa dođe slika.
   Samo uz pokret i bez „Zaustavi animacije”; inače je portret odmah tu, a faze i ruka se ni ne učitaju. */
.crtanje { position: relative; width: min(15rem, 100%); margin: 0 auto; container-type: inline-size; }
.crtanje .portret { position: relative; }
.crtanje__faza, .crtanje__ruka { display: none; }
.pokret .crtanje.ulazak { opacity: 1; translate: none; }
.pokret:not(.bez-petlji) .crtanje::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ilustracija); border: 2px solid var(--grafit); border-radius: 50%;
}
.pokret:not(.bez-petlji) .crtanje__faza {
  display: block; position: absolute; inset: 0;
  -webkit-mask: linear-gradient(#000 45.5%, transparent 54.5%) 0 100% / 100% 220% no-repeat;
  mask: linear-gradient(#000 45.5%, transparent 54.5%) 0 100% / 100% 220% no-repeat;
}
.crtanje__faza img { width: 100%; border: 2px solid transparent; border-radius: 50%; }
.crtanje__faza:nth-child(2) { --kasni: 1.8s; }
.crtanje__faza:nth-child(3) { --kasni: 3.1s; }
.pokret:not(.bez-petlji) .crtanje:not(.is-in) .portret { opacity: 0; }
/* vrh olovke je u (5, 6) crteža od 240 × 180, pa ga margina stavi u točku translate */
.pokret:not(.bez-petlji) .crtanje__ruka {
  display: block; position: absolute; left: 0; top: 0; width: 62cqw;
  margin: -1.55cqw 0 0 -1.29cqw; transform-origin: 2.08% 3.33%; opacity: 0; pointer-events: none;
}
.pokret:not(.bez-petlji) .crtanje.is-in .crtanje__faza { animation: crtanje-faza 1.2s linear var(--kasni, .5s) both; }
.pokret:not(.bez-petlji) .crtanje.is-in .portret { animation: crtanje-slika .5s 4.3s both; }
.pokret:not(.bez-petlji) .crtanje.is-in .crtanje__ruka { animation: crtanje-ruka 5s ease-in-out both; }
@keyframes crtanje-faza { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes crtanje-slika { from { opacity: 0; } }
/* ruka vuče olovku cik-cak uz rub onoga što se crta; tri prolaza po 1,2 s, između njih skok na vrh */
@keyframes crtanje-ruka {
  0% { opacity: 0; translate: 92cqw 118cqw; rotate: 8deg; }
  10%, 36%, 62% { opacity: 1; translate: 35cqw 4cqw; rotate: -3deg; }
  14%, 40%, 66% { translate: 72cqw 10cqw; rotate: 2deg; }
  18%, 44%, 70% { translate: 16cqw 30cqw; rotate: -3deg; }
  22%, 48%, 74% { translate: 88cqw 50cqw; rotate: 2deg; }
  26%, 52%, 78% { translate: 16cqw 70cqw; rotate: -3deg; }
  30%, 56%, 82% { translate: 72cqw 90cqw; rotate: 2deg; }
  34%, 60%, 86% { opacity: 1; translate: 35cqw 96cqw; rotate: -3deg; }
  96%, 100% { opacity: 0; translate: 95cqw 120cqw; rotate: 8deg; }
}
.iskaznica__ime { margin: 1rem 0 0; font-size: 1.625rem; font-weight: 800; }
.iskaznica__mjesto { margin: .15rem 0 0; color: var(--dim); }
.vodic__tekst {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papir); border: 1px solid var(--obrub); border-radius: 10px; box-shadow: var(--sjena);
}
.cinjenice { display: grid; gap: .9rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.cinjenice li { display: flex; align-items: center; gap: .9rem; }

/* ---------- D3. Sekcija 7 · Prije polaska (pitanja) ---------- */
.pitanja {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
  margin-top: 2.5rem; padding-right: clamp(0rem, 6vw, 6rem);
}
.pitanja__popis { padding: .5rem 1.75rem; }
.pitanje { border-bottom: 1px solid var(--obrub); }
.pitanje:last-child { border-bottom: 0; }
.pitanje summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; list-style: none; cursor: pointer;
  font-size: 1.1875rem; font-weight: 600;
}
.pitanje summary::-webkit-details-marker { display: none; }
.pitanje summary::after { content: "+"; font: 400 1.75rem/1 var(--pismo); }
.pitanje[open] summary::after { content: "−"; }
.pitanje p { max-width: 52ch; margin: 0 0 1.2rem; color: var(--dim); }
/* otvaranje s visinom gdje preglednik to podržava; drugdje se otvara odmah */
.pokret .pitanje { interpolate-size: allow-keywords; }
.pokret .pitanje::details-content {
  height: 0; overflow: clip;
  transition: height var(--t2) var(--ease-out), content-visibility var(--t2) allow-discrete;
}
.pokret .pitanje[open]::details-content { height: auto; }
/* stanje na stazama: propisi kao staza; prijeđeni dio je vermilion, a ono što dolazi je sivo */
.propisi { padding: 1.75rem 1.75rem 1.5rem; }
.propisi__nadnaslov {
  margin: 0 0 .6rem;
  font: 500 .75rem/1.4 var(--pismo-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.propisi__naslov { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.propisi__tekst { max-width: 44ch; margin: .6rem 0 0; color: var(--dim); }
.propisi__staza { position: relative; margin: 1.5rem 0 0; padding: 0 0 0 2.25rem; list-style: none; }
.propisi__staza::before {
  content: ""; position: absolute; left: calc(.45rem + 6px); top: .5rem; bottom: .5rem;
  border-left: 2px dashed rgb(22 24 26 / .3);
}
.propis { position: relative; padding: 0 0 1.25rem; }
.propis:last-child { padding-bottom: 0; }
/* svaka prijeđena točka dobiva vermilion dionicu do sljedeće */
.propis.je-prijeden::after {
  content: ""; position: absolute; left: calc(-2.25rem + .45rem + 6px); top: .55rem; bottom: calc(-.3rem - 7px);
  border-left: 2px dashed var(--v-linija); transform-origin: top;
}
.propis__oznaka { position: absolute; left: calc(-2.25rem + .45rem); top: .3rem; }
.propis__datum { margin: 0; font: 500 .875rem/1.4 var(--pismo-mono); }
.propis__tekst { margin: .15rem 0 .35rem; line-height: 1.4; }
.propis:not(.je-prijeden) .propis__tekst { color: var(--dim); }
.propis__izvor { font-size: .875rem; font-weight: 600; color: var(--v-tekst); text-decoration: none; }
.propis--danas { padding-bottom: 1.5rem; }
.propis--danas .propis__datum {
  display: inline-block; padding: .2rem .5rem;
  background: var(--papir); border: 1px solid var(--grafit); border-radius: 4px;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}
.propis__pribadaca { left: calc(-2.25rem + .45rem + 7px); top: .95rem; width: 20px; height: 26px; }
/* uz pokret se dionice iscrtaju redom, a pribadača „Vi ste ovdje” padne na stazu */
.pokret .propis.je-prijeden::after { scale: 1 0; transition: scale var(--t4) var(--ease-out); }
.pokret .propis.je-prijeden + .propis.je-prijeden::after { transition-delay: 600ms; }
.pokret .propisi.is-in .propis.je-prijeden::after { scale: 1 1; }
.pokret .propis__pribadaca {
  opacity: 0; translate: -50% calc(-100% - 10px);
  transition: opacity var(--t3) var(--ease-out) 1.3s, translate var(--t3) var(--ease-out) 1.3s;
}
.pokret .propisi.is-in .propis__pribadaca { opacity: 1; translate: -50% -100%; }

/* ---------- D4. Responzivnost ---------- */
/* ispod 1280 px kartica rada je preuska za jezičke iznad ruba, pa su oznake u kartici */
@media (max-width: 1279px) {
  .radovi__popis { gap: 1rem; }
  .rad__oznake {
    position: static; grid-column: 1 / -1;
    flex-wrap: wrap; justify-content: flex-start; overflow: visible; margin-bottom: .25rem;
  }
  .rad__oznake li { background: var(--vapnenac); border: 1px solid var(--obrub); border-radius: 999px; box-shadow: none; }
  .pokret .rad__oznake li { translate: none; opacity: 0; transition-property: opacity; }
  .pokret .rad.is-on .rad__oznake li { opacity: 1; }
}
/* u užem stupcu teksta oznaka „U izradi” ide iznad naslova */
@media (min-width: 768px) and (max-width: 1279px) {
  .oznaka { float: none; display: inline-block; margin: 0 0 .4rem; }
}
@media (max-width: 1023px) {
  .sekcija__unutra--radovi, .pitanja { grid-template-columns: minmax(0, 1fr); }
  .radovi__stupac { padding: 1.5rem; background: var(--papir); border: 1px solid var(--obrub); border-radius: 10px; }
  .radovi__stupac::before { display: none; }
  .radovi__popis { padding-left: 0; }
  .rad:nth-child(2) { margin: 0; }
  .sekcija__unutra--vodic { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .vodic__dom { display: none; }
  .pitanja { padding-right: 0; }
}
@media (max-width: 767px) {
  .rad { grid-template-columns: minmax(0, 1fr); }
  .sekcija__unutra--vodic { grid-template-columns: minmax(0, 1fr); }
  .iskaznica { max-width: 20rem; margin: 0 auto; }
}

/* ================= E · VRH, OBRAZAC I KVIZ ================= */

/* ---------- E1. Sekcija 8 · Vrh (kontakt) ---------- */
/* staza završava na markaciji vrha: .vrh je uvijek 1.5rem od vrha sekcije, a staza je visoka 16rem */
.sekcija .sekcija__unutra--vrh { display: grid; justify-items: center; gap: 1.25rem; padding-top: 1.5rem; }
.sekcija--vrh .staza { height: 16rem; }
.vrh { position: relative; width: 15rem; height: 8.75rem; }
.vrh__gomila { width: 100%; height: auto; }
.vrh__markacija { --d: 20px; left: 50%; top: 58%; }
.vrh__natpis { left: 68%; top: 4%; }
/* zastava na vrhu: bez pokreta uvijek stoji; uz pokret se digne kad lampa stigne na vrh (main.js, .je-dosegnut) */
.vrh__zastava { position: absolute; left: calc(50% - .25rem); bottom: 64%; width: 1.9rem; height: auto; overflow: visible; }
.vrh__koplje { fill: none; stroke: var(--grafit); stroke-width: 2; stroke-linecap: round; }
.vrh__platno { transform-box: fill-box; transform-origin: left center; }
.vrh__platno path { fill: var(--v-ispuna); stroke: var(--grafit); stroke-width: 1.5; stroke-linejoin: round; }
.vrh__platno circle { fill: var(--papir); }
.vrh__sjaj, .vrh__zrake { position: absolute; left: 50%; top: 58%; translate: -50% -50%; opacity: 0; pointer-events: none; }
.vrh__sjaj {
  width: 16rem; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 77 23 / .4), rgb(255 77 23 / .12) 45%, rgb(255 77 23 / 0) 70%);
}
.vrh__zrake {
  width: 9rem; aspect-ratio: 1;
  background: repeating-conic-gradient(var(--v-ispuna) 0deg 2.5deg, transparent 2.5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47% 62%, transparent 63%);
  mask: radial-gradient(circle, transparent 46%, #000 47% 62%, transparent 63%);
}
.pokret .vrh__zastava { opacity: 0; translate: 0 35%; transition: opacity var(--t3) var(--ease-out), translate var(--t3) var(--ease-out); }
.pokret .vrh.je-dosegnut .vrh__zastava { opacity: 1; translate: 0 0; transition-delay: 250ms; }
.pokret .vrh.je-dosegnut .vrh__platno { animation: vijori 2.6s ease-in-out infinite; }
.pokret .vrh.je-dosegnut .vrh__sjaj { opacity: 1; animation: sjaj-vrha 3.2s ease-in-out infinite alternate; }
.pokret .vrh.je-dosegnut .vrh__zrake { animation: zrake 1.2s var(--ease-out) forwards, vrti 30s linear 1.2s infinite; }
.pokret .vrh.je-dosegnut .vrh__markacija {
  box-shadow: inset 0 0 0 calc(var(--d) * .28) var(--v-ispuna), 0 0 0 2px var(--papir), 0 0 22px 8px rgb(255 77 23 / .5);
}
@keyframes vijori {
  0%, 100% { transform: skewY(0) scaleX(1); }
  50% { transform: skewY(-7deg) scaleX(.9); }
}
@keyframes sjaj-vrha {
  from { scale: .92; opacity: .75; }
  to { scale: 1.06; opacity: 1; }
}
@keyframes zrake {
  from { opacity: 0; scale: .4; }
  60% { opacity: 1; }
  to { opacity: .35; scale: 1; }
}
@keyframes vrti {
  from { rotate: 0deg; opacity: .35; }
  to { rotate: 360deg; opacity: .35; }
}
.vrh__natpis::before { display: none; }
.knjiga {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(56rem, 100%); margin-top: 1rem;
  background: var(--papir); border: 2px solid var(--grafit); border-radius: 6px;
  box-shadow: 0 2px 0 rgb(22 24 26 / .08), 0 24px 50px rgb(22 24 26 / .14);
}
.knjiga::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0;
  background: var(--grafit); box-shadow: 0 0 18px 6px rgb(22 24 26 / .08);
}
/* straničnik (vrpca) ispod hrpta */
.knjiga::after {
  content: ""; position: absolute; left: calc(50% + 10px); top: 100%; width: 14px; height: 30px;
  background: var(--v-ispuna); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.knjiga__stranica { padding: 2rem 2.25rem; }
.knjiga__stranica--lijeva {
  background: repeating-linear-gradient(transparent 0 2.4rem, rgb(22 24 26 / .06) 2.4rem calc(2.4rem + 1px));
}
.knjiga__stranica--desna { position: relative; text-align: center; }
.knjiga__stranica--desna p { margin: .35rem 0; }
.knjiga__portret img { width: 9rem; }
.knjiga__vodic { padding-bottom: .75rem; border-bottom: 1px solid var(--obrub); font-size: 1.25rem; font-weight: 700; }
.knjiga__kontakt { font: 400 .9375rem var(--pismo-mono); text-decoration: none; }
.pecat { position: absolute; right: 1.5rem; bottom: 1.25rem; width: 7rem; height: 7rem; rotate: -8deg; opacity: .92; }
.pecat circle { fill: none; stroke: var(--v-ispuna); stroke-width: 3; }
.pecat circle + circle { stroke-width: 1.5; stroke-dasharray: 3 3; }
.pecat__znak path { fill: none; stroke: var(--v-ispuna); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.pecat__znak .pecat__staza { stroke-width: 2.6; stroke-dasharray: 3 5; }
.pecat__znak circle { stroke-width: 3.2; }
.pokret .pecat { opacity: 0; }
.pokret .pecat.je-utisnut { animation: utisni var(--t2) var(--ease-out) both; }
@keyframes utisni {
  from { opacity: 0; scale: 1.15; }
  to { opacity: .92; scale: 1; }
}

/* ---------- E2. Obrazac ---------- */
.polje { margin: 0 0 1rem; text-align: left; }
.polje label { display: block; margin-bottom: .3rem; font-size: .9375rem; font-weight: 600; }
.polje input, .polje select, .polje textarea {
  width: 100%; min-height: 44px; padding: .6rem .8rem;
  font: inherit; color: var(--grafit); background: #FBFBF8;
  border: 1.5px solid rgb(22 24 26 / .35); border-radius: 6px;
}
.polje textarea { resize: vertical; }
/* gotovi predlošci opisa: main.js ih prikaže, a klik upiše početak rečenice u polje */
.predlosci { margin: 0 0 .6rem; }
.predlosci[hidden] { display: none; }
.predlosci__uvod { margin: 0 0 .4rem; font-size: .8125rem; color: var(--dim); }
.predlosci__popis { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.predlozak {
  min-height: 32px; padding: .3rem .75rem;
  font: 500 .8125rem/1.2 var(--pismo); color: var(--grafit); cursor: pointer;
  background: var(--papir); border: 1px solid rgb(22 24 26 / .25); border-radius: 999px;
  transition: border-color var(--t1) var(--ease-out), color var(--t1) var(--ease-out), background-color var(--t1) var(--ease-out);
}
.predlozak:hover { color: var(--v-tekst); background: rgb(255 77 23 / .06); border-color: var(--v-linija); }
.polje [aria-invalid="true"] { border-color: var(--v-tekst); }
.polje__pomoc { margin: .3rem 0 0; font-size: .8125rem; color: var(--dim); }
.polje__greska { margin: .3rem 0 0; font-size: .875rem; color: var(--v-tekst); }
.polje__greska:empty { display: none; }
.polje--zamka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.obrazac .gumb { margin-top: .5rem; }
.obrazac__nazovite { display: none; }
.obrazac__status { margin: 1rem 0 0; font-weight: 600; }
.obrazac__status:empty { display: none; }
.obrazac__status.je-greska { color: var(--v-tekst); }
.obrazac__napomena { margin: 1rem 0 0; font-size: .8125rem; color: var(--dim); }
.obrazac__noscript { margin: 1rem 0 0; font-weight: 600; }

/* ---------- E3. Kviz ---------- */
.kviz {
  width: min(34rem, calc(100vw - 2rem)); padding: 0;
  color: var(--grafit); background: var(--papir);
  border: 2px solid var(--grafit); border-radius: 10px;
  box-shadow: 0 30px 80px rgb(22 24 26 / .3);
}
.kviz::backdrop { background: rgb(22 24 26 / .45); }
.kviz__obrazac { padding: 1.5rem 1.75rem 1.75rem; }
.kviz__glava { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.kviz__naslov { margin: 0; font-size: 1.5rem; font-weight: 800; }
.kviz__zatvori { width: 44px; height: 44px; border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.kviz__korak { margin: .25rem 0 1rem; font: 400 .8125rem var(--pismo-mono); color: var(--dim); }
.kviz__pitanje { margin: 0; padding: 0; border: 0; }
.kviz__pitanje[hidden], .kviz__rezultat[hidden] { display: none; }
.kviz__pitanje legend { margin-bottom: 1rem; padding: 0; font-size: 1.25rem; font-weight: 700; }
.kviz__odgovori { display: grid; gap: .6rem; }
.kviz__odgovor {
  display: block; width: 100%; min-height: 48px; padding: .85rem 1rem; text-align: left; cursor: pointer;
  font: 600 1.0625rem/1.3 var(--pismo); color: var(--grafit); background: var(--papir);
  border: 1.5px solid rgb(22 24 26 / .35); border-radius: 8px;
}
.kviz__odgovor:hover { border-color: var(--v-linija); }
.kviz__preporuka { margin: 0 0 .25rem; font-size: 1.375rem; font-weight: 800; }

/* ---------- E4. Responzivnost ---------- */
@media (max-width: 1023px) {
  .sekcija--vrh .staza { display: block; }
}
@media (max-width: 767px) {
  .knjiga { grid-template-columns: minmax(0, 1fr); }
  .knjiga::before, .knjiga::after { display: none; }
  .knjiga__stranica { padding: 1.5rem 1.25rem; }
  .knjiga__stranica--desna { border-top: 2px solid var(--grafit); }
  .obrazac .gumb { width: 100%; }
  .obrazac__nazovite { display: flex; margin-top: .75rem; }
  .pecat { width: 5rem; height: 5rem; }
}

/* ---------- E5. Promo video (specifikacija 15) ---------- */
.video-prozor {
  width: min(60rem, calc(100vw - 2rem), calc((100dvh - 8rem) * 16 / 9)); padding: 0;
  color: var(--grafit); background: var(--papir);
  border: 2px solid var(--grafit); border-radius: 10px;
  box-shadow: 0 30px 80px rgb(22 24 26 / .3);
}
.video-prozor::backdrop { background: rgb(22 24 26 / .7); }
.video-prozor__glava { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .25rem .25rem .25rem 1.25rem; }
.video-prozor__naslov { margin: 0; font: 500 .75rem/1.4 var(--pismo-mono); letter-spacing: .08em; text-transform: uppercase; }
.video-prozor__zatvori { width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.video-prozor__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--grafit); }

/* ================= F · PRAVNE STRANICE I 404 ================= */
/* bez karte u pozadini, radi čitljivosti (specifikacija 11.3) */
.stranica { padding: clamp(3rem, 6vw, 5rem) var(--rub) clamp(6rem, 10vw, 8rem); }
.stranica__unutra { max-width: 46rem; margin: 0 auto; }
.naslov--stranica { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }
.stranica__datum { margin: 1rem 0 0; font: 400 .8125rem/1.4 var(--pismo-mono); color: var(--dim); }
.stranica__blok { margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); }
.stranica__blok h2 { margin: 0 0 .75rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.stranica__blok p { max-width: 65ch; margin: 0 0 .9rem; }
.stranica__blok p:last-child { margin-bottom: 0; }
.stranica__blok ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.stranica__blok a { color: var(--v-tekst); text-underline-offset: 3px; }
.stranica__natrag { margin: 2.5rem 0 0; }
.stranica__natrag .gumb { margin-top: 0; }
.stranica--404 { display: grid; align-items: center; min-height: calc(100svh - var(--zaglavlje)); text-align: center; }
.stranica--404 .uvod { margin-inline: auto; }
.skretanje { width: min(26rem, 100%); margin: 0 auto 2rem; }

/* ---------- F3. Blog (22) ---------- */
.zapisi { display: grid; gap: 1.25rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.zapis { padding: clamp(1.25rem, 3vw, 2rem); }
.zapis__oznaka {
  margin: 0 0 .5rem;
  font: 500 .75rem/1 var(--pismo-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.zapis__naslov { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.zapis__naslov a { color: inherit; text-decoration: none; }
.zapis__naslov a:hover { color: var(--v-tekst); text-decoration: underline; text-underline-offset: 4px; }
.zapis__uvod { max-width: 65ch; margin: .6rem 0 0; color: var(--dim); }
.zapis__meta { margin: .9rem 0 0; font: 400 .8125rem/1.4 var(--pismo-mono); color: var(--dim); }
/* članak: naslovi, popisi, citati i crta iste su obitelji kao ostatak stranice */
.clanak .nadnaslov a { color: inherit; }
.proza h2 { margin: 1.75rem 0 .6rem; font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
.proza > :first-child { margin-top: 0; }
.proza p, .proza ul, .proza ol { max-width: 65ch; margin: 0 0 .9rem; }
.proza ul, .proza ol { padding-left: 1.25rem; }
.proza li { margin-bottom: .35rem; }
.proza a { color: var(--v-tekst); text-underline-offset: 3px; }
.proza blockquote {
  max-width: 65ch; margin: 1.25rem 0; padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--v-linija); color: var(--dim); font-style: italic;
}
.proza blockquote p { margin: .4rem 0; }
.proza hr { margin: 1.75rem 0; border: 0; border-top: 1px dashed var(--obrub); }

/* ---------- F4. Stranice usluga i karta Hrvatske (24) ---------- */
/* markacija u nadnaslovu ostaje krug i kad se nadnaslov prelomi u dva retka */
.nadnaslov > .markacija { flex: none; }
/* naslovnica: poveznica na stranicu usluge i mala karta uz rad izvan Zagreba */
.usluga__vise { grid-column: 1 / -1; justify-self: start; margin-top: .6rem; }
.pitanje__karta { display: block; width: min(100%, 15rem); height: auto; margin: 0 0 1.2rem; }

/* vrh: papirnata kartica i karta Hrvatske sa stazom od Vukovara do Dubrovnika */
.usluga-vrh {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  max-width: 72rem; margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.usluga-vrh__kartica { padding: clamp(1.5rem, 3vw, 2.5rem); }
.usluga-vrh .uvod { max-width: 44ch; }
.usluga-vrh__vrijeme {
  margin: 1.25rem 0 0; padding-top: .85rem; border-top: 1px solid var(--obrub);
  font: 400 .8125rem/1.4 var(--pismo-mono);
}
.usluga-gumbi { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.usluga-gumbi .gumb { margin-top: 0; }
@media (min-width: 1024px) {
  .usluga-vrh { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
@media (max-width: 1023px) {
  .usluga-vrh .karta-hr { order: -1; width: min(100%, 34rem); margin: 0 auto; }
}

.karta-hr { position: relative; }
.karta-hr > svg { display: block; width: 100%; height: auto; }
.karta-hr__natpis {
  position: absolute; left: var(--x); top: var(--y);
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .4rem; background: var(--papir); border-radius: 4px;
  font: 500 .6875rem/1.2 var(--pismo-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grafit); white-space: nowrap; pointer-events: none;
}
.karta-hr__natpis[data-strana="lijevo"] { translate: calc(-100% - .6rem) -50%; }
.karta-hr__natpis[data-strana="desno"] { translate: .6rem -50%; }
.karta-hr__natpis[data-strana="gore"] { translate: -50% calc(-100% - .6rem); }
.karta-hr__natpis[data-strana="dolje"] { translate: -50% .6rem; }
.karta-hr__natpis .ikona { width: .95rem; height: .95rem; color: var(--v-tekst); }
@media (max-width: 1023px) { .karta-hr__natpis--sporedni { display: none; } }
/* staza se jednom iscrta; bez pokreta (smanjeno gibanje, bez JS-a) odmah je cijela */
.pokret .karta-hr__crtanje {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: karta-hr-crtanje 1.6s var(--ease-out) .3s forwards;
}
@keyframes karta-hr-crtanje { to { stroke-dashoffset: 0; } }
/* putovanje: skripta klasom je-aktivan označi grad u lupi; znamenitost zasvijetli i poskoči,
   a granica grada (samo Zagreb) se ocrta na karti i u lupi */
.karta-hr__grad { cursor: pointer; }
.karta-hr__putnik, .karta-hr__lupa, .karta-hr__lupa-crta { pointer-events: none; }
.karta-hr__granica { transition: opacity var(--t2) var(--ease-out); }
.karta-hr__granica.je-aktivan { opacity: 1; }
.pokret .karta-hr__granica {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: opacity var(--t2) var(--ease-out), stroke-dashoffset .9s var(--ease-out);
}
.pokret .karta-hr__granica.je-aktivan { stroke-dashoffset: 0; }
/* klasu nosi sam crtež, jer ga lupa kopira bez predaka; zato poskok ovisi o postavci sustava, a ne o klasi pokret */
.karta-hr__znamenitost [fill="#F7F7F3"] { transition: fill var(--t3) var(--ease-out); }
.karta-hr__znamenitost.je-aktivan [fill="#F7F7F3"] { fill: #FFE2D4; }
@media (prefers-reduced-motion: no-preference) {
  .karta-hr__znamenitost.je-aktivan { animation: karta-hr-skok .9s var(--ease-out); }
}
@keyframes karta-hr-skok { 35% { translate: 0 -12px; } 70% { translate: 0 2px; } }
/* lupa se pri svakom gradu otkrije u krug (skripta pokreće animaciju pomaka) */
.pokret .karta-hr__lupa-otkrivanje { stroke-dasharray: 1; }
.karta-hr__lupa-ime {
  position: absolute; left: var(--x); top: var(--y); translate: -50% .5rem;
  padding: .2rem .5rem; background: var(--grafit); border-radius: 4px;
  font: 500 .6875rem/1.2 var(--pismo-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--papir); white-space: nowrap; pointer-events: none;
}

/* tijelo stranice: stupac kao na blogu, dijelovi s nadnaslovom i naslovom */
.usluga-dio { margin-top: clamp(3rem, 6vw, 4.5rem); }
.usluga-dio--kartica { padding: clamp(1.5rem, 3vw, 2.25rem); }
.usluga-dio--kartica p:not(.nadnaslov):not(.usluga-gumbi) { max-width: 60ch; margin: 1rem 0 0; }
.usluga-dio a:not(.gumb):not(.poveznica):not(.rad__video) { color: var(--v-tekst); text-underline-offset: 3px; }
.naslov--dio { margin-bottom: 1.5rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.usluga-dio--kartica .naslov--dio { margin-bottom: 0; }
.usluga-dio__dalje { margin: 1.25rem 0 0; }

.dobivate { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dobivate > li { padding: 1.25rem; }
.dobivate h3 { margin: .75rem 0 .35rem; font-size: 1.125rem; font-weight: 700; }
.dobivate p { margin: 0; color: var(--dim); }
@media (min-width: 768px) { .dobivate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* koraci: markacije uz okomitu isprekidanu stazu, nacrtanu odmah */
.usluga-koraci { position: relative; margin: 0; padding: 0; list-style: none; }
.usluga-koraci::before {
  content: ""; position: absolute; left: .875rem; top: 1rem; bottom: 1rem; width: 3px; translate: -50% 0;
  background: repeating-linear-gradient(var(--v-linija) 0 10px, transparent 10px 18px);
}
.usluga-koraci > li { position: relative; padding: 0 0 1.75rem 2.75rem; }
.usluga-koraci > li:last-child { padding-bottom: 0; }
.usluga-koraci .markacija { --x: .875rem; --y: .95rem; }
.usluga-koraci__ploca {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 .25rem;
}
.usluga-koraci__ploca strong { font-size: 1.125rem; }
.usluga-koraci__ploca span { font: 400 .8125rem/1.4 var(--pismo-mono); color: var(--dim); }
.usluga-koraci p:not(.usluga-koraci__ploca) { margin: 0; color: var(--dim); }

/* radovi: ista kartica kao na naslovnici, bez pomaka i jezičaka */
.usluga-radovi { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.usluga-radovi .rad { margin: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .usluga-radovi .rad { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
/* što je napravljeno: isti jezičci kao na naslovnici (blok D); staze ovdje nema, pa izađu kad kartica uđe u ekran */
.pokret .usluga-radovi .rad.is-in .rad__oznake li { translate: 0 0; opacity: 1; }
@media (min-width: 1280px) { .usluga-radovi { gap: 2.5rem; padding-top: 1.25rem; } }

.usluga-kraj__druga { margin: 1.5rem 0 0; }

/* promo video s više verzija (main.js, postaviVideo): gumbi verzija i okomiti prozor za 9:16 */
.video-prozor__verzije { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.25rem .6rem; }
.video-prozor__verzije[hidden] { display: none; }
.video-prozor__verzije button {
  min-height: 36px; padding: .35rem .75rem; border: 1px solid rgb(22 24 26 / .35); border-radius: 999px;
  background: none; color: inherit; font: 600 .75rem/1.2 var(--pismo); cursor: pointer;
}
.video-prozor__verzije button[aria-pressed="true"] { background: var(--grafit); color: var(--papir); border-color: var(--grafit); }
.video-prozor[data-omjer="9x16"] { width: min(26rem, calc(100vw - 2rem), calc((100dvh - 9rem) * 9 / 16 + 4px)); }
.video-prozor[data-omjer="9x16"] .video-prozor__video { aspect-ratio: 9 / 16; }