/* Projekt 41 — stil.
 *
 * Bez Tailwinda i bez CDN-a: svaki vanjski request odaje IP korisnika trecoj
 * strani, a to je u ovoj aplikaciji nedopustivo (CLAUDE.md). Fontovi su od
 * 25.08.2026. web fontovi, ali SERVIRAMO IH SAMI iz `fonti/` — isti postupak
 * koji koristi i portal muzevnibudite.com. Google Fonts se i dalje ne zove.
 *
 * Tipografija je usuglasena s redizajniranim portalom (mjerenje:
 * docs/2026-08-25-branding-portal.md): Libre Baskerville za naslove, Source
 * Sans 3 za tekst. Preuzeta je SAMO tipografija — paleta nije. Tamna podloga i
 * cijan ostaju jer imaju svoj razlog (nize), a portal nosi drugi logotip.
 *
 * Citanje je uvecer, na telefonu, cesto u polumraku — zato tamna podloga,
 * topla nebijela boja teksta, velik prored i sirina retka ~65 znakova.
 * Sudionici su 20-60+ god., dio njih nije digitalno vjest: velika tipografija,
 * vidljivi gumbi, nikakvih skrivenih gesti.
 */

/* ---------- fontovi ----------
 * Varijabilni woff2 iz @fontsource-variable (obje obitelji SIL OFL 1.1, kopija
 * licence je u fonti/OFL.txt). Dva subseta po rezu nisu visak: HRVATSKA
 * DIJAKRITIKA (c c d s z) zivi iskljucivo u `latin-ext`. Provjereno citanjem
 * cmap tablica — `latin` datoteka nema nijedan od tih glifova. Tko ikad bude
 * mijenjao fontove: bez latin-ext naslov se raspada usred rijeci.
 *
 * `font-display: swap` — tekst se vidi odmah u fallbacku i preskoci kad font
 * stigne. Radije skok nego prazna stranica; ovo se cita na losoj vezi.
 */
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonti/libre-baskerville-latin-wght-normal.9e3a6b8702fd.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonti/libre-baskerville-latin-ext-wght-normal.87e83407f959.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonti/libre-baskerville-latin-wght-italic.6c0003cd007c.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonti/libre-baskerville-latin-ext-wght-italic.c29ceef2f81e.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonti/source-sans-3-latin-wght-normal.30164609c163.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonti/source-sans-3-latin-ext-wght-normal.c6ba61588d7d.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonti/source-sans-3-latin-wght-italic.71c881907d08.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonti/source-sans-3-latin-ext-wght-italic.5358bd4fb16e.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --pozadina: #14161a;
  --povrsina: #1c1f25;
  --povrsina-2: #23272f;
  --tekst: #e8e4dc;
  --tekst-tiho: #9aa0ab;
  /* Akcent je cijan IZ LOGOTIPA (uzorkovan iz pozitiva: #2eb0d2 je najcesca
   * zasicena boja u datoteci). Do 17.08.2026. je ovdje bila zlatna #c9a227 —
   * Matijin zahtjev je da stranica nosi boju logotipa, ne vlastitu.
   * Kontrast prema pozadini: 7.12:1 (bio 7.49:1), dakle AAA i dalje stoji. */
  --akcent: #2eb0d2;
  /* Hover gumba i obrubi. Tekst na gumbu je --pozadina, pa je i ovdje mjeren:
   * 4.58:1 (zlatna --akcent-tamni je davala 4.00:1 i bila ispod AA). */
  --akcent-tamni: #1d8ba8;
  --obrub: #2e333c;
  --greska: #e0796b;
  --uspjeh: #7fb069;
  --radijus: 10px;
  --mjera: 34rem;            /* ~65 znakova */
  /* Fallbackovi su vazni: dok se woff2 ne ucita (ili ako padne), Georgia je
   * jedini serif koji na svim uredajima izgleda blizu Baskervilleu. */
  --font-naslov: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-tekst: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font-family: var(--font-tekst);
  /* Portal vozi 16px/1.5. Mi ostajemo na 17px/1.7 — publika je 20-60+, cita se
   * navecer na telefonu. Uskladena je tipografija, ne mjerenje udobnosti. */
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- pristupacnost ---------- */
.preskoci {
  position: absolute; left: -9999px;
  background: var(--akcent); color: #14161a; padding: .6rem 1rem; z-index: 10;
}
.preskoci:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* ---------- vrh / dno ---------- */
.vrh {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--obrub);
  background: var(--povrsina);
}
/* Logo je od 06.08.2026. prava datoteka (dizajner Petar Kresimir Cavar), a ne
 * vise inline SVG s `currentColor`: ima cijan, srebrni stit i sjenu, sto se
 * jednom bojom ne da nacrtati. Varijantu bira <picture> po temi ureaja. */
.marka {
  display: inline-flex; align-items: center;
  color: var(--akcent); text-decoration: none;
}
.marka-logo { display: block; height: 1.9rem; width: auto; }
.vrh nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vrh nav a { color: var(--tekst); text-decoration: none; }
.vrh nav a:hover { color: var(--akcent); }
.nadimak {
  color: var(--tekst-tiho); font-size: .9rem;
  padding: .15rem .6rem; border: 1px solid var(--obrub); border-radius: 99px;
}
.uredno { display: inline; margin: 0; }

.dno {
  margin-top: 4rem; padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--obrub);
  color: var(--tekst-tiho); font-size: .9rem;
}
.dno p { max-width: var(--mjera); margin: .35rem auto; text-align: center; }

/* ---------- glavni okvir ---------- */
main { padding: 2rem 1.25rem; }
/* Specificnost 0-0-2 namjerno: `h1 { margin: ... }` dolazi kasnije u fileu i s
 * 0-0-1 bi inace pregazio `margin-inline: auto`, pa bi se sadrzaj zalijepio uz
 * lijevi rub na stranicama gdje je naslov DIREKTNO dijete maina (npr. /dani/).
 * Na /dan/N/ se to nije vidjelo jer je tamo h1 unutar <article> koji se centrira. */
main > :is(h1, h2, p, ol, ul, section, article, nav, form, div) {
  max-width: var(--mjera);
  margin-inline: auto;
}

/* Naslovi su serif, zbijeni — to je jedini potez preuzet s portala doslovno
 * (mjereno: line-height 1.1, letter-spacing -0.025em). Kod nas je 1.15/-0.02em
 * jer su nase velicine manje, a na malom stupnju prezbijen serif tesko se cita.
 * Libre Baskerville ima velik x-height, pa iste rem vrijednosti djeluju krupnije
 * nego prije — zato se brojke nisu dizale. */
h1, h2, h3, h4 {
  font-family: var(--font-naslov);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
h1 { font-size: 1.65rem; margin: 0 0 .75rem; }
/* Do 25.08.2026. je h2 bio tiha uppercase oznaka u sivoj. To je bila zamjena za
 * naslov jer naslova nije bilo. Sada je h2 pravi naslov, a ulogu oznake nosi
 * .nadnaslov — ista podjela koju portal koristi. */
h2 { font-size: 1.3rem; color: var(--tekst); margin: 2rem 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--akcent); }

/* Portalov nadnaslov je 12px/800/0.12em uppercase u zlatnoj. Ovdje isti potez,
 * ali u nasem cijanu — boja je jedino sto se namjerno NE preuzima. */
.nadnaslov { color: var(--akcent); font-size: .85rem; font-weight: 800;
             letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }
.vodeci { font-size: 1.15rem; color: var(--tekst); }
.tiho { color: var(--tekst-tiho); font-size: .92rem; }

/* ---------- gumbi ---------- */
.gumb {
  display: inline-block; padding: .7rem 1.4rem;
  background: var(--akcent); color: #14161a;
  border: 1px solid var(--akcent); border-radius: var(--radijus);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.gumb:hover { background: var(--akcent-tamni); border-color: var(--akcent-tamni); }
.gumb.obrub { background: transparent; color: var(--akcent); }
.gumb.malen { padding: .35rem .8rem; font-size: .9rem; }
.veza { background: none; border: 0; color: var(--akcent); cursor: pointer;
        font: inherit; padding: 0; text-decoration: underline; }
/* `auto`, ne 0 — ista zamka kao kod .popis-dana: na /svjedocanstva/ je ovaj
 * blok DIREKTNO dijete maina, pa bi ga skraceni margin s nulama odlijepio od
 * stupca teksta i zalijepio uz lijevi rub. */
.akcije {
  display: flex; gap: .75rem; flex-wrap: wrap;
  margin: 1.5rem auto; max-width: var(--mjera);
}

/* ---------- poruke i greske ---------- */
.poruke { list-style: none; max-width: var(--mjera); margin: 1rem auto 0;
          padding: 0 1.25rem; }
.poruke li { padding: .7rem 1rem; border-radius: var(--radijus);
             border: 1px solid var(--obrub); background: var(--povrsina); }
.poruke li.success { border-color: var(--uspjeh); }
.poruke li.error { border-color: var(--greska); }
.greske { list-style: none; padding: 0; margin: .4rem 0 0; color: var(--greska);
          font-size: .9rem; }

/* ---------- pocetna ---------- */
.uvodna { text-align: center; }
.uvodna .vodeci, .uvodna .ciklus-info { max-width: var(--mjera); margin-inline: auto; }
.uvodna .akcije { justify-content: center; }
.ciklus-info { padding: 1rem; border: 1px solid var(--obrub);
               border-radius: var(--radijus); background: var(--povrsina); }
.kartice { display: grid; gap: 1rem; margin-top: 2.5rem; text-align: left; }
.kartica { padding: 1.1rem 1.25rem; background: var(--povrsina);
           border: 1px solid var(--obrub); border-radius: var(--radijus); }
.kartica h2 { margin-top: 0; color: var(--akcent); font-size: 1.05rem; }
.kartica p { margin: 0; color: var(--tekst-tiho); }

/* ---------- obrasci ---------- */
.obrazac-stranica { max-width: 26rem; }
.polje { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.polje label { font-weight: 600; font-size: .95rem; }
.pomoc { color: var(--tekst-tiho); font-size: .85rem; }
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; padding: .65rem .8rem;
  background: var(--povrsina-2); color: var(--tekst);
  border: 1px solid var(--obrub); border-radius: var(--radijus);
  font: inherit;
}
textarea { resize: vertical; min-height: 5.5rem; }
input:focus, textarea:focus { border-color: var(--akcent); }
ul.errorlist { list-style: none; padding: 0; margin: .3rem 0 0;
               color: var(--greska); font-size: .9rem; }

/* ---------- popis dana ---------- */
/* `auto` u inline osi, ne 0: skraceni `margin` s nulama gazi `margin-inline:auto`
 * iz `main > :is(...)` jer klasa ima vecu specificnost. Isti propust je vec
 * jednom zalijepio cijeli popis uz lijevi rub. */
.popis-dana {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: var(--mjera);
}
.zaglavlje-cjeline {
  margin: 1.75rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--obrub);
  color: var(--tekst-tiho); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.red-dana {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .2rem; border-bottom: 1px solid var(--obrub);
}
.red-dana a { display: flex; gap: .6rem; align-items: baseline;
              text-decoration: none; color: var(--tekst); flex: 1 1 auto; }
.red-dana a:hover .naslov-dana { color: var(--akcent); }
.red-dana.zatvoren { color: var(--tekst-tiho); }
.oznaka { flex: 0 0 4.5rem; color: var(--akcent); font-variant-numeric: tabular-nums;
          font-size: .9rem; font-weight: 600; }
.oznaka.velika { display: block; flex: none; font-size: .85rem; margin-bottom: .2rem; }
.naslov-dana { flex: 1 1 auto; }
.naslov-dana.zakljucan { color: var(--tekst-tiho); font-style: italic; }
.znak { font-size: .72rem; padding: .1rem .5rem; border-radius: 99px;
        border: 1px solid var(--obrub); color: var(--tekst-tiho); white-space: nowrap; }
.znak.buduci { border-color: var(--akcent-tamni); color: var(--akcent); }
.dim-duhovna { color: #b79bd6; }
.dim-fizicka { color: #7fb069; }
.dim-socijalna { color: #6fa8c9; }
.dim-intelektualna { color: #d6a86f; }

.pregled-traka {
  padding: .6rem 1rem; border: 1px dashed var(--akcent);
  border-radius: var(--radijus); color: var(--akcent); font-size: .9rem;
}

/* ---------- dan ---------- */
.citat {
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  background: var(--povrsina); border-left: 3px solid var(--akcent);
  border-radius: 0 var(--radijus) var(--radijus) 0;
  font-family: var(--font-naslov);
  font-size: 1.1rem; font-style: italic;
}
.odsjek { margin-bottom: 2rem; }
.odsjek.poticaj, .odsjek.molitva {
  padding: 1rem 1.25rem; background: var(--povrsina);
  border: 1px solid var(--obrub); border-radius: var(--radijus);
}
.odsjek.molitva p { font-style: italic; }
.odsjek.molitva h2, .odsjek.poticaj h2 { margin-top: 0; }
ol.pitanja { padding-left: 1.4rem; }
ol.pitanja li { margin-bottom: .6rem; }

.kroz-dane {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--obrub);
  font-size: .95rem;
}

/* ---------- komentari ---------- */
.komentari { margin-top: 3rem; }
.obrazac-komentara { margin: 1rem 0 2rem; }
.obrazac-komentara button { margin-top: .6rem; }
.popis-komentara { list-style: none; padding: 0; margin: 0; }
.komentar { padding: .9rem 1rem; margin-bottom: .75rem;
            background: var(--povrsina); border: 1px solid var(--obrub);
            border-radius: var(--radijus); }
.komentar .meta { display: flex; gap: .6rem; align-items: baseline;
                  margin: 0 0 .35rem; font-size: .85rem; color: var(--tekst-tiho); }
.komentar .meta strong { color: var(--akcent); }
/* Radnje uz komentar (podrska, prijava) idu skupa desno; do R48 je ondje bila
   samo prijava, pa je `margin-left: auto` stajao na samoj formi. */
.komentar .meta .radnje { display: flex; gap: .6rem; align-items: baseline;
                          margin-left: auto; }
/* Broj podrski je oznaka, ne gumb — nema hovera ni kursora. Nula se ne
   ispisuje uopce (vidi dan.html), pa ovaj element postoji tek od prve podrske. */
.komentar .broj-podrski { color: var(--tekst-tiho); font-size: .92rem;
                          white-space: nowrap; }
.komentar .podrzano { color: var(--akcent); font-weight: 600; }
/* Poveznica na upravu (R49) — vidi je samo osoblje, pa je diskretna. */
.uredi-dan { margin: 1.5rem 0 0; text-align: right; }
.komentar .tekst { margin: 0; white-space: pre-wrap; }
.prazno { padding: 1rem 0; }

/* ---------- najave (R19) ---------- */
.popis-najava { list-style: none; padding: 0; margin: 0; }
.najava {
  padding: 1rem 1.25rem; margin-bottom: .9rem;
  background: var(--povrsina); border: 1px solid var(--obrub);
  border-radius: var(--radijus);
}
.najava h3 { margin: .1rem 0 .5rem; font-size: 1.05rem; color: var(--akcent); }
.najava .meta { margin: 0; font-size: .85rem; color: var(--tekst-tiho); }
.najava p:last-child { margin-bottom: 0; }

/* ---------- svjedocanstva (R22) ---------- */
/* `auto` u inline osi, ne 0 — vidi biljesku kod .popis-dana: ovaj popis je
 * DIREKTNO dijete maina, pa skraceni `margin` s nulama pregazi
 * `margin-inline: auto` iz `main > :is(...)` i zalijepi ga uz lijevi rub. */
.popis-svjedocanstava {
  list-style: none; padding: 0;
  margin: 1.5rem auto 0; max-width: var(--mjera);
}
.svjedocanstvo {
  padding: 1.2rem 1.35rem; margin-bottom: 1.1rem;
  background: var(--povrsina); border: 1px solid var(--obrub);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--radijus) var(--radijus) 0;
}
.naslov-svjedocanstva {
  margin: 0 0 .6rem; font-size: 1.1rem; color: var(--akcent);
}
.svjedocanstvo .meta {
  margin: .8rem 0 0; font-size: .88rem; color: var(--tekst-tiho);
  display: flex; gap: .6rem; flex-wrap: wrap;
}
.svjedocanstvo-kratko footer { margin-top: .6rem; font-style: normal; }

/* Obrazac svjedocanstva: privola je odluka, ne sitni tisak — zato ide u okvir
 * i ima label ispod kvacice, a ne pokraj nje kao ostala polja. */
.obrazac-stranica.sire { max-width: var(--mjera); }

/* Tri koraka na /prijave/ (Kruno, 09.09.2026.: „malo pojasniti").
 * Brojevi su tu da se vidi da je otvaranje racuna TRECI korak, a ne prvi —
 * upravo to je nesporazum zbog kojeg stranica postoji. Zato `counter`, a ne
 * obicna lista: broj mora ostati vidljiv i uz naslov koraka u <h2>. */
.koraci { list-style: none; counter-reset: korak; padding: 0; margin: 2rem 0; }
.koraci li {
  counter-increment: korak;
  position: relative; padding-left: 3rem; margin-bottom: 1.6rem;
}
.koraci li::before {
  content: counter(korak);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--akcent); border-radius: 50%;
  color: var(--akcent); font-weight: 700;
}
.koraci h2 { margin: .2rem 0 .3rem; font-size: 1.05rem; }
.koraci p { margin: 0; color: var(--tekst-tiho); }
.upozorenje {
  padding: .8rem 1rem; border: 1px solid var(--akcent-tamni);
  border-radius: var(--radijus); color: var(--tekst-tiho); font-size: .92rem;
}
.polje-privola {
  flex-direction: row-reverse; justify-content: flex-end;
  align-items: flex-start; gap: .6rem;
  padding: .9rem 1rem; background: var(--povrsina-2);
  border: 1px solid var(--obrub); border-radius: var(--radijus);
}
.polje-privola label { font-weight: 400; font-size: .92rem; }
.polje-privola input[type=checkbox] { margin-top: .25rem; flex: 0 0 auto; }
.polje ul { list-style: none; padding: 0; margin: 0; }
.polje ul li { margin-bottom: .3rem; }

/* ---------- forum (R21/R27) ---------- */
/* Ista zamka kao gore: oboje su direktna djeca maina. */
.obrazac-teme {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  margin: 1.5rem auto 2rem; max-width: var(--mjera);
}
.obrazac-teme .polje { flex: 1 1 16rem; margin-bottom: 0; }
.popis-tema {
  list-style: none; padding: 0;
  margin: 0 auto; max-width: var(--mjera);
}
.red-teme {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .75rem .2rem; border-bottom: 1px solid var(--obrub);
}
.red-teme a { text-decoration: none; color: var(--tekst); }
.red-teme a:hover .naslov-teme { color: var(--akcent); }
.naslov-teme { font-weight: 600; }
.red-teme.zakljucana .naslov-teme { color: var(--tekst-tiho); }
.meta-teme { font-size: .85rem; }
.tema .popis-komentara { margin-top: 1.5rem; }

/* ---------- sire zaslone ---------- */
@media (min-width: 42rem) {
  body { font-size: 1.125rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  main { padding: 3rem 1.5rem; }
  /* Kartice smiju izaci iz mjere za citanje (34rem): tri stupca unutar nje daju
   * ~180px po kartici i tekst se lomi na svaku rijec. Mjera vrijedi za tekst
   * koji se cita u kontinuitetu, ne za kratke blokove jedan uz drugi. */
  .kartice {
    grid-template-columns: repeat(3, 1fr);
    max-width: 52rem;
    margin-inline: auto;
  }
}

/* Svijetla tema: dio starijih korisnika cita danju i preferira svijetlo. */
@media (prefers-color-scheme: light) {
  :root {
    --pozadina: #faf8f4;
    --povrsina: #fff;
    --povrsina-2: #fff;
    --tekst: #23262b;
    --tekst-tiho: #5f6670;
    /* Cijan iz logotipa je na bijeloj podlozi presvijetao (2.40:1), pa svijetla
     * tema uzima potamnjenu varijantu istog tona (H 224 vs 220): 6.66:1 kao
     * tekst i 7.06:1 s bijelim tekstom na gumbu. Zlatna je davala 4.27:1. */
    --akcent: #146078;
    --akcent-tamni: #0f5468;
    --obrub: #e2ddd2;
  }
  .gumb { color: #fff; }
  .preskoci { color: #fff; }
}

/* ---------- naslovnica po skici 03.08. (R25–R39) ---------- */
/* Odsjeci naslovnice su siri od mjere za citanje (34rem): mjera vrijedi za tekst
 * koji se cita u kontinuitetu, a ovo su blokovi jedan uz drugi. `margin-inline`
 * MORA biti `auto` — skraceni `margin` s nulama ovdje gazi pravilo iz
 * `main > :is(...)` i zalijepi cijeli odsjek uz lijevi rub (vec ujelo tri puta). */
.odsjek-naslovni, .odsjek-sirok, .odsjek-citat {
  max-width: 64rem;
  margin: 0 auto 3.5rem;
}
.odsjek-naslovni { text-align: center; }
.odsjek-naslovni .vodeci, .odsjek-naslovni .akcije { max-width: var(--mjera); margin-inline: auto; }
.odsjek-naslovni .akcije { justify-content: center; }
.odsjek-sirok > h2 { margin-top: 0; }

.dvostupac { display: grid; gap: 2rem; align-items: start; }

/* Sadrzaj koji je dogovoren a jos ne postoji. Namjerno izgleda nedovrseno:
 * prazan okvir koji izgleda kao dizajn nitko ne popuni. */
.prazan-okvir {
  padding: 1.25rem 1.35rem;
  border: 1px dashed var(--akcent-tamni);
  border-radius: var(--radijus);
  color: var(--tekst-tiho);
  background: color-mix(in srgb, var(--povrsina) 60%, transparent);
}
.prazan-okvir p { margin: 0 0 .35rem; }
.prazan-okvir p:last-child { margin-bottom: 0; }
.prazan-oznaka {
  color: var(--akcent); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
}

/* Pokretne trake (R32). Animacija se ukljucuje tek kad JS udvostruci sadrzaj —
 * inace bi se na kraju popisa vidjela praznina. Zaustavlja se na hover i na
 * fokus tipkovnicom, da se sadrzaj moze procitati i kopirati. */
.traka-okomita, .traka-vodoravna { overflow: hidden; position: relative; }
.traka-okomita { max-height: 18rem; }
.traka-sadrzaj { list-style: none; padding: 0; margin: 0; }
.traka-okomita .traka-sadrzaj > li {
  padding: .75rem 0; border-bottom: 1px solid var(--obrub);
}
.traka-okomita .traka-sadrzaj h3 { margin: .1rem 0; font-size: 1rem; color: var(--akcent); }
.traka-okomita .traka-sadrzaj .meta { margin: 0; font-size: .82rem; color: var(--tekst-tiho); }
.traka-vodoravna .traka-sadrzaj { display: flex; gap: 1rem; }
.traka-vodoravna.traka-tece { display: flex; }

.traka-tece .traka-sadrzaj { animation: traka-okomito 24s linear infinite; }
.traka-vodoravna.traka-tece .traka-sadrzaj { animation-name: traka-vodoravno; }
.traka-tece:hover .traka-sadrzaj,
.traka-tece:focus-within .traka-sadrzaj { animation-play-state: paused; }
@keyframes traka-okomito { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes traka-vodoravno { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .traka-tece .traka-sadrzaj { animation: none; }
}

.najava.istaknuta h3 { font-size: 1.25rem; }
.najava.istaknuta h3 a { color: inherit; text-decoration: none; }
.najava.istaknuta h3 a:hover { text-decoration: underline; }
.najava-slika {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radijus); margin-bottom: .75rem;
}
.traka-okomita .traka-sadrzaj h3 a { color: inherit; text-decoration: none; }
.traka-okomita .traka-sadrzaj h3 a:hover { text-decoration: underline; }

/* Webshop traka (R40). Kartice su fiksne sirine jer flex u traci koja se
 * animira ne smije racunati sirinu iz sadrzaja — inace se duplikat koji JS
 * doda ne poklopi s originalom i traka poskakuje na petlji. */
.artikli > li { flex: 0 0 9.5rem; text-align: center; }
.artikli img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radijus); background: var(--povrsina-2);
}
.artikli p { margin: .4rem 0 0; font-size: .85rem; color: var(--tekst-tiho); }

/* Stranica jedne vijesti. Mjera citanja je uza od odsjeka na naslovnici jer je
 * ovo tekst od nekoliko tisuca znakova, a ne kartica. */
.vijest { max-width: 42rem; margin-inline: auto; }
.vijest-slika {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radijus); margin: 1rem 0;
}
.vijest .izvor-teksta {
  margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--obrub);
  font-size: .85rem; font-style: italic;
}

.vizual { min-height: 12rem; display: flex; flex-direction: column; align-items: center; }
.vizual .prazan-okvir { width: 100%; }
/* Crtez je dekorativna slika izrezana iz Krunine ChatGPT grafike od 18.08.;
 * tekst je odvojen u HTML jer zapecen u sliku pada na ~80 px po stupcu na
 * mobitelu i dijakritika je vec bila pukla. */
.crtez-vrh { display: block; max-width: 100%; height: auto; border-radius: var(--radijus); }
.vizual-naslov {
  margin: .8rem 0 0; font-size: 1.5rem; font-weight: 700;
  text-align: center; color: var(--akcent);
}
/* Cetiri stupa (R39, Q32) — punom sirinom ispod dvostupca prijava.
 * Na siroku zaslonu su u jednom redu; na mobitelu 2x2 da ikone ne padnu
 * ispod 70 px. `auto` u margin-inline — ista zamka kao svugdje. */
.stupovi-naslov { text-align: center; margin: 2rem auto .8rem; }
.stupovi {
  list-style: none; padding: 0;
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  text-align: center;
}
.stupovi li { padding: 1rem .6rem; }
.stupovi img { display: block; margin: 0 auto .5rem; border-radius: 50%; }
.stupovi h4 { margin: 0 0 .25rem; font-size: .95rem; color: var(--akcent); }
.stupovi p { margin: 0; font-size: .85rem; color: var(--tekst-tiho); }
.odbrojavanje h2 { margin-top: 0; }
.brojac {
  font-size: 1.5rem; font-weight: 600; color: var(--akcent);
  font-variant-numeric: tabular-nums; margin-bottom: .3rem;
}
.brojac-zamjena { font-size: 1.2rem; }

/* Izjave polaznika (R37) i strucnjaka (R35) — isti oblik, razlicit potpis. */
.izjave, .strucnjaci { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.izjava, .strucnjak, .svjedocanstvo-kartica {
  padding: 1.1rem 1.25rem;
  background: var(--povrsina);
  border: 1px solid var(--obrub);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--radijus) var(--radijus) 0;
}
.izjava blockquote, .strucnjak blockquote, .svjedocanstvo-kartica blockquote {
  margin: 0; font-style: italic;
}
.izjava blockquote p, .strucnjak blockquote p, .svjedocanstvo-kartica blockquote p { margin: 0; }
.potpis { margin: .7rem 0 0; font-size: .9rem; color: var(--tekst-tiho); }
.svjedocanstvo-kartica { flex: 0 0 20rem; }

/* Svjedocanstva s portala (Q38). Slika i naslov dolaze s portala, izvadak je
 * portalov lead, a „Izvor:" je uvjet objave — zato je odvojen crtom, a ne
 * ubacen medu ostali tekst gdje bi ga se moglo prescrollati.
 *
 * Izvadak NIJE u kurzivu ni u navodnicima: to je tekst uredništva portala o
 * svjedocanstvu, ne rijeci covjeka koji ga je napisao. */
.svjedocanstvo-slika {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radijus); margin-bottom: .8rem;
  background: var(--povrsina-2);
}
.svjedocanstvo-kartica .naslov-kartice {
  margin: 0 0 .5rem; font-size: 1.05rem; color: var(--akcent);
}
.svjedocanstvo .izvadak, .svjedocanstvo-kartica .izvadak { font-style: normal; }
.izvor-portal {
  margin: .9rem 0 0; padding-top: .6rem;
  border-top: 1px solid var(--obrub);
  font-size: .85rem; color: var(--tekst-tiho);
  display: flex; gap: .6rem; flex-wrap: wrap;
}
.izvor-portal a { color: var(--akcent); }
.portret { max-width: 9rem; margin-bottom: .8rem; }
.portret img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.portret .prazan-okvir { text-align: center; padding: 1.6rem .5rem; }

/* FAQ (R33): <details> radi bez skripte i ostaje pretraziv unutar stranice. */
.pitanja-popis { display: grid; gap: .5rem; }
.pitanje {
  padding: .75rem 1rem; background: var(--povrsina);
  border: 1px solid var(--obrub); border-radius: var(--radijus);
}
.pitanje summary { cursor: pointer; font-weight: 600; }
.pitanje summary:hover { color: var(--akcent); }
.pitanje p { margin: .7rem 0 0; color: var(--tekst-tiho); }

/* Cinjenice (R34) — rotacija bez skoka rasporeda.
 *
 * Sve cinjenice stoje u ISTOJ celiji grida (`grid-area: 1/1`), pa okvir dobije
 * visinu najduze i nista se ne mice kad se zamijene. Prije je ovdje bilo
 * `position: absolute` uz `min-height: 6rem` — to je radilo dok je sadrzaj bio
 * kratka statistika („68 % muskaraca…"), a Krunine cinjenice idu do 296 znakova
 * i najduza bi ispala iz okvira preko teksta ispod. */
.rotator { display: grid; }
.rotator > .cinjenica {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; transition: opacity .4s ease;
}
.rotator > .cinjenica.vidljiva { opacity: 1; }

/* Stranica /cinjenice/ — sve s izvorima. Brojevi su vodilja u razgovoru
 * („cinjenica 34"), zato <ol> a ne <ul>. */
.cinjenice-popis { padding-left: 1.6rem; display: grid; gap: 1.6rem; }
.cinjenica-zapis::marker { color: var(--akcent); font-variant-numeric: tabular-nums; }
.cinjenica-tekst { margin: 0; }
.izvori {
  margin: .5rem 0 0; padding-left: 1.1rem;
  font-size: .85rem; color: var(--tekst-tiho);
}
.izvori li { margin-bottom: .25rem; }
.izvori a { color: var(--tekst-tiho); }
.izvori a:hover { color: var(--akcent); }

.nacini { margin: 0; padding-left: 1.3rem; }
.nacini li { margin-bottom: .6rem; }

.odsjek-citat { text-align: center; }
.citat.veliki {
  border-left: 0; border-top: 1px solid var(--obrub); border-bottom: 1px solid var(--obrub);
  border-radius: 0; background: transparent; font-size: 1.25rem; padding: 2rem 1rem;
}
.citat.veliki footer { margin-top: .8rem; font-size: .9rem; font-style: normal;
                       color: var(--tekst-tiho); }

/* Poziv na doniranje na kraju stranice (Kruno, 19.08.2026.) */
.donacija-kartica {
  padding: 1.75rem 1.5rem;
  background: var(--povrsina);
  border: 1px solid var(--obrub);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--radijus) var(--radijus) 0;
  text-align: center;
}
.donacija-kartica h2 {
  margin-top: 0;
  font-size: 1.35rem;
}
.donacija-kartica .vodeci {
  max-width: var(--mjera);
  margin: 0 auto;
}
.donacija-kartica .akcije {
  justify-content: center;
  margin: 1.25rem auto 0;
}

@media (min-width: 46rem) {
  .dvostupac { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .izjave { grid-template-columns: 1fr; }
  .strucnjaci { grid-template-columns: 1fr 1fr; }
  .stupovi { grid-template-columns: repeat(4, 1fr); }
}