/* Šibenik 2066 — izgled izvješća. Paleta: šibenski kamen i Jadran.
   Svjetle i tamne sekcije se izmjenjuju; animacije se pale tek kad element
   uđe u vidno polje (klasa .reveal → .vidljiv iz js/index.js). */

:root {
    --kamen: #f4f0e6;
    --kamen-tamni: #ded6c4;
    --tinta: #16232b;
    --tinta-blaga: #4a5a64;
    --more: #0c3a4f;
    --more-tamno: #071e2a;
    --more-svijetlo: #1d7ea8;
    --koral: #d9553b;
    --zlato: #d9a441;
    /* Obala u grafici mora čitati kao kopno uz more, a ne kao još jedan akcent: zelena dovoljno
       svijetla da izdrži tamnu podlogu sekcije (--more-tamno). */
    --zelena-obala: #5aab72;

    --sirina: 1080px;
    --razmak: clamp(1.25rem, 4vw, 3rem);
    --trajanje: 0.7s;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--kamen);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
a { color: var(--more-svijetlo); }

.preskoci {
    position: absolute; left: -9999px; top: 0;
    background: var(--tinta); color: var(--kamen); padding: 0.75rem 1rem; z-index: 10;
}
.preskoci:focus { left: 0; }

/* Dopuna imenu vanjske poveznice: čitač ekrana je pročita, oko je ne vidi.
   Vanjske poveznice otvaraju novu karticu, a nenajavljena nova kartica je
   promjena konteksta bez pristanka (WCAG 3.2.5). Zato tekst, a ne samo ikona. */
.nova-kartica {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.omot { width: 100%; max-width: var(--sirina); margin: 0 auto; padding: 0 var(--razmak); }

/* ------------------------------ HERO ------------------------------ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem var(--razmak) 6rem;
    background: linear-gradient(180deg, var(--more-tamno) 0%, var(--more) 60%, #0f4a63 100%);
    color: var(--kamen);
    overflow: hidden;
}

.hero-pozadina { position: absolute; inset: auto 0 0 0; height: 45%; opacity: 0.5; }
.hero-pozadina svg { width: 100%; height: 100%; display: block; }
.brdo { fill: #0a2c3d; }
.brdo-2 { fill: #082433; opacity: 0.85; }
.brdo-1 { fill: #061c28; }

.hero-sadrzaj { position: relative; z-index: 1; max-width: 46rem; }

.nadnaslov {
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    color: var(--zlato);
    margin: 0 0 2rem;
}

.hero h1 {
    font-size: clamp(3.5rem, 14vw, 9rem);
    margin: 0;
    line-height: 0.92;
}
.godina-2066 { display: block; color: var(--zlato); }
/* Svjetlucanje godine: kosi odsjaj polako i ravnomjerno klizi preko zlatnih
   znamenki. Radi kroz background-clip:text, pa je boja i dalje --zlato kad
   animacija ne teče (bez-pokreta: pravilo ispod je ne pali). Linearno i bez
   zadržavanja u keyframeovima: svaka pauza ili easing čita se kao zastajkivanje,
   a tišinu ionako daje uzak odsjaj na širokoj podlozi — veći dio ciklusa je
   izvan znamenki. */
@keyframes godina-sjaj {
    from { background-position: -140% 0; }
    to { background-position: 240% 0; }
}
.godina-2066 {
    background: linear-gradient(105deg,
        var(--zlato) 42%, #ffe9b8 50%, var(--zlato) 58%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: godina-sjaj 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .godina-2066 { animation: none; background-position: 0 0; }
}

.podnaslov {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 3.5vw, 1.85rem);
    margin: 2rem 0 0;
    color: #cfe4ee;
}
.podnaslov strong { color: #fff; }

.uvod {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    margin: 1.5rem 0 0;
    color: #9fc2d3;
}

.mala-napomena { font-size: 0.85rem; color: var(--tinta-blaga); }
/* Na tamnim sekcijama blaga tinta nestane u pozadini; ista obitelj prigušenih
   plavih kojom se služe i potpisi grafova. */
.sekcija-tamna .mala-napomena { color: #7ea2b4; }

.skrol-mig {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    width: 28px; height: 46px; border: 2px solid #4d7c92; border-radius: 14px; z-index: 1;
}
.skrol-mig span {
    display: block; width: 4px; height: 8px; border-radius: 2px;
    background: var(--zlato); margin: 8px auto 0;
    animation: mig 1.8s ease-in-out infinite;
}
@keyframes mig { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(14px); opacity: 0.2; } }

/* ------------------------------ SEKCIJE ------------------------------ */
.sekcija { padding: clamp(4rem, 12vw, 9rem) 0; }
.sekcija-tamna { background: var(--more-tamno); color: var(--kamen); }
.sekcija-tamna h2, .sekcija-tamna h3 { color: #fff; }
.sekcija-tamna .vodeci { color: #b9d2de; }

.oznaka-sekcije {
    text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.72rem;
    color: var(--koral); margin: 0 0 1rem;
}
.sekcija h2 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 1.5rem; max-width: 20ch; }
/* Dugačak naslov s dva imena lomio se na TRI retka jer 20ch reže prije zareza.
   Malo šire i s balansiranim lomom stane u dva, a `balance` sam bira mjesto pa
   ne treba tvrdi <br> koji bi na mobitelu ispao krivo. */
.sekcija h2.naslov-sirok { max-width: 30ch; text-wrap: balance; }
.vodeci { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 62ch; color: var(--tinta-blaga); margin: 0 0 3rem; }
.vodeci strong { color: inherit; font-weight: 700; }
.sekcija-tamna .vodeci strong { color: #fff; }

/* ------------------------------ KARTICE ------------------------------ */
.kartice { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.kartica {
    background: #fff;
    border: 1px solid var(--kamen-tamni);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.kartica h3 { margin: 0.25rem 0 0.75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-blaga); font-family: var(--sans); }
.kartica p { margin: 0 0 0.5rem; font-size: 0.95rem; }

/* Ove dvije dolaze poslije .kartica p i nose tip u selektoru — inače bi ih
   .kartica p nadjačao specifičnošću (0,1,1 protiv 0,1,0). */
p.kartica-broj {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-variant-numeric: tabular-nums;
    margin: 0; color: var(--more);
}
p.izvor { font-size: 0.75rem; color: #8b9aa3; margin: 0.75rem 0 0; }

/* Fusnota: šala ispod tvrdnje, pa mora biti tiša od kartica iznad sebe.
   Zvjezdica u tekstu i zvjezdica ispod vežu se u oba smjera. */
p.fusnota { font-size: 0.8rem; color: #8b9aa3; margin: 2.5rem 0 0; max-width: 62ch; }
p.fusnota a, .fusnota-veza { color: inherit; text-decoration: none; }
.fusnota-veza { font-size: 0.7em; vertical-align: super; padding: 0 0.15em; }
p.fusnota a:hover, .fusnota-veza:hover { text-decoration: underline; }

/* ------------------------------ OBALA ------------------------------ */
/* SVG pravila su SVA vezana uz #grafika-obale. Bez toga se `.obala-crta` iz ove
   grafike i `.obala-crta` s karte pruge (obalna linija s OSM-a) gađaju istim
   imenom, a pobjeđuje ono što je kasnije u datoteci — pa je ova crta ispala
   tanka i siva. Isto ime, dva značenja: opseg to rješava trajno. */
.obala-grafika { margin: 0 0 3rem; }
#grafika-obale { width: 100%; height: auto; display: block; }

/* Kopno i more moraju biti dvije jasno različite plohe: kopno je krš, tamna
   kamena zelenkasta; more je plavo i svjetlije od sekcije (--more-tamno), s
   valićima po pučini. Obalna crta je tanka — prava obala ima otoke i uvale, i
   debela crta bi ih pretvorila u mrlje. */
#grafika-obale .obala-kopno { fill: #152a2c; }
#grafika-obale .obala-more { fill: #0e4560; }
#grafika-obale .obala-val { fill: none; stroke: #4a95b8; stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
/* Susjedni redovi valića ljuljaju se u protufazi: sporo, ravnomjerno, bez skokova. */
#grafika-obale .obala-valovi { animation: obala-ljulja 8s ease-in-out infinite; }
#grafika-obale .obala-valovi-b { animation-delay: -4s; }
@keyframes obala-ljulja {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(6px, 1.5px); }
}
#grafika-obale .obala-crta {
    fill: none; stroke: var(--zelena-obala); stroke-width: 2.2; stroke-linejoin: round;
}

/* Puls je DRUGA kopija iste crte ispod prve: širi se i blijedi, pa obala diše,
   a sama crta ostaje oštra. Ista boja kao crta — inače puls odaje da su dvije. */
#grafika-obale .obala-puls {
    fill: none; stroke: var(--zelena-obala); stroke-width: 2; stroke-linejoin: round;
    animation: obala-diha 3.2s ease-out infinite;
}
@keyframes obala-diha {
    0% { stroke-width: 2; opacity: 0.4; }
    75% { stroke-width: 12; opacity: 0; }
    100% { stroke-width: 12; opacity: 0; }
}

#grafika-obale .obala-strelica { fill: none; stroke: #46708a; stroke-width: 1.8; }
#grafika-obale .obala-vrh {
    fill: none; stroke: #46708a; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}

#grafika-obale .obala-covjek {
    fill: #dcecf5;
    animation: obala-putuje 3.4s linear infinite;
}
@keyframes obala-putuje {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 0; }
}

#grafika-obale .obala-oznaka {
    fill: #8fb3c4; font-family: var(--sans); font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.18em;
}
#grafika-obale .obala-brojka { fill: #fff; font-family: var(--serif); font-size: 42px; }
#grafika-obale .obala-brojka-more { fill: var(--zlato); }
#grafika-obale .obala-omjer {
    fill: #8fb3c4; font-family: var(--sans); font-size: 16px; letter-spacing: 0.04em;
}

#grafika-obale .obala-sibenik { fill: #fff; stroke: var(--zlato); stroke-width: 3; }
#grafika-obale .obala-sibenik-ime {
    fill: #fff; font-family: var(--sans); font-size: 17px;
    paint-order: stroke; stroke: var(--more-tamno); stroke-width: 4px;
}


.sekcija-obala .mala-napomena { color: #57808f; max-width: 62ch; }

/* Bez pokreta: obala stoji, more se ne ljulja, ljudi ne putuju. */
.bez-pokreta #grafika-obale .obala-puls,
.bez-pokreta #grafika-obale .obala-valovi,
.bez-pokreta #grafika-obale .obala-covjek { animation: none; }
.bez-pokreta #grafika-obale .obala-puls { opacity: 0.18; stroke-width: 6; }
@media (prefers-reduced-motion: reduce) {
    #grafika-obale .obala-puls, #grafika-obale .obala-valovi, #grafika-obale .obala-covjek { animation: none; }
    #grafika-obale .obala-puls { opacity: 0.18; stroke-width: 6; }
}

@media (max-width: 720px) {
    /* SVG se na 390 px stisne na ~0,35 svoje širine, pa se i slova stisnu s
       njim: 42 jedinice postanu 15 px, a 15 jedinica 5 px — nečitljivo. Ovdje
       su pisane tako da NAKON stiskanja ispadnu oko 20 odnosno 10 px. */
    #grafika-obale .obala-brojka { font-size: 48px; }
    #grafika-obale .obala-oznaka { font-size: 22px; letter-spacing: 0.12em; }
    #grafika-obale .obala-omjer { font-size: 24px; }
    #grafika-obale .obala-sibenik-ime { font-size: 24px; }
    #grafika-obale .obala-sibenik { r: 10; }
}

/* ------------------------------ CITAT ------------------------------ */
.citat {
    margin: 0 0 4rem;
    padding: 0 0 0 1.5rem;
    border-left: 3px solid var(--zlato);
    max-width: 40ch;
}
.citat p { font-family: var(--serif); font-size: clamp(1.35rem, 3.6vw, 2rem); line-height: 1.35; margin: 0; }
.citat footer { margin-top: 1rem; color: var(--zlato); font-size: 1.1rem; font-family: var(--serif); }

.dvostupac { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dvostupac h3 { font-size: 1.5rem; margin: 0 0 0.75rem; }
.dvostupac p { margin: 0; color: #b9d2de; }

/* ------------------------------ PRESEDANI ------------------------------ */
.presedani { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.presedan { border-top: 3px solid var(--kamen-tamni); padding-top: 1.5rem; }
.presedan h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.presedan-brojka {
    font-family: var(--serif); font-size: 2rem; color: var(--more); margin: 0 0 1rem; line-height: 1.1;
}
.presedan-brojka span { display: block; font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-blaga); }

/* ------------------------------ SHEMA ------------------------------ */
.shema { margin: 0 0 3.5rem; }
.shema svg { width: 100%; height: auto; display: block; }
.pruga { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pruga-v { stroke: var(--zlato); }
.pruga-s { stroke: var(--koral); }
.pruga-z { stroke: var(--more-svijetlo); }
.postaja circle { fill: var(--more-tamno); stroke: #fff; stroke-width: 3; }
.postaja text { fill: #b9d2de; font-family: var(--sans); font-size: 13px; text-anchor: middle; }
.postaja-cvor circle { fill: #fff; stroke: var(--koral); stroke-width: 5; }
.postaja-cvor text { fill: #fff; font-size: 17px; letter-spacing: 0.14em; font-weight: 700; }
.postaja-kraj circle { fill: #fff; }
.postaja-kraj text { fill: #fff; font-weight: 600; }
.shema figcaption { font-size: 0.85rem; color: #7ea2b4; margin-top: 1rem; }

/* crtanje pruge kad shema uđe u vidno polje */
.shema .pruga { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.shema.vidljiv .pruga { transition: stroke-dashoffset 1.6s ease-out; stroke-dashoffset: 0; }
.shema .postaja { opacity: 0; }
.shema.vidljiv .postaja { transition: opacity 0.5s ease-out 0.9s; opacity: 1; }

/* ------------------------------ GRADNJA (karta) ------------------------------ */
.sekcija-gradnja { padding-bottom: 0; }

/* Visina svitka = koliko skrola troše četiri faze; karta je unutra ljepljiva. */
.gradnja-svitak { height: 480vh; }
.gradnja-ljepljivo {
    position: sticky; top: 0; height: 100svh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
#karta-pruge {
    width: min(100%, 1100px); height: 100%;
    display: block;
}

/* Ograničeno na kartu pruge: `.obala-crta` je i ime linije u grafici obale
   (druga sekcija, druga debljina). Golo pravilo bi je prepisalo. */
#karta-pruge .obala-crta { fill: none; stroke: #2a5468; stroke-width: 1.2; }

.pruga-podloga {
    fill: none; stroke: #4a6b7c; stroke-width: 2.5;
    stroke-dasharray: 7 5;
}
.pruga-krak { fill: none; stroke-width: 5; stroke-linecap: round; }
path.pruga-koral { stroke: var(--koral); }
path.pruga-zlato { stroke: var(--zlato); }
path.pruga-more { stroke: var(--more-svijetlo); }
.pruga-krak.status-predlozena { stroke-dasharray: none; }  /* dashoffset upravlja otkrivanjem */

.postaja-karta { opacity: 0; transition: opacity 0.4s ease-out; }
.postaja-karta.vidljiva { opacity: 1; }
.postaja-karta circle { fill: var(--more-tamno); stroke: #fff; stroke-width: 2; }
.postaja-karta.predlozena circle { fill: #fff; stroke: var(--more-tamno); }
.postaja-karta text {
    fill: #cfe4ee; font-family: var(--sans); font-size: 13px;
    paint-order: stroke; stroke: var(--more-tamno); stroke-width: 3px;
}

circle.vlak { stroke: #fff; stroke-width: 2; }
circle.vlak.pruga-koral { fill: var(--koral); }
circle.vlak.pruga-zlato { fill: var(--zlato); }
circle.vlak.pruga-more { fill: var(--more-svijetlo); }

.gradnja-natpis {
    position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(3.5rem, 8vh, 5rem);
    max-width: 24rem;
    background: rgba(7, 30, 42, 0.88);
    border-left: 3px solid var(--zlato);
    padding: 1rem 1.25rem;
    backdrop-filter: blur(4px);
}
.natpis-godina { font-family: var(--serif); font-size: 2rem; color: var(--zlato); margin: 0; }
.natpis-tekst { margin: 0.4rem 0 0; font-size: 0.95rem; color: #cfe4ee; }
.natpis-km { margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; font-size: 0.85rem; color: #8fb3c4; text-transform: uppercase; letter-spacing: 0.08em; }
.natpis-km:empty { display: none; }

.gradnja-legenda {
    position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 1rem;
    margin: 0; font-size: 0.72rem; color: #57808f;
}

/* Bez pokreta: nema ljepljivog svitka ni tranzicija — karta stane kao obična
   slika s gotovom mrežom (mapa-pruge.js je nacrta dovršenu). */
.bez-pokreta .gradnja-svitak { height: auto; }
.bez-pokreta .gradnja-ljepljivo { position: static; height: min(80svh, 700px); }
.bez-pokreta .postaja-karta { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .gradnja-svitak { height: auto; }
    .gradnja-ljepljivo { position: static; height: min(80svh, 700px); }
    .postaja-karta { transition: none; }
}

@media (max-width: 720px) {
    .postaja-karta text { font-size: 16px; }
    .postaja-karta.guzva text { display: none; }
    .gradnja-natpis { left: 0.75rem; right: 0.75rem; bottom: 2.75rem; max-width: none; padding: 0.75rem 1rem; }
    .natpis-godina { font-size: 1.5rem; }
    .gradnja-legenda { left: 0.75rem; right: 0.75rem; text-align: left; }
}

/* ------------------------------ RAST (karta plana) ------------------------------ */
/* Isti mehanizam kao gradnja — ljepljivi kadar u dugom svitku — ali podijeljen:
   karta lijevo, kumulativne brojke desno. Karta se puni epohu po epohu. */
.sekcija-plan { padding-bottom: 0; }

.plan-svitak { height: 420vh; }
.plan-ljepljivo {
    position: sticky; top: 0; height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1rem, 4vh, 2.5rem) var(--razmak);
    overflow: hidden;
}
.plan-karta { min-width: 0; height: 100%; display: flex; align-items: center; }
#karta-plana { width: 100%; height: 100%; display: block; }

.plan-obala { fill: none; stroke: #2a5468; stroke-width: 1.4; }
.plan-pruga { fill: none; stroke: #4a6b7c; stroke-width: 3; stroke-dasharray: 8 6; }
.plan-postaja { fill: #fff; stroke: var(--more-tamno); stroke-width: 2; }
/* Ime postaje nosi vlastitu podlogu jer se crta preko punih blokova; bez nje se
   „Šibenik Most" gubio u zlatnom bloku ispod sebe. */
.plan-postaje { pointer-events: none; }
.plan-postaja-skup { pointer-events: none; }
.plan-postaja-pilula {
    fill: rgba(7, 30, 42, 0.88);
    stroke: #4d7c92;
    stroke-width: 1;
}
.plan-postaja-ime {
    fill: #cfe4ee; font-family: var(--sans); font-size: 15px;
    paint-order: stroke; stroke: var(--more-tamno); stroke-width: 3px;
}

/* Sve nacrtano počinje nevidljivo; klasa .vidljiv je jedini prekidač. */
.plan-ulica, .plan-blok, .plan-otvoreno {
    opacity: 0;
    transition: opacity 0.35s ease-out;
}
.plan-ulica.vidljiv, .plan-blok.vidljiv, .plan-otvoreno.vidljiv { opacity: 1; }

.plan-ulica { fill: none; stroke: #5d8496; stroke-width: 2.6; stroke-linecap: round; }
.plan-blok { fill: var(--zlato); fill-opacity: 0.82; stroke: #f0cf94; stroke-width: 0.5; }
.plan-otvoreno { fill: #2f8f63; fill-opacity: 0.7; stroke: #7fd6ab; stroke-width: 0.5; }

.plan-brojke {
    min-width: 0;
    background: rgba(7, 30, 42, 0.72);
    border-left: 3px solid var(--zlato);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    backdrop-filter: blur(4px);
}
.plan-godina {
    font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--zlato); margin: 0; line-height: 1;
}
.plan-trag {
    margin: 0.5rem 0 0; font-size: 0.78rem; color: #8fb3c4;
    text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.5;
}
.plan-trag:empty { display: none; }

.plan-popis { display: grid; gap: 0.85rem; margin: 1.4rem 0 0; }
.plan-popis > div { display: flex; flex-direction: column; gap: 0.1rem; }
.plan-popis dt {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: #8fb3c4;
}
.plan-popis dd {
    margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; color: #fff;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}

.plan-koraci {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.65rem;
    padding: 0; margin: 1.4rem 0 0;
    font-size: 0.8rem; color: #45707f; font-variant-numeric: tabular-nums;
}
.plan-koraci li.gotova { color: #8fb3c4; }
.plan-koraci li.aktivna { color: var(--zlato); font-weight: 700; }

.plan-izvor { margin: 1.1rem 0 0; font-size: 0.7rem; line-height: 1.55; color: #57808f; }
.plan-izvor:empty { display: none; }

/* Bez pokreta i na uskom ekranu: nema ljepljivog svitka — karta i brojke stanu
   jedna ispod druge, s planom nacrtanim do kraja (karta-plana.js ga dovrši). */
.bez-pokreta .plan-svitak { height: auto; }
.bez-pokreta .plan-ljepljivo {
    position: static; height: auto; grid-template-columns: 1fr;
}
.bez-pokreta .plan-karta { height: auto; }
.bez-pokreta #karta-plana { height: auto; }
.bez-pokreta .plan-ulica,
.bez-pokreta .plan-blok,
.bez-pokreta .plan-otvoreno { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .plan-svitak { height: auto; }
    .plan-ljepljivo { position: static; height: auto; grid-template-columns: 1fr; }
    .plan-karta { height: auto; }
    #karta-plana { height: auto; }
    .plan-ulica, .plan-blok, .plan-otvoreno { transition: none; }
}

@media (max-width: 900px) {
    .plan-svitak { height: auto; }
    .plan-ljepljivo {
        position: static; height: auto; grid-template-columns: 1fr;
        gap: 1.5rem; padding: 1.5rem var(--razmak) 3rem;
    }
    .plan-karta { height: auto; }
    #karta-plana { height: auto; }
    .plan-postaja-ime { font-size: 22px; }
}

/* ------------------------------ KRAKOVI ------------------------------ */
.krakovi { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.krak p.krak-oznaka {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: grid; place-items: center; margin: 0 0 1rem;
    font-weight: 700; background: #fff; color: var(--more-tamno);
}
.krak h3 { font-size: 1.35rem; margin: 0 0 0.35rem; }
.krak p { color: #b9d2de; margin: 0; }
.krak p.krak-km { font-family: var(--serif); font-size: 1.5rem; color: var(--zlato); margin: 0 0 0.75rem; }
.krak-km span { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #7ea2b4; }

/* ------------------------------ KABINA (video) ------------------------------ */
.kabina { margin: 3.5rem 0 0; }
.kabina video,
.kabina img {
    width: 100%; height: auto; display: block;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.kabina figcaption { font-size: 0.85rem; color: #7ea2b4; margin-top: 1rem; max-width: 62ch; }

/* ------------------------------ GUMBI ------------------------------ */
.poveznica-blok { margin: 3.5rem 0 0; }
.poveznica-sredina { text-align: center; }
.gumb {
    display: inline-block; text-decoration: none;
    background: var(--koral); color: #fff;
    padding: 0.9rem 1.5rem; border-radius: 3px; font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease;
}
.gumb:hover { background: #c0442d; transform: translateY(-2px); }
.gumb-obrnuti { background: var(--more); }
.gumb-obrnuti:hover { background: var(--more-tamno); }

/* ------------------------------ PRAVILA ------------------------------ */
.pravila { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pravilo { background: #fff; border: 1px solid var(--kamen-tamni); border-radius: 4px; padding: 1.75rem 1.5rem; }
.pravilo h3 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.pravilo p { margin: 0; font-size: 0.95rem; color: var(--tinta-blaga); }

/* ------------------------------ KALKULATOR ------------------------------ */
.kalkulator {
    display: grid; gap: 2.5rem;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.2fr);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px; padding: 2rem;
}
.kalkulator-kontrole label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #8fb3c4;
    margin: 1.5rem 0 0.5rem;
}
.kalkulator-kontrole label:first-child { margin-top: 0; }
.kalkulator-kontrole output { font-family: var(--serif); font-size: 1.35rem; color: var(--zlato); letter-spacing: 0; text-transform: none; }
.kalkulator-kontrole input[type="range"] { width: 100%; accent-color: var(--koral); }

.kalkulator-rezultat { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0; }
.kalkulator-rezultat dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #8fb3c4; }
.kalkulator-rezultat dd { margin: 0.25rem 0 0; font-family: var(--serif); font-size: 1.7rem; color: #fff; font-variant-numeric: tabular-nums; }

/* ------------------------------ VREMENSKA CRTA ------------------------------ */
.crta { list-style: none; margin: 0; padding: 0; position: relative; }
.crta::before {
    content: ""; position: absolute; left: 7px; top: 0.5rem; bottom: 0.5rem;
    width: 2px; background: var(--kamen-tamni);
}
.crta li { position: relative; padding: 0 0 2.5rem 2.75rem; }
.crta li::before {
    content: ""; position: absolute; left: 0; top: 0.45rem;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--kamen); border: 3px solid var(--more);
}
.crta li.buducnost::before { border-color: var(--koral); background: var(--koral); }
.crta-godina { font-family: var(--serif); font-size: 1.6rem; color: var(--more); margin: 0; line-height: 1.1; }
.crta li.buducnost .crta-godina { color: var(--koral); }
.crta-naslov { margin: 0.15rem 0 0.4rem; font-size: 1.05rem; font-weight: 700; }
.crta-tekst { margin: 0; color: var(--tinta-blaga); max-width: 60ch; }

/* ------------------------------ KRAJ ------------------------------ */
.sekcija-kraj { background: var(--more); color: var(--kamen); text-align: center; }
.sekcija-kraj h2 { color: #fff; margin-left: auto; margin-right: auto; }
.sekcija-kraj .vodeci { margin-left: auto; margin-right: auto; color: #cfe4ee; }
.poveznice-kraj { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin: 2.5rem 0 0; }
.poveznice-kraj a { color: var(--zlato); text-decoration: none; border-bottom: 1px solid rgba(217, 164, 65, 0.4); padding-bottom: 2px; }
.poveznice-kraj a:hover { border-bottom-color: var(--zlato); }

/* ------------------------------ PODNOŽJE ------------------------------ */
.podnozje { background: var(--kamen-tamni); padding: 3rem 0; font-size: 0.85rem; color: #5c6a72; }
.podnozje h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; font-family: var(--sans); margin: 0 0 1rem; }
.podnozje ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.podnozje li { margin-bottom: 0.4rem; }

/* ------------------------------ ANIMACIJA ULASKA ------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--trajanje) ease-out, transform var(--trajanje) cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal.vidljiv { opacity: 1; transform: none; }

/* Kad je pokret smanjen, sve je odmah vidljivo i ništa se ne miče.
   Isti prekidač koristi i ?reduceMotion=1 (js/index.js dodaje .bez-pokreta). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .traka-stanovi .dio, .shema .pruga, .shema .postaja { transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    .traka-stanovi .dio { transform: scaleX(1); }
    .shema .pruga { stroke-dashoffset: 0; }
    .shema .postaja { opacity: 1; }
    .skrol-mig span { animation: none; }
}
.bez-pokreta { scroll-behavior: auto; }
.bez-pokreta .reveal, .bez-pokreta .traka-stanovi .dio, .bez-pokreta .shema .pruga, .bez-pokreta .shema .postaja { transition: none !important; }
.bez-pokreta .reveal { opacity: 1; transform: none; }
.bez-pokreta .traka-stanovi .dio { transform: scaleX(1); }
.bez-pokreta .shema .pruga { stroke-dashoffset: 0; }
.bez-pokreta .shema .postaja { opacity: 1; }
.bez-pokreta .skrol-mig span { animation: none; }

/* ------------------------------ MOBITEL ------------------------------ */
@media (max-width: 720px) {
    .kalkulator { grid-template-columns: 1fr; padding: 1.5rem; }
    .traka-stanovi { height: 48px; }
    .traka-stanovi .dio { font-size: 0.6rem; }
    .citat { max-width: none; }
}

@media (max-width: 380px) {
    .traka-stanovi em { display: none; }
    .kalkulator-rezultat dd { font-size: 1.4rem; }
}

/* ------------------------------ FINANCIRANJE ------------------------------ */
/* Cijena pruge naspram proračuna kao dvije trake na istom mjerilu: skuplji kraj
   raspona je puna širina, proračun je crtica uz njega. Udjele (--udio-*) upisuje
   index.js iz PODACI-ja; bez njih trake ostaju prazne, brojke pored su i dalje tu. */
.red-velicine {
    margin: 0 0 2.5rem; padding: 1rem 1.25rem 0.9rem;
    background: #fff; border: 1px solid var(--kamen-tamni); border-radius: 4px;
}
/* Stupac s brojem je FIKSNE širine: obje trake moraju biti na istom mjerilu, a
   „auto" bi kraćem broju dao dužu traku i usporedba bi lagala za koji posto. */
.rv-red {
    display: grid; grid-template-columns: 9.5rem 1fr 11rem; column-gap: 1rem; align-items: center;
    padding: 0.55rem 0;
}
.rv-red + .rv-red { border-top: 1px solid var(--kamen); }
/* Iznos bez imena ne govori ništa: „1,6 – 3,2 mlrd €" jednako je moglo biti prihod, dug ili
   proračun. */
.rv-oznaka {
    margin: 0; font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--tinta-blaga);
}
.rv-traka { position: relative; height: 0.7rem; background: var(--kamen); border-radius: 2px; overflow: hidden; }
.rv-puni { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; width: 0; }
.rv-pruga .rv-puni-max {
    width: calc(var(--udio-pruga-max, 0) * 100%);
    background: repeating-linear-gradient(135deg, rgba(217, 85, 59, 0.45) 0 4px, rgba(217, 85, 59, 0.15) 4px 8px);
}
.rv-pruga .rv-puni-min { width: calc(var(--udio-pruga-min, 0) * 100%); background: var(--koral); }
.rv-proracun .rv-puni { width: calc(var(--udio-proracun, 0) * 100%); min-width: 3px; background: var(--more); }
.rv-broj {
    font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin: 0; color: var(--koral); line-height: 1.05; white-space: nowrap; text-align: right;
}
.rv-proracun .rv-broj { color: var(--more); }
.rv-broj span { font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-blaga); margin-left: 0.25rem; }
.rv-opis { grid-column: 2 / -1; margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--tinta-blaga); }
.rv-zakljucak {
    margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--kamen-tamni);
    font-family: var(--serif); font-size: 1.05rem; color: var(--tinta);
}
.rv-zakljucak strong { color: var(--koral); }

.dzepovi { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 4rem; }
.dzep { background: #fff; border: 1px solid var(--kamen-tamni); border-radius: 4px; padding: 1.5rem; }
.dzep p.dzep-oznaka {
    width: 2rem; height: 2rem; border-radius: 50%; margin: 0 0 0.75rem;
    display: grid; place-items: center; font-weight: 700;
    background: var(--more); color: #fff;
}
.dzep h3 { margin: 0 0 0.2rem; font-size: 1.25rem; }
.dzep p.dzep-tko { margin: 0 0 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--koral); }
.dzep p { margin: 0; font-size: 0.95rem; color: var(--tinta-blaga); }

.podnaslov-bloka { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 1.25rem; }

.tablica-omot { overflow-x: auto; margin: 0 0 4rem; }
.tablica-poluge { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 34rem; }
.tablica-poluge th {
    text-align: left; font-family: var(--sans); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-blaga);
    border-bottom: 2px solid var(--kamen-tamni); padding: 0 0.75rem 0.6rem;
}
.tablica-poluge td { border-bottom: 1px solid var(--kamen-tamni); padding: 0.9rem 0.75rem; vertical-align: top; }
.tablica-poluge td span { display: block; font-size: 0.8rem; color: var(--tinta-blaga); margin-top: 0.2rem; }
.da-ne { font-weight: 600; }
.da-ne.ne { color: var(--koral); }
.da-ne.mozda { color: #a1770f; }
.da-ne.da { color: #1f7a4d; }
.da-ne span { font-weight: 400; }

.zamrznuto {
    background: var(--more-tamno); color: var(--kamen);
    border-radius: 6px; padding: clamp(1.5rem, 4vw, 2.5rem); margin: 0 0 4rem;
}
.zamrznuto h3 { color: #fff; font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0 0 1rem; }
.zamrznuto p { color: #b9d2de; max-width: 62ch; }
.zamrznuto strong { color: #fff; }
.graf-omot { margin: 2rem 0 1rem; }
#graf-stropa { width: 100%; height: auto; display: block; }
.graf-omot figcaption { font-size: 0.78rem; color: #7ea2b4; margin-top: 0.75rem; }
.graf-omot code { font-size: 0.9em; color: #9fc2d3; }
.zamrznuto .poanta {
    font-family: var(--serif); font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    color: var(--zlato); border-left: 3px solid var(--zlato);
    padding-left: 1rem; margin: 1.5rem 0 0;
}

.graf-linija { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.graf-troskovi { stroke: var(--koral); }
.graf-strop { stroke: var(--zlato); stroke-dasharray: 6 5; }
.graf-realno { stroke: #7ea2b4; stroke-width: 2; }
.graf-os { stroke: #2a5468; stroke-width: 1; }
.graf-oznaka { fill: #8fb3c4; font-family: var(--sans); font-size: 13px; }
.graf-legenda { fill: #cfe4ee; font-family: var(--sans); font-size: 14px; }
.graf-vrijednost { font-family: var(--serif); font-size: 17px; }
.graf-vrijednost.troskovi { fill: var(--koral); }
.graf-vrijednost.strop { fill: var(--zlato); }
.graf-vrijednost.realno { fill: #7ea2b4; }

.kartice-financije .kartica-broj { color: var(--koral); }

.citat-siroki { max-width: 58ch; margin-top: 3.5rem; }
.protuteza {
    margin-top: 3.5rem; padding: 1.5rem;
    border: 1px solid rgba(217, 85, 59, 0.5); border-radius: 4px;
    background: rgba(217, 85, 59, 0.08);
}
.protuteza h3 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.protuteza p { margin: 0; color: #cfe4ee; max-width: 62ch; }

@media (max-width: 720px) {
    .rv-red { grid-template-columns: 1fr 9rem; row-gap: 0.3rem; }
    .rv-oznaka { grid-column: 1 / -1; }
    .rv-opis { grid-column: 1 / -1; }
    .tablica-poluge { font-size: 0.85rem; }
}


/* Valovi s morske strane obale na karti plana: dovoljno da se prazan prostor
   pročita kao more, a tiši od pruge i blokova koji su ovdje sadržaj. */
.plan-more { pointer-events: none; }
.plan-val { fill: none; stroke: #35657c; stroke-width: 1.4; stroke-linecap: round; opacity: 0.7; }