/* ============================================================
   Zeleni Nar, brend sloj preko Econest teme.
   Minimalne dopune: dimenzije logotipa, sečenje fotografija
   i stil za akordeone. Boje i pozadine ostaju iz teme.
   ============================================================ */

/* Logo dimenzije (PNG iz brenda umesto template SVG-a 165x40) */
.header-section-4 .logo-wrap img { max-height: 54px; width: auto; }
.off-canvas-logo img { max-height: 44px; width: auto; }
.footer-logo img { max-height: 62px; width: auto; }

/* Fotografije u karticama: pun okvir, sečenje po sredini */
.zn-cover { overflow: hidden; }
.zn-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Programi slajder: ujednačena visina fotografija */
.service-card-3 .thumb img { width: 100%; height: 280px; object-fit: cover; }

/* Breadcrumb: prava fotografija desno preko celog polja */
.breadcrumb-thumb { height: 100%; }
.breadcrumb-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Akordeoni (FAQ, team building programi) u tonu teme */
.accordion-button { font-family: var(--outfit-font); color: var(--title-color); }
.accordion-button:not(.collapsed) { background-color: #f2f7ec; color: var(--title-color); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: #e3ecda; }

/* Završni CTA pojas pred futer */
.zn-cta-pojas { padding: 90px 0; }
.zn-cta-pojas p { max-width: 560px; margin: 0 auto 34px; }
.zn-cta-dugmad { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============ Unapređenja (poravnanje, interakcije) ============ */

/* Sve kartice u redu iste visine (bez pretvaranja kolone u flex, to je lomilo sadržaj) */
.services-section .service-card { width: 100%; height: 100%; display: flex; flex-direction: column; }
.services-section .service-card .service-content { flex: 1; }
.service-card-3 { height: 100%; display: flex; flex-direction: column; }
.service-card-3 .content { flex: 1; }
.blog-card-2 { height: 100%; display: flex; flex-direction: column; }
.blog-card-2 .content { flex: 1; display: flex; flex-direction: column; }
.blog-card-2 .content .content-bottom { margin-top: auto; }
.testimonial-card { height: 100%; }
.volunteer-card .thumb img { width: 100%; height: 320px; object-fit: cover; }

/* Blagi lift na hover */
.service-card, .blog-card-2, .volunteer-card, .service-card-3 { transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover, .blog-card-2:hover, .volunteer-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(14, 42, 24, .10); }

/* Klikabilna kartica programa */
.zn-program-kartica { position: relative; }

/* Aktivna stavka u meniju */
.main-menu a.zn-aktivan, .off-canvas-menu a.zn-aktivan { color: var(--theme-color) !important; }

/* Nazad na vrh */
.zn-vrh { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border: none; border-radius: 50%;
	background: var(--theme-color-3, #004540); color: #fff; font-size: 17px; z-index: 900;
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .25s ease; cursor: pointer; }
.zn-vrh.vidljiv { opacity: 1; visibility: visible; transform: none; }
.zn-vrh:hover { background: var(--theme-color); }

/* FAQ pretraga */
.zn-faq-pretraga { border: 1px solid #e3ecda; border-radius: 100px; padding: 12px 22px; width: 100%; margin-bottom: 24px; font-size: 16px; }
.zn-faq-pretraga:focus { outline: none; border-color: var(--theme-color); }

/* Kopiraj dugme */
.zn-kopiraj { border: 1px solid #e3ecda; background: #f2f7ec; border-radius: 100px; padding: 4px 14px; font-size: 14px; cursor: pointer; margin-left: 8px; }
.zn-kopiraj:hover { border-color: var(--theme-color); }

/* Kalkulator donacije */
.zn-kalkulator { background: #f2f7ec; border-radius: 16px; padding: 28px; }
.zn-kalkulator .brzi-iznosi { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.zn-kalkulator .brzi-iznosi button { border: 1px solid #e3ecda; background: #fff; border-radius: 100px; padding: 6px 16px; cursor: pointer; }
.zn-kalkulator .brzi-iznosi button:hover { border-color: var(--theme-color); color: var(--theme-color); }
.zn-kalkulator input[type="number"] { border: 1px solid #e3ecda; border-radius: 12px; padding: 10px 16px; width: 100%; font-size: 18px; }
.zn-kalkulator .rezultat { margin-top: 14px; min-height: 48px; }

/* Traka sa sadnicama na stranici sadnje */
.zn-sadnice-traka { background: #f2f7ec; border-left: 5px solid var(--theme-color); border-radius: 12px; padding: 20px 24px; }

/* ============================================================
   PROLAZ ZA PEGLANJE (QA popis dorada)
   Sve niže su ispravke nađene u punom pregledu svih stranica.
   ============================================================ */

/* --- 1. Kontrast teksta: #868681 je davao 3.66:1, ispod WCAG AA praga 4.5 --- */
:root { --body-color: #68685F; }
.footer-section p, .footer-section .text p, .footer-widget p,
.services-we-offer-section p, .dust-recycling-section p,
.testimonial .review p { color: #C8D6C2; }
.footer-section .footer-logo + p, .footer-section .zn-footer-podaci { color: #C8D6C2; }

/* --- 2. Linkovi u telu strane: podrazumevana Bootstrap plava van palete --- */
main a { color: inherit; }
main p > a, main .service-content a, main li > a:not(.e-primary-btn) {
	color: var(--theme-color-3); text-decoration: underline; text-underline-offset: 3px;
}
main p > a:hover, main .service-content a:hover { color: var(--theme-color); }
.contact-card a, .contact-info-card a { color: inherit; }

/* --- 3. Prelom naslova u karticama: ikona je gurala tekst u kolonu od jedne reči --- */
.service-top, .service-top-2, .contact-card .top, .dust-recycle-top {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.service-top > h4, .service-top > h3, .service-top > h5,
.service-card h4, .service-card h3, .contact-card h4, .contact-card h3 {
	flex: 1 1 auto; min-width: 0; text-wrap: balance; hyphens: none;
}
.service-top > i, .service-top > .icon, .contact-card .top > i, .service-card > i {
	flex: 0 0 auto;
}
.service-card h4, .service-card h3, .service-card h5 { text-wrap: balance; }
h1, h2, h3, h4, h5 { text-wrap: balance; }

/* --- 4. Mobilni meni: capitalize je pravio „O Nama” i „Postani Član” --- */
.off-canvas-menu ul li a { text-transform: none; }

/* --- 5. Naslov stranice u breadcrumbu je sada h1, zadržava izgled h2 --- */
.breadcrumb-title h1 {
	font-family: var(--outfit-font); font-weight: 600; color: var(--white-color);
	font-size: clamp(34px, 4vw, 60px); line-height: 1.12; margin-bottom: 0;
}
.breadcrumb-nav ul li span[aria-current] { color: var(--white-color); opacity: .85; }

/* --- 6. Dekorativni brojevi kartica: bili h1, sada span bez semantike --- */
.card-number-2 .zn-broj, .card-number-3 .zn-broj, .card-number .zn-broj {
	display: block; font-family: var(--outfit-font); font-weight: 600;
	color: var(--theme-color-3); margin-bottom: 0; user-select: none;
}
.card-number-2 .zn-broj { font-size: clamp(48px, 5vw, 80px); line-height: .95; opacity: .1; }
.card-number-3 .zn-broj { font-size: clamp(64px, 7vw, 120px); line-height: .85; opacity: .06; }
.card-number .zn-broj { font-size: clamp(40px, 4vw, 64px); line-height: 1; }

/* --- 7. Hero: dva dugmeta i napomena umesto pet zvezdica --- */
.zn-hero-dugmad { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.zn-hero-napomena { display: flex; align-items: center; gap: 12px; }
.zn-hero-napomena p { margin: 0; }
.hero-section-4 .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- 8. Sekcija obećanja (zamena za izmišljene procente) --- */
.zn-obecanja { display: grid; gap: 22px; margin-top: 30px; }
.zn-obecanje { display: flex; gap: 16px; align-items: flex-start; }
.zn-obecanje i { font-size: 26px; color: var(--theme-color-2); flex: 0 0 auto; margin-top: 4px; }
.zn-obecanje h3 { font-size: 19px; margin-bottom: 6px; color: var(--white-color); }
.zn-obecanje p { margin: 0; font-size: 15px; }
.zn-kartica-naslov { font-size: clamp(24px, 2.4vw, 32px); color: var(--white-color); margin-bottom: 22px; }

/* --- 9. Poziv na saradnju umesto demo logotipa --- */
.zn-partneri-naslov { font-size: clamp(26px, 3vw, 40px); margin: 0; }
.zn-partneri-tekst { max-width: 640px; margin: 0 auto 28px; }

/* --- 10. Oznaka tipa akcije umesto lažne ocene 5.0 --- */
.zn-oznaka {
	display: inline-block; background: #f2f7ec; color: var(--theme-color-3);
	border-radius: 100px; padding: 5px 16px; font-size: 14px; font-weight: 500;
}
/* Ikonice mreža u futeru: pojave se tek kad se linkovi upišu u adminu */
.zn-mreza-ikona {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; font-size: 17px;
	transition: background .2s, transform .2s;
}
.zn-mreza-ikona:hover { background: var(--theme-color); color: #fff; transform: translateY(-2px); }

/* Filter rubrika na strani Vesti: iste pilule, aktivna obojena */
a.zn-oznaka { text-decoration: none; transition: background .2s, color .2s; }
a.zn-oznaka:hover { background: #e3efd7; color: var(--theme-color-3); }
.zn-oznaka-aktivna, a.zn-oznaka-aktivna:hover { background: var(--theme-color-3); color: #fff; }
.testimonial-card .author-details h5 a { text-decoration: none; }
.testimonial-card .author-details h5 a:hover { color: var(--theme-color); }

/* --- 11. Dugme „Saznaj više” je preklapalo gornju ivicu fotografije --- */
.section-top-5 .right .e-primary-btn { margin-top: 18px; }

/* --- 12. Kartice u istom redu poravnate po dnu --- */
.contact-card, .service-card-2 { height: 100%; display: flex; flex-direction: column; }
.contact-card .content, .service-card-2 .content { flex: 1; }

/* --- 13. Sve što je klikabilno dobija kažiprst --- */
a, button, [role="button"], .accordion-button, label, summary,
input[type="submit"], input[type="button"], .swiper-button-next, .swiper-button-prev,
.zn-kopiraj, .zn-vrh, .brzi-iznosi button { cursor: pointer; }

/* --- 14. Vidljiv fokus za tastaturu --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--theme-color); outline-offset: 2px; border-radius: 4px;
}

/* --- 15. Poštovanje prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	[data-aos] { opacity: 1 !important; transform: none !important; }
	html { scroll-behavior: auto; }
}

/* --- 16. Saglasnost za obradu podataka na formama --- */
.zn-saglasnost { display: flex; gap: 10px; align-items: center; margin: 6px 0 18px; font-size: 14px; }
.zn-saglasnost input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--theme-color); }
.zn-saglasnost label { line-height: 1.5; margin: 0; }
.zn-saglasnost a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form-3 .zn-saglasnost, .contact-form-3 .zn-saglasnost label { color: #E4EDE0; }
.contact-form-3 .zn-saglasnost a { color: var(--theme-color-2); }

/* --- 17. Vidljive labele iznad polja (placeholder nestaje kad se kuca) --- */
.zn-polje { margin-bottom: 16px; }
.zn-polje > label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--title-color); }
.contact-form-3 .zn-polje > label { color: #E4EDE0; }

/* --- 18. Telefon u mobilnom zaglavlju i CTA u mobilnom meniju --- */
.zn-mobilni-poziv { display: none; }
@media (max-width: 1199px) {
	.zn-mobilni-poziv {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		width: 46px; height: 46px; border-radius: 50%; background: var(--theme-color-2);
		color: var(--theme-color-3); font-size: 17px; margin-right: 12px;
	}
	.zn-mobilni-poziv:hover { background: var(--theme-color); color: #fff; }
}
.zn-meni-dno { padding: 26px 0 0; border-top: 1px solid #eef2ea; margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.zn-meni-dno > .e-primary-btn { display: inline-flex; align-items: center; gap: 10px; width: auto; }
.zn-meni-kontakt { font-size: 15px; color: var(--body-color); }
.zn-meni-kontakt a { display: block; padding: 3px 0; color: var(--theme-color-3); text-decoration: none; }

/* --- 19. IPS QR kod za donacije --- */
.zn-ips { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.zn-ips img, .zn-ips canvas { width: 190px; height: 190px; background: #fff; border: 1px solid #e3ecda; border-radius: 14px; padding: 10px; }
.zn-ips-tekst { flex: 1 1 240px; min-width: 220px; }
.zn-ips-tekst p { margin-bottom: 6px; }

/* --- 20. Praznina na stranici donacija --- */
.zn-donacije-slika { border-radius: 18px; overflow: hidden; margin-top: 26px; }
.zn-donacije-slika img { width: 100%; height: 320px; object-fit: cover; display: block; }

/* --- 21. Naslovi koraka: bili su dva h4, sada jedan naslov sa namernim prelomom --- */
.zn-prelom { display: block; }

/* --- 22. Broj koraka je dekoracija, ne naslov --- */
.work-process-card .card-top .number .zn-broj-korak {
	display: block; font-weight: 600; font-size: 24px; line-height: 36px;
	color: var(--theme-color-2); margin-bottom: 0; user-select: none;
}
@media (max-width: 991px) { .work-process-card .card-top .number .zn-broj-korak { font-size: 20px; } }
.work-process-card:hover .card-top .number .zn-broj-korak { color: var(--body-color); }

/* --- 23. Pravni tekstovi: naslovi odeljaka su h2, ali u veličini pasusa --- */
.zn-pravni-naslov { font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--title-color); }

/* --- 24. Mapa se otvara na klik, najava umesto praznog okvira --- */
.zn-mapa { background: #f2f7ec; }
.zn-mapa-najava { max-width: 640px; margin: 0 auto; padding: 60px 24px; text-align: center; }

/* --- 25. Hero: dugmad su se lomila u kolonu, a bočne ikone su ulazile preko teksta --- */
.hero-section-4 .hero-rating-wrap { flex-wrap: wrap; row-gap: 18px; }
.hero-section-4 .zn-hero-dugmad { flex: 0 1 auto; min-width: min(100%, 300px); margin-bottom: 0; }
.hero-section-4 .zn-hero-napomena { flex: 0 1 auto; min-width: min(100%, 250px); }
@media (max-width: 1599px) { .hero-slider-social { display: none; } }

/* --- 26. PRAVI uzrok preloma naslova: tema tvrdo zadaje usku max-width na naslove kartica
       (118px je krojeno za kratke engleske naslove, srpski se zbog toga lomi na svaku reč) --- */
.service-card .service-top h4,
.service-card-2 .service-top h4,
.work-process-cards .work-process-card .card-content h4,
.major-partners .partners-title h2,
.major-partners .partners-title h3 {
	max-width: none;
	width: auto;
}
.service-card .service-top h4, .service-card-2 .service-top h4 { flex: 1 1 auto; min-width: 0; }

/* --- 27. Staklena kartica je bila skoro providna (bela 4%), pa je svetao tekst
       na svetloj fotografiji padao ispod praga čitljivosti --- */
.dust-recycle-card { background: rgba(0, 69, 64, .78); }
.dust-recycling-section .dust-recycle-top h2.zn-kartica-naslov { max-width: none; width: auto; }
.dust-recycle-top { gap: 30px; flex-wrap: wrap; }
.dust-recycle-top .services-4 { flex: 1 1 320px; }
.zn-obecanje p { color: #DCE8D6; }
.zn-obecanje h3 { color: #fff; }

/* --- 28. Na mobilnom su se hero dugmad razvlačila po visini (flex stretch) --- */
.zn-hero-dugmad { align-items: center; }
.zn-hero-dugmad > .e-primary-btn { flex: 0 0 auto; align-self: center; }
.zn-hero-napomena { align-items: center; }

/* --- 29. Pilula iznad naslova se na mobilnom lomila sa ogromnim proredom --- */
@media (max-width: 767px) {
	.hero-content-4 .subtitle span { line-height: 1.35; }
	.hero-content-4 .subtitle { padding-top: 12px; padding-bottom: 12px; }
}

/* --- 30. ISPRAVKA: `.zn-cover { overflow: hidden }` je sekao kartice brojača,
       koje su namerno postavljene da vire ispod fotografije (bottom: -210px).
       Slika ima sopstveni border-radius, pa sečenje na kontejneru nije potrebno. --- */
.about-us-section-2 .thumb.zn-cover { overflow: visible; }
.about-us-section-2 .thumb.zn-cover > img { border-radius: 12px; }

/* --- 31. Izbor veličine majice (donacija od 2.000 RSD naviše) --- */
.zn-majica-naslov { display: block; font-size: 14px; margin-bottom: 4px; color: var(--title-color); }
.contact-form-3 .zn-majica-naslov { color: #E4EDE0; }
.zn-majica-opis { font-size: 14px; margin-bottom: 12px; }
.contact-form-3 .zn-majica-opis { color: #C8D6C2; }
.zn-velicine { display: flex; gap: 10px; flex-wrap: wrap; }
.zn-velicina { position: relative; margin: 0; }
.zn-velicina input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.zn-velicina span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 58px; padding: 10px 16px; border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 500; transition: all .2s ease;
}
.zn-velicina input:checked + span { background: var(--theme-color-2); color: var(--theme-color-3); border-color: var(--theme-color-2); }
.zn-velicina input:focus-visible + span { outline: 3px solid var(--theme-color); outline-offset: 2px; }
.zn-velicina:hover span { border-color: var(--theme-color-2); }

/* ============================================================
   MOBILNI DOŽIVLJAJ KAO U APLIKACIJI
   Nizovi kartica se na telefonu ne slažu jedan ispod drugog nego
   klize prstom, sa hvatanjem kartice (scroll-snap) i skrivenom
   trakom za pomeranje. Na desktopu ostaje mreža kao do sada.
   ⚠ overflow-x se postavlja SAMO na ove kontejnere, nikada na html.
   ============================================================ */
@media (max-width: 991px) {
	.zn-svajp {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		gap: 14px;
		margin-left: -12px;
		margin-right: -12px;
		padding: 4px 20px 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.zn-svajp::-webkit-scrollbar { display: none; }
	.zn-svajp > [class*="col-"] {
		flex: 0 0 82%;
		max-width: 82%;
		width: 82%;
		scroll-snap-align: start;
		margin-bottom: 0;
	}
	/* kod četiri uske kartice (brojači, uloge) staje više po ekranu */
	.zn-svajp-usko > [class*="col-"] { flex-basis: 64%; max-width: 64%; width: 64%; }
	.zn-svajp > [class*="col-"] > * { height: 100%; }

	/* traka sa nagoveštajem da ima još sadržaja desno */
	.zn-svajp-okvir { position: relative; }
	.zn-svajp-okvir::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 20px; width: 28px;
		background: linear-gradient(to left, rgba(255,255,255,.92), rgba(255,255,255,0));
		pointer-events: none;
	}
	.zn-svajp-okvir.na-tamnom::after {
		background: linear-gradient(to left, rgba(0,69,64,.92), rgba(0,69,64,0));
	}

	/* brojači preko fotografije: na telefonu klize umesto da se lome u dva reda */
	.about-us-section-2 .thumb .company-achievements-2 {
		position: static; display: flex; flex-wrap: nowrap; overflow-x: auto;
		scroll-snap-type: x mandatory; gap: 12px; padding: 16px 20px 20px;
		margin: -60px 0 0; scrollbar-width: none;
	}
	.about-us-section-2 .thumb .company-achievements-2::-webkit-scrollbar { display: none; }
	.about-us-section-2 .thumb .company-achievements-2 .achievement {
		flex: 0 0 62%; max-width: 62%; scroll-snap-align: start; margin: 0;
	}
	.about-us-section-2 .thumb.zn-cover > img { height: 320px; }

	/* tačkice ispod niza, kao u aplikaciji */
	.zn-tacke { display: flex; gap: 7px; justify-content: center; margin: 2px 0 6px; }
	.zn-tacke span {
		width: 7px; height: 7px; border-radius: 50%; background: #d3ddcd; transition: all .25s ease;
	}
	.zn-tacke span.aktivna { width: 22px; border-radius: 100px; background: var(--theme-color); }
	.zn-tacke.na-tamnom span { background: rgba(255,255,255,.35); }
	.zn-tacke.na-tamnom span.aktivna { background: var(--theme-color-2); }
}
@media (min-width: 992px) { .zn-tacke { display: none; } }

/* ============================================================
   VESTI, BANERI, PARTNERI, DONATORI
   ============================================================ */

/* Vesti: oznake rubrike i datum */
.zn-vest-oznake { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zn-vest-datum { font-size: 14px; color: var(--body-color); }

/* Istaknuta vest na vrhu liste */
.zn-istaknuta { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; margin-bottom: 50px; }
.zn-istaknuta-slika { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #f2f7ec; }
.zn-istaknuta-slika img { width: 100%; height: 100%; object-fit: cover; }
.zn-istaknuta-tekst h2 { font-size: clamp(24px, 2.6vw, 36px); margin: 14px 0 12px; }
.zn-istaknuta-tekst h2 a { text-decoration: none; }
.zn-istaknuta-tekst h2 a:hover { color: var(--theme-color); }
@media (max-width: 991px) { .zn-istaknuta { grid-template-columns: 1fr; gap: 20px; } }

/* Prazno stanje kada još nema vesti */
.zn-prazno { padding: 70px 20px; background: #f7faf4; border-radius: 18px; }
.zn-prazno i { font-size: 44px; color: var(--theme-color); margin-bottom: 18px; display: block; }
.zn-prazno h2 { font-size: 24px; margin-bottom: 10px; }
.zn-prazno p { max-width: 460px; margin: 0 auto 24px; }

/* Članak */
.zn-clanak-slika { border-radius: 16px; overflow: hidden; margin: 24px 0 28px; }
.zn-clanak-slika img { width: 100%; height: auto; display: block; }
.zn-clanak-uvod { font-size: 19px; line-height: 1.65; color: var(--title-color); margin-bottom: 24px; }
.zn-clanak-telo { font-size: 17px; line-height: 1.8; }
.zn-clanak-telo h2 { font-size: 26px; margin: 34px 0 14px; }
.zn-clanak-telo h3 { font-size: 21px; margin: 28px 0 12px; }
.zn-clanak-telo p { margin-bottom: 18px; }
.zn-clanak-telo ul, .zn-clanak-telo ol { margin: 0 0 20px 22px; }
.zn-clanak-telo li { margin-bottom: 8px; }
.zn-clanak-telo img { max-width: 100%; height: auto; border-radius: 12px; margin: 16px 0; }
.zn-clanak-telo a { color: var(--theme-color-3); text-decoration: underline; text-underline-offset: 3px; }
.zn-clanak-podnozje { margin-top: 40px; padding-top: 26px; border-top: 1px solid #e3ecda; }
.zn-ostale-vesti { margin-top: 70px; }

/* PR tekst mora biti jasno označen kao plaćeni sadržaj */
.zn-pr-najava {
	display: flex; gap: 12px; align-items: flex-start;
	background: #FFF8DE; border-left: 4px solid var(--theme-color-2);
	border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 15px;
}
.zn-pr-najava i { font-size: 18px; color: #8a6d00; margin-top: 2px; }

/* Paginacija */
.zn-paginacija { margin-top: 44px; display: flex; justify-content: center; }
.zn-paginacija .pagination { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.zn-paginacija .page-link {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	padding: 0 12px; border: 1px solid #e3ecda; border-radius: 100px; color: var(--theme-color-3);
	text-decoration: none; background: #fff;
}
.zn-paginacija .page-item.active .page-link { background: var(--theme-color-3); color: #fff; border-color: var(--theme-color-3); }
.zn-paginacija .page-item.disabled .page-link { opacity: .45; }
.zn-paginacija .page-link:hover { border-color: var(--theme-color); }

/* Oglasni prostori */
.zn-baneri { display: grid; gap: 16px; margin: 30px 0; }
.zn-baner { position: relative; text-align: center; background: #f7faf4; border-radius: 14px; padding: 14px; overflow: hidden; }
.zn-baner img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.zn-baner-oznaka {
	position: absolute; top: 8px; right: 10px; font-size: 11px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--body-color); background: rgba(255,255,255,.85);
	border-radius: 100px; padding: 2px 9px;
}

/* Traka partnera, sa imenom kada logotip još nije stigao */
.zn-traka-partnera .zn-partner { display: flex; align-items: center; justify-content: center; min-height: 78px; }
.zn-partner-ime {
	font-family: var(--outfit-font); font-weight: 600; font-size: 19px; color: #fff;
	white-space: nowrap; padding: 0 10px;
}
.zn-traka-partnera a { text-decoration: none; }
.zn-traka-partnera a:hover .zn-partner-ime { color: var(--theme-color-2); }

/* Donatori */
.zn-donatori-podnaslov { font-size: 21px; margin-bottom: 18px; }
.zn-donatori-napomena { font-size: 15px; margin-bottom: 20px; }
.zn-donator-kartica {
	height: 100%; background: #f7faf4; border: 1px solid #eaf1e4; border-radius: 16px;
	padding: 26px 22px; text-align: center; transition: transform .25s ease, box-shadow .25s ease;
}
.zn-donator-kartica:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(14, 42, 24, .08); }
.zn-donator-logo { height: 60px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.zn-donator-logo img { max-height: 60px; width: auto; object-fit: contain; }
.zn-donator-inicijal {
	width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
	background: var(--theme-color-2); color: var(--theme-color-3);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--outfit-font); font-weight: 600; font-size: 26px;
}
.zn-donator-kartica h4 { font-size: 18px; margin-bottom: 6px; }
.zn-donator-kartica h4 a { text-decoration: none; }
.zn-donator-kartica h4 a:hover { color: var(--theme-color); }
.zn-donator-kartica p { font-size: 14px; margin: 0; }
.zn-donatori-imena { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.zn-donator-ime {
	background: #f2f7ec; border: 1px solid #e3ecda; border-radius: 100px;
	padding: 8px 18px; font-size: 15px; color: var(--theme-color-3);
}

/* Izbor javno ili privatno na formi donatora */
.zn-velicina-siroka span { min-width: auto; }
.m-t-16 { margin-top: 16px; }

/* ============================================================
   ZELENI MONITOR (/uzivo): vreme, vazduh, požari, uslovi za sadnju
   ============================================================ */
.zn-uvod-monitor { max-width: 680px; margin-bottom: 34px; }

.zn-sadnja-danas { border-radius: 20px; padding: 30px 32px; margin-bottom: 34px; border: 1px solid #e3ecda; background: #f7faf4; }
.zn-sadnja-danas.povoljno { background: #EEF7E4; border-color: #cfe4b8; }
.zn-sadnja-danas.umereno { background: #FFF8DE; border-color: #f0e3b0; }
.zn-sadnja-danas.nepovoljno { background: #F6F3EF; border-color: #e6ded4; }
.zn-sadnja-glava { display: flex; gap: 18px; align-items: center; }
.zn-sadnja-glava i { font-size: 38px; color: var(--theme-color); }
.zn-sadnja-glava h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 4px; }
.zn-sadnja-razlozi { margin: 20px 0 0; padding-left: 20px; }
.zn-sadnja-razlozi li { margin-bottom: 8px; }

.zn-monitor-kartica {
	height: 100%; background: #fff; border: 1px solid #eaf1e4; border-radius: 18px;
	padding: 28px 26px; display: flex; flex-direction: column;
}
.zn-monitor-glava { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.zn-monitor-glava h3 { font-size: 19px; margin: 0; }
.zn-monitor-glava i { font-size: 24px; color: var(--theme-color); flex: 0 0 auto; }
.zn-monitor-broj { font-family: var(--outfit-font); font-weight: 600; font-size: 46px; line-height: 1; color: var(--theme-color-3); }
.zn-monitor-broj span { font-size: 15px; font-weight: 400; color: var(--body-color); margin-left: 8px; }
.zn-monitor-opis { margin: 8px 0 18px; font-size: 16px; }
.zn-monitor-stavke { list-style: none; padding: 0; margin: 0 0 16px; }
.zn-monitor-stavke li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f4ec; font-size: 15px; }
.zn-monitor-stavke li:last-child { border-bottom: none; }
.zn-monitor-napomena { font-size: 14px; margin-bottom: 10px; }
.zn-monitor-izvor { font-size: 13px; color: var(--body-color); margin: auto 0 0; padding-top: 12px; }
.zn-monitor-prazno { font-size: 15px; background: #f7faf4; border-radius: 12px; padding: 18px; margin: 0; }

.zn-prognoza { display: flex; gap: 10px; margin-bottom: 16px; }
.zn-prognoza-dan { flex: 1; background: #f7faf4; border-radius: 12px; padding: 12px 8px; text-align: center; }
.zn-prognoza-dan span { display: block; font-size: 13px; color: var(--body-color); text-transform: capitalize; }
.zn-prognoza-dan b { display: block; font-size: 19px; color: var(--theme-color-3); }
.zn-prognoza-dan small { color: var(--body-color); }

.zn-vazduh-odlican, .zn-vazduh-dobar { color: #3f8b2e; }
.zn-vazduh-osrednji { color: #a07d00; }
.zn-vazduh-los, .zn-vazduh-vrlo-los, .zn-vazduh-izuzetno-los { color: #b3261e; }

.zn-pozari-lista { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.zn-pozar {
	display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
	background: #FDF0EE; border: 1px solid #f3d6d2; border-radius: 100px; padding: 8px 16px; font-size: 14px;
}
.zn-pozar:hover { border-color: #d9534f; }
.zn-pozar-koord { color: var(--title-color); }
.zn-pozar-snaga { color: #b3261e; font-weight: 500; }

/* --- Kažiprst na SVEMU što se klikće, bez izuzetka --- */
a, a *, button, button *, [role="button"], [role="button"] *,
label, label *, summary, select, option,
input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"], input[type="file"], input[type="color"], input[type="range"],
.accordion-button, .accordion-button *, .swiper-button-next, .swiper-button-prev,
.swiper-pagination-bullet, .zn-kopiraj, .zn-vrh, .zn-velicina, .zn-velicina *,
.brzi-iznosi button, .header-bar, .header-bar *, .off-canvas-menubar-close, .off-canvas-menubar-close *,
.open-mobile-menu, .open-mobile-menu *, [data-toggle], [data-close], [data-bs-toggle],
.page-link, .zn-pozar, .zn-pozar *, .zn-donator-kartica a, .service-card a, .blog-card-2 a, .volunteer-card a {
	cursor: pointer;
}
/* tekstualna polja zadržavaju kursor za kucanje */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"], input[type="date"],
input[type="datetime-local"], textarea { cursor: text; }
[disabled], [aria-disabled="true"] { cursor: not-allowed; }

/* --- Kartice uzimaju punu širinu svoje kolone --- */
.zn-monitor-kartica, .zn-donator-kartica { width: 100%; height: 100%; }

/* ============================================================
   NAJČEŠĆA PITANJA, potpuno novi raspored
   Pre: uska bočna kolona i akordeon stisnut u stubac od 250 px.
   Sad: pretraga i teme na vrhu, pitanja u punoj širini, kontakt na dnu.
   ============================================================ */
.zn-faq-vrh { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.zn-faq-naslov { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 12px; }
.zn-faq-uvod { font-size: 17px; margin-bottom: 28px; }

.zn-faq-polje { position: relative; display: flex; align-items: center; }
.zn-faq-polje > i {
	position: absolute; left: 22px; font-size: 18px; color: var(--theme-color-3); pointer-events: none;
}
.zn-faq-polje input {
	width: 100%; border: 1px solid #dfe8d7; border-radius: 100px;
	padding: 18px 54px 18px 56px; font-size: 17px; background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.zn-faq-polje input:focus {
	outline: none; border-color: var(--theme-color);
	box-shadow: 0 0 0 4px rgba(133, 191, 24, .16);
}
.zn-faq-polje input::-webkit-search-cancel-button { display: none; }
.zn-faq-brisi {
	position: absolute; right: 16px; width: 32px; height: 32px; border: none; border-radius: 50%;
	background: #eef3e8; color: var(--theme-color-3); display: flex; align-items: center; justify-content: center;
}
.zn-faq-brisi:hover { background: var(--theme-color-2); }

.zn-faq-grupe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 22px 0 6px; }
.zn-faq-grupa {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid #dfe8d7; background: #fff; border-radius: 100px;
	padding: 10px 18px; font-size: 15px; color: var(--title-color);
	transition: all .2s ease;
}
.zn-faq-grupa i { font-size: 15px; color: var(--theme-color-3); }
.zn-faq-grupa .zn-faq-broj {
	font-style: normal; font-size: 12px; background: #eef3e8; color: var(--theme-color-3);
	border-radius: 100px; padding: 2px 8px; min-width: 24px; text-align: center;
}
.zn-faq-grupa:hover { border-color: var(--theme-color); }
.zn-faq-grupa.aktivna { background: var(--theme-color-3); color: #fff; border-color: var(--theme-color-3); }
.zn-faq-grupa.aktivna i { color: var(--theme-color-2); }
.zn-faq-grupa.aktivna .zn-faq-broj { background: rgba(255,255,255,.18); color: #fff; }

.zn-faq-rezultat { font-size: 14px; color: var(--body-color); margin: 14px 0 0; min-height: 21px; }

/* Pitanja: native details, radi i bez JavaScripta */
.zn-faq-lista { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.zn-faq-stavka {
	border: 1px solid #e6ede0; border-radius: 16px; background: #fff; overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.zn-faq-stavka:hover { border-color: #cfe0bf; }
.zn-faq-stavka[open] { border-color: var(--theme-color); box-shadow: 0 8px 26px rgba(14, 42, 24, .07); }
.zn-faq-stavka summary {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 20px 24px; font-family: var(--outfit-font); font-weight: 600; font-size: 17px;
	color: var(--title-color); list-style: none;
}
.zn-faq-stavka summary::-webkit-details-marker { display: none; }
.zn-faq-stavka summary:focus-visible { outline: 3px solid var(--theme-color); outline-offset: -3px; }
.zn-faq-pitanje { flex: 1; min-width: 0; text-wrap: balance; }
.zn-faq-znak {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #eef3e8;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
	color: var(--theme-color-3); transition: transform .25s ease, background .25s ease;
}
.zn-faq-stavka[open] .zn-faq-znak { transform: rotate(45deg); background: var(--theme-color-2); }
.zn-faq-odgovor { padding: 0 24px 22px; }
.zn-faq-odgovor p { margin-bottom: 14px; }
.zn-faq-odgovor p:last-child { margin-bottom: 0; }
.zn-faq-odgovor ul { margin: 0 0 14px 20px; }
.zn-faq-odgovor li { margin-bottom: 7px; }

.zn-faq-prazno { max-width: 520px; margin: 40px auto 0; text-align: center; background: #f7faf4; border-radius: 18px; padding: 44px 26px; }
.zn-faq-prazno i { font-size: 40px; color: var(--theme-color); display: block; margin-bottom: 14px; }
.zn-faq-prazno h3 { font-size: 21px; margin-bottom: 8px; }
.zn-faq-prazno p { margin-bottom: 22px; }

.zn-faq-kontakt {
	max-width: 880px; margin: 60px auto 0; background: var(--theme-color-3); border-radius: 20px;
	padding: 36px 38px; color: #fff; display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: center;
}
.zn-faq-kontakt h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.zn-faq-kontakt p { color: #C8D6C2; }
.zn-faq-kontakt-veze { display: grid; gap: 12px; }
.zn-faq-veza {
	display: flex; align-items: center; gap: 14px; text-decoration: none;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
	border-radius: 12px; padding: 12px 16px; transition: background .2s ease, border-color .2s ease;
}
.zn-faq-veza:hover { background: rgba(255,255,255,.13); border-color: var(--theme-color-2); }
.zn-faq-veza i { font-size: 19px; color: var(--theme-color-2); flex: 0 0 auto; }
.zn-faq-veza span { display: flex; flex-direction: column; }
.zn-faq-veza b { color: #fff; font-weight: 500; }
.zn-faq-veza small { color: #A9BFA2; font-size: 13px; }

@media (max-width: 767px) {
	.zn-faq-kontakt { grid-template-columns: 1fr; padding: 28px 22px; }
	.zn-faq-stavka summary { padding: 17px 18px; font-size: 16px; }
	.zn-faq-odgovor { padding: 0 18px 18px; }
	/* teme klize prstom umesto da se lome u tri reda */
	.zn-svajp-grupe {
		flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
		scroll-snap-type: x proximity; margin: 22px -16px 6px; padding: 2px 16px 10px; /* konac je 16px, -20 je gurao stranu u sirinu */
		scrollbar-width: none;
	}
	.zn-svajp-grupe::-webkit-scrollbar { display: none; }
	.zn-faq-grupa { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ============================================================
   ZA OGLAŠIVAČE
   ============================================================ */
.zn-oglasi-uvod { max-width: 760px; margin-bottom: 46px; }
.zn-oglasi-uvod h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
.zn-oglasi-uvod > p { font-size: 17px; margin-bottom: 26px; }
.zn-oglasi-obecanja { display: grid; gap: 12px; }
.zn-oglasi-obecanja > div { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.zn-oglasi-obecanja i { font-size: 18px; color: var(--theme-color); flex: 0 0 auto; }

.zn-oglasi-podnaslov { font-size: 22px; margin-bottom: 22px; }

.zn-oglas-kartica {
	height: 100%; width: 100%; background: #fff; border: 1px solid #e6ede0; border-radius: 18px;
	padding: 26px 24px; display: flex; flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.zn-oglas-kartica:hover { transform: translateY(-5px); border-color: var(--theme-color); box-shadow: 0 14px 30px rgba(14, 42, 24, .08); }
.zn-oglas-glava { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.zn-oglas-glava i { font-size: 24px; color: var(--theme-color-3); }
.zn-oglas-format {
	font-size: 12px; letter-spacing: .03em; background: #f2f7ec; color: var(--theme-color-3);
	border-radius: 100px; padding: 4px 12px;
}
.zn-oglas-kartica h4 { font-size: 18px; margin-bottom: 10px; text-wrap: balance; }
.zn-oglas-kartica p { font-size: 15px; flex: 1; margin-bottom: 18px; }
.zn-oglas-cena { border-top: 1px solid #f0f4ec; padding-top: 16px; }
.zn-oglas-cena b { display: block; font-family: var(--outfit-font); font-size: 24px; color: var(--theme-color-3); }
.zn-oglas-cena small { color: var(--body-color); font-size: 13px; }
.zn-oglas-pr { background: #f7faf4; }

.zn-oglasi-pravila { margin-top: 60px; background: #f7faf4; border-left: 4px solid var(--theme-color-2); border-radius: 14px; padding: 30px 32px; }
.zn-oglasi-pravila h3 { font-size: 20px; margin-bottom: 10px; }
.zn-oglasi-pravila ul { margin: 12px 0 0 20px; }
.zn-oglasi-pravila li { margin-bottom: 7px; }

/* ============================================================
   PRIJAVA ZAGAĐENJA
   Forma je pravljena prvo za telefon, pa onda za veći ekran.
   ============================================================ */
.zn-prijava-uvod p { font-size: 17px; max-width: 640px; }

.zn-prijava-oprez {
	display: flex; gap: 14px; align-items: flex-start;
	background: #FFF6E5; border-left: 4px solid #E9A700; border-radius: 12px;
	padding: 16px 20px; margin: 24px 0 34px; font-size: 15px;
}
.zn-prijava-oprez i { font-size: 20px; color: #B98200; flex: 0 0 auto; margin-top: 2px; }
.zn-prijava-oprez a { color: var(--theme-color-3); font-weight: 600; text-decoration: underline; }

.zn-prijava-uspeh {
	display: flex; gap: 16px; align-items: flex-start;
	background: #EEF7E4; border: 1px solid #cfe4b8; border-radius: 16px; padding: 24px 26px; margin-bottom: 30px;
}
.zn-prijava-uspeh i { font-size: 28px; color: var(--theme-color); flex: 0 0 auto; }
.zn-prijava-uspeh h2 { font-size: 20px; margin-bottom: 6px; }

.zn-prijava-greska {
	display: flex; gap: 12px; align-items: center;
	background: #FDEDEC; border: 1px solid #f3c9c5; color: #922B21;
	border-radius: 12px; padding: 14px 18px; margin-bottom: 22px;
}

.zn-korak { border: 1px solid #e6ede0; border-radius: 18px; padding: 26px 26px 22px; margin-bottom: 18px; background: #fff; }
.zn-korak-glava { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.zn-korak-broj {
	width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
	background: var(--theme-color-3); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--outfit-font); font-weight: 600; font-size: 15px;
}
.zn-korak-glava h3 { font-size: 19px; margin: 0; }
.zn-korak-opis { font-size: 15px; margin-bottom: 18px; }

.zn-vrste { display: flex; flex-wrap: wrap; gap: 10px; }
.zn-vrsta { position: relative; margin: 0; }
.zn-vrsta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
.zn-vrsta span {
	display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 100px;
	border: 1px solid #dfe8d7; font-size: 15px; transition: all .2s ease; background: #fff;
}
.zn-vrsta span i { font-size: 16px; color: var(--theme-color-3); transition: color .2s ease; }
.zn-vrsta span b { font-weight: 400; }
.zn-vrsta input:checked + span i { color: var(--theme-color-2); }
.zn-vrsta input:checked + span { background: var(--theme-color-3); color: #fff; border-color: var(--theme-color-3); }
.zn-vrsta input:focus-visible + span { outline: 3px solid var(--theme-color); outline-offset: 2px; }
.zn-vrsta:hover span { border-color: var(--theme-color); }

.zn-foto-dugme {
	display: flex; align-items: center; gap: 16px; width: 100%;
	border: 2px dashed #cfe0bf; border-radius: 16px; padding: 22px 24px; background: #f7faf4;
	transition: border-color .2s ease, background .2s ease; margin: 0;
}
.zn-foto-dugme:hover { border-color: var(--theme-color); background: #f2f7ec; }
.zn-foto-dugme i { font-size: 30px; color: var(--theme-color-3); flex: 0 0 auto; }
.zn-foto-dugme span { display: flex; flex-direction: column; }
.zn-foto-dugme small { color: var(--body-color); font-size: 13px; }

.zn-foto-pregled { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.zn-foto-stavka { margin: 0; width: 104px; }
.zn-foto-stavka img { width: 104px; height: 104px; object-fit: cover; border-radius: 12px; display: block; }
.zn-foto-stavka figcaption { font-size: 12px; color: var(--body-color); text-align: center; margin-top: 5px; }

.zn-lokacija-dugme {
	display: inline-flex; align-items: center; gap: 10px;
	border: 1px solid #dfe8d7; background: #fff; border-radius: 100px;
	padding: 12px 20px; font-size: 15px; transition: all .2s ease;
}
.zn-lokacija-dugme:hover { border-color: var(--theme-color); }
.zn-lokacija-dugme.uzeta { background: #EEF7E4; border-color: var(--theme-color); }
.zn-lokacija-dugme i { color: var(--theme-color-3); }
.zn-lokacija-stanje { font-size: 14px; margin: 10px 0 16px; min-height: 20px; }
.zn-lokacija-stanje.uspeh { color: #3f8b2e; }
.zn-lokacija-stanje.greska { color: #b3261e; }
.zn-polje-napomena { display: block; font-size: 13px; color: var(--body-color); margin-top: 5px; }

.zn-prijava-posalji { margin-top: 8px; }

@media (max-width: 767px) {
	.zn-korak { padding: 20px 18px 18px; border-radius: 16px; }
	/* Šest vrsta u dve kolone, kao kartice iste visine. Kao pilule su se
	   dugački nazivi lomili u tri reda, pa su kutije bile raznih visina. */
	.zn-vrste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.zn-vrsta span {
		width: 100%; height: 100%; min-height: 96px; border-radius: 14px;
		flex-direction: column; align-items: center; justify-content: center;
		gap: 8px; padding: 14px 10px; text-align: center; font-size: 13.5px; line-height: 1.3;
	}
	.zn-vrsta span i { font-size: 22px; }
	.zn-foto-dugme { padding: 26px 20px; }
	.zn-prijava-posalji { width: 100%; justify-content: center; }
}

/* ============================================================
   PLUTAJUĆA DONJA NAVIGACIJA, SAMO TELEFON I TABLET
   Desktop izgled ostaje netaknut, sve je unutar media upita.
   ============================================================ */
.zn-mobilna-traka { display: none; }

@media (max-width: 991px) {
	.zn-mobilna-traka {
		display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950;
		background: rgba(0, 69, 64, .92);
		backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 22px; padding: 8px 6px;
		box-shadow: 0 10px 30px rgba(0, 30, 25, .28);
		justify-content: space-around; align-items: center;
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
	}

	.zn-traka-stavka {
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		flex: 1; padding: 6px 2px; text-decoration: none; color: rgba(255, 255, 255, .72);
		min-width: 0;
	}
	.zn-traka-ikona {
		display: flex; align-items: center; justify-content: center;
		width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
		transition: background .22s ease, color .22s ease, transform .22s ease;
	}
	.zn-traka-naziv {
		font-size: 11px; line-height: 1.2; white-space: nowrap;
		overflow: hidden; text-overflow: ellipsis; max-width: 100%;
	}

	.zn-traka-stavka.aktivna { color: #fff; }
	.zn-traka-stavka.aktivna .zn-traka-ikona { background: var(--theme-color-2); color: var(--theme-color-3); }

	/* Prijava je razlog zbog kog traka postoji, pa je istaknuta */
	.zn-traka-stavka.glavna .zn-traka-ikona {
		background: var(--theme-color); color: #fff; width: 44px; height: 44px;
		font-size: 18px; margin-top: -14px;
		box-shadow: 0 6px 16px rgba(133, 191, 24, .4);
	}
	.zn-traka-stavka.glavna.aktivna .zn-traka-ikona { background: var(--theme-color-2); color: var(--theme-color-3); }
	.zn-traka-stavka:active .zn-traka-ikona { transform: scale(.92); }

	/* Sadržaj ne sme da završi ispod trake */
	body { padding-bottom: 86px; }
	.zn-vrh { bottom: 100px; }

	/* Traka se sklanja dok se kuca u formu, da ne pokriva tastaturu */
	body.zn-kuca .zn-mobilna-traka { transform: translateY(140%); transition: transform .2s ease; }
}

/* Žarišta požara: mesto, udaljenost i snaga umesto golih koordinata */
.zn-pozari-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; margin-bottom: 16px; min-width: 0; }
.zn-pozar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	text-decoration: none; background: #FDF0EE; border: 1px solid #f3d6d2;
	border-radius: 12px; padding: 11px 15px; font-size: 14px; transition: border-color .2s ease;
}
.zn-pozar:hover { border-color: #d9534f; }
.zn-pozar-mesto { display: flex; flex-direction: column; min-width: 0; }
.zn-pozar-mesto b { color: var(--title-color); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn-pozar-mesto small { color: var(--body-color); font-size: 12.5px; }
.zn-pozar-snaga { flex: 0 0 auto; font-weight: 500; color: #8a6d00; background: #FFF6E5; border-radius: 100px; padding: 3px 10px; font-size: 13px; }
.zn-pozar-snaga.srednje { color: #A9500B; background: #FFEEDD; }
.zn-pozar-snaga.jako { color: #fff; background: #C0392B; }

/* Javni pregled prijava zagađenja, bez fotografija i imena */
.zn-prijave-javno { background: var(--zn-podloga, #f7faf4); }
.zn-prijave-brojevi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 760px; margin: 0 auto 40px; }
.zn-prijave-broj { background: #fff; border: 1px solid #e6ede0; border-radius: 16px; padding: 22px 18px; text-align: center; }
.zn-prijave-broj b { display: block; font-family: var(--outfit-font); font-size: clamp(28px, 3.5vw, 40px); color: var(--theme-color-3); line-height: 1; }
.zn-prijave-broj span { font-size: 14px; color: var(--body-color); }

.zn-prijave-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.zn-prijava-stavka { background: #fff; border: 1px solid #e6ede0; border-left: 4px solid #cfe0bf; border-radius: 14px; padding: 18px 20px; }
.zn-prijava-stavka.zn-status-prosledjena { border-left-color: var(--theme-color-2); }
.zn-prijava-stavka.zn-status-resena { border-left-color: var(--theme-color); }
.zn-prijava-glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.zn-prijava-status { font-size: 13px; color: var(--body-color); }
.zn-prijava-mesto { font-size: 15px; margin-bottom: 12px; }
.zn-prijava-dno { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--body-color); }
.zn-prijave-napomena { font-size: 14px; text-align: center; margin-top: 24px; }

@media (max-width: 575px) {
	.zn-prijave-brojevi { grid-template-columns: 1fr; }
}

/* Mapa žarišta, crtamo je sami iz granice Srbije, bez pločica sa tuđih servera */
.zn-pozari-prikaz { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 16px; }
.zn-mapa-srbije { background: var(--zn-krem, #FAFBF7); border: 1px solid var(--zn-ivica-meka, #E8EFE1); border-radius: 20px; padding: 12px; }
/* Prava geografska mapa žarišta (Leaflet + OpenStreetMap) */
.zn-mapa-prava { height: 440px; border-radius: 20px; border: 1px solid var(--zn-ivica-meka, #E8EFE1); overflow: hidden; z-index: 0; }
.zn-mapa-prava .leaflet-popup-content { font-size: 14px; line-height: 1.45; }
.zn-mapa-prava .leaflet-popup-content b { display: block; margin-bottom: 2px; }
.zn-pozari-bok { min-width: 0; }
.zn-mapa-grad circle { fill: #9FB396; }
.zn-mapa-grad text { font-size: 11px; fill: #6E7A68; font-family: var(--dm-sans-font), sans-serif; }
.zn-mapa-srbije svg { width: 100%; height: auto; display: block; }
.zn-mapa-obris { fill: #E7F0DF; stroke: #C3D8B4; stroke-width: 1.5; stroke-linejoin: round; }
.zn-mapa-oreol { fill: #E9A700; opacity: .28; }
.zn-mapa-jezgro { fill: #E9A700; }
.zn-mapa-tacka.srednje .zn-mapa-oreol { fill: #E07B39; opacity: .3; }
.zn-mapa-tacka.srednje .zn-mapa-jezgro { fill: #E07B39; }
.zn-mapa-tacka.jako .zn-mapa-oreol { fill: #C0392B; opacity: .32; }
.zn-mapa-tacka.jako .zn-mapa-jezgro { fill: #C0392B; }
.zn-mapa-tacka { cursor: help; }
.zn-mapa-legenda { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--body-color); margin: 0 0 14px; }
.zn-legenda-tacka { width: 10px; height: 10px; border-radius: 50%; background: #E9A700; display: inline-block; }
.zn-legenda-tacka.srednje { background: #E07B39; }
.zn-legenda-tacka.jako { background: #C0392B; }

/* Nivoi peluda */
.zn-pelud-zanemarljiv { color: #3f8b2e; }
.zn-pelud-nizak { color: #3f8b2e; }
.zn-pelud-umeren { color: #a07d00; }
.zn-pelud-visok { color: #b3261e; }
.zn-monitor-stavke b small { font-weight: 400; font-size: 12.5px; color: var(--body-color); }

@media (max-width: 991px) {
	.zn-pozari-prikaz { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.zn-mapa-srbije { max-width: 330px; margin: 0 auto; width: 100%; }
	.zn-pozar { padding: 10px 13px; }
}

/* Istorija žarišta po danima */
.zn-istorija { background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 28px 26px; margin-top: 24px; }
.zn-istorija-glava { margin-bottom: 22px; }
.zn-istorija-glava h3 { font-size: 19px; margin-bottom: 6px; }
.zn-istorija-glava p { font-size: 14.5px; }
.zn-grafikon { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.zn-grafikon-stubac { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; cursor: help; }
.zn-stubac { width: 100%; max-width: 26px; background: linear-gradient(to top, var(--theme-color-3), var(--theme-color)); border-radius: 5px 5px 0 0; transition: opacity .2s ease; }
.zn-grafikon-stubac:hover .zn-stubac { opacity: .75; }
.zn-grafikon-stubac small { font-size: 10.5px; color: var(--body-color); margin-top: 6px; white-space: nowrap; }
@media (max-width: 767px) {
	.zn-grafikon { height: 110px; gap: 3px; }
	.zn-grafikon-stubac small { display: none; }
}

/* Prijava na obaveštenja o požaru */
.zn-pretplata {
	background: var(--theme-color-3); border-radius: 20px; padding: 28px 30px; margin-top: 24px; color: #fff;
}
.zn-pretplata-glava { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.zn-pretplata-glava > i { font-size: 26px; color: var(--theme-color-2); margin-top: 4px; }
.zn-pretplata h3 { color: #fff; font-size: 20px; margin-bottom: 4px; }
.zn-pretplata p { color: #C8D6C2; font-size: 14px; line-height: 1.5; }
.zn-pretplata-red { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
.zn-pretplata-red .zn-polje { margin-bottom: 12px; }
.zn-pretplata-dno { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 6px; }
.zn-pretplata-dno .zn-saglasnost { flex: 1 1 320px; margin: 0; }
.zn-pretplata-dugme { flex: 0 0 auto; }
@media (max-width: 767px) {
	.zn-pretplata { padding: 22px 18px; }
	.zn-pretplata-red { grid-template-columns: 1fr; gap: 0; }
	.zn-pretplata-dugme { width: 100%; justify-content: center; }
}
.zn-pretplata .zn-polje > label { color: #E4EDE0; }
.zn-pretplata .form-control {
	width: 100%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
	color: #fff; border-radius: 10px; padding: 11px 14px;
}
.zn-pretplata .form-control::placeholder { color: rgba(255,255,255,.45); }
.zn-pretplata select.form-control option { color: var(--title-color); }
.zn-pretplata .zn-lokacija-dugme { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; margin-bottom: 4px; }
.zn-pretplata .zn-lokacija-dugme i { color: var(--theme-color-2); }
.zn-pretplata .zn-lokacija-stanje { color: #C8D6C2; }
.zn-pretplata .zn-saglasnost, .zn-pretplata .zn-saglasnost label { color: #E4EDE0; }
.zn-pretplata .zn-saglasnost a { color: var(--theme-color-2); }
@media (max-width: 991px) {
}

/* ============================================================
   NAČINI UKLJUČIVANJA (stranica O nama)
   Ranije: kartice sa plavim linkovima u rasporedu tri plus dva.
   Sada: uredan niz, svaka stavka ima jasnu radnju na kraju.
   ============================================================ */
.zn-nacini-uvod { max-width: 620px; margin: 0 auto; }
.zn-nacini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.zn-nacin {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "ikona telo" "ikona dugme";
	gap: 4px 20px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--zn-ivica-meka, #E8EFE1);
	border-radius: var(--zn-radius, 22px);
	padding: 26px 28px;
	text-decoration: none;
	box-shadow: var(--zn-senka, 0 4px 24px rgba(20, 45, 25, .06));
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.zn-nacin:hover {
	transform: translateY(-4px);
	border-color: #D6E4CB;
	box-shadow: var(--zn-senka-jaka, 0 18px 44px rgba(20, 45, 25, .10));
}

.zn-nacin-ikona {
	grid-area: ikona;
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; flex: 0 0 auto;
	border-radius: 50%;
	background: var(--zn-krem-2, #F3F7EE);
	border: 1px solid var(--zn-ivica-meka, #E8EFE1);
	color: var(--theme-color-3);
	font-size: 22px;
	transition: background .25s ease, border-color .25s ease;
}
.zn-nacin:hover .zn-nacin-ikona { background: var(--theme-color-2); border-color: var(--theme-color-2); }

.zn-nacin-telo { grid-area: telo; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zn-nacin-telo b {
	font-family: var(--outfit-font); font-weight: 600; font-size: 18px;
	color: var(--title-color); line-height: 1.3; text-wrap: balance;
}
.zn-nacin-telo span { font-size: 15px; line-height: 1.6; color: var(--body-color); }

.zn-nacin-dugme {
	grid-area: dugme;
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 12px;
	font-size: 14.5px; font-weight: 500; color: var(--theme-color-3);
}
.zn-nacin-dugme i { transition: transform .25s ease; font-size: 13px; }
.zn-nacin:hover .zn-nacin-dugme { color: var(--theme-color); }
.zn-nacin:hover .zn-nacin-dugme i { transform: translateX(4px); }

@media (max-width: 991px) {
	.zn-nacini { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
	.zn-nacin { padding: 20px 18px; gap: 4px 16px; }
	.zn-nacin-ikona { width: 48px; height: 48px; font-size: 19px; }
	.zn-nacin-telo b { font-size: 17px; }
}

/* ============================================================
   UPLATA (stranica Donacije)
   Iznos, značenje donacije, podaci računa i QR na jednom mestu.
   ============================================================ */
.zn-uplata {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--zn-ivica-meka, #E8EFE1);
	border-radius: var(--zn-radius-veliki, 32px);
	padding: clamp(26px, 3.2vw, 44px);
	box-shadow: var(--zn-senka, 0 4px 24px rgba(20, 45, 25, .06));
}

.zn-uplata-pitanje { font-family: var(--outfit-font); font-weight: 600; font-size: 18px; color: var(--title-color); margin-bottom: 14px; }
.zn-uplata .brzi-iznosi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.zn-uplata .brzi-iznosi button {
	border: 1px solid var(--zn-ivica-meka, #E8EFE1); background: #fff; border-radius: 100px;
	padding: 11px 22px; font-size: 16px; font-weight: 500; color: var(--title-color);
	transition: all .2s ease;
}
.zn-uplata .brzi-iznosi button:hover { border-color: var(--theme-color); }
.zn-uplata .brzi-iznosi button.izabran { background: var(--theme-color-3); color: #fff; border-color: var(--theme-color-3); }

.zn-uplata-polje { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.zn-uplata-polje input {
	width: 100%; border: 1px solid var(--zn-ivica-meka, #E8EFE1); border-radius: 14px;
	padding: 14px 62px 14px 18px; font-size: 17px; background: var(--zn-krem, #FAFBF7);
}
.zn-uplata-polje input:focus { outline: none; border-color: var(--theme-color); background: #fff; }
.zn-uplata-polje span { position: absolute; right: 18px; color: var(--body-color); font-size: 15px; pointer-events: none; }

.zn-uplata .rezultat { min-height: 52px; font-size: 15.5px; line-height: 1.6; color: var(--theme-color-3); margin-bottom: 22px; }
.zn-uplata .rezultat b { color: var(--title-color); }

.zn-uplata-racun { border-top: 1px solid var(--zn-ivica-meka, #E8EFE1); padding-top: 18px; display: grid; gap: 10px; }
.zn-racun-red { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.zn-racun-red > span { color: var(--body-color); min-width: 108px; }
.zn-racun-red > b { color: var(--title-color); font-weight: 500; }

.zn-uplata-desno { text-align: center; }
.zn-qr-okvir {
	background: #fff; border: 1px solid var(--zn-ivica-meka, #E8EFE1);
	border-radius: 20px; padding: 14px; display: inline-block; line-height: 0;
	box-shadow: var(--zn-senka, 0 4px 24px rgba(20, 45, 25, .06));
}
.zn-qr-okvir img { width: 220px; height: 220px; display: block; }
.zn-qr-naslov { font-family: var(--outfit-font); font-weight: 600; font-size: 17px; margin: 16px 0 4px; color: var(--title-color); }
.zn-qr-opis { font-size: 14px; color: var(--body-color); margin: 0; }

/* Uplata iz inostranstva se otvara na klik, retko je potrebna */
.zn-inostranstvo {
	margin-top: 18px; background: #fff; border: 1px solid var(--zn-ivica-meka, #E8EFE1);
	border-radius: var(--zn-radius, 22px); overflow: hidden;
}
.zn-inostranstvo summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 26px; font-family: var(--outfit-font); font-weight: 500; font-size: 16.5px;
	color: var(--title-color); list-style: none;
}
.zn-inostranstvo summary::-webkit-details-marker { display: none; }
.zn-inostranstvo summary i:first-child { color: var(--theme-color-3); margin-right: 8px; }
.zn-inostranstvo[open] .zn-faq-znak { transform: rotate(45deg); background: var(--theme-color-2); }
.zn-inostranstvo-telo { padding: 0 26px 24px; display: grid; gap: 10px; }

@media (max-width: 991px) {
	.zn-uplata { grid-template-columns: 1fr; gap: 28px; }
	.zn-uplata-desno { order: -1; }
	.zn-qr-okvir img { width: 190px; height: 190px; }
}
@media (max-width: 575px) {
	.zn-uplata .brzi-iznosi button { flex: 1 1 calc(50% - 5px); }
	.zn-racun-red > span { min-width: 100%; }
}

/* ============================================================
   POČETNA: živa traka i poziv na prijavu zagađenja
   ============================================================ */
.zn-traka-uzivo-sekcija { padding: 18px 0 0; }
.zn-traka-uzivo {
	display: flex; align-items: center; gap: 16px;
	background: var(--theme-color-3); color: #fff;
	border-radius: 100px; padding: 12px 22px; text-decoration: none;
	box-shadow: 0 8px 26px rgba(0, 45, 40, .18);
	overflow: hidden;
}
.zn-uzivo-pulsira {
	width: 9px; height: 9px; border-radius: 50%; background: #7ED957; flex: 0 0 auto;
	animation: znPuls 2s ease-in-out infinite;
}
@keyframes znPuls { 0%,100% { box-shadow: 0 0 0 0 rgba(126,217,87,.5); } 50% { box-shadow: 0 0 0 7px rgba(126,217,87,0); } }
.zn-uzivo-stavke { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.zn-uzivo-stavka { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: #DCE8D6; }
.zn-uzivo-stavka i { color: var(--theme-color-2); }
.zn-uzivo-stavka.pazi { color: #FFD9A0; }
.zn-uzivo-stavka.pazi i { color: #FFB84D; }
.zn-uzivo-vise { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; flex: 0 0 auto; }
.zn-traka-uzivo:hover .zn-uzivo-vise { color: var(--theme-color-2); }
@media (max-width: 991px) {
	.zn-traka-uzivo { border-radius: 20px; flex-wrap: wrap; padding: 14px 18px; }
	.zn-uzivo-stavke { flex-wrap: wrap; white-space: normal; gap: 8px 18px; }
	.zn-uzivo-vise { margin-left: auto; }
}

.zn-prijava-poziv-sekcija { padding: 0 0 var(--zn-sekcija-y, 80px); }
.zn-prijava-poziv {
	display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
	background: linear-gradient(120deg, #FFF6E5, #FDEFD2);
	border: 1px solid #F0E0B8; border-radius: var(--zn-radius-veliki, 32px);
	padding: clamp(24px, 3vw, 40px) clamp(22px, 3.4vw, 46px);
}
.zn-prijava-poziv-tekst { display: flex; align-items: center; gap: 20px; flex: 1 1 480px; min-width: 0; }
.zn-prijava-poziv-ikona {
	width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%;
	background: var(--theme-color-3); color: var(--theme-color-2);
	display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.zn-prijava-poziv h2 { font-size: clamp(21px, 2.4vw, 30px); margin-bottom: 8px; }
.zn-prijava-poziv p { font-size: 15.5px; max-width: 56ch; }
@media (max-width: 767px) {
	.zn-prijava-poziv-tekst { flex-direction: column; align-items: flex-start; gap: 14px; }
	.zn-prijava-poziv > .e-primary-btn { width: 100%; justify-content: center; }
}

/* Mirno stanje monitora požara: nema aktivnih žarišta */
.zn-pozari-mirno {
	display: flex; gap: 16px; align-items: flex-start;
	background: #EFF7E9; border: 1px solid #D6E8C8; border-radius: 16px;
	padding: 18px 20px; margin: 6px 0 10px;
}
.zn-pozari-mirno > i { font-size: 30px; color: var(--theme-color); margin-top: 2px; }
.zn-pozari-mirno b { display: block; font-size: 17px; color: var(--theme-color-3); margin-bottom: 4px; }
.zn-pozari-mirno p { font-size: 14px; color: #5A6B55; line-height: 1.5; }

/* --- 27. Naslovi koraka: tema zadaje line-height 8-20px na dvoredne naslove, pa se redovi preklapaju --- */
.work-process-cards .work-process-card .card-content h4 { line-height: 1.25 !important; }

/* --- 28. Javna galerija prijava: fotke građana, klik za uvećanje --- */
.zn-galerija-naslov { text-align: center; margin: 34px 0 18px; }
.zn-galerija-naslov h3 { margin-bottom: 6px; }
.zn-galerija-naslov p { font-size: 14px; color: #6b7566; margin: 0; }
.zn-galerija {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px; margin-bottom: 26px;
}
.zn-galerija-stavka {
	position: relative; border: 0; padding: 0; background: none;
	border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; display: block;
}
.zn-galerija-stavka img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.zn-galerija-stavka:hover img { transform: scale(1.05); }
.zn-galerija-oznaka {
	position: absolute; left: 8px; bottom: 8px;
	background: rgba(14, 42, 24, .78); color: #fff;
	font-size: 11.5px; padding: 3px 10px; border-radius: 100px;
}
.zn-galerija-prozor {
	border: 0; border-radius: 18px; padding: 0; max-width: min(92vw, 900px);
	background: #10281a; color: #fff;
}
.zn-galerija-prozor::backdrop { background: rgba(10, 25, 15, .82); }
.zn-galerija-prozor img { display: block; max-width: 100%; max-height: 74vh; margin: 0 auto; }
.zn-galerija-podaci { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.zn-galerija-podaci span { font-size: 13.5px; color: #C8D6C2; }
.zn-galerija-zatvori {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	width: 38px; height: 38px; border-radius: 50%; border: 0;
	background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
}
.zn-galerija-zatvori:hover { background: rgba(255,255,255,.3); }
@media (max-width: 767px) {
	.zn-galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* --- 29. PRAVI uzrok nevidljive fotografije u „O nama": tema daje
   `.about-us-section-2 .thumb { z-index: -1 }`, pa se fotografija i brojači
   crtaju IZA pozadine sekcije — svaka sekcija sa podlogom ih prekrije. --- */
.about-us-section-2 .thumb { z-index: 0; }

/* --- 30. Utisci/„tri načina" slajder (cards efekat teme): zadnji slajdovi
   različitih visina vire ispod aktivnog kao providan duh-tekst. Visine se
   izjednačavaju, a zadnje karte na telefonu skoro sakrivamo. --- */
.testimonial-slider-active .testimonial-card { background: #fff; }
/* Tema ovu karticu boji za TAMNU podlogu (svetao tekst, žuta oznaka) — kod
   nas je kartica bela, pa je tekst bio nevidljiv. Prava paleta: */
.testimonial-card .card-content .rating span,
.testimonial-card .card-content .rating p { color: var(--theme-color-3); }
.testimonial-card .card-content .review,
.testimonial-card .card-content .review p { color: #4A4A45; }
.testimonial-card .card-content .author-details h5,
.testimonial-card .card-content .author-details h5 a { color: var(--title-color, #17362A); }
.testimonial-card .card-content .author-details h6 { color: #6b7566; }
.testimonial-slider-active .testimonial-card .thumb img { height: 220px; width: 100%; object-fit: cover; }
.testimonial-slider-active .testimonial-card .review p {
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 767px) {
	.testimonial-slider-active .swiper-slide { opacity: 0.12; }
	.testimonial-slider-active .swiper-slide.swiper-slide-active { opacity: 1; }
}

/* --- 31. Kontakt strana: forma je glavna, podaci sažeti u bočnu karticu --- */
.zn-kontakt-bok {
	background: var(--zn-podloga, #f7faf4); border: 1px solid var(--zn-ivica, #e6ede0);
	border-radius: 20px; padding: 26px 24px;
	display: flex; flex-direction: column; gap: 22px; height: 100%;
}
.zn-kontakt-stavka { display: flex; gap: 14px; align-items: flex-start; }
.zn-kontakt-stavka > i {
	width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #fff; border: 1px solid var(--zn-ivica, #e6ede0);
	color: var(--theme-color-3); font-size: 18px;
}
.zn-kontakt-stavka b { display: block; margin-bottom: 3px; font-size: 16.5px; }
.zn-kontakt-stavka b a { color: var(--title-color, #17362A); }
.zn-kontakt-stavka b a:hover { color: var(--theme-color); }
.zn-kontakt-stavka span { font-size: 14px; color: #5A6B55; line-height: 1.55; }
.zn-kontakt-pravno { border-top: 1px dashed var(--zn-ivica, #e6ede0); padding-top: 20px; margin-top: 2px; }

/* --- 32. „Za firme, škole i organizacije" --- */
.zn-saradnje {
	background: var(--theme-color-3); border-radius: 24px; color: #fff;
	padding: clamp(28px, 4vw, 46px);
}
.zn-saradnje-glava { max-width: 640px; margin-bottom: 26px; }
.zn-saradnje-glava h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin-bottom: 10px; }
.zn-saradnje-glava p { color: #C8D6C2; font-size: 15.5px; margin: 0; }
.zn-saradnje-mreza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zn-saradnja {
	text-align: left; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px; padding: 22px 20px; color: #fff;
	display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
	transition: background .25s ease, transform .25s ease;
}
.zn-saradnja:hover { background: rgba(255, 255, 255, .13); transform: translateY(-4px); }
.zn-saradnja > i {
	width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--theme-color-2); color: var(--theme-color-3); font-size: 19px;
}
.zn-saradnja b { font-size: 17.5px; }
.zn-saradnja span { font-size: 14px; color: #C8D6C2; line-height: 1.55; }
.zn-saradnja em { font-style: normal; font-weight: 600; color: var(--theme-color-2); font-size: 14px; margin-top: auto; }
.zn-saradnja em i { margin-left: 6px; transition: transform .2s; }
.zn-saradnja:hover em i { transform: translateX(4px); }
@media (max-width: 991px) {
	.zn-saradnje-mreza { grid-template-columns: 1fr; }
}

/* --- 33. Kontakt forma: tema je centrirala SVE (i labele); levo poravnanje,
   jasna polja sa okvirom, bela kartica, razuman okvir na telefonu --- */
.contact-form-wrap { text-align: left; background: #fff; border: 1px solid var(--zn-ivica, #e6ede0); }
.contact-form-wrap h3 { margin-bottom: 6px; }
.contact-form-wrap > p { color: #5A6B55; font-size: 15px; margin-bottom: 22px; }
.contact-form-wrap .input-wrap label,
.contact-form-wrap .select-wrap label { display: block; text-align: left; font-weight: 500; font-size: 14px; margin-bottom: 6px; color: var(--title-color, #17362A); }
.contact-form-wrap .input-wrap input,
.contact-form-wrap .input-wrap textarea,
.contact-form-wrap .select-wrap select {
	width: 100%; border: 1px solid var(--zn-ivica, #e6ede0); border-radius: 12px;
	padding: 12px 14px; font-size: 15px; background: #FBFCF9;
}
.contact-form-wrap .input-wrap input:focus,
.contact-form-wrap .input-wrap textarea:focus,
.contact-form-wrap .select-wrap select:focus {
	border-color: var(--theme-color); outline: none;
	box-shadow: 0 0 0 3px rgba(76, 151, 65, .13); background: #fff;
}
.contact-form-wrap .input-wrap textarea { min-height: 130px; }
.contact-form-wrap .input-button { text-align: left; }
.contact-form-wrap .zn-saglasnost { text-align: left; }
@media (max-width: 767px) {
	.contact-form-wrap { padding: 24px 18px 26px; }
	.contact-form-wrap .e-primary-btn { width: 100%; justify-content: center; }
}

/* --- 34. Nove monitor kartice: zemljotresi i reke --- */
.zn-potres-jak { color: #d64545; }
.zn-reke b { display: flex; align-items: center; gap: 10px; }
.zn-reka-trend { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 100px; }
.zn-trend-raste { background: #FDEBD3; color: #9A5B13; }
.zn-trend-opada { background: #E3F0FA; color: #1F5E8C; }
.zn-trend-mirno { background: #EFF3EC; color: #55655A; }

/* --- 35. Monitor kartice na telefonu: svaka svoje visine, bez rastezanja
   na visinu najvise kartice u svajp redu (bespotrebna belina) --- */
@media (max-width: 991px) {
	/* Monitor kartice su previse razlicitih visina za svajp (red bi bio visok
	   kao najvisa, pa zjapi belina) — na telefonu idu jedna ispod druge. */
	.zn-svajp-monitor {
		display: block !important; overflow: visible;
		margin-left: 0; margin-right: 0; padding: 0;
	}
	.zn-svajp-monitor > [class*="col-"] {
		flex: none; max-width: 100%; width: 100%;
		margin-bottom: 14px; padding-left: 0; padding-right: 0;
	}
	.zn-svajp-monitor > [class*="col-"] > .zn-monitor-kartica { height: auto; }
	.zn-mapa-prava { height: 320px; }
}

/* --- 36. Select u tamnoj formi (donacije: Država) prati stil ostalih polja --- */
.contact-form-3 select.form-control {
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
	color: #fff; width: 100%;
}
.contact-form-3 select.form-control:focus { background: rgba(255, 255, 255, .14); color: #fff; }
.contact-form-3 select.form-control option { color: var(--title-color, #17362A); background: #fff; }

/* --- 37. Sigurnosni pojas protiv „šetanja" na telefonu: sekcije klipuju
   horizontalni višak svojih punih-širina traka; html/body se NE diraju
   (⚠ nikad overflow-x na html). Scroll trake dobijaju containment da
   gest na kraju trake ne povlači celu stranu. --- */
@media (max-width: 991px) {
	main > section { overflow-x: clip; }
	.zn-svajp, .zn-svajp-grupe, .work-process-cards, .zn-brojaci,
	.company-achievements-2, .zn-pozari-lista, .zn-galerija {
		overscroll-behavior-x: contain;
	}
}

/* ============================================================
   38. PROGRAMSKE STRANE: jedinstven sloj (činjenice, koraci, CTA)
   ============================================================ */
.zn-program-cinjenice-sekcija { padding: 0 0 10px; }
.zn-program-cinjenice {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
	background: var(--theme-color-3); border-radius: 22px;
	padding: clamp(20px, 2.6vw, 30px); margin-top: -6px;
}
.zn-program-cinjenica { display: flex; gap: 14px; align-items: flex-start; color: #fff; }
.zn-program-cinjenica > i {
	width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--theme-color-2); font-size: 19px;
}
.zn-program-cinjenica b { display: block; font-size: 17px; margin-bottom: 2px; }
.zn-program-cinjenica span { font-size: 14px; color: #C8D6C2; line-height: 1.5; }

.zn-program-koraci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zn-program-korak {
	position: relative; background: #fff; border: 1px solid var(--zn-ivica, #e6ede0);
	border-radius: 18px; padding: 26px 22px 22px;
}
.zn-program-korak-broj {
	position: absolute; top: -14px; left: 22px;
	background: var(--theme-color-2); color: var(--theme-color-3);
	font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 100px;
}
.zn-program-korak b { display: block; font-size: 17.5px; margin-bottom: 8px; color: var(--title-color, #17362A); }
.zn-program-korak p { font-size: 14.5px; color: #5A6B55; line-height: 1.6; }

@media (max-width: 991px) {
	.zn-program-cinjenice { grid-template-columns: 1fr; gap: 16px; border-radius: 18px; }
	.zn-program-koraci { grid-template-columns: 1fr; gap: 22px; }
	.zn-program-koraci-sekcija { padding-top: 34px !important; padding-bottom: 10px !important; }
}

/* --- 39. Vest: deljenje bez skripti mreža --- */
.zn-clanak-deli { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 6px; }
.zn-clanak-deli > span { font-size: 14px; color: #5A6B55; margin-right: 2px; }
.zn-clanak-deli a, .zn-kopiraj-vezu {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid var(--zn-ivica, #e6ede0); background: #fff;
	color: var(--theme-color-3); font-size: 16px; transition: background .2s, color .2s, transform .2s;
}
.zn-clanak-deli a:hover, .zn-kopiraj-vezu:hover { background: var(--theme-color-3); color: #fff; transform: translateY(-2px); }

/* --- 40. Preskoči na sadržaj: vidljivo samo pri kretanju tastaturom --- */
.zn-preskoci {
	position: absolute; left: 12px; top: -80px; z-index: 9999;
	background: var(--theme-color-3); color: #fff; padding: 12px 20px;
	border-radius: 0 0 12px 12px; font-weight: 600; transition: top .2s;
}
.zn-preskoci:focus { top: 0; color: #fff; }

/* --- 41. Oznaka „uživo" na podacima koji se sami osvežavaju --- */
.zn-uzivo-tacka {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: #4c9741; margin-left: 6px; vertical-align: middle;
	animation: znPuls 2.4s ease-in-out infinite;
}
@keyframes znPuls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .zn-uzivo-tacka { animation: none; } }

/* ============================================================
   42. POSTANI ČLAN: priča, izbor uloga, prijava sa biografijom
   ============================================================ */
.zn-clan-uvod { max-width: 780px; margin: 0 auto 34px; text-align: center; }
.zn-clan-uvod .common-subtitle { justify-content: center; }
.zn-clan-uvod h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 14px; }
.zn-clan-uvod-tekst { font-size: 17px; line-height: 1.75; color: #4A4A45; }

.zn-clan-price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zn-clan-prica-kartica {
	background: #fff; border: 1px solid var(--zn-ivica, #e6ede0); border-radius: 18px;
	padding: 24px 22px; display: flex; flex-direction: column; gap: 8px;
}
.zn-clan-prica-oznaka {
	align-self: flex-start; background: var(--zn-podloga-2, #f2f7ec); color: var(--theme-color-3);
	font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
}
.zn-clan-prica-kartica p { font-size: 15px; line-height: 1.65; color: #4A4A45; font-style: italic; margin: 4px 0 6px; }
.zn-clan-prica-kartica b { font-size: 16px; color: var(--title-color, #17362A); }
.zn-clan-prica-kartica > span:last-child { font-size: 13.5px; color: #6b7566; }

.zn-uloge-uputstvo { color: #5A6B55; font-size: 15px; margin: 0; }
.zn-uloge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.zn-uloga {
	position: relative; text-align: left; background: #fff;
	border: 1.5px solid var(--zn-ivica, #e6ede0); border-radius: 16px;
	padding: 18px 16px; display: flex; flex-direction: column; gap: 6px;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.zn-uloga:hover { border-color: #cfe0bf; transform: translateY(-3px); box-shadow: var(--zn-senka); }
.zn-uloga > i {
	width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--zn-podloga-2, #f2f7ec); color: var(--theme-color-3); font-size: 18px;
}
.zn-uloga b { font-size: 15.5px; color: var(--title-color, #17362A); }
.zn-uloga > span { font-size: 13px; color: #6b7566; line-height: 1.5; }
.zn-uloga-kvacica {
	position: absolute; top: 12px; right: 12px; width: 24px; height: 24px;
	border-radius: 50%; background: var(--theme-color); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 11px;
	opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s;
}
.zn-uloga.izabrana { border-color: var(--theme-color); background: #F6FBF2; }
.zn-uloga.izabrana .zn-uloga-kvacica { opacity: 1; transform: scale(1); }
.zn-uloga.izabrana > i { background: var(--theme-color-2); }

.zn-uloge-brojac { text-align: center; margin: 16px 0 0; font-size: 14.5px; color: var(--theme-color-3); font-weight: 500; }
.zn-uloge-greska { color: #d64545; }

.zn-izabrane-uloge {
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
}
.zn-izabrane-uloge > span { font-size: 13.5px; color: #C8D6C2; display: block; margin-bottom: 8px; }
.zn-izabrane-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.zn-izabrana {
	background: var(--theme-color-2); color: var(--theme-color-3);
	font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
}

.zn-polje-pomoc { font-size: 13px; color: #C8D6C2; margin-top: 6px; line-height: 1.5; }
.zn-foto-pregled { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.zn-foto-pregled img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.zn-foto-pregled span { font-size: 13px; color: #C8D6C2; }

@media (max-width: 991px) {
	.zn-clan-price { grid-template-columns: 1fr; }
	.zn-uloge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.zn-uloga { padding: 14px 12px; }
	.zn-uloga > span { font-size: 12.5px; }
}

/* --- 43. Vazduh po gradovima: sklopivi spisak u kartici --- */
.zn-gradovi { margin: 14px 0 10px; border-top: 1px solid var(--zn-ivica-meka, #E8EFE1); padding-top: 12px; }
.zn-gradovi summary {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--theme-color-3); list-style: none;
}
.zn-gradovi summary::-webkit-details-marker { display: none; }
.zn-gradovi[open] summary i { transform: rotate(180deg); }
.zn-gradovi summary i { transition: transform .2s; font-size: 12px; }
.zn-gradovi-lista { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.zn-gradovi-lista li b small { font-weight: 500; font-size: 12.5px; opacity: .85; margin-left: 4px; }

/* --- 44. Monitor: navigacija između podstranica + gradovi mreža --- */
.zn-monitor-meni {
	display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
	padding-bottom: 4px;
}
.zn-monitor-veza {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid var(--zn-ivica, #e6ede0);
	border-radius: 100px; padding: 9px 18px;
	font-size: 14.5px; font-weight: 500; color: var(--theme-color-3);
	transition: background .2s, border-color .2s, color .2s;
}
.zn-monitor-veza:hover { background: var(--zn-podloga-2, #f2f7ec); color: var(--theme-color-3); }
.zn-monitor-veza.aktivna { background: var(--theme-color-3); border-color: var(--theme-color-3); color: #fff; }
.zn-monitor-veza i { font-size: 15px; }

.zn-gradovi-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.zn-grad-kartica {
	border: 1px solid var(--zn-ivica, #e6ede0); border-radius: 14px;
	padding: 16px 14px; display: flex; flex-direction: column; gap: 2px; background: #fff;
}
.zn-grad-kartica b { font-size: 15px; color: var(--title-color, #17362A); }
.zn-grad-indeks { font-size: 28px; font-weight: 700; line-height: 1.1; }
.zn-grad-ocena { font-size: 13.5px; font-weight: 500; }
.zn-grad-kartica small { font-size: 12px; color: #6b7566; margin-top: 4px; }
.zn-vazduh-okvir-dobar { border-left: 4px solid #4c9741; }
.zn-vazduh-okvir-prihvatljiv { border-left: 4px solid #c9a227; }
.zn-vazduh-okvir-losiji, .zn-vazduh-okvir-los { border-left: 4px solid #e8862e; }
.zn-vazduh-okvir-veoma-los, .zn-vazduh-okvir-opasan { border-left: 4px solid #d64545; }

@media (max-width: 991px) {
	.zn-monitor-meni { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 8px; }
	.zn-monitor-meni::-webkit-scrollbar { display: none; }
	.zn-monitor-veza { flex: 0 0 auto; }
	.zn-gradovi-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* --- 45. Zeleni indeks gradova --- */
.zn-zelenilo-lista { display: flex; flex-direction: column; gap: 18px; margin: 18px 0; }
.zn-zelenilo-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.zn-zelenilo-glava b { font-size: 16.5px; color: var(--title-color, #17362A); }
.zn-zelenilo-broj { font-size: 17px; font-weight: 700; color: var(--theme-color-3); }
.zn-zelenilo-broj small { font-size: 12px; font-weight: 500; color: #6b7566; margin-left: 2px; }
.zn-zelenilo-traka { height: 10px; background: #EFF3EC; border-radius: 100px; overflow: hidden; }
.zn-zelenilo-ispuna { height: 100%; border-radius: 100px; transition: width .6s ease; }
.zn-zelenilo-ispuna.dobro { background: linear-gradient(90deg, #4c9741, #7bc067); }
.zn-zelenilo-ispuna.srednje { background: linear-gradient(90deg, #c9a227, #e0bf4d); }
.zn-zelenilo-ispuna.slabo { background: linear-gradient(90deg, #d64545, #e8862e); }
.zn-zelenilo-detalji { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 13px; color: #6b7566; }
@media (max-width: 767px) {
	.zn-zelenilo-detalji { gap: 8px; font-size: 12.5px; }
	.zn-zelenilo-detalji span { flex: 1 1 100%; }
}

/* --- 46. „Ko stoji iza svega": osnivač u sekciji O nama --- */
.zn-osnivac {
	display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px); align-items: center;
	background: #fff; border: 1px solid var(--zn-ivica, #e6ede0);
	border-radius: 24px; padding: clamp(20px, 3vw, 36px);
}
.zn-osnivac-slika { border-radius: 20px; overflow: hidden; aspect-ratio: 1; }
.zn-osnivac-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zn-osnivac-tekst h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 4px; }
.zn-osnivac-uloga {
	color: var(--theme-color-3); font-weight: 600; font-size: 15px;
	margin-bottom: 16px; letter-spacing: .01em;
}
.zn-osnivac-tekst p { font-size: 15.5px; line-height: 1.7; color: #4A4A45; margin-bottom: 12px; }
.zn-osnivac-veze { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.zn-osnivac-veza { font-weight: 600; color: var(--theme-color-3); font-size: 15px; }
.zn-osnivac-veza i { margin-left: 6px; transition: transform .2s; }
.zn-osnivac-veza:hover i { transform: translateX(4px); }
@media (max-width: 991px) {
	.zn-osnivac { grid-template-columns: 1fr; text-align: center; }
	.zn-osnivac-slika { max-width: 260px; margin: 0 auto; }
	.zn-osnivac-tekst .common-subtitle { justify-content: center; }
	.zn-osnivac-veze { justify-content: center; }
}

/* ============================================================
   §47 ZELENI MONITOR, PODSTRANICE
   Svaka podstranica je merna stanica: prvo se vidi STANJE (jedan
   veliki podatak i šta on znači danas), pa tek onda razrada.
   Ranije su sve četiri strane bile isti niz belih kartica, pa se
   nije videlo šta je važno, a naslovi su bili beli na belom.
   ============================================================ */

.zn-monitor-strana {
	--zn-dobro: #2f7d32;  --zn-dobro-tlo: #f2f8ed;  --zn-dobro-ivica: #cfe4bd;
	--zn-pazi:  #8f6600;  --zn-pazi-tlo:  #fdf8e8;  --zn-pazi-ivica:  #efe1ab;
	--zn-lose:  #b3261e;  --zn-lose-tlo:  #fdf2f0;  --zn-lose-ivica:  #f2d4ce;
	--zn-mirno: #00544f;  --zn-mirno-tlo: #eef5f3;  --zn-mirno-ivica: #cfe0dc;
}

/* --- Traka stanja: prvo što oko uhvati --- */
.zn-stanje {
	margin-top: 30px; padding: 34px 36px; border-radius: 22px;
	border: 1px solid var(--zn-mirno-ivica); background: var(--zn-mirno-tlo);
	display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 40px; align-items: center;
}
.zn-stanje.dobro  { border-color: var(--zn-dobro-ivica); background: var(--zn-dobro-tlo); }
.zn-stanje.pazi   { border-color: var(--zn-pazi-ivica);  background: var(--zn-pazi-tlo); }
.zn-stanje.lose   { border-color: var(--zn-lose-ivica);  background: var(--zn-lose-tlo); }

.zn-stanje-broj {
	font-family: var(--outfit-font); font-weight: 600; line-height: .86;
	font-size: clamp(56px, 8vw, 96px); letter-spacing: -.03em;
	font-variant-numeric: tabular-nums; color: var(--zn-mirno); display: block;
}
.zn-stanje.dobro .zn-stanje-broj { color: var(--zn-dobro); }
.zn-stanje.pazi  .zn-stanje-broj { color: var(--zn-pazi); }
.zn-stanje.lose  .zn-stanje-broj { color: var(--zn-lose); }
.zn-stanje-jed {
	display: block; margin-top: 10px; font-size: 12px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--body-color);
}
.zn-stanje-naslov { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 8px; line-height: 1.2; }
.zn-stanje-tekst { font-size: 17px; margin: 0; max-width: 62ch; }
.zn-stanje-meta {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 14px 0 0; font-size: 13px; color: var(--body-color);
}
/* Kad stanje nije broj nego reč (sadnja, požari bez žarišta) */
.zn-stanje.re4 { grid-template-columns: 1fr; }
.zn-stanje-ikona {
	width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: #fff; font-size: 32px; color: var(--zn-mirno); flex: 0 0 auto;
}
.zn-stanje.dobro .zn-stanje-ikona { color: var(--zn-dobro); }
.zn-stanje.pazi  .zn-stanje-ikona { color: var(--zn-pazi); }
.zn-stanje.lose  .zn-stanje-ikona { color: var(--zn-lose); }

/* --- Naslov odeljka unutar strane --- */
.zn-odeljak { margin: 54px 0 22px; }
.zn-odeljak h2 { font-size: clamp(21px, 2.2vw, 27px); margin: 0 0 6px; }
.zn-odeljak p { margin: 0; font-size: 16px; max-width: 70ch; }

/* --- Panel: bela ploča sa VIDLJIVIM naslovom --- */
.zn-panel { background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 26px 28px; height: 100%; }
.zn-panel-glava { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.zn-panel-glava h3 { font-size: 18px; margin: 0; color: var(--title-color); }
.zn-panel-glava i { font-size: 22px; color: var(--theme-color-3); flex: 0 0 auto; }
.zn-izvor { font-size: 13px; color: var(--body-color); margin: 18px 0 0; }

/* --- Skala sa markerom (EAQI) --- */
.zn-skala { margin: 26px 0 6px; }
.zn-skala-traka { position: relative; display: flex; height: 12px; border-radius: 100px; overflow: hidden; }
.zn-skala-traka span { flex: 1; }
.zn-skala-marker {
	position: absolute; top: -7px; width: 4px; height: 26px; border-radius: 100px;
	background: var(--title-color); transform: translateX(-50%); box-shadow: 0 0 0 3px #fff;
}
.zn-skala-oznake { display: flex; list-style: none; padding: 0; margin: 12px 0 0; }
.zn-skala-oznake li { flex: 1; font-size: 12px; color: var(--body-color); text-align: center; line-height: 1.35; }
.zn-skala-oznake li b { display: block; font-weight: 500; color: var(--title-color); }

/* --- Merač sa preporučenom granicom --- */
.zn-meraci { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.zn-merac { background: #fff; border: 1px solid #eaf1e4; border-radius: 16px; padding: 22px 24px; }
.zn-merac-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.zn-merac-glava b { font-size: 16px; color: var(--title-color); }
.zn-merac-vrednost { font-family: var(--outfit-font); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zn-merac-vrednost small { font-size: 14px; font-weight: 400; color: var(--body-color); }
.zn-merac-traka { position: relative; height: 10px; border-radius: 100px; background: #eef3e9; overflow: visible; }
.zn-merac-traka i { display: block; height: 100%; border-radius: 100px; background: var(--zn-dobro); }
.zn-merac.preko .zn-merac-traka i { background: var(--zn-lose); }
.zn-merac-granica { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--title-color); opacity: .55; }
.zn-merac > small { display: block; margin-top: 14px; font-size: 13px; color: var(--body-color); }

/* --- Rang lista sa trakama (gradovi) --- */
.zn-rang { list-style: none; padding: 0; margin: 0; counter-reset: zn-rang; }
.zn-rang li {
	display: grid; grid-template-columns: 26px minmax(96px, 150px) minmax(0, 1fr) auto;
	align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid #f0f4ec;
}
.zn-rang li:last-child { border-bottom: none; }
.zn-rang-mesto { font-size: 13px; color: var(--body-color); font-variant-numeric: tabular-nums; }
.zn-rang-ime { font-weight: 500; color: var(--title-color); }
.zn-rang-ime small { display: block; font-weight: 400; font-size: 12px; color: var(--body-color); }
.zn-rang-traka { height: 8px; border-radius: 100px; background: #f0f4ec; }
.zn-rang-traka i { display: block; height: 100%; border-radius: 100px; background: var(--theme-color); transition: width .4s ease; }
.zn-rang-traka i.dobro { background: var(--zn-dobro); }
.zn-rang-traka i.pazi  { background: #d8ab21; }
.zn-rang-traka i.lose  { background: var(--zn-lose); }
.zn-rang-broj {
	font-family: var(--outfit-font); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums;
	min-width: 62px; text-align: right;
}
.zn-rang-broj small { display: block; font-size: 12px; font-weight: 400; color: var(--body-color); }

/* --- Redovi podataka (reke, žarišta, zemljotresi) --- */
.zn-redovi { list-style: none; padding: 0; margin: 0; }
.zn-red {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
	padding: 13px 0 13px 16px; border-bottom: 1px solid #f0f4ec; position: relative;
}
.zn-red:last-child { border-bottom: none; }
.zn-red::before {
	content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
	width: 3px; border-radius: 100px; background: #dfe8d7;
}
.zn-red.raste::before  { background: #d8ab21; }
.zn-red.opada::before  { background: #5fa3c9; }
.zn-red.jako::before   { background: var(--zn-lose); }
.zn-red-ime { font-weight: 500; color: var(--title-color); }
.zn-red-ime small { font-weight: 400; color: var(--body-color); }
.zn-red-vrednost { font-family: var(--outfit-font); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zn-red-znak {
	font-style: normal; font-size: 13px; border-radius: 100px; padding: 4px 11px; white-space: nowrap;
	background: #f2f5ee; color: var(--body-color); font-variant-numeric: tabular-nums;
}
.zn-red-znak.raste { background: #fdf5df; color: #8f6600; }
.zn-red-znak.opada { background: #eaf3f8; color: #2f6f92; }

/* --- Sliv: grupa reka --- */
.zn-sliv + .zn-sliv { margin-top: 26px; }
.zn-sliv-ime {
	display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
	font-size: 15px; font-weight: 500; color: var(--theme-color-3);
}
.zn-sliv-ime::after { content: ""; flex: 1; height: 1px; background: #e8efe2; }

/* --- Činjenice: mreža malih brojeva --- */
.zn-cinjenice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; margin-top: 22px; }
.zn-cinjenica { background: #fff; border: 1px solid #eaf1e4; border-radius: 16px; padding: 20px 22px; }
.zn-cinjenica b {
	display: block; font-family: var(--outfit-font); font-size: 30px; font-weight: 600; line-height: 1;
	color: var(--theme-color-3); font-variant-numeric: tabular-nums;
}
.zn-cinjenica span { display: block; margin-top: 7px; font-size: 14px; color: var(--body-color); }

/* --- Poučni blok na dnu strane --- */
.zn-objasnjenje { margin-top: 54px; background: #f7faf4; border-radius: 22px; padding: 38px 40px; }
.zn-objasnjenje h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 20px; }
.zn-objasnjenje-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 30px 48px; }
.zn-objasnjenje .zn-izvor { margin-top: 26px; padding-top: 18px; border-top: 1px solid #e6eede; }
.zn-objasnjenje h3 { font-size: 16px; margin: 0 0 8px; color: var(--theme-color-3); }
.zn-objasnjenje p { font-size: 15px; margin: 0; }

@media (max-width: 767px) {
	.zn-stanje { padding: 26px 22px; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
	.zn-stanje-jed { margin-top: 6px; }
	.zn-stanje-tekst { font-size: 16px; }
	.zn-odeljak { margin: 38px 0 18px; }
	.zn-panel { padding: 22px 20px; }
	.zn-objasnjenje { padding: 28px 22px; margin-top: 38px; }

	/* Rang red se prelama u dva sprata, traka ide preko cele širine */
	.zn-rang li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; }
	.zn-rang-traka { grid-column: 1 / -1; grid-row: 2; }
	.zn-rang-broj { grid-column: 3; grid-row: 1; min-width: 0; font-size: 18px; }
	.zn-rang-broj small { display: inline; margin-left: 3px; }

	.zn-red { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
	.zn-red-znak { grid-column: 2; justify-self: end; }
}

/* --- Sadnja: semafor i provera uslova --- */
.zn-semafor { display: flex; align-items: flex-start; gap: 20px; }
.zn-semafor .zn-stanje-ikona { margin-top: 2px; }
.zn-provera { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.zn-provera-stavka { display: flex; gap: 14px; align-items: flex-start; }
.zn-provera-stavka > i {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; font-size: 12px;
	display: flex; align-items: center; justify-content: center; margin-top: 2px;
	background: #fff; color: var(--zn-dobro);
}
.zn-provera-stavka.pazi > i { color: var(--zn-pazi); }
.zn-provera-stavka.lose > i { color: var(--zn-lose); }
.zn-provera-stavka b { display: block; font-size: 15px; color: var(--title-color); margin-bottom: 2px; }
.zn-provera-stavka b span { font-weight: 400; color: var(--body-color); }
.zn-provera-stavka p { font-size: 15px; }

.zn-savet {
	display: flex; align-items: center; gap: 12px; margin: 18px 0 0;
	background: #fdf8e8; border: 1px solid #efe1ab; border-radius: 14px; padding: 14px 20px; font-size: 15px;
}
.zn-savet i { color: #8f6600; font-size: 18px; }

/* --- Prognoza narednih dana, sa ocenom za sadnju --- */
.zn-dani { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.zn-dan { background: #fff; border: 1px solid #eaf1e4; border-radius: 16px; padding: 20px 22px; border-left: 4px solid #dfe8d7; }
.zn-dan.dobro { border-left-color: var(--zn-dobro); }
.zn-dan.pazi  { border-left-color: #d8ab21; }
.zn-dan.lose  { border-left-color: var(--zn-lose); }
.zn-dan-ime { display: block; font-weight: 500; color: var(--title-color); text-transform: capitalize; }
.zn-dan-datum { display: block; font-size: 13px; color: var(--body-color); margin-top: 2px; }
.zn-dan-temp {
	display: block; margin: 12px 0 6px; font-family: var(--outfit-font); font-weight: 600;
	font-size: 30px; line-height: 1; color: var(--theme-color-3); font-variant-numeric: tabular-nums;
}
.zn-dan-temp small { font-size: 17px; font-weight: 400; color: var(--body-color); margin-left: 8px; }
.zn-dan-ocena { font-size: 14px; color: var(--body-color); }

/* --- Kalendar sadnje kroz godinu --- */
.zn-kalendar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.zn-mesec { border-radius: 14px; padding: 16px 12px; text-align: center; border: 1px solid transparent; }
.zn-mesec.dobro { background: var(--zn-dobro-tlo); border-color: var(--zn-dobro-ivica); }
.zn-mesec.pazi  { background: var(--zn-pazi-tlo);  border-color: var(--zn-pazi-ivica); }
.zn-mesec.lose  { background: #f5f5f2; border-color: #e6e6e0; }
.zn-mesec.sada { box-shadow: 0 0 0 2px var(--theme-color-3); }
.zn-mesec b { display: block; font-size: 14px; color: var(--title-color); text-transform: capitalize; }
.zn-mesec span { display: block; margin-top: 4px; font-size: 12px; color: var(--body-color); }

/* --- Mapa požara preko cele širine --- */
.zn-mapa-puna { width: 100%; height: 480px; border-radius: 18px; }
.zn-mapa-puna + .zn-mapa-legenda { margin-top: 16px; }

/* --- Granica preporuke na rang traci --- */
.zn-rang-traka { position: relative; }
.zn-rang-granica { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--title-color); opacity: .45; }
.zn-rang-ime a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.zn-rang-ime a:hover { color: var(--theme-color-3); border-bottom-color: currentColor; }

@media (max-width: 767px) {
	.zn-semafor { gap: 14px; }
	.zn-stanje-ikona { width: 56px; height: 56px; font-size: 24px; }
	.zn-kalendar { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.zn-mesec { padding: 13px 8px; }
	.zn-mapa-puna { height: 340px; }
}

/* Požar nikad nije „zeleno dobro": trake žarišta idu toplom skalom */
.zn-rang-traka i.slabo   { background: #d9a91a; }
.zn-rang-traka i.srednje { background: #e8862e; }
.zn-rang-traka i.jako    { background: #d64545; }

@media (max-width: 575px) {
	/* Šest naziva stepena se na telefonu slepi u nečitljiv niz.
	   Ostaju samo krajevi skale, jer trenutni stepen već piše u traci stanja. */
	.zn-skala-oznake li { display: none; }
	.zn-skala-oznake li:first-child { display: block; text-align: left; }
	.zn-skala-oznake li:last-child { display: block; text-align: right; }
	.zn-skala-oznake li b { display: inline; }

	/* Izvor i vreme u jednom bloku, da živa tačka ne ostane sama u redu */
	.zn-stanje-meta { display: block; }
	.zn-stanje-meta .zn-uzivo-tacka { display: inline-block; vertical-align: middle; margin-left: 6px; }
}

/* Naslov kartice na pregledu vodi na svoju podstranicu */
.zn-glava-veza a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.zn-glava-veza a i { font-size: 13px; color: var(--theme-color-3); transition: transform .2s ease; }
.zn-glava-veza a:hover { color: var(--theme-color-3); }
.zn-glava-veza a:hover i { transform: translateX(4px); }

/* ============================================================
   §48 STRANA GRADA I POREĐENJE DVA GRADA
   ============================================================ */

.zn-nazad { margin: 26px 0 0; font-size: 15px; }
.zn-nazad a { color: var(--theme-color-3); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.zn-nazad a i { font-size: 12px; transition: transform .2s ease; }
.zn-nazad a:hover i { transform: translateX(-4px); }

/* Izbor dva grada; bez skripte radi kao običan obrazac */
.zn-izbor-gradova {
	display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
	background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 24px 26px; margin-top: 24px;
}
.zn-izbor-gradova .zn-polje { flex: 1 1 200px; margin: 0; }
.zn-izbor-vs { padding-bottom: 14px; color: var(--body-color); font-size: 14px; }

/* Tabela poređenja: mera levo, dve vrednosti desno */
.zn-uporedi-zaglavlje, .zn-uporedi-red {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px; align-items: center;
}
.zn-uporedi-zaglavlje { padding-bottom: 14px; border-bottom: 2px solid #eef3e9; }
.zn-uporedi-zaglavlje b { font-size: 16px; color: var(--title-color); }
.zn-uporedi-red { padding: 14px 0; border-bottom: 1px solid #f0f4ec; }
.zn-uporedi-red:last-child { border-bottom: none; }
.zn-uporedi-mera { font-size: 15px; color: var(--body-color); }
.zn-uporedi-vrednost {
	font-family: var(--outfit-font); font-weight: 600; font-size: 18px;
	font-variant-numeric: tabular-nums; color: var(--title-color);
}
/* Povoljnija od dve vrednosti; smer zavisi od mere, računa ga strana */
.zn-uporedi-vrednost.bolji { color: var(--zn-dobro); }
.zn-uporedi-vrednost.bolji::after {
	content: "povoljnije"; display: block; font-family: var(--body-font, inherit);
	font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
}

.zn-savet span { flex: 1; }
.zn-savet a { color: var(--theme-color-3); }
.zn-cinjenica a { color: inherit; text-decoration: none; border-bottom: 1px solid #dfe8d7; }
.zn-cinjenica a:hover { color: var(--theme-color-3); }

@media (max-width: 767px) {
	.zn-izbor-gradova { padding: 20px; gap: 12px; }
	.zn-izbor-gradova .zn-polje { flex: 1 1 100%; }
	.zn-izbor-vs { display: none; }
	.zn-izbor-gradova button { width: 100%; justify-content: center; }

	.zn-uporedi-zaglavlje, .zn-uporedi-red { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
	.zn-uporedi-vrednost { font-size: 16px; }
	.zn-uporedi-vrednost.bolji::after { font-size: 10px; }
}

/* --- Ugradivi prikaz: podešavanja levo, živi pregled desno --- */
.zn-ugradi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.zn-ugradi-podesavanja {
	background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 24px 26px;
	display: grid; gap: 16px;
}
.zn-ugradi-podesavanja .zn-polje { margin: 0; }
.zn-ugradi-pregled {
	background: #f2f5ee; border: 1px dashed #d5e0ca; border-radius: 18px; padding: 24px;
	display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 300px;
}
.zn-ugradi-oznaka { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--body-color); }

.zn-kod {
	background: #10231f; color: #dce9dd; border-radius: 14px; padding: 20px 22px; margin: 0 0 18px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
	line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 991px) {
	.zn-ugradi { grid-template-columns: 1fr; }
	.zn-ugradi-pregled { min-width: 0; }
}

/* --- Kontrolna tabla na pregledu: pet pločica koje vode u dubinu --- */
.zn-tabla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); gap: 16px; }
.zn-plocica { padding: 22px 20px; }
.zn-plocica {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 24px 26px;
	border-top: 4px solid #dfe8d7; transition: border-color .2s ease, transform .2s ease;
}
.zn-plocica:hover { transform: translateY(-3px); border-color: #cfe0d3; border-top-color: var(--theme-color); }
.zn-plocica.dobro { border-top-color: var(--zn-dobro, #2f7d32); }
.zn-plocica.pazi  { border-top-color: #d8ab21; }
.zn-plocica.lose  { border-top-color: var(--zn-lose, #b3261e); }
.zn-plocica-glava { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.zn-plocica-glava i { font-size: 20px; color: var(--theme-color-3); }
.zn-plocica-glava b { font-size: 15px; color: var(--title-color); }
.zn-plocica-broj {
	display: block; font-family: var(--outfit-font); font-weight: 600; font-size: 42px; line-height: 1;
	color: var(--theme-color-3); font-variant-numeric: tabular-nums;
}
.zn-plocica-broj small { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--body-color); letter-spacing: .04em; }
.zn-plocica.dobro .zn-plocica-broj { color: var(--zn-dobro, #2f7d32); }
.zn-plocica.pazi  .zn-plocica-broj { color: var(--zn-pazi, #8f6600); }
.zn-plocica.lose  .zn-plocica-broj { color: var(--zn-lose, #b3261e); }
.zn-plocica-ocena { display: block; margin-top: 14px; font-size: 15px; color: var(--title-color); }
.zn-plocica-ocena::first-letter { text-transform: uppercase; }
.zn-plocica-dopuna { display: block; margin-top: 4px; font-size: 13px; color: var(--body-color); }
.zn-plocica-veza {
	display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 14px;
	border-top: 1px solid #f0f4ec; font-size: 14px; color: var(--theme-color-3);
}
.zn-plocica-veza i { font-size: 12px; transition: transform .2s ease; }
.zn-plocica:hover .zn-plocica-veza i { transform: translateX(4px); }

/* Vodostaj se crta plavo, da se ne pomeša sa zelenim stupcima požara */
.zn-stubac-voda { background: linear-gradient(180deg, #7cb7d6, #3d7fa5); }

/* --- „Doniraj" u meniju: tekst ostaje kao i ostale stavke, ističe ga
       samo zeleno drvce ispred. Obojen tekst se u ovom meniju slabo čitao. --- */
.zn-meni-doniraj > a { display: inline-flex !important; align-items: center; gap: 7px; }
.zn-meni-doniraj > a i { font-size: 12px; color: var(--theme-color); transition: transform .25s ease; }
.zn-meni-doniraj > a:hover i { transform: scale(1.18) translateY(-1px); }

/* ============================================================
   §49 DONACIJE KAO PRIČA
   Uvod, put donacije, uplata, podrška. Sadržaj se otkriva pri
   skrolu, ali je vidljiv i bez skripte: klasa `zn-animacije` se
   dodaje tek kad pregledač ume da ga vrati.
   ============================================================ */

.zn-animacije .zn-otkriva { opacity: 0; transform: translateY(22px); }
.zn-animacije .zn-otkriva.vidljivo {
	opacity: 1; transform: none;
	transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1);
}

/* --- Uvod --- */
.zn-prica-glava { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 30px 60px; align-items: start; }
.zn-prica-naslov { font-size: clamp(30px, 4vw, 50px); line-height: 1.12; margin: 0; }
.zn-prica-vodeci { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; color: var(--title-color); margin-bottom: 18px; }
.zn-prica-tekst { font-size: 17px; margin: 0; }

.zn-prica-slika { position: relative; margin-top: 50px; border-radius: 24px; overflow: hidden; }
.zn-prica-slika img { width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; display: block; }
.zn-prica-potpis {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 30px 22px;
	color: #fff; font-size: 14px;
	background: linear-gradient(180deg, rgba(0, 34, 30, 0) 0%, rgba(0, 34, 30, .72) 100%);
}

/* --- Put donacije: vremenska linija sa tačkama --- */
.zn-put-uvod { max-width: 640px; margin: 14px auto 0; font-size: 17px; }
.zn-put-koraci { list-style: none; padding: 0; margin: 0; max-width: 760px; margin-inline: auto; }
.zn-put-korak { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding-bottom: 38px; }
.zn-put-korak:last-child { padding-bottom: 0; }

/* Linija koja spaja korake; poslednji je nema jer se put završava */
.zn-put-korak::before {
	content: ""; position: absolute; left: 31px; top: 64px; bottom: 6px; width: 2px;
	background: linear-gradient(180deg, #cfe0d3, #eaf1e4);
	transform: scaleY(0); transform-origin: top;
}
.zn-put-korak.vidljivo::before { transform: scaleY(1); transition: transform .7s ease .15s; }
.zn-animacije .zn-put-korak:not(.vidljivo)::before { transform: scaleY(0); }
.zn-put-korak:last-child::before { display: none; }

.zn-put-tacka {
	width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid #dfe8d7; color: var(--theme-color-3); font-size: 24px;
	position: relative; z-index: 1;
}
.zn-put-korak.vidljivo .zn-put-tacka { border-color: var(--theme-color); }
.zn-put-telo { padding-top: 6px; }
.zn-put-broj { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--body-color); margin-bottom: 6px; }
.zn-put-telo h3 { font-size: clamp(20px, 2.2vw, 25px); margin: 0 0 8px; }
.zn-put-telo p { font-size: 16px; margin: 0; max-width: 60ch; }

/* --- Traka logotipa koja se sama pomera --- */
.zn-podrska-naslov { font-size: clamp(22px, 2.6vw, 32px); }
.zn-logotraka {
	overflow: hidden; position: relative; padding: 8px 0;
	/* Krajevi se stapaju sa podlogom, da logotipi ne iskaču naglo */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.zn-logotraka-tok { display: flex; align-items: center; gap: 56px; width: max-content; }
.zn-animacije .zn-logotraka-tok { animation: zn-klizi calc(var(--zn-broj, 5) * 5s) linear infinite; }
.zn-logotraka:hover .zn-logotraka-tok, .zn-logotraka:focus-within .zn-logotraka-tok { animation-play-state: paused; }
@keyframes zn-klizi {
	from { transform: translateX(0); }
	/* Pomera se za tačno polovinu; druga polovina je istovetna kopija
	   prve, pa se povratak na početak ne primeti. */
	to { transform: translateX(-50%); }
}
.zn-logotraka-stavka { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 56px; }
.zn-logotraka-stavka img {
	max-height: 44px; max-width: 130px; width: auto; object-fit: contain;
	filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease;
}
.zn-logotraka-stavka:hover img { filter: none; opacity: 1; }
.zn-logotraka-ime { font-size: 16px; color: var(--body-color); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.zn-logotraka-tok { animation: none !important; }
}

@media (max-width: 991px) {
	.zn-prica-glava { grid-template-columns: 1fr; gap: 22px; }
	.zn-prica-slika { margin-top: 34px; }
}

@media (max-width: 575px) {
	.zn-put-korak { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 30px; }
	.zn-put-tacka { width: 48px; height: 48px; font-size: 19px; }
	.zn-put-korak::before { left: 23px; top: 50px; }
	.zn-logotraka-tok { gap: 34px; }
	.zn-logotraka-stavka img { max-height: 36px; max-width: 104px; }
	.zn-prica-potpis { padding: 30px 20px 16px; font-size: 13px; }
}

/* ============================================================
   §50 JAVNA LENTA PRIJAVA
   ============================================================ */

.zn-lenta-alatke { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 30px 0 22px; }
.zn-lenta-vrste { display: flex; gap: 9px; flex-wrap: wrap; }
.zn-lenta-vrste .zn-faq-grupa { text-decoration: none; }
.zn-lenta-poredak { display: flex; gap: 4px; background: #f2f5ee; border-radius: 100px; padding: 4px; }
.zn-lenta-poredak a {
	padding: 8px 16px; border-radius: 100px; font-size: 14px;
	color: var(--body-color); text-decoration: none; white-space: nowrap;
}
.zn-lenta-poredak a.aktivan { background: #fff; color: var(--theme-color-3); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }

.zn-lenta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.zn-prijava-kartica {
	background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; overflow: hidden;
	display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease;
}
.zn-prijava-kartica:hover { border-color: #cfe0d3; transform: translateY(-3px); }

.zn-prijava-slika { position: relative; display: block; aspect-ratio: 4 / 3; background: #eef3e9; overflow: hidden; }
.zn-prijava-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.zn-prijava-kartica:hover .zn-prijava-slika img { transform: scale(1.04); }
.zn-prijava-bez-slike { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 34px; color: #b9c9ae; }
.zn-prijava-oznaka {
	position: absolute; left: 12px; top: 12px; background: rgba(0, 69, 64, .9); color: #fff;
	font-size: 12px; padding: 6px 12px; border-radius: 100px;
}
.zn-prijava-oznaka.statična { position: static; display: inline-block; margin-bottom: 14px; }
.zn-prijava-brojac {
	position: absolute; right: 12px; top: 12px; background: rgba(255, 255, 255, .92);
	font-size: 12px; padding: 6px 11px; border-radius: 100px; color: var(--title-color);
}

.zn-prijava-telo { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.zn-prijava-telo h3 { font-size: 18px; margin: 0 0 8px; line-height: 1.35; }
.zn-prijava-telo h3 a { color: inherit; text-decoration: none; }
.zn-prijava-telo h3 a:hover { color: var(--theme-color-3); }
.zn-prijava-opis { font-size: 15px; margin: 0 0 12px; }
.zn-prijava-potpis { font-size: 13px; color: var(--body-color); margin: 0 0 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.zn-prijava-dno { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid #f0f4ec; }
.zn-prijava-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--body-color); text-decoration: none; }
.zn-prijava-meta:hover { color: var(--theme-color-3); }
.zn-podrska-forma { margin: 0; }
.zn-podrska-dugme {
	display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dfe8d7; background: #fff;
	border-radius: 100px; padding: 7px 14px; font-size: 14px; color: var(--body-color); transition: all .2s ease;
}
.zn-podrska-dugme:hover { border-color: var(--theme-color); color: var(--theme-color-3); }
.zn-podrska-dugme.aktivna { background: #eef7e4; border-color: #b9d98a; color: var(--theme-color-3); }
.zn-podrska-dugme.velika { padding: 13px 24px; font-size: 16px; gap: 10px; }
.zn-podrska-dugme.velika b { padding-left: 10px; margin-left: 4px; border-left: 1px solid #dfe8d7; }

/* --- Pojedinačna prijava --- */
.zn-prijava-detalj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 30px; align-items: start; margin-top: 24px; }
.zn-prijava-galerija { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.zn-prijava-foto { margin: 0; border-radius: 18px; overflow: hidden; background: #eef3e9; }
.zn-prijava-foto.prva { grid-column: 1 / -1; }
.zn-prijava-foto img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; }
.zn-prijava-naslov { font-size: clamp(24px, 3vw, 34px); margin: 0 0 14px; }
.zn-prijava-tekst { font-size: 17px; margin-bottom: 24px; }
.zn-prijava-cinjenice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 18px; padding: 20px 0; border-top: 1px solid #f0f4ec; border-bottom: 1px solid #f0f4ec; }
.zn-prijava-cinjenice span { display: block; font-size: 13px; color: var(--body-color); margin-bottom: 4px; }
.zn-prijava-cinjenice b { font-size: 15px; color: var(--title-color); display: inline-flex; align-items: center; gap: 7px; }
.zn-prijava-radnje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.zn-prijava-mapa { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--theme-color-3); text-decoration: none; }
.zn-prijava-mapa:hover { text-decoration: underline; }
.zn-mapa-prijava { width: 100%; height: 340px; border-radius: 18px; }

.zn-koraci-stanja { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.zn-koraci-stanja li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--body-color); }
.zn-koraci-stanja li i { font-size: 15px; color: #cfd9c6; }
.zn-koraci-stanja li.proslo { color: var(--title-color); }
.zn-koraci-stanja li.proslo i { color: var(--theme-color); }

/* --- Komentari --- */
.zn-komentari { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 20px; }
.zn-komentar { display: flex; gap: 14px; }
.zn-komentar-slovo {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #eef3e9;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--outfit-font); font-weight: 600; color: var(--theme-color-3);
}
.zn-komentar-glava { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.zn-komentar-glava b { font-size: 15px; color: var(--title-color); }
.zn-komentar-glava time { font-size: 13px; color: var(--body-color); }
.zn-komentar-tekst { font-size: 15px; margin: 0; }
.zn-komentar-forma { padding-top: 26px; border-top: 1px solid #f0f4ec; }

@media (max-width: 991px) {
	.zn-prijava-detalj { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.zn-lenta-alatke { flex-direction: column; align-items: stretch; }
	.zn-lenta-poredak { justify-content: center; }
	.zn-lenta { gap: 16px; }
	.zn-prijava-dno { gap: 12px; }
	.zn-mapa-prijava { height: 260px; }
}

/* --- Ustanove sa kojima se usklađuje rad na terenu --- */
.zn-nadlezni { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 22px; }
.zn-nadlezni-stavka { display: flex; gap: 16px; background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 22px 24px; }
.zn-nadlezni-ikona {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: #f2f8ed;
	display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--theme-color-3);
}
.zn-nadlezni-stavka h3 { font-size: 16px; margin: 0 0 7px; line-height: 1.4; }
.zn-nadlezni-stavka h3 a { color: var(--title-color); text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; }
.zn-nadlezni-stavka h3 a:hover { color: var(--theme-color-3); }
.zn-nadlezni-stavka h3 a i { font-size: 11px; color: var(--body-color); }
.zn-nadlezni-stavka p { font-size: 15px; margin: 0; }

/* ============================================================
   §51 MOBILNE DORADE
   ============================================================ */

@media (max-width: 575px) {
	/* Pet veličina majice mora da stane u jedan red; sa 58px minimuma
	   se prelamalo u dva reda i obrazac je izgledao neuredno. */
	.zn-velicine { gap: 6px; flex-wrap: nowrap; }
	.zn-velicina { flex: 1 1 0; min-width: 0; }
	.zn-velicina span { min-width: 0; width: 100%; padding: 10px 4px; font-size: 14px; }

	/* Široka dugmad (privatno/javno) i dalje smeju u dva reda */
	.zn-velicine:has(.zn-velicina-siroka) { flex-wrap: wrap; }
	.zn-velicina-siroka { flex: 1 1 100%; }
	.zn-velicina-siroka span { padding: 10px 16px; }

	.zn-saglasnost { font-size: 13.5px; }
}

@media (max-width: 767px) {
	/* --- Kontakt kartice iznad podnožja ---
	   Na telefonu su bile visoke skoro pola ekrana, sa ikonom u sopstvenom
	   redu i praznim prostorom oko nje. Sada je ikona levo, podatak desno,
	   pa sve tri stanu u prostor koji je ranije trošila jedna. */
	.contact-info-layout { gap: 10px; }
	.contact-info {
		display: grid; grid-template-columns: 46px minmax(0, 1fr);
		align-items: center; gap: 14px; padding: 14px 16px;
	}
	.contact-info .icon-wrap { width: 46px; height: 46px; margin: 0; }
	.contact-info .icon-shape { display: none; }
	.contact-info .icon { width: 46px; height: 46px; font-size: 17px; }
	.contact-info h3 {
		grid-column: 2; margin: 0; font-size: 15px; line-height: 1.35;
		overflow-wrap: anywhere;
	}
	.contact-info p { grid-column: 2; margin: 2px 0 0; font-size: 13px; }

	/* --- Podnožje ---
	   Logotip je dodirivao karticu iznad, a stupci su se nizali jedan
	   ispod drugog u beskraj. Sada su brzi linkovi i programi u dva reda. */
	.footer-section { padding-top: 44px; }
	.footer-logo { margin-top: 8px; }
	.footer-widget { margin-bottom: 26px; }
	.footer-widget .w-title { margin-bottom: 12px; }
	.footer-widget ul {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px 16px;
	}
	.footer-widget ul li { margin: 0; }
	.footer-widget ul li a { font-size: 14.5px; }
}

/* Razmak između poslednje sekcije i podnožja, da se logotip ne lepi
   za karticu iznad; na širokom ekranu to je i do sada radilo. */
.contact-info-section + .footer-section,
.contact-info-section { position: relative; }
@media (max-width: 991px) {
	.contact-info-section { padding-bottom: 34px; }
}

/* --- Bočni meni na telefonu ---
   Zaglavlje i bočni meni su oba imali z-index 99, pa je logotip iz
   zaglavlja probijao kroz otvoreni meni. Meni sada ide iznad svega
   osim donje trake, koja se ionako sklanja dok je meni otvoren. */
.off-canvas-menubar { z-index: 1000; }
body.zn-meni-otvoren .zn-mobilna-traka { opacity: 0; pointer-events: none; }
.off-canvas-overlay, .body-overlay { z-index: 999; }

@media (max-width: 991px) {
	/* --- Prečice monitora ostaju pri vrhu ---
	   Strane monitora su duge; bez ovoga se za prelazak sa vazduha na reke
	   moralo skrolovati skroz nazad. Traka se lepi za vrh, kliza vodoravno
	   i ne prelama se u dva reda. */
	/* ⚠ Bez scroll-snap-type i -webkit-overflow-scrolling: u sadejstvu sa
	   position:sticky one na telefonu izazivaju treperenje trake pri
	   skrolovanju, jer pregledač u svakom kadru iznova računa gde traka
	   staje. Isto važi za prelaz na senci: pali se i gasi na granici. */
	.zn-monitor-meni {
		position: sticky; top: 0; z-index: 80;
		flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
		gap: 7px; margin: 0 -16px 8px; padding: 10px 16px;
		/* Puna, neprozirna boja: providna traka pušta sadržaj da se probije */
		background: #f7f9f4;
		border-bottom: 1px solid #eef2ea;
		scrollbar-width: none;
	}
	.zn-monitor-meni::-webkit-scrollbar { display: none; }

	.zn-monitor-veza { flex: 0 0 auto; }
}

/* ============================================================
   §52 TRAKA PREGLEDA NACRTA
   Vidi je samo prijavljen admin. Namerno je upadljiva: bez nje bi
   se lako zaboravilo da se gleda neobjavljena verzija.
   ============================================================ */
.zn-traka-nacrta {
	position: sticky; top: 0; z-index: 1100;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: #1f2937; color: #fff; padding: 10px 20px; font-size: 14.5px;
}
.zn-traka-nacrta-tekst { display: flex; align-items: center; gap: 10px; }
.zn-traka-nacrta-tekst i { color: #fbbf24; }
.zn-traka-nacrta b { font-weight: 600; }
.zn-traka-nacrta-dugmad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zn-traka-nacrta form { margin: 0; }
.zn-nacrt-objavi {
	background: var(--theme-color, #85BF18); color: #10231f; border: none;
	border-radius: 100px; padding: 7px 18px; font-size: 14px; font-weight: 600;
}
.zn-nacrt-objavi:hover { background: #96d21c; }
.zn-nacrt-veza {
	background: transparent; color: #d1d5db; border: 1px solid #4b5563;
	border-radius: 100px; padding: 6px 16px; font-size: 14px; text-decoration: none;
	display: inline-flex; align-items: center;
}
.zn-nacrt-veza:hover { color: #fff; border-color: #9ca3af; }

@media (max-width: 575px) {
	.zn-traka-nacrta { padding: 9px 14px; font-size: 13.5px; gap: 10px; }
	.zn-traka-nacrta-dugmad { width: 100%; }
	.zn-nacrt-objavi, .zn-nacrt-veza { flex: 1; justify-content: center; text-align: center; }
}

/* ============================================================
   §53 BOČNI MENI NA TELEFONU
   ============================================================ */
@media (max-width: 767px) {
	/* Preko celog ekrana je delovalo kao zasebna strana, a ne kao meni
	   iz kog se izlazi. Ostaje vidljiv deo sadržaja sa desne strane. */
	.off-canvas-menubar-body { width: 60%; min-width: 260px; max-width: 340px; }

	/* ⚠ Tema drži `max-height: calc(100vh - 200px)` i sopstveni skrol na
	   meniju. Zbog toga su dugmad i kontakt padali ispod vidljivog dela,
	   a ispod njih je ostajao prazan beo prostor koji je delovao kao da
	   ih nešto pokriva. Skrol sada nosi celo telo menija. */
	.off-canvas-menu {
		max-height: none; overflow-y: visible;
		padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	}
	.off-canvas-menubar-body { display: flex; flex-direction: column; }
	.zn-meni-dno { padding-bottom: 12px; }
}

/* Napomena uz devizne instrukcije: sitnija od podataka, ali čitljiva */
.zn-deviz-napomena {
	margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #eef2ea;
	font-size: 14px; line-height: 1.55; color: var(--body-color);
}

/* ============================================================
   §54 MATERIJALI ZA PREUZIMANJE
   ============================================================ */
.zn-materijali { display: grid; gap: 14px; }
.zn-materijal {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center;
	background: #fff; border: 1px solid #eaf1e4; border-radius: 18px; padding: 20px 24px;
	transition: border-color .2s ease;
}
.zn-materijal:hover { border-color: #cfe0d3; }
.zn-materijal-ikona {
	width: 56px; height: 56px; border-radius: 14px; background: #f2f8ed;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px; color: var(--theme-color-3);
}
.zn-materijal-telo h3 { font-size: 18px; margin: 0 0 6px; line-height: 1.35; }
.zn-materijal-opis { font-size: 15px; margin: 0 0 8px; }
.zn-materijal-meta {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 0; font-size: 13px; color: var(--body-color);
}
.zn-materijal-oznaka {
	background: #eef3e8; color: var(--theme-color-3); border-radius: 100px; padding: 3px 11px; font-size: 12px;
}
.zn-materijal-dugme {
	display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
	background: var(--theme-color-2); color: var(--theme-color-3); text-decoration: none;
	border-radius: 100px; padding: 11px 22px; font-size: 15px; font-weight: 500;
	transition: background .2s ease;
}
.zn-materijal-dugme:hover { background: #ffd54a; color: var(--theme-color-3); }

@media (max-width: 575px) {
	.zn-materijal { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 18px; }
	.zn-materijal-ikona { width: 44px; height: 44px; font-size: 19px; }
	.zn-materijal-dugme { grid-column: 1 / -1; justify-content: center; }
}