/* ===== 01-pisma.css ===== */
/* Pisma. Latinica + zaseban ćirilični sloj preko unicode-range.
   Ćirilica NIJE zamena nego sledeći član steka, pa latinicu i dalje
   crta Instrument Serif / Bricolage, a ćirilicu Playfair / Jost.
   Nijedan [lang] selektor ne postoji, pa radi i u mešanoj rečenici. */

@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/is-roman-latin-ext.woff2') format('woff2');
  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:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/is-roman-latin.woff2') format('woff2');
  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:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/is-ital-latin-ext.woff2') format('woff2');
  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:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/is-ital-latin.woff2') format('woff2');
  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:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/assets/fonts/bg-latin-ext.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:'Bricolage Grotesque'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/assets/fonts/bg-latin.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;
}

/* ---- ĆIRILIČNI SLOJ ----------------------------------------------------
   Isti unicode-range na sva tri reza, i to samo ćirilica: U+0301 (akcenat),
   U+0400-045F (osnovna ćirilica, tu su i Ё i ё), U+0490-0491 (ukrajinsko Ґ),
   U+04B0-04B1, U+2116 (№). Ništa iz latinice nije u opsegu, pa ovaj sloj ne
   može da preuzme nijedno srpsko ni englesko slovo. Fajlovi su lokalni. */
@font-face{
  font-family:'Playfair Cyrillic'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/playfair-roman-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Playfair Cyrillic'; font-style:italic; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/playfair-ital-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Jost Cyrillic'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/jost-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}


/* ===== 02-osnova.css ===== */
/* Promenljive, reset, tipografija, dugmad. */

:root{
  --bor:#0A3B26;          /* duboka šumska zelena, glavno tamno tlo */
  --bor-2:#072A1B;        /* još dublja, futer i senke */
  --bor-3:#0E4A30;        /* svetlija zelena za kartice na tamnom */
  --krem:#F7F1E3;         /* papir */
  --krem-2:#EFE7D2;       /* papir u senci */
  --med:#E9A319;          /* med */
  --med-2:#F6C554;        /* med na svetlu */
  --ink:#132018;          /* tekst na papiru */
  --ink-2:#4F6154;        /* sekundarni tekst na papiru */
  --linija:rgba(19,32,24,.16);
  --linija-s:rgba(247,241,227,.2);

  /* ćirilično pismo je sledeći član steka, ne zamena: latinicu i dalje
     hvata prvo pismo, jer njegov unicode-range pokriva latinicu, a
     ćirilični rez pokriva samo ćirilicu */
  --serif:'Instrument Serif','Playfair Cyrillic',Georgia,'Times New Roman',serif;
  --grot:'Bricolage Grotesque','Jost Cyrillic','Segoe UI',system-ui,Arial,sans-serif;

  /* SAJT IDE PREKO CELE ŠIRINE EKRANA. Nema centriranog stupca od
     1280px: on na širokom monitoru pravi „kutiju” koja pluta na
     praznini, a svaka boja i svaki preliv se vide kao zalepljena
     ploča sa šavom na ivici.
     Merilo čitanja se NE rešava širinom omota nego max-width u `ch`
     na samom tekstu (.telo, .zag-strane__t, .faq__o), jer red od 90
     znakova jeste nečitljiv, ali to je tipografija, ne kutija. */
  --sirina:100%;
  /* Odbici rastu sa ekranom, da sadržaj ne dodiruje samu ivicu stakla. */
  --uz:clamp(20px,4.4vw,110px);
  --zag:64px;
  --e:cubic-bezier(.23,.8,.32,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:1100px){ :root{ --zag:80px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--zag) + 12px);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* i html mora clip: fiksno zaglavlje ne protiče kroz body, pa se
   prelom preko ivice na telefonu video i pored body clip-a */
html{ overflow-x:clip; }
body{
  margin:0; background:var(--krem); color:var(--ink);
  font-family:var(--grot); font-size:16.5px; line-height:1.6; font-weight:400;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
@media (min-width:900px){ body{ font-size:17.5px; } }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; font-family:var(--serif); letter-spacing:.005em; }
p{ margin:0; }
ul,ol,figure,blockquote{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--med); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--med); color:var(--bor-2); }

.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.preskoci{
  position:fixed; left:10px; top:-80px; z-index:300;
  background:var(--med); color:var(--bor-2); font-weight:700;
  padding:12px 18px; border-radius:8px; text-decoration:none;
  transition:top .18s var(--e);
}
.preskoci:focus{ top:8px; }

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

/* registri */
.kicker{
  display:flex; align-items:baseline; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:clamp(16px,2.6vw,26px);
}
.kicker b{ color:var(--med); font-weight:700; }
.kicker::after{ content:''; flex:1; height:1px; background:var(--linija); align-self:center; }
.tamno .kicker{ color:rgba(247,241,227,.6); }
.tamno .kicker::after{ background:var(--linija-s); }
.tamno .kicker b{ color:var(--med-2); }

.naslov{
  font-size:clamp(34px,5.4vw,62px); line-height:1.02; max-width:20ch;
  text-wrap:balance; letter-spacing:0;
}
.naslov em{ font-style:italic; color:var(--med); }
.tamno .naslov em{ color:var(--med-2); }
.telo{ color:var(--ink-2); max-width:56ch; }
.telo p + p{ margin-top:14px; }
.telo b{ color:var(--ink); font-weight:700; }
.tamno .telo{ color:rgba(247,241,227,.78); }
.tamno .telo b{ color:var(--krem); }

.potpis{ margin-top:10px; font-size:13px; line-height:1.5; color:var(--ink-2); max-width:48ch; }
.tamno .potpis{ color:rgba(247,241,227,.62); }

.odeljak{ padding-block:clamp(64px,9vw,128px); }
.tamno{ background:var(--bor); color:var(--krem); }

/* dugmad */
.dug{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:999px;
  font-weight:700; font-size:15.5px; letter-spacing:.01em; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color .18s var(--e), color .18s var(--e), border-color .18s var(--e);
}
.dug--med{ background:var(--med); color:#231500; }
.dug--med:hover{ background:var(--med-2); }
.dug--linija{ border-color:rgba(247,241,227,.5); color:var(--krem); }
.dug--linija:hover{ background:var(--krem); color:var(--bor-2); border-color:var(--krem); }
.dug--bor{ background:var(--bor); color:var(--krem); }
.dug--bor:hover{ background:var(--bor-2); }


/* ===== 03-ljuska.css ===== */
/* Zaglavlje, meni, mobilni panel, podnožje. */

/* ---------- ZAGLAVLJE ----------
   Preko heroja je providno sa krem slovima; čim strana krene,
   dobije krem tlo, tamna slova i tanku liniju. */
.zaglavlje{
  position:fixed; left:0; right:0; top:0; z-index:100;
  color:var(--krem);
  /* Zastor od vrha, jer je hero fotografija i svetla i tamna u istom kadru.
     Bez njega krem slog pada na osvetljeno nebo i meni se ne vidi.
     30.08. malo ojačan: na svetlom delu kadra (izmaglica iznad košnica)
     stavke srednjeg reda su bile teško čitljive. */
  background:linear-gradient(to bottom,
    rgba(7,28,18,.82) 0%, rgba(7,28,18,.66) 55%, rgba(7,28,18,.22) 82%, rgba(7,28,18,0) 100%);
  transition:background-color .28s var(--e), color .28s var(--e), box-shadow .28s var(--e);
}
.zaglavlje::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--linija); opacity:0; transition:opacity .28s var(--e);
}
.zaglavlje[data-cvrsto]{
  background:rgba(247,241,227,.94); color:var(--ink);
  box-shadow:0 12px 34px rgba(7,42,27,.10);
}
@supports (backdrop-filter:blur(4px)){
  .zaglavlje[data-cvrsto]{ background:rgba(247,241,227,.82); backdrop-filter:blur(14px); }
}
.zaglavlje[data-cvrsto]::after{ opacity:1; }

.zag-omot{
  max-width:var(--sirina); margin-inline:auto; padding-inline:var(--uz);
  height:var(--zag); display:flex; align-items:center; gap:14px;
}
.marka{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.marka svg{ width:32px; height:auto; flex:none; }
.marka .zn-t{ fill:currentColor; }
.marka .zn-m{ fill:var(--med); }
.marka-ime{ display:flex; flex-direction:column; line-height:1; }
.marka-ime b{ font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.01em; }
.marka-ime span{
  font-size:8.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  opacity:.6; margin-top:4px;
}

.meni{ display:none; }
/* Izgled samih stavke je u 03b-meni.css (.meni__v). Ovde je ostalo samo
   paljenje trake na velikom ekranu; staro pravilo `.meni a{display:block}`
   je 30.08. svojom specifičnošću (0,1,1 > 0,1,0) gazilo novo `.meni__v`
   fleks pravilo, pa je ševron padAO ISPOD teksta i ceo meni izgledao
   polomljeno. Ne vraćati `.meni a` selektore ovde. */
@media (min-width:1100px){
  .meni{ display:flex; align-items:center; gap:1px; margin-inline-start:auto; }
}

.zag-desno{ display:flex; align-items:center; gap:10px; }
@media (min-width:1100px){ .zag-desno{ margin-inline-start:14px; } }
@media (max-width:1099px){ .zag-desno{ margin-inline-start:auto; } }

.jezik{
  display:flex; align-items:center; padding:2px; gap:2px;
  border-radius:999px; opacity:.9;
  /* Bez belog obruba (Filip, 30.08: „ružno zbog bele ivice, moderno"):
     slova stoje gola, aktivni jezik je pun med peleta. */
}
.jezik button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  letter-spacing:.06em; opacity:.65;
}
.jezik button:hover{ opacity:1; }
.jezik button[aria-pressed="true"]{ background:var(--med); color:#231500; opacity:1; }
/* Tri dugmeta umesto dva. Na uskom telefonu se skupljaju, da zaglavlje
   (znak + prekidač + burger) ostane u jednom redu i na 360px. */
@media (max-width:479px){
  .zag-desno{ gap:8px; }
  .jezik{ padding:2px; }
  .jezik button{ padding:4px 7px; font-size:11px; letter-spacing:.03em; }
}

.zag-cta{ display:none; }
@media (min-width:1100px){
  .zag-cta{ display:inline-flex; min-height:42px; padding:0 20px; font-size:14px; }
}

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; flex:none;
  border:0; cursor:pointer;
  /* Bez obruba: meka tamna pločica sa staklom, linije uvek krem da se
     vide i na svetloj fotografiji i na krem zaglavlju (Filip, 30.08). */
  background:rgba(7,28,18,.34); color:var(--krem);
}
@supports (backdrop-filter:blur(6px)){
  .burger{ background:rgba(7,28,18,.30); backdrop-filter:blur(8px); }
}
@media (min-width:1100px){ .burger{ display:none; } }
.burger i{
  position:relative; display:block; width:18px; height:2px; background:currentColor;
  border-radius:2px; font-style:normal;
  transition:transform .2s var(--e), background-color .2s var(--e);
}
.burger i::before,.burger i::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:currentColor;
  border-radius:2px; transition:transform .2s var(--e), top .2s var(--e);
}
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] i::after{ top:0; transform:rotate(-45deg); }

/* mobilni meni */
.panel{
  position:fixed; inset:0; z-index:90;
  background:var(--bor-2); color:var(--krem);
  padding:calc(var(--zag) + 22px) var(--uz) 34px;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s var(--e), transform .2s var(--e), visibility .2s;
}
.panel[data-otvoren]{ opacity:1; visibility:visible; transform:none; }
@media (min-width:1100px){ .panel{ display:none; } }
.panel li + li{ border-top:1px solid var(--linija-s); }
/* ISTA ZAMKA KOJA JE VEĆ JEDNOM SLOMILA ZAGLAVLJE (vidi `.meni a` u
   03b-meni.css): `.panel a` je specifičnosti 0,1,1 i gazi `.dug` (0,1,0).
   Dugme „Klub prijatelja“ u panelu je <a class="dug dug--med">, pa je do
   30.08. dobijalo stil STAVKE MENIJA: serif 30px, justify-content:
   space-between i padding:16px 2px. U zlatnoj piluli je zato stajao
   ogroman natpis prilepljen uz levu ivicu, visok preko 60px, umesto
   centriranog natpisa od 15,5px. Filip: „on the mobile this button is huge
   and ugly“.
   `:not(.dug)` je zato OBAVEZAN. Svači novi dugme u panel i bez njega će
   se polomiti na isti način. */
.panel a:not(.dug){
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 2px; text-decoration:none;
  font-family:var(--serif); font-size:30px; line-height:1.1;
}
.panel a:not(.dug) i{ font-style:normal; font-family:var(--grot); color:var(--med-2); font-size:13px; font-weight:700; letter-spacing:.1em; }
.panel .dug{ width:100%; margin-top:24px; }
body[data-zakljucano]{ overflow:hidden; }

/* Strana BEZ heroja (unutrašnje strane): zaglavlje od prvog kadra
   stoji na papiru sa tamnim slovima. Klasu dodaje 02-ljuska.js; bez
   ovih pravila krem slova padaju na krem papir strane i zaglavlje je
   NEVIDLJIVO do prvog skrola. Isto oblačenje kao data-cvrsto. */
html.bez-heroja .zaglavlje{
  background:rgba(247,241,227,.94); color:var(--ink);
  box-shadow:0 12px 34px rgba(7,42,27,.10);
}
@supports (backdrop-filter:blur(4px)){
  html.bez-heroja .zaglavlje{ background:rgba(247,241,227,.82); backdrop-filter:blur(14px); }
}
html.bez-heroja .zaglavlje::after{ opacity:1; }

/* kad je meni otvoren, zaglavlje mora na krem da pređe u tamni režim */
body[data-zakljucano] .zaglavlje{ background:transparent; color:var(--krem); box-shadow:none; }
body[data-zakljucano] .zaglavlje::after{ opacity:0; }

/* ---------- podnožje ---------- */
.podnozje{ background:var(--bor-2); color:var(--krem); padding-block:clamp(48px,7vw,84px) 30px; }
.pn-vrh{ display:grid; gap:34px; }
@media (min-width:900px){ .pn-vrh{ grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap:48px; } }
.pn-vrh h3{ font-family:var(--grot); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,241,227,.55); margin-bottom:16px; }
.pn-tekst{ font-size:15px; color:rgba(247,241,227,.72); line-height:1.7; max-width:44ch; margin-top:14px; }
.pn-spisak{ display:flex; flex-direction:column; gap:10px; font-size:15px; }
.pn-spisak a{ color:rgba(247,241,227,.85); text-decoration:none; }
.pn-spisak a:hover{ color:var(--med-2); }
/* Crta iznad donjeg reda stajala je na .pn-nota, pasusu koji je govorio
   klijentu zašto na strani nema adrese. Pasus je uklonjen kad je sajt
   prestao da bude prezentacija, pa crtu sada nosi sam donji red. */
.pn-dno{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--linija-s);
  display:flex; flex-wrap:wrap; gap:8px 24px;
  font-size:12.5px; color:rgba(247,241,227,.45);
}
.pn-dno a{ color:rgba(247,241,227,.7); }

/* ---- podnožje: detaljniji sloj (Filip, 30.08) ------------------------ */
/* Pečat na šavu: znak sedi na gornjoj ivici futera, na pola širine, pa
   prelaz iz poslednjeg odeljka u podnožje dobija tačku od koje se crta. */
.podnozje{ position:relative; }
.pn-pecat{
  position:absolute; top:0; left:50%; translate:-50% -50%;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bor-2); border:1px solid var(--linija-s);
  box-shadow:0 0 0 6px var(--bor-2);
  color:var(--med);
}
.pn-pecat svg{ width:26px; height:auto; }
/* prekidač jezika u podnožju, manji nego u zaglavlju */
.jezik--dno{ display:inline-flex; margin-top:20px; }
.jezik--dno .jezik__d{ padding:3px 9px; font-size:11px; }
/* zasluga za fotografije: obavezan uslov korišćenja arhive (vidi
   ljuska.js); stoji kao poslednji, tihi red */
.pn-zasluga{
  margin-top:18px; padding-top:14px; border-top:1px solid rgba(247,241,227,.14);
  text-align:center; font-size:12px; letter-spacing:.02em;
  color:rgba(247,241,227,.45);
}


/* ===== 03b-meni.css ===== */
/* Nadogradnja ljuske za višestranični sajt: mega-meni, mrvice,
   podnožje u četiri kolone, mobilni panel sa podstavkama.
   03-ljuska.css iznad ostaje netaknut; ovde se samo dodaje. */

/* ---- glavni meni ---------------------------------------------------- */
@media (min-width:1100px){
  .meni{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
  .meni__g{ position:static; }
  .meni__v{
    position:relative; display:flex; align-items:center; gap:6px;
    padding:10px 12px; white-space:nowrap; text-decoration:none;
    font-size:14.5px; font-weight:600; opacity:.85;
    transition:opacity .15s var(--e);
  }
  .meni__v::after{
    content:''; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
    background:var(--med); transform:scaleX(0); transform-origin:left;
    transition:transform .22s var(--e);
  }
  .meni__v:hover{ opacity:1; }
  .meni__v:hover::after,
  .meni__v[aria-current="true"]::after,
  .meni__g[data-otvoren] .meni__v::after{ transform:scaleX(1); }

  /* strelica: pravi SVG ševron, jasno vidljiv; okrene se kad se mega otvori.
     Ranije je bila granata od dve ivice kvadrata 7x7, što se na ekranu
     čitalo kao vertikalna crta nakalemljena na kraj stavke. */
  .meni__str{
    display:block; opacity:.55;
    transition:transform .25s var(--e), opacity .2s var(--e);
  }
  .meni__g[data-otvoren] .meni__str{ transform:rotate(180deg); opacity:1; }

  /* Između 1100 i 1520 px red je natrpan: šest stavki + prekidač + CTA.
     Bez sabijanja CTA „Klub prijatelja" prelomi se u dva reda i zaglavlje
     izgleda polomljeno (Filipov snimak 30.08, 1391 px). Zato se na uzkom
     ekranu stavke skupljaju, a CTA nikad ne smeta da se prelomi. */
  .zag-cta{ white-space:nowrap; flex:none; }
  @media (max-width:1520px){
    .meni__v{ padding-inline:9px; }
    .zag-cta{ padding-inline:16px; font-size:13.5px; }
  }
  @media (max-width:1300px){
    .meni__v{ padding-inline:7px; font-size:13.5px; }
    .zag-omot{ gap:10px; }
    .zag-desno{ margin-inline-start:8px; }
  }
}

/* ---- mega-meni ------------------------------------------------------
   Jedan panel preko cele širine, ne uska padajuća lista: stavke nose
   opise i jednu fotografiju. `hidden` skida JS; bez JS-a mega ne
   postoji, a .meni__v je običan link na hub stranu koja nosi isti
   spisak, pa se ništa ne gubi.
   Panel je position:fixed od ivice do ivice ekrana, odmah ispod
   zaglavlja (top:var(--zag)). Ranije absolute+top:100% visilo je o
   posrednog pretka: panel je plivao 864px širok nasred strane, a tekst
   heroja je virio sa strane. */
.mega{
  position:fixed; left:0; right:0; top:var(--zag);
  background:var(--krem); color:var(--ink);
  border-top:1px solid var(--linija);
  box-shadow:0 34px 70px rgba(7,42,27,.30);
  z-index:80;
}
.mega[hidden]{ display:none; }
@media (max-width:1099px){ .mega{ display:none!important; } }
.mega__omot{
  max-width:var(--sirina); margin-inline:auto; padding:clamp(24px,2.6vw,38px) var(--uz);
  display:grid; gap:clamp(24px,3vw,52px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr) minmax(0,.8fr);
  align-items:start;
}
.mega__k{ font-family:var(--serif); font-size:clamp(24px,2.2vw,32px); line-height:1.1; color:var(--ink); }
.mega__t{ margin-top:10px; font-size:14.5px; color:var(--ink-2); line-height:1.55; max-width:34ch; }
.mega__sve{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--med); padding-bottom:3px;
}
.mega__sve i{ font-style:normal; transition:translate .25s var(--e); }
.mega__sve:hover i{ translate:4px 0; }

.mega__kolona{ display:grid; gap:2px; }
.mega__v{
  display:block; padding:12px 14px; border-radius:10px; text-decoration:none;
  transition:background-color .18s var(--e), translate .18s var(--e);
}
.mega__v:hover{ background:var(--krem-2); translate:3px 0; }
.mega__n{ display:block; font-weight:700; font-size:15.5px; }
/* max-width čuva opis od desnog suseda (fotografiju): u 864px panelu je
   30.08. opis bežao ispod slike i sečen izgledao kao grška. */
.mega__o{ display:block; margin-top:3px; font-size:13.5px; color:var(--ink-2); line-height:1.45; max-width:46ch; }

.mega__slika{ display:block; text-decoration:none; position:relative; border-radius:10px; overflow:hidden; }
.mega__slika .slika{ border-radius:10px; }
.mega__slika span{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(transparent, rgba(7,42,27,.86));
  color:var(--krem); font-weight:700; font-size:14.5px;
}
.mega__slika i{ font-style:normal; transition:translate .25s var(--e); }
.mega__slika:hover i{ translate:4px 0; }
@media (prefers-reduced-motion:no-preference){
  html.js .mega[data-otvoren]{ animation:mega-pada .22s var(--e) both; }
  @keyframes mega-pada{ from{ opacity:0; translate:0 -8px; } }
  html.js .mega[data-otvoren] .mega__v{ animation:mega-red .3s var(--e) backwards; }
  html.js .mega[data-otvoren] .mega__v:nth-child(2){ animation-delay:.03s; }
  html.js .mega[data-otvoren] .mega__v:nth-child(3){ animation-delay:.06s; }
  html.js .mega[data-otvoren] .mega__v:nth-child(4){ animation-delay:.09s; }
  html.js .mega[data-otvoren] .mega__v:nth-child(5){ animation-delay:.12s; }
  @keyframes mega-red{ from{ opacity:0; translate:-6px 0; } }
}

/* zastor iza mega-menija */
.zastor{
  position:fixed; inset:var(--zag) 0 0; z-index:70; background:rgba(7,42,27,.34);
  opacity:0; visibility:hidden; transition:opacity .22s var(--e), visibility .22s;
}
.zastor[data-vidljiv]{ opacity:1; visibility:visible; }
@media (max-width:1099px){ .zastor{ display:none; } }

/* ---- prekidač jezika: sada linkovi, ne dugmad ------------------------
   Razlog je SEO i pristupačnost: svaki jezik ima svoju adresu, pa mora
   da bude pravi <a> koji robot može da prati. Izgled je isti kao pre. */
.jezik__d{
  text-decoration:none; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.06em; opacity:.65; color:inherit;
}
.jezik__d:hover{ opacity:1; }
.jezik__d[aria-current="true"]{ background:var(--med); color:#231500; opacity:1; }
@media (max-width:479px){ .jezik__d{ padding:4px 7px; font-size:11px; letter-spacing:.03em; } }

/* ---- mobilni panel: podstavke ---------------------------------------- */
.panel__g{ position:relative; }
.panel__v{
  display:block; padding:16px 52px 16px 2px; text-decoration:none;
  font-family:var(--serif); font-size:28px; line-height:1.1;
}
.panel__b{
  position:absolute; right:-6px; top:10px; width:44px; height:44px;
  display:grid; place-items:center; border:1px solid var(--linija-s);
  border-radius:10px; background:transparent; cursor:pointer; color:inherit;
}
.panel__b i{ width:12px; height:12px; position:relative; display:block; }
.panel__b i::before,.panel__b i::after{
  content:''; position:absolute; background:currentColor; border-radius:2px;
  transition:transform .2s var(--e);
}
.panel__b i::before{ left:0; right:0; top:5px; height:2px; }
.panel__b i::after{ top:0; bottom:0; left:5px; width:2px; }
.panel__b[aria-expanded="true"] i::after{ transform:scaleY(0); }
.panel__p{ padding:0 0 14px 2px; display:grid; gap:3px; }
.panel__p[hidden]{ display:none; }
.panel__p a{
  display:block; padding:11px 13px; border-radius:8px; text-decoration:none;
  font-size:16px; color:rgba(247,241,227,.82); background:rgba(247,241,227,.05);
}
.panel__p a:hover{ color:var(--krem); background:rgba(247,241,227,.1); }
/* Sme da bude krupno („ok to keep it big“), ali mora da izgleda kao dugme:
   natpis u sredini, dovoljno vazduha sa strane, palac ga lako pogodi. */
.panel__cta{
  width:100%; margin-top:24px;
  min-height:60px; padding:0 24px; font-size:17px;
  justify-content:center; text-align:center;
}
.panel__g + .panel__g{ border-top:1px solid var(--linija-s); }

/* ---- mrvice ---------------------------------------------------------- */
.mrvice{ padding-top:calc(var(--zag) + 22px); padding-bottom:2px; }
.mrvice ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:12.5px; color:var(--ink-2);
}
.mrvice li{ display:flex; align-items:center; gap:10px; }
.mrvice li:not(:last-child)::after{ content:'/'; color:var(--linija); }
.mrvice a{ text-decoration:none; opacity:.85; }
.mrvice a:hover{ opacity:1; color:var(--med); text-decoration:underline; text-underline-offset:3px; }
.mrvice [aria-current]{ color:var(--ink); font-weight:600; }
/* Na strani sa celoekranskim herojem mrvice bi gurale kadar, pa ih ta
   strana ukloni klasom na <body>; sadržaj im ostaje u JSON-LD grafu. */
body.ima-heroj .mrvice{ display:none; }

/* ---- podnožje: četiri kolone ----------------------------------------- */
.pn-vrh{ display:grid; gap:34px; }
@media (min-width:760px){ .pn-vrh{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; } }
@media (min-width:1040px){ .pn-vrh{ grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:48px; } }
.pn-marka .marka{ color:var(--krem); }
.pn-kontakt{ margin-top:18px; display:grid; gap:6px; font-size:14.5px; color:rgba(247,241,227,.72); }
.pn-kontakt a{ color:rgba(247,241,227,.9); text-decoration:none; }
.pn-kontakt a:hover{ color:var(--med-2); }
.pn-drustvene{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.pn-drustvene a{
  font-size:13px; font-weight:600; text-decoration:none; color:rgba(247,241,227,.82);
  border:1px solid var(--linija-s); border-radius:999px; padding:7px 14px;
  transition:background-color .18s var(--e), color .18s var(--e), border-color .18s var(--e);
}
.pn-drustvene a:hover{ background:var(--med); color:#231500; border-color:var(--med); }
.pn-dno a{ text-decoration:none; }
.pn-dno a:hover{ color:var(--med-2); text-decoration:underline; text-underline-offset:3px; }


/* ===== 04-komponente.css ===== */
/* Komponente koje deli ceo sajt. */

/* brojevi ispod heroja */
.brojevi{ background:var(--bor-2); color:var(--krem); position:relative; }
.brojevi-mreza{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:var(--sirina); margin-inline:auto; padding-inline:var(--uz);
}
@media (min-width:820px){ .brojevi-mreza{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.broj{ padding:26px 20px 26px 0; border-top:1px solid var(--linija-s); }
@media (min-width:820px){ .broj + .broj{ padding-left:24px; border-inline-start:1px solid var(--linija-s); } }
@media (max-width:819px){ .broj:nth-child(even){ padding-left:20px; border-inline-start:1px solid var(--linija-s); } }
.broj b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.6vw,52px); line-height:1; color:var(--med-2);
}
.broj span{ display:block; margin-top:8px; font-size:13.5px; color:rgba(247,241,227,.72); line-height:1.45; }

/* ---------- marquee ---------- */
.mq{
  background:var(--med); color:#2A1B00; overflow:clip;
  border-block:1px solid rgba(42,27,0,.2);
}
.mq-red{ display:flex; width:max-content; }
.mq-deo{
  display:flex; align-items:center; gap:26px; flex:none;
  padding:14px 13px 14px; font-family:var(--serif); font-size:clamp(19px,2.4vw,26px);
  white-space:nowrap;
}
.mq-deo i{ font-style:normal; font-size:.7em; translate:0 -1px; }
@media (prefers-reduced-motion:no-preference){
  html.js .mq-red{ animation:mq-tece 36s linear infinite; }
  @keyframes mq-tece{ to{ translate:-50% 0; } }
}

/* ---------- slike ----------
   `--r` je poluprecnik SAME slike i postoji zato što zaobljenje slike NE SME
   da zavisi od pretka koji je odseca.

   Šta se dešavalo: kartica je `overflow:hidden; border-radius:12px` i do
   30.08. je ona jedina zaobljavala fotografiju (`.kartica__s` je imala
   `border-radius:0`). Na hover kartica dobije `translate:0 -6px`, a
   fotografija svoj `scale:1.035` — oba postanu kompozitovani slojevi, i
   Chromium tada prestane da nad kompozitovanim potomkom primenjuje
   ZAOBLJEN overflow-clip pretka. Ugao fotografije se u tom trenutku
   iseca PRAVOUGAONO i iskrši se preko zaobljenog ugla kartice.
   Snimljeno pod GPU-om: bez hovera ugao je obao, sa hoverom oštar 90°.
   Filip: „when hovered this element looks broken“.

   Pride, sistem otkrivanja na skrol (07-pokret.css) svakoj `.slika` zada
   `clip-path:inset(...)`, a `clip-path` je pravougaon ako mu se ne kaže
   `round`. Zato i on sada nosi `round var(--r)`.

   Pravilo: fotografija nosi svoje zaobljenje i svoj clip. Predak sme da
   pomogne, ali se na njega ne računa. */
.slika{ position:relative; overflow:hidden; border-radius:var(--r,6px); background:var(--krem-2); }
.slika img{ width:100%; height:100%; object-fit:cover; transition:scale .7s var(--e); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a .slika:hover img,.g-kartica:hover .slika img{ scale:1.035; }
}
.slika--32{ aspect-ratio:3/2; }
.slika--45{ aspect-ratio:4/5; }
.slika--11{ aspect-ratio:1/1; }
.slika--169{ aspect-ratio:16/9; }
/* PUN KADAR: omotač u heroju (.hero-slika) i sceni (.scena-slika) mora
   da ispuni roditelja, koji je sam apsolutno rasprostrt preko celog
   odsečka. Bez ovog pravila omotač pada na prirodnu visinu fotografije,
   pa ispod nje ostaje zelena praznina a preliv pada preko ničega.
   Ovo pravilo je 30.08. falilo i sajt je isporučen polomljen. */
.slika--pun{ position:absolute; inset:0; border-radius:0; }
.slika--pun img{ width:100%; height:100%; object-fit:cover; }

/* ---------- editorial split ---------- */
.split{ display:grid; gap:clamp(28px,4.5vw,64px); align-items:center; }
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--obrnut > *:first-child{ order:2; }
}
/* Split nosi TAČNO JEDNU fotografiju. Umetnuta druga je obrisana 30.08. na
   izričit zahtev („do not stack images like that“) i ne vraća se. */
.split-slike{ position:relative; }

/* ---------- doživljaj: koraci ---------- */
.dozivljaj-mreza{ display:grid; gap:clamp(30px,4.5vw,70px); align-items:start; }
@media (min-width:1000px){ .dozivljaj-mreza{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.dozivljaj-lepak{ position:sticky; top:calc(var(--zag) + 22px); }
@media (max-width:999px){ .dozivljaj-lepak{ position:static; } }
.koraci{ counter-reset:k; display:grid; }
.korak{
  counter-increment:k;
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:4px 18px;
  padding:18px 0; border-top:1px solid var(--linija); align-items:baseline;
}
.korak:last-child{ border-bottom:1px solid var(--linija); }
.korak::before{
  content:'0' counter(k);
  grid-row:span 2;
  font-family:var(--serif); font-size:30px; color:var(--med); line-height:1;
}
.korak h3{ font-family:var(--grot); font-weight:700; font-size:17.5px; letter-spacing:-.01em; }
.korak p{ font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.meta-red{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:8px;
}
.meta-red span{
  border:1px solid var(--linija); border-radius:999px; padding:7px 14px;
  font-size:13px; font-weight:600; color:var(--ink-2);
}

/* ---------- galerija: vodoravna traka ---------- */
/* Podnožje trake: napomena levo, strelice desno. Stoji unutar lepka, pa je
   u sceni prikačeno uz ekran zajedno sa trakom, a van scene je to obična
   vrsta ispod trake. Strelica ispod 900px ionako nema, a flex-wrap je
   pojas i tregeri za uzak kadar: nikad se ne preliva vodoravno. */
.traka-podnozje{
  margin-top:12px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.g-strelice{ display:none; }
@media (min-width:900px){ .g-strelice{ display:flex; gap:8px; } }
.g-strelice button{
  width:48px; height:48px; border-radius:999px; border:1px solid var(--linija);
  background:transparent; cursor:pointer; font-size:18px; line-height:1;
  transition:background-color .15s var(--e), color .15s var(--e);
}
.g-strelice button:hover{ background:var(--bor); color:var(--krem); }
.galerija{
  margin-top:clamp(24px,3.5vw,40px);
  display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none;
  /* snapport mora da počne na istoj ivici kao i padding, inače mandatory
     snap sam odvuče prvu karticu do ivice ekrana i pojede levu marginu */
  padding-inline:var(--uz);
  scroll-padding-inline:var(--uz);
  padding-bottom:8px;
}
.galerija::-webkit-scrollbar{ display:none; }
.g-kartica{ flex:none; width:min(420px,78vw); scroll-snap-align:start; }
.g-kartica--siroka{ width:min(560px,86vw); }
.g-kartica .slika{ aspect-ratio:4/3; }
.g-kartica--siroka .slika{ aspect-ratio:16/10; }
.g-kartica figcaption{
  margin-top:10px; font-size:13.5px; color:var(--ink-2);
  display:flex; gap:10px; align-items:baseline;
}
.g-kartica figcaption b{
  color:var(--med); font-family:var(--serif); font-weight:400; font-size:16px; flex:none;
}
.galerija-nota{ margin-top:8px; font-size:13px; color:var(--ink-2); }
/* u podnožju je vrsta već razmaknuta samim podnožjem */
.traka-podnozje .galerija-nota{ margin-top:0; flex:1 1 260px; min-width:0; }

/* ---------- apiterapija ---------- */
.api-mreza{ display:grid; gap:18px; }
@media (min-width:880px){ .api-mreza{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.api-k{
  background:var(--bor-3); border:1px solid var(--linija-s); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
}
.api-k .slika{ border-radius:0; aspect-ratio:16/10; }
.api-telo{ padding:clamp(20px,2.8vw,30px); display:flex; flex-direction:column; gap:10px; flex:1; }
.api-telo .oznaka{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--med-2);
}
.api-telo h3{ font-size:clamp(24px,2.8vw,31px); line-height:1.08; }
.api-telo p{ font-size:15px; color:rgba(247,241,227,.78); line-height:1.6; }

/* ---------- edukacije ---------- */
.edu-mreza{ display:grid; gap:18px; }
@media (min-width:880px){ .edu-mreza{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.edu-k{ display:flex; flex-direction:column; }
.edu-k .slika{ aspect-ratio:4/3; }
.edu-k h3{ margin-top:16px; font-size:clamp(22px,2.4vw,27px); }
.edu-k p{ margin-top:8px; font-size:14.5px; color:var(--ink-2); line-height:1.58; }

/* ---------- bee a team ---------- */
.tim{ background:var(--krem-2); }
.tim-mreza{ display:grid; gap:clamp(28px,4.5vw,64px); align-items:start; }
@media (min-width:1000px){ .tim-mreza{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); } }
.pitanja{ counter-reset:q; margin-top:clamp(20px,3vw,30px); }
.pitanja li{
  counter-increment:q;
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--linija);
  font-family:var(--serif); font-size:clamp(19px,2.3vw,25px); line-height:1.25;
}
.pitanja li:last-child{ border-bottom:1px solid var(--linija); }
.pitanja li::before{
  content:counter(q,decimal-leading-zero);
  font-family:var(--grot); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--med);
}
.tim-citat{
  margin-top:clamp(20px,3vw,30px); font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,2.3vw,24px); color:var(--ink); max-width:36ch;
}

/* ---------- proizvodi ---------- */
.spisak{ display:grid; margin-top:clamp(18px,2.6vw,26px); }
.spisak li{
  display:grid; grid-template-columns:minmax(0,auto) 1fr minmax(0,auto); gap:14px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--linija-s);
  font-size:16px;
}
.spisak li:last-child{ border-bottom:1px solid var(--linija-s); }
.spisak b{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.4vw,26px); }
.spisak li::before{ display:none; }
.spisak .crta{ height:1px; background:var(--linija-s); align-self:center; opacity:.6; }
.spisak span{ color:rgba(247,241,227,.72); font-size:14px; text-align:right; max-width:30ch; }

/* ---------- glasovi ---------- */
.glasovi-mreza{ display:grid; gap:clamp(24px,4vw,40px); }
@media (min-width:900px){ .glasovi-mreza{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.glas{ display:flex; flex-direction:column; gap:16px; padding-top:22px; border-top:2px solid var(--med); }
.glas blockquote{
  font-family:var(--serif); font-size:clamp(21px,2.4vw,26px); line-height:1.22;
}
.glas figcaption{ margin-top:auto; font-size:13.5px; color:var(--ink-2); }
.glas figcaption b{ display:block; color:var(--ink); font-weight:700; font-size:14.5px; }

/* partneri */
.partneri{
  margin-top:clamp(40px,6vw,64px); padding-top:clamp(24px,3.4vw,36px); border-top:1px solid var(--linija);
  display:flex; flex-wrap:wrap; gap:8px 0; align-items:baseline;
}
.partneri li{
  font-size:14px; font-weight:600; color:var(--ink-2); letter-spacing:.04em;
}
.partneri li:not(:last-child)::after{ content:'·'; margin:0 14px; color:var(--med); }

/* ---------- poziv ---------- */
/* MEDALJON NA ŠAVU — uopšten `.pn-pecat` iz podnožja (03-ljuska.css).
   Sedi na gornjoj ivici tamnog odeljka, pola u svetlom odeljku iznad. Prsten
   (`box-shadow`) je u boji odeljka NA KOJEM stoji, pa gornja polovina kruga
   ne pluta u svetlom nego izgleda probijena kroz šav.
   Odeljak koji ga nosi NE SME da ima overflow:clip — medaljon namerno viši. */
.sav-pecat{
  position:absolute; top:0; left:50%; translate:-50% -50%; z-index:4;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
  border:1px solid var(--linija-s); color:var(--med);
}
.sav-pecat svg{ width:26px; height:auto; }
.odeljak--pecat{ position:relative; }
.sav-pecat--krem{ background:var(--krem); box-shadow:0 0 0 6px var(--krem); color:var(--bor); border-color:var(--linija); }
.sav-pecat--bor{ background:var(--bor);   box-shadow:0 0 0 6px var(--bor); }
.sav-pecat--bor2{ background:var(--bor-2); box-shadow:0 0 0 6px var(--bor-2); }
@media (max-width:700px){ .sav-pecat{ width:48px; height:48px; } .sav-pecat svg{ width:21px; } }

/* Odeljak NE odseca (medaljon na šavu namerno viši pola iznad gornje ivice).
   Odsecanje je spušteno na `.poziv__ukras`, sloj sa ukrasima koji vire.
   Napomena: `overflow-x:clip` ovde NE radi — kad je jedna osa `clip` a druga
   `visible`, druga se računa kao `auto`, pa bi se medaljon opet odsekao. */
.poziv{ background:var(--bor); color:var(--krem); position:relative; }
.poziv__ukras{ position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0; }
.poziv-sat{
  position:absolute; right:-6%; top:50%; translate:0 -50%; width:min(46vw,560px); opacity:.1;
  pointer-events:none;
}
.poziv-sadrzaj{ position:relative; z-index:2; max-width:var(--sirina); margin-inline:auto; padding:clamp(64px,9vw,120px) var(--uz); }
.poziv h2{ font-size:clamp(34px,5.6vw,64px); line-height:1.02; max-width:18ch; text-wrap:balance; }
.poziv h2 em{ font-style:italic; color:var(--med-2); }
.poziv p{ margin-top:16px; max-width:54ch; color:rgba(247,241,227,.8); }
.poziv .dug{ margin-top:28px; }


/* ===== 04b-komponente.css ===== */
/* Komponente koje uvodi višestranični sajt: zaglavlje strane, mreže
   kartica, FAQ, forme, blokovi sa citatom, logotipi partnera, oznake.
   Stari komponente ostaju iznad; ovde se samo dodaje. */

/* ---- red dugmadi ------------------------------------------------------ */
.red-dugmadi{ margin-top:clamp(22px,3vw,32px); display:flex; flex-wrap:wrap; gap:12px; }

/* ---- zaglavlje strane (nije celoekranski heroj) -----------------------
   Unutrašnje strane ne dobijaju heroj preko celog ekrana: čitalac je
   već ušao u sajt i traži sadržaj, ne uvod. Dobijaju krupan naslov na
   papiru i jednu široku fotografiju ispod. */
.zag-strane{
  padding-top:clamp(18px,3vw,34px);
  padding-bottom:clamp(30px,4.5vw,54px);
}
.zag-strane__k{ margin-bottom:14px; }
.zag-strane h1{
  font-size:clamp(38px,6.4vw,80px); line-height:1.0; max-width:16ch; text-wrap:balance;
}
.zag-strane h1 em{ font-style:italic; color:var(--med); }
.zag-strane__t{
  margin-top:clamp(16px,2.2vw,24px); max-width:58ch;
  font-size:clamp(16.5px,1.5vw,19.5px); color:var(--ink-2); line-height:1.62;
}
.zag-strane__meta{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:8px;
}
.zag-strane__meta span{
  border:1px solid var(--linija); border-radius:999px; padding:7px 15px;
  font-size:13px; font-weight:600; color:var(--ink-2);
}
/* Slika u zaglavlju strane ide OD IVICE DO IVICE. Unutar omota bi bila
   zaobljena ploča uvučena sa obe strane, dakle ista ona kutija koju
   sajt nigde nema. Izlazi se iz odbitaka omota negativnom marginom, pa
   se ne mora menjati struktura HTML-a. Bez zaobljenja i bez okvira. */
.zag-strane__slika{
  margin-top:clamp(28px,4vw,48px);
  margin-inline:calc(var(--uz) * -1);
}
.zag-strane__slika .slika{ aspect-ratio:21/9; border-radius:0; }
@media (max-width:700px){ .zag-strane__slika .slika{ aspect-ratio:4/3; } }

/* tamna varijanta zaglavlja, za strane koje kreću iz zelenog */
.zag-strane.tamno h1 em{ color:var(--med-2); }
.zag-strane.tamno .zag-strane__t{ color:rgba(247,241,227,.78); }
.zag-strane.tamno .zag-strane__meta span{ border-color:var(--linija-s); color:rgba(247,241,227,.8); }

/* ---- mreže kartica ---------------------------------------------------- */
.mreza{ display:grid; gap:clamp(16px,2.2vw,24px); }
@media (min-width:720px){ .mreza--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:880px){
  .mreza--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mreza--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1100px){ .mreza--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.kartica{
  display:flex; flex-direction:column; position:relative;
  background:var(--krem); border:1px solid var(--linija); border-radius:12px;
  overflow:hidden; text-decoration:none; color:inherit;
}
.tamno .kartica{ background:var(--bor-3); border-color:var(--linija-s); }
.kartica__s{ --r:11px 11px 0 0; }
.kartica__t{ padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:9px; flex:1; }
.kartica__t h3{ font-size:clamp(21px,2.2vw,26px); line-height:1.12; }
.kartica__t p{ font-size:14.5px; color:var(--ink-2); line-height:1.58; }
.tamno .kartica__t p{ color:rgba(247,241,227,.76); }
.kartica .oznaka{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--med);
}
.tamno .kartica .oznaka{ color:var(--med-2); }
.kartica__m{ margin-top:auto; padding-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.kartica__m span{
  font-size:12px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--linija); border-radius:999px; padding:4px 10px;
}
.tamno .kartica__m span{ border-color:var(--linija-s); color:rgba(247,241,227,.72); }
.kartica__str{
  position:absolute; right:16px; top:16px; width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; background:var(--med); color:#231500;
  font-size:15px; opacity:0; translate:0 -6px;
  transition:opacity .25s var(--e), translate .25s var(--e);
}
@media (hover:hover){
  .kartica--veza:hover .kartica__str{ opacity:1; translate:0 0; }
}
/* na dodir (telefon) strelica stoji uvek, jer hover ne postoji */
@media (hover:none){ .kartica__str{ opacity:1; translate:0 0; } }

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* KARTICA SE NA HOVER PODIŽE PREKO `top`, NE PREKO `translate`. NE VRAĆATI
     TRANSFORM.

     Kartica je `overflow:hidden; border-radius:12px` i tim zaobljenim
     odsecanjem drži ugao fotografije. Čim kartica dobije transform, ona
     postane kompozitovan sloj; fotografija je i inakе kompozitovana (nosi
     `scale` na hover i `transform` iz motora), a Chromium tada nad
     kompozitovanim potomkom više ne primenjuje ZAOBLJEN overflow-clip
     pretka — primeni pravougaon. Gornji ugao fotografije se u tom trenutku
     iseče pod 90° i štrči preko zaobljenog ugla kartice.

     Snimljeno pod GPU-om, uvećan ugao: bez hovera obao, sa `translate`
     oštar, sa `top` opet obao. Filip: „when hovered this element looks
     broken, make sure that bug never ever repeat itself“.

     `top` na `position:relative` elementu pomera samo crtač, ne pravi sloj,
     ne pomera susede i ne pokreće prelom. Isti pokret, bez artefakta. */
  /* KARTICA SE NA HOVER NE POMERA. NI `translate`, NI `top`, NI `margin`.
     Ovo je tvrdo pravilo, ne stvar ukusa.

     Kartica je `overflow:hidden; border-radius:12px` i tim odsecanjem drži
     ugao fotografije. Čim se kartica na hover POMERI — svejedno da li
     transformom ili pomerajem pozicioniranog elementa — Chromium prestane
     da nad fotografijom primenjuje ZAOBLJEN clip i primeni pravougaon.
     Gornji uglovi fotografije se iseču pod 90° i iščešu preko zaobljene
     zlatne ivice; fotografija pritom pređe i preko same ivice.

     Izmereno pod GPU-om, isti kadar, uvećan ugao:
       bez pomeranja           -> ugao obao, zlatna ivica ga prati
       `translate:0 -6px`      -> ugao oštar 90°
       `top:-6px`              -> ugao oštar 90°
       ništa se ne pomera      -> ugao obao
     Ne pomažu ni sopstveni `border-radius` na `.kartica__s`, ni
     `clip-path: inset(... round ...)`, ni `will-change`: kad se kartica
     pomeri, pada i sopstveni clip fotografije.

     Filip, 30.08: „when hovered this element looks broken, that is not
     acceptable, make sure that bug never ever repeat itself“.

     Odziv na hover zato nose stvari koje ne pomeraju kutiju: zlatna ivica,
     dublja senka, zlatni krug sa strelicom (.kartica__str) i blag zum
     fotografije. Ako nekad zatreba „dizanje“, diži SENKU, ne karticu. */
  .kartica{ transition:box-shadow .35s var(--e), border-color .25s var(--e); }
  .kartica--veza:hover{
    border-color:var(--med);
    box-shadow:0 22px 44px rgba(7,42,27,.14), 0 6px 16px rgba(233,163,25,.14);
  }
  .tamno .kartica--veza:hover{ box-shadow:0 26px 48px rgba(3,20,12,.45), 0 8px 22px rgba(233,163,25,.18); }
}

/* ---- FAQ -------------------------------------------------------------- */
.faq{ max-width:78ch; margin-inline:auto; }
.faq .naslov--m{ margin-bottom:clamp(18px,2.4vw,28px); }
.faq__i{ border-top:1px solid var(--linija); }
.faq__i:last-of-type{ border-bottom:1px solid var(--linija); }
.tamno .faq__i{ border-color:var(--linija-s); }
.faq__i summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--serif); font-size:clamp(19px,2.1vw,24px); line-height:1.25;
  transition:color .2s var(--e);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary:hover{ color:var(--med); }
.faq__i summary::after{
  content:''; position:absolute; right:6px; top:50%; width:12px; height:12px;
  translate:0 -50%; transition:transform .28s var(--e);
  background:
    linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;
  color:var(--med);
}
.faq__i[open] summary::after{ transform:rotate(135deg); }
.faq__o{ padding:0 0 22px; color:var(--ink-2); max-width:66ch; }
.faq__o p + p{ margin-top:12px; }
.tamno .faq__o{ color:rgba(247,241,227,.78); }
@media (prefers-reduced-motion:no-preference){
  .faq__i[open] .faq__o{ animation:faq-otvara .32s var(--e) both; }
  @keyframes faq-otvara{ from{ opacity:0; translate:0 -6px; } }
}

/* ---- citat preko cele širine ------------------------------------------ */
.citat{
  padding-block:clamp(56px,8vw,110px); text-align:center;
  background:var(--krem-2);
}
.tamno.citat{ background:var(--bor); position:relative; overflow:clip; }
.tamno.citat .omot{ position:relative; z-index:2; }
.tamno.citat .hero-bloom{ opacity:.4; }
.citat blockquote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(26px,4.4vw,52px); line-height:1.14;
  max-width:22ch; margin-inline:auto; text-wrap:balance;
}
.citat blockquote em{ font-style:italic; color:var(--med); }
.citat figcaption{
  margin-top:22px; font-size:12.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}

/* ---- logotipi partnera ------------------------------------------------
   Logotip se prikazuje SAMO ako fajl postoji; ostali su tekst, nikad
   slomljena slika. Ta odluka je u podaci.js, ovde je samo izgled. */
.logozid{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,3.4vw,46px); }
/* Beskonačna traka partnera (Filip, 30.08.): red se udvostruči i klizi
   levo; ivice se otope u masci, pa nema "skoka" na spoju. U mirovanju
   (bez animacije) red stoji obično i prelama se. */
.logozid-traka{
  overflow:clip;
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logozid-red{ display:flex; width:max-content; }
.logozid-red .logozid{
  flex:none; flex-wrap:nowrap; align-items:center;
  padding-inline:clamp(11px,1.7vw,23px);
}
@media (prefers-reduced-motion:no-preference){
  .logozid-red{ animation:logozid-vozi 46s linear infinite; }
  .logozid-traka:hover .logozid-red{ animation-play-state:paused; }
  @keyframes logozid-vozi{ to{ transform:translateX(-50%); } }
}
.logozid img{
  height:clamp(28px,3vw,40px); width:auto; opacity:.62;
  filter:grayscale(1); transition:opacity .25s var(--e), filter .25s var(--e);
}
.logozid a:hover img,.logozid li:hover img{ opacity:1; filter:none; }
.logozid__t{ font-size:14px; font-weight:600; color:var(--ink-2); letter-spacing:.04em; }
.tamno .logozid__t{ color:rgba(247,241,227,.7); }

/* ---- forme ------------------------------------------------------------
   Jedan izgled za svih osam formi iz brifa. Polja su krupna (min 52px),
   oznake su prave <label>, greške se ispisuju tekstom pored polja i
   povezane su preko aria-describedby. */
.forma{ display:grid; gap:16px; max-width:56ch; }
.forma--siroka{ max-width:none; }
@media (min-width:720px){
  .forma--siroka{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .forma__pun{ grid-column:1 / -1; }
}
.polje{ display:grid; gap:7px; }
.polje > label{ font-size:13.5px; font-weight:700; letter-spacing:.02em; }
.polje > label .neob{ font-weight:400; color:var(--ink-2); }
.polje input,.polje textarea,.polje select{
  font:inherit; color:var(--ink); background:var(--krem);
  border:1.5px solid var(--linija); border-radius:10px;
  padding:14px 16px; min-height:52px; width:100%;
  transition:border-color .18s var(--e), box-shadow .18s var(--e), background-color .18s var(--e);
}
.polje textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.polje input:hover,.polje textarea:hover,.polje select:hover{ border-color:var(--ink-2); }
.polje input:focus,.polje textarea:focus,.polje select:focus{
  outline:none; border-color:var(--med); box-shadow:0 0 0 3px rgba(233,163,25,.24);
}
.polje__p{ font-size:12.5px; color:var(--ink-2); }
.polje__g{ font-size:13px; font-weight:600; color:#8E2B12; }
.polje[data-greska] input,.polje[data-greska] textarea,.polje[data-greska] select{ border-color:#B4472A; }
.tamno .polje input,.tamno .polje textarea,.tamno .polje select{
  background:rgba(247,241,227,.06); border-color:var(--linija-s); color:var(--krem);
}
.tamno .polje__p{ color:rgba(247,241,227,.66); }

/* mamac za robote: vidljiv samo njima. Ne `display:none`, jer ga deo
   automata preskoči; ovako je van kadra i van tab reda. */
.mamac{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.forma__dno{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:4px; }
.forma__pristanak{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); }
.forma__pristanak input{ min-height:0; width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--med); }
.forma__odgovor{ margin-top:14px; font-size:14.5px; border-radius:10px; padding:14px 16px; }
.forma__odgovor[data-stanje="ok"]{ background:rgba(14,74,48,.1); border:1px solid rgba(14,74,48,.3); }
.forma__odgovor[data-stanje="greska"]{ background:rgba(180,71,42,.1); border:1px solid rgba(180,71,42,.35); }
.forma__odgovor[hidden]{ display:none; }

/* ---- traka sa oznakama ------------------------------------------------ */
.oznake{ display:flex; flex-wrap:wrap; gap:8px; }
.oznake span,.oznake a{
  font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none;
  border:1px solid var(--linija); border-radius:999px; padding:7px 14px;
  transition:background-color .18s var(--e), color .18s var(--e), border-color .18s var(--e);
}
.oznake a:hover{ background:var(--bor); color:var(--krem); border-color:var(--bor); }

/* ---- dvokolonski tekst ------------------------------------------------ */
.tekst-dve{ columns:2; column-gap:clamp(28px,4vw,60px); max-width:none; }
@media (max-width:860px){ .tekst-dve{ columns:1; } }
.tekst-dve p{ break-inside:avoid; }
.tekst-dve p + p{ margin-top:14px; }

/* ---- zanimljivosti (David je tražio da budu na naslovnoj i edukaciji) --
   Kartica koja se okrene na dodir. Bez JS-a i uz reduced motion je
   obična kartica na kojoj piše i pitanje i odgovor. */
.zanim{ display:grid; gap:clamp(14px,2vw,20px); }
@media (min-width:700px){ .zanim{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .zanim{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.zanim__k{
  position:relative; border-radius:14px; padding:clamp(22px,2.6vw,30px);
  background:var(--bor-3); color:var(--krem); border:1px solid var(--linija-s);
  min-height:172px; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  overflow:hidden;
}
.zanim__b{
  font-family:var(--serif); font-size:clamp(38px,5vw,60px); line-height:1; color:var(--med-2);
}
.zanim__t{ font-size:15px; line-height:1.55; color:rgba(247,241,227,.86); }
.zanim__k::after{
  content:''; position:absolute; right:-30px; bottom:-30px; width:130px; height:130px;
  border-radius:50%; background:radial-gradient(circle, rgba(246,197,84,.22), transparent 68%);
  pointer-events:none;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .zanim__k{ transition:translate .45s var(--spring), box-shadow .35s var(--e); }
  .zanim__k:hover{ translate:0 -6px; box-shadow:0 24px 44px rgba(3,20,12,.4); }
  .zanim__k:hover .zanim__b{ transition:scale .45s var(--spring); scale:1.06; }
}

/* ---- prazna poruka / uskoro ------------------------------------------- */
.uskoro{
  border:1.5px dashed var(--linija); border-radius:14px;
  padding:clamp(28px,4vw,52px); text-align:center; color:var(--ink-2);
}
.uskoro b{ display:block; font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); color:var(--ink); margin-bottom:10px; }

/* ---- naslov srednje veličine ------------------------------------------ */
.naslov--m{ font-size:clamp(28px,3.6vw,44px); max-width:24ch; }
.naslov--s{ font-size:clamp(23px,2.6vw,32px); max-width:28ch; }


/* ===== 05-strane.css ===== */
/* Heroj i ono što pripada pojedinačnim stranama. */

/* ---------- HERO ----------
   Spolja .hero nosi visinu scene, unutra .hero-lepak drži ekran.
   U mirovanju (bez JS-a, ispod 900px, uz reduced motion) .hero nema
   nikakvu zadatu visinu i .hero-lepak je obična sekcija od jednog
   ekrana: fotografija preko celog kadra, slog preko nje. Gotovo. */
.hero{ position:relative; color:var(--krem); background:var(--bor-2); }
.hero-lepak{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:clip;
}
.hero-slika{ position:absolute; inset:0; }
.hero-slika img{ width:100%; height:100%; object-fit:cover; object-position:62% 40%; }
.hero-slika::after{
  content:''; position:absolute; inset:0;
  background:
    /* dno se RASTVARA u boju trake brojeva (--bor-2), pa prelaz sa
       fotografije na prvi odeljak ispod ne bude oštra crta (Filip,
       30.08: „prelaz mora da bude mekan") */
    linear-gradient(180deg, rgba(7,42,27,.80) 0%, rgba(7,42,27,.32) 30%, rgba(7,42,27,.22) 52%, rgba(7,42,27,.68) 74%, #072A1B 97%),
    /* levi pojas malo jače prigušen: gore-levo nebo je bledo pa je pola
       heroja delovalo prazno (Filipov snimak 30.08) */
    linear-gradient(78deg, rgba(7,42,27,.62) 0%, rgba(7,42,27,0) 58%);
}
.hero-sadrzaj{
  position:relative; z-index:2; width:100%;
  max-width:var(--sirina); margin-inline:auto; padding-inline:var(--uz);
  padding-top:calc(var(--zag) + 56px); padding-bottom:clamp(90px,14vh,150px);
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--med-2); margin-bottom:20px;
}
.hero-kicker::before{ content:''; width:30px; height:1.5px; background:var(--med); }
.hero h1{
  font-size:clamp(46px,9vw,110px); line-height:.98; letter-spacing:0;
  max-width:12ch; text-wrap:balance;
}
.hero h1 em{ font-style:italic; color:var(--med-2); }
.hero-tekst{
  margin-top:22px; max-width:52ch; font-size:clamp(16px,2vw,19px);
  color:rgba(247,241,227,.88); line-height:1.6;
}
.hero-dugmad{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-strela{
  position:absolute; z-index:2; left:50%; bottom:22px; translate:-50% 0;
  color:rgba(247,241,227,.65); font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.hero-strela::after{ content:''; width:1.5px; height:34px; background:linear-gradient(var(--med), transparent); }
/* med koji podvuče kurziv u naslovu heroja; bez JS-a je odmah iscrtan */
.hero h1 em{
  background-image:linear-gradient(transparent 64%, rgba(246,197,84,.3) 64%, rgba(246,197,84,.3) 93%, transparent 93%);
  background-repeat:no-repeat; background-size:100% 100%; background-position:0 0;
}

/* ulaz heroja: prvo kadar se smiri, pa znak, pa naslov, pa ostalo.
   Sve visi na html.js, klasi koju dodaje sama strana: bez JS-a nema
   nijednog polaznog stanja i hero je odmah ceo. */
@media (prefers-reduced-motion:no-preference){
  /* Ulazni kadar sada sedi na 1.04 (a ne 1), pa iz njega diše dalje:
     sporo zumiranje napred-nazad čitav vremena (Filip, 30.08: „slika
     treba da bude življa, više zuma"). Zumiranje je na <img>, a parallax
     pri skrolanju na .hero-slika omotaču, da se dva transforma ne
     otimaju o isti element. */
  html.js .hero-slika img{
    animation:hero-kadar 1.5s var(--e) both,
              hero-dise 18s ease-in-out 1.6s infinite alternate;
  }
  @keyframes hero-kadar{ from{ transform:scale(1.14) translateX(1.5%); opacity:.38; } to{ transform:scale(1.04); opacity:1; } }
  @keyframes hero-dise{ from{ transform:scale(1.04); } to{ transform:scale(1.115); } }
  /* Parallax pri skrolanju. DVE STVARI SE OVDE NE VRAĆAJU (Filip, 30.08:
     „gradient bug… text is faded out, green line visible“):

     1. NE TRANSFORMISATI .hero-slika. Omotač nosi ::after, dakle sam preliv
        koji dno fotografije rastvara u --bor-2. Kad se omotač pomeri nadole
        (stajalo je translate3d do 3.5%), preliv siđe s njim, pa poslednji
        stop (#072A1B na 97%) padne ISPOD ivice odsecanja. Fotografija se
        onda seče tamo gde je preliv tek na .68, i na spoju sa trakom
        brojeva (pun #072A1B) ostaje vidljiva vodoravna crta. Preliv sme da
        se pomera samo zajedno sa ivicom koju rastvara, dakle nikako.
     2. NE GASITI .hero-sadrzaj. Slog je bledeo do .18 i naslov se gubio već
        na prvi zavrtaj točka. Isto piše i u 07-pokret.css: providnost
        sloga ostaje 1 celom scenom, nikad se ne gaši.

     Pokret zato ide isključivo na <img>, i to preko `scale`, ne preko
     `transform`: `transform` na toj slici drži animacija hero-dise (18s,
     infinite alternate), a animacija uvek gazi obično pravilo, pa je svaki
     `transform:scale(…)` na <img> mrtvo slovo. `scale` je zasebno svojstvo
     i uredno se slaže sa animiranim `transform`-om. */
  .hero[data-scena] .hero-slika img{ scale:calc(1 + var(--s, 0) * .06); }

  html.js .zaglavlje .marka{ animation:hero-ustaje .5s var(--e) both; }
  html.js .hero h1{ animation:hero-naslov .8s var(--e) .12s both; }
  html.js .hero h1 em{ background-size:0% 100%; animation:hero-med .85s var(--e) .62s forwards; }
  @keyframes hero-med{ to{ background-size:100% 100%; } }
  html.js .hero-kicker{ animation:hero-ustaje .5s var(--e) .26s both; }
  html.js .hero-kicker::before{ animation:hero-crta .7s var(--e) .34s both; }
  @keyframes hero-crta{ from{ width:0; } to{ width:30px; } }
  html.js .meni,
  html.js .zag-desno{ animation:hero-ustaje .5s var(--e) .3s both; }
  html.js .hero-tekst{ animation:hero-ustaje .5s var(--e) .32s both; }
  html.js .hero-dugmad{ animation:hero-ustaje .5s var(--e) .38s both; }
  /* strela se posle ulaza pusti, da joj providnost ostane slobodna
     za motor na skrol; `backwards` ne zaključava kraj kao `both`. */
  html.js .hero-strela{ animation:hero-ustaje .5s var(--e) .38s backwards; }
  @keyframes hero-ustaje{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @keyframes hero-naslov{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
}

/* ---------- ČETIRI NOVE SILUETE ZAGLAVLJA STRANE --------------------
   Srodne strane ne smeju deliti istu siluetu (Filipov zahtev 30.08:
   „svaka strana jedinstvena i kreativna na svoj način"). Ovde su samo
   nove; osnovna (.zag-strane bez modifikatora) ostaje u 04b. */

/* unakrst: tekst levo, uspravna fotografija desno, srasle u jedan blok */
.zag-unakrst{
  display:grid; gap:clamp(28px,4.5vw,64px);
  align-items:end; grid-template-columns:1fr;
}
@media (min-width:1000px){
  .zag-unakrst{ grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr); }
  .zag-strane--unakrst .zag-strane__uspravna{ margin-bottom:calc(var(--uz) * -1); }
}
.zag-strane--unakrst .zag-strane__uspravna .slika{ border-radius:10px 10px 0 0; }
.zag-strane--unakrst h1{ max-width:14ch; }
.zag-strane--unakrst .zag-strane__t{ max-width:46ch; }

/* trak: tamno polje, naslov preko širine, niska traka slike dole */
.zag-strane--trak{ padding-top:clamp(18px,3vw,34px); }
.zag-strane--trak h1{ max-width:22ch; }
.zag-strane--trak .zag-strane__t{ max-width:62ch; }
.zag-strane--trak .zag-strane__traka{
  margin-top:clamp(26px,4vw,44px);
}
.zag-strane--trak .zag-strane__traka .slika{ aspect-ratio:21/6; border-radius:0; }
@media (max-width:760px){ .zag-strane--trak .zag-strane__traka .slika{ aspect-ratio:16/9; } }

/* preko: fotografija preko cele širine, slog leži na njoj */
.zag-strane--preko{ position:relative; padding-block:0; overflow:clip; }
.zag-preko__slika{ position:relative; }
.zag-preko__slika .slika{ aspect-ratio:16/8; border-radius:0; }
@media (max-width:760px){ .zag-preko__slika .slika{ aspect-ratio:4/3; } }
.zag-preko__slika::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(7,42,27,.62) 0%, rgba(7,42,27,.34) 46%, rgba(7,42,27,.86) 100%);
}
.zag-preko__tekst{
  position:relative; z-index:2;
  margin-top:calc(clamp(150px,24vw,300px) * -1);
  padding-bottom:clamp(26px,4vw,46px);
  color:var(--krem);
}
.zag-preko__tekst h1{ max-width:16ch; }
.zag-preko__tekst h1 em{ color:var(--med-2); }
.zag-preko__tekst .zag-strane__t{ color:rgba(247,241,227,.88); }
.zag-preko__tekst .zag-strane__meta span{ border-color:var(--linija-s); color:rgba(247,241,227,.85); }

/* sto: urednička uska kolona, bez fotografije */
.zag-strane--sto{ border-top:1px solid var(--linija); }
.zag-strane--sto h1{ max-width:15ch; font-size:clamp(40px,6.8vw,88px); }
.zag-strane--sto .zag-strane__t{ max-width:52ch; }
.zag-strane--sto .zag-strane__k{ margin-bottom:18px; }

/* trak zaglavlje diše: cvetanje svetla preko tamnog polja (bloom sada
   deli kalup sa herojem; Filip 30.08: „dodaj ovu animaciju pčele češće") */
.zag-strane--trak{ position:relative; overflow:clip; }
.zag-strane--trak .hero-bloom{ z-index:0; }
.zag-strane--trak .omot{ position:relative; z-index:2; }


/* ===== 06-shop.css ===== */
/* Prodavnica. Gradi se odmah, pušta se posle 13.09.2026.
   Dok je sajt.shopUkljucen false, ove strane postoje i rade, ali nisu
   u meniju, nose noindex i nisu u sitemapu. Stil je isti jezik kao
   ostatak sajta: papir, med, duboka zelena. */

/* ---- mreža proizvoda -------------------------------------------------- */
.proizvodi{ display:grid; gap:clamp(18px,2.4vw,28px); }
@media (min-width:620px){ .proizvodi{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .proizvodi{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pk{
  display:flex; flex-direction:column; position:relative;
  border:1px solid var(--linija); border-radius:12px; overflow:hidden;
  background:var(--krem); text-decoration:none; color:inherit;
}
.pk .slika{ border-radius:0; aspect-ratio:4/5; background:var(--krem-2); }
.pk__t{ padding:clamp(16px,2vw,22px); display:flex; flex-direction:column; gap:8px; flex:1; }
.pk__n{ font-family:var(--serif); font-size:clamp(21px,2.2vw,26px); line-height:1.12; }
.pk__o{ font-size:14px; color:var(--ink-2); line-height:1.5; }
.pk__d{ margin-top:auto; padding-top:10px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pk__c{ font-family:var(--serif); font-size:clamp(20px,2.2vw,25px); color:var(--ink); }
.pk__c small{ font-family:var(--grot); font-size:12.5px; color:var(--ink-2); margin-left:5px; }
.pk__z{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--med); position:absolute; left:14px; top:14px;
  background:var(--krem); border-radius:999px; padding:6px 12px;
  box-shadow:0 4px 14px rgba(7,42,27,.14);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pk{ transition:translate .45s var(--spring), box-shadow .35s var(--e), border-color .25s var(--e); }
  .pk:hover{ translate:0 -6px; border-color:var(--med); box-shadow:0 22px 44px rgba(7,42,27,.14); }
}

/* ---- strana proizvoda -------------------------------------------------- */
.proizvod{ display:grid; gap:clamp(28px,4vw,60px); align-items:start; }
@media (min-width:900px){ .proizvod{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.proizvod__slike{ display:grid; gap:12px; }
.proizvod__slike .slika{ aspect-ratio:4/5; }
.proizvod__male{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.proizvod__male .slika{ aspect-ratio:1/1; cursor:pointer; }
.proizvod h1{ font-size:clamp(32px,4.6vw,54px); line-height:1.04; }
.proizvod__c{
  margin-top:16px; font-family:var(--serif); font-size:clamp(28px,3.4vw,40px); color:var(--ink);
}
.proizvod__c small{ font-family:var(--grot); font-size:14px; color:var(--ink-2); margin-left:8px; }
.proizvod__opis{ margin-top:18px; color:var(--ink-2); max-width:52ch; line-height:1.65; }
.proizvod__opis p + p{ margin-top:12px; }

.varijante{ margin-top:24px; display:grid; gap:10px; }
.varijante__n{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.varijante__r{ display:flex; flex-wrap:wrap; gap:8px; }
.varijante__r label{
  border:1.5px solid var(--linija); border-radius:999px; padding:10px 18px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:border-color .18s var(--e), background-color .18s var(--e), color .18s var(--e);
}
.varijante__r input{ position:absolute; opacity:0; width:0; height:0; }
.varijante__r label:hover{ border-color:var(--ink-2); }
.varijante__r input:checked + span,
.varijante__r label:has(input:checked){ background:var(--bor); color:var(--krem); border-color:var(--bor); }
.varijante__r label:has(input:focus-visible){ outline:3px solid var(--med); outline-offset:3px; }

.kolicina{ display:inline-flex; align-items:center; border:1.5px solid var(--linija); border-radius:999px; overflow:hidden; }
.kolicina button{
  width:46px; height:50px; border:0; background:transparent; cursor:pointer; font-size:19px;
  transition:background-color .15s var(--e);
}
.kolicina button:hover{ background:var(--krem-2); }
.kolicina input{
  width:52px; height:50px; border:0; text-align:center; font:inherit; font-weight:700;
  background:transparent; -moz-appearance:textfield;
}
.kolicina input::-webkit-outer-spin-button,.kolicina input::-webkit-inner-spin-button{ appearance:none; margin:0; }

.proizvod__kupi{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---- korpa -------------------------------------------------------------- */
.korpa{ display:grid; gap:clamp(28px,4vw,52px); align-items:start; }
@media (min-width:940px){ .korpa{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } }
.korpa__red{
  display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:18px 0; border-top:1px solid var(--linija);
}
.korpa__red:last-child{ border-bottom:1px solid var(--linija); }
.korpa__red .slika{ aspect-ratio:1/1; border-radius:8px; }
.korpa__n{ font-family:var(--serif); font-size:19px; line-height:1.2; }
.korpa__v{ font-size:13px; color:var(--ink-2); margin-top:3px; }
.korpa__ukloni{
  border:0; background:transparent; cursor:pointer; color:var(--ink-2);
  font-size:12.5px; text-decoration:underline; text-underline-offset:3px; margin-top:6px; padding:0;
}
.korpa__ukloni:hover{ color:#B4472A; }
.korpa__c{ font-family:var(--serif); font-size:20px; white-space:nowrap; }

.racun{
  background:var(--krem-2); border:1px solid var(--linija); border-radius:14px;
  padding:clamp(22px,2.8vw,30px); position:sticky; top:calc(var(--zag) + 20px);
}
.racun h2{ font-size:clamp(22px,2.4vw,28px); margin-bottom:16px; }
.racun__r{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:15px; color:var(--ink-2); }
.racun__r b{ color:var(--ink); font-weight:700; }
.racun__z{
  margin-top:12px; padding-top:16px; border-top:1px solid var(--linija);
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  font-family:var(--serif); font-size:clamp(22px,2.6vw,28px);
}
.racun .dug{ width:100%; margin-top:20px; }
.racun__nota{ margin-top:14px; font-size:12.5px; color:var(--ink-2); line-height:1.5; }

.korpa-prazna{ text-align:center; padding:clamp(40px,7vw,90px) 0; }
.korpa-prazna b{ display:block; font-family:var(--serif); font-size:clamp(26px,3.4vw,38px); margin-bottom:12px; }
.korpa-prazna p{ color:var(--ink-2); max-width:44ch; margin-inline:auto; }
.korpa-prazna .dug{ margin-top:26px; }

/* brojač u zaglavlju */
.zag-korpa{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1px solid currentColor; text-decoration:none; }
.zag-korpa b{
  position:absolute; right:-4px; top:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--med); color:#231500;
  font-size:11.5px; font-weight:700; display:grid; place-items:center;
}
.zag-korpa[data-prazna] b{ display:none; }

/* ---- kasa ---------------------------------------------------------------- */
.kasa{ display:grid; gap:clamp(28px,4vw,52px); align-items:start; }
@media (min-width:940px){ .kasa{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } }
.kasa__grupa{ margin-bottom:clamp(26px,3.4vw,40px); }
.kasa__grupa h2{
  font-size:clamp(20px,2.2vw,25px); margin-bottom:16px;
  display:flex; align-items:baseline; gap:12px;
}
.kasa__grupa h2 b{ font-family:var(--grot); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--med); }

/* Obaveštenje da prodavnica još ne radi. Stoji dok se ne pusti,
   i uklanja se jednim prekidačem u podaci.js. */
.shop-najava{
  background:var(--bor); color:var(--krem); border-radius:14px;
  padding:clamp(22px,3vw,34px); display:grid; gap:12px; max-width:64ch;
}
.shop-najava b{ font-family:var(--serif); font-size:clamp(23px,2.8vw,30px); color:var(--med-2); }
.shop-najava p{ color:rgba(247,241,227,.82); font-size:15px; line-height:1.6; }


/* ===== 07-pokret.css ===== */
/* Otkrivanje na skrol, motor (--p), scene (--s). */

/* ---------- otkrivanje ----------
   Skriveno stanje nosi html.anim, klasa koju vrt.js dodaje TEK kada
   potvrdi da posmatrač radi. Bez JS-a, ili ako vrt.js padne, ništa
   nije sakriveno i strana je kompletna. */
html.anim .otk{ opacity:0; transform:translateY(12px); }
html.anim .otk[data-vidljiv]{ opacity:1; transform:none; transition:opacity .45s var(--e), transform .45s var(--e); }
@media (prefers-reduced-motion:reduce){
  html.anim .otk{ opacity:1!important; transform:none!important; }
  html.js .mq-red{ animation:none; }
  .slika img{ transition:none; }
}


/* =========================================================================
   ANIMACIJE, drugi sloj. Sve iza html.js i prefers-reduced-motion:
   bez JS-a i uz reduced-motion strana je mirna i kompletna.
   ========================================================================= */

/* traka napretka čitanja, uz samu gornju ivicu */
.tok{
  position:fixed; left:0; top:0; height:3px; width:100%; z-index:210;
  background:linear-gradient(90deg, var(--med), var(--med-2));
  transform:scaleX(0); transform-origin:left;
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    html.js .tok{ animation:tok-raste linear both; animation-timeline:scroll(root); }
    @keyframes tok-raste{ to{ transform:scaleX(1); } }
  }
}

/* hero paralaksa je prešla na motor (odeljak MOTOR na dnu fajla):
   isti pokret, ali radi u svakom pregledaču, ne samo tamo gde postoji
   animation-timeline: view(). */

/* kicker linija se iscrta kad naslov uđe u ekran */
html.anim .kicker::after{ transform:scaleX(0); transform-origin:left; transition:transform .8s var(--e) .15s; }
html.anim .kicker[data-vidljiv]::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ html.anim .kicker::after{ transform:scaleX(1); } }

/* fotografije unutar .otk se otkriju brisanjem s leva na desno, uz
   rotaciju od jednog stepena koja se ispravi. Skriveno stanje visi na
   html.anim, klasi koju JS doda tek kad zna da posmatrač radi. */
@media (prefers-reduced-motion:no-preference){
  /* `round var(--r)` NIJE ukras: bez njega je clip pravougaon i iseče
     zaobljene uglove fotografije čim predak prestane da ih odseca (vidi
     objašnjenje uz `.slika` u 04-komponente.css). */
  html.anim .otk .slika{
    clip-path:inset(0 100% 0 0 round var(--r,6px)); rotate:-1.2deg;
    transition:clip-path 1s var(--e), rotate .9s var(--e), box-shadow .35s var(--e);
  }
  html.anim .otk[data-vidljiv] .slika{ clip-path:inset(0 0 0 0 round var(--r,6px)); rotate:0deg; }
  /* u punoj kartici bi rotacija otvorila trougao u uglu, pa tu ostaje ravno */
  html.anim .otk .api-k .slika,
  html.anim .otk[data-vidljiv] .api-k .slika{ rotate:0deg; }
}

/* stagger: deca ulaze jedno po jedno, ceo niz stane u 400ms.
   Ulaz vozi keyframe animacija (ne transition), da `transition`
   ostane slobodan za hover sloj na .api-k/.edu-k/.glas i da posle
   ulaska ne ostane nikakav transition-delay. */
html.anim .stagger{ opacity:1; transform:none; }
html.anim .stagger > *{ opacity:0; transform:translateY(12px); }
html.anim .stagger[data-vidljiv] > *{
  opacity:1; transform:none;
  animation:stagger-ulaz .45s var(--e) backwards;
}
html.anim .stagger[data-vidljiv] > :nth-child(2){ animation-delay:.05s; }
html.anim .stagger[data-vidljiv] > :nth-child(3){ animation-delay:.1s; }
html.anim .stagger[data-vidljiv] > :nth-child(4){ animation-delay:.15s; }
html.anim .stagger[data-vidljiv] > :nth-child(5){ animation-delay:.2s; }
html.anim .stagger[data-vidljiv] > :nth-child(6){ animation-delay:.25s; }
html.anim .stagger[data-vidljiv] > :nth-child(7){ animation-delay:.3s; }
html.anim .stagger[data-vidljiv] > :nth-child(8){ animation-delay:.35s; }
@keyframes stagger-ulaz{ from{ opacity:0; transform:translateY(12px); } }
@media (prefers-reduced-motion:reduce){
  html.anim .stagger > *{ opacity:1!important; transform:none!important; animation:none!important; }
}

/* galerija: kartice blago ustaju dok ulaze sa strane */
@supports (animation-timeline: view(inline)){
  @media (prefers-reduced-motion:no-preference){
    html.js .g-kartica{
      animation:g-ulazi linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% entry 60%;
    }
    @keyframes g-ulazi{ from{ opacity:.35; translate:36px 0; } }
  }
}

/* dugmad: strelica koja se pomeri, med koji se prelije */
.dug{ position:relative; overflow:clip; }
.dug--med::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  translate:-120% 0;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .dug--med:hover::after{ transition:translate .7s var(--e); translate:120% 0; }
}


/* =========================================================================
   WOW SLOJ. Svetlo koje cveta, pčela koja preleti, scena koja se otvori,
   marker koji podvuče, opruga na dodiru. Sve mirno bez JS-a i uz
   prefers-reduced-motion.
   ========================================================================= */

/* ---------- hero: cvetanje svetla ---------- */
.hero-bloom{
  position:absolute; inset:0; z-index:1; pointer-events:none; contain:paint;
  filter:blur(52px); opacity:.5; mix-blend-mode:screen;
}
.bl{ position:absolute; border-radius:50%; }
.bl-1{ left:8%;  top:16%; width:34vw; height:34vw; background:radial-gradient(circle, rgba(246,197,84,.85), transparent 65%); }
.bl-2{ right:4%; top:44%; width:28vw; height:28vw; background:radial-gradient(circle, rgba(233,163,25,.6), transparent 65%); }
.bl-3{ left:38%; bottom:-10%; width:30vw; height:30vw; background:radial-gradient(circle, rgba(160,220,140,.5), transparent 65%); }
@media (prefers-reduced-motion:no-preference){
  html.js .bl{ animation:bl-dise 9s ease-in-out infinite alternate; }
  html.js .bl-2{ animation-delay:-3s; }
  html.js .bl-3{ animation-delay:-6s; }
  @keyframes bl-dise{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(4vw,-3vh) scale(1.15); }
  }
}

/* ---------- pčele koje prelete odeljak ----------
   Ranije je ovde stajala JEDNA pčela i samo u heroju (.hero-pcela).
   Filip (30.08): „add flying bees on the website more often“. Sada je to
   roj: pomoćnik `pcele()` iz kalup.js sipa znak u omot koji sam odseca, a
   ovde stoje četiri putanje. Razlikuju se u smeru, visini, brzini,
   kašnjenju i veličini, jer četiri iste pčele u istom ritmu odaju petlju.

   Gde lete: heroj (1+2), scena api komore (1+4), traka brojki (3) i poziv
   na kraju SVAKE strane (2+3). Poziv je razlog zašto se pčela sada vidi na
   svih 30 strana, a ne samo na naslovnoj.

   Šta drži ovo pod kontrolom:
   - `.pcele` je apsolutan omot sa overflow:clip. Putanja ide do 118vw i bez
     odsecanja bi razvukla stranu u širinu. Roditelj mora biti positioned.
   - opacity kreće i završava na 0, pa pčela ulazi i izlazi iz kadra umesto
     da bljesne na ivici.
   - sve visi na html.js i na prefers-reduced-motion:no-preference: bez JS-a
     i u smirenom režimu pčele ostaju nevidljive i nepomične. */
.pcele{
  position:absolute; inset:0; z-index:2;
  overflow:clip; pointer-events:none;
}
.pcela{
  position:absolute; width:38px; height:auto; color:var(--med-2);
  opacity:0; filter:drop-shadow(0 6px 18px rgba(7,42,27,.4));
}
.pcela--1{ left:-8%; top:34%;    width:44px; }
.pcela--2{ left:-8%; top:64%;    width:27px; }
.pcela--3{ right:-8%; top:19%;   width:33px; }
.pcela--4{ left:-8%; bottom:14%; width:23px; }

@media (prefers-reduced-motion:no-preference){
  html.js .pcela--1{ animation:pcela-1 13s linear 1.4s infinite; }
  html.js .pcela--2{ animation:pcela-2 19s linear 5.5s infinite; }
  html.js .pcela--3{ animation:pcela-3 16s linear 8.5s infinite; }
  html.js .pcela--4{ animation:pcela-4 24s linear 3s   infinite; }

  /* 1. nalevo nadesno, sredinom kadra, najkrupnija */
  @keyframes pcela-1{
    0%   { opacity:0;  translate:0 0;         rotate:8deg; }
    4%   { opacity:.9; }
    25%  { translate:32vw -7vh;  rotate:-6deg; }
    50%  { translate:62vw 2vh;   rotate:7deg; }
    72%  { translate:84vw -8vh;  rotate:-4deg; }
    86%  { opacity:.9; }
    100% { opacity:0;  translate:118vw -14vh; rotate:6deg; }
  }
  /* 2. nisko i sporo, sitnija, jači talas gore-dole */
  @keyframes pcela-2{
    0%   { opacity:0;  translate:0 0;         rotate:-5deg; }
    6%   { opacity:.75; }
    22%  { translate:26vw 5vh;   rotate:9deg; }
    44%  { translate:52vw -6vh;  rotate:-8deg; }
    68%  { translate:78vw 4vh;   rotate:6deg; }
    88%  { opacity:.75; }
    100% { opacity:0;  translate:118vw -3vh;  rotate:-4deg; }
  }
  /* 3. suprotan smer, gornja trećina; znak je vodoravno simetričan pa mu
     za let ulevo ne treba nikakvo ogledanje */
  @keyframes pcela-3{
    0%   { opacity:0;  translate:0 0;          rotate:-7deg; }
    5%   { opacity:.85; }
    28%  { translate:-30vw 6vh;   rotate:5deg; }
    55%  { translate:-58vw -4vh;  rotate:-6deg; }
    78%  { translate:-86vw 7vh;   rotate:4deg; }
    90%  { opacity:.85; }
    100% { opacity:0;  translate:-118vw 12vh;  rotate:-3deg; }
  }
  /* 4. pri dnu, najsporija i najsitnija: čita se kao daleka pčela */
  @keyframes pcela-4{
    0%   { opacity:0;  translate:0 0;         rotate:4deg; }
    8%   { opacity:.6; }
    30%  { translate:29vw -4vh;  rotate:-5deg; }
    58%  { translate:60vw 3vh;   rotate:6deg; }
    80%  { translate:88vw -5vh;  rotate:-3deg; }
    92%  { opacity:.6; }
    100% { opacity:0;  translate:118vw 2vh;   rotate:5deg; }
  }
}

/* ---------- scena: api komora se otvori preko celog ekrana ---------- */
.scena{ background:var(--bor-2); position:relative; }
.scena-slika{ position:absolute; inset:0; }
.scena-slika img{ width:100%; height:100%; object-fit:cover; }
.scena-slika::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,42,27,.4) 0%, rgba(7,42,27,.05) 40%, rgba(7,42,27,.62) 100%);
}
.scena-lepak{ position:relative; height:100svh; overflow:clip; display:flex; align-items:flex-end; }
.scena-tekst{
  position:relative; z-index:2; width:100%;
  max-width:var(--sirina); margin-inline:auto; padding:0 var(--uz) clamp(48px,9vh,96px);
  font-family:var(--serif); color:var(--krem);
  font-size:clamp(30px,5vw,58px); line-height:1.08; text-wrap:balance;
}
.scena-red{ display:block; }
.scena-red--em{ font-style:italic; color:var(--med-2); }
/* Scenu vozi motor, iz --s: vidi odeljak SCENE na dnu fajla.
   U mirovanju je ovo jedan ekran fotografije sa slogom preko nje. */

/* ---------- highlighter: med podvuče reč kada naslov uđe ---------- */
.naslov em{
  background-image:linear-gradient(transparent 62%, rgba(233,163,25,.32) 62%, rgba(233,163,25,.32) 92%, transparent 92%);
  background-repeat:no-repeat; background-size:100% 100%; background-position:0 0;
}
html.anim .naslov em{ background-size:0% 100%; }
html.anim .otk[data-vidljiv] .naslov em,
html.anim .naslov.otk[data-vidljiv] em,
html.anim .kicker[data-vidljiv] + .naslov em,
html.anim .kicker[data-vidljiv] ~ * .naslov em{
  background-size:100% 100%;
  transition:background-size .9s var(--e) .25s;
}
@media (prefers-reduced-motion:reduce){ .naslov em{ background-size:100% 100%; } }

/* ---------- opruga na dodiru: podizanje + topla senka ---------- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .api-k,.edu-k,.g-kartica,.glas{ transition:translate .45s var(--spring), rotate .45s var(--spring); }
  .api-k{ transition:translate .45s var(--spring), rotate .45s var(--spring), box-shadow .35s var(--e); }
  .edu-k .slika,.g-kartica .slika{ transition:box-shadow .35s var(--e); }
  .api-k:hover{
    translate:0 -8px; rotate:-.4deg;
    box-shadow:0 26px 48px rgba(3,20,12,.45), 0 8px 22px rgba(233,163,25,.18);
  }
  .edu-k:hover{ translate:0 -8px; rotate:.4deg; }
  .edu-k:hover .slika,.g-kartica:hover .slika{
    box-shadow:0 20px 40px rgba(148,96,12,.22), 0 6px 16px rgba(7,42,27,.12);
  }
  .g-kartica:hover{ translate:0 -6px; }
  .glas:hover{ translate:0 -6px; }
  .spisak li b,.spisak .crta{ transition:color .25s var(--e), background-color .25s var(--e), opacity .25s var(--e); }
  .spisak li:hover b{ color:var(--med-2); }
  .spisak li:hover .crta{ background:var(--med-2); opacity:1; }
  .marka svg{ transition:transform .45s var(--spring); }
  .marka:hover svg{ transform:rotate(-8deg) scale(1.12); }
  .g-strelice button{ transition:transform .35s var(--spring), background-color .15s var(--e), color .15s var(--e); }
  .g-strelice button:hover{ transform:scale(1.12); }
  .burger{ transition:transform .35s var(--spring); }
  .burger:hover{ transform:rotate(-6deg) scale(1.06); }
}

/* ---------- marquee: rukom se zaustavi ---------- */
.mq:hover .mq-red{ animation-play-state:paused; }

/* ---------- mala slika u splitu lagano plovi ----------
   Isti hod od 34px kao ranije, samo ga sada vozi motor, pa plovi i
   tamo gde animation-timeline: view() ne postoji. */
@media (prefers-reduced-motion:no-preference){
  html.scrub .split-slike .slika--mala{ translate:0 calc(34px - 68px * var(--p,.5)); }
}

/* ---------- hero strela pulsira ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-strela::after{ animation:strela-kaplje 2s var(--e) infinite; }
  @keyframes strela-kaplje{
    0%{ transform:scaleY(.2); transform-origin:top; }
    55%{ transform:scaleY(1); transform-origin:top; }
    56%{ transform-origin:bottom; }
    100%{ transform:scaleY(.15); transform-origin:bottom; }
  }
}


/* =========================================================================
   MOTOR: pokret vezan za položaj u ekranu.
   vrt.js svakom obeleženom elementu upisuje --p, od 0 kad tek ulazi
   odozdo do 1 kad je sasvim izašao gore. CSS iz tog jednog broja crta
   sve ostalo. Dva pravila drže ovaj sloj bezbednim:
     1. svako var(--p, x) nosi rezervu koja je gotovo, mirno stanje,
        pa ako motor nikad ne krene ništa nije ni pomereno ni sakriveno;
     2. sve što menja raspored visi na html.scrub, klasi koju motor
        doda tek kad zaista počne da radi, i nikad pod reduced motion.
   Ništa ovde ne dira točak miša: samo se čita položaj strane.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){

  /* --- fotografija diše dok prolazi kroz ekran: 1.10 -> 1.00 ---------------
     Omotač .slika već ima overflow:hidden, pa nema praznine na ivicama.
     Uvećanje ide kroz transform, a hover kroz scale, da se ne otimaju.
     Namerno bez will-change: on rasterizuje sloj u polaznoj skali i
     fotografija ostane mutna. */
  html.scrub .slika img{ transform:scale(calc(1.10 - .10 * var(--p,1))); }

  /* --- paralaksa u dva sloja: fotografija gore, potpis dole -------------- */
  html.scrub figure[data-scrub="par"] .slika{ translate:0 calc((var(--p,.5) - .5) * -26px); }
  html.scrub figure[data-scrub="par"] .potpis{ translate:0 calc((var(--p,.5) - .5) * 24px); }

  /* hero se od ovog izdanja vozi kao scena, iz --s: vidi odeljak SCENE */

  /* --- traka: povede se za skrolom i sama se smiri -----------------------
     Samo je ovo naše: dok strana klizi, med ispod heroja se nagne u
     smeru kretanja. Vrednost --brzina dolazi iz istog rAF-a i pada na
     nulu čim se strana zaustavi. Marquee već klizi kroz `translate`,
     pa se nagib piše u `transform` i njih dvoje se sabiraju. */
  html.scrub .mq-red{ transform:translateX(clamp(-22px, calc(var(--brzina,0) * 1px), 22px)); }

  /* --- pečat se okreće, znak u pozadini se blago povede ------------------ */
  html.scrub .poziv-pecat{ rotate:calc((var(--p,.5) - .5) * 60deg); }
  html.scrub .poziv-sat{
    rotate:calc((var(--p,.5) - .5) * 6deg);
    scale:calc(1.06 - .1 * var(--p,.5));
  }
}

/* ---------- pečat: znak koji se okreće u pozivu ----------
   Ukras, van čitanja (aria-hidden), ali tekst u njemu ipak ima svoj
   data-en, pa se prevodi zajedno sa stranom. U mirovanju stoji ravno. */
.poziv-pecat{
  position:absolute; z-index:3; display:none;
  right:clamp(20px,5vw,72px); bottom:clamp(20px,5vw,64px);
  width:clamp(104px,12vw,150px);
  color:var(--med-2); opacity:.9; pointer-events:none;
}
@media (min-width:760px){ .poziv-pecat{ display:block; } }
.poziv-pecat svg{ display:block; width:100%; height:auto; overflow:visible; }
.poziv-pecat text{
  font-family:var(--grot); font-size:13.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; fill:currentColor;
}
.poziv-pecat .pecat-prsten{ fill:none; stroke:currentColor; stroke-width:1; opacity:.4; }
.poziv-pecat .pecat-jezgro{ fill:var(--med); }


/* =========================================================================
   SCENE.
   Scena je odeljak koji se prikači uz ekran i u kojem se, dok se skroluje,
   nešto stvarno dogodi. Pravila kojih se ceo ovaj odeljak drži:

   1. MIROVANJE JE GOTOVO STANJE. Sve dole visi na html.scrub, klasi koju
      vrt.js doda tek kad motor zaista krene, i na (min-width:900px) uz
      prefers-reduced-motion:no-preference. Ako scena ne krene, ostane
      običan, složen odeljak. Nijedan tekst se nigde ne gasi u nulu.
   2. NAPREDAK JE GEOMETRIJA. vrt.js svakoj sceni upisuje --s, od 0 kad
      lepak tek treba da se prikači do 1 kad je scena pređena. Računa se
      svaki kadar iznova iz getBoundingClientRect, nikad iz keširanog vrha.
   3. HOD NIJE DUŽI OD DVA EKRANA. Visina scene minus visina lepka je
      pređeni put; nigde nije veći od 200svh.
   4. SKROL PRIPADA STRANI. Nijedno pravilo ovde, ni jedan red u vrt.js,
      ne dira točak: scena se prođe nadole i vrati nagore kao i sve ostalo.
   ========================================================================= */

/* mera trake se vidi samo u sceni; van nje je nema */
.traka-mera{ display:none; }

/* ---------------------------------------------------------------------
   SCENA 1. KADAR KOJI NARASTE (heroj)
   Fotografija počne kao uokviren kadar u sredini tamnog polja i, dok se
   skroluje, naraste preko celog ekrana; slog stoji preko nje sve vreme i
   ni u jednom trenutku ne pada ispod pune vidljivosti.
   Hod: 180svh - 100svh, dakle 0,8 ekrana. Namerno kratko: heroj je prvo
   što čitalac vidi i ne sme da se oseti kao da se strana zaglavila.

   ZAŠTO OVA SCENA IMA I USLOV VISINE (min-height:860px), a ostale nemaju:
   prikačen element viši od ekrana sam sebi sakrije dno, jer se dok stoji
   prikačen do njegovog dna ne može doskrolovati. Slog heroja je najviši
   blok na strani (na 1440px oko 830px sa donjim odbicima ispod), pa bi na
   niskom prozoru dugmad heroja ostala nedohvatljiva dok scena traje. Zato
   se scena pali tek kad ekran sigurno prima ceo slog. Ispod toga heroj je
   ono što i inače jeste: gotov celoekranski kadar sa slogom preko njega,
   a strana i dalje nosi četiri scene.
   --------------------------------------------------------------------- */
@media (min-width:900px) and (min-height:860px) and (prefers-reduced-motion:no-preference){
  /* --g je rast kadra: 0 uokviren, 1 pun ekran, dovršen na 52% hoda, pa
     ostatak scene kadar samo diše. Stoji na .hero, dakle na istom čvoru na
     koji motor upisuje --s, da bi ga nasledili i kadar i slog: prilagođena
     svojstva se nasleđuju naniže a ne postrance, pa bi --g postavljen na
     .hero-slika bio nevidljiv za .hero-sadrzaj.
     Lepku se namerno NE zadaje height, nego mu ostaje min-height iz osnovnog
     pravila: ako slog ipak preraste ekran, lepak sme da poraste i ništa se
     ne odseca. Hod se meri, ne pretpostavlja, pa se scena sama skrati za
     tačno onoliko koliko je lepak porastao. */
  html.scrub .hero{
    height:180svh;
    --g:clamp(0, calc(var(--s,1) / .52), 1);
  }
  html.scrub .hero-lepak{ position:sticky; top:0; }

  /* Odbici se u sceni malo stežu, i da kadar diše i da slog sigurno stane
     u ekran. Slog se uz to samo prisloni dok kadar raste; providnost mu
     ostaje 1 celom scenom, nikad se ne gasi. */
  html.scrub .hero-sadrzaj{
    padding-top:calc(var(--zag) + 40px);
    padding-bottom:clamp(72px,10vh,120px);
    translate:0 calc(26px * (1 - var(--g)));
  }

  /* HEROJ IDE OD IVICE DO IVICE, OD PRVOG KADRA.
     Ovde je ranije stajala maska od dva preliva koja je fotografiju
     držala uvučenu 7% / 13% / 26% / 13% i tek je na skrol puštala do
     ivica. Efekat je bio upravo ono što na širokom monitoru izgleda
     kao nalepljena ploča sa prelivom koja pluta na zelenoj praznini,
     sa vidljivim šavom tamo gde se maska gasi. Uklonjeno namerno i
     NE VRAĆATI: fotografija puni ekran uvek.
     Pokret ostaje, ali kao ono što pokret na heroju i treba da bude,
     spor otklon i vrlo blago primicanje kadra dok strana klizi. */
  html.scrub .hero-slika img{
    height:calc(100% + 64px);
    translate:0 calc(-32px + 64px * var(--s,1));
    /* Ovde je stajalo `transform:scale(calc(1.06 - .06 * var(--g)))`. Bilo je
       mrtvo slovo: `transform` na ovoj slici drži animacija hero-dise, a
       animacija gazi obično pravilo. Rast na skrol sada stoji u
       05-strane.css, na zasebnom svojstvu `scale`, koje se sa animiranim
       `transform`-om slaže umesto da se otima o isto svojstvo. */
  }
  html.scrub .hero-strela{ opacity:calc(1 - clamp(0, calc(var(--s,1) / .3), 1)); }
  html.scrub .hero-bloom{ opacity:calc(.5 - .26 * var(--s,1)); }
}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){

  /* ---------------------------------------------------------------------
     SCENA 4. ZID BROJKI
     Prikačen odeljak sa četiri krupne brojke; fokus prelazi s jedne na
     drugu dok se prolazi. Nijedna se ne gasi.
     Izmereno na tlu --bor-2 (#072A1B): brojka van fokusa, --med-2 na
     providnosti .68, daje 5.1:1, a u fokusu 9.6:1; potpis van fokusa,
     krem na .72, daje 7.7:1, a u fokusu 13.3:1. Najgori slučaj na celoj
     sceni je dakle 5.1:1, iznad tražena 4.5:1.
     Hod: 180svh - 100svh, dakle 0,8 ekrana.
     --------------------------------------------------------------------- */
  html.scrub .brojevi{ height:180svh; }
  html.scrub .zid-lepak{
    position:sticky; top:0; min-height:100svh; overflow:clip;
    display:grid; align-content:center;
  }
  html.scrub .brojevi-mreza{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,5vw,80px); row-gap:clamp(10px,2.4vh,30px);
    width:100%;
  }
  html.scrub .broj:nth-child(1){ --i:0; }
  html.scrub .broj:nth-child(2){ --i:1; }
  html.scrub .broj:nth-child(3){ --i:2; }
  html.scrub .broj:nth-child(4){ --i:3; }
  html.scrub .broj{
    /* rastojanje od fokusa, pa iz njega --f: 1 u fokusu, 0 daleko.
       max() umesto abs(): abs() je premlad za sve pregledače. */
    --d:calc(var(--s,0) * 3 - var(--i,0));
    --ad:max(var(--d), calc(-1 * var(--d)));
    --f:clamp(0, calc(1 - var(--ad) / .85), 1);
    position:relative;
    padding:clamp(18px,2.6vw,34px) 20px clamp(18px,2.6vw,34px) 0;
    border-top:1px solid var(--linija-s);
  }
  /* u zidu nema uspravnih linija: dve kolone razmaknute rasporom,
     četiri vodoravne vlasi */
  html.scrub .brojevi-mreza .broj + .broj{ border-inline-start:0; padding-left:0; }
  /* medena vlas raste preko gornje linije brojke koja je u fokusu */
  html.scrub .broj::after{
    content:''; position:absolute; left:0; top:0; height:2px;
    width:calc(var(--f,0) * 100%); background:var(--med);
  }
  html.scrub .broj b{
    font-size:clamp(52px,7.4vw,116px);
    transform-origin:0 50%;
    scale:calc(.88 + .12 * var(--f,1));
    opacity:calc(.68 + .32 * var(--f,1));
  }
  html.scrub .broj span{
    margin-top:14px; font-size:15px; max-width:26ch;
    color:var(--krem); opacity:calc(.72 + .26 * var(--f,1));
  }

  /* ---------------------------------------------------------------------
     SCENA 2. KARTICE KOJE SE SLAŽU (Doživljaj, koraci)
     Svaki korak se prikači na vrh, sledeći naiđe preko njega, a onaj
     ispod se malo smanji i potamni. Na kraju stoji samo poslednji.
     Prekriveni koraci nikad ne kriju tekst: iznad njih se vidi samo
     traka od 12px, a to je njihova gornja margina.
     Hod: visina liste minus visina prve kartice, oko 1,2 ekrana.
     --------------------------------------------------------------------- */
  html.scrub .koraci{ display:block; }
  html.scrub .korak:nth-child(1){ --i:0; }
  html.scrub .korak:nth-child(2){ --i:1; }
  html.scrub .korak:nth-child(3){ --i:2; }
  html.scrub .korak:nth-child(4){ --i:3; }
  html.scrub .korak:nth-child(5){ --i:4; }
  html.scrub .korak:nth-child(6){ --i:5; }
  html.scrub .korak:nth-child(7){ --i:6; }
  html.scrub .korak:nth-child(8){ --i:7; }
  html.scrub .korak{
    /* Koliko je ova kartica prekrivena onima iznad nje: 0 sveža, 1 pod
       stogom.

       Geometrija: lepak scene je PRVA kartica, pa je hod = visina liste
       minus visina jedne kartice ≈ (n-1) koraka. Kartica i+1 zato stigne
       na vrh tačno na s = (i+1)/(n-1), a kreće da nailazi jedan korak
       ranije, na s = i/(n-1). Otud linearna rampa `s*(n-1) - i`, sečena na
       0 i 1: puna je u trenutku kad sledeća kartica stvarno legne preko.

       Ovde je do 30.08. stajao FIKSAN delilac 7,6 umesto (n-1). Bio je
       tačan samo za listu od osam koraka, a lista ih ima od 3 do 8: na
       listi od tri kartica je bila potpuno zatamnjena već na s≈0,13, dok
       je sledeća još bila ceo ekran ispod nje. Filip: „it stays in one
       place and then folds“. `--n` upisuje `koraci()` u kalup.js. */
    --pokriven:clamp(0, calc(var(--s,0) * (var(--n,8) - 1) - var(--i,0)), 1);
    position:sticky;
    top:calc(var(--zag) + 26px + var(--i,0) * 12px);
    margin-top:16px; min-height:138px;
    padding:26px 28px;
    background:var(--krem);
    border:1px solid var(--linija); border-radius:14px;
    box-shadow:0 18px 42px rgba(7,42,27,.10);
    transform-origin:50% 0;
    scale:calc(1 - .04 * var(--pokriven));
  }
  html.scrub .korak:first-child{ margin-top:0; }
  /* poslednja kartica je ona koja ostaje na vrhu stoga: nikad se ne gasi */
  html.scrub .korak:last-child{ --pokriven:0; border-bottom:1px solid var(--linija); }
  /* Tamnjenje kreće tek na poslednjih 20% pokrivenosti, dakle tek kad
     sledeća kartica stvarno naiđe. Razlog je izmeren: kartica i biva
     zaklonjena na --pokriven oko 0,90, i tu je zastor 0,21, na čemu telo
     koraka (--ink-2 na --krem) daje 4.7:1. Da zastor raste od početka,
     u istom trenutku bi bio 0,34 i pao bi na 3,9:1. Na --pokriven 1
     kartica je već sasvim pod sledećom i vidi joj se samo gornjih 12px. */
  html.scrub .korak::after{
    content:''; position:absolute; inset:0; border-radius:inherit;
    pointer-events:none; background:var(--bor-2);
    opacity:calc(.42 * clamp(0, calc((var(--pokriven) - .8) / .2), 1));
  }
  html.scrub .korak::before{ font-size:34px; }

  /* ---------------------------------------------------------------------
     SCENA 3. VODORAVNA TRAKA NA SKROL (Događaji)
     Traka se prikači uz ekran i vozi se u stranu tačno onoliko koliko
     strana ide nadole. Položaj trake je čista funkcija skrola: vrt.js
     dok je scena u kadru preslikava i strelice, i tastere, i prevlačenje
     na skrol strane, pa nema dva izvora istine i ništa ne skače.
     Strelice i napomena su u lepku, dakle prikačene zajedno sa trakom:
     da su ostale iznad scene, izašle bi iz ekrana tačno u trenutku kad se
     traka prikači i celom scenom bi bile nedohvatljive.
     Hod: 200svh - visina lepka, oko 1,0 ekrana.
     --------------------------------------------------------------------- */
  html.scrub .traka-scena{ height:200svh; }
  html.scrub .traka-lepak{
    position:sticky; top:calc(var(--zag) + 20px);
    min-height:calc(100svh - var(--zag) - 40px);
    display:flex; flex-direction:column; justify-content:center; gap:18px;
  }
  html.scrub .traka-lepak .traka-podnozje{ margin-top:0; flex:none; }
  html.scrub .traka-lepak .galerija{
    margin-top:0; flex:none; min-width:0;
    scroll-snap-type:none;
  }
  /* kartice su u sceni nešto krupnije, ali ne preko onoga što izvorna
     fotografija nosi: široka ide iz 1024w, ostale iz 900 do 1000w */
  html.scrub .traka-lepak .g-kartica{ width:min(480px,40vw); }
  html.scrub .traka-lepak .g-kartica--siroka{ width:min(600px,48vw); }
  html.scrub .traka-mera{
    display:block; height:2px; background:var(--linija); flex:none;
    margin-inline:var(--uz);
  }
  html.scrub .traka-mera i{
    display:block; height:100%; background:var(--med);
    width:calc(var(--s,1) * 100%);
  }

  /* ---------------------------------------------------------------------
     SCENA 5. MASKA KOJA RASTE (Api komora)
     Heksagon iz znaka izraste iz tačke i otkrije fotografiju preko celog
     ekrana. Heksagon je već jezik ovog projekta.
     --r je poluprečnik: 0.18 je znak veličine pečata (oko 260 sa 320px na
     1440), a 2 pokriva i uglove kadra. Namerno ne kreće iz prave tačke:
     iz tačke bi se prvi kadar scene čitao kao prazan ekran. Vodoravni
     poluprečnik je polovina uspravnog, što na kadru oko 16:10 daje odnos
     0.8 prema pravilnom heksagonu (0.866), pa se dok je mali čita kao
     pravilan, a dok je velik ionako izlazi iz kadra.
     Slog stoji vidljiv celom scenom; samo se prisloni.
     Hod: 190svh - 100svh, oko 0,9 ekrana.
     --------------------------------------------------------------------- */
  /* --q stoji na .scena, na istom čvoru na koji motor upisuje --s, da bi ga
     nasledili i maska i slog: prilagođena svojstva idu naniže, ne postrance. */
  html.scrub .scena{
    height:190svh;
    --q:clamp(0, calc(var(--s,1) / .72), 1);
  }
  html.scrub .scena-lepak{ position:sticky; top:0; }
  html.scrub .scena-slika{
    --r:calc(.18 + 1.82 * var(--q));
    --hx:calc(var(--r) * 50%);
    --hy:calc(var(--r) * 100%);
    --hy2:calc(var(--r) * 50%);
    clip-path:polygon(
      50%                       calc(50% - var(--hy)),
      calc(50% + var(--hx))     calc(50% - var(--hy2)),
      calc(50% + var(--hx))     calc(50% + var(--hy2)),
      50%                       calc(50% + var(--hy)),
      calc(50% - var(--hx))     calc(50% + var(--hy2)),
      calc(50% - var(--hx))     calc(50% - var(--hy2))
    );
  }
  html.scrub .scena-slika img{ scale:calc(1.2 - .2 * var(--q)); }
  html.scrub .scena-tekst{ translate:0 calc(34px * (1 - var(--q))); }
}

/* =========================================================================
   REČNIK POKRETA PO STRANAMA (Filipov zahtev 30.08: svaka strana svoj
   pokret). Strana nosi klasu na <body> (anim-levo/desno/krilo/redak) i
   time menja IZGLED svog otkrivanja; osnovni rečnik (uzlazni .otk) ostaje
   za strane bez klase. Sve visi na istom html.anim i istom posmatraču:
   bez JS-a i uz reduced-motion nijedna strana ništa ne krije. */
html.anim body.anim-levo .otk{ transform:translateX(-32px); }
html.anim body.anim-levo .otk[data-vidljiv],
html.anim body.anim-desno .otk[data-vidljiv],
html.anim body.anim-krilo .otk[data-vidljiv]{ transform:none; }
html.anim body.anim-desno .otk{ transform:translateX(32px); }
html.anim body.anim-krilo .otk{ transform:scale(.94) translateY(10px); }
/* redak: slog se ne diže nego se OTKRIVA s leva, kao redak na mašini */
html.anim body.anim-redak .otk{ opacity:1; clip-path:inset(0 100% 0 0); }
html.anim body.anim-redak .otk[data-vidljiv]{
  clip-path:inset(0 -2% 0 0);
  transition:clip-path .95s var(--e);
}
@media (prefers-reduced-motion:reduce){
  html.anim body.anim-levo .otk, html.anim body.anim-desno .otk,
  html.anim body.anim-krilo .otk, html.anim body.anim-redak .otk{
    opacity:1!important; transform:none!important; clip-path:none!important;
  }
}