/* ============================================================
   hitno.css — „Prijavite sajber napad" (/hitno/)
   Port dizajnerske predaje `design_handoff_hitno` (23.7.2026, Denis
   prihvatio): hero u dve kolone sa akcionom kolonom, situacije kao
   akordeon (<details>), sticky TOC orijentir, potvrda preuzima hero.
   Konzola familija (--al-* tokeni), tamna podrazumevana + svetla.
   Telo ≥18px, sve interaktivno ≥44px, bez animacija (samo hover jezik).
   Hrom (SOS dugme, prigušen Vesti čip) živi u header.css; peta ćelija
   tabbara u tabbar.css.
   ============================================================ */

body.page-hitno{
  --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-ok:#7fa168; --al-steel:#8fa9c4;
}
html{ color-scheme:dark; }
html, body.page-hitno{ background:var(--al-bg); }
body.page-hitno{ color:var(--al-hi); font-family:var(--font-sans); font-size:18px; line-height:1.6; }
body.page-hitno ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }
body.page-hitno{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.page-hitno > main#main{ display:flex; flex-direction:column; flex:1 0 auto; }
body.page-hitno > main#main > .htn{ flex:1 0 auto; }
body.page-hitno a{ color:var(--al-md); }
body.page-hitno a:hover{ color:var(--al-brand-text); }

/* ============================================================
   S1 · HERO — dvokolonski (N3/B1): levo telefon+priča, desno akciona kolona.
   ============================================================ */
.htn-hero{ background:#0f0f0d; border-bottom:1px solid #262624; }
.htn-hero__inner{ max-width:var(--container-wide); margin:0 auto; padding:56px 28px 48px;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr); gap:52px; align-items:start; }
@media (max-width:960px){ .htn-hero__inner{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:560px){ .htn-hero__inner{ padding:34px 18px 30px; } }

.htn-kick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 18px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-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%); }
.htn-kick b{ color:var(--al-accent-text); font-weight:500; }
.htn-kick .sep{ color:var(--al-mute-text); }
.htn-h1{ margin:0 0 14px; font-weight:600; font-size:clamp(32px,4vw,50px); line-height:1.1; letter-spacing:-.026em; color:var(--al-hi); text-wrap:balance; }
.htn-sub{ margin:0 0 30px; font-size:19px; line-height:1.58; color:var(--al-md); max-width:52ch; text-wrap:pretty; }
.htn-sub b{ color:var(--al-hi); font-weight:600; }

/* Telefon — najveći element; tekst selektabilan, klik zove. */
.htn-tel{ margin:0; }
.htn-tel__num{ display:inline-block; text-decoration:none; font-family:var(--font-mono); font-weight:600;
  font-size:clamp(34px,5.6vw,64px); letter-spacing:-.01em; line-height:1.08; color:var(--al-hi); border-bottom:3px solid var(--al-brand); padding-bottom:6px; }
.htn-tel__num:hover{ color:var(--al-brand-text); }
.htn-tel__num:focus-visible{ outline:3px solid var(--al-brand); outline-offset:6px; }
.htn-tel__note{ margin:16px 0 0; font-size:16px; line-height:1.6; color:var(--al-lo); max-width:52ch; }
.htn-signal{ font-family:var(--font-mono); font-size:15px; color:var(--al-accent-text); user-select:all; }
.htn-hero__note{ margin:26px 0 0; font-size:14.5px; line-height:1.6; color:var(--al-mute-text); max-width:56ch; }
.htn-hero__note a{ color:var(--al-md); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.htn-hero__note a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }

/* Desna akciona kolona (N3): tri vrata (stepenište) + „ko se javlja" karta. */
.htn-act{ display:flex; flex-direction:column; gap:12px; }
.htn-act__k{ margin:0 0 2px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-door{ display:flex; align-items:center; gap:14px; min-height:64px; padding:14px 18px; text-decoration:none; border-radius:2px;
  border:1px solid var(--al-line2); background:var(--al-plate); transition:border-color .15s,background .15s; }
.htn-door:hover{ border-color:var(--al-mute); background:var(--al-plate2); }
.htn-door:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.htn-door__ord{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--al-mute-text); flex:0 0 auto; }
.htn-door__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.htn-door__t{ font-size:17px; font-weight:600; letter-spacing:-.005em; color:var(--al-hi); }
.htn-door__d{ font-size:13.5px; line-height:1.4; color:var(--al-lo); }
.htn-door__go{ margin-left:auto; flex:0 0 auto; color:var(--al-mute-text); font-size:15px; }
.htn-door--call{ background:var(--al-brand); border-color:var(--al-brand); }
.htn-door--call .htn-door__ord{ color:rgba(255,255,255,.95); }
.htn-door--call .htn-door__t{ color:#fff; }
.htn-door--call .htn-door__d{ color:#fff; font-family:var(--font-mono); }
.htn-door--call .htn-door__go{ color:#fff; }
.htn-door--call:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); }

.htn-who{ margin-top:6px; padding:16px 18px; border:1px solid var(--al-line); border-left:2px solid var(--al-steel); background:var(--al-plate); border-radius:2px; }
.htn-who__k{ margin:0 0 8px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--al-steel); }
.htn-who__t{ margin:0 0 6px; font-size:16px; line-height:1.5; color:var(--al-md); }
.htn-who__t b{ color:var(--al-hi); font-weight:600; }
.htn-who__row{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--al-lo); }
.htn-who__row span{ display:inline-flex; align-items:center; gap:7px; }
.htn-who__row span::before{ content:""; width:5px; height:5px; background:var(--al-ok); border-radius:50%; }
.htn-who a{ color:var(--al-md); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.htn-who a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }

/* ============================================================
   POTVRDNI HERO (B5): posle slanja PREUZIMA hero — nema više ponovljenog
   H1/telefona/vrata ispod uske trake. Server renderuje ILI hero ILI ovo;
   varijanta „mejl pao" nosi klasu .htn-confirm--warn.
   ============================================================ */
.htn-confirm{ background:#0f0f0d; border-bottom:1px solid var(--al-line); border-top:3px solid var(--al-ok); }
.htn-confirm--warn{ border-top-color:var(--al-brand); }
.htn-confirm:focus{ outline:none; }
.htn-confirm__inner{ max-width:var(--container-wide); margin:0 auto; padding:52px 28px 46px; }
@media (max-width:560px){ .htn-confirm__inner{ padding:34px 18px 30px; } }
.htn-confirm__k{ margin:0 0 16px; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--al-ok); }
.htn-confirm--warn .htn-confirm__k{ color:var(--al-brand-text); }
.htn-confirm__k::before{ content:""; width:8px; height:8px; background:currentColor; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.htn-confirm__t{ margin:0 0 12px; font-size:clamp(26px,3.2vw,38px); font-weight:600; letter-spacing:-.022em; line-height:1.14; color:var(--al-hi); text-wrap:balance; }
.htn-confirm__d{ margin:0 0 28px; font-size:19px; line-height:1.6; color:var(--al-md); max-width:60ch; }
.htn-confirm__tel{ display:inline-block; text-decoration:none; font-family:var(--font-mono); font-weight:600; font-size:clamp(28px,4vw,44px); color:var(--al-hi); border-bottom:3px solid var(--al-brand); padding-bottom:5px; }
.htn-confirm__tel:hover{ color:var(--al-brand-text); }
.htn-confirm__telk{ margin:0 0 8px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-confirm__next{ margin:26px 0 0; font-size:15.5px; line-height:1.6; color:var(--al-lo); }
.htn-confirm__next a{ color:var(--al-md); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.htn-confirm__next a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }
.htn-confirm__sig{ margin:14px 0 0; font-size:15px; color:var(--al-lo); }

/* ============================================================
   TOC / ORIJENTIR (N10/B6) — tanka, tiha sticky traka; desktop-only.
   ============================================================ */
.htn-toc{ position:sticky; top:var(--hdr-h,56px); z-index:20; background:#0c0c0a; border-bottom:1px solid var(--al-line); }
.htn-toc__inner{ max-width:var(--container-wide); margin:0 auto; padding:0 28px; display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none; }
.htn-toc__inner::-webkit-scrollbar{ display:none; }
.htn-toc__lead{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; padding:12px 18px 12px 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-toc a{ position:relative; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:12px 16px; text-decoration:none; font-size:13.5px; color:var(--al-lo); white-space:nowrap; transition:color .15s; }
.htn-toc a .n{ font-family:var(--font-mono); font-size:11px; color:var(--al-mute-text); }
.htn-toc a:hover{ color:var(--al-hi); }
.htn-toc a.on{ color:var(--al-hi); }
.htn-toc a.on::after{ content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px; background:var(--al-brand); }
.htn-toc a.on .n{ color:var(--al-brand-text); }
@media (max-width:860px){ .htn-toc{ display:none; } }

/* ============================================================
   TELO
   ============================================================ */
body.page-hitno .htn{ background:var(--al-bg); padding:60px 28px 104px;
  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-hitno .htn__inner{ max-width:1100px; margin:0 auto; }
@media (max-width:560px){ body.page-hitno .htn{ padding:40px 16px 72px; } }

.htn-kickb{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-kickb::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%); }
.htn-kickb .n{ color:var(--al-accent-text); }
.htn-sec{ padding-top:72px; scroll-margin-top:calc(var(--hdr-h,56px) + 52px); }
.htn-sec--first{ padding-top:0; }
.htn-sec__head{ margin-bottom:24px; }
.htn-h2{ margin:0 0 10px; font-size:clamp(24px,2.6vw,32px); font-weight:600; letter-spacing:-.02em; line-height:1.14; color:var(--al-hi); text-wrap:balance; }
.htn-lead{ margin:0; max-width:70ch; color:var(--al-md); font-size:18px; line-height:1.62; text-wrap:pretty; }
.htn-lead b{ color:var(--al-hi); }

/* ---- S2 birač ---- */
.htn-chooser{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.htn-chooser[hidden]{ display:none; }
.htn-chip{ cursor:pointer; min-height:44px; padding:9px 15px; text-align:left; background:var(--al-field); color:var(--al-md); border:1px solid var(--al-line2); border-radius:2px; font-family:var(--font-sans); font-size:14.5px; line-height:1.3; transition:border-color .15s,background .15s,color .15s; }
.htn-chip .n{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--al-mute-text); margin-right:3px; }
.htn-chip:hover{ border-color:var(--al-mute); color:var(--al-hi); }
.htn-chip:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.htn-chip[aria-pressed="true"]{ border-color:var(--al-brand); background:var(--al-brand-soft); color:var(--al-hi); box-shadow:inset 2px 0 0 var(--al-brand); }
.htn-chip[aria-pressed="true"] .n{ color:var(--al-brand-text); }
.htn-chip--all{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.htn-expand{ display:none; margin:0 0 24px; align-items:center; gap:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-expand button{ background:none; border:0; padding:0; color:var(--al-lo); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; border-bottom:1px solid var(--al-line2); }
.htn-expand button:hover{ color:var(--al-hi); border-color:var(--al-mute); }
.htn-expand[data-on]{ display:flex; }

/* ---- S2 situacije kao AKORDEON (N4/N5): <details>, no-JS = sve otvoreno ---- */
.htn-sits{ display:grid; gap:10px; }
.htn-sit{ border:1px solid var(--al-line); background:var(--al-plate); border-radius:2px; scroll-margin-top:calc(var(--hdr-h,56px) + 52px); }
.htn-sit[hidden]{ display:none; }
.htn-sit>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:17px 20px; }
.htn-sit>summary::-webkit-details-marker{ display:none; }
.htn-sit__t{ font-size:19px; font-weight:600; letter-spacing:-.012em; line-height:1.3; color:var(--al-hi); text-wrap:balance; }
.htn-sit__t .n{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--al-brand-text); margin-right:8px; }
.htn-sit__caret{ margin-left:auto; flex:0 0 auto; color:var(--al-mute-text); transition:transform .18s; }
.htn-sit[open]>summary .htn-sit__caret{ transform:rotate(180deg); }
.htn-sit>summary:hover .htn-sit__t{ color:#fff; }
.htn-sit>summary:focus-visible{ outline:2px solid var(--al-brand); outline-offset:-2px; }
.htn-sit__body{ padding:2px 20px 22px; }
.htn-sit__cols{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; }
@media (max-width:760px){ .htn-sit__cols{ grid-template-columns:1fr; gap:16px; } }
.htn-listk{ margin:0 0 10px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.htn-list--do .htn-listk{ color:var(--al-ok); }
.htn-list--dont .htn-listk{ color:var(--al-brand-text); }
.htn-list ol, .htn-list ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.htn-list li{ position:relative; padding-left:26px; font-size:18px; line-height:1.5; color:var(--al-md); text-wrap:pretty; }
.htn-list--do ol{ counter-reset:htnDo; }
.htn-list--do li{ counter-increment:htnDo; }
.htn-list--do li::before{ content:counter(htnDo); position:absolute; left:0; top:1px; width:17px; text-align:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--al-ok); }
.htn-list--dont li::before{ content:"✕"; position:absolute; left:0; top:1px; width:17px; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--al-brand-text); }
.htn-rule{ margin:20px 0 0; padding:16px 18px; border:1px solid var(--al-line); border-left:3px solid var(--al-steel); background:var(--al-plate); font-size:16px; line-height:1.6; color:var(--al-md); max-width:90ch; }

/* ---- S3 forma ---- */
.htn-hp{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.htn-form{ border:1px solid var(--al-line); background:var(--al-plate); border-radius:2px; padding:22px 24px 24px; }
@media (max-width:560px){ .htn-form{ padding:16px; } }
.htn-form__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:640px){ .htn-form__grid{ grid-template-columns:1fr; } }
.htn-f{ display:flex; flex-direction:column; gap:6px; margin:0; border:0; padding:0; min-width:0; }
.htn-f__l{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-f__req{ color:var(--al-brand-text); font-weight:500; margin-left:4px; }
.htn-f input[type="text"], .htn-f input[type="tel"], .htn-f input[type="email"], .htn-f textarea{ width:100%; box-sizing:border-box; min-height:48px; background:var(--al-field); color:var(--al-hi); border:1px solid var(--al-line2); border-radius:2px; padding:12px 14px; font-family:var(--font-sans); font-size:17px; line-height:1.5; }
.htn-f textarea{ resize:vertical; min-height:120px; }
.htn-f input::placeholder, .htn-f textarea::placeholder{ color:var(--al-mute-text); }
.htn-f input:focus, .htn-f textarea:focus{ outline:none; border-color:var(--al-mute); }
.htn-f input:focus-visible, .htn-f textarea:focus-visible{ outline:2px solid var(--al-brand); outline-offset:1px; }
.htn-f--full{ grid-column:1 / -1; }
.htn-f--radios{ gap:2px; }
.htn-radio{ display:flex; align-items:center; gap:10px; min-height:40px; font-size:16px; color:var(--al-md); cursor:pointer; }
.htn-radio input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--al-brand); }
.htn-form__optk{ margin:20px 0 12px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
.htn-form__optk--kanali{ margin-top:28px; }
.htn-form__foot{ margin-top:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.htn-submit{ cursor:pointer; min-height:52px; padding:14px 28px; background:var(--al-brand); color:#fff; border:1px solid var(--al-brand); border-radius:2px; font-family:var(--font-sans); font-size:17px; font-weight:600; letter-spacing:-.005em; transition:background .15s,border-color .15s; }
.htn-submit:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); }
.htn-submit:focus-visible{ outline:2px solid var(--al-hi); outline-offset:2px; }
.htn-form__mikro{ margin:0; font-size:13.5px; line-height:1.55; color:var(--al-mute-text); max-width:52ch; }
.htn-form__mikro a{ color:var(--al-md); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.htn-form__mikro a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }

/* kanali (fallback „nikad ćorsokak") */
.htn-kanali{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
@media (max-width:760px){ .htn-kanali{ grid-template-columns:1fr; } }
.htn-kanal{ display:block; background:var(--al-plate); padding:18px 20px; text-decoration:none; }
a.htn-kanal{ transition:background .13s; }
a.htn-kanal:hover{ background:var(--al-plate2); }
a.htn-kanal:focus-visible{ outline:2px solid var(--al-brand); outline-offset:-2px; }
.htn-kanal .k{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-steel); margin-bottom:7px; }
.htn-kanal .t{ display:block; font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--al-hi); margin-bottom:6px; overflow-wrap:anywhere; }
.htn-kanal .d{ display:block; font-size:14px; line-height:1.55; color:var(--al-lo); }
.htn-warn{ margin:18px 0 0; padding:14px 18px; border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate); font-size:16px; line-height:1.6; color:var(--al-md); max-width:90ch; }

/* ---- S4 zvanični kanali ---- */
.htn-srcgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
@media (max-width:640px){ .htn-srcgrid{ grid-template-columns:1fr; } }
.htn-src{ display:block; background:var(--al-plate); padding:18px 20px; text-decoration:none; }
a.htn-src{ transition:background .13s; }
a.htn-src:hover{ background:var(--al-plate2); }
a.htn-src:focus-visible{ outline:2px solid var(--al-brand); outline-offset:-2px; }
.htn-src .k{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-steel); margin-bottom:7px; }
.htn-src .t{ display:block; font-size:17px; font-weight:600; color:var(--al-hi); margin-bottom:6px; }
a.htn-src[href^="http"] .t::after{ content:" ↗"; color:var(--al-mute-text); font-weight:400; }
a.htn-src[href^="/"] .t::after{ content:" →"; color:var(--al-accent-text); }
.htn-src .d{ display:block; font-size:14.5px; line-height:1.55; color:var(--al-lo); max-width:52ch; }

/* ---- S5 proces ---- */
.htn-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
@media (max-width:760px){ .htn-steps{ grid-template-columns:1fr; } }
.htn-step{ background:var(--al-plate); padding:20px 20px 18px; }
.htn-step__n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-bottom:12px; border:1px solid var(--al-line2); border-radius:2px; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--al-accent-text); }
.htn-step h3{ margin:0 0 8px; font-size:18px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.htn-step p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--al-lo); }
.htn-step a{ color:var(--al-md); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.htn-step a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }
.htn-ko{ margin:20px 0 0; font-size:17px; line-height:1.65; color:var(--al-md); max-width:70ch; }
.htn-ko a{ color:var(--al-hi); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.htn-ko a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }

/* ---- S6 privatnost ---- */
.htn-sec--note{ padding-top:56px; }
.htn-note{ padding:18px 20px; border:1px solid var(--al-line); border-left:2px solid var(--al-mute); background:var(--al-plate); }
.htn-note p{ margin:0 0 10px; color:var(--al-mute-text); font-size:15px; line-height:1.65; max-width:92ch; }
.htn-note p:last-child{ margin-bottom:0; }
.htn-note b{ color:var(--al-md); }

/* ---- futer ---- */
body.page-hitno .enc-ftr{ background:#0a0a09; border-top:1px solid #2e2e2c; color:#a0a09e; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; }
body.page-hitno .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:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body.page-hitno .enc-ftr-l, body.page-hitno .enc-ftr-r{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
body.page-hitno .enc-ftr a{ color:inherit; text-decoration:none; transition:color .12s; }
body.page-hitno .enc-ftr a:hover{ color:#ece9e3; }
body.page-hitno .enc-ftr .dot{ width:3px; height:3px; background:#3a3a37; border-radius:50%; display:inline-block; }

/* ============================================================
   LIGHT TEMA
   ============================================================ */
html[data-theme="light"]{ color-scheme:light; }
html[data-theme="light"], html[data-theme="light"] body.page-hitno{ background:#f2f0e9; }
html[data-theme="light"] body.page-hitno{
  --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-ok:#4d7838; --al-steel:#4a6a8c; color:var(--al-hi);
}
html[data-theme="light"] body.page-hitno .htn-hero{ background:#ecebe3; border-bottom-color:#e3dfd4; }
html[data-theme="light"] body.page-hitno .htn-confirm{ background:#ecebe3; border-bottom-color:#e3dfd4; }
html[data-theme="light"] body.page-hitno .htn-toc{ background:#e9e7de; border-bottom-color:#e3dfd4; }
html[data-theme="light"] body.page-hitno .htn-door--call{ background:var(--al-brand); border-color:var(--al-brand); }
html[data-theme="light"] body.page-hitno .htn-door--call:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); }

/* smiren prelaz teme */
html.theme-anim body.page-hitno .htn, html.theme-anim body.page-hitno .htn *,
html.theme-anim body.page-hitno .htn-hero, html.theme-anim body.page-hitno .htn-hero *,
html.theme-anim body.page-hitno .htn-confirm, html.theme-anim body.page-hitno .htn-confirm *{ transition:background-color .28s ease,border-color .28s ease,color .22s ease; }

/* ============================================================
   PRINT — S2 koraci kao čist checklist (mreža pala → papir)
   ============================================================ */
@media print{
  body.page-hitno{ background:#fff; color:#111; display:block; }
  .hdr, .hdr-backdrop, .enc-ftr, .cp-tabbar, .skip-link, .htn-toc,
  .htn-act, .htn-hero__note, .htn-chooser, .htn-expand,
  #prijava, #kanali, #proces, #privatnost{ display:none !important; }
  body.page-hitno .htn{ padding:0; background:#fff; background-image:none; }
  .htn-hero{ background:#fff; border-bottom:1px solid #999; }
  .htn-hero__inner{ padding:0 0 12pt; display:block; }
  .htn-h1{ color:#111; font-size:22pt; }
  .htn-sub{ color:#222; font-size:11pt; }
  .htn-tel__num{ color:#111; border-bottom-color:#111; font-size:22pt; }
  .htn-tel__note{ color:#333; } .htn-signal{ color:#111; }
  .htn-sec{ padding-top:14pt; }
  .htn-sit{ border:1px solid #bbb; background:#fff; break-inside:avoid; margin-bottom:10pt; }
  .htn-sit>summary{ padding:8pt 10pt 2pt; }
  .htn-sit__body{ display:block !important; padding:0 10pt 10pt; }
  .htn-sit__caret{ display:none; }
  .htn-sit__t, .htn-sit__t .n{ color:#111; }
  .htn-listk{ color:#111 !important; }
  .htn-list li{ color:#111; font-size:10.5pt; padding-left:20pt; }
  .htn-list--do li::before, .htn-list--dont li::before{ content:"☐"; color:#111; font-size:11pt; top:0; }
  .htn-rule{ border-color:#bbb; border-left-color:#555; background:#fff; color:#111; }
}
/* akordeon: bez JS-a i u štampi sve mora biti otvoreno — details[open] pokriva no-JS;
   štampa dodatno forsira telo iznad. */
.htn-sit__body{ }

@media (prefers-reduced-motion:reduce){ body.page-hitno *{ transition:none !important; } }
@media (min-width:821px){ html:has(body.page-hitno){ overflow-x:clip; } }
body.page-hitno main{ overflow-x:visible; }
@media (max-width:767px){ body.page-hitno .enc-ftr{ display:none; } body.page-hitno main{ padding-bottom:calc(48px + env(safe-area-inset-bottom,0px)); } }