/* =====================================================================
   MODERNO.CSS - osvezenje dizajna javnog sajta i ucenickog portala (2026)
   Ucitava se POSLE css/main.css (preko include/jezik_js.php) i samo ga
   nadjacava: struktura stranica ostaje ista. Uklanjanjem jedne <link>
   linije u jezik_js.php vraca se stari izgled.
   Teme: html[data-tema="a"] (moderni koral) / html[data-tema="b"] (crvena iz loga + teget)
   ===================================================================== */

:root,
html[data-tema="a"] {
	--prim: #ef5b45;
	--prim-tamna: #d4432e;
	--prim-svetla: #fdeeea;
	--akc: #f4a931;
	--top-ikona: #ff8f7e;
	--top-bg: #1f2937;
	--futer-bg: #1f2937;
	--futer-tekst: #cbd5e1;
}
html[data-tema="b"] {
	--prim: #c1272d;
	--prim-tamna: #9e1c22;
	--prim-svetla: #fbe9ea;
	--akc: #e8a33d;
	--top-ikona: #f0787d;
	--top-bg: #14213d;
	--futer-bg: #14213d;
	--futer-tekst: #c7cfe0;
}
:root {
	--tekst: #2b3442;
	--naslov: #111827;
	--muted: #6b7280;
	--linija: #e7e9ee;
	--pozadina: #f6f7f9;
	--kartica: #ffffff;
	--radius: 14px;
	--radius-mali: 10px;
	--senka: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
	--senka-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 16px 36px rgba(16, 24, 40, .12);
	--font-tekst: "Inter", "Noto Sans", Arial, sans-serif;
	--font-naslov: "Manrope", "Inter", "Noto Sans", Arial, sans-serif;
	--sirina: 1200px;
}

/* ---------- osnova ---------- */
body {
	font-family: var(--font-tekst);
	font-size: 16px;
	line-height: 1.65;
	color: var(--tekst);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-naslov);
	color: var(--naslov);
	font-weight: 700;
	letter-spacing: -0.01em;
}
h2 { font-size: 30px; line-height: 1.25; margin-bottom: 18px; }
h3 { font-size: 20px; line-height: 1.35; }
h4 { font-size: 18px; }
a { color: var(--prim); transition: color .2s; }
a:hover { color: var(--prim-tamna); }
p { margin-bottom: 1em; }
::selection { background: var(--prim); color: #fff; }

/* tanka linija umesto trobojnog separatora */
hr.divider-color, hr.divider-big { height: 1px; background: var(--linija); border: 0; margin: 0; }
hr.divider-color:before {
	width: 56px; height: 3px; margin: -1px auto 0;
	border: 0; border-radius: 3px; background: var(--prim);
}
hr.divider-big:before { display: none; }

/* ---------- gornja traka ---------- */
header, header.only-color, .contact-page header, .shop header { background: #fff; background-image: none; }
header:before { display: none; }
.page-header-top { background: var(--top-bg); }
.page-header-top address { color: rgba(255, 255, 255, .85); font-size: 13px; }
.page-header-top address a { color: rgba(255, 255, 255, .85); line-height: 38px; }
.page-header-top address a:hover { color: #fff; }
.page-header-top address .phone-number i,
.page-header-top address .email i {
	background: none; color: var(--top-ikona); width: auto; height: auto; margin-right: 6px;
}
.header-top-panel .share-toggle-button { background: transparent; color: rgba(255, 255, 255, .85); }
/* desni kvadrat (deljenje / mreze) - bio narandzast #DB9F14 iz main.css */
#top_social_links_wrapper, .header-top-panel .search-open { background-color: var(--prim); transition: background-color .2s; }
#top_social_links_wrapper:hover { background-color: var(--prim-tamna); }
.header-top-panel .cws_social_links a { color: #fff; }

/* ---------- glavni meni (sticky) ---------- */
.sticky-menu {
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 1px 0 var(--linija);
	backdrop-filter: saturate(160%) blur(8px);
	-webkit-backdrop-filter: saturate(160%) blur(8px);
}
.sticky-menu.scrolling { box-shadow: 0 6px 24px rgba(16, 24, 40, .08); }
.sticky-menu .logo { height: 58px; margin: 12px 0; }
.sticky-menu.scrolling .logo { height: 48px; margin: 6px 0; }

.main-nav { font-family: var(--font-naslov); font-size: 15px; font-weight: 600; }
/* tema daje li line-height 100px (64px pri skrolu) - link je inline-block normalne visine, pa je "pilula" samo oko teksta, centrirana */
.main-nav > ul > li > a { display: inline-block; vertical-align: middle; line-height: 20px; padding: 9px 15px; margin-left: 4px; border-radius: 999px; color: var(--naslov); transition: background .2s, color .2s; }
.main-nav.mobile_nav > ul > li > a { display: block; line-height: 24px; }
.main-nav > ul > li > a:after { display: none; }
.main-nav > ul > li > a:hover,
.main-nav > ul > li:hover > a { background: var(--prim-svetla); color: var(--prim); }
.main-nav > ul > li > a.active { background: var(--prim); color: #fff; }

/* pri promeni velicine prozora: desktop meni nikad ne sme da "pobegne" udesno (stranica bi postala sira
   od prozora i sve centrirano, npr. putanja, bi se pomerilo) - stavke se prelamaju umesto da izlaze van */
/* html: hidden (prenosi se na prozor); body: clip - NE hidden, da body ne postane sopstveni scroll
   kontejner (tada bi $(window).scroll u temi - sticky meni - prestao da radi) */
html { overflow-x: hidden; }
body { overflow-x: clip; }
.main-nav:not(.mobile_nav) > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.main-nav:not(.mobile_nav) > ul > li { float: none; }
@media screen and (max-width: 1199px) {
	.main-nav:not(.mobile_nav) > ul > li > a { padding: 8px 11px; margin-left: 2px; font-size: 14px; }
}

/* padajuci / mega meni */
.main-nav ul ul,
.main-nav .megamenu > ul {
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--senka-hover);
	overflow: hidden;
}
.main-nav .header-megamenu {
	font-family: var(--font-naslov); font-weight: 700; color: var(--prim);
	text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}
.main-nav .megamenu ul ul a { border-radius: 8px; }
.main-nav .megamenu ul ul a:hover { background: var(--prim-svetla); color: var(--prim); }
.main-nav .megamenu img { border-radius: var(--radius-mali); }

/* mobilni meni */
.main-nav .mobile_menu_switcher { background: var(--prim); border-radius: var(--radius-mali); -webkit-font-smoothing: antialiased; font-size: 18px; }
.mobile_nav .mobile_menu_switcher:before { content: "\f0c9"; }
.main-nav.mobile_nav > ul { border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--senka-hover); }
.main-nav.mobile_nav > ul > li > a { border-radius: 0; margin: 0; }
/* zaglavlje "Meni" i red "Nazad" u mobilnom podmeniju (ubacuje js/main.js) - bez stare tirkizne boje */
.main-nav.mobile_nav ul > .back,
.main-nav.mobile_nav ul > .header-menu {
	background: var(--top-bg); color: #fff; font-family: var(--font-naslov); font-size: 15px;
	font-weight: 700; text-transform: none; border-radius: var(--radius) var(--radius) 0 0;
}
.main-nav.mobile_nav ul > .back a { color: #fff; }
.main-nav.mobile_nav ul > .back a:hover { background: transparent; color: #fff; opacity: .85; }

/* ---------- traka sa naslovom / putanjom (unutrasnje strane) ---------- */
/* Pri maksimizovanju prozora tema (js) izmeri visinu zaglavlja dok se meni jos prebacuje iz mobilnog -
   upise premalu inline visinu, pa float meni "visi" preko trake i putanja se centrira pored njega.
   Zaglavlje zato uvek obuhvata svoje float-ove, a traka uvek pocinje ispod njih. */
.sticky-menu .grid-row:after { content: ""; display: table; clear: both; }
.page-title { clear: both; }
/* dok meni nije "zalepljen" pri skrolu, visina omotaca = stvarna visina menija (inline vrednost iz js-a
   treba samo dok je meni position: fixed, da stranica ne skoci) */
.sticky-wrapper:has(> .sticky-menu:not(.scrolling)) { height: auto !important; }
.page-title {
	background: linear-gradient(135deg, var(--prim-svetla) 0%, #ffffff 70%);
	border-bottom: 1px solid var(--linija);
}
.page-title nav,
.page-title .bread-crumb { color: var(--muted); text-transform: none; font-size: 14px; padding: 16px 0; }
.page-title .bread-crumb a { color: var(--muted); }
.page-title .bread-crumb a:last-child { color: var(--naslov); font-weight: 600; }
.page-title .bread-crumb i { color: var(--prim); }
.page-title h1 { background: none; color: var(--naslov); font-family: var(--font-naslov); font-weight: 800; padding: 0; }

.page-content { padding: 48px 0; }
.page-content main section h2:first-child { margin-bottom: 14px; }

/* ---------- dugmad ---------- */
.cws-button {
	border: 0;
	border-radius: var(--radius-mali);
	background: var(--prim);
	color: #fff;
	font-family: var(--font-naslov);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.cws-button:hover { background: var(--prim-tamna); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .14); }
.cws-button.alt,
.cws-button.alt[class*="bt-color"] {
	background: var(--prim-svetla); color: var(--prim); border: 0;
}
.cws-button.alt:hover,
.cws-button.alt[class*="bt-color"]:hover { background: var(--prim); color: #fff; }
.cws-button.smaller { min-width: 0; padding: 7px 14px; font-size: 13px; }
/* glavna akcija forme (Prijavi se, Pošalji, Rezerviši...) je uvek puno dugme, i kad stara strana kaze "alt" */
button.cws-button[type="submit"], input.cws-button[type="submit"],
button.cws-button.alt[type="submit"], input.cws-button.alt[type="submit"],
.contact-form input[type="submit"], .contact-form button[type="submit"] {
	background: var(--prim); color: #fff; border: 0; border-radius: var(--radius-mali);
	padding: 11px 20px; font-family: var(--font-naslov); font-weight: 700; cursor: pointer;
}
button.cws-button[type="submit"]:hover, input.cws-button[type="submit"]:hover,
.contact-form input[type="submit"]:hover, .contact-form button[type="submit"]:hover { background: var(--prim-tamna); color: #fff; }

/* naslovi blokova koji su ostali na starom serif fontu (npr. "Uloguj se") */
.leave-reply .title, .widget-title, .title-carousel h2, .widget-contact-form h2 { font-family: var(--font-naslov); font-weight: 700; color: var(--naslov); }
.leave-reply { background: #fff; border: 1px solid var(--linija); border-radius: var(--radius); box-shadow: var(--senka); padding: 28px; }
.cws-button.border-radius { border-radius: var(--radius-mali); }

/* ---------- forme ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"],
textarea, select, .contact-form input, .contact-form textarea {
	font-family: var(--font-tekst);
	border: 1px solid var(--linija) !important;
	border-radius: var(--radius-mali);
	background: #fff;
	color: var(--tekst);
	transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--prim) !important;
	box-shadow: 0 0 0 3px var(--prim-svetla);
	outline: none;
}

/* ---------- kartice (vesti, sekcije, zaposleni) ---------- */
.course-item, .item-instructor, .gallery-item .item-instructor {
	background: var(--kartica);
	border: 1px solid var(--linija) !important;
	border-radius: var(--radius);
	box-shadow: var(--senka);
	overflow: hidden;
	transition: transform .25s, box-shadow .25s;
}
.course-item:hover, .item-instructor:hover { transform: translateY(-3px); box-shadow: var(--senka-hover); }
.course-item .course-name,
.widget-popular .course-name { background: #fff; padding: 16px 20px 6px; }
.course-item .course-name h3,
.course-item .course-name h3 a { color: var(--naslov); font-family: var(--font-naslov); font-weight: 700; font-size: 17px; }
.course-item .course-name h3 a:hover { color: var(--prim); }
.course-item .course-date { background: #fff !important; color: var(--tekst); }
.item-instructor .instructor-avatar { border-radius: 50%; object-fit: cover; }
.item-instructor .info-box h3 { font-size: 16px; }
.instructor-profession { color: var(--muted); }

/* kartice zaposlenih (include/nasi_zapolseni_lista.php) - iste visine, okrugli avatar */
.mz-kartica {
	display: flex; align-items: center; gap: 16px; height: 108px; box-sizing: border-box;
	background: #fff; border: 1px solid var(--linija); border-radius: 18px; box-shadow: var(--senka);
	padding: 16px 18px; margin: 6px 4px 14px; transition: transform .25s, box-shadow .25s;
}
.mz-kartica:hover { transform: translateY(-2px); box-shadow: var(--senka-hover); }
.mz-avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--pozadina); }
.mz-inicijali { display: flex; align-items: center; justify-content: center; background: var(--prim-svetla); color: var(--prim); font-family: var(--font-naslov); font-weight: 800; font-size: 20px; }
.mz-info { min-width: 0; text-align: left; }
.mz-info h3 { font-size: 16px; margin: 0 0 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-struka { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-bio { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--prim); background: var(--prim-svetla); padding: 2px 10px; border-radius: 999px; }
.mz-bio:hover { background: var(--prim); color: #fff; }

/* carousel strelice */
.carousel-nav .carousel-button div {
	background: #fff; color: var(--naslov); border: 1px solid var(--linija);
	border-radius: 50%; width: 38px; height: 38px; line-height: 36px;
}
.carousel-nav .carousel-button div:hover { background: var(--prim); color: #fff; border-color: var(--prim); }

/* ---------- lista vesti (vesti.php: .category-item.list) i paginacija ---------- */
.category-search { background: none; padding: 0; margin-bottom: 8px; }
.category-item.list {
	display: grid; grid-template-columns: 220px 1fr; column-gap: 24px; row-gap: 4px; align-content: start;
	background: #fff; border: 1px solid var(--linija); border-radius: var(--radius); box-shadow: var(--senka);
	padding: 18px; margin: 0 0 20px; transition: transform .25s, box-shadow .25s;
}
.category-item.list:hover { transform: translateY(-2px); box-shadow: var(--senka-hover); }
.category-item.list .picture { grid-column: 1; grid-row: 1 / span 4; float: none; width: auto; margin: 0; border-radius: var(--radius-mali); overflow: hidden; aspect-ratio: 4 / 3; }
.category-item.list .picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-item.list h5, .category-item.list > div, .category-item.list p { grid-column: 2; }
.category-item.list h5 { margin: 0; font-size: 18px; line-height: 1.35; font-family: var(--font-naslov); }
.category-item.list h5 a { color: var(--naslov); }
.category-item.list h5 a:hover { color: var(--prim); }
.category-item.list .count-reviews { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }
.category-item.list p { margin: 0; color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.category-item.list .category-info { display: none; }

.page-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 28px 0 40px; }
.page-pagination a { float: none; width: auto; min-width: 40px; height: 40px; padding: 0 12px; line-height: 38px; border: 1px solid var(--linija) !important; border-radius: var(--radius-mali); background: #fff; color: var(--naslov); }
.page-pagination a.active, .page-pagination a:hover { background: var(--prim); border-color: var(--prim) !important; color: #fff; }

/* ---------- galerija (galerija.php: .portfolio-gallery) - pravilna mreza umesto float-ova razlicite visine ---------- */
.portfolio-gallery .grid-col-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-left: 0; }
.portfolio-gallery .grid-col-row:before, .portfolio-gallery .grid-col-row:after { display: none; }
.portfolio-gallery .item { float: none; width: auto; margin: 0; }
.portfolio-gallery .picture { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-mali); box-shadow: var(--senka); }
.portfolio-gallery .picture img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.portfolio-gallery .picture:hover img { transform: scale(1.04); }

/* ---------- pretraga u bocnoj koloni (npr. Domijada) ---------- */
.widget-search form input[type='search'] { box-sizing: border-box; width: 100%; height: 42px; line-height: 40px; padding-right: 58px; border-radius: var(--radius-mali); }
.widget-search form .search-submit {
	top: 0; right: 0; width: 50px; height: 42px; line-height: 42px; padding: 0; box-sizing: border-box; border: 0;
	background: var(--prim); color: #fff; border-radius: 0 var(--radius-mali) var(--radius-mali) 0;
	font-family: var(--font-naslov); font-weight: 700;
}

/* liste u tekstu strana (tema daje veliku visinu reda, pa se stavka u vise redova "razvuce") */
.page-content main section li { line-height: 1.6; margin-bottom: 8px; }
.widget-search form .search-submit:hover { background: var(--prim-tamna); color: #fff; }

/* ---------- bocni meni (portal "Moj Dom", kategorije) ---------- */
.widget-categories h5,
.widget-categories h5.corner-radius {
	background: none !important;
	color: var(--muted);
	font-family: var(--font-naslov);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 0 12px;
	margin: 18px 0 6px;
	box-shadow: none;
	border-radius: 0;
}
.widget-categories hr.divider-big { display: none; }
.widget-categories li,
.widget-categories li:first-child,
.widget-categories li:last-child { border: 0; font-size: 14px; }
.widget-categories li { padding: 0 !important; line-height: 1.4; }
.widget-categories ul { margin: 0; }
.widget-categories li a {
	display: block; padding: 7px 12px; border-radius: var(--radius-mali);
	color: var(--tekst); font-weight: 500; line-height: 1.4;
}
/* dugme za otvaranje menija na telefonu (include/moj_navig.php) */
.mojmeni-cb { display: none; }
.mojmeni-dugme { display: none; }
.widget-categories li a:before { display: none; }
.widget-categories li a:hover { background: var(--prim-svetla); color: var(--prim); }
.widget-categories li.corner-radius a { background: var(--pozadina); color: var(--muted); text-align: center; }
.widget-categories li.corner-radius a:hover { background: var(--prim); color: #fff; }

/* portal "Moj Dom" (include/moj_navig.php): linkovi sa ikonicom, sekcije sa uvucenim stavkama, oznacena trenutna strana */
aside.widget-search:not(:has(form)):has(+ aside.portal-meni) { display: none; }
.portal-meni { margin-top: 0 !important; background: #fff; border: 1px solid var(--linija); border-radius: var(--radius); box-shadow: var(--senka); padding: 14px 10px; }
.portal-meni-naslov { font-family: var(--font-naslov); font-weight: 800; font-size: 16px; color: var(--naslov); padding: 2px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--linija); }
.portal-meni-naslov i { color: var(--prim); margin-right: 6px; }
.portal-meni ul { list-style: none; margin: 0; padding: 0; }
.portal-meni li { padding: 0 !important; border: 0 !important; line-height: 1.4; margin: 0; }
.portal-meni li a:before { display: none; }
.portal-meni .portal-link, .portal-meni .portal-sekcija-naslov {
	display: flex; align-items: center; padding: 9px 10px; border-radius: var(--radius-mali);
	font-size: 14px; font-weight: 600; color: var(--naslov);
}
.portal-meni .portal-link i, .portal-meni .portal-sekcija-naslov i { width: 22px; margin-right: 8px; text-align: center; color: var(--muted); font-size: 15px; }
.portal-meni .portal-link:hover { background: var(--prim-svetla); color: var(--prim); }
.portal-meni .portal-link:hover i { color: var(--prim); }
.portal-meni .portal-sekcija { margin-top: 2px; }
.portal-meni .portal-sekcija-naslov { cursor: default; }
.portal-meni .portal-sekcija.aktivna .portal-sekcija-naslov, .portal-meni .portal-sekcija.aktivna .portal-sekcija-naslov i { color: var(--prim); }
.portal-meni .portal-sekcija ul { margin: 0 0 6px 21px; padding-left: 12px; border-left: 2px solid var(--linija); }
.portal-meni .portal-sekcija.aktivna ul { border-left-color: var(--prim-svetla); }
.portal-meni .portal-sekcija ul a { display: block; padding: 6px 10px; border-radius: var(--radius-mali); font-size: 14px; font-weight: 500; color: var(--tekst); }
.portal-meni .portal-sekcija ul a:hover { background: var(--prim-svetla); color: var(--prim); }
.portal-meni a.aktivna, .portal-meni a.aktivna:hover { background: var(--prim); color: #fff !important; }
.portal-meni a.aktivna i { color: #fff !important; }
.portal-odjava { display: block; margin-top: 12px; padding: 9px 10px; border-top: 1px solid var(--linija); font-size: 13px; font-weight: 600; color: var(--muted); }
.portal-odjava:hover { color: var(--prim); }
.portal-odjava i { width: 22px; margin-right: 8px; text-align: center; }

/* lista bez slike (obavestenja na portalu): jedna kolona i ceo tekst */
.category-item.list:not(:has(.picture)) { grid-template-columns: 1fr; }
.category-item.list:not(:has(.picture)) h5, .category-item.list:not(:has(.picture)) > div, .category-item.list:not(:has(.picture)) p { grid-column: 1; }
.category-item.list:not(:has(.picture)) p { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* tabele na portalu (.table / .row / .cell iz stranica) - jaca specificnost od inline stilova strana */
body .table { border-radius: var(--radius); overflow: hidden; box-shadow: var(--senka); border: 1px solid var(--linija); }
body .table .row { background: #fff; }
body .table .row:nth-of-type(odd) { background: var(--pozadina); }
body .table .row.header,
body .table .row.header.blue,
body .table .row.header.green { background: var(--naslov); color: #fff; font-family: var(--font-naslov); font-weight: 700; }
body .table .row.header.green { background: var(--prim); }
body .table .cell { padding: 10px 14px; }

/* ---------- futer ---------- */
footer { background: var(--futer-bg); color: var(--futer-tekst); }
.footer-bottom { background: transparent; margin-top: 0; padding: 28px 0; color: var(--futer-tekst); }
.footer-nav a, footer a { color: var(--futer-tekst); }
.footer-nav a:hover, footer a:hover { color: #fff; }
/* tema: li line-height 60px + "|" separator posle svakog linka */
.footer-nav > ul > li { float: none; display: inline-block; line-height: normal; margin: 0 4px 8px; }
.footer-nav > ul > li > a:after { display: none; }
.footer-nav ul li a {
	display: inline-block; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 999px; font-size: 13px;
}
.footer-nav ul li a:hover { background: rgba(255, 255, 255, .08); }
footer .copyright { opacity: .7; margin-top: 12px; }

/* =====================================================================
   NOVA POCETNA STRANA (index.php, klase mh-*)
   ===================================================================== */
.mh-wrap { max-width: var(--sirina); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.mh-sekcija { padding: 64px 0; }
.mh-sekcija.siva { background: var(--pozadina); }
.mh-naslov { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.mh-naslov h2 { margin: 0; }
.mh-naslov .mh-kicker { display: block; color: var(--prim); font-family: var(--font-naslov); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.mh-link-sve { font-weight: 600; white-space: nowrap; }

/* hero */
/* clear: logo i meni u zaglavlju su float-ovi; bez ovoga se hero (flex = novi BFC) suzi u prostor izmedju njih */
#home, .mh-hero { clear: both; }
.mh-hero { width: 100%; position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: var(--top-bg); }
.mh-hero-slajd { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; background-size: cover; background-position: center 30%; }
.mh-hero-slajd.aktivan { opacity: 1; }
.mh-hero-slajd:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 24, 39, .82) 0%, rgba(17, 24, 39, .55) 45%, rgba(17, 24, 39, .15) 100%); }
.mh-hero-sadrzaj { position: relative; z-index: 2; max-width: 620px; color: #fff; padding: 80px 0; }
.mh-hero-sadrzaj .mh-kicker { display: inline-block; background: rgba(255, 255, 255, .14); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 18px; backdrop-filter: blur(4px); }
.mh-hero-sadrzaj h1 { color: #fff; font-size: 46px; line-height: 1.12; font-weight: 800; margin: 0 0 16px; letter-spacing: -0.02em; }
.mh-hero-sadrzaj p { font-size: 18px; color: rgba(255, 255, 255, .88); margin-bottom: 26px; }
.mh-hero-tacke { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.mh-hero-tacke button { width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .45); cursor: pointer; padding: 0; transition: width .3s, background .3s; }
.mh-hero-tacke button.aktivan { width: 28px; background: #fff; }
.mh-dugme { display: inline-flex; align-items: center; gap: 8px; background: var(--prim); color: #fff !important; padding: 13px 22px; border-radius: var(--radius-mali); font-family: var(--font-naslov); font-weight: 700; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; }
.mh-dugme:hover { background: var(--prim-tamna); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.mh-dugme.svetlo { background: #fff; color: var(--naslov) !important; }
.mh-dugme.svetlo:hover { background: var(--prim-svetla); }

/* brzi linkovi (uplatnice, dokumenta) */
.mh-brzi { position: relative; z-index: 5; margin-top: -48px; }
.mh-brzi-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mh-brzi a {
	display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linija);
	border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--senka); color: var(--tekst);
	text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mh-brzi a:hover { transform: translateY(-3px); box-shadow: var(--senka-hover); border-color: var(--prim); }
.mh-brzi .ikona { flex: 0 0 46px; height: 46px; border-radius: 12px; background: var(--prim-svetla); color: var(--prim); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mh-brzi strong { display: block; color: var(--naslov); font-family: var(--font-naslov); font-size: 15px; line-height: 1.3; }
.mh-brzi small { color: var(--muted); font-size: 13px; }

/* o domu */
.mh-o-domu { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.mh-o-domu .tekst { font-size: 17px; color: var(--tekst); }
.mh-cinjenice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mh-cinjenica { background: #fff; border: 1px solid var(--linija); border-radius: var(--radius); padding: 22px; box-shadow: var(--senka); }
.mh-cinjenica .broj { font-family: var(--font-naslov); font-weight: 800; font-size: 30px; color: var(--prim); line-height: 1; }
.mh-cinjenica .opis { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* vesti */
.mh-vesti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mh-vest { background: #fff; border: 1px solid var(--linija); border-radius: var(--radius); overflow: hidden; box-shadow: var(--senka); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.mh-vest:hover { transform: translateY(-4px); box-shadow: var(--senka-hover); }
.mh-vest .slika { aspect-ratio: 16 / 10; background: var(--pozadina) center / cover no-repeat; display: block; }
.mh-vest .telo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.mh-vest h3 { font-size: 18px; margin: 0 0 10px; line-height: 1.35; }
.mh-vest h3 a { color: var(--naslov); text-decoration: none; }
.mh-vest h3 a:hover { color: var(--prim); }
.mh-vest .izvod { color: var(--muted); font-size: 15px; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mh-vest .vise { margin-top: 16px; font-weight: 700; font-family: var(--font-naslov); font-size: 14px; }

/* sekcije */
.mh-sekcije { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mh-sekcija-kartica { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linija); border-radius: var(--radius); padding: 14px; box-shadow: var(--senka); transition: transform .2s, box-shadow .2s; }
.mh-sekcija-kartica:hover { transform: translateY(-3px); box-shadow: var(--senka-hover); }
.mh-sekcija-kartica img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; background: var(--pozadina); }
.mh-sekcija-kartica h3 { font-size: 15px; margin: 0 0 2px; line-height: 1.3; }
.mh-sekcija-kartica span { color: var(--muted); font-size: 13px; }
.mh-sekcije-vise { text-align: center; margin-top: 28px; }

/* standardi (ISO) */
.mh-standardi { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.mh-standardi img { width: 92px; height: 92px; object-fit: contain; filter: grayscale(100%); opacity: .75; transition: filter .3s, opacity .3s; border-radius: var(--radius-mali); }
.mh-standardi a:hover img { filter: none; opacity: 1; }

/* ---------- prilagodjavanje ekranu ---------- */
@media screen and (max-width: 980px) {
	.mh-brzi-mreza, .mh-vesti { grid-template-columns: repeat(2, 1fr); }
	.mh-sekcije { grid-template-columns: repeat(2, 1fr); }
	.mh-o-domu { grid-template-columns: 1fr; gap: 28px; }
	.mh-hero-sadrzaj h1 { font-size: 36px; }
}
@media screen and (max-width: 767px) {
	h2 { font-size: 24px; }
	.mh-sekcija { padding: 44px 0; }
	.mh-hero { min-height: 440px; }
	.mh-hero-sadrzaj { padding: 56px 0 72px; }
	.mh-hero-sadrzaj h1 { font-size: 30px; }
	.mh-hero-sadrzaj p { font-size: 16px; }
	.mh-brzi { margin-top: -32px; }
	.mh-brzi-mreza, .mh-vesti, .mh-sekcije { grid-template-columns: 1fr; }
	.page-content { padding: 32px 0; }

	/* tema racuna visinu zaglavlja (inline style) samo pri ucitavanju i ne azurira je ispod 767px */
	.sticky-wrapper { height: auto !important; }

	/* gornja traka u jednom redu: bez e-maila i "Casopis" */
	.page-header-top address .email,
	.page-header-top address a[href="casopis"] { display: none; }
	.page-header-top address { font-size: 12px; }

	/* portal meni: sklopljen iza dugmeta */
	.mojmeni-dugme {
		display: flex; align-items: center; justify-content: space-between;
		background: var(--prim); color: #fff; border-radius: var(--radius-mali);
		padding: 12px 16px; font-family: var(--font-naslov); font-weight: 700; cursor: pointer; margin-bottom: 8px;
	}
	.mojmeni-dugme:after { content: "\f0c9"; font-family: FontAwesome; font-weight: normal; }
	.mojmeni-cb:checked + .mojmeni-dugme:after { content: "\f00d"; }
	.mojmeni-lista { display: none; }
	.mojmeni-cb:checked ~ .mojmeni-lista { display: block; }
	/* bocni meni javnih strana (js/moderno.js) */
	button.bocni-meni-dugme { width: 100%; border: 0; text-align: left; font-size: 15px; }
	.ima-bocni-meni > aside.widget-categories { display: none; }
	.ima-bocni-meni.bocni-otvoren > aside.widget-categories { display: block; }
	.ima-bocni-meni.bocni-otvoren > .bocni-meni-dugme:after { content: "\f00d"; }
	/* portal na telefonu: bez "MOJ DOM" natpisa i "Drustvene mreze" izmedju menija i sadrzaja */
	aside.widget-search:not(:has(form)):has(+ aside.widget-categories),
	aside.widget-categories ~ aside.widget-subscribe { display: none; }

	/* teme kolone imaju fiksne sirine u px (npr. .grid-col-6 = 570px) - na telefonu jedna ispod druge */
	.category-item.list { grid-template-columns: 1fr; padding: 14px; }
	.category-item.list .picture { grid-row: auto; aspect-ratio: 16 / 9; margin-bottom: 10px; }
	.category-item.list h5, .category-item.list > div, .category-item.list p { grid-column: 1; }
	/* ugnjezdeni .grid-row (npr. include "Nasi zaposleni" unutar sadrzaja strane) ne dodaje jos jednu
	   bocnu marginu - poravnato sa tekstom iznad */
	.grid-row .grid-row { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: auto; }
	.mz-kartica { margin: 6px 0 14px; }
	.grid-col-row { margin-left: 0; }
	.grid-col-row > .grid-col { float: none; width: auto; margin-left: 0; margin-bottom: 24px; }
	.widget-address, .widget-address a { overflow-wrap: anywhere; word-break: break-word; }
	/* kontakt: prazan <h2>&nbsp;</h2> iznad podataka i skrivena kutija za greske prave veliki razmak */
	.widget-address > section > h2:first-child { display: none; }
	.widget-contact-form .info-boxes.error-message:not(.visible) { display: none; }
	.portfolio-gallery .grid-col-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media screen and (max-width: 580px) {
	/* tabele na portalu se slazu u kolonu - prazne celije zaglavlja ne prikazivati */
	body .table .row.header .cell:empty { display: none; }
}

/* main.css skriva SVE radio dugmice (tema ima svoj .radio: input + label pored).
   Obican radio unutar <label> (ankete, poruka psihologu - anonimno) mora da se vidi. */
label > input[type=radio] {
	visibility: visible;
	-webkit-appearance: radio;
	appearance: auto;
	display: inline-block !important;
	float: none;
	padding: 0;
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--prim);
	cursor: pointer;
}