/* ============================================================================
   UC POLICE PANEL — javni del spletisca
   ----------------------------------------------------------------------------
   Strani, ki jih vidi vsak: domaca stran, enote, novice, galerija,
   zaposlitev in prijavni zaslon.

   Videz sledi istim referencam kot panel: skoraj crna podlaga, zaobljene
   plosce, lasaste crte. Razlika je v tem, da javni del nosi fotografije —
   te so glavni vir svetlobe na strani in edino mesto, kjer je kaj toplega.

   Jedro (barve, gumbi, obrazci) je v core.css.
   ========================================================================== */

/* ================================================================ 1. GLAVA
   Glava in noga sta iz stekla: skozi njiju se vidi ozadje, a zamegljeno in
   z okrepljenimi barvami. Steklo sestavljajo stirje deli in vsak nekaj
   prispeva — ce katerega odstranis, ucinek razpade:

     backdrop-filter   zamegli, kar je za ploscо, in okrepi barve
     prosojna podlaga  da steklu telo; povsem prosojno bi bilo nevidno
     notranja crta     svetel odsev na zgornjem robu, debelina stekla
     zunanja crta      lasasta meja proti vsebini

   Prosojnost ostane tudi ob drsenju. Prej je glava takrat postala skoraj
   neprosojna in steklo je izginilo — zdaj se samo potemni in crta postane
   vidna.                                                                */
.site-head{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(22,32,48,.58),rgba(6,9,14,.46));
  backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  border-bottom:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  transition:background .4s var(--e-out),border-color .4s var(--e-out),
             box-shadow .4s var(--e-out);
}
.site-head.is-stuck{
  background:linear-gradient(180deg,rgba(18,26,40,.72),rgba(4,7,11,.62));
  border-bottom-color:var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px rgba(0,0,0,.4);
}
/* Blag lom svetlobe cez steklo — poteka posevno, kot odsev na sipki plosci. */
.site-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,.055) 0%,
    transparent 26%,
    transparent 68%,
    rgba(140,190,255,.05) 100%);
}
.site-head .wrap{display:flex;align-items:center;gap:20px;width:100%;position:relative;z-index:1;}

.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand img{width:36px;height:36px;}
.brand b{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--tx-1);line-height:1.12;}
.brand small{
  display:block;font-family:var(--f-mono);font-size:.52rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ice-500);
}

/* Meni iz zaobljenih tablet, kot v referenci.
   Pravilo velja samo za povezave, ki NISO gumbi. Brez :not(.btn) bi
   .site-nav a (dva izbirnika) premagal .btn-primary (en izbirnik) in gumb
   za prijavo bi dobil svetlo besedilo na svetli podlagi.               */
.site-nav{display:flex;align-items:center;gap:3px;margin-left:auto;}
.site-nav a:not(.btn){
  padding:8px 15px;border-radius:var(--r-ctl);
  font-family:var(--f-display);font-weight:600;font-size:.84rem;
  letter-spacing:.06em;
  /* Svetleje od --tx-3. Glava je steklena in nad uvodno fotografijo skoznjo
     sveti svetla uniforma: podlaga tam doseze (47,54,67). Pri --tx-3 je
     razmerje 3,89 : 1, kar je pod mejo 4,5 : 1 za drobno besedilo; pri
     --tx-2 je 7,19 : 1. Ne temni ga nazaj.                             */
  color:var(--tx-2);
  transition:color .26s var(--e-out),background .26s var(--e-out);
}
.site-nav a:not(.btn):hover{color:var(--tx-1);background:var(--surf-2);}
.site-nav a:not(.btn).is-here{color:var(--ice-200);background:var(--surf-3);}
.site-nav .btn{margin-left:8px;}

/* Preklop jezika je v core.css, odsek 9b — uporablja ga tudi panel. */

.burger{display:none;width:38px;height:38px;flex:none;align-items:center;justify-content:center;color:var(--tx-2);}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:background .24s var(--e-out);}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .34s var(--e-out);
}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
.burger.is-open span{background:transparent;}
.burger.is-open span::before{transform:translateY(6px) rotate(45deg);}
.burger.is-open span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:1060px){
  .burger{display:flex;}
  .site-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:2px;
    margin:0;padding:12px var(--pad) 24px;
    background:rgba(6,8,12,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:transform .36s var(--e-out),opacity .28s var(--e-out);
  }
  .site-nav.is-open{transform:none;opacity:1;pointer-events:auto;}
  .site-nav a:not(.btn){padding:13px 14px;font-size:.95rem;}
  .site-nav .btn{margin:14px 0 0;}
}

/* ================================================================= 2. UVOD
   Fotografija cez cel zaslon, cez njo temna zavesa in besedilo. Zavesa je
   nujna: brez nje bela uniforma pod besedilom naredi napis neberljiv.   */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:flex-end;
  padding-block:clamp(60px,9vw,110px) clamp(40px,6vw,80px);
  overflow:hidden;
}
.hero-foto{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.hero-foto img{
  width:100%;height:100%;object-fit:cover;object-position:center 34%;
  /* Pocasno priblizevanje — fotografija nikoli ne stoji povsem pri miru */
  animation:zoom 26s var(--e-in-out) infinite alternate;
}
@keyframes zoom{0%{transform:scale(1.04);}100%{transform:scale(1.15);}}
/* Tri zavese: od spodaj, z leve in enakomerna. Skupaj dajo prostor za
   besedilo, ne da bi fotografijo povsem pogasile.                       */
.hero-foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,var(--surf-0) 2%,rgba(6,8,12,.72) 34%,rgba(6,8,12,.3) 62%,rgba(6,8,12,.54)),
    linear-gradient(90deg,rgba(6,8,12,.86) 0%,rgba(6,8,12,.44) 46%,transparent 74%);
}

.hero-in{width:100%;max-width:800px;}
.hero h1{margin-block:16px 22px;}
.hero h1 span{display:block;}
.hero .lede{margin-bottom:30px;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--tx-2);}

/* Vrstica stevilk pod uvodom */
.hero-st{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);
  margin-top:clamp(28px,3.4vw,46px);
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
}
.hero-st div b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;color:var(--tx-1);
  font-variant-numeric:tabular-nums;
}
.hero-st div span{
  display:block;margin-top:5px;
  font-family:var(--f-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-4);
}

.hero-scroll{
  position:absolute;right:var(--pad);bottom:clamp(40px,6vw,80px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tx-4);
  writing-mode:vertical-rl;
}
.hero-scroll i{
  width:1px;height:38px;background:linear-gradient(180deg,var(--ice-500),transparent);
  animation:drop 2.2s var(--e-out) infinite;
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0;}
}
@media (max-width:900px){.hero-scroll{display:none;}}

/* ============================================================ 3. STEVILKE */
.stat{padding:24px 22px;text-align:center;}
.stat b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:var(--tx-1);
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block;margin-top:9px;
  font-family:var(--f-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-4);
}

/* ================================================================ 4. ENOTE */
.unit{display:block;padding:24px 22px;position:relative;overflow:hidden;}
.unit .ico{
  width:42px;height:42px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--u-soft,rgba(95,180,238,.1));
  border:1px solid var(--u-line,rgba(95,180,238,.22));
  border-radius:var(--r-ctl);
  color:var(--u,var(--ice-400));
}
.unit .ico svg{width:20px;height:20px;}
.unit h3{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--tx-1);margin-bottom:8px;letter-spacing:-.01em;}
.unit p{font-size:.9rem;line-height:1.62;color:var(--tx-3);}
.unit .n{
  margin-top:15px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-4);
}
.unit .n b{font-size:1.08rem;color:var(--u,var(--ice-300));letter-spacing:0;}

/* Odtenek enote. --u je crta in napis, --u-soft podlaga ikone, --u-line
   obroba, --u-sij pa sij za likom na vrtiljaku, ki mora biti mocnejsi od
   podlage, sicer se v skoraj crni kartici sploh ne vidi.                 */
.u-ice{--u:var(--ice-400);--u-soft:rgba(95,180,238,.1);--u-line:rgba(95,180,238,.22);--u-sij:rgba(95,180,238,.3);}
.u-amber{--u:var(--hue-amber);--u-soft:rgba(232,177,76,.1);--u-line:rgba(232,177,76,.22);--u-sij:rgba(232,177,76,.28);}
.u-violet{--u:var(--hue-violet);--u-soft:rgba(155,123,232,.1);--u-line:rgba(155,123,232,.22);--u-sij:rgba(155,123,232,.32);}
.u-mint{--u:var(--hue-mint);--u-soft:rgba(79,217,168,.1);--u-line:rgba(79,217,168,.22);--u-sij:rgba(79,217,168,.26);}
.u-rose{--u:var(--hue-rose);--u-soft:rgba(232,135,155,.1);--u-line:rgba(232,135,155,.22);--u-sij:rgba(232,135,155,.3);}
.u-cyan{--u:var(--hue-cyan);--u-soft:rgba(69,194,212,.1);--u-line:rgba(69,194,212,.22);--u-sij:rgba(69,194,212,.28);}
.u-copper{--u:var(--hue-copper);--u-soft:rgba(224,135,63,.1);--u-line:rgba(224,135,63,.22);--u-sij:rgba(224,135,63,.3);}
.u-idle{--u:var(--idle);--u-soft:rgba(126,147,172,.1);--u-line:rgba(126,147,172,.22);--u-sij:rgba(126,147,172,.26);}

/* ==================================================== 4b. VRTILJAK ENOT
   ----------------------------------------------------------------------
   Kartice enot se vrtijo kot zgodba na Instagramu. Spredaj stoji ena enota
   v polni barvi, za njo se v globino zvrstijo naslednje, crta na vrhu pa
   kaze, koliko casa je se do preklopa.

   POSTAVITEV. Vse kartice lezijo druga na drugi (position:absolute), vsaka
   pa nosi stevilko mesta v spremenljivki --slot. Iz nje se izracuna cel
   njen polozaj: zamik v stran, globina, zasuk, velikost in motnost. JavaScript
   ne racuna nobenih pikslov — samo pove, katera kartica je na katerem mestu.

   ZAKAJ ZAMIK V ODSTOTKIH LASTNE SIRINE. Odstotek v translateX se ne meri
   po odru, ampak po kartici sami. Korak je zato zapisan kot
   "100% + vrzel" — sirina kartice in se razmik do naslednje.

   VISINO ODRA doloci nevidno merilo .odd-mera: edini element v navadnem
   toku, ki ima isto sirino in razmerje kot kartica. Brez njega bi bil oder
   visok nic, ker so kartice iz toka vzete.                              */

.oddelki{
  --vidnih:4;                      /* koliko kartic je hkrati na odru      */
  --vrzel:clamp(10px,1.1vw,18px);  /* razmik med karticami                 */
  --sirina:calc((100% - (var(--vidnih) - 1) * var(--vrzel)) / var(--vidnih));
  --rob:0%;                        /* zamik odra; na telefonu sredinski    */
  position:relative;
}

@media (max-width:1180px){ .oddelki{--vidnih:3;} }
@media (max-width:880px) { .oddelki{--vidnih:2;} }
@media (max-width:620px) { .oddelki{--vidnih:1;--sirina:80%;--rob:10%;} }

/* --- crta z odseki nad odrom -------------------------------------------- */
.odd-crta{
  display:flex;gap:7px;
  margin-bottom:clamp(16px,2vw,26px);
}
.odd-seg{
  position:relative;flex:1;height:22px;
  border:0;background:none;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
/* Gumb je visok 22 px, da ga je mogoce zadeti; vidna je samo crta v sredini. */
.odd-seg::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:3px;margin-top:-1.5px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);
  transition:background .45s var(--e-out);
}
.odd-seg.je-na-odru::before{background:rgba(255,255,255,.18);}
.odd-seg i{
  position:absolute;left:0;top:50%;width:100%;
  height:3px;margin-top:-1.5px;border-radius:var(--r-pill);
  background:var(--u,var(--ice-400));
  box-shadow:0 0 12px var(--u-sij,rgba(95,180,238,.3));
  transform:scaleX(0);transform-origin:left center;
}
/* Kadar samodejnega vrtenja ni (manj gibanja, izklop v config.js), crta
   ne tece — dejavni odsek je takrat preprosto poln.                      */
.odd-seg.je-spredaj i{transform:scaleX(1);}
.odd-seg:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:var(--r-sm);}

@keyframes odd-polni{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* --- oder --------------------------------------------------------------- */
.odd-oder{
  position:relative;
  perspective:1700px;
  perspective-origin:50% 42%;
  transform-style:preserve-3d;
  /* Kartice, ki cakajo zunaj, so sicer nevidne, a naj ne segajo cez stran.
     Rob izreza je natanko rob strani: toliko prostora sence in prihajajoca
     kartica se imajo, dlje pa ne, sicer bi se stran zacela prelivati v
     sirino. Starejsi brskalniki, ki "clip" ne poznajo, pravila ne
     uporabijo; takrat odvecno sirino odreze body, ki ima overflow-x
     ze skrit.                                                           */
  overflow:clip;
  overflow-clip-margin:var(--pad);
  transform:rotateX(var(--nag-x,0deg)) rotateY(var(--nag-y,0deg));
  transition:transform .9s var(--e-out);
}
/* Razmerje 5 : 8 je visje od kvadratnega in nizje od filmskega plakata —
   dovolj visoko, da lik stoji cel, in dovolj sirok, da gre pod njega
   dvovrsticni opis.                                                     */
.odd-mera{display:block;width:var(--sirina);aspect-ratio:5/8;visibility:hidden;}

/* --- posamezna kartica --------------------------------------------------- */
.odd-kos{
  position:absolute;top:0;left:var(--rob);
  width:var(--sirina);height:100%;
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surf-2),var(--surf-0));
  overflow:hidden;isolation:isolate;
  cursor:pointer;

  transform:
    translateX(calc(var(--slot,0) * (100% + var(--vrzel))))
    translateY(calc(var(--slot,0) * 7px))
    translateZ(calc(var(--slot,0) * -54px))
    rotateY(calc(var(--slot,0) * -3.2deg))
    scale(calc(1 - var(--slot,0) * .032));
  transform-origin:50% 100%;
  /* Kartice v ozadju se le rahlo umaknejo. Mocnejse bledenje je bilo
     lepse, a je opis na zadnji kartici padel na 3,07 : 1 in ga ni bilo
     vec mogoce brati. Globino zdaj nosijo velikost, zasuk in sivina lika,
     motnost pa samo toliko, da se opis drzi nad 4,5 : 1. Ne povecuj je. */
  opacity:calc(1 - var(--slot,0) * .07);
  z-index:calc(10 - var(--slot,0));

  transition:
    transform .85s var(--e-out),
    opacity .7s var(--e-out),
    border-color .6s var(--e-out),
    box-shadow .7s var(--e-out);
  will-change:transform,opacity;
}
/* Kartica, ki caka zunaj odra, se med parkiriscema prestavi na mah —
   drugace bi nevidno preletela cel oder in bi jo bilo ob koncu kroga
   videti prihajati z napacne strani.                                     */
.odd-kos.brez-giba{transition:none;}
.odd-kos.je-zunaj{opacity:0;pointer-events:none;}

.odd-kos.je-spredaj{
  border-color:var(--u-line,rgba(95,180,238,.22));
  box-shadow:0 28px 64px rgba(0,0,0,.6),0 0 44px -18px var(--u-sij,transparent);
  cursor:default;
}

/* Barvni sij enote za likom */
.odd-sij{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 62% at 50% 4%,var(--u-sij,rgba(95,180,238,.3)),transparent 64%),
    radial-gradient(90% 50% at 50% 100%,rgba(3,5,9,.9),transparent 70%);
  opacity:.5;transition:opacity .8s var(--e-out);
}
.odd-kos.je-spredaj .odd-sij,
.odd-kos.je-brez-slike .odd-sij{opacity:1;}

/* Mreza v ospredju — ista pisava prostora kot ozadje strani */
.odd-mreza{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 66%);
          mask-image:linear-gradient(180deg,#000,transparent 66%);
}

/* Izrezan lik, poravnan na dno kartice.

   object-fit:contain in ne cover: lik mora biti vedno cel. Pri "cover" bi
   ga kartica ob vsaki drugacni sirini drugace obrezala in policistu bi
   odrezalo glavo. Zgoraj mu pustimo se sest odstotkov zraka.

   Kartice v ozadju lik pomanjsajo, sprednja ga pokaze v polni velikosti.
   Nasprotno — povecanje sprednjega — ne pride v postev: kartica
   ima skrit preliv, zato bi povecanje glavo odrezalo.                   */
.odd-lik{position:absolute;inset:5% 0 0;z-index:2;}
/* Lik v ozadju je zamegljen, sprednji oster. To je globinska ostrina in
   je najmocnejsi znak, katera kartica je zdaj na vrsti — mocnejsi od
   velikosti in od barve. Napis ostane oster tudi v ozadju: zamegljeno
   besedilo se ne bere, zamegljena slika pa se gleda.                   */
.odd-lik img{
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%;
  transform:scale(.95);transform-origin:50% 100%;
  filter:blur(1.6px) grayscale(.52) brightness(.66) contrast(1.05);
  transition:transform 1.1s var(--e-out),filter .9s var(--e-out);
}
/* Sprednji lik: oster, v polni barvi in s sijem po obrisu. Sij je prava
   senca po obliki (drop-shadow bere prosojnost slike), zato tece natanko
   po robu policista in ne po robu kartice.                             */
.odd-kos.je-spredaj .odd-lik img{
  transform:scale(1);
  filter:
    drop-shadow(0 0 26px var(--u-sij,rgba(95,180,238,.3)))
    drop-shadow(0 18px 34px rgba(0,0,0,.75));
}
.odd-kos.je-spredaj .kino-megla{opacity:1;}
/* Svetloba se pomakne cez prizor samo pri sprednji kartici. */
.odd-kos.je-spredaj .kino-zarek{
  opacity:1;
  animation:kino-prehod 9s var(--e-in-out) infinite alternate;
}

/* Enote brez fotografije: velika znacka namesto lika. */
.odd-brez{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;padding-bottom:22%;
  color:var(--u,var(--ice-400));
}
/* Obroc za znacko, da ima kartica sredisce tudi brez lika. */
.odd-brez::before{
  content:"";position:absolute;top:50%;left:50%;
  width:78%;aspect-ratio:1;transform:translate(-50%,-62%);
  border-radius:var(--r-pill);
  border:1px solid var(--u-line,rgba(95,180,238,.22));
  background:radial-gradient(circle,var(--u-sij,transparent) -30%,transparent 66%);
  opacity:.5;transition:opacity .8s var(--e-out);
}
.odd-brez svg{position:relative;width:52%;height:auto;stroke-width:.8;opacity:.22;
              transition:opacity .8s var(--e-out);}
.odd-kos.je-spredaj .odd-brez svg{opacity:.42;}
.odd-kos.je-spredaj .odd-brez::before{opacity:1;}

/* Zavesa nosi dvoje: preliv ob dnu, da je napis berljiv tudi cez svetel
   del lika, in vinjeto — potemnjene vogale, ki oko potegnejo na sredino.
   Obe sta na isti plasti, ker morata obe lezati nad likom in pod napisom. */
.odd-zavesa{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      transparent 26%,
      rgba(3,5,9,.55) 56%,
      rgba(3,5,9,.88) 76%,
      rgba(3,5,9,.97) 100%),
    radial-gradient(118% 82% at 50% 38%,
      transparent 42%,
      rgba(0,0,0,.5) 100%);
}

/* Znacka enote v steklu, zgoraj levo */
.odd-znak{
  position:absolute;top:12px;left:12px;z-index:4;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-ctl);
  background:rgba(8,12,19,.55);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--tx-2);
  transition:background .5s var(--e-out),color .5s var(--e-out),
             border-color .5s var(--e-out);
}
.odd-kos.je-spredaj .odd-znak{
  background:var(--u,var(--ice-400));border-color:var(--u,var(--ice-400));
  color:#04070C;
}

/* Napis */
.odd-tx{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:block;padding:0 clamp(14px,1.2vw,20px) clamp(16px,1.5vw,22px);
}
.odd-st{
  display:flex;align-items:center;gap:9px;margin-bottom:8px;
  font-family:var(--f-mono);font-size:.56rem;font-weight:600;
  letter-spacing:.2em;color:var(--u,var(--ice-400));
}
/* Crta ob stevilki raste iz nic, ko kartica pride spredaj. */
.odd-st::after{
  content:"";height:1px;width:0;
  background:linear-gradient(90deg,var(--u,var(--ice-400)),transparent);
  transition:width .9s var(--e-out);
}
.odd-kos.je-spredaj .odd-st::after{width:52px;}
.odd-tx b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.12;
  letter-spacing:-.012em;color:var(--tx-1);
  text-shadow:0 2px 14px rgba(0,0,0,.9);
  transition:font-size .8s var(--e-out),letter-spacing .8s var(--e-out);
}
/* Ime sprednje enote je vecje in tesnejse. Razlika je majhna, a dovolj,
   da oko ve, kje je zdaj zgodba — tako kot v napisu na plakatu.      */
.odd-kos.je-spredaj .odd-tx b{
  font-size:clamp(1.2rem,1.62vw,1.6rem);
  letter-spacing:-.022em;
}
/* Opis je na vseh karticah enako svetel. Prej je bil na zadnjih temnejsi,
   kar je izgledalo lepse, a je skupaj z motnostjo kartice padel pod mejo
   berljivosti. Katera kartica je spredaj, pove barva lika in ne napis. */
.odd-op{
  display:block;margin-top:8px;
  font-size:.855rem;line-height:1.56;color:var(--tx-2);
}

/* --- krmilje pod odrom --------------------------------------------------- */
.odd-krm{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  margin-top:clamp(16px,2vw,24px);
}
.odd-stevec{
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;color:var(--tx-4);
  font-variant-numeric:tabular-nums;order:-1;margin-right:auto;
}
.odd-gumb{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  color:var(--tx-2);
  transition:background .35s var(--e-out),color .35s var(--e-out),
             border-color .35s var(--e-out),transform .35s var(--e-spring);
}
.odd-gumb:hover{
  background:rgba(255,255,255,.09);border-color:var(--line-3);
  color:var(--tx-1);transform:translateY(-2px);
}
.odd-gumb:focus-visible{outline:2px solid var(--glow);outline-offset:3px;}

/* Kadar je enot premalo za vrtenje, krmilja in crte ni. */
.oddelki.je-mirna .odd-crta,
.oddelki.je-mirna .odd-krm{display:none;}

@media (prefers-reduced-motion: reduce){
  .odd-kos,.odd-oder,.odd-lik img{transition:none;}
}

/* ==================================================== 4c. STRAN ENOTE
   ----------------------------------------------------------------------
   Predstavitev ene enote cez sirino: lik na eni strani, besedilo na drugi.
   Strani se pri vsaki naslednji enoti zamenjata (razred .je-obrnjena), da
   stran ob branju ne postane stolpec enakih skatel.

   Plosca z likom si deli plasti z vrtiljakom na domaci strani (.odd-sij,
   .odd-mreza, .odd-lik, .odd-brez), zato sta obe predstavitvi iz istega
   materiala in enota povsod izgleda enako.                             */

.enote-seznam{display:grid;gap:clamp(18px,2.2vw,30px);}

.enota{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:stretch;
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surf-1),var(--surf-0));
  overflow:hidden;
  transition:border-color .5s var(--e-out),box-shadow .5s var(--e-out);
}
.enota:hover{
  border-color:var(--u-line,var(--line-2));
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px -22px var(--u-sij,transparent);
}
/* Vsaka druga enota ima lik na desni. Vrstni red v HTML ostane isti, da
   bralnik zaslona vedno prebere najprej ime enote in sele nato sliko.  */
.enota.je-obrnjena .enota-slika{order:2;}

/* Plosca z likom nima svoje podlage: pusti skozi preliv kartice, zato je
   sev med sliko in besedilom neviden na vsaki visini. Ce bi imela svojo,
   bi se pri dnu kartice razsla z besedilnim stolpcem.                   */
.enota-slika{
  position:relative;min-height:clamp(340px,26vw,450px);
  overflow:hidden;isolation:isolate;
}
/* Lik ima na tej strani vec prostora kot na vrtiljaku, je oster in v polni
   barvi — tukaj je on prizor in ne kartica v vrsti. Sij po obrisu naredi
   drop-shadow, ki bere prosojnost slike, zato tece natanko po robu
   policista.                                                            */
/* Okvir lika je visji od plosce: lik je zato vecji in ga spodaj odreze pri
   golenih — tam ga zavesa ze tako ali tako ugasne. Pri plosci, ki je
   sirsa kot visja, bi lik v celoti stal sredi praznine in bi bil videti
   drobcen.

   Postavljen je rahlo proc od besedila: pogled tako pade najprej nanj in
   se nato premakne k imenu enote. Sredinska postavitev je mirnejsa, a bolj
   podobna predlogi kot posnetku.                                        */
.enota .odd-lik{inset:-4% 0 -12%;}
.enota .odd-lik img{object-position:42% 100%;}
.enota.je-obrnjena .odd-lik img{object-position:58% 100%;}
.enota .odd-lik img{
  transform:scale(1) translateY(var(--zamik,0px));
  filter:
    drop-shadow(0 0 30px var(--u-sij,rgba(95,180,238,.3)))
    drop-shadow(0 20px 40px rgba(0,0,0,.8));
  transition:filter .8s var(--e-out);
  will-change:transform;
}
.enota .odd-brez{padding-bottom:0;}
.enota .odd-sij{opacity:1;}
.enota .kino-megla{opacity:.9;bottom:4%;height:58%;}
.enota .kino-zrno{opacity:.14;}
.enota .kino-zarek{opacity:1;animation:kino-prehod 11s var(--e-in-out) infinite alternate;}

/* Zavesa tece od spodaj in z notranje strani proti besedilu, da prehod med
   sliko in besedilom ni ostra navpicnica.                              */
/* Zavesa nosi troje: preliv ob dnu, mehak sev proti besedilu in vinjeto.
   Vse tri so na isti plasti, ker morajo vse lezati nad likom.          */
.enota-zavesa{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 62%,rgba(3,5,9,.72) 84%,rgba(3,5,9,.97) 100%),
    linear-gradient(90deg,transparent 58%,rgba(3,5,9,.85) 100%),
    radial-gradient(105% 88% at 38% 42%,transparent 46%,rgba(0,0,0,.52) 100%);
}
.enota.je-obrnjena .enota-zavesa{
  background:
    linear-gradient(180deg,transparent 62%,rgba(3,5,9,.72) 84%,rgba(3,5,9,.97) 100%),
    linear-gradient(270deg,transparent 58%,rgba(3,5,9,.85) 100%),
    radial-gradient(105% 88% at 62% 42%,transparent 46%,rgba(0,0,0,.52) 100%);
}

.enota-tx{
  position:relative;
  padding:clamp(22px,2.6vw,38px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
/* Stevilka enote, narisana samo z obrisom in postavljena za besedilo.
   Ni podatek — isto stevilko pise tudi zgoraj ob znacki — ampak globina:
   pove, da je za besedilom se prostor. Zato je aria-hidden.           */
.enota-duh{
  position:absolute;right:-.06em;top:50%;
  transform:translateY(-54%);
  z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(8rem,15vw,15rem);line-height:.72;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--u,var(--ice-400));
  opacity:.085;
}
.enota.je-obrnjena .enota-duh{right:auto;left:-.06em;}
.enota-glava,.enota-tx h2,.enota-opis,.enota-stolpca{position:relative;z-index:1;}
.enota-glava{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.enota-glava .odd-st::after{width:40px;}
.enota-znak{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-ctl);
  background:var(--u-soft,rgba(95,180,238,.1));
  border:1px solid var(--u-line,rgba(95,180,238,.22));
  color:var(--u,var(--ice-400));
}
.enota-tx h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.06;
  letter-spacing:-.025em;color:var(--tx-1);
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.enota-opis{
  margin-top:11px;max-width:62ch;
  font-size:.95rem;line-height:1.65;color:var(--tx-2);
}

.enota-stolpca{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(18px,2.2vw,34px);
  margin-top:clamp(18px,2vw,26px);
  padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);
}
.enota-sez h3{
  font-family:var(--f-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx-4);
  margin-bottom:11px;
}
.enota-sez ul{list-style:none;display:grid;gap:7px;}
.enota-sez li{
  position:relative;padding-left:17px;
  font-size:.875rem;line-height:1.5;color:var(--tx-2);
}
/* Pika pred nalogo nosi barvo enote — edini kos barve v tem stolpcu. */
.enota-sez li::before{
  content:"";position:absolute;left:0;top:.57em;
  width:5px;height:5px;border-radius:var(--r-pill);
  background:var(--u,var(--ice-400));
}
.enota-sez dl{display:grid;gap:11px;}
.enota-sez dt{
  font-family:var(--f-mono);font-size:.56rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);
  margin-bottom:2px;
}
/* Vrednost pogoja NI v barvi enote. Cin ima svojo barvo drugje na
   spletiscu (lestvica cinov, cinske oznake); ce bi tu prevzel barvo
   enote, bi bil isti cin pri eni enoti rozast in pri drugi zelen, kar
   bralca zavede. Barva enote ostane na znacki, stevilki in pikah.     */
.enota-sez dd{
  font-family:var(--f-display);font-weight:700;
  font-size:.98rem;line-height:1.25;color:var(--tx-1);
}

@media (max-width:980px){
  .enota-stolpca{grid-template-columns:1fr;gap:20px;}
}
@media (max-width:860px){
  /* Na ozjem zaslonu gre slika nad besedilo. Obrnjena postavitev tu nima
     smisla: v enem stolpcu bi pomenila samo, da je pri vsaki drugi enoti
     slika pod besedilom, in bralec bi izgubil ritem.                   */
  .enota{grid-template-columns:1fr;}
  .enota.je-obrnjena .enota-slika{order:0;}
  .enota-slika{min-height:0;aspect-ratio:5/4;}
  .enota .odd-lik{inset:6% 0 0;}
  .enota-zavesa,
  .enota.je-obrnjena .enota-zavesa{
    background:linear-gradient(180deg,transparent 56%,rgba(3,5,9,.75) 82%,rgba(3,5,9,.97) 100%);
  }
}

/* ==================================================== 4d. FILMSKE PLASTI
   ----------------------------------------------------------------------
   Plasti, ki iz ploscate kartice naredijo osvetljen prizor. Uporabljata jih
   vrtiljak na domaci strani in stran Enote, zato sta obe iz iste svetlobe.

   Od kod to. Kartica z izrezanim likom na prelivu je videti nalepljena:
   lik nima ne tal ne zraka okoli sebe in rob izreza je ostro viden. Filmski
   kader tega nima, ker ima luc. Tukaj so zato stiri plasti, ki jih ima
   vsak osvetljen posnetek:

     megla    svetloba za likom — loci ga od ozadja in mu da prostor
     rob      sij po obrisu lika, kot da za njim stoji luc
     vinjeta  potemnjeni vogali, ki oko potegnejo na sredino
     zrno     filmsko zrno, da povrsina ni matematicno gladka

   Vse stiri so tihe. Nobena ne sme biti opazna sama zase — opazna je samo
   takrat, ko jo odstranis.                                             */

/* --- svetloba za likom --------------------------------------------------- */
.kino-megla{
  position:absolute;left:-14%;right:-14%;bottom:10%;height:52%;z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 88%,
    var(--u-sij,rgba(95,180,238,.3)) 0%,
    transparent 62%);
  filter:blur(26px);
  opacity:.55;
  transition:opacity .9s var(--e-out);
}

/* --- filmsko zrno --------------------------------------------------------
   Vzorec je narisan v SVG in vlozen v slog, da ni dodatne zahteve na
   streznik. Nacin mesanja overlay pomeni, da zrno potemni svetlo in
   osvetli temno — tako kot pravo zrno na filmu, in ne kot siva tancica. */
.kino-zrno{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* --- pocasen prehod svetlobe ---------------------------------------------
   Svetloba se cez prizor pomakne v devetih sekundah in je komaj vidna.
   Ne skrajsuj je in ne ojacaj: hitro utripanje na zaslonu je nevarno za
   ljudi z epilepsijo, zato mora premik ostati pocasen in blag.        */
.kino-zarek{
  position:absolute;inset:-20% -60%;z-index:3;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 34%,
    rgba(214,238,255,.055) 46%,
    rgba(214,238,255,.1) 50%,
    rgba(214,238,255,.055) 54%,
    transparent 66%);
  transform:translateX(-38%);
  opacity:0;
}

@keyframes kino-prehod{
  0%   {transform:translateX(-38%);}
  100% {transform:translateX(38%);}
}

@media (prefers-reduced-motion: reduce){
  .kino-zarek{animation:none !important;opacity:0 !important;}
}

/* =============================================================== 5. NOVICE */
.news{display:block;overflow:hidden;}
.news-top{height:160px;position:relative;overflow:hidden;background:var(--surf-2);}
.news-top img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-out);}
.news-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,16,23,.92));}
.news:hover .news-top img{transform:scale(1.07);}
.news-body{padding:18px 20px;}
.news h3{font-family:var(--f-display);font-weight:700;font-size:1.06rem;color:var(--tx-1);margin-bottom:8px;line-height:1.26;letter-spacing:-.01em;}
.news p{font-size:.89rem;line-height:1.6;color:var(--tx-3);}
.news-meta{
  margin-top:15px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-4);
}

.news-open{padding:clamp(22px,3vw,38px);}
.news-open h2{margin-block:12px 8px;}
.news-open .telo{margin-top:20px;font-size:1rem;line-height:1.78;color:var(--tx-2);white-space:pre-line;}

/* ============================================================= 6. GALERIJA
   Mreza z razlicnimi velikostmi. Vsaka tretja slika je siroka, vsaka
   sedma visoka — tako album ne izgleda kot preglednica.                 */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;grid-auto-rows:190px;}
.gal-item{
  position:relative;overflow:hidden;cursor:pointer;
  border-radius:var(--r-card);border:1px solid var(--line);
  transition:transform .5s var(--e-out),border-color .4s var(--e-out);
}
.gal-item:nth-child(3n+1){grid-column:span 2;}
.gal-item:nth-child(7n+3){grid-row:span 2;}
@media (max-width:700px){
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px;}
  .gal-item:nth-child(3n+1){grid-column:span 2;}
  .gal-item:nth-child(7n+3){grid-row:span 1;}
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-out);}
.gal-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 44%,rgba(4,6,10,.9));
  transition:opacity .4s var(--e-out);
}
.gal-item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:15px 17px;
  transform:translateY(5px);opacity:.9;
  transition:transform .42s var(--e-out),opacity .42s var(--e-out);
}
.gal-item figcaption b{display:block;font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--tx-1);}
.gal-item figcaption span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);}
.gal-item:hover{transform:translateY(-3px);border-color:rgba(127,212,255,.28);}
.gal-item:hover img{transform:scale(1.06);}
.gal-item:hover figcaption{transform:none;opacity:1;}

/* Slika cez cel zaslon */
.lightbox{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,4vw,60px);
  background:rgba(3,5,8,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .32s var(--e-out);
}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox figure{max-width:min(1180px,100%);max-height:100%;}
.lightbox img{max-height:76vh;width:auto;margin-inline:auto;border-radius:var(--r-card);border:1px solid var(--line);}
.lightbox figcaption{margin-top:15px;text-align:center;}
.lightbox figcaption b{display:block;font-family:var(--f-display);font-size:1.2rem;color:var(--tx-1);}
.lightbox figcaption span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);}
.lightbox .x{position:absolute;top:18px;right:18px;}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);}
.lightbox .nav.p{left:16px;}
.lightbox .nav.n{right:16px;}

/* =========================================================== 7. ZAPOSLITEV */
.req{position:relative;padding:24px 22px;overflow:hidden;}
.req .num{
  position:absolute;right:-4px;top:-20px;
  font-family:var(--f-display);font-weight:700;font-size:5rem;
  color:rgba(255,255,255,.035);line-height:1;pointer-events:none;
}
.req h3{font-family:var(--f-display);font-weight:700;font-size:1.04rem;color:var(--tx-1);margin-bottom:8px;}
.req p{font-size:.89rem;line-height:1.62;color:var(--tx-3);}

.steps{position:relative;padding-left:38px;}
.steps::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--ice-600),var(--ice-900) 66%,transparent);}
.step{position:relative;padding-bottom:32px;}
.step:last-child{padding-bottom:0;}
.step::before{
  content:"";position:absolute;left:-32px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--surf-0);border:2px solid var(--ice-500);box-shadow:0 0 0 4px rgba(95,180,238,.1);
}
.step .k{display:block;margin-bottom:5px;font-family:var(--f-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ice-500);}
.step h3{font-family:var(--f-display);font-weight:700;font-size:1.04rem;color:var(--tx-1);margin-bottom:6px;}
.step p{font-size:.92rem;line-height:1.64;color:var(--tx-3);max-width:54ch;}

/* ============================================================== 8. PRIJAVA */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,56px);position:relative;}
/* Fotografija v ozadju prijavnega zaslona, mocno zatemnjena */
.gate-foto{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.gate-foto img{width:100%;height:100%;object-fit:cover;opacity:.3;}
.gate-foto::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,rgba(6,8,12,.7),var(--surf-0) 88%);}

.gate-card{width:min(470px,100%);padding:clamp(26px,4vw,40px);text-align:center;}
.gate-card > img{width:88px;margin:0 auto 20px;}
.gate-card h1{margin-bottom:11px;}
.gate-card .lede{margin:0 auto 26px;font-size:.94rem;}
.gate-card .btn{width:100%;}
.gate-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.79rem;line-height:1.6;color:var(--tx-4);}
.gate-demo{margin-top:18px;text-align:left;}

/* ================================================================= 9. NOGA */
/* Noga je iz istega stekla kot glava. Ker ni pritrjena, zamegli tisto, kar
   je za njo — to je pritrjeno ozadje s siji, zato se skoznjo vidi modrina,
   ki se ob drsenju premika.                                            */
.site-foot{
  position:relative;
  margin-top:clamp(50px,6vw,96px);
  padding-block:clamp(40px,4.6vw,66px) 24px;
  background:linear-gradient(180deg,rgba(20,30,46,.5),rgba(4,7,11,.62));
  backdrop-filter:blur(26px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.05);
  border-top:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.site-foot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,.045) 0%,
    transparent 30%,
    transparent 70%,
    rgba(140,190,255,.045) 100%);
}
.site-foot .wrap{position:relative;z-index:1;}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(22px,3vw,44px);}
.foot-grid h4{font-family:var(--f-mono);font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-4);margin-bottom:13px;}
.foot-grid li{margin-bottom:8px;}
.foot-grid li a{font-size:.89rem;color:var(--tx-3);transition:color .24s var(--e-out);}
.foot-grid li a:hover{color:var(--ice-300);}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.foot-brand img{width:42px;}
.foot-brand b{font-family:var(--f-display);font-size:1.04rem;color:var(--tx-1);}
.foot-grid > div:first-child p{font-size:.87rem;line-height:1.66;color:var(--tx-4);max-width:42ch;}
.foot-bottom{
  margin-top:clamp(28px,3.4vw,46px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;color:var(--tx-4);
}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-grid > div:first-child{grid-column:1 / -1;}
}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;}}

/* ==================================================== 10. MENJAVA JEZIKA */
.is-lang-swap main,.is-lang-swap .site-nav{opacity:.4;transition:opacity .16s var(--e-out);}

/* ============================================ 11. PAS S FOTOGRAFIJO
   Sirok pas med odseki, ki prekine niz plosc. Na njem stoji samo en
   stavek — ce bi jih bilo vec, fotografija ne bi imela kaj povedati. */
.pas{
  position:relative;overflow:hidden;
  min-height:clamp(280px,38vw,460px);
  display:flex;align-items:center;
  border-block:1px solid var(--line);
}
.pas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.pas::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,8,12,.94) 0%,rgba(6,8,12,.6) 52%,rgba(6,8,12,.3) 100%);
}
.pas .wrap{position:relative;}
.pas blockquote{max-width:30ch;}
.pas blockquote p{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.14;
  letter-spacing:-.02em;color:var(--tx-1);text-wrap:balance;
}
.pas blockquote cite{
  display:block;margin-top:16px;font-style:normal;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice-400);
}

/* ============================================================================
   12. OZADJE — MODRO-RDECE POLJE, KI SLEDI MISKI
   ----------------------------------------------------------------------------
   Pod vsebino lezi polje mehkih sijev: modri iz policijske palete in rdeci,
   ki je na strani edina topla barva. Sij ni nikjer mocan — razporejen je
   enakomerno cez cel zaslon, tako da crnina ni mrtva, besedilo pa ostane
   berljivo povsod, ne glede na to, kje na strani stoji.

   Polje se rahlo premika za kazalcem. Premik je majhen, najvec dva odstotka
   sirine zaslona, in zaostaja za misko — zato deluje kot globina za steklom
   in ne kot element, ki bi sledil kazalcu.

   Cez sije lezi mreza. Ta je NAD njimi in ne pod: tako je videti, kot da
   svetloba prihaja izza mreze, in stran dobi obcutek nadzorne plosce.

   Vrstni red plasti, od zadaj naprej:
     .sij      stirje mehki krogi, modri in rdeci
     .mreza    komaj vidna kvadratna mreza
     .znak     znak policije kot vodni tisk
     .rob      temni robovi, da sredina ostane svetlejsa od vogalov
   ========================================================================== */
.ozadje{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
}

/* ---- sloj s siji. Ta se premika, mreza in znak ne. ---------------------- */
.ozadje-sij{
  position:absolute;
  /* Sloj je vecji od zaslona, da ob premiku na robovih ne nastane praznina. */
  inset:-8%;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  /* Zaostanek za misko. Brez njega bi polje sledilo kazalcu prehitro in
     bi delovalo pripeto nanj, ne pa kot globina v ozadju.               */
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.ozadje-sij i{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
}

/* Modri siji nosijo stran. Rdeca sta dva in sta sibkejsa — dovolj, da se
   opazita, premalo, da bi stran postala rdeca.                          */
.ozadje-sij .m1{
  left:-10%;top:-12%;width:58%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(38,110,220,.19),transparent 66%);
}
.ozadje-sij .m2{
  right:-14%;bottom:-16%;width:64%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(30,96,200,.17),transparent 66%);
}
.ozadje-sij .r1{
  right:4%;top:-14%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(196,42,58,.13),transparent 66%);
}
.ozadje-sij .r2{
  left:6%;bottom:-10%;width:42%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(180,36,52,.10),transparent 66%);
}
/* Peti, sredinski sij poveze oba para, da med njimi ni prazne crnine. */
.ozadje-sij .s0{
  left:28%;top:24%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(52,120,210,.08),transparent 70%);
}

/* ---- mreza v ospredju --------------------------------------------------- */
.ozadje-mreza{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(150,190,240,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,190,240,.045) 1px,transparent 1px);
  background-size:54px 54px;
}
/* Vsaka peta crta je mocnejsa — mreza tako dobi ritem in ni enolicna. */
.ozadje-mreza::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(150,190,240,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,190,240,.06) 1px,transparent 1px);
  background-size:270px 270px;
}

/* ---- znak kot vodni tisk ------------------------------------------------ */
.ozadje-znak{
  position:absolute;right:-4%;top:50%;
  width:min(46vw,540px);aspect-ratio:1;transform:translateY(-50%);
  background:url("../img/uc-police-alt.webp") center/contain no-repeat;
  opacity:.026;
}

/* ---- temni robovi ------------------------------------------------------- */
/* Filmsko zrno cez celo stran. Vklopi in izklopi ga config.js pod
   videz.ozadjeZrno — nastavitev je obstajala od zacetka, izvedbe pa ni
   bilo, zato je bilo ozadje matematicno gladko in je stran zato izgledala
   natisnjena, ne posneta. Vzorec je isti kot na karticah enot.        */
.ozadje-zrno{
  position:absolute;inset:0;
  opacity:.045;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

.ozadje-rob{
  position:absolute;inset:0;
  background:radial-gradient(118% 90% at 50% 44%,transparent 30%,rgba(2,3,6,.92) 100%);
}

/* Kdor je izklopil animacije, dobi polje pri miru. */
@media (prefers-reduced-motion:reduce){
  .ozadje-sij{transition:none;transform:none;}
}

/* ============================================================================
   14. VODILNI CLENI
   ----------------------------------------------------------------------------
   Predstavitev vodstva na javnem spletiscu. Kartica nosi cinsko oznako,
   ime, cin in enoto. Sluzbene stevilke in Discorda tu NI — javna stran sme
   povedati, kdo vodi, ne pa tudi, kako priti do njega mimo uradne poti.
   ========================================================================== */
.vodje{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.vodja{
  padding:24px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.vodja .znak{
  width:66px;height:66px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:18px;
  color:var(--v,var(--ice-400));
}
.vodja h3{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--tx-1);letter-spacing:-.01em;}
.vodja .cin{
  margin-top:5px;
  font-family:var(--f-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--v,var(--ice-400));
}
.vodja .enota{margin-top:10px;font-size:.88rem;color:var(--tx-3);}
.vodja .od{
  margin-top:14px;padding-top:12px;width:100%;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-4);
}

/* ============================================================================
   15. LESTVICA CINOV
   ----------------------------------------------------------------------------
   Celotna pot od kadeta do nacelnika, z oznako in pogoji za vsako stopnjo.
   Stopnice tecejo navzgor: najnizji cin je spodaj, kot pri pravi lestvici.
   ========================================================================== */
.lestvica{display:grid;gap:8px;}
.stopnja{
  display:flex;align-items:center;gap:16px;
  padding:14px 18px;
  background:var(--surf-1);
  border:1px solid var(--line);
  border-left:3px solid var(--s,var(--ice-600));
  border-radius:var(--r-ctl);
  transition:background .26s var(--e-out),transform .3s var(--e-out);
}
.stopnja:hover{background:var(--surf-2);transform:translateX(3px);}
.stopnja .znak{
  width:46px;height:46px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r-ctl);
  color:var(--s,var(--ice-400));
}
.stopnja .kdo{flex:1;min-width:0;}
.stopnja .kdo b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--tx-1);}
.stopnja .kdo span{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-4);
}
.stopnja .doba{
  flex:none;text-align:right;
  font-family:var(--f-mono);font-size:.72rem;color:var(--tx-3);
}
.stopnja .doba b{display:block;font-size:1.06rem;color:var(--tx-1);font-family:var(--f-display);}
@media (max-width:620px){
  .stopnja .doba{display:none;}
}

/* ============================================================================
   16. JAVNI OBRAZCI
   ----------------------------------------------------------------------------
   Pohvala ali pritozba nad policistom, anonimni predlog za nadzor prometa in
   anonimna informacija o kaznivem dejanju.

   Tri vrste obrazca stojijo pod tremi zavihki, ker gre za tri razlicne
   namene in bi en sam dolg obrazec zmedel.
   ========================================================================== */
.zavihki{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:6px;margin-bottom:18px;
  background:var(--surf-1);
  border:1px solid var(--line);
  border-radius:var(--r-ctl);
}
.zavihki button{
  flex:1;min-width:150px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 14px;border-radius:var(--r-sm);
  font-family:var(--f-display);font-weight:600;font-size:.86rem;
  color:var(--tx-3);
  border:1px solid transparent;
  transition:color .24s var(--e-out),background .24s var(--e-out),border-color .24s var(--e-out);
}
.zavihki button svg{width:17px;height:17px;flex:none;}
.zavihki button:hover{color:var(--tx-1);background:var(--surf-2);}
.zavihki button[aria-selected="true"]{
  background:var(--surf-3);color:var(--ice-100);
  border-color:rgba(127,212,255,.22);
}

.obrazec{padding:clamp(20px,2.6vw,32px);}
.obrazec .par2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:620px){.obrazec .par2{grid-template-columns:1fr;}}

/* Opozorilo o anonimnosti. Stoji nad obrazcem in ne pod njim, ker mora
   clovek to prebrati, preden kaj vpise.                                */
.anonim{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;margin-bottom:18px;
  border:1px solid var(--warn-line);
  background:var(--warn-soft);
  border-radius:var(--r-ctl);
  font-size:.86rem;line-height:1.6;color:var(--tx-2);
}
.anonim svg{width:17px;height:17px;flex:none;color:var(--warn);margin-top:2px;}

/* Pripravljeno besedilo, ki ga clovek prekopira v ticket na Discordu */
.izpis{
  margin-top:18px;padding:16px;
  background:var(--surf-0);
  border:1px solid var(--line-2);
  border-radius:var(--r-ctl);
}
.izpis pre{
  font-family:var(--f-mono);font-size:.78rem;line-height:1.7;
  color:var(--tx-2);white-space:pre-wrap;word-break:break-word;
  max-height:300px;overflow-y:auto;
}
.izpis .dej{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}

/* ============================================================================
   17. PODPIS "TO SERVE PEOPLE!"
   ----------------------------------------------------------------------------
   Rokopisni podpis, ki stoji ob naslovu na domaci strani in v stranskem meniju
   panela. Slika je bela na prosojnem, zato ji barvo doloci CSS: na strani je
   ledeno modra, ne cisto bela, da ne kric i mocneje od naslova pod njo.

   Podpis je okras in ne vsebina — bralnik zaslona ga preskoci, ker nosi
   prazen alt. Kdor strani ne vidi, z njim ne bi pridobil nicesar, saj isto
   pove ze naslov.
   ========================================================================== */
.podpis{
  display:block;
  width:clamp(190px,22vw,300px);
  margin-bottom:10px;
  opacity:.82;
  /* Bela slika -> ledeno modra. Filter je cenejsi od druge razlicice slike. */
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))
         sepia(1) saturate(3) hue-rotate(170deg) brightness(1.18);
}

/* V uvodu se podpis narise, kot bi ga kdo pisal — od leve proti desni. */
.hero .podpis{
  animation:podpisPride 1.5s var(--e-out) both .2s;
}
@keyframes podpisPride{
  from{opacity:0;transform:translateX(-14px) rotate(-2deg);}
  to  {opacity:.82;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .hero .podpis{animation:none;}
}

/* ============================================================================
   18. ZID — SLIKE Z NAPISI V NEENAKOMERNI MREZI
   ----------------------------------------------------------------------------
   Trije stolpci. Levi in desni nosita po eno visoko sliko, srednji pa dve
   nizji. Ker se visine sestejejo priblizno enako, se stolpci koncajo v isti
   vrstici, napisi pa stojijo na razlicnih visinah — in prav ta zamik naredi
   razdelek ziv, namesto da bi bil videti kot preglednica.

   Zamik ni narejen z rocnimi razmiki, ampak izhaja iz razmerij slik:
     visoka slika    3 : 4   (pokoncna)
     nizka slika    16 : 9   (lezeca)
   Ce razmerji spremenis, se zamik spremeni sam.

   Na ozjih zaslonih zid razpade v dva stolpca in nato v enega. Takrat so vse
   slike lezece, ker pokoncna na telefonu zasede cel zaslon.
   ========================================================================== */
.zid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
  align-items:start;
}
.zid-stolpec{display:grid;gap:clamp(16px,2vw,26px);}

.zid-kos{display:block;}
.zid-kos figure{
  margin:0 0 16px;
  overflow:hidden;
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:var(--surf-1);
}
.zid-kos img{
  width:100%;height:100%;object-fit:cover;
  aspect-ratio:16/9;
  transition:transform .8s var(--e-out);
}
.zid-kos.je-visok img{aspect-ratio:3/4;}
.zid-kos:hover img{transform:scale(1.05);}

.zid-kos h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.12rem,1.6vw,1.42rem);
  color:var(--tx-1);letter-spacing:-.014em;
  margin-bottom:10px;line-height:1.14;
}
.zid-kos p{
  font-size:.92rem;line-height:1.66;color:var(--tx-3);
  text-wrap:pretty;
}

/* Naslov razdelka v dveh barvah, kot pri velikih napisih na prvem zaslonu. */
.zid-naslov{text-align:center;margin-bottom:clamp(28px,3.6vw,52px);}
.zid-naslov h2{margin-bottom:14px;}
.zid-naslov .lede{margin-inline:auto;}

@media (max-width:1000px){
  /* display:contents razpusti srednji stolpec, tako da vse stiri kartice
     postanejo enakovredne celice zunanje mreze. Brez tega bi zadnja ostala
     sama v svojem stolpcu in ob njej bi zijala luknja.                  */
  .zid{grid-template-columns:1fr 1fr;}
  .zid-stolpec{display:contents;}
  .zid-kos img,.zid-kos.je-visok img{aspect-ratio:4/3;}
}
@media (max-width:640px){
  .zid{grid-template-columns:1fr;}
  .zid-kos img,.zid-kos.je-visok img{aspect-ratio:16/10;}
}