/* ============================================================
   alat-zakon.css — „Zakon o informacionoj bezbednosti" (/zakon/)
   PORT dizajnerove predaje (design_handoff_zakon, 2026-07-11):
   zakon/zakon.css prototipa, rescope body.page-zakon →
   body.page-alat-zakon. Treći član porodice /lozinka/ +
   /simulator/: isti --al-* tokeni, axc hero, enc-footer,
   dark default + light. Chrome (heder/tema/burger) dolazi iz
   header.css / theme-toggle.js — ti blokovi prototipa NISU
   portovani. Print popravljen: presuda ostaje vidljiva
   (prototip je skrivao ceo #upitnik jer je i on .zkn-sec).
   Učitava se SAMO na ovoj ruti (extra_css).
   ============================================================ */

/* ---- tokeni — konzola (dark, default) ---- */
body.page-alat-zakon{
  --al-bg:#0f0f0d; --al-grid:rgba(232,232,230,.02);
  --al-plate:#141412; --al-plate2:#191917; --al-field:#0a0a09;
  --al-line:#262624; --al-line2:#343430;
  --al-hi:#ece9e3; --al-md:#c8c5be; --al-lo:#a0a09e; --al-mute:#8a8780; --al-faint:#5a5754; --al-mute-text:#8a8780;
  --al-brand:#c0392b; --al-brand-hi:#d44a3a;
  /* crvena kao TEKST: --al-brand/-hi nose i podloge i ivice, pa se ne diraju.
     Tamna uzima --brand-on-dark (#ee4130, S130); svetla ostaje na #b0301f. */
  --al-brand-text:var(--brand-on-dark); --al-brand-soft:rgba(192,57,43,.16);
  --al-accent:#ffd9a8;
  /* akcent nosi i podloge i obrise; tekst ide na -text (svetla tema nize) */
  --al-accent-text:var(--al-accent);
  --al-risk-hi:#d0604e; --al-risk-med:#c79248; --al-risk-low:#7fa168;
  --al-steel:#8fa9c4; --al-violet:#8f7fd0;
}
html{ color-scheme:dark; }
html, body.page-alat-zakon{ background:var(--al-bg); }
body.page-alat-zakon{ color:var(--al-hi); font-family:var(--font-sans); }
body.page-alat-zakon ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }
html.theme-anim, html.theme-anim body.page-alat-zakon{ transition:background .25s ease; }

/* sticky futer na kratkim prikazima */
body.page-alat-zakon{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.page-alat-zakon > main#main{ display:flex; flex-direction:column; flex:1 0 auto; }
body.page-alat-zakon > main#main > .zkn{ flex:1 0 auto; }

/* ============================================================
   HERO · KONZOLA (.axc)
   ============================================================ */
.axc{ background:#0f0f0d; border-bottom:1px solid #262624; position:relative; overflow:hidden; }
.axc-inner{
  max-width:var(--container-wide); margin:0 auto; padding:40px 28px 34px;
  min-height:600px; /* iste visine na sva tri alata triptiha (Denis, S67) */
  display:grid; grid-template-columns:1fr; align-items:end;
  position:relative; z-index:2;
}
.axc-kick{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:#8a8780; margin:0 0 14px;
}
.axc-kick::before{ content:""; width:6px; height:6px; background:#c0392b;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.axc-kick b{ color:#ffd9a8; font-weight:500; }
.axc h1{
  font-weight:600; font-size:clamp(28px,3.4vw,42px); line-height:1.22;
  letter-spacing:-.024em; margin:0 0 12px; color:#ece9e3; max-width:26ch;
}
/* tri reda triptiha (Denis, S69) — boje zastave: crvena/plava/bela (bela =
   osnovna boja h1, ne treba klasa). Isto na sve tri strane (zajednički H1). */
.axc h1 .l-red{ color:var(--al-brand-text); }
.axc h1 .l-blue{ color:var(--al-steel); }
.axc-sub{ font-size:16px; line-height:1.6; color:#a0a09e; margin:0; max-width:56ch; }
.axc-mods{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.axc-mods a{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:9px 13px; color:#c8c5be;
  border:1px solid #343430; border-radius:2px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.axc-mods a::before{ content:""; width:6px; height:6px; align-self:center; flex:0 0 auto; background:#c0392b;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.axc-mods a:nth-of-type(2)::before{ background:#c79248; }
.axc-mods a:nth-of-type(3)::before{ background:#8fa9c4; }
.axc-mods a:nth-of-type(4)::before{ background:#7fa168; }
.axc-mods a:hover{ color:#ece9e3; border-color:#8a8780; }
.axc-mods .num{ color:#ffd9a8; font-weight:600; }
.axc-stat{
  position:absolute; top:40px; right:28px; z-index:3;
  font-family:var(--font-mono); font-size:10.5px; line-height:2;
  letter-spacing:.14em; text-transform:uppercase; color:#8a8780;
  text-align:right; white-space:nowrap;
}
.axc-stat b{ color:#ece9e3; font-weight:500; }
.axc-stat .sig{ color:var(--al-brand-text); }
@media (max-width:1000px){
  .axc-inner{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:560px){
  .axc-inner{ padding:30px 18px 26px; }
  .axc-stat{ top:18px; right:18px; font-size:9.5px; }
}

/* ---- v2: mapa Srbije u pozadini heroa (statički SVG partial) ----
   Slojevi: __edge (zlatni obris) ispod + __fill (bg ispuna preko unutrašnjih
   linija okruga) + __cells (heksagoni-subjekti koji svetlucaju). */
.axc-hexwrap{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--container-wide); z-index:1; pointer-events:none;
}
.axc-hex{
  position:absolute; top:50%; right:8%;
  height:calc(100% - 40px); max-height:600px; width:auto;
  transform:translateY(-50%);
  pointer-events:none;
}
.axc-hex svg{ height:100%; width:auto; display:block; overflow:visible; }
.axc-hex__edge polygon{ fill:none; stroke:var(--al-accent); stroke-opacity:.9; stroke-width:3.4; }
.axc-hex__fill polygon{ fill:var(--al-bg); stroke:none; }
.axc-hex__cells .c-org{ fill:var(--al-accent); }              /* najsvetlije — organi javne vlasti */
.axc-hex__cells .c-fir{ fill:var(--al-brand-hi); }            /* jarko crveno — firme / preduzetnici */
.axc-hex__cells .c-nio{ fill:var(--al-brand); fill-opacity:.5; } /* zagasitije — naučnoistraživačke org. */
.axc-hex__cells .c-gra{ fill:none; stroke:var(--al-line2); stroke-opacity:.5; stroke-width:1; } /* najprozirniji — građani */
html[data-theme="light"] body.page-alat-zakon .axc-hex__map polygon{ stroke-opacity:.45; }
html[data-theme="light"] body.page-alat-zakon .axc-hex__cells .c-gra{ stroke-opacity:.85; }
/* svetlucanje ćelija (pojave se pa nestanu), 12 desinhronizovanih faza */
.axc-hex__cells .tw{ animation:zknTwinkle 6s ease-in-out infinite; }
@keyframes zknTwinkle{ 0%{opacity:0} 16%{opacity:1} 40%{opacity:1} 60%{opacity:0} 100%{opacity:0} }
.axc-hex__cells .p0{ animation-delay:-.2s; animation-duration:5.8s; }
.axc-hex__cells .p1{ animation-delay:-1.4s; animation-duration:7.1s; }
.axc-hex__cells .p2{ animation-delay:-2.9s; animation-duration:6.3s; }
.axc-hex__cells .p3{ animation-delay:-4.1s; animation-duration:7.6s; }
.axc-hex__cells .p4{ animation-delay:-0.8s; animation-duration:6.7s; }
.axc-hex__cells .p5{ animation-delay:-3.5s; animation-duration:5.5s; }
.axc-hex__cells .p6{ animation-delay:-2.2s; animation-duration:7.9s; }
.axc-hex__cells .p7{ animation-delay:-5.0s; animation-duration:6.1s; }
.axc-hex__cells .p8{ animation-delay:-1.9s; animation-duration:8.2s; }
.axc-hex__cells .p9{ animation-delay:-3.8s; animation-duration:6.9s; }
.axc-hex__cells .p10{ animation-delay:-0.5s; animation-duration:7.4s; }
.axc-hex__cells .p11{ animation-delay:-4.7s; animation-duration:5.9s; }
@media (prefers-reduced-motion: reduce){ .axc-hex__cells .tw{ animation:none; } }
@media (max-width:1000px){ .axc-hex{ right:-16%; opacity:.5; } }
@media (max-width:560px){ .axc-hex{ opacity:.32; right:-30%; } }
@media (prefers-reduced-motion: no-preference){
  .axc-hex .h0{ animation:zknCoreGlow 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
}
@keyframes zknCoreGlow{ 0%,100%{ opacity:1; } 50%{ opacity:.7; } }

/* Gravitacioni bunar — statička mreža ispod mape (partial: zakon-hero-well.php).
   Mreža deljena preko partial-a i CSS-a dupliranog u sve tri route datoteke
   (isti obrazac kao .axc-hex). Well centar ≈ težište Srbije u viewBox-u mape. */
.axc-well{
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
  z-index:0;
}
.axc-well__canvas{ width:100%; height:100%; display:block; }
@media (max-width:1000px){ .axc-well{ opacity:.7; } }
@media (max-width:560px){ .axc-well{ opacity:.5; } }

/* TRI VELIKA BROJA — pojas ispod heroa. Preseljeno u zajednički
   assets/css/hero-bignums.css (deljen sa /incident/ i /pomoc/).
   Ovde ostaje samo print handling (dole u @media print). */


/* ---- „ZAKON U PRAKSI" — traka triptiha, tri taba sa kukama-pitanjima
   (.trip iz predaje pomoc-registar; S67 nasledila .zkduo).
   STICKY ispod hedera (Denis, S67); .zkn-toc se lepi ispod nje. ---- */
/* --trip-h FIKSIRAN u CSS-u (bilo JS-mereno, ali ResizeObserver okinjavo
   sync na svaku scroll-frame promenu → sticky slojevi jitter-uju). Sada
   je vrednost stabilna, sticky elementi se ne mrdaju tokom scroll-a. */
:root{ --trip-h:68px; }
@media (max-width:820px){ :root{ --trip-h:64px; } }
.trip{ position:sticky; top:var(--hdr-h,56px); z-index:21; background:#0c0c0a; border-bottom:1px solid var(--al-line); min-height:var(--trip-h,64px); box-sizing:border-box; }
.trip__inner{ max-width:var(--container-wide); margin:0 auto; padding:10px 28px; display:flex; align-items:stretch; gap:10px; overflow-x:auto; scrollbar-width:none; }
.trip__inner::-webkit-scrollbar{ display:none; }
.trip__lead{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; padding:0 14px 0 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--al-mute-text); white-space:nowrap; }
.trip__lead::before{ content:""; width:6px; height:6px; background:var(--al-brand); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
/* Denis, S70: traka nije čitljiva kao tri odvojene celine — svaki tab
   dobija sopstvenu granicu/pozadinu (isti "kartica" jezik kao .zkn-legend/
   .zkn-level), umesto samo tanke linije između njih. */
.trip__tab{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:11px; text-decoration:none; padding:12px 18px; border:1px solid var(--al-line); border-left-width:3px; border-radius:2px; color:var(--al-lo); background:var(--al-plate); font-family:var(--font-sans); text-align:left; transition:color .15s, background .15s, border-color .15s; }
.trip__no{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--al-mute-text); flex:0 0 auto; }
.trip__t{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; flex:0 0 auto; }
.trip__q{ font-size:13px; color:var(--al-mute-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trip__tab:hover{ color:var(--al-hi); background:var(--al-plate2); border-color:var(--al-line2); }
.trip__tab:focus-visible{ outline:2px solid var(--al-brand); outline-offset:-2px; }
.trip__tab.is-here{ color:var(--al-hi); background:var(--al-plate2); border-color:var(--al-brand); }
.trip__tab.is-here .trip__no{ color:var(--al-brand-text); }
@media (max-width:560px){
  .trip__inner{ padding:8px 12px; gap:6px; }
  .trip__lead{ display:none; }
  .trip__q{ display:none; }
  .trip__tab{ padding:10px 10px; gap:8px; }
}

/* ---- v2: sadržaj čip-traka (lepljiva ispod headera, scroll-spy) ---- */
/* toc se lepi ispod hedera (56) + sticky trake triptiha (49) */
/* +70px = visina .trip trake (S70: kartice su je proširile sa 49px) */
.zkn-toc{ position:sticky; top:calc(var(--hdr-h,56px) + var(--trip-h,68px) - 1px); z-index:20; background:#0c0c0a; border-bottom:1px solid var(--al-line); }
.zkn-toc__inner{
  max-width:var(--container-wide); margin:0 auto; padding:10px 28px;
  display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none;
}
.zkn-toc__inner::-webkit-scrollbar{ display:none; }
.zkn-toc__lead{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); white-space:nowrap; margin-right:6px; flex:0 0 auto; }
.zkn-toc a{
  flex:0 0 auto; display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--al-lo);
  padding:6px 11px; border:1px solid transparent; border-radius:2px; white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s;
}
.zkn-toc a .n{ color:var(--al-mute-text); font-weight:600; }
.zkn-toc a:hover{ color:var(--al-hi); border-color:var(--al-line2); background:var(--al-plate); }
.zkn-toc a:hover .n{ color:var(--al-accent-text); }
.zkn-toc a.is-here{ color:var(--al-hi); border-color:var(--al-line2); background:var(--al-plate); }
.zkn-toc a.is-here .n{ color:var(--al-accent-text); }
html[data-theme="light"] body.page-alat-zakon .zkn-toc{ background:#e9e7de; }
@media (max-width:760px){ .zkn-toc__inner{ padding:9px 16px; } .zkn-toc__lead{ display:none; } }

/* ============================================================
   TELO — sto sa instrumentom
   ============================================================ */
body.page-alat-zakon .zkn{
  background:var(--al-bg); padding:60px 28px 96px;
  background-image:
    linear-gradient(to right, var(--al-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--al-grid) 1px, transparent 1px);
  background-size:56px 56px;
}
body.page-alat-zakon .zkn__inner{ max-width:1320px; margin:0 auto; }

/* mono kicker (deljeni) */
.zkn-kick{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text);
}
.zkn-kick::before{ content:""; width:6px; height:6px; flex:0 0 auto; background:var(--al-brand);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-kick .n{ color:var(--al-accent-text); }

/* clan-oznaka (mono mikrotipografski motiv) */
.zkn-art{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--al-accent-text); white-space:nowrap;
}

/* intro */
.zkn__intro{
  padding-bottom:34px; margin-bottom:44px; border-bottom:1px solid var(--al-line);
  color:var(--al-md); font-size:16.5px; line-height:1.7;
}
.zkn__intro p:not(.zkn-kick){ margin:0 0 12px; max-width:70ch; text-wrap:pretty; }
.zkn__intro p:last-child{ margin-bottom:0; }
.zkn__intro strong{ color:var(--al-hi); font-weight:600; }
.zkn__intro a{ color:var(--al-hi); text-decoration:none; border-bottom:1px solid var(--al-line2); transition:color .15s, border-color .15s; }
.zkn__intro a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }
@media (min-width:1100px){
  .zkn__intro{ display:grid; grid-template-columns:minmax(180px,220px) 1fr 1fr; column-gap:48px; align-items:start; }
  .zkn-kick.zkn__introkick{ margin:4px 0 0; }
  .zkn__intro p:not(.zkn-kick){ margin:0; max-width:58ch; }
}

/* section heading blocks — scroll-margin pokriva heder (56) + toc traku */
.zkn-sec{ padding-top:64px; scroll-margin-top:calc(var(--hdr-h,56px) + var(--trip-h,68px) + var(--toc-h,52px) - 29px); }
.zkn-sec--first{ padding-top:0; }
.zkn-sec__head{ margin-bottom:24px; }
.zkn-h2{
  margin:0 0 8px; font-size:clamp(22px,2.4vw,30px); font-weight:600;
  letter-spacing:-.02em; line-height:1.14; color:var(--al-hi); text-wrap:balance;
}
.zkn-lead{ margin:0; max-width:74ch; color:var(--al-md); font-size:16px; line-height:1.65; text-wrap:pretty; }
.zkn-lead a{ color:var(--al-hi); border-bottom:1px solid var(--al-line2); text-decoration:none; }
.zkn-lead a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }

/* ============================================================
   INSTRUMENT · UPITNIK (L-uglovi, dvokolonski + sticky presuda)
   ============================================================ */
.zkn-upit{
  position:relative; border:1px solid var(--al-line); background:var(--al-plate);
  scroll-margin-top:calc(var(--hdr-h,56px) + var(--trip-h,68px) + var(--toc-h,52px) - 29px);
}
/* rezultat presude i drugi korak: scrollIntoView mora ispod svih sticky traka */
#zkn-step2,
.zkn-verdict{
  scroll-margin-top:calc(var(--hdr-h,56px) + var(--trip-h,68px) + var(--toc-h,52px) + 12px);
}
/* v2: lakša emfaza u instrumentu/presudi (bez „masnih" fontova) */
.zkn-upit strong, .zkn-upit b{ font-weight:500; }
.zkn-badge{ font-weight:500; }
.zkn-prog b{ font-weight:500; }
.zkn-upit::before, .zkn-upit::after{
  content:""; position:absolute; width:14px; height:14px;
  border:0 solid var(--al-mute); pointer-events:none; z-index:2;
}
.zkn-upit::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.zkn-upit::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }

.zkn-upit__head{
  position:relative; overflow:hidden; padding:18px 22px 16px;
  border-bottom:1px solid var(--al-line); background:var(--al-plate2);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.zkn-upit__lead{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text);
  display:flex; align-items:center; gap:9px;
}
.zkn-upit__lead::before{ content:""; width:6px; height:6px; background:var(--al-brand);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
/* progres */
.zkn-prog{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--al-mute-text); }
.zkn-prog b{ color:var(--al-mute-text); font-weight:600; transition:color .18s; }
.zkn-prog .on{ color:var(--al-accent-text); }
.zkn-prog .sep{ width:14px; height:1px; background:var(--al-line2); }

.zkn-upit__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:1000px){
  .zkn-upit__grid{ grid-template-columns:1fr minmax(380px,440px); }
  .zkn-upit__steps{ border-right:1px solid var(--al-line); }
}
.zkn-upit__steps{ padding:26px 24px 30px; }

/* korak blok */
.zkn-step{ margin:0; }
.zkn-step + .zkn-step{ margin-top:30px; padding-top:28px; border-top:1px dashed var(--al-line); }
.zkn-step[hidden]{ display:none; }
.zkn-step__label{
  display:flex; align-items:baseline; gap:10px; margin:0 0 4px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text);
}
.zkn-step__label .no{ color:var(--al-accent-text); font-weight:600; }
.zkn-step__q{ margin:0 0 16px; font-size:18px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.zkn-step__hint{ margin:-8px 0 16px; font-size:13px; line-height:1.5; color:var(--al-lo); max-width:60ch; }

/* opcije koraka 1 */
.zkn-opts{ display:grid; gap:9px; }
.zkn-opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; background:var(--al-field); border:1px solid var(--al-line2);
  border-radius:2px; cursor:pointer; color:var(--al-hi);
  font-family:var(--font-sans); font-size:15.5px; font-weight:500;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.zkn-opt__ic{ flex:0 0 auto; width:26px; height:26px; color:var(--al-lo); transition:color .15s; }
.zkn-opt__ic svg{ width:26px; height:26px; }
.zkn-opt__tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.zkn-opt__tx small{ font-size:12.5px; font-weight:400; color:var(--al-lo); line-height:1.4; }
.zkn-opt__go{ margin-left:auto; flex:0 0 auto; color:var(--al-mute-text); font-family:var(--font-mono); font-size:15px; transition:color .15s, transform .15s; }
.zkn-opt:hover{ border-color:var(--al-mute); background:var(--al-plate2); }
.zkn-opt:hover .zkn-opt__ic{ color:var(--al-md); }
.zkn-opt:hover .zkn-opt__go{ color:var(--al-accent-text); transform:translateX(2px); }
.zkn-opt:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.zkn-opt.is-sel{ border-color:var(--al-brand); background:var(--al-brand-soft); box-shadow:inset 2px 0 0 var(--al-brand); }
.zkn-opt.is-sel .zkn-opt__ic{ color:var(--al-brand-text); }
.zkn-opt.is-sel .zkn-opt__go{ color:var(--al-brand-text); }

/* pretraga koraka 2 */
.zkn-search{ position:relative; margin:0 0 18px; }
.zkn-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--al-mute-text); pointer-events:none; }
.zkn-search input{
  width:100%; box-sizing:border-box; padding:12px 14px 12px 38px; background:var(--al-field);
  border:1px solid var(--al-line2); border-radius:2px; color:var(--al-hi);
  font-family:var(--font-sans); font-size:15px;
}
.zkn-search input::placeholder{ color:var(--al-mute-text); }
.zkn-search input:focus{ outline:none; border-color:var(--al-mute); }
.zkn-search input:focus-visible{ outline:2px solid var(--al-brand); outline-offset:1px; }

.zkn-grp{ margin:0 0 20px; }
.zkn-grp[hidden]{ display:none; }
.zkn-grp__label{
  display:flex; align-items:center; gap:9px; margin:0 0 10px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text);
}
.zkn-grp__label .dot{ width:6px; height:6px; flex:0 0 auto;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-grp--prio .dot{ background:var(--al-brand); }
.zkn-grp--vazan .dot{ background:var(--al-risk-med); }
.zkn-grp__label .cnt{ margin-left:auto; color:var(--al-mute-text); letter-spacing:.1em; }

.zkn-items{ display:grid; gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
.zkn-item{
  display:block; width:100%; text-align:left; background:var(--al-plate); cursor:pointer;
  padding:12px 15px; border:0; border-left:2px solid transparent; color:var(--al-hi);
  font-family:var(--font-sans); transition:background .13s, border-color .13s;
}
.zkn-item[hidden]{ display:none; }
.zkn-item__nm{ font-size:14.5px; font-weight:600; letter-spacing:-.005em; display:block; }
.zkn-item__ex{ margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--al-mute-text); display:block; }
.zkn-item:hover{ background:var(--al-plate2); border-left-color:var(--al-line2); }
.zkn-item:focus-visible{ outline:2px solid var(--al-brand); outline-offset:-2px; }
.zkn-item.is-sel{ background:var(--al-brand-soft); border-left-color:var(--al-brand); }

.zkn-nohit{ padding:18px 16px; border:1px dashed var(--al-line2); background:var(--al-field);
  font-size:14px; line-height:1.55; color:var(--al-lo); text-align:center; margin-bottom:18px; }
.zkn-nohit[hidden]{ display:none; }
.zkn-nohit b{ color:var(--al-md); }

/* „ničeg od navedenog" */
.zkn-none{
  margin-top:14px; width:100%; text-align:left; padding:13px 16px;
  background:transparent; border:1px dashed var(--al-line2); border-radius:2px; cursor:pointer;
  color:var(--al-md); font-family:var(--font-sans); font-size:14.5px; font-weight:500;
  transition:border-color .15s, color .15s;
}
.zkn-none:hover{ border-color:var(--al-risk-low); color:var(--al-hi); }
.zkn-none:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.zkn-none.is-sel{ border-style:solid; border-color:var(--al-risk-low); color:var(--al-hi); background:rgba(127,161,104,.10); }

/* ------- PRESUDA PANEL (sticky, desno) ------- */
.zkn-upit__verdict{ padding:0; background:var(--al-field); }
@media (min-width:1000px){
  /* top = hdr(56) + .trip(70) + .zkn-toc(53) — mora sedeti ispod OBE trake
     iznad, ne samo ispod hedera (S70: "podilazi" — bio je tvrd top:70px
     bez veze sa hdr-h ili visinom traka, pa se panel provlačio ispod). */
  .zkn-upit__verdict{ position:sticky; top:calc(var(--hdr-h,56px) + var(--trip-h,68px) + var(--toc-h,52px)); align-self:start; border-top:0; }
}
@media (max-width:999px){
  .zkn-upit__verdict{ border-top:1px solid var(--al-line); }
}
.zkn-vhead{
  padding:14px 22px; border-bottom:1px solid var(--al-line);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text);
  display:flex; align-items:center; gap:9px;
}
.zkn-vhead::before{ content:""; width:6px; height:6px; background:var(--al-mute);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-vbody{ padding:22px; }

/* prazno stanje — v2: legenda tri ishoda umesto ikone */
.zkn-vempty{ color:var(--al-lo); }
.zkn-vempty__lead{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 12px; }
.zkn-legend{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.zkn-legend li{ display:flex; align-items:center; gap:11px; font-size:13.5px; line-height:1.4; color:var(--al-md); padding:9px 12px; border:1px solid var(--al-line); background:var(--al-plate); border-left-width:3px; border-radius:2px; }
.zkn-legend b{ color:var(--al-hi); font-weight:600; }
.zkn-legend .d{ width:9px; height:9px; flex:0 0 auto; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-legend--prio{ border-left-color:var(--al-brand); } .zkn-legend--prio .d{ background:var(--al-brand-hi); }
.zkn-legend--vazan{ border-left-color:var(--al-risk-med); } .zkn-legend--vazan .d{ background:var(--al-risk-med); }
.zkn-legend--ne{ border-left-color:var(--al-risk-low); } .zkn-legend--ne .d{ background:var(--al-risk-low); }
.zkn-vempty__hint{ margin:0; font-size:13px; line-height:1.55; color:var(--al-lo); max-width:40ch; }

/* popunjena presuda */
.zkn-verdict[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .zkn-verdict{ animation:zknVerdictIn .22s ease both; }
}
@keyframes zknVerdictIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.zkn-badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:2px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid; margin-bottom:16px;
}
.zkn-badge::before{ content:""; width:8px; height:8px;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-verdict--prio .zkn-badge{ color:var(--al-brand-text); border-color:var(--al-brand); background:var(--al-brand-soft); }
.zkn-verdict--prio .zkn-badge::before{ background:var(--al-brand-hi); }
.zkn-verdict--vazan .zkn-badge{ color:var(--al-risk-med); border-color:var(--al-risk-med); background:rgba(199,146,72,.14); }
.zkn-verdict--vazan .zkn-badge::before{ background:var(--al-risk-med); }
.zkn-verdict--ne .zkn-badge{ color:var(--al-risk-low); border-color:var(--al-risk-low); background:rgba(127,161,104,.14); }
.zkn-verdict--ne .zkn-badge::before{ background:var(--al-risk-low); }

.zkn-verdict__osnov{
  font-size:15px; line-height:1.55; color:var(--al-hi); margin:0 0 14px; padding-left:14px;
  border-left:2px solid var(--al-line2);
}
.zkn-verdict__osnov .zkn-art{ display:inline; }
.zkn-verdict--prio .zkn-verdict__osnov{ border-left-color:var(--al-brand); }
.zkn-verdict--vazan .zkn-verdict__osnov{ border-left-color:var(--al-risk-med); }
.zkn-verdict--ne .zkn-verdict__osnov{ border-left-color:var(--al-risk-low); }

.zkn-verdict p{ margin:0 0 12px; font-size:14px; line-height:1.65; color:var(--al-md); }
.zkn-verdict p:last-child{ margin-bottom:0; }
.zkn-verdict strong{ color:var(--al-hi); font-weight:600; }

/* dinamički blokovi u presudi */
.zkn-vrow{ margin:0 0 14px; padding:13px 15px; border:1px solid var(--al-line); background:var(--al-plate); border-radius:2px; }
.zkn-vrow__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 6px; display:block; }
.zkn-vrow p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--al-md); }
.zkn-vrow b{ color:var(--al-hi); }
.zkn-vrow--napomena{ border-left:3px solid var(--al-brand); }
.zkn-vrow--napomena .zkn-vrow__k{ color:var(--al-brand-text); }
.zkn-vrow--izuzetak{ border-left:3px solid var(--al-risk-med); }
.zkn-vrow--prijava{ border-left:3px solid var(--al-steel); }
.zkn-vrow--kazne{ border-left:3px solid var(--al-line2); }
.zkn-vrow--kazne .k-list{ display:grid; gap:5px; margin-top:2px; }
.zkn-vrow--kazne .k-list span{ font-family:var(--font-mono); font-size:12.5px; color:var(--al-md); font-variant-numeric:tabular-nums; }
.zkn-vrow--kazne .k-list b{ color:var(--al-brand-text); }

.zkn-ograde{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.zkn-ograde li{ position:relative; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--al-md); }
.zkn-ograde li::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; background:var(--al-risk-low);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-ograde b{ color:var(--al-hi); }

.zkn-vact{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--al-line); }
.zkn-vbtn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none;
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 13px; border-radius:2px; border:1px solid var(--al-line2); background:var(--al-field); color:var(--al-hi);
  transition:border-color .15s, background .15s, color .15s;
}
.zkn-vbtn svg{ width:14px; height:14px; }
.zkn-vbtn:hover{ border-color:var(--al-mute); }
.zkn-vbtn:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.zkn-vbtn--reset{ color:var(--al-mute-text); }
.zkn-vbtn--reset:hover{ color:var(--al-hi); }
.zkn-vbtn--print{ color:var(--al-mute-text); }

/* ============================================================
   OBAVEZE — 8 numerisanih kartica
   ============================================================ */
.zkn-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
.zkn-card{ background:var(--al-plate); padding:20px 20px 22px; position:relative; }
.zkn-card__no{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--al-mute-text); font-variant-numeric:tabular-nums; }
.zkn-card h3{ display:flex; align-items:baseline; gap:9px; margin:9px 0 8px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--al-hi); }
.zkn-card h3::before{ content:""; width:7px; height:7px; flex:0 0 auto; align-self:center; background:var(--al-brand);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-card p{ margin:0 0 12px; font-size:13.5px; line-height:1.55; color:var(--al-mute-text); }
.zkn-card .zkn-art{ font-size:11px; }

/* ============================================================
   ŠTA SE PRIJAVLJUJE + NIVOI OPASNOSTI
   ============================================================ */
.zkn-two{ display:grid; gap:34px; }
@media (min-width:900px){ .zkn-two{ grid-template-columns:1fr 1fr; gap:40px; } }
.zkn-subh{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-md); margin:0 0 14px; display:flex; align-items:center; gap:9px; }
.zkn-subh .zkn-art{ margin-left:auto; }

.zkn-sitlist{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
.zkn-sitlist li{ background:var(--al-plate); padding:12px 15px; font-size:13.5px; line-height:1.5; color:var(--al-md); display:flex; gap:11px; align-items:flex-start; }
.zkn-sitlist li::before{ content:""; flex:0 0 auto; width:6px; height:6px; margin-top:6px; background:var(--al-risk-hi);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-sitnote{ margin:12px 0 0; font-size:13px; line-height:1.55; color:var(--al-lo); }
.zkn-sitnote b{ color:var(--al-md); }

/* skala nivoa */
.zkn-scale{ display:grid; gap:8px; }
.zkn-level{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:13px 16px; border:1px solid var(--al-line); background:var(--al-plate); border-left-width:4px; border-radius:2px; }
.zkn-level__n{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.zkn-level__d{ font-size:13px; line-height:1.5; color:var(--al-mute-text); }
.zkn-level--1{ border-left-color:var(--al-risk-low); }
.zkn-level--1 .zkn-level__n{ color:var(--al-risk-low); }
.zkn-level--2{ border-left-color:var(--al-steel); }
.zkn-level--2 .zkn-level__n{ color:var(--al-steel); }
.zkn-level--3{ border-left-color:var(--al-risk-med); }
.zkn-level--3 .zkn-level__n{ color:var(--al-risk-med); }
.zkn-level--4{ border-left-color:var(--al-brand-hi); }
.zkn-level--4 .zkn-level__n{ color:var(--al-brand-text); }

/* ============================================================
   37 MERA — TRI STUBA
   ============================================================ */
.zkn-stubovi{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:820px){ .zkn-stubovi{ grid-template-columns:repeat(3,1fr); } }
.zkn-stub{ border:1px solid var(--al-line); background:var(--al-plate); border-top-width:3px; }
.zkn-stub--tech{ border-top-color:var(--al-steel); }
.zkn-stub--ljudi{ border-top-color:var(--al-risk-low); }
.zkn-stub--proc{ border-top-color:var(--al-risk-med); }
.zkn-stub__head{ padding:16px 18px 14px; border-bottom:1px solid var(--al-line); }
.zkn-stub__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); display:flex; align-items:center; gap:8px; margin:0; }
.zkn-stub__k .dot{ width:7px; height:7px; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-stub--tech .dot{ background:var(--al-steel); }
.zkn-stub--ljudi .dot{ background:var(--al-risk-low); }
.zkn-stub--proc .dot{ background:var(--al-risk-med); }
.zkn-stub__k .cnt{ margin-left:auto; color:var(--al-mute-text); }
.zkn-stub h3{ margin:8px 0 0; font-size:17px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.zkn-stub ul{ list-style:none; margin:0; padding:12px 18px 18px; display:grid; gap:9px; }
.zkn-stub li{ position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--al-md); }
.zkn-stub li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--al-faint);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-stubnote{ margin:14px 0 0; font-size:13px; color:var(--al-lo); }

/* ============================================================
   ROKOVI — vremenska linija
   ============================================================ */
.zkn-tl{ list-style:none; margin:0; padding:0; position:relative; }
.zkn-tl::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--al-line2); }
.zkn-tlitem{ position:relative; padding:0 0 22px 34px; }
.zkn-tlitem:last-child{ padding-bottom:0; }
.zkn-tlitem::before{ content:""; position:absolute; left:2px; top:4px; width:11px; height:11px; background:var(--al-accent); border:2px solid var(--al-bg);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-tlitem__d{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--al-accent-text); font-variant-numeric:tabular-nums; }
.zkn-tlitem__t{ margin:3px 0 0; font-size:14.5px; line-height:1.5; color:var(--al-hi); }
.zkn-tlitem__t small{ display:block; margin-top:2px; font-size:12.5px; color:var(--al-mute-text); font-weight:400; }
.zkn-tlitem.is-past::before{ background:var(--al-faint); }
.zkn-tlitem.is-past .zkn-tlitem__d{ color:var(--al-mute-text); }
.zkn-tlitem.is-past .zkn-tlitem__t{ color:var(--al-lo); }
.zkn-tlitem.is-active::before{ background:var(--al-brand); box-shadow:0 0 0 4px var(--al-brand-soft); }
.zkn-tlitem.is-active .zkn-tlitem__d{ color:var(--al-brand-text); }
/* v2: „danas" marker */
.zkn-tlnow::before{ background:var(--al-hi) !important; box-shadow:0 0 0 4px var(--al-bg), 0 0 0 5px var(--al-line2); }
.zkn-tlnow .zkn-tlitem__d{ color:var(--al-hi); text-transform:uppercase; letter-spacing:.14em; }
.zkn-tlnow .zkn-tlitem__t{ color:var(--al-md); }

.zkn-standing{ margin-top:26px; padding:18px 20px; border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate); }
.zkn-standing__k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-brand-text); margin:0 0 10px; }
.zkn-standing ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.zkn-standing li{ font-size:13.5px; line-height:1.5; color:var(--al-md); padding-left:18px; position:relative; }
.zkn-standing li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--al-brand);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.zkn-standing b{ color:var(--al-hi); }

/* ============================================================
   KAZNE — tabela
   ============================================================ */
.zkn-tablewrap{ border:1px solid var(--al-line); overflow-x:auto; }
.zkn-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:13.5px; }
.zkn-table th, .zkn-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--al-line); vertical-align:top; }
.zkn-table thead th{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); background:var(--al-plate2); font-weight:500; }
.zkn-table tbody th{ font-weight:600; color:var(--al-hi); font-size:13.5px; }
.zkn-table td{ font-family:var(--font-mono); color:var(--al-md); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zkn-table tr:last-child th, .zkn-table tr:last-child td{ border-bottom:0; }
.zkn-table .em{ color:var(--al-brand-text); }
.zkn-tablenote{ margin:12px 0 0; font-size:13px; line-height:1.55; color:var(--al-lo); }
.zkn-tablenote b{ color:var(--al-md); }
/* v2: hint samo u opsegu gde tabela zaista može bočno da skroluje;
   ispod 620px tabela se preslaže kartično pa hint ne treba */
.zkn-scrollhint{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 8px; display:none; }
@media (min-width:621px) and (max-width:840px){ .zkn-scrollhint{ display:block; } }
@media (max-width:620px){
  .zkn-tablewrap{ overflow:visible; border:0; }
  .zkn-table{ min-width:0; }
  .zkn-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .zkn-table, .zkn-table tbody, .zkn-table tr, .zkn-table th, .zkn-table td{ display:block; }
  .zkn-table tr{ border:1px solid var(--al-line); margin-bottom:10px; }
  .zkn-table tbody th{ background:var(--al-plate2); padding:11px 14px; border-bottom:1px solid var(--al-line); }
  .zkn-table td{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 14px; white-space:normal; border-bottom:1px solid var(--al-line); }
  .zkn-table tr td:last-child{ border-bottom:0; }
  .zkn-table td::before{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); flex:0 0 auto; }
  .zkn-table td:nth-of-type(1)::before{ content:"Prioritetni"; }
  .zkn-table td:nth-of-type(2)::before{ content:"Važan"; }
}

/* ============================================================
   KO JE KO / KO JE IZUZET
   ============================================================ */
.zkn-orgs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
.zkn-org{ background:var(--al-plate); padding:18px 18px 20px; }
.zkn-org__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-steel); }
.zkn-org h3{ margin:8px 0 6px; font-size:15.5px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.zkn-org p{ margin:0; font-size:13px; line-height:1.55; color:var(--al-mute-text); }
.zkn-org .zkn-art{ display:inline-block; margin-top:9px; font-size:11px; }

.zkn-exempt{ border:1px solid var(--al-line); border-left:3px solid var(--al-risk-low); background:var(--al-plate); padding:20px 22px; }
.zkn-exempt p{ margin:0 0 12px; font-size:14.5px; line-height:1.6; color:var(--al-md); max-width:76ch; }
.zkn-exempt p:last-child{ margin-bottom:0; }
.zkn-exempt strong{ color:var(--al-hi); font-weight:600; }
.zkn-exempt .zkn-art{ font-size:11.5px; }

/* ============================================================
   REČNIK — akordeon + link ka enciklopediji
   ============================================================ */
.zkn-gloss{ border:1px solid var(--al-line); }
.zkn-gloss details{ border-bottom:1px solid var(--al-line); }
.zkn-gloss details:last-child{ border-bottom:0; }
.zkn-gloss summary{
  list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; gap:12px;
  font-size:15px; font-weight:600; color:var(--al-hi); letter-spacing:-.005em;
}
.zkn-gloss summary::-webkit-details-marker{ display:none; }
.zkn-gloss summary::before{ content:"+"; flex:0 0 auto; width:16px; text-align:center; font-family:var(--font-mono); font-size:16px; color:var(--al-accent-text); transition:transform .18s; }
.zkn-gloss details[open] summary::before{ content:"–"; }
.zkn-gloss summary .zkn-art{ margin-left:auto; }
.zkn-gloss summary:hover{ color:var(--al-brand-text); }
.zkn-gloss .a{ padding:0 18px 16px 46px; }
.zkn-gloss .a p{ margin:0; font-size:13.5px; line-height:1.65; color:var(--al-md); max-width:74ch; }
.zkn-gloss .a a{ display:inline-flex; align-items:center; gap:5px; margin-top:9px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--al-steel); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s; }
.zkn-gloss .a a:hover{ border-bottom-color:var(--al-steel); }

/* ============================================================
   ŠTA PRVO — koraci
   ============================================================ */
.zkn-first{ list-style:none; margin:0; padding:0; counter-reset:st; display:grid; gap:1px; background:var(--al-line); border:1px solid var(--al-line); grid-template-columns:1fr; }
@media (min-width:720px){ .zkn-first{ grid-template-columns:1fr 1fr; } }
.zkn-first li{ counter-increment:st; background:var(--al-plate); padding:18px 20px; position:relative; }
.zkn-first li::before{ content:counter(st,decimal-leading-zero); font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--al-accent-text); }
.zkn-first h3{ margin:6px 0 6px; font-size:15.5px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.zkn-first p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--al-mute-text); }

/* ============================================================
   FAQ (obrazac iz simulatora)
   ============================================================ */
.zkn-faq{ border:1px solid var(--al-line); }
.zkn-faq details{ border-bottom:1px solid var(--al-line); }
.zkn-faq details:last-child{ border-bottom:0; }
.zkn-faq summary{ list-style:none; cursor:pointer; padding:15px 18px; display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--al-hi); letter-spacing:-.005em; }
.zkn-faq summary::-webkit-details-marker{ display:none; }
.zkn-faq summary::before{ content:"+"; flex:0 0 auto; width:18px; text-align:center; font-family:var(--font-mono); font-size:16px; color:var(--al-accent-text); }
.zkn-faq details[open] summary::before{ content:"–"; }
.zkn-faq summary:hover{ color:var(--al-brand-text); }
.zkn-faq .a{ padding:0 18px 16px 48px; }
.zkn-faq .a p{ margin:0 0 10px; font-size:14px; line-height:1.65; color:var(--al-md); max-width:74ch; }
.zkn-faq .a p:last-child{ margin-bottom:0; }
.zkn-faq .a strong{ color:var(--al-hi); }

/* ============================================================
   DALJE ČITANJE / PODELI / TRANSPARENTNOST
   ============================================================ */
.zkn-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
.zkn-link{ background:var(--al-plate); padding:16px 18px; text-decoration:none; display:block; transition:background .13s; }
.zkn-link:hover{ background:var(--al-plate2); }
.zkn-link .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
.zkn-link .t{ display:block; margin-top:6px; font-size:15px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.zkn-link .t::after{ content:" →"; color:var(--al-accent-text); }

.zkn-share{ margin-top:20px; padding:24px 26px; border:1px solid var(--al-line); background:var(--al-plate2); display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.zkn-share .tx{ flex:1 1 300px; }
.zkn-share .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 8px; }
.zkn-share h3{ margin:0 0 6px; font-size:19px; font-weight:600; color:var(--al-hi); letter-spacing:-.015em; }
.zkn-share p{ margin:0; font-size:14px; line-height:1.6; color:var(--al-md); max-width:52ch; }
.zkn-sharebtns{ display:flex; gap:9px; flex-wrap:wrap; }
.zkn-sharebtn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:11px 15px; border-radius:2px; cursor:pointer; text-decoration:none; border:1px solid var(--al-line2); background:var(--al-field); color:var(--al-hi); transition:border-color .15s, background .15s, color .15s; }
.zkn-sharebtn:hover{ border-color:var(--al-mute); }
.zkn-sharebtn:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.zkn-sharebtn svg{ width:15px; height:15px; }
.zkn-sharebtn.ok{ border-color:var(--al-risk-low); color:var(--al-risk-low); }

/* CTA ka alatu za prijavu incidenta (sekcija #prijava) */
.zkn-cta{ margin-top:22px; padding:20px 24px; border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate2); display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.zkn-cta .tx{ flex:1 1 320px; }
.zkn-cta h3{ margin:0 0 5px; font-size:17.5px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.zkn-cta p{ margin:0; font-size:14px; line-height:1.6; color:var(--al-md); max-width:64ch; }
/* Linkovi u telu (FAQ, pasusi) nasledjivali su globalni --brand #9b1919 =
   2,33 na tamnoj podlozi. Strana ima svoju crvenu za tekst. */
body.page-alat-zakon .zkn a:not([class]){ color:var(--al-brand-text); }
.zkn-cta__btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 16px; border-radius:2px; border:1px solid var(--al-brand); background:var(--al-brand-soft); color:var(--al-hi);
  transition:border-color .15s, color .15s, background .15s;
}
.zkn-cta__btn:hover{ color:var(--al-hi); border-color:var(--al-brand-hi); }
.zkn-cta__btn:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }

.zkn-sources{ margin-top:64px; padding-top:44px; border-top:1px solid var(--al-line); scroll-margin-top:90px; }
.zkn-srcgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); margin-top:18px; }
.zkn-src{ background:var(--al-plate); padding:15px 18px; text-decoration:none; display:block; transition:background .13s; }
.zkn-src:hover{ background:var(--al-plate2); }
.zkn-src .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--al-steel); }
.zkn-src .t{ display:block; margin-top:5px; font-size:14px; font-weight:600; color:var(--al-hi); }
.zkn-src .t::after{ content:" ↗"; color:var(--al-mute-text); font-weight:400; }

.zkn-note{ margin-top:28px; padding:18px 20px; border:1px solid var(--al-line); border-left:2px solid var(--al-mute); background:var(--al-plate); }
.zkn-note p{ margin:0; color:var(--al-mute-text); font-size:13px; line-height:1.6; max-width:92ch; text-wrap:pretty; }
.zkn-note p + p{ margin-top:8px; }
.zkn-note b{ color:var(--al-md); font-weight:600; }

/* ============================================================
   FUTER — enc-footer (uvek taman; svaki alat-CSS nosi svoj blok)
   v2: fiksiran uz dno (mono traka), telo dobija padding-bottom.
   ============================================================ */
body.page-alat-zakon .enc-ftr{ background:#0a0a09; border-top:1px solid #2e2e2c; color:#a0a09e; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; position:fixed; left:0; right:0; bottom:0; z-index:40; }
body.page-alat-zakon{ padding-bottom:41px; }
body.page-alat-zakon .enc-ftr-inner{
  /* Pun po sirini prozora (kao /enciklopedija/, /lozinka/, /izlozenost/ i
     /alati/), ne do kraja kolone sadrzaja. Denisova odluka S132: sravnjeno
     na svih deset strana koje koriste enc-footer. Ranije je ovde stajalo
     max-width + margin:0 auto. */
  padding:10px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body.page-alat-zakon .enc-ftr-l, body.page-alat-zakon .enc-ftr-r{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
body.page-alat-zakon .enc-ftr a{ color:inherit; text-decoration:none; transition:color .12s; }
body.page-alat-zakon .enc-ftr a:hover{ color:#ece9e3; }
body.page-alat-zakon .enc-ftr .dot{ width:3px; height:3px; background:#3a3a37; border-radius:50%; display:inline-block; }

/* ============================================================
   LIGHT VARIJANTA — topli papir; crvena ostaje signal.
   Heder i futer OSTAJU TAMNI (kao lozinka/simulator).
   ============================================================ */
html[data-theme="light"]{ color-scheme:light; }
/* NOTCH I DONJA TRAKA = BODY. Safari 26 više ne čita theme-color: boju traka
   uzorkuje sa sticky/fixed elemenata uz ivicu viewporta (kod nas .hdr i
   .cp-tabbar, oba tamna), a kad njih nema — pada na <body>. <html> se za tu
   svrhu ignoriše. Pri prelasku sa strane na stranu tog uzorka nakratko nema,
   Safari padne na body — i dok je body u svetloj temi nosio #f2f0e9, pojas
   iznad hedera i ispod tabbara je pobeleo pa se vratio u boju hroma (Denisov
   nalaz na triptihu, 27.7.2026). Zato body ostaje taman u obe teme, a boju
   strane nosi #main. Isto rešenje već drže /price/, /vesti/, /ranjivosti/ i
   enciklopedija (S84/S85) — alat-strane su bile jedini izuzetak. */
html[data-theme="light"]{ background:#f2f0e9; }
html[data-theme="light"] body.page-alat-zakon{ background:#0f0f0d; }
html[data-theme="light"] body.page-alat-zakon > main#main{ background:#f2f0e9; }
html[data-theme="light"] body.page-alat-zakon{
  --al-bg:#f2f0e9; --al-grid:rgba(20,20,18,.035);
  --al-plate:#ffffff; --al-plate2:#f6f4ee; --al-field:#ffffff;
  --al-line:#e3dfd4; --al-line2:#cec9bb;
  --al-hi:#1a1917; --al-md:#403d37; --al-lo:#5b574f; --al-mute:#7b776e; --al-faint:#a8a49b; --al-mute-text:#666663;
  --al-brand:#b0301f; --al-brand-hi:#c0392b; --al-brand-text:#b0301f; --al-brand-soft:rgba(192,57,43,.10);
  --al-accent:#9a5a15; --al-accent-text:#935614;
  --al-risk-hi:#bd3322; --al-risk-med:#8f6415; --al-risk-low:#4d7838;
  --al-steel:#4a6a8c; --al-violet:#5f4fa0;
  color:var(--al-hi);
}
html[data-theme="light"] body.page-alat-zakon ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }
html[data-theme="light"] body.page-alat-zakon .axc{ background:#ecebe3; border-bottom-color:#e3dfd4; }
html[data-theme="light"] body.page-alat-zakon .axc-kick{ color:var(--al-mute-text); }
html[data-theme="light"] body.page-alat-zakon .axc-kick b{ color:#935614; }
html[data-theme="light"] body.page-alat-zakon .axc h1{ color:#1a1917; }
html[data-theme="light"] body.page-alat-zakon .axc h1 .l-red{ color:#b0301f; }
html[data-theme="light"] body.page-alat-zakon .axc-sub{ color:#5b574f; }
html[data-theme="light"] body.page-alat-zakon .axc-mods a{ color:#403d37; border-color:#cec9bb; }
html[data-theme="light"] body.page-alat-zakon .axc-mods a:hover{ color:#1a1917; border-color:#7b776e; }
html[data-theme="light"] body.page-alat-zakon .axc-mods .num{ color:#935614; }
html[data-theme="light"] body.page-alat-zakon .axc-stat{ color:var(--al-mute-text); }
html[data-theme="light"] body.page-alat-zakon .axc-stat b{ color:#1a1917; }
html[data-theme="light"] body.page-alat-zakon .axc-stat .sig{ color:#b0301f; }
html[data-theme="light"] body.page-alat-zakon .trip{ background:#e9e7de; }
html[data-theme="light"] body.page-alat-zakon .zkn-tlitem::before{ border-color:var(--al-bg); }

/* meki prelaz pri promeni teme */
html.theme-anim body.page-alat-zakon .zkn, html.theme-anim body.page-alat-zakon .zkn *,
html.theme-anim body.page-alat-zakon .axc, html.theme-anim body.page-alat-zakon .axc *{
  transition:background-color .28s ease, border-color .28s ease, color .22s ease;
}

/* ============================================================
   PRINT — samo presuda + hero naslov (dugme „Štampaj" u presudi).
   Popravka prototipa: #upitnik je i sam .zkn-sec, pa se skrivaju
   samo OSTALE sekcije; unutar upitnika steps/head/prog.
   ============================================================ */
@media print{
  body.page-alat-zakon{ background:#fff; color:#111; display:block; padding-bottom:0 !important; }
  body.page-alat-zakon .enc-ftr{ position:static !important; }
  .hdr, .hdr-backdrop, .enc-ftr, .cp-tabbar, .skip-link,
  .zkn-toc, .axc-hexwrap, .trip,
  .axc-mods, .zkn-bignums, .zkn__intro,
  .zkn-sec:not(#upitnik), .zkn-sources,
  #upitnik .zkn-sec__head, .zkn-upit__head, .zkn-upit__steps, .zkn-vact{ display:none !important; }
  .axc{ border:0; background:#fff; padding:0; }
  .axc-inner{ padding:0 0 12px; }
  .axc h1{ color:#111; font-size:22px; }
  .axc h1 .l-red, .axc h1 .l-blue{ color:#111; }
  .axc-kick, .axc-sub, .axc-stat{ color:#555; }
  .axc-stat .sig{ color:#555; }
  body.page-alat-zakon .zkn{ padding:0; background:#fff; background-image:none; }
  .zkn-sec{ padding-top:0; }
  .zkn-upit{ border-color:#ccc; background:#fff; }
  .zkn-upit::before, .zkn-upit::after{ display:none; }
  .zkn-upit__grid{ grid-template-columns:1fr; }
  .zkn-upit__verdict{ position:static; background:#fff; }
  .zkn-vhead{ color:#555; border-bottom-color:#ccc; }
  .zkn-vbody{ color:#111; }
  .zkn-vempty{ color:#555; }
  .zkn-verdict p, .zkn-vrow p, .zkn-ograde li{ color:#333; }
  .zkn-verdict__osnov{ color:#111; }
  .zkn-verdict strong, .zkn-vrow b, .zkn-ograde b{ color:#111; }
  .zkn-badge{ color:#111; border-color:#999; background:#fff; }
  .zkn-vrow{ border-color:#ccc; background:#fff; }
  .zkn-vrow__k{ color:#555; }
  .zkn-vrow--kazne .k-list span, .zkn-vrow--kazne .k-list b{ color:#333; }
  .zkn-art{ color:#555; }
}

/* ============================================================
   RESPONSIVE — sitniji padding na uskim ekranima
   ============================================================ */
@media (max-width:760px){
  body.page-alat-zakon .zkn{ padding:44px 16px 72px; }
  .zkn-sec{ padding-top:52px; }
  .zkn-upit__steps{ padding:22px 18px 26px; }
  .zkn-vbody{ padding:20px 18px; }
}

/* umerene animacije — reduced motion gasi micro-tranzicije */
@media (prefers-reduced-motion:reduce){
  body.page-alat-zakon *{ transition:none !important; }
}

/* Klip horizontalnog preliva SAMO na html, i SAMO na desktopu (≥821px) —
   tamo heder (triptih grupa +253px) preliva do ~1430px. Na mobilnom je
   heder u burgeru pa NIŠTA ne preliva; clip na html tamo samo pravi
   fantomsku scroll traku u iOS Safari-ju (Denisov nalaz — traka gore desno
   iako se stranica ne skroluje u stranu). Zato clip iza min-width:821.
   main ostaje visible (override layout.css guard-a) da sticky ne jitter-uje. */
@media (min-width:821px){ html{ overflow-x:clip; } }
body.page-alat-zakon main{ overflow-x:visible; }

/* Mobilni footer: enc-ftr se sakriva, cp-tabbar preuzima (isti obrazac kao /lozinka/ i /vesti/). */
@media (max-width:767px){
  body.page-alat-zakon .enc-ftr{ display:none; }
  body.page-alat-zakon main{ padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
  /* horizontalni swipe za trake sa odabirima — vraća tanki scroll indikator + iOS momentum */
  .trip__inner,
  .zkn-toc__inner{
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
    -webkit-overflow-scrolling:touch;
  }
  .trip__inner::-webkit-scrollbar,
  .zkn-toc__inner::-webkit-scrollbar{ display:block; height:3px; }
  .trip__inner::-webkit-scrollbar-thumb,
  .zkn-toc__inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:2px; }
  .trip__inner::-webkit-scrollbar-track,
  .zkn-toc__inner::-webkit-scrollbar-track{ background:transparent; }
}