@charset "utf-8";
/* =========================================================================
   MaskMyAI — sajt. Jedan CSS fajl.
   Boje, radijusi i razmaci su PRESLIKANI iz docs/dizajn/tokeni.css (program),
   da program i sajt budu isti proizvod. Mehanizam teme je data-theme na
   korenu (sistem + ručni prekidač), vrednosti su nepromenjene.
   ========================================================================= */

/* ---------- 1. TOKENI — svetla tema stoji na golom :root ---------- */
:root{
  color-scheme: light;

  /* iz tokeni.css */
  --pod:#f3f2ed; --pov:#ffffff; --pov2:#f8f7f3; --ivica:#e1dfd7; --ivica2:#cfccc2;
  --tekst:#1a1d21; --tekst2:#5b6169; --tekst3:#8a9098;
  --akc:#1d5b6e; --akc-pod:#e3edf1;
  --ok:#2c6249; --ok-pod:#e5f0e9; --upoz:#8a5a12; --upoz-pod:#fbf1dc; --gre:#9b2f2a; --gre-pod:#f9e6e4;
  --lice:#e3edf1; --lice-c:#8fb8c5; --broj:#f8e8e6; --broj-c:#e0b0aa;
  --mesto:#faf1dd; --mesto-c:#dcc384; --firma:#ece9f5; --firma-c:#c1b8dd;
  --kont:#e8eef8; --kont-c:#a9bce0;
  --r:8px; --r2:6px;
  --senka:0 1px 2px rgba(20,24,28,.06), 0 4px 14px rgba(20,24,28,.05);
  --zona-l:#eef4ef; --zona-d:#eaf1f5; --linija:#1d5b6e;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --f0:11px; --f1:12.5px; --f2:14px; --f3:15px; --f4:18px;
  --zavesa:rgba(20,24,28,.45);
  --sjaj-akc:rgba(29,91,110,.5); --sjaj-slab:rgba(29,91,110,.14); --odsjaj:rgba(255,255,255,.28);

  /* dodaci samo za sajt (izvedeni, bez novih boja) */
  --senka-d:0 2px 6px rgba(20,24,28,.05), 0 18px 46px rgba(20,24,28,.09);
  --zrno-boja:rgba(26,29,33,.5);
  --zrno-mesanje:multiply;
  --sjaj:radial-gradient(120% 92% at 76% -18%, rgba(29,91,110,.14), transparent 62%),
         radial-gradient(84% 70% at 8% 2%, rgba(220,195,132,.16), transparent 58%);

  /* slova */
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-osnova:"Source Sans 3", "Segoe UI", system-ui, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, "SF Mono", monospace;

  /* skala sajta */
  --t-2:.75rem; --t-1:.8125rem; --t0:1rem; --t1:1.0625rem; --t2:1.25rem;
  --t3:clamp(1.35rem,1.1rem + .9vw,1.7rem);
  --t4:clamp(1.75rem,1.3rem + 2vw,2.6rem);
  --t5:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);
  --t6:clamp(2.6rem,1rem + 5.6vw,6rem);

  /* mera i ritam */
  --mera:34rem;           /* ~66 znakova */
  --sirina:74rem;
  --gutter:clamp(1.1rem,4vw,3rem);
  --blok:clamp(3.6rem,8vw,7.5rem);

  /* kretanje */
  --kriva:cubic-bezier(.2,.8,.2,1);
  --lako:cubic-bezier(.2,.7,.2,1);
  /* margina sa paragrafom (§) levo od sadržaja */
  --margina:7.5rem; --margina-razmak:clamp(1.5rem,3vw,2.25rem);
  --visina-vrha:3.6rem;
  --brzo:200ms; --srednje:280ms; --sporo:400ms;
}

/* ---------- 2. TAMNA TEMA ---------- */
/* sistem taman, osim kad je čovek izričito izabrao svetlu */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --pod:#15181c; --pov:#1d2126; --pov2:#232830; --ivica:#2d333b; --ivica2:#3a414a;
    --tekst:#e8e9ea; --tekst2:#a9b0b8; --tekst3:#7d848c;
    --akc:#7fb8cc; --akc-pod:#1b3540;
    --ok:#8fd0a6; --ok-pod:#1b3326; --upoz:#e0b76a; --upoz-pod:#3a2f16; --gre:#ec8f88; --gre-pod:#3c1f1d;
    --lice:#1f3a44; --lice-c:#3f7d90; --broj:#3d2523; --broj-c:#8c4a45;
    --mesto:#3b3116; --mesto-c:#8b7534; --firma:#2c2740; --firma-c:#6a5d9c;
    --kont:#1f2a3d; --kont-c:#4a6699;
    --senka:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
    --senka-d:0 2px 6px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.45);
    --zona-l:#182420; --zona-d:#17222b; --linija:#7fb8cc;
    --zavesa:rgba(0,0,0,.55);
    --sjaj-akc:rgba(127,184,204,.45); --sjaj-slab:rgba(127,184,204,.16); --odsjaj:rgba(255,255,255,.22);
    --zrno-boja:rgba(255,255,255,.55);
    --zrno-mesanje:overlay;
    --sjaj:radial-gradient(120% 92% at 76% -18%, rgba(127,184,204,.13), transparent 62%),
           radial-gradient(84% 70% at 8% 2%, rgba(139,117,52,.13), transparent 58%);
  }
}
/* izričit izbor pobeđuje u oba smera */
:root[data-theme="dark"]{
  color-scheme: dark;
  --pod:#15181c; --pov:#1d2126; --pov2:#232830; --ivica:#2d333b; --ivica2:#3a414a;
  --tekst:#e8e9ea; --tekst2:#a9b0b8; --tekst3:#7d848c;
  --akc:#7fb8cc; --akc-pod:#1b3540;
  --ok:#8fd0a6; --ok-pod:#1b3326; --upoz:#e0b76a; --upoz-pod:#3a2f16; --gre:#ec8f88; --gre-pod:#3c1f1d;
  --lice:#1f3a44; --lice-c:#3f7d90; --broj:#3d2523; --broj-c:#8c4a45;
  --mesto:#3b3116; --mesto-c:#8b7534; --firma:#2c2740; --firma-c:#6a5d9c;
  --kont:#1f2a3d; --kont-c:#4a6699;
  --senka:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
  --senka-d:0 2px 6px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.45);
  --zona-l:#182420; --zona-d:#17222b; --linija:#7fb8cc;
  --zavesa:rgba(0,0,0,.55);
  --sjaj-akc:rgba(127,184,204,.45); --sjaj-slab:rgba(127,184,204,.16); --odsjaj:rgba(255,255,255,.22);
  --zrno-boja:rgba(255,255,255,.55);
  --zrno-mesanje:overlay;
  --sjaj:radial-gradient(120% 92% at 76% -18%, rgba(127,184,204,.13), transparent 62%),
         radial-gradient(84% 70% at 8% 2%, rgba(139,117,52,.13), transparent 58%);
}

/* ---------- 3. SLOVA (lokalno, assets/fonts; promenljiva debljina) ---------- */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/source-serif-4-cyrillic-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(fonts/source-serif-4-cyrillic-italic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/source-serif-4-latin-ext-normal.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:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(fonts/source-serif-4-latin-ext-italic.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:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/source-serif-4-latin-normal.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:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(fonts/source-serif-4-latin-italic.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:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/source-sans-3-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/source-sans-3-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:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/source-sans-3-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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-mono-400-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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plex-mono-400-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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-mono-500-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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plex-mono-500-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;}

/* ---------- 4. OSNOVA ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--pod);color:var(--tekst);
  font-family:var(--f-osnova);font-size:var(--t1);line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--akc);outline-offset:3px;border-radius:3px}
::selection{background:var(--akc-pod);color:var(--tekst)}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p,ul,ol,dl,figure,table{margin:0}
hr{border:0;border-top:1px solid var(--ivica);margin:0}
code,kbd,samp{font-family:var(--f-mono);font-size:.9em}

/* naslovi */
.display{font-family:var(--f-display);font-weight:300;line-height:1.06;letter-spacing:-.022em;font-optical-sizing:auto}
h1.display{font-size:var(--t6);line-height:1.02}
h2.display{font-size:var(--t5);line-height:1.08}
h3.display{font-size:var(--t4);line-height:1.1;font-weight:400}
.display em{color:var(--akc)}
.vodi{font-size:var(--t2);line-height:1.5;color:var(--tekst2);max-width:32rem}

/* mono nadnaslov */
.nad{
  font-family:var(--f-mono);font-size:var(--t-2);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tekst2);
  margin:0 0 1.1rem;line-height:1.6;
}
/* crtica je inline, da nadnaslov na uskom ekranu prelama kao običan tekst */
.nad::before{
  content:"";display:inline-block;width:1.6rem;height:1px;
  background:var(--ivica2);vertical-align:.28em;margin-right:.6rem;
}
.nad.bez::before{display:none}

/* ---------- 5. RASPORED ---------- */
.omot{width:100%;max-width:var(--sirina);margin-inline:auto;padding-inline:var(--gutter)}
.blok{padding-block:var(--blok);overflow-x:clip}
.mera{max-width:var(--mera)}
.pretok{overflow-x:auto;-webkit-overflow-scrolling:touch}
.granica{position:relative}
.granica::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ivica);transform-origin:0 50%;pointer-events:none}

/* naslov sekcije: mono nadnaslov levo, tekst u koloni */
.zaglavlje-sekcije{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.zaglavlje-sekcije p{color:var(--tekst2);max-width:36rem;font-size:var(--t1)}

/* ---------- 6. NAVIGACIJA ---------- */
.vrh{position:sticky;top:0;z-index:60}
.vrh-unutra{
  display:flex;align-items:center;gap:.85rem;min-height:3.6rem;
  background:color-mix(in srgb, var(--pod) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--brzo) var(--kriva);
}
.vrh.pomereno .vrh-unutra{border-bottom-color:var(--ivica)}
@supports not (backdrop-filter: blur(4px)){.vrh-unutra{background:var(--pod)}}
.znak{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;padding:.4rem 0;margin-right:.4rem}
.znak svg{flex:none}
.znak b{font-weight:600}
.znak i{font-style:normal;color:var(--tekst3);font-weight:400}
.veze{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.veze a{
  text-decoration:none;color:var(--tekst2);font-size:var(--t-1);font-weight:500;
  padding:.65rem .7rem;border-radius:var(--r2);min-height:2.75rem;display:inline-flex;align-items:center;
  white-space:nowrap;
  transition:color var(--brzo) var(--kriva), background var(--brzo) var(--kriva);
}
.veze a:hover{color:var(--tekst);background:var(--pov2)}
.veze a[aria-current="page"]{color:var(--tekst)}
.alatke{display:flex;align-items:center;gap:.35rem;margin-left:.35rem;padding-left:.65rem;border-left:1px solid var(--ivica)}
.veze > .alatke:first-child{border-left:0;padding-left:0;margin-left:0}
.ikon-dug{
  width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:999px;background:transparent;color:var(--tekst2);
  cursor:pointer;transition:background var(--brzo) var(--kriva), color var(--brzo) var(--kriva);
}
.ikon-dug:hover{background:var(--pov2);color:var(--tekst)}
.jezik{
  font-family:var(--f-mono);font-size:var(--t-2);font-weight:500;letter-spacing:.06em;
  text-decoration:none;color:var(--tekst2);padding:0 .7rem;height:2.75rem;
  display:inline-flex;align-items:center;border-radius:999px;
}
.jezik:hover{background:var(--pov2);color:var(--tekst)}
/* tema ima tri izbora: po sistemu, svetla, tamna (site.js upisuje data-izbor) */
.tema-t .dan,.tema-t .noc{display:none}
.tema-t .auto{display:block}
.tema-t[data-izbor="light"] .auto,.tema-t[data-izbor="dark"] .auto{display:none}
.tema-t[data-izbor="light"] .dan{display:block}
.tema-t[data-izbor="dark"] .noc{display:block}
@media (max-width:760px){
  .veze a{padding:.65rem .5rem;font-size:var(--t-2)}
  .veze a.sakrij-usko{display:none}
}
@media (max-width:560px){
  /* na telefonu u zaglavlju ostaje samo ono zbog čega se dolazi */
  .veze > a:not([href*="preuzimanje"]):not([href*="download"]){display:none}
  .alatke{padding-left:.4rem;margin-left:.2rem}
  .znak{font-size:.98rem}
}

/* ---------- 7. DUGMAD, PILULE, ČIPOVI ---------- */
.dugme{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.1rem;padding:.8rem 1.4rem;border-radius:var(--r);
  font:inherit;font-size:var(--t0);font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;border:1px solid var(--ivica2);
  background:var(--pov);color:var(--tekst);
  /* 3D sjaj: dugme se izdigne, nagne ka mišu (--rx/--ry iz site.js), a svetlo prati kursor (--x/--y) */
  transform:perspective(600px) translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sk,1));
  transition:transform .5s var(--lako), box-shadow .5s var(--lako), background-color var(--brzo) ease, border-color var(--brzo) ease;
  -webkit-tap-highlight-color:transparent;
}
.dugme::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .4s ease;background:radial-gradient(160px circle at var(--x,50%) var(--y,50%),var(--odsjaj-d,var(--akc-pod)),transparent 70%)}
.dugme.glavno{background:var(--akc);border-color:var(--akc);color:var(--pov);--odsjaj-d:var(--odsjaj);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 6px -2px var(--sjaj-slab)}
:root[data-theme="dark"] .dugme.glavno{color:#10161a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dugme.glavno{color:#10161a}}
.dugme.tiho{background:var(--pov);border-color:var(--ivica2)}
@media (hover:hover){
  .dugme:hover{--ty:-2px}
  .dugme:hover::before{opacity:1}
  .dugme.glavno:hover{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 34px -10px var(--sjaj-akc),0 0 0 4px var(--sjaj-slab)}
  .dugme:not(.glavno):hover{border-color:var(--akc);box-shadow:0 12px 30px -12px var(--sjaj-akc),0 0 0 4px var(--sjaj-slab)}
}
/* potvrda: dugme se utisne, pa sjaj jednom zasvetli (klasa iz site.js) */
.dugme:active{--ty:1px;--rx:0deg;--ry:0deg;--sk:.975;transition-duration:.1s}
.dugme.blesak{animation:blesak .7s var(--lako)}
@keyframes blesak{0%{box-shadow:0 0 0 0 var(--sjaj-akc)}40%{box-shadow:0 0 0 7px var(--sjaj-slab),0 16px 40px -8px var(--sjaj-akc)}100%{box-shadow:0 0 0 12px transparent}}
/* Neaktivno dugme: preuzimanja nema dok izdanje sa ispravkom ne izadje
   (stavka I6). Bez nove boje - samo postojeci tokeni, i bez podizanja na
   prelaz misa, da se ne ponasa kao da nesto radi (ustav 3.9). */
.dugme.neaktivno{background:var(--pov2);border-color:var(--ivica);color:var(--tekst2);cursor:default;transform:none;box-shadow:none}
.dugme.neaktivno::before{display:none}
.dugme .str{font-family:var(--f-mono);font-size:var(--t-2);font-weight:400;opacity:.75;letter-spacing:.04em}
.dugmad{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
@media (max-width:460px){
  .dugmad{width:100%}
  .dugmad .dugme{flex:1 1 100%}
}

.pilula{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .7rem;border-radius:999px;border:1px solid var(--ivica);
  background:var(--pov);color:var(--tekst2);
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.02em;white-space:nowrap;
}
/* Pilula koja nosi celu recenicu mora da sme da se prelomi. Kratke
   pilule (pecat, broj zamena) ostaju u jednom redu kao i do sada; ova u
   podnozju odeljka je na 390 px bila siroka 396 px i gurala celu stranu
   na 434 px — mereno u pregledacu 12.09.2026 (nalog 027, R14.8). */
p.dno > .pilula{white-space:normal;max-width:100%}
.pilula.ok{background:var(--ok-pod);border-color:transparent;color:var(--ok);font-weight:500}
.pilula.akc{background:var(--akc-pod);border-color:transparent;color:var(--akc);font-weight:500}
.tacka{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;flex:none}

/* boje po vrsti podatka — iste kao u programu */
.ist{padding:.05em .1em;border-radius:3px;border-bottom:2px solid transparent;background:transparent;
  transition:background var(--srednje) var(--kriva), border-color var(--srednje) var(--kriva)}
.ist.lice{background:var(--lice);border-bottom-color:var(--lice-c)}
.ist.broj{background:var(--broj);border-bottom-color:var(--broj-c)}
.ist.mesto{background:var(--mesto);border-bottom-color:var(--mesto-c)}
.ist.firma{background:var(--firma);border-bottom-color:var(--firma-c)}
.ist.kont{background:var(--kont);border-bottom-color:var(--kont-c)}
.vrac{border-bottom:2px solid var(--ok);background:var(--ok-pod);padding:.05em .18em;border-radius:3px}
.cip{
  display:inline-block;font-family:var(--f-mono);font-size:var(--f0);line-height:1.45;
  padding:.06em .38em;border-radius:4px;border:1px solid var(--ivica2);background:var(--pov2);
  white-space:nowrap;
}
.cip.lice{background:var(--lice);border-color:var(--lice-c)}
.cip.broj{background:var(--broj);border-color:var(--broj-c)}
.cip.mesto{background:var(--mesto);border-color:var(--mesto-c)}
.cip.firma{background:var(--firma);border-color:var(--firma-c)}
.cip.kont{background:var(--kont);border-color:var(--kont-c)}

/* ---------- 8. HERO ---------- */
.hero{position:relative;isolation:isolate;padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,6vw,4.5rem)}
.hero .zrno,.zaglavlje-strane .zrno{display:none}
.hero-tekst{display:grid;gap:1.6rem;max-width:min(100%,56rem)}
.hero h1{margin:0}
/* slogan: prvi red uspravno, drugi red u kurzivu i boji akcenta */
.hero h1.display{font-size:clamp(2.9rem,1rem + 6.6vw,6.5rem);line-height:1;letter-spacing:-.028em;color:var(--akc);font-style:italic}
.hero h1.display::first-line{color:var(--tekst);font-style:normal}
.hero h1 .ist{background:none;border:0;padding:0}
.zaglavlje-strane h1 .ist{
  border-bottom:0;border-radius:0;padding:0 .03em;
  background:
    linear-gradient(var(--lice-c),var(--lice-c)) 0 .79em / 100% .055em no-repeat,
    linear-gradient(var(--lice),var(--lice))     0 .48em / 100% .31em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero .vodi{max-width:36rem;font-size:clamp(1.1rem,1rem + .45vw,1.32rem)}
.hero .dugmad{margin-top:.3rem}
.pod-dugmad{font-family:var(--f-mono);font-size:var(--t-1);color:var(--tekst2);letter-spacing:.02em}
.pod-dugmad span{white-space:nowrap}

/* ---------- 9. MOK PROGRAMA (crtan u HTML/CSS, bez slika) ---------- */
.mok{
  background:var(--pov);border:1px solid var(--ivica);border-radius:12px;
  box-shadow:var(--senka-d);overflow:hidden;font-size:var(--f2);line-height:1.45;
}
.mok-vrh{
  display:flex;align-items:center;gap:var(--s3);min-height:2.6rem;padding:.45rem var(--s3);
  border-bottom:1px solid var(--ivica);background:var(--pov2);flex-wrap:wrap;
}
.mok-ime{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--f1)}
.koraci{display:inline-flex;background:var(--pov);border:1px solid var(--ivica);border-radius:999px;padding:2px;gap:2px}
.koraci span{
  height:1.45rem;padding:0 .5rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem;
  font-size:var(--f0);color:var(--tekst3);white-space:nowrap;transition:all var(--srednje) var(--kriva);
}
.koraci b{
  width:1.05rem;height:1.05rem;border-radius:50%;background:var(--ivica);color:var(--tekst3);
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.koraci span.gotov{color:var(--tekst2)}
.koraci span.gotov b{background:var(--ok);color:var(--pov)}
.koraci span.tek{background:var(--akc);color:var(--pov);font-weight:600}
.koraci span.tek b{background:var(--pov);color:var(--akc)}
:root[data-theme="dark"] .koraci span.gotov b,
:root[data-theme="dark"] .koraci span.tek{color:#10161a}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .koraci span.gotov b,
  :root:not([data-theme="light"]) .koraci span.tek{color:#10161a}
}
.mok-dno{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:.5rem var(--s3);border-top:1px solid var(--ivica);background:var(--pov2);
  font-family:var(--f-mono);font-size:var(--f1);color:var(--tekst2);
}

/* dve zone + linija poverenja */
.sto{display:grid;grid-template-columns:1fr 2.2rem 1fr;padding:var(--s3);gap:0;background:var(--pod)}
.zona{display:flex;flex-direction:column;gap:var(--s2);border:1px solid var(--ivica);border-radius:10px;padding:var(--s2);min-width:0}
.zona-l{background:var(--zona-l)}
.zona-d{background:var(--zona-d)}
.zona-naslov{
  display:flex;align-items:center;gap:.35rem;font-family:var(--f-mono);
  font-size:var(--f0);letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.zona-l .zona-naslov{color:var(--ok)}
.zona-d .zona-naslov{color:var(--akc)}
.crta{position:relative}
.crta::before{
  content:"";position:absolute;top:.4rem;bottom:.4rem;left:50%;width:2px;margin-left:-1px;opacity:.7;
  background:repeating-linear-gradient(to bottom,var(--linija) 0 7px,transparent 7px 13px);
}
.crta .strelica{
  position:absolute;left:50%;transform:translateX(-50%);
  width:1.25rem;height:1.25rem;border-radius:50%;background:var(--pov);border:1px solid var(--ivica);
  display:flex;align-items:center;justify-content:center;color:var(--linija);
  transition:opacity var(--srednje) var(--kriva), transform var(--srednje) var(--kriva);
}
.crta .strelica.gore{top:18%}
.crta .strelica.dole{top:64%;color:var(--ok)}

/* kartica u moku */
.kart{background:var(--pov);border:1px solid var(--ivica);border-radius:var(--r);display:flex;flex-direction:column;min-width:0;box-shadow:var(--senka)}
.kart-zag{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:.4rem var(--s3);border-bottom:1px solid var(--ivica);background:var(--pov2);
  border-radius:var(--r) var(--r) 0 0;
}
.kart-zag .ime{font-weight:600;font-size:var(--f1)}
.kart-zag .meta{color:var(--tekst3);font-family:var(--f-mono);font-size:var(--f0);margin-left:auto;white-space:nowrap}
.kart-telo{padding:var(--s3);font-size:var(--f2);line-height:1.62;min-width:0}
.kart-telo.serif{font-family:var(--f-display);font-size:calc(var(--f3) + 1px);line-height:1.55}
.kart-telo.mono{font-family:var(--f-mono);font-size:var(--f1);line-height:1.85;word-break:break-word}
.kart-telo b.nas{display:block;font-weight:600;margin-bottom:.2rem}

/* faze žive demonstracije */
.demo .ist{background:transparent;border-bottom-color:transparent}
.demo.f1 .ist.lice{background:var(--lice);border-bottom-color:var(--lice-c)}
.demo.f1 .ist.broj{background:var(--broj);border-bottom-color:var(--broj-c)}
.demo.f1 .ist.mesto{background:var(--mesto);border-bottom-color:var(--mesto-c)}
.demo.f1 .ist.firma{background:var(--firma);border-bottom-color:var(--firma-c)}
.demo.f1 .ist.kont{background:var(--kont);border-bottom-color:var(--kont-c)}
.demo .ist:nth-of-type(2){transition-delay:70ms}
.demo .ist:nth-of-type(3){transition-delay:140ms}
.demo .ist:nth-of-type(4){transition-delay:210ms}
.demo .ist:nth-of-type(5){transition-delay:280ms}
.demo .ist:nth-of-type(6){transition-delay:350ms}
/* kartice ostaju iste visine kroz celu petlju: sadržaj i „čeka se" stoje jedno preko drugog */
.slaganje{display:grid;min-width:0}
.slaganje > *{grid-area:1 / 1;min-width:0}
.demo .zavisi{opacity:0;transform:translateY(6px);
  transition:opacity var(--sporo) var(--kriva), transform var(--sporo) var(--kriva)}
.demo.f2 .z2 .zavisi,.demo.f3 .z3 .zavisi,.demo.f4 .z4 .zavisi,.demo.f5 .z5 .zavisi{opacity:1;transform:none}
.trezor .kart-zag .ime{display:inline-flex;align-items:center;gap:.35rem;color:var(--tekst2)}
.trezor-redovi{display:grid;gap:.3rem;font-size:var(--f0);line-height:1.6}
.trezor-redovi i{font-style:normal;color:var(--tekst3)}
.trezor-redovi .jos{color:var(--tekst3);padding-top:.15rem}
.demo .cekanje{color:var(--tekst3);font-family:var(--f-mono);font-size:var(--f0);letter-spacing:.04em;
  transition:opacity var(--srednje) var(--kriva)}
.demo.f2 .z2 .cekanje,.demo.f3 .z3 .cekanje,.demo.f4 .z4 .cekanje,.demo.f5 .z5 .cekanje{opacity:0}
.demo .cip{opacity:0;transform:translateY(-3px);transition:opacity var(--srednje) var(--kriva), transform var(--srednje) var(--kriva)}
.demo.f2 .cip{opacity:1;transform:none}
.demo .cip:nth-of-type(2){transition-delay:60ms}
.demo .cip:nth-of-type(3){transition-delay:120ms}
.demo .cip:nth-of-type(4){transition-delay:180ms}
.demo .cip:nth-of-type(5){transition-delay:240ms}
.demo .cip:nth-of-type(6){transition-delay:300ms}
.demo .strelica{opacity:0}
.demo.f3 .strelica.gore,.demo.f4 .strelica.gore,.demo.f5 .strelica.gore{opacity:1}
.demo.f5 .strelica.dole{opacity:1}

@media (prefers-reduced-motion: reduce){
  .demo *,.demo{transition:none !important}
}

/* na uskom ekranu traka koraka pokazuje samo cifre i tekući korak */
@media (max-width:620px){
  .koraci span{padding:0 .25rem;gap:0}
  .koraci span:not(.tek){font-size:0}
  .koraci span:not(.tek) b{font-size:9.5px}
  .koraci span.tek{padding:0 .5rem;gap:.3rem}
}

/* mok na uskom ekranu: jedna kolona, linija postaje vodoravna */
@media (max-width:800px){
  .sto{grid-template-columns:1fr;gap:var(--s3);padding:var(--s2)}
  .crta{height:1.6rem}
  .crta::before{top:50%;bottom:auto;left:.5rem;right:.5rem;width:auto;height:2px;margin:0;
    background:repeating-linear-gradient(to right,var(--linija) 0 7px,transparent 7px 13px)}
  .crta .strelica{top:50%;transform:translate(-50%,-50%)}
  .crta .strelica.dole{display:none}
  .mok{font-size:13px}
  .kart-zag .meta{margin-left:0}
}

/* ---------- 10. LINIJA POVERENJA (tri koraka) ---------- */
.tok{position:relative}
.tok-linija{position:absolute;left:1.6rem;top:1.6rem;bottom:1.6rem;width:2px;margin-left:-1px;pointer-events:none}
.tok-linija::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,var(--linija) 0 7px,transparent 7px 13px);
  opacity:.3;
}
.tok-linija::after{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--linija);
  transition:height 1100ms var(--kriva);
}
.tok.crta-se .tok-linija::after{height:100%}
.korak{display:grid;grid-template-columns:3.2rem 1fr;gap:0 clamp(1rem,3vw,2.2rem);align-items:start;
  padding-block:clamp(1.4rem,3vw,2.4rem)}
.korak + .korak{border-top:1px solid var(--ivica)}
.korak-broj{
  font-family:var(--f-mono);font-weight:400;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1;
  color:var(--tekst2);font-variant-numeric:tabular-nums;position:relative;z-index:1;
  background:var(--pod);padding-block:.15rem;text-align:center;
}
.korak h3{font-size:var(--t3);font-family:var(--f-display);line-height:1.1;margin-bottom:.5rem}
.korak p{color:var(--tekst2);max-width:38rem}
.korak-telo p + p{margin-top:.7rem}
.korak .sitno{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem}
.korak-telo{min-width:0}
@media (max-width:640px){
  .tok{grid-template-columns:1fr}
  .tok-linija{display:none}
  .korak{grid-template-columns:1fr;gap:.5rem}
  .korak-broj{text-align:left;background:transparent;font-size:2rem}
}

/* ---------- 11. DVE STRANE ---------- */
.dve{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ivica);border-radius:12px;overflow:hidden;background:var(--pov)}
.strana{padding:clamp(1.4rem,3vw,2.2rem);min-width:0}
.strana + .strana{border-left:1px solid var(--ivica)}
.strana.ostaje{background:var(--zona-l)}
.strana.odlazi{background:var(--zona-d)}
.strana h3{font-size:var(--t3);font-family:var(--f-display);margin:.5rem 0 .2rem;line-height:1.12}
.strana > p{color:var(--tekst2);font-size:var(--t0);margin-bottom:1.1rem}
.spisak{list-style:none;padding:0;display:grid;gap:.55rem}
.spisak li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;align-items:start;font-size:var(--t0);line-height:1.5}
.spisak li svg{margin-top:.35rem;flex:none}
.ostaje .spisak li svg{color:var(--ok)}
.odlazi .spisak li svg{color:var(--akc)}
.strana .zona-naslov{margin-bottom:.2rem}
@media (max-width:720px){
  .dve{grid-template-columns:1fr}
  .strana + .strana{border-left:0;border-top:1px solid var(--ivica)}
}

/* ---------- 12. TRAKA KLASA ---------- */
.klase{display:flex;flex-wrap:wrap;gap:.5rem}
.klasa{
  display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:999px;
  border:1px solid var(--ivica2);background:var(--pov);font-size:var(--t-1);color:var(--tekst);
}
.klasa .tag{font-family:var(--f-mono);font-size:var(--t-2);color:var(--tekst2)}
.klasa.lice{background:var(--lice);border-color:var(--lice-c)}
.klasa.broj{background:var(--broj);border-color:var(--broj-c)}
.klasa.mesto{background:var(--mesto);border-color:var(--mesto-c)}
.klasa.firma{background:var(--firma);border-color:var(--firma-c)}
.klasa.kont{background:var(--kont);border-color:var(--kont-c)}
.klasa.pusta{background:transparent;border-style:dashed;color:var(--tekst2)}

/* ---------- 13. KARTICE (mostovi, pogledi, jezici) ---------- */
.mreza{display:grid;gap:clamp(1rem,2.2vw,1.5rem)}
.mreza.dva{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.mreza.tri{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.ploca{
  background:var(--pov);border:1px solid var(--ivica);border-radius:12px;
  padding:clamp(1.2rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.7rem;min-width:0;
}
.ploca h3{font-size:var(--t2);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.ploca h3:not(:first-child){margin-top:.5rem}
.ploca p{color:var(--tekst2);font-size:var(--t0)}
.ploca .koraci-teksta{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;counter-reset:k}
.ploca .koraci-teksta li{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.6rem;font-size:var(--t0);color:var(--tekst2);line-height:1.5;
}
.ploca .koraci-teksta li::before{
  counter-increment:k;content:counter(k);font-family:var(--f-mono);font-size:var(--t-2);
  color:var(--akc);background:var(--akc-pod);border-radius:4px;height:1.4rem;
  display:flex;align-items:center;justify-content:center;
}
.ploca .dno{margin-top:auto;padding-top:.4rem}
.ploca.istaknuta{background:var(--akc-pod);border-color:transparent}
.ploca.istaknuta p{color:var(--tekst2)}

/* mali pregled načina gledanja */
.mini{border:1px solid var(--ivica);border-radius:var(--r);background:var(--pov2);overflow:hidden;height:7.5rem;display:flex;flex-direction:column}
.mini-vrh{height:1.1rem;background:var(--pov);border-bottom:1px solid var(--ivica);display:flex;align-items:center;gap:3px;padding:0 5px}
.mini-vrh i{width:14px;height:3px;border-radius:2px;background:var(--ivica2);display:block}
.mini-telo{flex:1;display:grid;gap:4px;padding:6px;min-height:0}
.mini.sto-mini .mini-telo{grid-template-columns:1fr 6px 1fr}
.mini.sto-mini .mini-telo > i{background:var(--zona-l);border:1px solid var(--ivica);border-radius:4px;display:block}
.mini.sto-mini .mini-telo > i:last-child{background:var(--zona-d)}
.mini.sto-mini .mini-telo > u{background:repeating-linear-gradient(to bottom,var(--linija) 0 4px,transparent 4px 8px);width:2px;justify-self:center;opacity:.6}
.mini.cet-mini .mini-telo{grid-template-columns:1fr;align-content:start;gap:5px}
.mini.cet-mini .mini-telo > i{display:block;height:12px;border-radius:7px;background:var(--pov);border:1px solid var(--ivica)}
.mini.cet-mini .mini-telo > i.moja{background:var(--akc-pod);border-color:transparent;margin-left:28%}
.mini.cet-mini .mini-telo > i.njegova{margin-right:28%}
.mini.cela-mini .mini-telo{grid-template-columns:1fr}
.mini.cela-mini .mini-telo > i{background:var(--pov);border:1px solid var(--ivica);border-radius:4px;display:block}

/* ---------- 14. JEZICI ---------- */
.jezici{display:grid;gap:.5rem}
.jezik-red{
  display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr auto;gap:.8rem;align-items:baseline;
  padding:.75rem 0;border-top:1px solid var(--ivica);
}
.jezik-red:last-child{border-bottom:1px solid var(--ivica)}
.jezik-red .naziv{font-weight:600}
.jezik-red .primer{color:var(--tekst2);font-size:var(--t0);min-width:0;overflow-wrap:anywhere}
.jezik-red .stanje{font-family:var(--f-mono);font-size:var(--t-2);color:var(--tekst2);white-space:nowrap;letter-spacing:.04em}
.jezik-red .stanje.sad{color:var(--ok)}
@media (max-width:600px){
  .jezik-red{grid-template-columns:1fr auto;gap:.2rem .8rem}
  .jezik-red .primer{grid-column:1 / -1}
}

/* ---------- 15. PRIVATNOST — tri rečenice ---------- */
.tri-recenice{display:grid;gap:0;border-top:1px solid var(--ivica)}
.recenica{
  display:grid;grid-template-columns:2.4rem 1fr;gap:clamp(.8rem,2vw,1.6rem);
  padding-block:clamp(1.1rem,2.4vw,1.6rem);border-bottom:1px solid var(--ivica);align-items:start;
}
.recenica .oznaka{font-family:var(--f-mono);font-size:var(--t-2);color:var(--tekst2);letter-spacing:.08em;padding-top:.35rem}
.recenica p{font-size:var(--t2);line-height:1.45;max-width:40rem;font-family:var(--f-display);letter-spacing:-.01em}
.recenica p em{font-style:normal;color:var(--akc)}

/* ---------- 16. PITANJA ---------- */
.pitanja{border-top:1px solid var(--ivica);max-width:48rem}
.pitanja details{border-bottom:1px solid var(--ivica)}
.pitanja summary{
  display:flex;align-items:flex-start;gap:1rem;cursor:pointer;list-style:none;
  padding:1.05rem 0;font-size:var(--t1);font-weight:500;min-height:3rem;
}
.pitanja summary::-webkit-details-marker{display:none}
.pitanja summary::after{
  content:"";margin-left:auto;flex:none;width:.72rem;height:.72rem;margin-top:.45rem;
  border-right:1.5px solid var(--tekst3);border-bottom:1.5px solid var(--tekst3);
  transform:rotate(45deg);transition:transform var(--srednje) var(--kriva);
}
.pitanja details[open] summary::after{transform:rotate(225deg)}
.pitanja summary:hover{color:var(--akc)}
.pitanja .odgovor{padding:0 0 1.2rem;color:var(--tekst2);max-width:42rem}
.pitanja .odgovor p + p{margin-top:.7rem}
.pitanja .broj{font-family:var(--f-mono);font-size:var(--t-2);color:var(--tekst2);padding-top:.25rem;flex:none;font-variant-numeric:tabular-nums}

/* ---------- 17. ZAVRŠNI POZIV ---------- */
.poziv{
  border:1px solid var(--ivica);border-radius:14px;background:var(--pov);
  padding:clamp(1.8rem,5vw,3.6rem);position:relative;overflow:hidden;isolation:isolate;
}
.poziv::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sjaj);opacity:.8}
.poziv h2{margin-bottom:.8rem}
.poziv p{color:var(--tekst2);max-width:34rem;margin-bottom:1.4rem}

/* ---------- 18. PODNOŽJE ---------- */
.dno{border-top:1px solid var(--ivica);background:var(--pov2);margin-top:var(--blok)}
.dno-mreza{display:grid;grid-template-columns:minmax(13rem,1.3fr) repeat(3,minmax(8rem,1fr));gap:clamp(1.4rem,3vw,2.4rem);padding-block:clamp(2.2rem,4vw,3.2rem)}
.dno h4{font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst2);font-weight:500;margin-bottom:.8rem}
.dno ul{list-style:none;padding:0;display:grid;gap:.15rem}
.dno a{color:var(--tekst2);text-decoration:none;font-size:var(--t0);padding:.3rem 0;display:inline-block;min-height:2rem}
.dno a:hover{color:var(--akc)}
.dno-reč{color:var(--tekst2);font-size:var(--t0);max-width:22rem;margin-top:.6rem}
.dno-red{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between;
  padding-block:1.1rem;border-top:1px solid var(--ivica);font-size:var(--t-1);color:var(--tekst2)}
.dno-red .jezik-prekidac{display:flex;gap:.2rem;align-items:center}
.dno-red .jezik-prekidac a{font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.06em;padding:.4rem .6rem;border-radius:999px;min-height:2.2rem;display:inline-flex;align-items:center}
.dno-red .jezik-prekidac a[aria-current="true"]{background:var(--akc-pod);color:var(--akc)}
/* Veza ka „Upravi“ — namerno diskretna: posetiocu ne treba, vlasniku je
   dovoljna. Stoji uz prekidač jezika, u najtišoj boji teksta, ali sa
   vidnim fokusom i dovoljnom metom za prst (nije ukras nego veza). */
.dno-red .uprava-veza{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.2rem;min-height:2.2rem;margin-left:auto;color:var(--tekst3);opacity:.5;
  border-radius:999px;transition:opacity .15s ease,color .15s ease}
.dno-red .uprava-veza:hover,.dno-red .uprava-veza:focus-visible{opacity:1;color:var(--akc)}
@media (max-width:760px){.dno-mreza{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.dno-mreza{grid-template-columns:1fr}}

/* ---------- 19. UNUTRAŠNJE STRANE ---------- */
.zaglavlje-strane{padding-block:clamp(2.4rem,5vw,4rem) clamp(1.6rem,3vw,2.4rem);position:relative;isolation:isolate;overflow:hidden}
.zaglavlje-strane::before{content:"";position:absolute;inset:-40% -10% auto;height:30rem;z-index:-1;background:var(--sjaj);opacity:.75;pointer-events:none}
.zaglavlje-strane h1{font-size:var(--t5);margin-bottom:1rem}
/* prvi blok posle zaglavlja strane ne treba pun razmak odozgo */
.zaglavlje-strane + .blok{padding-top:clamp(1.2rem,3vw,2.4rem)}
.zaglavlje-strane .vodi{max-width:36rem}
.proza{max-width:var(--mera)}
.proza p{color:var(--tekst2)}
.proza p + p{margin-top:1rem}
.proza h2{font-family:var(--f-display);font-size:var(--t4);margin:2.6rem 0 .8rem;line-height:1.08}
.proza h3{font-size:var(--t2);font-weight:600;margin:1.8rem 0 .5rem}
.proza ul,.proza ol{padding-left:1.2rem;color:var(--tekst2);display:grid;gap:.4rem;margin:.8rem 0}
.proza li{padding-left:.2rem}
.proza a{color:var(--akc);text-underline-offset:.2em}
.proza strong{color:var(--tekst);font-weight:600}
.napomena{
  border-left:2px solid var(--akc);background:var(--akc-pod);padding:1rem 1.2rem;border-radius:0 var(--r) var(--r) 0;
  color:var(--tekst2);font-size:var(--t0);margin:1.4rem 0;
}
.napomena strong{color:var(--tekst)}
.upozorenje{border-left-color:var(--upoz);background:var(--upoz-pod)}
.kod{
  font-family:var(--f-mono);font-size:var(--t-1);background:var(--pov2);border:1px solid var(--ivica);
  border-radius:var(--r2);padding:.8rem 1rem;overflow-x:auto;color:var(--tekst);white-space:pre;
}
.kod-red{word-break:break-all;white-space:normal}

/* preuzimanje */
.preuzmi-kutija{
  border:1px solid var(--ivica);border-radius:14px;background:var(--pov);box-shadow:var(--senka-d);
  padding:clamp(1.4rem,3.4vw,2.4rem);display:grid;gap:1.2rem;
}
.cinjenice{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--ivica);border:1px solid var(--ivica);border-radius:var(--r);overflow:hidden}
.cinjenica{background:var(--pov);padding:.9rem 1rem;display:grid;gap:.15rem}
.cinjenica dt{font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst2)}
.cinjenica dd{margin:0;font-size:var(--t0);font-weight:500;hyphens:none}
#sha256,.sha{font-family:var(--f-mono);font-size:var(--t-1);word-break:break-all;background:var(--pov2);border:1px solid var(--ivica);border-radius:var(--r2);padding:.55rem .7rem;display:block;color:var(--tekst)}

/* ---------- 20. UPUTSTVO (docs) ---------- */
.docs-omot{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-block:2.5rem var(--blok)}
.docs-nav{position:sticky;top:5rem;max-height:calc(100vh - 7rem);overflow-y:auto;font-size:var(--t-1);padding-right:.5rem}
.docs-nav h4{font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst2);font-weight:500;margin-bottom:.7rem}
.docs-nav ul{list-style:none;padding:0;display:grid;gap:.05rem}
.docs-nav a{display:block;padding:.4rem .6rem;border-radius:var(--r2);color:var(--tekst2);text-decoration:none;border-left:2px solid transparent;line-height:1.35}
.docs-nav a:hover{background:var(--pov2);color:var(--tekst)}
.docs-nav a.aktivna{color:var(--akc);border-left-color:var(--akc);background:var(--akc-pod)}
.docs-nav .n2{padding-left:1.3rem;font-size:var(--t-2)}
.docs-telo{max-width:44rem;min-width:0}
.docs-telo h1{font-family:var(--f-display);font-size:var(--t5);line-height:1.02;margin-bottom:1.2rem;letter-spacing:-.018em}
.docs-telo h2{font-family:var(--f-display);font-size:var(--t4);line-height:1.08;margin:2.8rem 0 .8rem;letter-spacing:-.015em;scroll-margin-top:5.5rem}
.docs-telo h3{font-size:var(--t2);font-weight:600;margin:2rem 0 .5rem;scroll-margin-top:5.5rem}
.docs-telo p{color:var(--tekst2);margin:.8rem 0}
.docs-telo ul,.docs-telo ol{padding-left:1.3rem;color:var(--tekst2);display:grid;gap:.45rem;margin:.9rem 0}
.docs-telo a{color:var(--akc)}
.docs-telo strong{color:var(--tekst);font-weight:600}
.docs-telo code{background:var(--pov2);border:1px solid var(--ivica);border-radius:4px;padding:.08em .35em;color:var(--tekst);word-break:break-word}
.docs-telo pre{background:var(--pov2);border:1px solid var(--ivica);border-radius:var(--r);padding:.9rem 1.1rem;overflow-x:auto;margin:1.2rem 0}
.docs-telo pre code{background:transparent;border:0;padding:0;font-size:var(--t-1);line-height:1.7}
.docs-telo blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid var(--akc);color:var(--tekst2);font-family:var(--f-display);font-size:var(--t2);line-height:1.4}
.docs-telo blockquote p{color:inherit;margin:.3rem 0}
.docs-telo table{border-collapse:collapse;width:100%;font-size:var(--t-1);margin:1.2rem 0}
.docs-telo th{text-align:left;font-weight:600;padding:.55rem .7rem;border-bottom:1px solid var(--ivica2);color:var(--tekst)}
.docs-telo td{padding:.55rem .7rem;border-bottom:1px solid var(--ivica);color:var(--tekst2);vertical-align:top}
.docs-telo hr{margin:2.4rem 0}
.tabela-omot{overflow-x:auto;margin:1.2rem 0}
.tabela-omot table{margin:0;min-width:32rem}
/* na uskom ekranu sadržaj uputstva je red pločica, a ne spisak od 25 redova */
@media (max-width:900px){
  .docs-omot{grid-template-columns:1fr;padding-block:1.6rem var(--blok)}
  .docs-nav{position:static;max-height:none;padding:0 0 1.2rem;margin-bottom:.4rem;
    border-bottom:1px solid var(--ivica)}
  .docs-nav ul{display:flex;flex-wrap:wrap;gap:.35rem}
  .docs-nav a{border:1px solid var(--ivica);border-radius:999px;padding:.42rem .75rem}
  .docs-nav a.n2{display:none}
  .docs-nav a.aktivna{border-color:transparent}
}

/* ---------- 21. 404 ---------- */
.nije-nadjeno{min-height:60vh;display:grid;align-content:center;gap:1.2rem;padding-block:var(--blok)}
.nije-nadjeno .kod-404{font-family:var(--f-mono);font-size:clamp(3rem,12vw,7rem);color:var(--ivica2);line-height:1}

/* ---------- 22. POKRET NA SKROL ----------
   Pravilo: strana je cela i u miru. Pokret je dodatak:
   1) gde pregledač zna skrol-vremenske linije (animation-timeline), delovi
      se pojavljuju, sklapaju i blago nestaju vezano za sam skrol;
   2) inače ih site.js otkriva jednom (IntersectionObserver, klasa .vidi);
   3) uz „smanji pokret" sve stoji mirno. */
.js .otkrij{opacity:0;transform:translateY(18px);transition:opacity .9s var(--lako), transform .9s var(--lako)}
.js .otkrij.vidi{opacity:1;transform:none}
.js .pre{opacity:0;transform:translate(var(--dx,0),var(--dy,18px)) rotate(var(--rot,0deg))}
.wd,.sklapa{transition:opacity .8s var(--lako), transform .8s var(--lako);transition-delay:calc(var(--i,0) * 40ms)}
.wd{display:inline-block}
.traka-skrola{position:fixed;top:0;left:0;right:0;height:2px;background:var(--akc);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  /* naslov strane pri učitavanju: izlazi ispod ivice */
  .hero h1.display,.zaglavlje-strane h1.display{animation:naslov-ulaz 1.1s var(--lako) both}
  .hero .vodi,.hero .dugmad,.hero .pod-dugmad,.hero .nad,.zaglavlje-strane .vodi,.zaglavlje-strane .nad{animation:blago-ulaz 1s var(--lako) both .25s}
  @keyframes naslov-ulaz{from{opacity:0;transform:translateY(.35em);clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -20% 0)}}
  @keyframes blago-ulaz{from{opacity:0;transform:translateY(14px)}}

  @supports (animation-timeline: view()){
    .traka-skrola{animation:traka-puni linear both;animation-timeline:scroll(root)}
    @keyframes traka-puni{to{transform:scaleX(1)}}

    .js .otkrij,.js .otkrij.vidi,.js .pre,.wd,.sklapa{transition:none}
    .js .otkrij{opacity:1;transform:none;animation:dolazi linear both;animation-timeline:view();animation-range:entry 0% entry 260px}
    @keyframes dolazi{from{opacity:0;transform:translateY(40px);filter:blur(6px)}}

    /* naslovi sekcija i uvod strane blago nestaju kad odlaze gore */
    .js .zaglavlje-sekcije.otkrij,.js .podnaslov-bloka.otkrij{animation:dolazi linear both,nestaje linear both;animation-timeline:view(),view();animation-range:entry 0% entry 260px,exit 30% exit 100%}
    .hero-tekst,.zaglavlje-strane .omot{animation:odlazi linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes nestaje{to{opacity:0;transform:translateY(-30px);filter:blur(4px)}}
    @keyframes odlazi{to{opacity:.1;transform:translateY(-70px);filter:blur(3px)}}

    /* reč po reč: reči naslova dolaze redom (site.js ih obavija u .wd) */
    .deli{view-timeline-name:--naslov}
    .deli .wd{animation:rec linear both;animation-timeline:--naslov;animation-range:entry calc(var(--i) * 5%) entry calc(70% + var(--i) * 5%)}
    @keyframes rec{from{opacity:0;transform:translateY(.55em);filter:blur(5px)}}

    /* sklapanje: pločice, čipovi i redovi dolaze iz raštrkanih položaja */
    .sklapa{animation:sklopi linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
    @keyframes sklopi{from{opacity:0;transform:translate(var(--dx,0),var(--dy,30px)) rotate(var(--rot,0deg))}}

    /* crte između sekcija se docrtavaju */
    .granica::before{animation:crta linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
    @keyframes crta{from{transform:scaleX(0)}}
  }
}
@media (prefers-reduced-motion: reduce){
  .js .otkrij,.js .pre{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- 23. SITNICE ---------- */
.preskoci{position:absolute;left:-9999px;top:0;background:var(--akc);color:var(--pov);padding:.7rem 1.1rem;border-radius:0 0 var(--r) 0;z-index:100}
.preskoci:focus{left:0}
.samo-citac{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- 24. MALI PRIKAZI IZ PROGRAMA (unutrašnje strane) ---------- */
.pokaz{
  border:1px solid var(--ivica);border-radius:10px;padding:var(--s2);display:grid;gap:var(--s2);
  font-size:var(--f2);line-height:1.5;margin-top:1.2rem;max-width:44rem;
}
.pokaz.l{background:var(--zona-l)}
.pokaz.d{background:var(--zona-d)}
.pokaz .zona-naslov{margin:0}
.pokaz.l .zona-naslov{color:var(--ok)}
.pokaz.d .zona-naslov{color:var(--akc)}
.mok-dug{
  min-height:1.95rem;padding:.2rem .7rem;border-radius:var(--r2);border:1px solid var(--ivica2);
  background:var(--pov);color:var(--tekst);font-size:var(--f1);font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;
}
.mok-dug.gl{background:var(--akc);border-color:var(--akc);color:var(--pov)}
:root[data-theme="dark"] .mok-dug.gl{color:#10161a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mok-dug.gl{color:#10161a}}
.mok-red{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);border-top:1px solid var(--ivica)}
.traka-stanje{
  display:flex;gap:.5rem;align-items:flex-start;padding:var(--s2) var(--s3);
  background:var(--upoz-pod);color:var(--upoz);font-size:var(--f1);font-weight:500;
  border-top:1px solid var(--ivica);line-height:1.45;
}
.traka-stanje.stop{background:var(--gre-pod);color:var(--gre)}
.traka-stanje.dobro{background:var(--ok-pod);color:var(--ok)}
.traka-stanje svg{flex:none;margin-top:.15rem}
.tab-mok{border-collapse:collapse;width:100%;font-size:var(--f1);font-family:var(--f-mono)}
.tab-mok th{text-align:left;color:var(--tekst2);font-weight:500;padding:.35rem .5rem;border-bottom:1px solid var(--ivica2);white-space:nowrap}
.tab-mok td{padding:.35rem .5rem;border-bottom:1px solid var(--ivica);color:var(--tekst2);vertical-align:top}
.tab-mok td:first-child{color:var(--tekst)}
.zaglavlje-strane .nad{margin-bottom:1.2rem}
.podnaslov-bloka{display:grid;gap:.8rem;margin-bottom:1.6rem;max-width:40rem}
.podnaslov-bloka h2{font-family:var(--f-display);font-size:var(--t4);line-height:1.08}
.podnaslov-bloka p{color:var(--tekst2)}
.korak .pokaz{max-width:100%}
.veliki-dug{display:grid;gap:1rem;justify-items:start}
.veliki-dug .dugme{font-size:var(--t1);min-height:3.4rem;padding-inline:1.7rem}

/* ---------- 25. SITNE POMOĆNE KLASE (umesto style="" u HTML-u, zbog CSP-a) ---------- */
.uz-36{max-width:36rem}
.uz-38{max-width:38rem}
.uz-42{max-width:42rem}
/* Pravna napomena uz svaku tvrdnju o propisima (nalog 031, Z0). Mora
   da bude citljiva: tisa od teksta, ali ne siva do nestajanja. */
.sitno-pravno{font-size:var(--t-1);color:var(--tekst2);border-top:1px solid var(--ivica);padding-top:.9rem;margin-top:1.2rem}
.uz-44{max-width:44rem}
.desno{margin-left:auto}
.razmak-s{margin-top:.9rem}
.razmak-m{margin-top:1.1rem}
.razmak-g{margin-top:1.4rem}
.razmak-gg{margin-top:1.6rem}
.bez-razmaka{margin-top:0}
.razmak-mok{margin-top:clamp(2.2rem,5vw,3.6rem)}
.sitan{font-size:var(--f1)}
.blag{color:var(--tekst2)}
.akcenat{color:var(--akc)}

/* Cene (nalog 034, t. 2; brojevi dolaze iz assets/cene.json). Strana
   postoji i pre nego sto je povezana u navigaciju, pa ovde stoji samo
   ono bez cega bi bila neprijatna za citanje. */
.cene-mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;margin-top:8px}
.cena-kutija{position:relative;background:var(--pov);border:1px solid var(--ivica);
  border-radius:12px;padding:20px 22px}
.cena-kutija h2{font-size:1rem;margin:0 0 6px}
.cena-iznos{margin:0;font-size:1.45rem;font-weight:600}
.cena-mesecno,.cena-mesta{margin:4px 0 0;color:var(--tekst2);font-size:var(--f1)}
.cena-kutija ul{margin:14px 0 0;padding-left:18px;color:var(--tekst2)}
.cena-kutija li{margin:4px 0}
.cena-uskoro{opacity:.78}
.cena-oznaka{position:absolute;top:14px;right:16px;margin:0;padding:2px 9px;
  border-radius:999px;background:var(--akc-pod);color:var(--akc);
  font-size:var(--f1);font-weight:600}

/* ---------- 26. MARGINA SA PARAGRAFOM (§) ----------
   Kao u podnesku: levo uska margina sa znakom § i nazivom celine, desno
   sadržaj. Nadnaslov (.nad) prelazi u marginu; na uskom ekranu stoji
   iznad naslova, u istom redu sa znakom. */
.zaglavlje-strane::before{display:none}
main{counter-reset:par}
.zaglavlje-sekcije > .nad,.podnaslov-bloka > .nad,.hero-tekst > .nad,.zaglavlje-strane .omot > .nad{letter-spacing:.1em}
.zaglavlje-sekcije > .nad::before,.podnaslov-bloka > .nad::before,.hero-tekst > .nad::before,.zaglavlje-strane .omot > .nad::before{
  content:"§";display:inline-block;width:auto;height:auto;background:none;margin:0 .5rem 0 0;vertical-align:-.12em;
  font-family:var(--f-display);font-size:1.9em;font-weight:400;letter-spacing:0;color:var(--akc);text-transform:none;line-height:1}
.zaglavlje-sekcije > .nad::before{counter-increment:par;content:"§ " counter(par)}
@media (min-width:861px){
  .blok > .omot,.zaglavlje-strane > .omot,.hero > .omot{display:grid;grid-template-columns:var(--margina) minmax(0,1fr);column-gap:var(--margina-razmak);align-items:start}
  .blok > .omot > *,.zaglavlje-strane > .omot > *,.hero > .omot > *{grid-column:2}
  .zaglavlje-sekcije,.podnaslov-bloka,.hero-tekst{grid-column:1 / -1 !important;display:grid;grid-template-columns:subgrid;column-gap:var(--margina-razmak);max-width:none}
  .zaglavlje-sekcije > *,.podnaslov-bloka > *,.hero-tekst > *{grid-column:2}
  .zaglavlje-sekcije > .nad,.podnaslov-bloka > .nad,.hero-tekst > .nad,.zaglavlje-strane .omot > .nad{
    grid-column:1;grid-row:1 / span 6;align-self:start;margin:0;padding-top:.7rem;
    font-size:.7rem;line-height:1.55;color:var(--tekst2);overflow-wrap:anywhere;hyphens:auto}
  .zaglavlje-strane .omot > .nad{grid-row:1 / span 3}
  .zaglavlje-sekcije > .nad::before,.podnaslov-bloka > .nad::before,.hero-tekst > .nad::before,.zaglavlje-strane .omot > .nad::before{
    display:block;font-size:2.1rem;margin:0 0 .7rem}
  .hero-tekst > :not(.nad){max-width:56rem}
  .zaglavlje-sekcije > :not(.nad),.podnaslov-bloka > :not(.nad){max-width:44rem}
  .zaglavlje-sekcije > h2,.podnaslov-bloka > h2{max-width:none}
  .siroko{grid-column:1 / -1 !important}
}
.zaglavlje-sekcije h2 em,.podnaslov-bloka h2 em{color:var(--akc)}

/* ---------- 27. SKROL-FILM: jedna rečenica preko linije poverenja ----------
   Bez skripte (i uz „smanji pokret") ovo je miran prikaz sa sve četiri
   kartice. site.js dodaje .film-ide: sekcija postaje visoka, pozornica
   stoji zakačena, a skrol vodi rečenicu kroz četiri koraka. */
.film{position:relative}
.film::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ivica)}
.f-scena{padding-block:clamp(2.4rem,5vw,3.6rem)}
.f-glava{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 1.6rem;flex-wrap:wrap;margin-bottom:1rem}
.f-glava .nad{margin:0 0 .6rem}
.f-glava h2.display{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.08}
.f-koraci{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font:500 .75rem/1 var(--f-mono);letter-spacing:.04em;color:var(--tekst3)}
.f-koraci li{display:flex;align-items:center;gap:6px;padding:7px 10px 7px 7px;border:1px solid var(--ivica);border-radius:999px;background:var(--pov);transition:color .3s,border-color .3s}
.f-koraci b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--pov2);font-weight:500;transition:background .3s,color .3s}
.f-koraci li.akt{color:var(--tekst);border-color:var(--akc)}
.f-koraci li.akt b{background:var(--akc);color:var(--pov)}
.f-koraci li.gotov b{background:var(--akc-pod);color:var(--akc)}
:root[data-theme="dark"] .f-koraci li.akt b{color:#10161a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .f-koraci li.akt b{color:#10161a}}
.f-opis{color:var(--tekst2);margin:0 0 1rem;min-height:1.6em;font-size:var(--t0)}
.f-sto{display:grid;grid-template-columns:1fr 4rem 1fr}
.f-zona{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;border:1px solid var(--ivica);border-radius:10px;min-width:0}
.f-zona.l{background:var(--zona-l)} .f-zona.d{background:var(--zona-d)}
.f-zona .zona-naslov{padding:.25rem .15rem .1rem}
.f-zona.l .zona-naslov{color:var(--ok)} .f-zona.d .zona-naslov{color:var(--akc)}
.f-karta{background:var(--pov);border:1px solid var(--ivica);border-radius:var(--r);box-shadow:var(--senka);padding:.85rem 1rem 1rem;transition:opacity .45s var(--lako),transform .45s var(--lako)}
.f-karta h3{font:500 .6875rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tekst2);margin:0 0 .6rem;display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.f-karta h3 span{color:var(--tekst3);letter-spacing:.03em;text-transform:none}
.f-tekst{font-family:var(--f-display);font-size:1.0625rem;line-height:1.75;margin:0}
.f-tekst .cip{font-size:.74em;vertical-align:.08em}
.f-pitanje{font-family:var(--f-display);font-style:italic;font-size:.94rem;line-height:1.5;color:var(--tekst2);border-left:2px solid var(--ivica2);padding-left:.75rem;margin:.75rem 0 0}
.f-par{white-space:nowrap}
.f-pad{display:inline-block;font:500 .625rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok);vertical-align:super;margin-left:3px}
.f-fus{font-family:var(--f-mono);font-size:var(--t-1);color:var(--tekst2);margin:1rem 0 0;max-width:62em}
.f-lin{position:relative}
.f-lin::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:2px;margin-left:-1px;background:repeating-linear-gradient(to bottom,var(--linija) 0 8px,transparent 8px 14px);opacity:.75}
.f-lin-natpis{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font:600 .625rem/1 var(--f-osnova);letter-spacing:.1em;text-transform:uppercase;color:var(--akc);background:var(--pod);padding:6px 8px;border-radius:999px;border:1px solid var(--ivica)}
.f-paket{position:absolute;top:calc(50% + 70px);left:50%;min-width:44px;height:26px;margin:-13px 0 0 -22px;padding:0 6px;border-radius:6px;background:var(--pov);border:1px solid var(--akc);display:none;place-items:center;font:500 .625rem/1 var(--f-mono);color:var(--akc);box-shadow:var(--senka);pointer-events:none;white-space:nowrap}
@media (max-width:860px){
  .f-sto{grid-template-columns:1fr;grid-template-rows:auto 44px auto}
  .f-lin::before{top:50%;bottom:auto;left:8px;right:8px;width:auto;height:2px;margin:-1px 0 0;background:repeating-linear-gradient(to right,var(--linija) 0 8px,transparent 8px 14px)}
  .f-lin-natpis{transform:translate(-50%,-50%)}
  .f-paket{top:50%;left:calc(50% + 110px)}
  .f-tekst{font-size:1rem;line-height:1.65}
}
/* film u pokretu */
.film-ide{height:330vh}
.film-ide .f-scena{position:sticky;top:var(--visina-vrha);height:calc(100vh - var(--visina-vrha));height:calc(100svh - var(--visina-vrha));display:flex;flex-direction:column;justify-content:center;padding-block:1rem}
.film-ide .f-paket{display:grid;opacity:0}
.film-ide .f-scena > *{flex-shrink:0}
.film-ide .ist{background:transparent;border-bottom-color:transparent}
.film-ide .ist.on.lice{background:var(--lice);border-bottom-color:var(--lice-c)}
.film-ide .ist.on.broj{background:var(--broj);border-bottom-color:var(--broj-c)}
.film-ide .ist.on.mesto{background:var(--mesto);border-bottom-color:var(--mesto-c)}
.film-ide .ist.on.firma{background:var(--firma);border-bottom-color:var(--firma-c)}
.film-ide .ist.on.kont{background:var(--kont);border-bottom-color:var(--kont-c)}
.film-ide .f-karta.skr{opacity:0;transform:translateY(14px) scale(.985)}
.film-ide .f-zona.d .f-karta.skr{transform:translateX(-26px) scale(.985)}
.film-ide .f-zona.l .f-karta.nazad.skr{transform:translateX(26px) scale(.985)}
.film-ide .w{opacity:.12;filter:blur(2px);transition:opacity .3s ease,filter .3s ease}
.film-ide .w.in{opacity:1;filter:none}
.film-ide .f-pad{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.film-ide .f-pad.in{opacity:1;transform:none}
.film-ide .f-fus{opacity:0;transition:opacity .4s}
.film-ide .f-fus.in{opacity:1}
@media (max-width:860px){
  .film-ide .f-fus{font-size:.6875rem;margin-top:.6rem}
  .film-ide .f-zona{display:grid;grid-template-areas:"n" "k"}
  .film-ide .f-zona .zona-naslov{grid-area:n}
  .film-ide .f-zona .f-karta{grid-area:k;align-self:start}
  .film-ide .f-karta.skr,.film-ide .f-karta.pokriven{opacity:0;visibility:hidden}
  .film-ide .f-tekst{font-size:.9375rem;line-height:1.6}
  .film-ide .f-pitanje{font-size:.875rem}
  .film-ide .f-koraci{font-size:.6875rem;gap:4px}
  .film-ide .f-koraci li{padding:5px 8px 5px 5px}
  .film-ide .f-glava{margin-bottom:.5rem}
  .film-ide .f-glava .nad{display:none}
}

/* ---------- 28. STRANA „USKORO" (prijava za obaveštenje) ---------- */
.stanje-uskoro{color:var(--tekst2);max-width:36rem;display:flex;flex-wrap:wrap;gap:.5rem .7rem;align-items:baseline}
.prijava{display:grid;gap:.7rem;max-width:36rem;margin-top:.4rem}
.prijava > label:first-child{font-weight:600}
.prijava .red{display:flex;gap:.6rem;flex-wrap:wrap}
.prijava input[type="email"]{flex:1 1 16rem;min-height:3.1rem;padding:.7rem 1rem;border-radius:var(--r);border:1px solid var(--ivica2);background:var(--pov);color:var(--tekst);font:inherit;transition:border-color .2s ease, box-shadow .2s ease}
.prijava input[type="email"]:focus{outline:none;border-color:var(--akc);box-shadow:0 0 0 4px var(--sjaj-slab)}
.prijava .pristanak{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:var(--t-1);color:var(--tekst2);line-height:1.5}
.prijava .pristanak input{margin:.2rem 0 0;width:1.05rem;height:1.05rem;accent-color:var(--akc)}
.prijava .poruka{min-height:1.4em;font-size:var(--t0);color:var(--akc);font-weight:500}
.dno-en{color:var(--tekst3);font-size:var(--t-1);padding-bottom:1.6rem;max-width:44rem}

/* nizak ekran telefona: film mora da stane u jedan ekran */
@media (max-width:860px) and (max-height:800px){
  .film-ide .f-glava h2.display{font-size:1.35rem}
  .film-ide .f-koraci{display:none}
  .film-ide .f-fus{display:none}
  .film-ide .f-opis{font-size:.875rem;margin-bottom:.5rem}
  .film-ide .f-sto{grid-template-rows:auto 34px auto}
  .film-ide .f-tekst{font-size:.875rem;line-height:1.55}
  .film-ide .f-karta{padding:.6rem .75rem .7rem}
}

/* ---------- 29. SCENE: strana se sklapa sa skrolom (site.js dodaje .scene) ---------- */
.scene .otkrij,.scene .zaglavlje-sekcije.otkrij,.scene .podnaslov-bloka.otkrij{animation:none;opacity:1;transform:none;filter:none;transition:none}
.scene .deli .wd,.scene .zaglavlje-strane .omot,.scene .sklapa{animation:none}
.scene .atom{opacity:var(--t,1);
  transform:translate3d(calc((1 - var(--t,1)) * var(--ax,0px)),calc((1 - var(--t,1)) * var(--ay,0px)),0) rotate(calc((1 - var(--t,1)) * var(--ar,0deg)));
  transition:none}
.scene .atom.mutno{filter:blur(calc((1 - var(--t,1)) * 8px))}
.scene .zakacena{padding-block:0}
.scene .zakacena > .omot{position:sticky;top:var(--visina-vrha);min-height:calc(100vh - var(--visina-vrha));min-height:calc(100svh - var(--visina-vrha));padding-block:clamp(1.5rem,4vh,3rem);align-content:center}
@media (max-width:860px){.scene .zakacena > .omot{display:flex;flex-direction:column;justify-content:center}}

/* ---------- 30. POZADINA: blag sloj kroz celu stranu ----------
   Levo zelen sjaj (vaš računar), desno plav (oblak), kao zone u programu;
   tanka mreža kao papir za podnesak, vidna samo uz ivice; u širokim
   marginama plutaju oznake; linija poverenja se puni sa skrolom. */
:root{--bg-l:rgba(44,98,73,.085);--bg-d:rgba(29,91,110,.10);--mreza:rgba(26,29,33,.045)}
:root[data-theme="dark"]{--bg-l:rgba(143,208,166,.06);--bg-d:rgba(127,184,204,.075);--mreza:rgba(255,255,255,.035)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg-l:rgba(143,208,166,.06);--bg-d:rgba(127,184,204,.075);--mreza:rgba(255,255,255,.035)}}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46vmax 36vmax at 6% calc(10% + var(--skrol,0) * 75%),var(--bg-l),transparent 70%),
    radial-gradient(50vmax 40vmax at 96% calc(88% - var(--skrol,0) * 75%),var(--bg-d),transparent 70%)}
.pozadina{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pozadina::before{content:"";position:absolute;inset:-80px 0;
  background-image:linear-gradient(to right,var(--mreza) 1px,transparent 1px),linear-gradient(to bottom,var(--mreza) 1px,transparent 1px);
  background-size:44px 44px;transform:translateY(calc(var(--skrol,0) * -80px));
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 46%,transparent 35%,#000 100%);mask-image:radial-gradient(ellipse 58% 64% at 50% 46%,transparent 35%,#000 100%)}
.pozadina-znak{position:absolute;left:var(--x);top:0;font:500 .78rem/1 var(--f-mono);color:var(--tekst2);opacity:.2;white-space:nowrap;will-change:transform}
.pozadina-znak.par{font:300 3.4rem/1 var(--f-display);color:var(--akc);opacity:.12}
@media (max-width:1359px){.pozadina-znak{display:none}}
.pozadina-linija{position:absolute;top:0;bottom:0;width:1px}
.pozadina-linija::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--linija) 0 6px,transparent 6px 12px);opacity:.28}
.pozadina-linija::after{content:"";position:absolute;inset:0;background:var(--akc);opacity:.55;transform-origin:50% 0;transform:scaleY(var(--skrol,0))}