/* ==========================================================================
   PRELAZ IZMEDJU STRANA

   Pavle, 27.08.2026: „između svih stranica dodaj smooth tranziciju", dakle
   prelaz sa strane na stranu kad se klikne veza, ne animacija unutar strane.

   `@view-transition` MORA biti prva stvar u ovom fajlu (komentari se ne
   racunaju, pravila posle njega bi ga ucinila nevazecim): sa
   `navigation: auto` se prelaz ukljucuje sam, za svaku navigaciju unutar
   istog porekla, bez ijedne linije JavaScripta. Pregledac koji ga ne poznaje
   (stariji Safari, Firefox) ovo pravilo prosto preskoci i ide bez animacije;
   to je ispravna degradacija, ne kvar.
   ========================================================================== */
@view-transition {
	navigation: auto;
}

/* Prelaz je tih i kratak: pretapanje cele strane, bez pomeranja i bez
   skaliranja - to je vec podrazumevano ponasanje pregledaca za ime `root`,
   ovde se samo skracuje trajanje i menja kriva na istu vrstu krive kao
   prekidac teme (`--prelaz-teme` u `tokeni.css`). Sajt je za roditelje koji
   biraju kurs, ne portfolio koji se hvali pokretom, pa nema ni pomeranja ni
   uvecanja cele strane. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .22s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Ponovljeno ovde iako dole u fajlu vec postoji `prefers-reduced-motion`
   blok: taj blok gasi pokret na `*, *::before, *::after`, a ova dva
   pseudoelementa nisu potomci nijednog elementa na strani nego
   pregledacev sopstveni sloj za prelaz, pa taj selektor ne stize do njih. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* ==========================================================================
   OSNOVA

   Slog, boja, traka, i sitan pribor koji se ponavlja na svakoj strani:
   sekcija, dugme, kartica, bedz, mreza, pojas. Nijedna pojedinacna sekcija se
   ovde ne crta; svaka dobija svoj list.

   PRAVILA KOJA VAZE OD PRVOG DANA, jer su vec placena merenjem u N1a:
     - pod od 14 px na slovima do 980 px
     - dodirna meta 44 px po obe strane (ADR-0005)
     - `:hover` samo pod `@media (hover: hover)`, da dodir ne zaglavi stanje
     - `prefers-reduced-motion` gasi svaki pokret
   Ta cetiri nisu stvar izgleda nego ispravnosti, pa se ne pregovaraju iznova.

   SENKI NEMA, namerno. `klikercentar.rs` nema nijednu, `dic.rs` samo tvrde
   bez zamucenja. Karticu odvaja obris od 1 px, ne senka. Ko dopise
   `box-shadow`, dopisuje i razlog.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

/* Bez sivo-crnog pravougaonika koji telefon crta preko svega sto se dodirne,
   od 11.09.2026 (Pavle: „izgleda out of place na ovom clean sajtu"). Stanje
   dodira i dalje nose `:hover` i `:focus-visible` iz ovog lista, pa tastatura
   i dalje vidi gde je. */
html { -webkit-tap-highlight-color: transparent; }

/* Podnozje na dnu prozora i kad strana ima malo sadrzaja. Bez ovoga visi na
   sredini i cita se kao kvar, a ne kao kratka strana. Elementorov sablon
   ispisuje telo kao neposredno dete `body`-ja, izmedju zaglavlja i podnozja,
   pa je ono taj clan koji raste. */
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--podloga);
	color: var(--tekst);
	font-family: var(--font-tekst);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.podnozje { margin-top: auto; }

/* ---------- Slog ---------- */

h1, h2, h3, h4 {
	font-family: var(--font-naslov);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.375rem); font-weight: 700; letter-spacing: -.008em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1em; max-width: var(--mera); }

a { color: inherit; text-underline-offset: .18em; }

img { max-width: 100%; height: auto; display: block; }

/* `hidden` MORA da pobedi klasu koja postavlja `display`.
   Pravilo pregledaca `[hidden] { display: none }` je specificnosti (0,1,0),
   isto kao `.kodi__kontrole`, ali stize iz njegovog lista pa ga svaki nas list
   nadjaca. Element je tada skriven za citac ekrana i za tabulator, a i dalje
   se vidi: najgori moguci ishod, jer se u kodu cita kao „skriveno".

   Nadjeno 30.08.2026. na Kodijevim kontrolama. Stajale su `hidden` od prvog
   dana, a bile na ekranu; primetilo se tek kad je trazeno da ih na prvom
   pitanju nema. `!important` je ovde tacan alat, ne precica: `hidden` je
   izjava da elementa NEMA, i nijedno pravilo izgleda je ne sme oboriti. */
[hidden] { display: none !important; }

/* Nadnaslov iznad naslova sekcije. Jedini element koji nosi verzal, i to na
   15 px, iznad poda od 14. */
.nad {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--akcenat-tamni);
}

.uvod {
	font-size: 19px;
	color: var(--tekst-blagi);
	max-width: 52ch;
}

/* Tekst koji citac ekrana cuje a oko ne vidi. NE `display: none` i NE
   `visibility: hidden`: oba sklanjaju element i iz stabla pristupacnosti, pa
   bi legenda filtera na blogu nestala i za citaca. Kvacica filtera nosi ovu
   klasu, a vidi se njen `<label>`.

   `clip-path` umesto starog `clip`: `clip` je zastareo i u nekim pregledacima
   izlazi iz izracuna, a rezultat je isti pravougaonik od jednog piksela. */
.samo-citac {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* Veza koju vidi samo tastatura, do glavnog sadrzaja. */
.preskoci {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 18px;
	background: var(--podloga-tamna);
	color: var(--bela);
	border-radius: 0 0 10px 0;
}
.preskoci:focus { left: 0; }

/* OVDE TAMNA PODLOGA NE MENJA PRSTEN, i to je jedini izuzetak od pravila
   „ko farba tamno, taj javi prsten". Razlika je gde prsten PADNE.

   Tamna SEKCIJA je povrsina: dugme u njoj je okruzeno njome, pa mu prsten
   lezi na mornarskoj i zuto na njoj daje 7,15:1. Ova veza je suprotno,
   plocica: prsten se crta 2 px IZVAN njene kutije, dakle na beloj strani iza
   nje. Izmereno 27.08.2026: zuto na beloj daje 1,53:1, plavo 4,86:1.

   Merilo je prosto: da li fokusirani element STOJI na toj tamnoj podlozi ili
   je on sam ta podloga. */

/* ---------- Traka: srednji pojas ----------
   Siri kutije, ne slog; duzinu reda drzi `--mera`. */
.traka {
	width: 100%;
	max-width: var(--traka);
	margin-inline: auto;
	padding-inline: var(--traka-ivica);
}

/* ---------- Sekcija ----------
   Tri razmaka i cetiri podloge, i to je ceo spisak. Isti spisak Milica bira
   u editoru, pa ovde ne sme da postoji peta vrednost koju ona ne vidi. */
.sekcija { padding-block: var(--ritam); }
.sekcija--mali { padding-block: var(--ritam-mali); }
.sekcija--veliki { padding-block: var(--ritam-veliki); }

.sekcija--mirna { background: var(--podloga-mirna); }

.sekcija--tamna {
	background: var(--podloga-tamna);
	/* Ko farba tamno, taj javi i boju prstena. Vidi `osnova.css`. */
	--prsten: var(--istaknuto);
	color: var(--tekst-na-tamnom);
}
.sekcija--tamna h1,
.sekcija--tamna h2,
.sekcija--tamna h3 { color: var(--bela); }
.sekcija--tamna .nad { color: var(--istaknuto); }
.sekcija--tamna .uvod { color: var(--tekst-na-tamnom-blagi); }

/* Zuta sekcija je jedina puna topla povrsina na strani. Slovo na njoj je
   uvek mornarsko, 7,16:1, i ne menja se sa temom, jer i sama podloga ostaje
   topla u obe. */
.sekcija--zuta {
	background: var(--istaknuto);
	color: var(--podloga-tamna);
}
.sekcija--zuta h1,
.sekcija--zuta h2,
.sekcija--zuta h3 { color: var(--podloga-tamna); }
.sekcija--zuta .nad { color: var(--podloga-tamna); }
.sekcija--zuta .uvod { color: var(--tekst-na-zutom); }

/* ---------- Dugme ----------
   Pilula, kao na sva cetiri uzorna sajta (dic 99 px, kliker 50, yettel 25).
   Visina 54 je iznad dodirnog minimuma od 44, pa `@media (pointer: coarse)`
   nize ovde nista ne menja. */
.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 30px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--dugme-podloga);
	color: var(--bela);
	font: 700 18px/1 var(--font-tekst);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.dugme--sporedno {
	background: transparent;
	color: var(--tekst);
	border-color: var(--crta-jaka);
}

/* Na tamnoj podlozi zuto dugme, jer plavo na mornarskoj daje 2,4:1 i gubi se. */
.dugme--na-tamnom {
	background: var(--istaknuto);
	color: var(--podloga-tamna);
}

/* Na zutoj podlozi mornarsko dugme, bela na njemu 10,97:1. */
.dugme--na-zutom {
	background: var(--podloga-tamna);
	color: var(--bela);
}

.dugme--malo {
	min-height: 44px;
	padding: 0 22px;
	font-size: 16px;
}

/* Tamna tema: plava je svetlija, pa bela na njoj pada na 3,4:1. Slovo zato
   ide tamno. */
[data-tema="tamna"] .dugme { color: var(--mrak); }
[data-tema="tamna"] .dugme--sporedno { color: var(--tekst); background: transparent; }
[data-tema="tamna"] .dugme--na-zutom { color: var(--bela); }

@media (hover: hover) {
	.dugme:hover { background: var(--dugme-podloga-jaca); }
	.dugme--sporedno:hover { background: transparent; border-color: var(--tekst); }
	.dugme--na-tamnom:hover { background: var(--istaknuto-jaci); }
	.dugme--na-zutom:hover { background: var(--dugme-na-zutom-jaci); }
}

/* ---------- Kartica ---------- */
.kartica {
	display: flex;
	flex-direction: column;
	background: var(--podloga);
	border: 1px solid var(--crta);
	border-radius: var(--radius-kartica);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}

[data-tema="tamna"] .kartica { background: var(--podloga-mirna); }

.kartica__slika {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Naslov kartice nosi klasu, ne rang. Rang se menja sa dubinom: pod `h3`
   grupe na `/kursevi/` je `h4`, a pod `h2` sekcije „Sta dolazi posle" je `h3`.
   Do 27.08.2026. je ovo pravilo stajalo u `kursevi.css` i bilo vezano za
   `.zmijica__grupa`, pa je ista kartica na strani kursa ostajala bez njega:
   `kursevi.css` se tamo i ne ucitava. */
.kartica__naslov {
	margin: 0 0 8px;
	font-size: 1.15rem;
	line-height: 1.2;
}

/* Red bedzeva. `max-width` pada jer je ovo `p`, a mera pasusa bi ga presekla
   pre nego sto se drugi bedz prelomi.

   SELEKTOR NOSI I `.kartica`, iako je klasa oznaka dovoljna da ih nadje.
   Razlog je `.kartica__telo p` nize u ovom listu: ono je specificnije od same
   klase i dalo bi razmak od 18 px umesto 12. */
.kartica .kartica__oznake {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: none;
	margin: 0 0 12px;
}
/* `.bedz` nosi svoj donji razmak, jer ume da stoji sam iznad naslova. U redu
   oznaka razmak drzi `gap`; da mu je margina ostala, drugi red bedzeva bi pao
   12 px nize od prvog. */
.kartica .kartica__oznake .bedz { margin-bottom: 0; }

.kartica__telo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 24px;
}

.kartica__telo p {
	margin-bottom: 18px;
	font-size: 16px;
	color: var(--tekst-blagi);
}

.kartica__dno {
	margin-top: auto;
	font-size: 16px;
	font-weight: 700;
	color: var(--akcenat-tamni);
}

@media (hover: hover) {
	.kartica:hover {
		border-color: var(--akcenat-tamni);
		transform: translateY(-2px);
	}

	/* Kartica bez adrese (program u pripremi) nije veza, pa ne sme da se
	   ponasa kao veza. */
	div.kartica:hover {
		border-color: var(--crta);
		transform: none;
	}
}

/* ---------- Bedz uzrasta ----------
   Jedino mesto gde zuta stoji van svoje sekcije. */
.bedz {
	align-self: flex-start;
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--istaknuto);
	color: var(--podloga-tamna);
	font-size: 14px;
	font-weight: 700;
}

/* „USKORO" JE ZUTO, od 08.09.2026 (Pavle: „ovo da bude zuto"). Do tada je
   nosilo tihu varijantu, jer je 26.08. uz njega na kartici stajao i uzrast, pa
   bi dve zute oznake jedna do druge tvrdile da je „Uskoro" razred. Taj par je
   ukinut 01.09: kartica programa u pripremi nosi samo „Uskoro" (`elseif` u
   `sekcije/zmijica.php`), pa razloga za obris vise nema.

   Tiha varijanta ostaje, koristi je jos spisak rubrika na blogu. */
.bedz--tih {
	background: transparent;
	border: 1px solid var(--crta-jaka);
	color: var(--tekst-blagi);
}

/* ---------- Mreza ---------- */
.mreza {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(4, 1fr);
}
.mreza--3 { grid-template-columns: repeat(3, 1fr); }
.mreza--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 980px) {
	.mreza,
	.mreza--3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
	.mreza,
	.mreza--3,
	.mreza--2 { grid-template-columns: 1fr; }
}

/* OVDE JE STAJAO POJAS CINJENICA, uzak red brojeva bez naslova („15 programa"
   i ostalo). Sam pojas je skinut sa pocetne 27.08.2026, rezerva je u
   `backup/pojas-2026-08-27/`, a cetiri pravila i crtez `sekcije/pojas.php` su
   ostali i stajali do 11.09.2026. Nijedan zapis u `_elementor_data` ga ne
   trazi i nijedan widget ga ne registruje. */

/* ---------- Cetiri pravila iz N1a ---------- */

/* Pod od 14 px. Ispod 980 px nijedan tekst ne sme nize; izmereno u N1a,
   izvestaj `2026-08-24-ograda-hovera-i-pod-slova.md`. */
@media (max-width: 980px) {
	body, p, li, td, th, label, input, textarea, select, button, small {
		font-size: max(14px, 1em);
	}
}

/* Dodirna meta 44 px. Vodoravna ispuna zone pogotka gura element van
   roditelja, sto je u N1a nezavisno naslo tri sesije; zato `min-height` i
   poravnanje, a ne `padding`. */
@media (pointer: coarse) {
	a, button, [role="button"], input[type="submit"] {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Prva sekcija na strani ----------
   Razmak od zaglavlja do prve sekcije mora da bude isti na svakoj strani, i to
   onaj sa pocetne (Pavle, 29.08.2026). Mera je `--ritam-mali`, dakle 72 px na
   sirokom i 44 px na uskom ekranu.

   Pre izmene je izmereno na 1900 px: pocetna 72 px, a `/kursevi/`, `/o-nama/`,
   `/predavaci/`, `/kontakt/`, `/prijava/` i strana kursa svih sest po 104 px.
   Uzrok nije bio u CSS-u nego u tome ko crta stranu: pocetna zove heroja iz
   `front-page.php` sa `razmak => mali`, a Elementorov widget uzima „srednji"
   iz baze.

   Klasu `sekcija--prva` dodeljuje `procoding_nova_klase_sekcije()`, prvoj
   sekciji koju strana nacrta. Ovde stoji samo posledica. Donji razmak se NE
   dira: on pripada odnosu prema sledecoj sekciji, a ne vrhu strane. */
/* 01.10.2026, klijentkinja: razmak od zaglavlja do prve sekcije smanjen sa
   `--ritam-mali` (72/44 px) na oko 20 px, na svim stranama. Isti razmak sada
   dobijaju i strane koje ne prolaze kroz `procoding_nova_klase_sekcije()`:
   clanak (`.objava`), predavac, rubrika, pretraga i 404. */
#sadrzaj .sekcija--prva,
#sadrzaj > .sekcija:first-child,
#sadrzaj > .objava:first-child { padding-top: var(--vrh-strane); }
:root { --vrh-strane: clamp(16px, 1.4vw, 24px); }

/* SEKCIJA ISPOD UVODA STRANE, od 08.09.2026. Uvod je naslov i jedna recenica;
   sledeca sekcija nastavlja isti blok, pa ne uzima ceo ritam. Zasto se to zna
   u PHP-u a ne ovde, stoji uz oznaku u `sekcije/pribor.php`.
   `/predavaci/` je uzi slucaj i ostaje na svojih 24 px, jer tamo ispod uvoda
   ide odmah drugi naslov, bez pasusa izmedju (razlog u `predavaci.css`). */
.sekcija--posle-uvoda { padding-top: 40px; }

/* ---------- Sidro ne zavrsava ispod zaglavlja ----------
   Zaglavlje je lepljivo i visoko 77 px, pa je pregledac dovodio cilj na
   koordinatu 0 i traka ga je prekrivala. Izmereno 29.08.2026: naslov
   „Predskolci" je posle klika na karticu sa pocetne stajao na y = 0, dakle
   ceo pod zaglavljem.

   Pravilo je po ID-u, ne po spisku sekcija, i to je namerno: sidro na
   `/kursevi/` postoji na segmentu, na grupi i (od 29.08.) na svakoj kartici
   kursa, a sutra ce postojati i negde gde ovaj fajl ne zna. Spisak selektora
   bi zastario, `[id]` ne moze. `scroll-margin` deluje SAMO kad se do elementa
   stize skrolovanjem, pa nista drugo na strani ne pomera.

   `#sadrzaj` je granica: sidra u zaglavlju i podnozju („preskoci na sadrzaj")
   ne treba da nose ovaj odmak. */
#sadrzaj [id] { scroll-margin-top: var(--sidro-odmak); }

/* ---------- Veza u tekstu ----------
   Sporedan poziv koji nije dugme: „Kako izgleda čas" pored prijave, veza sa
   kartice ishoda, linkovi koje Milica ukuca u odgovor na pitanje.

   Stoji u `osnova.css` a ne u listu jedne porodice, jer je istu vezu trazio
   i kurs i sve sto posle njega dodje. Preseljeno iz `kurs.css` 26.08.2026.

   Podvlaka je obavezna: plava na beloj je 3,22:1, sto je ispod 4,5 za sitno
   slovo, pa boja sama ne sme da nosi znacenje veze.

   `#sadrzaj` NIJE UKRAS. `.elementor a { text-decoration: none }` je iste
   tezine kao `.veza` a stize kasnije u red, pa je gasi. Do 30.08.2026. je
   podvlake nije bilo ni na jednoj strani kursa, i to se nije videlo jer se
   veza i dalje razlikovala bojom, onom istom koja je 3,22:1. Ceo slucaj je
   opisan u `docs/NAUCENO.md`, „Elementorov reset gasi ono sto tema trazi". */
#sadrzaj .veza {
	display: inline-flex;
	align-items: center;
	color: var(--akcenat-tamni);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* ---------- Meta od 44 px koja ne pomera nista ----------
   Tekstualna veza je visoka koliko i njen red, oko 26 px. Prst trazi 44
   (WCAG 2.5.8), a povecanje visine bi razmaklo kartice i putanju na svih 19
   strana kurseva.

   Zato meta raste PODLOGOM a raspored se vraca negativnom marginom: kutija
   koju prst pogadja postaje 44 px, a kutija koju raspored broji ostaje ista.
   Merenje 27.08.2026, `/programiranje-u-pythonu/` na 1024 px: red kartice
   ostaje na istoj visini, a `offsetHeight` veze ide sa 30 na 44.

   Nije za veze U RECENICI. Tamo se mete preklapaju sa susednim redom, a WCAG
   ih izuzima bas zato sto im visinu drzi prored okolnog teksta. */
:where(.veza, .putanja a, .koraci__telefon) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: calc((1lh - 44px) / 2);
}

/* Veza koja je CELA stavka spiska nema recenicu oko sebe, pa izuzetak WCAG
   2.5.8 „Inline" na nju ne vazi: ona je meta za prst kao i dugme. Bez ovoga
   je bila 23 px visoka, izmereno 27.08.2026. na `/arhiva/`, 58 nalaza na
   sedam sirina.

   `:not([class])` je granica koja deli sadrzaj od gradje: kartica, dugme i
   stavka menija uvek nose klasu, a veza koju je neko otkucao u tekstu nikad.
   Spisak selektora bi ovde zastario, ovo ne moze. */
#sadrzaj :is(p, li) > a:only-child:not([class]) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: calc((1lh - 44px) / 2);
}

/* Obrazac za lozinku koji WordPress crta sam, na zakljucanoj strani. Polje i
   dugme su izlazili 26 px visoki, izmereno 27.08.2026. na
   `/materijal-za-scratch-nivo-1/`. Tema ga nikad nije ni videla, jer je to
   jedina strana koja ga trazi.

   Ne prepisuje se markup nego se oblici uzimaju odavde: isti su kao na svakom
   drugom polju i dugmetu na sajtu, samo ih WordPress ispisuje bez nasih klasa. */
.post-password-form input[type="password"],
.post-password-form input[type="submit"] {
	min-height: 44px;
	padding: 10px 16px;
	border-radius: var(--radius-polje);
	font: inherit;
}

.post-password-form input[type="password"] {
	border: 2px solid var(--crta-jaka);
	background: var(--podloga);
	color: var(--tekst);
}

.post-password-form input[type="submit"] {
	border: 0;
	background: var(--dugme-podloga);
	color: var(--bela);
	font-weight: 700;
	cursor: pointer;
}

@media (hover: hover) {
	.post-password-form input[type="submit"]:hover { background: var(--dugme-podloga-jaca); }
}

@media (hover: hover) {
	.veza:hover { color: var(--akcenat-tamni); }
}

.sekcija--tamna .veza { color: var(--istaknuto); }

/* ==========================================================================
   ZMIJICA

   ZASTO JE SEKCIJA IPAK OVDE
   Zaglavlje ovog fajla kaze da se pojedinacna sekcija u njemu ne crta, i to
   pravilo i dalje vazi. Zmijica je izuzetak sa razlogom: ista sekcija stoji na
   dve porodice strana, na pocetnoj i na `/kursevi/`, a listovi porodica se
   ucitavaju po strani, pa jedan drugog ne vide. Do 26.08.2026. je blok zato
   stajao dvaput, u `pocetna.css` i u `kursevi.css`. Dva mesta koja dele CSS
   moraju da dele i markup, a to se u ovom projektu vec jednom raspalo
   (`docs/NAUCENO.md`, ista traka u dva heroja). Ovde stoji jednom.

   STA CRTA
   Talas sa cvorovima u pojasu od 300 px. Koraci naizmence idu iznad i ispod
   linije, pa pet natpisa stane u sirinu koja bi u jednom redu primila tri.
   Ispod 900 px talas se gasi i koraci postaju uspravan spisak.
   Odluka: `docs/adr/0019-svet-novog-dizajna.md`.
   ========================================================================== */

/* Razmak iznad talasa je 56, a ne 20 px, i to je izmerena vrednost. Cvor sme
   da nosi puno ime programa („Kreativno programiranje u Scratch-u"), a takav
   natpis na 1440 px ide u tri reda i penje se 46 px iznad pojasa, jer stoji
   `position: absolute` sa `bottom: 100%`. Sa 20 px bi dodirnuo uvod sekcije.
   Vrednost je zajednicka objema stranama namerno: pocetna danas ima kratka
   imena, ali ih Milica sme produziti, a razmak po strani bi znacio da se kvar
   pojavi tek posle njenog unosa. */
.zmija {
	position: relative;
	height: 300px;
	margin-top: 56px;
}

/* Talas je ukras i nosi `aria-hidden`. Zato sme da se ugasi ispod 900 px bez
   ijednog izgubljenog podatka. */
.zmija__talas {
	position: absolute;
	left: 6%;
	right: 6%;
	top: 60px;
	height: 140px;
}

.zmija__talas svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* `color` i `text-decoration` stoje ovde zato sto korak ume da bude `<a>`: kad
   kurs ima svoju stranu, ceo cvor je veza. Bez njih bi natpis dobio plavu boju
   i podvlaku iz podrazumevanog stila veze. */
.zmija__korak {
	position: absolute;
	width: 168px;
	transform: translateX(-50%);
	text-align: center;
	color: inherit;
	text-decoration: none;
}

/* Preko sest koraka natpisi sa iste strane linije stoje na 901 px oko 180 px
   jedan od drugog, a sirok natpis je 168, pa bi se dodirivali. Suzenje je
   jedina izmena; slog i pojas ostaju isti, da se dve zmijice na sajtu ne bi
   razisle po velicini. */
.zmija--gusta .zmija__korak { width: 150px; }

.zmija__tacka {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	/* Centriranje resetkom, ne `line-height`-om: od 02.09.2026. u krugu stoji
	   crtez, a njega vodoravna sredina reda ne dodiruje. Broj se i dalje
	   centrira isto, pa fajlovi koji ikonicu nemaju ne menjaju izgled. */
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 3px solid var(--akcenat);
	background: var(--podloga);
	/* Tamnija plava, ne `--akcenat`: broj u krugu je slovo, a `--akcenat` na
	   beloj daje 3,22:1. Isti razlog i ista vrednost kao kod `.veza` iznad.
	   Ivica kruga sme da ostane `--akcenat`, jer je ona oblik a ne slovo. */
	color: var(--akcenat-tamni);
	font: 800 20px/50px var(--font-naslov);
	/* Broj se centrira sam, ne preko roditelja: ispod 900 px korak dobija
	   `text-align: left`, pa bi broj bez ovoga stao uz levu ivicu kruga. */
	text-align: center;
	transition: background .18s ease, border-color .18s ease, color .18s ease,
		translate .18s ease;
}

/* IKONICA U CVORU, 02.09.2026. Milicini crtezi umesto rednog broja. Krug je
   56 px sa ivicom od 3, dakle 50 px unutra; 38 px visine ostavlja po 6 px sa
   svake strane. Sirina se ne zadaje nego prati odnos strana, pa robot koji je
   siri nego visi ne izlazi iz kruga: njega zaustavlja `max-width`.

   Peti crtez je inline SVG i uzima boju kruga (`fill="currentColor"` stoji u
   samom fajlu), pa je bela na punom cvoru cilja i tamnoplava na ostalima. */
.zmija__ikona {
	/* TVRD OKVIR PLUS `object-fit`, ne `width: auto`. Slika nosi `loading`
	   „lazy", a dok se ne ucita nema svoju meru; `width: auto` je jaci od
	   atributa `width`, pa je krug do ucitavanja drzao praznu ikonicu od 0x0.
	   Izmereno 02.09.2026. sondom na pocetnoj: sva cetiri crteza 0x0.

	   36x34, ne 40x38, od 03.09.2026. Krug je 56 px sa ivicom od 3, dakle 50 px
	   unutra, pa mu je poluprecnik 25. Kvadratna ikonica u polju 40x38 se crta
	   kao 38x38 i njen ugao je na 26,9 px od sredine, dakle IZVAN kruga; tri od
	   pet crteza su tako secle plavi prsten. Racun po crtezu, u polju 40x38:
	   robot 24,3 (jedini je prolazio), LEGO 26,6, Scratch 25,6, Python 26,9.
	   U polju 36x34 najgori slucaj je kvadrat, 34x34, ugao na 24,0. */
	width: 36px;
	height: 34px;
	object-fit: contain;
}

.zmija__tacka > svg {
	width: auto;
	height: 34px;
}

/* POSLEDNJI KORAK VISE NIJE PUN, od 03.09.2026 (Pavle: „obrni da bude plav na
   beloj pozadini da bude kao ostali").

   Do tada je krug cilja bio ispunjen plavom, a crtez u njemu beo, i to je bila
   jedina razlika medju cvorovima: dotle se stize. Sa Milicinim crtezima ta
   razlika prestaje da radi. Cetiri crteza su rasterske slike sa svojim bojama i
   na punom krugu se ne menjaju; peti je SVG na `currentColor`, pa se JEDINI
   okrece u belo. Ishod je bio pet crteza od kojih jedan izgleda kao da je iz
   drugog kompleta.

   Klasa `zmija__korak--cilj` ostaje u markupu. Ona kaze koji je korak
   poslednji, a to je podatak; danas ga nijedno pravilo ne koristi, ali ce
   trebati cim cilj dobije oznaku koja se ne tuce sa crtezima.

   Ovde je stajalo i `[data-tema="tamna"] ... { color: var(--mrak); }`, jer je
   bela na svetlijoj plavoj tamne teme padala na 3,4:1. Bez pune podloge tog
   racuna vise nema: crtez je `--akcenat-tamni` na `--podloga`, kao i na
   ostalim cvorovima. */

.zmija__natpis b { display: block; font: 700 16px/1.25 var(--font-tekst); }
.zmija__natpis span { font-size: 14px; color: var(--tekst-blagi); }

/* Naizmenicno iznad i ispod linije: pet natpisa tako stane u sirinu koja bi u
   jednom redu primila tri. */
.zmija__korak--gore { top: 46px; }
.zmija__korak--gore .zmija__natpis {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	margin-bottom: 10px;
}

.zmija__korak--dole { top: 158px; }
.zmija__korak--dole .zmija__natpis { margin-top: 10px; }

/* Cvor koji je veza. Na pocetnoj koraci nemaju adresu i ostaju `div`; na
   `/kursevi/` svaki vodi na svoj program, pa mora da se vidi da je klikabilan.
   Obris fokusa je izvan kruga, jer bi ga unutra progutao `border-radius`. */
a.zmija__korak:focus-visible {
	outline: 3px solid var(--akcenat);
	outline-offset: 4px;
	border-radius: 12px;
}

/* HOVER NE PUNI KRUG, od 03.09.2026 (Pavle: „popravi hover scratch ikonice").

   Do tada se pod misem krug punio plavom, a slovo je postajalo belo. To radi
   dok je u krugu BROJ, jer se broj boji. Otkako su u krugu Milicini crtezi, ne
   radi: cetiri od pet su rasterske slike sa svojim bojama, pa je narandzasti
   Scratch macak ostajao narandzast na plavoj podlozi. Belo slovo je jedina
   stvar koja se menjala, a njega tamo vise nema.

   POD SE NE MENJA UOPSTE, od 03.09.2026 popodne (Pavle: „na tamnoj isto ne
   valja kao ranije na hoveru"). Prvi pokusaj je pod misem podlogu kruga
   prebacivao na `--podloga-mirna`. Na svetloj temi je to #f2f6f9 na beloj, a
   na tamnoj #1b2430 na #141c26: odnos svetlina 1,11 prema 1,51. Ista
   deklaracija, u tamnoj temi upola jaci potez, pa je krug dobijao sivi disk
   iza crteza i izgledao ispunjeno, tacno ono sto je hover i trebalo da
   prestane da radi.

   Ostaju tri znaka koja podlogu ne diraju: prsten dobija boju veceg kontrasta
   (u obe teme `--akcenat-tamni`, na svetloj tamniju a na tamnoj svetliju od
   `--akcenat`), cvor se podigne 2 px kao i kartica pod misem, natpis se
   podvlaci. Podizanje ide kroz `translate`, a ne kroz `transform`: `transform`
   na koraku vec drzi `translateX(-50%)`. */
@media (hover: hover) {
	a.zmija__korak:hover .zmija__tacka {
		border-color: var(--akcenat-tamni);
		translate: 0 -2px;
	}

	a.zmija__korak:hover .zmija__natpis b { text-decoration: underline; }
}

/* 900 NIJE IMENOVANI PRELOM, mereno 30.08.2026. Ovo nije prag rasporeda
   strane nego trenutak kad pet natpisa zmijice prestanu da staju u jedan
   vodoravni red. Na 980 bi zmijica pala u uspravni spisak jos 80 px ranije
   nego sto mora: visina zmijice 300 -> 352 px, strana 4852 -> 4867 px na
   980, isto na 940 i 901, preliva nema ni u jednom slucaju. Vodoravni
   raspored tu jos staje, pa se ne gubi. Broj se ukida tek kad uslov
   prestane da bude sirina ekrana i postane sirina same zmijice, dakle
   `@container`. Isti slucaj kao `linija.css` 900 iz ADR-0004. */
@media (max-width: 900px) {
	.zmija {
		display: grid;
		gap: 18px;
		height: auto;
		margin-top: 8px;
	}
	.zmija__talas { display: none; }
	/* `left` iz ispisa ovde nema efekta jer korak vise nije apsolutan; broj i
	   natpis postaju dve kolone jednog reda. Sirina se vraca na `auto` i za
	   gustu zmijicu, jer u spisku nema susednog natpisa da je stisne. */
	.zmija__korak,
	.zmija--gusta .zmija__korak {
		position: static;
		display: grid;
		grid-template-columns: 56px 1fr;
		gap: 16px;
		align-items: center;
		width: auto;
		transform: none;
		text-align: left;
	}
	.zmija__korak--gore .zmija__natpis,
	.zmija__korak--dole .zmija__natpis {
		position: static;
		margin: 0;
	}

	/* LINIJA KOJA SPAJA CVOROVE, od 03.09.2026 (Pavle: „dodaj da nodeove
	   povezuje linija da bi izgledali kao deo celine"). Ispod 900 px se talas
	   gasi, pa je spisak do danas bio pet nepovezanih redova; a zmijica postoji
	   bas zato da se vidi da je to jedan put.

	   Ista crta kao u talasu iznad 900 px: 3 px, isprekidana 9 i 9, na 28 %
	   vidljivosti. Zapis je `repeating-linear-gradient`, jer je crta uspravna i
	   `border-style: dashed` bi joj dao korak koji zavisi od pregledaca.

	   Ide od sredine ovog kruga do sredine sledeceg. `top: 50%` je sredina reda,
	   a red je visok tacno koliko i krug (56 px), jer je natpis od dva reda 41
	   px pa krug uvek odlucuje. Visina je 50 % reda + razmak 18 + polovina
	   sledeceg kruga, i namerno prelazi par piksela: krug je neproziran i
	   pokriva kraj crte. */
	/* CRTA VISI O KRUGU, NE O KORAKU. Korak je iznad 900 px `position: absolute`
	   sa `left` upisanim u sam element, a `left` iz atributa je jaci od svakog
	   pravila u listu. Kad je korak 03.09.2026. na trenutak dobio
	   `position: relative` ovde, vratila su se i ta dva `left` i `top`, pa se
	   spisak razleteo dijagonalno. Krug nema ni jedno ni drugo, pa je on nosac. */
	.zmija__tacka { position: relative; }

	.zmija__korak:not(:last-child) .zmija__tacka::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		width: 3px;
		height: 18px;
		margin-left: -1.5px;
		/* PUNA, NE ISPREKIDANA, iako je talas iznad 900 px isprekidan. Talas je
		   dug preko hiljadu piksela pa u njemu stane dvadesetak crtica; ovde je
		   razmak izmedju dva kruga 18 px, u koji stane jedna crtica i jedna
		   rupa, a to se ne cita kao linija nego kao mrlja. Boja i vidljivost su
		   iste kao kod talasa, pa je i utisak isti. */
		background: currentColor;
		opacity: .28;
	}
}

/* ==========================================================================
   ULAZ PRI PRVOM SKROLU, 03.09.2026.

   Pavle: „napravi da kada prvi put skrolujes niz stranicu da ima fade in koji
   je smooth umesto da je vec sve ucitano".

   KLASA `pc-pokret` STOJI NA `<html>` I POSTAVLJA JE SKRIPTA. Bez nje nijedno
   pravilo odavde ne vazi, pa je strana cela i neprozirna i kad JS ne stigne.
   Redosled je namerno takav; obrnut („sakrij u CSS-u, otkrij JS-om") obara ceo
   sajt kad skripta zakaze. Pravilo je iz `docs/pravila/ANIMACIJE.md`.

   POMERA SE `translate`, NE `transform`. Cvor zmijice stoji na
   `translateX(-50%)`, kartica se pod misem podize za 2 px. Da ulaz pise u
   `transform`, ta dva bi nestala dok ulaz traje i posle njega. Zasebno
   svojstvo `translate` se slaze SA `transform`-om, pa se ne dodiruju.

   ODLAGANJE PO SUSEDU racuna skripta i upisuje ga kao `--pc-red`, broj od 0 do
   5. Peta kartica u redu krece 300 ms posle prve; dalje se ne broji, jer se
   duze cekanje ne cita kao red nego kao kasnjenje.
   ========================================================================== */
.pc-pokret .pc-ulaz {
	opacity: 0;
	translate: 0 18px;
	transition:
		opacity .5s cubic-bezier(.16, 1, .3, 1),
		translate .5s cubic-bezier(.16, 1, .3, 1);
	transition-delay: calc(var(--pc-red, 0) * 60ms);
}

.pc-pokret .pc-ulaz.pc-javi {
	opacity: 1;
	translate: none;
}

/* Dvostruka brana: skripta se i sama gasi pod ovim upitnikom, ali ako klasa
   ipak stigne (posetilac ukljuci opciju posle ucitavanja), ulaza nema. */
@media (prefers-reduced-motion: reduce) {
	.pc-pokret .pc-ulaz {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* `main` nosi `tabindex="-1"` da bi veza „Preskoci na sadrzaj" stvarno pomerila
   FOKUS, a ne samo pogled. Bez toga pregledac skroluje, adresa dobije
   `#sadrzaj`, a `document.activeElement` ostane `body`, pa sledeci taster Tab
   vrati posetioca na logotip i preskok ne ustedi nijednu stanicu. Izmereno
   27.08.2026. na svih devet sablona.

   Obris se sklanja jer taj cvor nije nista sto se bira; on je odrediste. */
main[tabindex="-1"]:focus { outline: none; }

/* POD ZA PRSTEN FOKUSA, od 27.08.2026.

   Do tada nijedno pravilo nije vazilo za SVE sto se bira: svaki list je nabrajao
   svoje elemente, a ko nije bio na spisku dobijao je urodjeni obris pregledaca.
   Izmereno `meri.mjs`: logotip i dugme „Prijavi dete" u zaglavlju su imali
   1,10:1 prema svojoj podlozi, na pragu od 3:1, i to na SVAKOJ strani sajta.
   Trideset nalaza na pocetnoj, isto toliko na `/kursevi/`, cetrdeset dva na
   `/o-nama/`.

   Uzrok nije bio ni jedan od ta dva elementa nego spisak: pravilo koje se pise
   po slucaju zastari cim neko doda element. Zato ovo nije zakrpa za dva
   selektora nego pod ispod svih.

   `:where()` NEMA SPECIFICNOST, i to je ovde cela poenta. Svako postojece
   pravilo za prsten ostaje jace i nastavlja da vazi kakvo jeste, ukljucujuci
   ona koja menjaju samo `outline-color` na tamnoj podlozi. Ovo hvata samo one
   koje niko nije naveo.

   BOJA JE `--akcenat-tamni`, ne `--akcenat`. Akcent daje 3,22:1 prema beloj,
   dakle prolazi za dve stotinke, a prema `--podloga-mirna` pada ispod praga.
   Tamniji akcent daje 5,30:1 na beloj i 4,88:1 na mirnoj. */
:where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--prsten);
	outline-offset: 2px;
}

/* Prsten fokusa na tamnoj i akcentnoj podlozi.
   Izmereno 27.08.2026: jedanaest dugmadi je imalo prsten od 1,74:1 prema
   svojoj podlozi, a prag je 3:1. Uzrok je isti kao kod slova: jedna boja
   prstena za dve suprotne podloge. `--istaknuto` na mornarskoj daje 7,15:1. */
/* PREPISUJE SE TOKEN, NE PRAVILO, i to NA MESTU GDE SE FARBA.

   Do 27.08.2026. je ovde stajao spisak od tri selektora. Spisak je istog dana
   narastao na pet i opet promasio: `.koraci__poziv` na stranama kurseva farba
   `--podloga-tamna` a nije bio na njemu, pa je telefon u njemu imao prsten od
   2,07:1. Isti kvar, treci put, samo drugi selektor.

   Zato deklaracija sada stoji uz svaki `background: var(--podloga-tamna)`, u
   istom pravilu: ko farba tamno, taj javi i boju prstena, a sve unutar te
   povrsine je nasledi ma koliko duboko bilo. Spisak ne moze da zastari, jer
   spiska vise nema.

   Ovde ostaje samo ono sto podlogu NE farba: dugme koje stoji NA tudjoj tamnoj
   povrsini i nosi svoju akcentnu boju. */
.dugme--na-tamnom { --prsten: var(--istaknuto); }

/* ==========================================================================
   NOVI IZGLED, 01.10.2026: manje beline
   Tri nezavisna dela, svaki sa svojom kvacicom u Customize → Procoding,
   izgled (`functions.php`). Kvacica dodaje klasu na `body`:
     `izgled-podloga`  siva podloga strane, bele kartice
     `izgled-pojas`    pojas uvoda: mornarski na Kursevima, Nasem timu, Blogu,
                       Prijavi, Cestim pitanjima, rubrikama i pretrazi; beli
                       na strani kursa i Kontaktu
     `izgled-poziv`    zuti poziv na prijavu pred podnozjem (`footer.php`)
   `?izgled=novi` u adresi ukljucuje sva tri samo u tom pregledacu, za probu
   pre odluke (klasa `izgled-novi` na `html`, vidi `header.php`).
   Tamna tema ima svoju podlogu i ovde se ne dira.
   ========================================================================== */
.poziv-traka { display: none; }

/* 1. Podloga */
html.izgled-novi:not([data-tema="tamna"]) body,
html:not([data-tema="tamna"]) body.izgled-podloga {
	--podloga-strane: #f3f6f9;
	--podloga-mirna: #e8eef4;
}
html.izgled-novi body,
body.izgled-podloga { background: var(--podloga-strane, var(--podloga)); }
/* Clanak ostaje na beloj: dug tekst se najlakse cita na najsvetlijoj
   podlozi, a belina tamo nije prazan prostor nego margina teksta. */
html.izgled-novi body.single-post,
body.izgled-podloga.single-post { background: var(--podloga); }

/* 2. Pojas uvoda */
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane {
	background: var(--podloga-tamna);
	color: var(--tekst-na-tamnom);
	--prsten: var(--istaknuto);
	padding-block: clamp(36px, 4.5vw, 64px);
}
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane :is(h1, h2) { color: var(--bela); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane :is(p, .uvod) { color: var(--tekst-na-tamnom-blagi); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane .nad { color: var(--istaknuto); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .sekcija--posle-uvoda { padding-top: var(--ritam-mali); }
/* Zaglavlje ostalih strana: isti mornarski pojas, ali samo iza naslova, ne
   iza cele prve sekcije (u njoj su i filteri, forma, pitanja). Pojas se siri
   do ivica ekrana preko `border-image`, bez izmene HTML-a, i penje se do
   zaglavlja preko razmaka `--vrh-strane`. Izlaz `border-image` ne pravi
   vodoravni klizac (to je „ink overflow"). */
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.blog > .traka > h1, .prijava__zaglavlje, .pitanja .kurs-zaglavlje, .spisak__vrh) {
	border-image: linear-gradient(var(--podloga-tamna) 0 0) fill 0 / / 0 100vw;
	margin-top: calc(-1 * var(--vrh-strane));
	padding-block: clamp(32px, 4vw, 56px);
	margin-bottom: clamp(28px, 3vw, 40px);
	color: var(--tekst-na-tamnom);
	--prsten: var(--istaknuto);
}
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.blog > .traka > h1, .prijava__zaglavlje h1, .pitanja .kurs-zaglavlje h1, .spisak__vrh h1) { color: var(--bela); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.prijava__zaglavlje, .spisak__vrh) p:not(.nad) { color: var(--tekst-na-tamnom-blagi); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.prijava__zaglavlje, .spisak__vrh) .nad { color: var(--istaknuto); }

/* Kontakt ima formu i mapu u prvoj sekciji, pa je, kao uvod kursa, bela
   povrs na sivoj strani. */
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .kontakt-vrh {
	background: var(--podloga);
	padding-bottom: var(--ritam-mali);
}

/* Uvod kursa je bela povrs: sa zaglavljem se cita kao celina, a sadrzaj
   kursa pocinje tamo gde pocinje podloga strane. */
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .kurs-uvod {
	background: var(--podloga);
	padding-bottom: var(--ritam-mali);
}

/* 3. Zuti poziv */
:is(html.izgled-novi, body.izgled-poziv) .poziv-traka {
	display: block;
	background: var(--istaknuto);
	color: var(--podloga-tamna);
	padding-block: clamp(32px, 4vw, 52px);
	--prsten: var(--podloga-tamna);
}
.poziv-traka__traka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}
.poziv-traka__naslov {
	margin: 0;
	color: var(--podloga-tamna);
	font-size: clamp(24px, 2.4vw, 32px);
}
.poziv-traka__tekst {
	margin: 8px 0 0;
	max-width: 56ch;
	color: var(--tekst-na-zutom);
}
.poziv-traka__dugmad { display: flex; flex-wrap: wrap; gap: 12px; }
.poziv-traka .poziv-traka__kodi {
	color: var(--podloga-tamna);
	border-color: var(--podloga-tamna);
}
.poziv-traka .poziv-traka__kodi:hover { background: rgba(45, 62, 80, .08); }