PageSourceSearch

https://sajam.net/sr/kontakt

html sajam.net collected 2026-10-02 10:26:40 UTC 316,015 bytes, 5,558 lines download raw bytes

1<!DOCTYPE html>
2<html lang="sr">
3
4<head>
5    <meta charset="utf-8" />
6    <meta name="viewport"
7          content="width=device-width,initial-scale=1" />
8            
9        
9<script>
10            window.dataLayer = window.dataLayer || [];
11
12            function gtag() {
13                dataLayer.push(arguments);
14            }
15            gtag('consent', 'default', {
16                'analytics_storage': 'denied',
17                'ad_storage': 'denied',
18                'ad_user_data': 'denied',
19                'ad_personalization': 'denied'
20            });
21            // Optional: mark an event in the DL
22            window.dataLayer.push({
23                event: 'default_consent_set'
24            });
25        </script>
25
26
27        
28                    
29            
29<script>
vendor: 642 bytes, lines 29-42
29
30                (function(w, d, s, l, i) {
31                    w[l] = w[l] || [];
32                    w[l].push({
33                        'gtm.start': new Date().getTime(),
34                        event: 'gtm.js'
35                    });
36                    var f = d.getElementsByTagName(s)[0],
37                        j = d.createElement(s),
38                        dl = l != 'dataLayer' ? '&l=' + l : '';
39                    j.async = true;
40                    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
41                    f.parentNode.insertBefore(j, f);
42                })(window, document, 'script', 'dataLayer', '
42GTM-WD8FRVVN
vendor: 16 bytes, lines 42-43
42');
43            
43</script>
43
44        
45            
46    <title>Kontakti - Novosadski sajam</title>
47<meta name="description"
48      content="Sekcije i službe Novosadskog Sajma.">
49
50
51
52<link rel="canonical"
53      href="https://sajam.net/sr/kontakt">
54
55
56    <link rel="alternate"
57          href="https://sajam.net/sr/kontakt"
58          hreflang="sr">
59    <link rel="alternate"
60          href="https://sajam.net/en/kontakt"
61          hreflang="en">
62    <link rel="alternate"
63          href="https://sajam.net"
64          hreflang="x-default">
65
66
67<meta property="og:title"
68      content="Kontakti - Novosadski sajam">
69<meta property="og:description"
70      content="Sekcije i službe Novosadskog Sajma.">
71<meta property="og:url"
72      content="https://sajam.net/sr/kontakt">
73<meta property="og:type"
74      content="website">
75<meta property="og:image"
76      content="https://sajam.net/images/meta/novi-sad-sajam-ogimage.webp">
77<meta property="og:site_name"
78      content="Novosadski sajam">
79
80
81<meta name="twitter:card"
82      content="summary_large_image">
83<meta name="twitter:title"
84      content="Kontakti - Novosadski sajam">
85<meta name="twitter:description"
86      content="Sekcije i službe Novosadskog Sajma.">
87<meta name="twitter:image"
88      content="https://sajam.net/images/meta/novi-sad-sajam-ogimage.webp">
89
90    <link rel="icon"
91          type="image/png"
92          href="/favicon-96x96.png?v=2"
93          sizes="96x96" />
94    <link rel="icon"
95          type="image/svg+xml"
96          href="/favicon.svg?v=2" />
97    <link rel="shortcut icon"
98          href="/favicon.ico?v=2" />
99    <link rel="apple-touch-icon"
100          sizes="180x180"
101          href="/apple-touch-icon.png" />
102    <meta name="apple-mobile-web-app-title"
103          content="Sajam Novi Sad" />
104    <link rel="manifest"
105          href="/site.webmanifest" />
106
107    
108    <link rel="preload"
109          as="font"
110          type="font/woff"
111          crossorigin
112          href="https://cdn.jsdelivr.net/gh/repalash/gilroy-free-webfont@fonts/Gilroy-Extrabold.woff">
113    <link rel="preload"
114          as="font"
115          type="font/woff2"
116          crossorigin
117          href="https://cdn.jsdelivr.net/fontsource/fonts/ubuntu@latest/latin-ext-400-normal.woff2">
118
119    
120    <link rel="preload"
121          as="style"
122          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
123          onload="this.onload=null;this.rel='stylesheet'">
124
125    
126    
127    <noscript>
128        <link rel="stylesheet"
129              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
130    </noscript>
131
132    
133            <link rel="preload" as="style" href="https://sajam.net/build/assets/app-BD8hPv1o.css" /><link rel="modulepreload" as="script" href="https://sajam.net/build/assets/app-BdEWrCYM.js" /><link rel="stylesheet" href="https://sajam.net/build/assets/app-BD8hPv1o.css" data-navigate-track="reload" />
133<script type="module" src="https://sajam.net/build/assets/app-BdEWrCYM.js" data-navigate-track="reload"></script>
133            
133<script type="application/ld+json">{
134    "@context": "https://schema.org",
135    "@graph": [
136        {
137            "@type": "LocalBusiness",
138            "@id": "https://sajam.net/#organization",
139            "name": "Novosadski Sajam",
140            "alternateName": "Novi Sad Fair",
141            "url": "https://sajam.net",
142            "logo": {
143                "@type": "ImageObject",
144                "@id": "https://sajam.net/images/meta/logo-512.png#logo",
145                "url": "https://sajam.net/images/meta/logo-512.png"
146            },
147            "telephone": "+381214830000",
148            "email": "[email protected]",
149            "address": {
150                "@type": "PostalAddress",
151                "streetAddress": "Hajduk Veljkova 11",
152                "addressLocality": "Novi Sad",
153                "postalCode": "21137",
154                "addressCountry": "RS"
155            },
156            "openingHoursSpecification": [
157                {
158                    "@type": "OpeningHoursSpecification",
159                    "dayOfWeek": "Monday",
160                    "opens": "09:00",
161                    "closes": "20:00"
162                },
163                {
164                    "@type": "OpeningHoursSpecification",
165                    "dayOfWeek": "Tuesday",
166                    "opens": "09:00",
167                    "closes": "20:00"
168                },
169                {
170                    "@type": "OpeningHoursSpecification",
171                    "dayOfWeek": "Wednesday",
172                    "opens": "09:00",
173                    "closes": "20:00"
174                },
175                {
176                    "@type": "OpeningHoursSpecification",
177                    "dayOfWeek": "Thursday",
178                    "opens": "09:00",
179                    "closes": "20:00"
180                },
181                {
182                    "@type": "OpeningHoursSpecification",
183                    "dayOfWeek": "Friday",
184                    "opens": "09:00",
185                    "closes": "20:00"
186                },
187                {
188                    "@type": "OpeningHoursSpecification",
189                    "dayOfWeek": "Saturday",
190                    "opens": "10:00",
191                    "closes": "18:00"
192                },
193                {
194                    "@type": "OpeningHoursSpecification",
195                    "dayOfWeek": "Sunday",
196                    "opens": "10:00",
197                    "closes": "18:00"
198                }
199            ],
200            "sameAs": [
201                "https://www.facebook.com/novosadskisajam",
202                "https://www.instagram.com/novosadskisajam",
203                "https://www.linkedin.com/company/novosadski-sajam"
204            ],
205            "description": "Novosadski sajam je najveći sajamski centar u Srbiji i regionu - domaćin međunarodnih sajmova, kongresa i poslovnih događaja.",
206            "contactPoint": [
207                {
208                    "@type": "ContactPoint",
209                    "telephone": "+381214830000",
210                    "contactType": "customer service",
211                    "areaServed": "RS",
212                    "availableLanguage": [
213                        "Serbian",
214                        "English"
215                    ]
216                },
217                {
218                    "@type": "ContactPoint",
219                    "email": "[email protected]",
220                    "contactType": "customer support",
221                    "areaServed": "RS",
222                    "availableLanguage": [
223                        "Serbian",
224                        "English"
225                    ]
226                }
227            ]
228        },
229        {
230            "@type": "WebPage",
231            "@id": "https://sajam.net/sr/kontakt#webpage",
232            "url": "https://sajam.net/sr/kontakt",
233            "name": "Kontakti - Novosadski sajam",
234            "description": "Sekcije i službe Novosadskog Sajma.",
235            "isPartOf": {
236                "@id": "https://sajam.net/#website"
237            },
238            "inLanguage": "sr"
239        }
240    ]
241}</script>
241
242    
243    <style>
244        [x-cloak] {
245            display: none !important
246        }
247
248        .nav-boot {
249            visibility: hidden
250        }
251
252        .no-anchor {
253            overflow-anchor: none
254        }
255    </style>
256    <!-- Meta Pixel Code -->
257    
257<script>
vendor: 678 bytes, lines 257-276
257
258        ! function(f, b, e, v, n, t, s) {
259            if (f.fbq) return;
260            n = f.fbq = function() {
261                n.callMethod ?
262                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
263            };
264            if (!f._fbq) f._fbq = n;
265            n.push = n;
266            n.loaded = !0;
267            n.version = '2.0';
268            n.queue = [];
269            t = b.createElement(e);
270            t.async = !0;
271            t.src = v;
272            s = b.getElementsByTagName(e)[0];
273            s.parentNode.insertBefore(t, s)
274        }(window, document, 'script',
275            'https://connect.facebook.net/en_US/fbevents.js');
276        fbq('init', '
2761807435069933811
vendor: 42 bytes, lines 276-278
276');
277        fbq('track', 'PageView');
278    
278</script>
278
279    <noscript><img height="1"
280             width="1"
281             style="display:none"
282             src="https://www.facebook.com/tr?id=1807435069933811&ev=PageView&noscript=1" /></noscript>
283    <!-- End Meta Pixel Code -->
284</head>
285
286<body class="font-body antialiased bg-white text-gray-900">
vendor: 102 bytes, lines 286-289
286
287            
288        <noscript>
289            <iframe src="https://www.googletagmanager.com/ns.html?id=
289GTM-WD8FRVVN
vendor: 161 bytes, lines 289-295
289"
290                    height="0"
291                    width="0"
292                    style="display:none;visibility:hidden"></iframe>
293        </noscript>
294    
295    
295<header id="site-header"
296            x-data
297            class="no-anchor top-0 inset-x-0 z-50"
298            :class="(Alpine.store('header')?.overlay ?? false) ? 'fixed' : 'sticky'">
299        <nav x-data="{ mobileOpen: false, boot: true }"
300     x-init="requestAnimationFrame(() => boot = false)"
301     x-effect="document.body.classList.toggle('overflow-hidden', mobileOpen)"
302     :class="boot ? 'nav-boot' : ''"
303     class="w-full text-white">
304    
305    <div class="hidden md:block overflow-hidden transition-[max-height,background] duration-200 ease-out bg-black border-y-2 border-black"
306         :class="(Alpine.store('header')?.topbar?.hidden ?? false) ? 'max-h-0 bg-black' : 'max-h-12 bg-black'"
307         x-cloak>
308        <div class="max-w-7xl mx-auto px-6">
309            <div class="flex items-center justify-end gap-4 text-[11px] font-bold tracking-wide py-2">
310                
311                <div x-data="langTabs('sr', { sr: 'https:\/\/sajam.net\/sr\/kontakt', en: 'https:\/\/sajam.net\/en\/contact' })"
312                     class="inline-flex items-center rounded-sm bg-none backdrop-blur px-2 py-1 shadow ring-1 ring-black/5"
313                     role="tablist"
314                     x-cloak
315                     aria-label="Language switcher">
316                    <i class="fa-solid fa-language text-gray-100 mr-2"></i>
317                    <div class="relative grid grid-cols-2 gap-1">
318                        <span class="absolute inset-y-0 left-0 w-1/2 rounded-xs bg-white shadow transition-transform duration-200"
319                              :style="`transform: translateX(${active === 'en' ? '100%' : '0%'})`"
320                              aria-hidden="true"></span>
321                        <button type="button"
322                                class="relative z-10 px-3 py-1 text-xs font-bold rounded-xl transition-colors"
323                                :class="active === 'sr' ? 'text-gray-900' : 'text-gray-100 hover:text-gray-700'"
324                                role="tab"
325                                :aria-selected="active === 'sr'"
326                                @click="switchTo('sr')">🇷🇸&nbsp;SR</button>
327                        <button type="button"
328                                class="relative z-10 px-3 py-1 text-xs font-bold rounded-xs transition-colors"
329                                :class="active === 'en' ? 'text-gray-900' : 'text-gray-100 hover:text-gray-700'"
330                                role="tab"
331                                :aria-selected="active === 'en'"
332                                @click="switchTo('en')">🇬🇧&nbsp;EN</button>
333                    </div>
334                </div>
335
336                <span class="opacity-40">|</span>
337                <a href="https://sajam.net/sr/kalendar"
338                   class="hover:underline">Kalendar događaja</a>
339                <a href="https://sajam.net/sr/izlagaci/prijave"
340                   class="hover:underline">Prijave za izlagače</a>
341                <a href="https://sajam.net/sr/kontakt"
342                   class="hover:underline">Kontaktirajte nas</a>
343            </div>
344        </div>
345    </div>
346
347    
348    <div class="transition-colors duration-300 border-b bg-black/50 border-white/0"
349         :class="(Alpine.store('header')?.overlay ?? false) ?
350         ((Alpine.store('header')?.scrolled ?? false) ?
351             'bg-black/90 border-white/10 backdrop-blur' :
352             'bg-transparent border-transparent') :
353         'bg-gray-900 border-white/10 backdrop-blur'"
354         x-cloak>
355        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
356            <div class="flex items-center justify-between gap-4 transition-[padding] duration-300"
357                 :class="(Alpine.store('header')?.scrolled ?? false) ? 'py-2' : 'py-3 sm:py-4'">
358
359                
360                <a href="https://sajam.net/sr"
361                   class="relative inline-flex items-center">
362                    <div class="absolute -inset-1 -skew-x-12 rounded-[2px]"
363                         :class="(Alpine.store('header')?.scrolled ?? false) ? 'bg-brand-600/10' :
364                         'bg-brand-500'">
365                    </div>
366
367                    <svg class="relative z-10 block h-14 w-auto transition-all duration-300 text-white"
368     :class="(Alpine.store('header')?.scrolled ?? false) ? '!h-10 text-white' : ''"
369     role="img"
370     aria-label="Novosadski Sajam"
371     viewBox="0 0 126.41 126.45"
372     xmlns="http://www.w3.org/2000/svg"
373     preserveAspectRatio="xMidYMid meet"
374     fill="currentColor">
375    <g fill="#fff"
376       fill-rule="evenodd">
377        <path d="m0 0-.06.03-.79.48-.8.54-.48.37C-1.43-.37-.76-1.85.09-3.52l.1-.23.17-.11 1.49-.66.3-.14.15-.06A59 59 0 0 0 .09-.22zm11.64 60.8-.14-.03-.17-.06-.3-.08-.24-.06V47.64l.26-.05.31-.09.14-.05.18-.03.34-.07.2-.02v13.55l-.24-.03ZM11.5-3.55l-.5.03-.2.03v-1.9l.28.05.34.09.08.02.26.06.29.09.17.02v1.45l-.2.03zm11.37 1.93-.51-.2-.26-.09q-.69-1.39-1.42-2.75l.31-.08.4-.14.4-.12.25-.11c.12.2.2.4.32.6q.9 1.7 1.68 3.43L24-1.11zm28.5 9.1q-3.94 1.2-7.99 2.1l-.99.23q.54 1.34 1 2.72a51 51 0 0 1 2.37 14.55h10.46a45 45 0 0 0-4.85-19.6m-7.99-11.1a45 45 0 0 0-10.99-8.2 94 94 0 0 1-3.1 1.36q-.72.3-1.48.6.77.6 1.47 1.2A47 47 0 0 1 41.85 8.48q.76-.15 1.53-.36c2.48-.57 4.92-1.23 7.3-1.9a46 46 0 0 0-7.3-9.84m-14.1-9.71a44 44 0 0 0-13.34-3.47q3.4 1.4 6.42 3.18l.79.49-.43.2-.36.17-.34.16-.32.12-.11.06a51 51 0 0 0-7.27-3.5 52 52 0 0 1 3.64 4.37h-.3l-.3.03h-.66l-.3-.03h-.24q-1.36-1.78-2.89-3.4a5 5 0 0 1-1.05.37v2.1l-.03-.03-.37-.09-.32-.08h-.05l-.37-.12-.29-.05v-1.73c-.36-.1-.73-.2-1.05-.38q-.81.84-1.59 1.76l-.34-.02h-.74l-.36.02-.38.04h-.05a36 36 0 0 1 2.44-2.79 49 49 0 0 0-10.6 5.63c.66.23 1.32.4 1.97.6l.27.08v1.45L.1-8.23A53 53 0 0 1-3.27-9.3q-1.61 1.21-3.06 2.56A46 46 0 0 0-17.46 8.78c2.57.54 5.22 1.03 7.85 1.42l-.07.14-.4.85-.18.34q-3.9-.6-7.78-1.41a48 48 0 0 0-3.35 16.96h1.64l-.02.14-.1.22-.04.23-.07.23-.05.17-.03.2-.05.17v.03h-1.28q0 2.04.23 4.03l-.03.03-.14.26-.15.25-.13.26-.12.25-.12.29-.11.25-.1.28-.13.3-.08.28-.03.03q-.47-3.25-.51-6.51h-10.43A44 44 0 0 0-28.38 48c.68-.22 1.36-.39 2.05-.6q3.4-.92 6.86-1.72a50 50 0 0 1-2.12-6.97h1.45a47 47 0 0 0 2.1 6.68c3.83-.8 7.76-1.45 11.7-1.93.31-.03.66-.09.97-.11a60 60 0 0 1-.85-4.64h1.45q.33 2.26.79 4.5c1.37-.15 2.7-.3 4.07-.4q1.88-.15 3.8-.23l-.26.2-.53.45-.51.48-.34.37q-1.1.08-2.16.14-1.88.17-3.72.37a65 65 0 0 0 2.1 7.08l-.06.2-.1.74-.04.76-.03.74.03.77.04.28a65 65 0 0 1-3.37-10.43q-.63.08-1.27.15-5.65.7-11.17 1.85A45.4 45.4 0 0 0-3.3 64.8c1.14-.36 2.25-.73 3.39-1.02q.71-.21 1.47-.36l.08.1.47.52.48.5.05.06q-1.27.28-2.55.66-1 .25-2 .6.99.67 2 1.3 3.91 2.49 8.6 4.3a51 51 0 0 1-4.48-5.5l.56.4.6.4.62.35.63.3.65.32.09.03q1.12 1.4 2.35 2.7c.31-.18.72-.31 1.08-.37v-1.37l.71.09.72.06v1.19q.6.1 1.07.4.8-.82 1.51-1.68l.23-.03.65-.1.65-.15.63-.17h.06a80 80 0 0 1-2.7 3.15 53 53 0 0 0 8.04-3.98q1.28-.8 2.53-1.65c-.8-.25-1.54-.48-2.3-.68l.4-.4.44-.45.3-.31q1.27.38 2.55.8a45.6 45.6 0 0 0 14.17-18.06c-3.68-.79-7.4-1.38-11.17-1.86q-.63-.08-1.27-.15a68 68 0 0 1-2.07 7.11l-.09-.09-.28-.17-.31-.14-.28-.11-.32-.12a57 57 0 0 0 1.93-6.62q-.94-.11-1.87-.2l.39-.2 1.05-.62.63-.4q.07.02.12.03.03-.07.02-.11l.29-.17.99-.71.43-.34-.31 1.48q.5.05.95.1Q35.2 44.2 41 45.4a49 49 0 0 0 2.4-7.98q.88-4.42.95-8.95h-6.76l.06-.26.29-1.13h6.42a48 48 0 0 0-.97-9.01A49 49 0 0 0 41 10.12q-2.48.5-4.94.93l-.1-.23-.59-1.08q2.56-.42 5.06-.96A45 45 0 0 0 26.25-9.29q-1.02.35-2.05.65v-1.47c.24-.06.43-.12.66-.2l-.62-.43.02-1.7q1.15.75 2.22 1.56a51 51 0 0 0 4.28-1.76q-.7-.35-1.48-.68M.08-15.54a44 44 0 0 0-7.9 2.92q.75.33 1.49.66 1.4.59 2.8 1.08a49.85 49.85 0 0 1 10.59-5.91Q3.5-16.45.1-15.54M-26.33 3.9q-.74 1.14-1.37 2.33l1.36.4q3.69 1.02 7.45 1.87A47 47 0 0 1-6.33-8.64q.74-.63 1.47-1.22c-.48-.2-.96-.37-1.47-.6q-1.53-.6-3.07-1.36A45.4 45.4 0 0 0-26.34 3.9m-6.9 23.19h10.43a49 49 0 0 1 3.38-17.25 169 169 0 0 1-6.9-1.73l-2.05-.6a44 44 0 0 0-4.86 19.58m6.9 24.48a45 45 0 0 0 17 15.72c.98-.49 2.01-.92 3-1.34q.73-.3 1.45-.54l-1.44-1.2a47 47 0 0 1-12.6-17.15q-3.74.79-7.4 1.85-.7.16-1.37.4.64 1.15 1.36 2.26m20 17.2a45 45 0 0 0 13.07 3.46A51 51 0 0 1-3.58 66.4q-1.36.5-2.75 1.08-.7.31-1.43.62.72.35 1.43.66m28.69 2.38q3.59-.91 6.92-2.36c.5-.23.98-.42 1.43-.65a19 19 0 0 0-1.43-.65q-1.38-.56-2.77-1.08-1.96 1.48-4.15 2.75a52 52 0 0 1-6.1 3.07q3.1-.35 6.1-1.08m21.02-12.08a46 46 0 0 0 7.3-9.77 125 125 0 0 0-8.83-2.24A47 47 0 0 1 29.28 64.2c-.48.4-.92.8-1.44 1.2q.73.25 1.44.56 1.51.61 3.05 1.33a46 46 0 0 0 11.05-8.24m12.84-30.6H45.77a50 50 0 0 1-2.39 14.52q-.45 1.38-.99 2.7.5.15 1 .23 4.05.94 7.98 2.1a44.4 44.4 0 0 0 4.85-19.54M43.38 62.76a47.3 47.3 0 0 1-31.64 12.39h-.52A48 48 0 0 1 .1 73.75a47.83 47.83 0 0 1-26.42-17.5 47.2 47.2 
3770 0 1 0-57.02A47.7 47.7 0 0 1 .09-18.3a47.3 47.3 0 0 1 43.3 11 47.4 47.4 0 0 1 15.5 35.08c0 13.81-6 26.31-15.5 34.98"
378              transform="matrix(1.33 0 0 -1.33 47.88 100.2)" />
379        <path d="M0 0a13 13 0 0 1-10.37.97l-.72-.26c-3.71-.97-7.43-.9-11.13.77v-5.71c3.75-1.9 7.42-1.93 11.13-.77q.37.16.72.29C-7.05-3.63-3.55-3.9.06-5.77L0-2.78Zm4.03 17.16a19 19 0 0 0-3.86-3.72v30.03a19 19 0 0 0 3.86-3.72 18.3 18.3 0 0 0 3.9-11.28c0-4.27-1.45-8.18-3.9-11.3m-14.4-7.09a18.4 18.4 0 0 0-10 3h5.71v18.06l4.3-9.06 4.22-9H-.4a18 18 0 0 0-9.97-3m-10.6 3.42a18.5 18.5 0 0 0-7.72 14.97c0 4.15 1.39 8.32 3.86 11.53a15 15 0 0 0 3.86 3.61zm25 34.88a24.3 24.3 0 0 1-14.35 4.7h-.05a7.64 7.64 0 0 0 0 15.28c3.95 0 7.25-3.1 7.6-6.94.25-3.35 4.67-4.03 6-.8.2.52.27 1.32.12 2.14C2.02 69.38-3.38 74.7-10.37 74.7a14 14 0 0 1-13.95-13.95c0-7.67 6.28-13.89 13.95-13.89 3.24-.03 6.3-.88 8.95-2.38h-4.66V26.25l-4.29 9.15-4.29 9.12H-45.8c.74-2.16 1.74-6.45 3.87-6.4 3.58.07 5.37 0 8.91.07-.42-.94-.7-1.9-1.01-2.85h-8.7c.28-1.39 1.73-6.27 3.02-6.3h4.68v-.57c0-.8 0-1.5.11-2.22h-4.94c.71-2.13 1.77-6.34 3.4-6.39h3a24.6 24.6 0 0 1 8.63-11.34 24.3 24.3 0 0 1 14.46-4.71c5.34 0 10.34 1.73 14.4 4.68a24.6 24.6 0 0 1 10.23 19.98c0 8.18-4.06 15.45-10.23 19.91"
380              transform="matrix(1.33 0 0 -1.33 79.1 109.06)" />
381    </g>
382</svg>
383                </a>
384                
385                <div class="hidden md:flex flex-1 justify-center"
386                     x-data="{
387                         activeMenu: null,
388                         open: false,
389                         prefetch(url) {
390                             const l = document.createElement('link');
391                             l.rel = 'prefetch';
392                             l.as = 'image';
393                             l.href = url;
394                             document.head.appendChild(l);
395                         },
396                         onceLoaded: new Set(),
397                         ensure(key, url) {
398                             if (this.onceLoaded.has(key)) return;
399                             const el = this.$root.querySelector(`img[data-mega='${key}']`);
400                             if (el && !el.dataset.loaded) {
401                                 el.src = url;
402                                 el.dataset.loaded = '1';
403                                 this.onceLoaded.add(key);
404                             }
405                         }
406                     }"
407                     x-cloak
408                     x-ref="navArea">
409                    <div class="relative flex items-center gap-6 whitespace-nowrap text-sm font-extrabold">
410                        
411                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
412                                    :class="{ 'text-brand-400': activeMenu === 'fairs' && open }"
413                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-sajmovi.webp')"
414                @click="
415                    open = (activeMenu === 'fairs' ? !open : true);
416                    activeMenu = 'fairs';
417                    ensure('fairs', 'https://sajam.net/storage/static/mega-menu/mega-sajmovi.webp');
418                "
419            >
420                                <span>Sajmovi</span>
421                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
422                            </button>
423                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
424                                    :class="{ 'text-brand-400': activeMenu === 'exhibitors' && open }"
425                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-izlagaci.webp')"
426                @click="
427                    open = (activeMenu === 'exhibitors' ? !open : true);
428                    activeMenu = 'exhibitors';
429                    ensure('exhibitors', 'https://sajam.net/storage/static/mega-menu/mega-izlagaci.webp');
430                "
431            >
432                                <span>Izlagači</span>
433                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
434                            </button>
435                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
436                                    :class="{ 'text-brand-400': activeMenu === 'visitors' && open }"
437                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-posetioci.webp')"
438                @click="
439                    open = (activeMenu === 'visitors' ? !open : true);
440                    activeMenu = 'visitors';
441                    ensure('visitors', 'https://sajam.net/storage/static/mega-menu/mega-posetioci.webp');
442                "
443            >
444                                <span>Posetioci</span>
445                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
446                            </button>
447                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
448                                    :class="{ 'text-brand-400': activeMenu === 'congress' && open }"
449                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-kongres.webp')"
450                @click="
451                    open = (activeMenu === 'congress' ? !open : true);
452                    activeMenu = 'congress';
453                    ensure('congress', 'https://sajam.net/storage/static/mega-menu/mega-kongres.webp');
454                "
455            >
456                                <span>Kongresni Centar „Master&quot;</span>
457                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
458                            </button>
459                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
460                                    :class="{ 'text-brand-400': activeMenu === 'press' && open }"
461                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-press.webp')"
462                @click="
463                    open = (activeMenu === 'press' ? !open : true);
464                    activeMenu = 'press';
465                    ensure('press', 'https://sajam.net/storage/static/mega-menu/mega-press.webp');
466                "
467            >
468                                <span>Press</span>
469                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
470                            </button>
471                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
472                                    :class="{ 'text-brand-400': activeMenu === 'calendar' && open }"
473                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-kalendar.webp')"
474                @click="
475                    open = (activeMenu === 'calendar' ? !open : true);
476                    activeMenu = 'calendar';
477                    ensure('calendar', 'https://sajam.net/storage/static/mega-menu/mega-kalendar.webp');
478                "
479            >
480                                <span>Kalendar</span>
481                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
482                            </button>
483                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
484                                    :class="{ 'text-brand-400': activeMenu === 'about' && open }"
485                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-about.webp')"
486                @click="
487                    open = (activeMenu === 'about' ? !open : true);
488                    activeMenu = 'about';
489                    ensure('about', 'https://sajam.net/storage/static/mega-menu/mega-about.webp');
490                "
491            >
492                                <span>O Sajmu</span>
493                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
494                            </button>
495                                                    <button class="flex items-center gap-1 hover:text-brand-400 transition cursor-pointer"
496                                    :class="{ 'text-brand-400': activeMenu === 'contact' && open }"
497                                     @mouseenter="prefetch('https://sajam.net/storage/static/mega-menu/mega-contact.webp')"
498                @click="
499                    open = (activeMenu === 'contact' ? !open : true);
500                    activeMenu = 'contact';
501                    ensure('contact', 'https://sajam.net/storage/static/mega-menu/mega-contact.webp');
502                "
503            >
504                                <span>Kontakt</span>
505                                <i class="fa-solid fa-chevron-down text-[10px] opacity-80"></i>
506                            </button>
507                        
508                        
509                                                
510
511                        
512                        <div x-show="open"
513                             x-transition.opacity
514                             @click.outside="if (!($refs.navArea.contains($event.target))) open = false"
515                             class="absolute top-full left-1/2 -translate-x-1/2 mt-6
516                             w-[86vw] max-w-9xl text-gray-900 p-2 z-50
517                             [content-visibility:auto] [contain-intrinsic-size:1000px]">
518                            <div x-show="activeMenu === 'fairs'"><div class="">
519    <div class="grid grid-cols-3 gap-6 p-6 bg-white rounded-b-xl">
520        
521        <div class="flex flex-col">
522            <div class="relative flex aspect-[16/3] items-end p-4 text-white overflow-hidden bg-brand-500">
523                <div class="relative z-[2]">
524                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
525                        Sajmovi</h3>
526                    <p class="text-xs sm:text-sm leading-snug font-medium">
527                        Brzi pristup najvažnijem
528                    </p>
529                </div>
530                <img data-mega="fairs"
531                     alt=""
532                     width="1300"
533                     height="170"
534                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
535                     loading="lazy"
536                     decoding="async"
537                     fetchpriority="low">
538                <!--<div class="inset-0 z-[1] absolute bg-gradient-to-r from-brand-500/90  to-brand-500/50"></div>
539                -->
540            </div>
541
542            <div class="mt-4 grid gap-2">
543                <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/ulaznice"
544              >
545        
546        <span class="relative shrink-0">
547            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
548                <i class="fa-solid fa-ticket text-sm"></i>
549            </span>
550        </span>
551
552                    <span class="h-6 w-px bg-gray-200"></span>
553        
554        
555        <span class="min-w-0 flex flex-col">
556            <span class="text-xs font-semibold text-neutral-900 truncate">
557                Porudžbenice, ulaznice i formulari
558            </span>
559                    </span>
560
561        
562                    <span
563                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
564                <i class="fa-solid fa-arrow-right-long"></i>
565            </span>
566            </a>
567                <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kalendar"
568              >
569        
570        <span class="relative shrink-0">
571            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
572                <i class="fa-solid fa-calendar-day text-sm"></i>
573            </span>
574        </span>
575
576                    <span class="h-6 w-px bg-gray-200"></span>
577        
578        
579        <span class="min-w-0 flex flex-col">
580            <span class="text-xs font-semibold text-neutral-900 truncate">
581                Kalendar događaja
582            </span>
583                    </span>
584
585        
586                    <span
587                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
588                <i class="fa-solid fa-arrow-right-long"></i>
589            </span>
590            </a>
591                <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/kako-doci"
592              >
593        
594        <span class="relative shrink-0">
595            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
596                <i class="fa-solid fa-route text-sm"></i>
597            </span>
598        </span>
599
600                    <span class="h-6 w-px bg-gray-200"></span>
601        
602        
603        <span class="min-w-0 flex flex-col">
604            <span class="text-xs font-semibold text-neutral-900 truncate">
605                Kako do Sajma?
606            </span>
607                    </span>
608
609        
610                    <span
611                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
612                <i class="fa-solid fa-arrow-right-long"></i>
613            </span>
614            </a>
615                <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/plan-sajma"
616              >
617        
618        <span class="relative shrink-0">
619            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
620                <i class="fa-solid fa-map text-sm"></i>
621            </span>
622        </span>
623
624                    <span class="h-6 w-px bg-gray-200"></span>
625        
626        
627        <span class="min-w-0 flex flex-col">
628            <span class="text-xs font-semibold text-neutral-900 truncate">
629                Mapa Sajma
630            </span>
631                    </span>
632
633        
634                    <span
635                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
636                <i class="fa-solid fa-arrow-right-long"></i>
637            </span>
638            </a>
639            </div>
640        </div>
641
642        
643        <div class="min-w-0">
644            <h4 class="text-sm font-bold uppercase tracking-wide text-gray-600">
645                Istaknuti sajmovi</h4>
646            <ul class="mt-3 rounded-lg border border-gray-200 overflow-hidden bg-white">
647                                    <li>
648                        <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026"
649                           class="group flex items-center gap-4 p-4 hover:bg-gray-50 transition">
650                            <div class="w-14 shrink-0 text-center">
651                                <div class="text-lg font-extrabold text-gray-900">28.09</div>
652                                <div class="text-xs text-gray-500">- 02.10</div>
653                            </div>
654                            <span class="h-6 w-px bg-neutral-200"></span>
655                            <div class="min-w-0">
656                                <div class="flex items-center gap-2">
657                                                                            <span
658                                              class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
659                                            U toku
660                                        </span>
661                                                                        <span class="truncate font-semibold text-gray-900">16. EWDA konferencija - EWDA 2026</span>
662                                </div>
663                                <div class="text-sm text-gray-400">2026</div>
664                            </div>
665                            <i class="fa-solid fa-arrow-right-long ms-auto text-gray-300 group-hover:text-gray-400"></i>
666                        </a>
667                    </li>
668                                    <li>
669                        <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova"
670                           class="group flex items-center gap-4 p-4 hover:bg-gray-50 transition">
671                            <div class="w-14 shrink-0 text-center">
672                                <div class="text-lg font-extrabold text-gray-900">30.09</div>
673                                <div class="text-xs text-gray-500">- 04.10</div>
674                            </div>
675                            <span class="h-6 w-px bg-neutral-200"></span>
676                            <div class="min-w-0">
677                                <div class="flex items-center gap-2">
678                                                                            <span
679                                              class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
680                                            U toku
681                                        </span>
682                                                                        <span class="truncate font-semibold text-gray-900">57. MEĐUNARODNI SAJAM LOVA I RIBOLOVA</span>
683                                </div>
684                                <div class="text-sm text-gray-400">2026</div>
685                            </div>
686                            <i class="fa-solid fa-arrow-right-long ms-auto text-gray-300 group-hover:text-gray-400"></i>
687                        </a>
688                    </li>
689                                    <li>
690                        <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026"
691                           class="group flex items-center gap-4 p-4 hover:bg-gray-50 transition">
692                            <div class="w-14 shrink-0 text-center">
693                                <div class="text-lg font-extrabold text-gray-900">30.09</div>
694                                <div class="text-xs text-gray-500">- 04.10</div>
695                            </div>
696                            <span class="h-6 w-px bg-neutral-200"></span>
697                            <div class="min-w-0">
698                                <div class="flex items-center gap-2">
699                                                                            <span
700                                              class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
701                                            U toku
702                                        </span>
703                                                                        <span class="truncate font-semibold text-gray-900">SAJAM EKOLOGIJE - 2026</span>
704                                </div>
705                                <div class="text-sm text-gray-400">2026</div>
706                            </div>
707                            <i class="fa-solid fa-arrow-right-long ms-auto text-gray-300 group-hover:text-gray-400"></i>
708                        </a>
709                    </li>
710                            </ul>
711            <div class="mt-3 flex gap-2">
712                <a href="https://sajam.net/sr/kalendar"
713       class="ui-btn relative inline-flex items-center justify-center select-none
714             transition will-change-transform duration-150
715             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
716             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2   u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
717       data-variant="secondary"
718       data-scheme="light">
719                <span class="ui-btn__label">Pretraži događaje</span>
720            </a>
721                <a href="https://sajam.net/sr/vesti"
722       class="ui-btn relative inline-flex items-center justify-center select-none
723             transition will-change-transform duration-150
724             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
725             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2   u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
726       data-variant="secondary"
727       data-scheme="light">
728                <span class="ui-btn__label">Najave</span>
729            </a>
730            </div>
731        </div>
732
733        
734        <div class="grid gap-3">
735            
736            <a href="https://sajam.net/sr/posetioci"
737   class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300
738   shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)]
739   transition-shadow duration-150 ease-linear">
740    <img src="https://sajam.net/media/tiles/visitors.jpg"
741         alt=""
742         class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center"
743         loading="lazy">
744    <div
745         class="pointer-events-none absolute inset-0 bg-gradient-to-r 
746    from-white via-white/60 to-transparent transition-colors duration-200
747    group-hover:from-white group-hover:via-white/90 group-hover:to-white/50">
748        <div class="absolute z-[2] inset-0">
749            <img src="https://sajam.net/images/logo.svg"
750                 alt="Novosadski Sajam Logo"
751                 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80">
752        </div>
753    </div>
754
755    <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2">
756        <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i
757               class="fa-solid fa-users items-center text-xs"></i></span>
758        <span class="text-gray-900 font-medium text-xl">Posetioci</span>
759                    <i data-ph="caret-right-bold"
760               class="w-4 h-4 -translate-x-6 text-white/20
761               group-hover:translate-x-0 group-hover:text-white/100 ml-auto
762               transition-transform duration-200"></i>
763            </div>
764</a>
765
766            
767            <a href="https://sajam.net/sr/izlagaci"
768   class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300
769   shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)]
770   transition-shadow duration-150 ease-linear">
771    <img src="https://sajam.net/media/tiles/exhibitors.jpg"
772         alt=""
773         class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center"
774         loading="lazy">
775    <div
776         class="pointer-events-none absolute inset-0 bg-gradient-to-r 
777    from-white via-white/60 to-transparent transition-colors duration-200
778    group-hover:from-white group-hover:via-white/90 group-hover:to-white/50">
779        <div class="absolute z-[2] inset-0">
780            <img src="https://sajam.net/images/logo.svg"
781                 alt="Novosadski Sajam Logo"
782                 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80">
783        </div>
784    </div>
785
786    <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2">
787        <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i
788               class="fa-solid fa-briefcase items-center text-xs"></i></span>
789        <span class="text-gray-900 font-medium text-xl">Izlagači</span>
790                    <i data-ph="caret-right-bold"
791               class="w-4 h-4 -translate-x-6 text-white/20
792               group-hover:translate-x-0 group-hover:text-white/100 ml-auto
793               transition-transform duration-200"></i>
794            </div>
795</a>
796
797            
798            <a href="https://sajam.net/sr/kongres"
799   class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300
800   shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)]
801   transition-shadow duration-150 ease-linear">
802    <img src="https://sajam.net/media/tiles/congress.webp"
803         alt=""
804         class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center"
805         loading="lazy">
806    <div
807         class="pointer-events-none absolute inset-0 bg-gradient-to-r 
808    from-white via-white/60 to-transparent transition-colors duration-200
809    group-hover:from-white group-hover:via-white/90 group-hover:to-white/50">
810        <div class="absolute z-[2] inset-0">
811            <img src="https://sajam.net/images/logo.svg"
812                 alt="Novosadski Sajam Logo"
813                 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80">
814        </div>
815    </div>
816
817    <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2">
818        <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i
819               class="fa-solid fa-building-columns items-center text-xs"></i></span>
820        <span class="text-gray-900 font-medium text-xl">Kongresni Centar „Master&quot;</span>
821                    <i data-ph="caret-right-bold"
822               class="w-4 h-4 -translate-x-6 text-white/20
823               group-hover:translate-x-0 group-hover:text-white/100 ml-auto
824               transition-transform duration-200"></i>
825            </div>
826</a>
827
828            
829            <a href="https://sajam.net/sr/novinarstvo"
830   class="relative overflow-hidden group rounded-md border border-gray-300 hover:bg-gray-300
831   shadow-[0_0_0_0_rgba(202,33,43,0)] hover:shadow-[-8px_8px_0px_1px_rgba(202,33,43,.9)]
832   transition-shadow duration-150 ease-linear">
833    <img src="https://sajam.net/media/tiles/press.jpg"
834         alt=""
835         class="absolute inset-0 h-full w-full group-hover:blur-[3px] object-cover object-center"
836         loading="lazy">
837    <div
838         class="pointer-events-none absolute inset-0 bg-gradient-to-r 
839    from-white via-white/60 to-transparent transition-colors duration-200
840    group-hover:from-white group-hover:via-white/90 group-hover:to-white/50">
841        <div class="absolute z-[2] inset-0">
842            <img src="https://sajam.net/images/logo.svg"
843                 alt="Novosadski Sajam Logo"
844                 class="absolute -right-12 group-hover:translate-x-48 transition-transform duration-300 -bottom-[-1/3] rotate-15 h-30 pointer-events-none opacity-80">
845        </div>
846    </div>
847
848    <div class="relative h-full flex items-center z-[1] py-2 px-4 gap-2">
849        <span class="inline-flex rounded-md bg-white/10 items-center justify-center w-10 h-10 backdrop-blur-lg"><i
850               class="fa-solid fa-bullhorn items-center text-xs"></i></span>
851        <span class="text-gray-900 font-medium text-xl">Press</span>
852                    <i data-ph="caret-right-bold"
853               class="w-4 h-4 -translate-x-6 text-white/20
854               group-hover:translate-x-0 group-hover:text-white/100 ml-auto
855               transition-transform duration-200"></i>
856            </div>
857</a>
858        </div>
859    </div>
860</div>
861</div>
862                            <div x-show="activeMenu === 'exhibitors'"><div class="">
863    <div class="grid grid-cols-4 gap-3 pb-8">
864        <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl">
865            <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
866                <div class="relative z-[2] text-white ps-2">
867                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
868                        Izlagači</h3>
869                    <p class="text-xs sm:text-sm leading-snug font-medium">Kompletan vodič i logistička podrška za vaš
870                        uspešan nastup i predstavljanje na Novosadskom sajmu.</p>
871                </div>
872                <div class="relative z-[2] ms-auto">
873                    <a href="https://sajam.net/sr/izlagaci"
874       class="ui-btn relative inline-flex items-center justify-center select-none
875             transition will-change-transform duration-150
876             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
877             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
878       data-variant="primary"
879       data-scheme="dark">
880                                    <i class="fa-solid fa-up-right-from-square"></i>
881                            <span class="ui-btn__label">Otvori centar informacija za izlagače</span>
882            </a>
883                </div>
884                <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
885                <img data-mega="exhibitors"
886                     alt=""
887                     width="1300"
888                     height="170"
889                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
890                     loading="lazy"
891                     decoding="async"
892                     fetchpriority="low">
893            </div>
894            <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5">
895                <div class="min-w-0 px-4">
896            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
897            Priprema nastupa</h4>
898    
899    <ul class="mt-3 space-y-2">
900                    
901                            <li class="min-w-0">
902                    <a href="https://sajam.net/sr/izlagaci/prijave"
903                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
904                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
905            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
906                        Prijava i uslovi učešća
907                        <span
908                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
909                            <i data-ph="caret-right-bold"
910                               class="w-3.5 h-3.5"></i></span>
911                    </a>
912                </li>
913                                
914                            <li class="min-w-0">
915                    <a href="https://sajam.net/sr/izlagaci/prijave"
916                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
917                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
917whitespace-normal break-words
918            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
919                        Usluge marketinga
920                        <span
921                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
922                            <i data-ph="caret-right-bold"
923                               class="w-3.5 h-3.5"></i></span>
924                    </a>
925                </li>
926                                
927                            <li class="min-w-0">
928                    <a href="https://sajam.net/sr/izlagaci/najave"
929                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
930                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
931            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
932                        Najava događaja
933                        <span
934                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
935                            <i data-ph="caret-right-bold"
936                               class="w-3.5 h-3.5"></i></span>
937                    </a>
938                </li>
939                                
940                            <li class="min-w-0">
941                    <a href="https://sajam.net/sr/izlagaci/reklamne-usluge"
942                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
943                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
944            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
945                        Brendiranje i reklamne usluge
946                        <span
947                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
948                            <i data-ph="caret-right-bold"
949                               class="w-3.5 h-3.5"></i></span>
950                    </a>
951                </li>
952                                
953                            <li class="min-w-0">
954                    <a href="https://sajam.net/sr/izlagaci/ocenjivanje-kvaliteta"
955                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
956                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
957            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
958                        Ocenjivanje kvaliteta
959                        <span
960                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
961                            <i data-ph="caret-right-bold"
962                               class="w-3.5 h-3.5"></i></span>
963                    </a>
964                </li>
965                        </ul>
966</div>
967
968                <div class="min-w-0 px-4">
969            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
970            Å tandovi i oprema</h4>
971    
972    <ul class="mt-3 space-y-2">
973                    
974                            <li class="min-w-0">
975                    <a href="https://sajam.net/sr/izlagaci/setup-hub"
976                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
977                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
978            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
979                        Å tandovi i oprema
980                        <span
981                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
982                            <i data-ph="caret-right-bold"
983                               class="w-3.5 h-3.5"></i></span>
984                    </a>
985                </li>
986                                
987                            <li class="min-w-0">
988                    <a href="https://sajam.net/sr/izlagaci/uredjenje-prostora"
989                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
990                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
990whitespace-normal break-words
991            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
992                        Uređenje prostora
993                        <span
994                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
995                            <i data-ph="caret-right-bold"
996                               class="w-3.5 h-3.5"></i></span>
997                    </a>
998                </li>
999                                
1000                            <li class="min-w-0">
1001                    <a href="https://sajam.net/sr/izlagaci/struja-voda-internet"
1002                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1003                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1004            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1005                        Struja, voda, internet
1006                        <span
1007                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1008                            <i data-ph="caret-right-bold"
1009                               class="w-3.5 h-3.5"></i></span>
1010                    </a>
1011                </li>
1012                                
1013                            <li class="min-w-0">
1014                    <a href="https://sajam.net/sr/izlagaci/audio-video-podrska"
1015                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1016                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1017            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1018                        Audio/Video podrška
1019                        <span
1020                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1021                            <i data-ph="caret-right-bold"
1022                               class="w-3.5 h-3.5"></i></span>
1023                    </a>
1024                </li>
1025                                
1026                            <li class="min-w-0">
1027                    <a href="https://sajam.net/sr/izlagaci/bezbednost-osiguranje"
1028                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1029                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1030            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1031                        Bezbednost i osiguranje
1032                        <span
1033                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1034                            <i data-ph="caret-right-bold"
1035                               class="w-3.5 h-3.5"></i></span>
1036                    </a>
1037                </li>
1038                        </ul>
1039</div>
1040
1041                <div class="min-w-0 px-4">
1042            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1043            Logistika &amp; ostalo</h4>
1044    
1045    <ul class="mt-3 space-y-2">
1046                    
1047                            <li class="min-w-0">
1048                    <a href="https://sajam.net/sr/izlagaci/zastupnici-spediteri"
1049                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1050                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1051            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1052                        Zastupnici i špediteri
1053                        <span
1054                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1055                            <i data-ph="caret-right-bold"
1056                               class="w-3.5 h-3.5"></i></span>
1057                    </a>
1058                </li>
1059                                
1060                            <li class="min-w-0">
1061                    <a href="https://sajam.net/sr/izlagaci/parking"
1062                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1063                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
1063whitespace-normal break-words
1064            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1065                        Parking i skladištenje
1066                        <span
1067                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1068                            <i data-ph="caret-right-bold"
1069                               class="w-3.5 h-3.5"></i></span>
1070                    </a>
1071                </li>
1072                                
1073                            <li class="min-w-0">
1074                    <a href="https://sajam.net/sr/kongres"
1075                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1076                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1077            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1078                        Kongresni centar „Master“
1079                        <span
1080                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1081                            <i data-ph="caret-right-bold"
1082                               class="w-3.5 h-3.5"></i></span>
1083                    </a>
1084                </li>
1085                                
1086                            <li class="min-w-0">
1087                    <a href="https://sajam.net/sr/kontakt"
1088                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1089                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1090            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1091                        Kontakt informacije
1092                        <span
1093                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1094                            <i data-ph="caret-right-bold"
1095                               class="w-3.5 h-3.5"></i></span>
1096                    </a>
1097                </li>
1098                        </ul>
1099</div>
1100            </div>
1101        </div>
1102
1103        
1104        <div class="flex flex-col justify-between my-auto">
1105            <div class="rounded-r-xl p-5 bg-white min-w-0 break-words">
1106                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
1107                    Pomoć i podrška</h4>
1108                <p class="mt-1 ps-2 text-xs text-wrap text-gray-600">
1109                    Naš tim je tu za vas. Pogledajte vodiče ili kontaktirajte koordinatora.
1110                </p>
1111
1112                
1113                <div class="mt-3 grid grid-cols-1 gap-3">
1114                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/izlagaci/prijave"
1115              >
1116        
1117        <span class="relative shrink-0">
1118            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1119                <i class="fa-solid fa-file-signature text-sm"></i>
1120            </span>
1121        </span>
1122
1123                    <span class="h-6 w-px bg-gray-200"></span>
1124        
1125        
1126        <span class="min-w-0 flex flex-col">
1127            <span class="text-xs font-semibold text-neutral-900 truncate">
1128                Kako da postanem izlagač?
1129            </span>
1130                    </span>
1131
1132        
1133                    <span
1134                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1135                <i class="fa-solid fa-arrow-right-long"></i>
1136            </span>
1137            </a>
1138                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/obavestenja"
1139              >
1140        
1141        <span class="relative shrink-0">
1142            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1143                <i class="fa-solid fa-circle-question text-sm"></i>
1144            </span>
1145        </span>
1146
1147                    <span class="h-6 w-px bg-gray-200"></span>
1148        
1149        
1150        <span class="min-w-0 flex flex-col">
1151            <span class="text-xs font-semibold text-neutral-900 truncate">
1152                Česta pitanja i odgovori
1153            </span>
1154                    </span>
1155
1156        
1157                    <span
1158                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1159                <i class="fa-solid fa-arrow-right-long"></i>
1160            </span>
1161            </a>
1162                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/izlagaci/reklamne-usluge"
1163              >
1164        
1165        <span class="relative shrink-0">
1166            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1167                <i class="fa-solid fa-book-open text-sm"></i>
1168            </span>
1169        </span>
1170
1171                    <span class="h-6 w-px bg-gray-200"></span>
1172        
1173        
1174        <span class="min-w-0 flex flex-col">
1175            <span class="text-xs font-semibold text-neutral-900 truncate">
1176                Kontaktirajte koordinatora
1177            </span>
1178                    </span>
1179
1180        
1181                    <span
1182                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1183                <i class="fa-solid fa-arrow-right-long"></i>
1184            </span>
1185            </a>
1186                </div>
1187            </div>
1188        </div>
1189    </div>
1190
1191    
1192    <style>
1193        .ql-tile {
1194            position: relative;
1195            display: flex;
1196            align-items: center;
1197            gap: .6rem;
1198            border: 1px solid #e5e7eb;
1199            border-radius: .75rem;
1200            background: #fff;
1201            padding: .6rem .75rem;
1202            transition: .2s ease
1203        }
1204
1205        .ql-tile:hover {
1206            background: #f9fafb;
1207            border-color: #e5e7eb;
1208            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
1209        }
1210
1211        .ql-chip {
1212            display: inline-flex;
1213            align-items: center;
1214            justify-content: center;
1215            width: 28px;
1216            height: 28px;
1217            border-radius: .5rem;
1218            background: #f3f4f6;
1219            color: hsl(var(--brand-500))
1220        }
1221
1222        .ql-label {
1223            font-weight: 600;
1224            color: #111827
1225        }
1226
1227        .ql-arrow {
1228            margin-left: auto;
1229            color: #9ca3af;
1230            transition: transform .2s ease
1231        }
1232
1233        .ql-tile:hover .ql-arrow {
1234            transform: translateX(2px)
1235        }
1236    </style>
1237</div>
1238</div>
1239                            <div x-show="activeMenu === 'visitors'"><div class="">
1240    <div class="grid grid-cols-4 gap-3 pb-8">
1241        <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl">
1242            <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
1243                <div class="relative z-[2] text-white ps-2">
1244                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
1245                        Posetioci</h3>
1246                    <p class="text-xs sm:text-sm leading-snug font-medium">Sve praktične informacije, mape i servisne
1247                        usluge koje će vaš dolazak i boravak učiniti jednostavnim i prijatnim.</p>
1248                </div>
1249                <div class="relative z-[2] ms-auto">
1250                    <a href="https://sajam.net/sr/posetioci"
1251       class="ui-btn relative inline-flex items-center justify-center select-none
1252             transition will-change-transform duration-150
1253             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
1254             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
1255       data-variant="primary"
1256       data-scheme="dark">
1257                                    <i class="fa-solid fa-up-right-from-square"></i>
1258                            <span class="ui-btn__label">Otvori centar informacija za posetioce</span>
1259            </a>
1260                </div>
1261                <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
1262                <img data-mega="visitors"
1263                     alt=""
1264                     width="1300"
1265                     height="170"
1266                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
1267                     loading="lazy"
1268                     decoding="async"
1269                     fetchpriority="low">
1270            </div>
1271            <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5">
1272                <div class="min-w-0 px-4">
1273            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1274            Planirajte posetu</h4>
1275    
1276    <ul class="mt-3 space-y-2">
1277                    
1278                            <li class="min-w-0">
1279                    <a href="https://sajam.net/sr/posetioci/ulaznice"
1280                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1281                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1282            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1283                        Ulaznice
1284                        <span
1285                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1286                            <i data-ph="caret-right-bold"
1287                               class="w-3.5 h-3.5"></i></span>
1288                    </a>
1289                </li>
1290                                
1291                            <li class="min-w-0">
1292                    <a href="https://sajam.net/sr/posetioci/kako-doci"
1293                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1294                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1295            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1296                        Kako do nas (mapa)
1297                        <span
1298                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1299                            <i data-ph="caret-right-bold"
1300                               class="w-3.5 h-3.5"></i></span>
1301                    </a>
1302                </li>
1303                                
1304                            <li class="min-w-0">
1305                    <a href="https://sajam.net/sr/posetioci/parking"
1306                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1307                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1308            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1309                        Parking i kapije
1310                        <span
1311                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1312                            <i data-ph="caret-right-bold"
1313                               class="w-3.5 h-3.5"></i></span>
1314                    </a>
1315                </li>
1316                                
1317                            <li class="min-w-0">
1318                    <a href="https://sajam.net/sr/posetioci/plan-sajma"
1319                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1320                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1321            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1322                        Plan Sajma (hale)
1323                        <span
1324                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1325                            <i data-ph="caret-right-bold"
1326                               class="w-3.5 h-3.5"></i></span>
1327                    </a>
1328                </li>
1329                        </ul>
1330</div>
1331
1332                <div class="min-w-0 px-4">
1333            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1334            Informacije</h4>
1335    
1336    <ul class="mt-3 space-y-2">
1337                    
1338                            <li class="min-w-0">
1339                    <a href="https://sajam.net/sr/posetioci/najave"
1340                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1341                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
1341whitespace-normal break-words
1342            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1343                        Programi i najave
1344                        <span
1345                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1346                            <i data-ph="caret-right-bold"
1347                               class="w-3.5 h-3.5"></i></span>
1348                    </a>
1349                </li>
1350                                
1351                            <li class="min-w-0">
1352                    <a href="https://sajam.net/sr/posetioci/katalog"
1353                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1354                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1355            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1356                        Katalog i izlagači
1357                        <span
1358                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1359                            <i data-ph="caret-right-bold"
1360                               class="w-3.5 h-3.5"></i></span>
1361                    </a>
1362                </li>
1363                                
1364                            <li class="min-w-0">
1365                    <a href="https://sajam.net/sr/posetioci/smestaj-preporuke"
1366                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1367                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1368            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1369                        Smeštaj i preporuke
1370                        <span
1371                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1372                            <i data-ph="caret-right-bold"
1373                               class="w-3.5 h-3.5"></i></span>
1374                    </a>
1375                </li>
1376                                
1377                            <li class="min-w-0">
1378                    <a href="https://sajam.net/sr/posetioci/pristupacnost"
1379                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1380                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1381            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1382                        Pristupačnost (A11y)
1383                        <span
1384                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1385                            <i data-ph="caret-right-bold"
1386                               class="w-3.5 h-3.5"></i></span>
1387                    </a>
1388                </li>
1389                        </ul>
1390</div>
1391
1392                <div class="min-w-0 px-4">
1393            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1394            Medija centar</h4>
1395    
1396    <ul class="mt-3 space-y-2">
1397                    
1398                            <li class="min-w-0">
1399                    <a href="https://sajam.net/sr/media/galerije"
1400                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1401                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1402            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1403                        MediaHub (foto/galerije)
1404                        <span
1405                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1406                            <i data-ph="caret-right-bold"
1407                               class="w-3.5 h-3.5"></i></span>
1408                    </a>
1409                </li>
1410                                
1411                            <li class="min-w-0">
1412                    <a href="https://sajam.net/sr/posetioci/video-galerija"
1413                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1414                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
1414whitespace-normal break-words
1415            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1416                        TV produkcija „Svi na Sajam“
1417                        <span
1418                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1419                            <i data-ph="caret-right-bold"
1420                               class="w-3.5 h-3.5"></i></span>
1421                    </a>
1422                </li>
1423                                
1424                            <li class="min-w-0">
1425                    <a href="https://sajam.net/sr/obavestenja"
1426                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1427                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1428            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1429                        Saopštenja i objave
1430                        <span
1431                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1432                            <i data-ph="caret-right-bold"
1433                               class="w-3.5 h-3.5"></i></span>
1434                    </a>
1435                </li>
1436                        </ul>
1437</div>
1438            </div>
1439        </div>
1440
1441        
1442        <div
1443             class="flex flex-col justify-between my-auto rounded-r-xl p-5 
1444             bg-white min-w-0 break-words divide-y divide-brand-500/10">
1445            <div class="pb-3">
1446                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
1447                    Brzi linkovi</h4>
1448                <div class="mt-3 grid grid-cols-1 gap-3">
1449                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/ulaznice"
1450              >
1451        
1452        <span class="relative shrink-0">
1453            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1454                <i class="fa-solid fa-ticket text-sm"></i>
1455            </span>
1456        </span>
1457
1458                    <span class="h-6 w-px bg-gray-200"></span>
1459        
1460        
1461        <span class="min-w-0 flex flex-col">
1462            <span class="text-xs font-semibold text-neutral-900 truncate">
1463                Porudžbenice, ulaznice i formulari
1464            </span>
1465                    </span>
1466
1467        
1468                    <span
1469                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1470                <i class="fa-solid fa-arrow-right-long"></i>
1471            </span>
1472            </a>
1473                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kalendar"
1474              >
1475        
1476        <span class="relative shrink-0">
1477            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1478                <i class="fa-solid fa-calendar-day text-sm"></i>
1479            </span>
1480        </span>
1481
1482                    <span class="h-6 w-px bg-gray-200"></span>
1483        
1484        
1485        <span class="min-w-0 flex flex-col">
1486            <span class="text-xs font-semibold text-neutral-900 truncate">
1487                Kalendar događaja
1488            </span>
1489                    </span>
1490
1491        
1492                    <span
1493                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1494                <i class="fa-solid fa-arrow-right-long"></i>
1495            </span>
1496            </a>
1497                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/plan-sajma"
1498              >
1499        
1500        <span class="relative shrink-0">
1501            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1502                <i class="fa-solid fa-map text-sm"></i>
1503            </span>
1504        </span>
1505
1506                    <span class="h-6 w-px bg-gray-200"></span>
1507        
1508        
1509        <span class="min-w-0 flex flex-col">
1510            <span class="text-xs font-semibold text-neutral-900 truncate">
1511                Mapa Sajma
1512            </span>
1513                    </span>
1514
1515        
1516                    <span
1517                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1518                <i class="fa-solid fa-arrow-right-long"></i>
1519            </span>
1520            </a>
1521                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/posetioci/kako-doci"
1522              >
1523        
1524        <span class="relative shrink-0">
1525            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1526                <i class="fa-solid fa-route text-sm"></i>
1527            </span>
1528        </span>
1529
1530                    <span class="h-6 w-px bg-gray-200"></span>
1531        
1532        
1533        <span class="min-w-0 flex flex-col">
1534            <span class="text-xs font-semibold text-neutral-900 truncate">
1535                Kako do Sajma?
1536            </span>
1537                    </span>
1538
1539        
1540                    <span
1541                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1542                <i class="fa-solid fa-arrow-right-long"></i>
1543            </span>
1544            </a>
1545                </div>
1546
1547            </div>
1548            <div class="mt-4 flex flex-wrap gap-2">
1549                <a href="https://sajam.net/sr/posetioci/parking"
1550                   class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50">
1551                    <i class="fa-solid fa-square-parking text-gray-500"></i> Parking
1552                </a>
1553                <a href="https://sajam.net/sr/posetioci/pristupacnost"
1554                   class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50">
1555                    <i class="fa-solid fa-universal-access text-gray-500"></i> A11y
1556                </a>
1557            </div>
1558        </div>
1559    </div>
1560
1561    
1562    <style>
1563        .ql-tile {
1564            position: relative;
1565            display: flex;
1566            align-items: center;
1567            gap: .6rem;
1568            border: 1px solid #e5e7eb;
1569            border-radius: .75rem;
1570            background: #fff;
1571            padding: .6rem .75rem;
1572            transition: .2s ease
1573        }
1574
1575        .ql-tile:hover {
1576            background: #f9fafb;
1577            border-color: #e5e7eb;
1578            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
1579        }
1580
1581        .ql-chip {
1582            display: inline-flex;
1583            align-items: center;
1584            justify-content: center;
1585            width: 28px;
1586            height: 28px;
1587            border-radius: .5rem;
1588            background: #f3f4f6;
1589            color: hsl(var(--brand-500))
1590        }
1591
1592        .ql-label {
1593            font-weight: 600;
1594            color: #111827
1595        }
1596
1597        .ql-arrow {
1598            margin-left: auto;
1599            color: #9ca3af;
1600            transition: transform .2s ease
1601        }
1602
1603        .ql-tile:hover .ql-arrow {
1604            transform: translateX(2px)
1605        }
1606    </style>
1607</div>
1608</div>
1609                            <div x-show="activeMenu === 'congress'"><div class="">
1610    <div class="grid grid-cols-4 gap-3 pb-8">
1611        <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl">
1612            <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
1613                <div class="relative z-[2] text-white ps-2">
1614                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
1615                        Kongresni Centar „Master&quot;</h3>
1616                    <p class="text-xs sm:text-sm leading-snug font-medium">Moderan prostor i profesionalna tehnička
1617                        podrška za besprekornu organizaciju vaših poslovnih događaja i konferencija.</p>
1618                </div>
1619                <div class="relative z-[2] ms-auto">
1620                    <a href="https://sajam.net/sr/kongres"
1621       class="ui-btn relative inline-flex items-center justify-center select-none
1622             transition will-change-transform duration-150
1623             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
1624             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
1625       data-variant="primary"
1626       data-scheme="dark">
1627                                    <i class="fa-solid fa-up-right-from-square"></i>
1628                            <span class="ui-btn__label">Otvori Sve o Kongres Master Centru</span>
1629            </a>
1630                </div>
1631                <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
1632                <img data-mega="congress"
1633                     alt=""
1634                     width="1300"
1635                     height="170"
1636                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
1637                     loading="lazy"
1638                     decoding="async"
1639                     fetchpriority="low">
1640            </div>
1641            <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5">
1642                <div class="min-w-0 px-4">
1643            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1644            Planiranje događaja</h4>
1645    
1646    <ul class="mt-3 space-y-2">
1647                    
1648                            <li class="min-w-0">
1649                    <a href="https://sajam.net/sr/kongres/sale-kapacitet"
1650                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1651                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1652            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1653                        Sale i kapaciteti
1654                        <span
1655                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1656                            <i data-ph="caret-right-bold"
1657                               class="w-3.5 h-3.5"></i></span>
1658                    </a>
1659                </li>
1660                                
1661                            <li class="min-w-0">
1662                    <a href="https://sajam.net/sr/kongres/tehnicka-oprema"
1663                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1664                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1665            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1666                        Tehnička oprema
1667                        <span
1668                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1669                            <i data-ph="caret-right-bold"
1670                               class="w-3.5 h-3.5"></i></span>
1671                    </a>
1672                </li>
1673                                
1674                            <li class="min-w-0">
1675                    <a href="https://sajam.net/sr/kongres/cenovnik-i-prijava"
1676                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1677                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1678            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1679                        Cenovnik i prijava
1680                        <span
1681                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1682                            <i data-ph="caret-right-bold"
1683                               class="w-3.5 h-3.5"></i></span>
1684                    </a>
1685                </li>
1686                                
1687                            <li class="min-w-0">
1688                    <a href="https://sajam.net/sr/kongres/dodatne-usluge"
1689                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1690                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1691            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1692                        Dodatne usluge
1693                        <span
1694                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1695                            <i data-ph="caret-right-bold"
1696                               class="w-3.5 h-3.5"></i></span>
1697                    </a>
1698                </li>
1699                                
1700                            <li class="min-w-0">
1701                    <a href="https://sajam.net/sr/kongres/restoran-usluge"
1702                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1703                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
1703whitespace-normal break-words
1704            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1705                        Restoran &amp; ugostiteljstvo
1706                        <span
1707                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1708                            <i data-ph="caret-right-bold"
1709                               class="w-3.5 h-3.5"></i></span>
1710                    </a>
1711                </li>
1712                        </ul>
1713</div>
1714
1715                <div class="min-w-0 px-4">
1716            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1717            Inspiracija &amp; resursi</h4>
1718    
1719    <ul class="mt-3 space-y-2">
1720                    
1721                            <li class="min-w-0">
1722                    <a href="https://sajam.net/sr/kongres/referentna-lista"
1723                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1724                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1725            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1726                        Referentna lista
1727                        <span
1728                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1729                            <i data-ph="caret-right-bold"
1730                               class="w-3.5 h-3.5"></i></span>
1731                    </a>
1732                </li>
1733                                
1734                            <li class="min-w-0">
1735                    <a href="https://sajam.net/sr/posetioci/pristupacnost"
1736                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1737                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1738            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1739                        Preporuke klijenata
1740                        <span
1741                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1742                            <i data-ph="caret-right-bold"
1743                               class="w-3.5 h-3.5"></i></span>
1744                    </a>
1745                </li>
1746                        </ul>
1747</div>
1748
1749                <div class="min-w-0 px-4">
1750            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
1751            Kontakt &amp; podrška</h4>
1752    
1753    <ul class="mt-3 space-y-2">
1754                    
1755                            <li class="min-w-0">
1756                    <a href="https://sajam.net/sr/kongres/posaljite-upit"
1757                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1758                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1759            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1760                        Pošaljite upit
1761                        <span
1762                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1763                            <i data-ph="caret-right-bold"
1764                               class="w-3.5 h-3.5"></i></span>
1765                    </a>
1766                </li>
1767                                
1768                            <li class="min-w-0">
1769                    <a href="https://sajam.net/sr/kongres/kontakt"
1770                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1771                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1772            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1773                        Tim &amp; kontakt
1774                        <span
1775                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1776                            <i data-ph="caret-right-bold"
1777                               class="w-3.5 h-3.5"></i></span>
1778                    </a>
1779                </li>
1780                                
1781                            <li class="min-w-0">
1782                    <a href="https://sajam.net/sr/obavestenja"
1783                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1784                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1785            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1786                        Česta pitanja (FAQ)
1787                        <span
1788                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1789                            <i data-ph="caret-right-bold"
1790                               class="w-3.5 h-3.5"></i></span>
1791                    </a>
1792                </li>
1793                                
1794                            <li class="min-w-0">
1795                    <a href="https://sajam.net/sr/posetioci/kako-doci"
1796                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
1797                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
1798            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
1799                        Lokacija &amp; dolazak
1800                        <span
1801                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
1802                            <i data-ph="caret-right-bold"
1803                               class="w-3.5 h-3.5"></i></span>
1804                    </a>
1805                </li>
1806                        </ul>
1807</div>
1808            </div>
1809        </div>
1810
1811        
1812        <div
1813             class="flex flex-col justify-between my-auto rounded-r-xl p-5 
1814             bg-white min-w-0 break-words divide-y divide-brand-500/10">
1815            <div class="pb-3">
1816                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Brzi linkovi</h4>
1817
1818                <div class="mt-3 grid grid-cols-1 gap-3">
1819                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kongres/cenovnik-i-prijava"
1820              >
1821        
1822        <span class="relative shrink-0">
1823            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1824                <i class="fa-solid fa-building text-sm"></i>
1825            </span>
1826        </span>
1827
1828                    <span class="h-6 w-px bg-gray-200"></span>
1829        
1830        
1831        <span class="min-w-0 flex flex-col">
1832            <span class="text-xs font-semibold text-neutral-900 truncate">
1833                Informacije hale i kapacitet
1834            </span>
1835                    </span>
1836
1837        
1838                    <span
1839                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1840                <i class="fa-solid fa-arrow-right-long"></i>
1841            </span>
1842            </a>
1843                    
1844                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kongres"
1845              >
1846        
1847        <span class="relative shrink-0">
1848            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1849                <i class="fa-solid fa-calculator text-sm"></i>
1850            </span>
1851        </span>
1852
1853                    <span class="h-6 w-px bg-gray-200"></span>
1854        
1855        
1856        <span class="min-w-0 flex flex-col">
1857            <span class="text-xs font-semibold text-neutral-900 truncate">
1858                Kalkulator cena
1859            </span>
1860                    </span>
1861
1862        
1863                    <span
1864                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1865                <i class="fa-solid fa-arrow-right-long"></i>
1866            </span>
1867            </a>
1868                    
1869                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kongres/sale-kapacitet"
1870              >
1871        
1872        <span class="relative shrink-0">
1873            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
1874                <i class="fa-solid fa-headset text-sm"></i>
1875            </span>
1876        </span>
1877
1878                    <span class="h-6 w-px bg-gray-200"></span>
1879        
1880        
1881        <span class="min-w-0 flex flex-col">
1882            <span class="text-xs font-semibold text-neutral-900 truncate">
1883                Kontaktirajte nas
1884            </span>
1885                    </span>
1886
1887        
1888                    <span
1889                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
1890                <i class="fa-solid fa-arrow-right-long"></i>
1891            </span>
1892            </a>
1893                </div>
1894                <p class="mb-1 mt-3 ps-2 text-xs text-wrap text-gray-600">
1895                    Rezervišite Kongres Master Centar:
1896                </p>
1897                <a href="https://sajam.net/sr/kongres/posaljite-upit"
1898       class="ui-btn relative inline-flex items-center justify-center select-none
1899             transition will-change-transform duration-150
1900             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
1901             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 w-full  u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
1902       data-variant="primary"
1903       data-scheme="light">
1904                                    <i class="fa-solid fa-paper-plane"></i>
1905                            <span class="ui-btn__label">Pošaljite upit</span>
1906            </a>
1907            </div>
1908            
1909            <div class="mt-3 flex flex-wrap gap-2">
1910                <a href="https://sajam.net/sr/posetioci/kako-doci"
1911                   class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50">
1912                    <i class="fa-solid fa-route text-gray-500"></i> Lokacija
1913                </a>
1914                <a href="https://sajam.net/sr/kongres/kontakt"
1915                   class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50">
1916                    <i class="fa-solid fa-question-circle text-gray-500"></i> Najčešća pitanja
1917                </a>
1918            </div>
1919        </div>
1920    </div>
1921
1922    
1923    <style>
1924        .ql-tile {
1925            position: relative;
1926            display: flex;
1927            align-items: center;
1928            gap: .6rem;
1929            border: 1px solid #e5e7eb;
1930            border-radius: .75rem;
1931            background: #fff;
1932            padding: .6rem .75rem;
1933            transition: .2s ease
1934        }
1935
1936        .ql-tile:hover {
1937            background: #f9fafb;
1938            border-color: #e5e7eb;
1939            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
1940        }
1941
1942        .ql-chip {
1943            display: inline-flex;
1944            align-items: center;
1945            justify-content: center;
1946            width: 28px;
1947            height: 28px;
1948            border-radius: .5rem;
1949            background: #f3f4f6;
1950            color: hsl(var(--brand-500))
1951        }
1952
1953        .ql-label {
1954            font-weight: 600;
1955            color: #111827
1956        }
1957
1958        .ql-arrow {
1959            margin-left: auto;
1960            color: #9ca3af;
1961            transition: transform .2s ease
1962        }
1963
1964        .ql-tile:hover .ql-arrow {
1965            transform: translateX(2px)
1966        }
1967    </style>
1968</div>
1969</div>
1970                            <div x-show="activeMenu === 'press'"><div class="">
1971    <div class="grid grid-cols-4 gap-3 pb-8">
1972        <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl">
1973            <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
1974                <div class="relative z-[2] text-white ps-2">
1975                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
1976                        Press</h3>
1977                    <p class="text-xs sm:text-sm leading-snug font-medium">Centralno mesto za predstavnike medija,
1978                        akreditacije, medija kitove i najnovije vesti sa naših manifestacija.</p>
1979                </div>
1980                <div class="relative z-[2] ms-auto">
1981                    <a href="https://sajam.net/sr/novinarstvo"
1982       class="ui-btn relative inline-flex items-center justify-center select-none
1983             transition will-change-transform duration-150
1984             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
1985             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
1986       data-variant="primary"
1987       data-scheme="dark">
1988                                    <i class="fa-solid fa-up-right-from-square"></i>
1989                            <span class="ui-btn__label">Otvori centar informacija za press</span>
1990            </a>
1991                </div>
1992                <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
1993                <img data-mega="press"
1994                     alt=""
1995                     width="1300"
1996                     height="170"
1997                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
1998                     loading="lazy"
1999                     decoding="async"
2000                     fetchpriority="low">
2001            </div>
2002            <div class="grid grid-cols-3 pt-6 mt-4 px-4 divide-x divide-brand-500/5">
2003                <div class="min-w-0 px-4">
2004            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2005            Vesti &amp; saopštenja</h4>
2006    
2007    <ul class="mt-3 space-y-2">
2008                    
2009                            <li class="min-w-0">
2010                    <a href="https://sajam.net/sr/press/konferencije"
2011                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2012                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2013            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2014                        Konferencije za novinare
2015                        <span
2016                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2017                            <i data-ph="caret-right-bold"
2018                               class="w-3.5 h-3.5"></i></span>
2019                    </a>
2020                </li>
2021                        </ul>
2022</div>
2023
2024                <div class="min-w-0 px-4">
2025            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2026            Medijski resursi</h4>
2027    
2028    <ul class="mt-3 space-y-2">
2029                    
2030                            <li class="min-w-0">
2031                    <a href="https://sajam.net/sr/press/akreditacije"
2032                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2033                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2034            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2035                        Akreditacije
2036                        <span
2037                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2038                            <i data-ph="caret-right-bold"
2039                               class="w-3.5 h-3.5"></i></span>
2040                    </a>
2041                </li>
2042                                
2043                            <li class="min-w-0">
2044                    <a href="https://sajam.net/sr/press/medijski-paket"
2045                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2046                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2047            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2048                        Media kit
2049                        <span
2050                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2051                            <i data-ph="caret-right-bold"
2052                               class="w-3.5 h-3.5"></i></span>
2053                    </a>
2054                </li>
2055                                
2056                            <li class="min-w-0">
2057                    <a href="https://sajam.net/sr/posetioci/video-galerija"
2058                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2059                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2060            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2061                        TV &amp; video
2062                        <span
2063                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2064                            <i data-ph="caret-right-bold"
2065                               class="w-3.5 h-3.5"></i></span>
2066                    </a>
2067                </li>
2068                                
2069                            <li class="min-w-0">
2070                    <a href="https://sajam.net/sr/media/galerije"
2071                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2072                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2073            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2074                        Foto galerija
2075                        <span
2076                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2077                            <i data-ph="caret-right-bold"
2078                               class="w-3.5 h-3.5"></i></span>
2079                    </a>
2080                </li>
2081                        </ul>
2082</div>
2083
2084                <div class="min-w-0 px-4">
2085            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2086            Nagrada i kontakti</h4>
2087    
2088    <ul class="mt-3 space-y-2">
2089                    
2090                            <li class="min-w-0">
2091                    <a href="https://sajam.net/sr/press/petar-davidovi%C4%87"
2092                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2093                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2094            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2095                        Nagrada „Petar Davidović“
2096                        <span
2097                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2098                            <i data-ph="caret-right-bold"
2099                               class="w-3.5 h-3.5"></i></span>
2100                    </a>
2101                </li>
2102                        </ul>
2103</div>
2104            </div>
2105        </div>
2106
2107        
2108        <div
2109             class="flex flex-col justify-between my-auto rounded-r-xl p-5 
2110             bg-white min-w-0 break-words divide-y divide-brand-500/10">
2111            <div class="pb-3">
2112                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
2113                    Brzi linkovi</h4>
2114                <div class="mt-3 grid grid-cols-1 gap-3">
2115                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/press/konferencije"
2116              >
2117        
2118        <span class="relative shrink-0">
2119            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
2120                <i class="fa-solid fa-newspaper text-sm"></i>
2121            </span>
2122        </span>
2123
2124                    <span class="h-6 w-px bg-gray-200"></span>
2125        
2126        
2127        <span class="min-w-0 flex flex-col">
2128            <span class="text-xs font-semibold text-neutral-900 truncate">
2129                Konferencije za štampu
2130            </span>
2131                    </span>
2132
2133        
2134                    <span
2135                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
2136                <i class="fa-solid fa-arrow-right-long"></i>
2137            </span>
2138            </a>
2139                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="https://sajam.net/sr/kalendar"
2140              >
2141        
2142        <span class="relative shrink-0">
2143            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
2144                <i class="fa-solid fa-calendar-day text-sm"></i>
2145            </span>
2146        </span>
2147
2148                    <span class="h-6 w-px bg-gray-200"></span>
2149        
2150        
2151        <span class="min-w-0 flex flex-col">
2152            <span class="text-xs font-semibold text-neutral-900 truncate">
2153                Kalendar događaja
2154            </span>
2155                    </span>
2156
2157        
2158                    <span
2159                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
2160                <i class="fa-solid fa-arrow-right-long"></i>
2161            </span>
2162            </a>
2163                </div>
2164                <div class="mt-3 grid grid-cols-2 gap-3">
2165                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border flex-col items-center px-3 py-4 hover:bg-gray-50" href="https://sajam.net/sr/press/medijski-paket"
2166              >
2167        
2168        <span class="relative shrink-0">
2169            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
2170                <i class="fa-solid fa-photo-film text-lg"></i>
2171            </span>
2172        </span>
2173
2174        
2175        
2176        <span class="min-w-0 flex flex-col">
2177            <span class="text-xs font-semibold text-neutral-900 truncate">
2178                Medijski kit
2179            </span>
2180                    </span>
2181
2182        
2183            </a>
2184                    <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border flex-col items-center px-3 py-4 hover:bg-gray-50" href="https://sajam.net/sr/media/galerije"
2185              >
2186        
2187        <span class="relative shrink-0">
2188            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
2189                <i class="fa-solid fa-file-image text-lg"></i>
2190            </span>
2191        </span>
2192
2193        
2194        
2195        <span class="min-w-0 flex flex-col">
2196            <span class="text-xs font-semibold text-neutral-900 truncate">
2197                Galerija fotografija
2198            </span>
2199                    </span>
2200
2201        
2202            </a>
2203                </div>
2204            </div>
2205            <div class="mt-3 flex flex-wrap gap-2">
2206                <a href="https://sajam.net/sr/posetioci/kako-doci"
2207                   class="inline-flex items-center gap-2 rounded-md border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50">
2208                    <i class="fa-solid fa-route text-gray-500"></i> Lokacija
2209                </a>
2210            </div>
2211        </div>
2212    </div>
2213
2214    
2215    <style>
2216        .ql-tile {
2217            position: relative;
2218            display: flex;
2219            align-items: center;
2220            gap: .6rem;
2221            border: 1px solid #e5e7eb;
2222            border-radius: .75rem;
2223            background: #fff;
2224            padding: .6rem .75rem;
2225            transition: .2s ease
2226        }
2227
2228        .ql-tile:hover {
2229            background: #f9fafb;
2230            border-color: #e5e7eb;
2231            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
2232        }
2233
2234        .ql-chip {
2235            display: inline-flex;
2236            align-items: center;
2237            justify-content: center;
2238            width: 28px;
2239            height: 28px;
2240            border-radius: .5rem;
2241            background: #f3f4f6;
2242            color: hsl(var(--brand-500))
2243        }
2244
2245        .ql-label {
2246            font-weight: 600;
2247            color: #111827
2248        }
2249
2250        .ql-arrow {
2251            margin-left: auto;
2252            color: #9ca3af;
2253            transition: transform .2s ease
2254        }
2255
2256        .ql-tile:hover .ql-arrow {
2257            transform: translateX(2px)
2258        }
2259    </style>
2260</div>
2261</div>
2262                            <div x-show="activeMenu === 'calendar'"><div class="grid grid-cols-4 gap-3 pb-8">
2263    <div class="col-span-3 items-stretch min-w-0 bg-white p-4 rounded-b-xl">
2264        <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
2265            <div class="relative z-[2] text-white ps-2">
2266                <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
2267                    Kalendar</h3>
2268                <p class="text-xs sm:text-sm leading-snug font-medium">Detaljan pregled i pretraga svih predstojećih
2269                    sajmova i događaja kako ništa ne biste propustili.</p>
2270            </div>
2271            <div class="relative z-[2] ms-auto">
2272                <a href="https://sajam.net/sr/kalendar"
2273       class="ui-btn relative inline-flex items-center justify-center select-none
2274             transition will-change-transform duration-150
2275             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2276             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
2277       data-variant="primary"
2278       data-scheme="dark">
2279                                    <i class="fa-solid fa-up-right-from-square"></i>
2280                            <span class="ui-btn__label">Pogledaj kalendar događaja</span>
2281            </a>
2282            </div>
2283            <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
2284            <img data-mega="calendar"
2285                 alt=""
2286                 width="1300"
2287                 height="170"
2288                 class="absolute inset-0 w-full h-full object-cover object-center z-0"
2289                 loading="lazy"
2290                 decoding="async"
2291                 fetchpriority="low">
2292        </div>
2293        <ul class="mt-6 rounded-lg border border-gray-200 overflow-hidden bg-white flex-1">
2294                            <li>
2295                    <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026"
2296                       class="group flex items-center justify-between gap-4 p-4 hover:bg-gray-50 transition">
2297                        <div class="flex items-center gap-4 min-w-0">
2298                            <div class="w-14 text-center shrink-0">
2299                                <div class="text-lg font-extrabold text-gray-900">28.09</div>
2300                                <div class="text-xs text-gray-500">- 02.10</div>
2301                            </div>
2302                            <span class="h-6 w-px bg-neutral-200"></span>
2303                            <div class="min-w-0">
2304                                <div class="flex items-center gap-2">
2305                                                                            <span
2306                                              class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
2307                                            U toku
2308                                        </span>
2309                                                                        <span
2310                                          class="text-base font-medium text-gray-900 truncate">16. EWDA konferencija - EWDA 2026</span>
2311                                </div>
2312                                <div class="text-sm text-gray-400">2026</div>
2313                            </div>
2314                        </div>
2315                        <i
2316                           class="fa-solid fa-arrow-right-long text-gray-300 transition-transform duration-200 group-hover:translate-x-1"></i>
2317                    </a>
2318                </li>
2319                            <li>
2320                    <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova"
2321                       class="group flex items-center justify-between gap-4 p-4 hover:bg-gray-50 transition">
2322                        <div class="flex items-center gap-4 min-w-0">
2323                            <div class="w-14 text-center shrink-0">
2324                                <div class="text-lg font-extrabold text-gray-900">30.09</div>
2325                                <div class="text-xs text-gray-500">- 04.10</div>
2326                            </div>
2327                            <span class="h-6 w-px bg-neutral-200"></span>
2328                            <div class="min-w-0">
2329                                <div class="flex items-center gap-2">
2330                                                                            <span
2331                                              class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
2332                                            U toku
2333                                        </span>
2334                                                                        <span
2335                                          class="text-base font-medium text-gray-900 truncate">57. MEĐUNARODNI SAJAM LOVA I RIBOLOVA</span>
2336                                </div>
2337                                <div class="text-sm text-gray-400">2026</div>
2338                            </div>
2339                        </div>
2340                        <i
2341                           class="fa-solid fa-arrow-right-long text-gray-300 transition-transform duration-200 group-hover:translate-x-1"></i>
2342                    </a>
2343                </li>
2344                            <li>
2345                    <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026"
2346                       class="group flex items-center justify-between gap-4 p-4 hover:bg-gray-50 transition">
2347                        <div class="flex items-center gap-4 min-w-0">
2348                            <div class="w-14 text-center shrink-0">
2349                                <div class="text-lg font-extrabold text-gray-900">30.09</div>
2350                                <div class="text-xs text-gray-500">- 04.10</div>
2351                            </div>
2352                            <span class="h-6 w-px bg-neutral-200"></span>
2353                            <div class="min-w-0">
2354                                <div class="flex items-center gap-2">
2355                                                                            <span
2356                                              class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
2357                                            U toku
2358                                        </span>
2359                                                                        <span
2360                                          class="text-base font-medium text-gray-900 truncate">SAJAM EKOLOGIJE - 2026</span>
2361                                </div>
2362                                <div class="text-sm text-gray-400">2026</div>
2363                            </div>
2364                        </div>
2365                        <i
2366                           class="fa-solid fa-arrow-right-long text-gray-300 transition-transform duration-200 group-hover:translate-x-1"></i>
2367                    </a>
2368                </li>
2369                    </ul>
2370    </div>
2371    
2372    <div
2373         class="flex flex-col justify-between my-auto rounded-r-xl p-5 
2374             bg-white min-w-0 break-words divide-y divide-brand-500/10">
2375        <div class="pb-3">
2376            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500 ">
2377                Kalendar</h4>
2378            <p class="mb-1 mt-3 ps-2 text-xs min-w-0 whitespace-normal break-words text-pretty text-gray-600">
2379                Filtrirajte sajmove po kategoriji, sezoni ili statusu.
2380            </p>
2381                        <div x-data="kalMini()"
2382                 class="mt-3 flex-1 min-h-0 content-center">
2383
2384                <form action="https://sajam.net/sr/kalendar"
2385                      method="get"
2386                      class="gap-3 flex flex-col min-h-0">
2387                    <input type="hidden"
2388                           name="category"
2389                           :value="category">
2390                    <input type="hidden"
2391                           name="season"
2392                           :value="season">
2393                    <input type="hidden"
2394                           name="status"
2395                           :value="status">
2396
2397                    <div class="grid gap-3">
2398                        
2399                        <div class="relative"
2400     x-data="{ open: false }">
2401            
2402                <button type="button"
2403                @click="open = !open"
2404                class="flex min-h-11 w-full items-center justify-between rounded-none border border-neutral-300 bg-white px-3 py-2 text-sm transition hover:border-brand-400 hover:bg-brand-50/30 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
2405                :aria-expanded="open">
2406            <span class="flex items-center gap-2 min-w-0">
2407                                    <span class="shrink-0 text-[11px] uppercase tracking-wide text-gray-500">Kategorija</span>
2408                                <template x-if="selectedOption('category')?.icon">
2409                    <i :class="selectedOption('category').icon"
2410                       class="shrink-0 text-[13px] text-gray-500"></i>
2411                </template>
2412                <span class="truncate text-baseline font-semibold text-gray-900"
2413                      x-text="label('category')"></span>
2414            </span>
2415            <i class="fa-solid fa-chevron-down text-[11px] text-gray-400 transition-transform duration-200"
2416               :class="open ? 'rotate-180' : ''"></i>
2417        </button>
2418
2419        <div x-show="open"
2420             x-transition.origin.top.left
2421             @click.outside="open = false"
2422             class="absolute z-20 mt-2 w-full overflow-hidden rounded-none border border-neutral-200 bg-white shadow-[0_12px_30px_rgba(23,23,23,0.10)]">
2423            <div class="flex flex-col divide-y divide-gray-100">
2424                <template x-for="opt in opts['category']"
2425                          :key="opt.value">
2426                    <button type="button"
2427                            @click="category = opt.value; open = false"
2428                            class="w-full text-left px-3 py-2 text-sm transition font-medium focus:outline-none focus:ring-2 focus:ring-brand-500/30"
2429                            :class="category === opt.value ?
2430                                'bg-brand-500 text-white' :
2431                                'hover:bg-gray-50 text-gray-900'">
2432                        <span class="flex items-center gap-2">
2433                            <template x-if="opt.icon">
2434                                <i :class="opt.icon"
2435                                   class="shrink-0 text-[13px]"></i>
2436                            </template>
2437                            <span x-text="opt.label"></span>
2438                        </span>
2439                    </button>
2440                </template>
2441            </div>
2442        </div>
2443    </div>
2444
2445                        
2446                        <div class="relative"
2447     x-data="{ open: false }">
2448            
2449                <button type="button"
2450                @click="open = !open"
2451                class="flex min-h-11 w-full items-center justify-between rounded-none border border-neutral-300 bg-white px-3 py-2 text-sm transition hover:border-brand-400 hover:bg-brand-50/30 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
2452                :aria-expanded="open">
2453            <span class="flex items-center gap-2 min-w-0">
2454                                    <span class="shrink-0 text-[11px] uppercase tracking-wide text-gray-500">Sezona</span>
2455                                <template x-if="selectedOption('season')?.icon">
2456                    <i :class="selectedOption('season').icon"
2457                       class="shrink-0 text-[13px] text-gray-500"></i>
2458                </template>
2459                <span class="truncate text-baseline font-semibold text-gray-900"
2460                      x-text="label('season')"></span>
2461            </span>
2462            <i class="fa-solid fa-chevron-down text-[11px] text-gray-400 transition-transform duration-200"
2463               :class="open ? 'rotate-180' : ''"></i>
2464        </button>
2465
2466        <div x-show="open"
2467             x-transition.origin.top.left
2468             @click.outside="open = false"
2469             class="absolute z-20 mt-2 w-full overflow-hidden rounded-none border border-neutral-200 bg-white shadow-[0_12px_30px_rgba(23,23,23,0.10)]">
2470            <div class="flex flex-col divide-y divide-gray-100">
2471                <template x-for="opt in opts['season']"
2472                          :key="opt.value">
2473                    <button type="button"
2474                            @click="season = opt.value; open = false"
2475                            class="w-full text-left px-3 py-2 text-sm transition font-medium focus:outline-none focus:ring-2 focus:ring-brand-500/30"
2476                            :class="season === opt.value ?
2477                                'bg-brand-500 text-white' :
2478                                'hover:bg-gray-50 text-gray-900'">
2479                        <span class="flex items-center gap-2">
2480                            <template x-if="opt.icon">
2481                                <i :class="opt.icon"
2482                                   class="shrink-0 text-[13px]"></i>
2483                            </template>
2484                            <span x-text="opt.label"></span>
2485                        </span>
2486                    </button>
2487                </template>
2488            </div>
2489        </div>
2490    </div>
2491
2492                        
2493                        <div class="relative"
2494     x-data="{ open: false }">
2495            
2496        <div class="w-full">
2497                            <div class="mb-1 text-[11px] uppercase tracking-wide text-gray-500">Status</div>
2498                        <div class="flex flex-wrap gap-2">
2499                <template x-for="opt in opts['status']"
2500                          :key="opt.value">
2501                    <button type="button"
2502                            @click="status = opt.value"
2503                            class="flex-1 rounded-full px-3 py-1.5 text-xs uppercase font-medium border transition focus:outline-none focus:ring-2 focus:ring-brand-500/30"
2504                            :class="status === opt.value ?
2505                                'bg-brand-500 text-white border-brand-500 font-semibold' :
2506                                'bg-white text-gray-800 border-gray-200 hover:bg-gray-50'">
2507                        <span x-text="opt.label"></span>
2508                    </button>
2509                </template>
2510            </div>
2511        </div>
2512    </div>
2513                    </div>
2514
2515                    <div class="mt-3">
2516                        <button type="submit"
2517            class="ui-btn relative inline-flex items-center justify-center select-none
2518             transition will-change-transform duration-150
2519             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2520             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 w-full  u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
2521                        data-variant="primary"
2522            data-scheme="light">
2523                                    <i class="fa-solid fa-magnifying-glass"></i>
2524                            <span class="ui-btn__label">Pretraži događaje</span>
2525            </button>
2526                    </div>
2527                </form>
2528            </div>
2529
2530        </div>
2531    </div>
2532    <!--<div class="mt-4 flex flex-wrap justify-between gap-2">
2533        <a href="https://sajam.net/sr/kalendar"
2534       class="ui-btn relative inline-flex items-center justify-center select-none
2535             transition will-change-transform duration-150
2536             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2537             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
2538       data-variant="primary"
2539       data-scheme="light">
2540                                    <i class="fa-solid fa-folder-tree"></i>
2541                            <span class="ui-btn__label">btn.cta.archive</span>
2542            </a>
2543        <a href="https://sajam.net/sr/kalendar"
2544       class="ui-btn relative inline-flex items-center justify-center select-none
2545             transition will-change-transform duration-150
2546             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2547             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
2548       data-variant="primary"
2549       data-scheme="light">
2550                <span class="ui-btn__label">btn.cta.calendar</span>
2551                                    <i class="fa-solid fa-arrow-right"></i>
2552                        </a>
2553    </div>-->
2554</div>
2555</div>
2556                            <div x-show="activeMenu === 'about'"><div class="">
2557    <div class="grid grid-cols-4 gap-3 pb-8">
2558        <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl">
2559            <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
2560                <div class="relative z-[2] text-white ps-2">
2561                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
2562                        O Sajmu</h3>
2563                    <p class="text-xs sm:text-sm leading-snug font-medium">Upoznajte se sa tradicijom dugom preko jednog
2564                        veka, našom infrastrukturom, misijom i vrednostima.<
2564/p>
2565                </div>
2566                <div class="relative z-[2] ms-auto">
2567                    <img src="https://sajam.net/images/logo.svg"
2568                         alt="Novosadski Sajam Logo"
2569                         loading="lazy"
2570                         decoding="async"
2571                         fetchpriority="low"
2572                         class="relative z-10 block transition-all duration-300 h-14 pointer-events-none">
2573                </div>
2574                <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
2575                <img data-mega="about"
2576                     alt=""
2577                     width="1300"
2578                     height="170"
2579                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
2580                     loading="lazy"
2581                     decoding="async"
2582                     fetchpriority="low">
2583            </div>
2584            <div class="grid grid-cols-4 pt-6 mt-4 px-4 divide-x divide-brand-500/5">
2585                <div class="min-w-0 px-4">
2586            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2587            Sajamski kompleks</h4>
2588    
2589    <ul class="mt-3 space-y-2">
2590                    
2591                            <li class="min-w-0">
2592                    <a href="https://sajam.net/sr/posetioci/plan-sajma"
2593                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2594                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2595            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2596                        Prostor i mapa Sajma
2597                        <span
2598                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2599                            <i data-ph="caret-right-bold"
2600                               class="w-3.5 h-3.5"></i></span>
2601                    </a>
2602                </li>
2603                                
2604                            <li class="min-w-0">
2605                    <a href="https://sajam.net/sr/kongres"
2606                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2607                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2608            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2609                        Kongresni centar „Master&quot;
2610                        <span
2611                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2612                            <i data-ph="caret-right-bold"
2613                               class="w-3.5 h-3.5"></i></span>
2614                    </a>
2615                </li>
2616                                
2617                            <li class="min-w-0">
2618                    <a href="https://sajam.net/sr/kongres/sale-kapacitet"
2619                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2620                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2621            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2622                        Hale
2623                        <span
2624                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2625                            <i data-ph="caret-right-bold"
2626                               class="w-3.5 h-3.5"></i></span>
2627                    </a>
2628                </li>
2629                                
2630                            <li class="min-w-0">
2631                    <a href="https://sajam.net/sr/posetioci/parking"
2632                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2633                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
2633whitespace-normal break-words
2634            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2635                        Parking/Infrastruktura
2636                        <span
2637                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2638                            <i data-ph="caret-right-bold"
2639                               class="w-3.5 h-3.5"></i></span>
2640                    </a>
2641                </li>
2642                        </ul>
2643</div>
2644
2645                <div class="min-w-0 px-4">
2646            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2647            Istorija i misija</h4>
2648    
2649    <ul class="mt-3 space-y-2">
2650                    
2651                            <li class="min-w-0">
2652                    <a href="https://sajam.net/sr/o-nama/istorijski-pregled"
2653                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2654                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2655            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2656                        Istorijski pregled
2657                        <span
2658                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2659                            <i data-ph="caret-right-bold"
2660                               class="w-3.5 h-3.5"></i></span>
2661                    </a>
2662                </li>
2663                                
2664                            <li class="min-w-0">
2665                    <a href="https://sajam.net/sr/o-nama/misija-vizija-vrednosti"
2666                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2667                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2668            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2669                        Misija, vizija i vrednosti
2670                        <span
2671                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2672                            <i data-ph="caret-right-bold"
2673                               class="w-3.5 h-3.5"></i></span>
2674                    </a>
2675                </li>
2676                                
2677                            <li class="min-w-0">
2678                    <a href="https://sajam.net/sr/media/galerije"
2679                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2680                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2681            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2682                        Galerija
2683                        <span
2684                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2685                            <i data-ph="caret-right-bold"
2686                               class="w-3.5 h-3.5"></i></span>
2687                    </a>
2688                </li>
2689                        </ul>
2690</div>
2691
2692                <div class="min-w-0 px-4">
2693            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2694            Upravljanje &amp; transparentnost</h4>
2695    
2696    <ul class="mt-3 space-y-2">
2697                    
2698                            <li class="min-w-0">
2699                    <a href="https://sajam.net/sr/korporativno-upravljanje"
2700                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2701                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2702            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2703                        Korporativno upravljanje
2704                        <span
2705                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2706                            <i data-ph="caret-right-bold"
2707                               class="w-3.5 h-3.5"></i></span>
2708                    </a>
2709                </li>
2710                                
2711                            <li class="min-w-0">
2712                    <a href="https://sajam.net/sr/o-nama/izvestaji-finansije"
2713                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2714                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2715            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2716                        Izveštaji &amp; finansije
2717                        <span
2718                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2719                            <i data-ph="caret-right-bold"
2720                               class="w-3.5 h-3.5"></i></span>
2721                    </a>
2722                </li>
2723                                
2724                            <li class="min-w-0">
2725                    <a href="https://sajam.net/sr/o-nama/javne-nabavke"
2726                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2727                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2728            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2729                        Javne nabavke &amp; tenderi
2730                        <span
2731                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2732                            <i data-ph="caret-right-bold"
2733                               class="w-3.5 h-3.5"></i></span>
2734                    </a>
2735                </li>
2736                                
2737                            <li class="min-w-0">
2738                    <a href="https://sajam.net/sr/o-nama/trziste-kapitala"
2739                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2740                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2741            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2742                        Izveštavanje - Zakon o tržištu kapitala
2743                        <span
2744                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2745                            <i data-ph="caret-right-bold"
2746                               class="w-3.5 h-3.5"></i></span>
2747                    </a>
2748                </li>
2749                        </ul>
2750</div>
2751
2752                <div class="min-w-0 px-4">
2753            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400 break-words text-pretty min-w-0 truncate">
2754            Partneri &amp; kontakt</h4>
2755    
2756    <ul class="mt-3 space-y-2">
2757                    
2758                            <li class="min-w-0">
2759                    <a href="https://sajam.net/sr/o-nama/clanstva-partneri"
2760                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2761                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2762            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2763                        Partneri &amp; članstva
2764                        <span
2765                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2766                            <i data-ph="caret-right-bold"
2767                               class="w-3.5 h-3.5"></i></span>
2768                    </a>
2769                </li>
2770                                
2771                            <li class="min-w-0">
2772                    <a href="https://sajam.net/sr/kontakt"
2773                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2774                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 
2774whitespace-normal break-words
2775            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2776                        Kontakt &amp; dolazak
2777                        <span
2778                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2779                            <i data-ph="caret-right-bold"
2780                               class="w-3.5 h-3.5"></i></span>
2781                    </a>
2782                </li>
2783                                
2784                            <li class="min-w-0">
2785                    <a href="https://sajam.net/sr/o-nama/menadzment"
2786                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2787                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2788            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2789                        Menadžment Tim
2790                        <span
2791                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2792                            <i data-ph="caret-right-bold"
2793                               class="w-3.5 h-3.5"></i></span>
2794                    </a>
2795                </li>
2796                                
2797                            <li class="min-w-0">
2798                    <a href="https://sajam.net/sr/obavestenja"
2799                       class="group flex items-center rounded px-2 sm:px-4 py-3 hover:bg-gray-50 font-medium
2800                    text-gray-700 text-sm transition duration-150 ease-linear min-w-0 whitespace-normal break-words
2801            /*shadow-none hover:shadow-[-4px_4px_0_1px_rgba(255,0,0,0.9)]*/ group">
2802                        FAQ
2803                        <span
2804                              class="ms-auto me-4 inline-block opacity-0 translate-x-0 group-hover:opacity-100 group-hover:translate-x-1 transition">
2805                            <i data-ph="caret-right-bold"
2806                               class="w-3.5 h-3.5"></i></span>
2807                    </a>
2808                </li>
2809                        </ul>
2810</div>
2811            </div>
2812        </div>
2813
2814        
2815        <div
2816             class="flex flex-col justify-between my-auto rounded-r-xl p-5 px-6 
2817             bg-white min-w-0 break-words divide-y divide-brand-500/10">
2818            <div>
2819                <div class="flex items-center gap-3">
2820                    <a href="https://sajam.net/sr"
2821                       class="relative inline-flex items-center">
2822                        
2823                        <img src="https://sajam.net/images/logo-red.svg"
2824                             alt="Novosadski Sajam Logo"
2825                             class="relative z-10 block transition-all duration-300 h-14">
2826                    </a>
2827                    <span class="sr-only">Novosadski Sajam</span>
2828                </div>
2829                <h3 class="mt-2">Novosadski sajam</h3>
2830                <p class="mt-3 font-normal text-sm text-gray-600 text-wrap">Vodeća sajamska kuća u Srbiji - više od jednog veka povezuje industriju, inovacije i zajednicu.</p>
2831
2832                
2833                                <div class="mt-4 grid grid-cols-3 w-fit items-center gap-3">
2834                                            <a href="https://instagram.com/novosadski_sajam"
2835       class="ui-btn relative inline-flex items-center justify-center select-none
2836             transition will-change-transform duration-150
2837             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2838             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow aspect-1/1 !p-2 leading-0" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Instagram"
2839       data-variant="secondary"
2840       data-scheme="light">
2841                <span class="ui-btn__label"><i class="fa-brands fa-instagram text-lg"></i></span>
2842            </a>
2843                                                                <a href="https://facebook.com/novosadski.sajam"
2844       class="ui-btn relative inline-flex items-center justify-center select-none
2845             transition will-change-transform duration-150
2846             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2847             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow aspect-1/1 !p-2 leading-0" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Facebook"
2848       data-variant="secondary"
2849       data-scheme="light">
2850                <span class="ui-btn__label"><i class="fa-brands fa-facebook text-lg"></i></span>
2851            </a>
2852                                                                <a href="https://youtube.com/@novosadskisajam"
2853       class="ui-btn relative inline-flex items-center justify-center select-none
2854             transition will-change-transform duration-150
2855             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2856             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow aspect-1/1 !p-2 leading-0" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="YouTube"
2857       data-variant="secondary"
2858       data-scheme="light">
2859                <span class="ui-btn__label"><i class="fa-brands fa-youtube text-lg"></i></span>
2860            </a>
2861                                    </div>
2862            </div>
2863        </div>
2864    </div>
2865
2866    
2867    <style>
2868        .ql-tile {
2869            position: relative;
2870            display: flex;
2871            align-items: center;
2872            gap: .6rem;
2873            border: 1px solid #e5e7eb;
2874            border-radius: .75rem;
2875            background: #fff;
2876            padding: .6rem .75rem;
2877            transition: .2s ease
2878        }
2879
2880        .ql-tile:hover {
2881            background: #f9fafb;
2882            border-color: #e5e7eb;
2883            box-shadow: 0 1px 0 rgba(0, 0, 0, .02)
2884        }
2885
2886        .ql-chip {
2887            display: inline-flex;
2888            align-items: center;
2889            justify-content: center;
2890            width: 28px;
2891            height: 28px;
2892            border-radius: .5rem;
2893            background: #f3f4f6;
2894            color: hsl(var(--brand-500))
2895        }
2896
2897        .ql-label {
2898            font-weight: 600;
2899            color: #111827
2900        }
2901
2902        .ql-arrow {
2903            margin-left: auto;
2904            color: #9ca3af;
2905            transition: transform .2s ease
2906        }
2907
2908        .ql-tile:hover .ql-arrow {
2909            transform: translateX(2px)
2910        }
2911    </style>
2912</div>
2913</div>
2914                            <div x-show="activeMenu === 'contact'"><div class="">
2915    <div class="grid grid-cols-4 gap-3 pb-8">
2916        <div class="col-span-3 items-stretch min-w-0 bg-white p-4 pb-8 rounded-b-xl">
2917            <div class="relative flex bg-brand-400 aspect-[16/2] items-end p-4 overflow-hidden">
2918                <div class="relative z-[2] text-white ps-2">
2919                    <h3 class="text-lg sm:text-3xl uppercase font-heading tracking-wider font-semibold">
2920                        Kontakt</h3>
2921                    <p class="text-xs sm:text-sm leading-snug font-medium">
2921Tu smo za sva vaša pitanja - pronađite
2922                        direktne kontakte naših sektora ili nam jednostavno pošaljite poruku.</p>
2923                </div>
2924                <div class="relative z-[2] ms-auto">
2925                    <a href="https://sajam.net/sr/kontakt"
2926       class="ui-btn relative inline-flex items-center justify-center select-none
2927             transition will-change-transform duration-150
2928             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
2929             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-black bg-white min-h-12 text-base px-5 py-3 gap-3   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
2930       data-variant="primary"
2931       data-scheme="dark">
2932                                    <i class="fa-solid fa-up-right-from-square"></i>
2933                            <span class="ui-btn__label">Pogledaj sve kontakte</span>
2934            </a>
2935                </div>
2936                <div class="inset-0 z-[1] absolute bg-gradient-to-r from-black/80  to-black/30"></div>
2937                <img data-mega="contact"
2938                     alt=""
2939                     width="1300"
2940                     height="170"
2941                     class="absolute inset-0 w-full h-full object-cover object-center z-0"
2942                     loading="lazy"
2943                     decoding="async"
2944                     fetchpriority="low">
2945            </div>
2946            <div class="grid grid-cols-3 gap-3 pt-6 mt-4 px-4">
2947                <div class="flex flex-col rounded-xl border border-gray-200 bg-brand-50 hover:bg-white p-5 text-wrap">
2948                    <h3 class="font-heading font-bold text-gray-900">Novosadski Sajam</h3>
2949
2950                    <div class="text-sm text-gray-600 mt-0.5">
2951                        <span>Centrala</span>
2952                        <div class="flex text-xs text-gray-400 items-center gap-2 mt-1">
2953                            <i data-ph="clock-bold"
2954                               class="w-4 h-4"></i>
2955                            <span class="">10:00 - 18:00</span>
2956                        </div>
2957                        <p class="text-xs font-normal inline-block text-gray-500 mb-4"><strong>Hajduk Veljkova
2958                                11</strong>,
2959                            21137 Novi Sad
2960                        </p>
2961                    </div>
2962
2963                    <div class="mt-auto grid grid-rows-3 gap-3 justify-baseline">
2964                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214830000"
2965              >
2966        
2967        <span class="relative shrink-0">
2968            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
2969                <i class="fa-solid fa-phone text-sm"></i>
2970            </span>
2971        </span>
2972
2973                    <span class="h-6 w-px bg-gray-200"></span>
2974        
2975        
2976        <span class="min-w-0 flex flex-col">
2977            <span class="text-xs font-semibold text-neutral-900 truncate">
2978                +381 (0)21/483-00-00
2979            </span>
2980                    </span>
2981
2982        
2983                    <span
2984                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
2985                <i class="fa-solid fa-arrow-right-long"></i>
2986            </span>
2987            </a>
2988                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="mailto:[email protected]"
2989              >
2990        
2991        <span class="relative shrink-0">
2992            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
2993                <i class="fa-solid fa-envelope text-sm"></i>
2994            </span>
2995        </span>
2996
2997                    <span class="h-6 w-px bg-gray-200"></span>
2998        
2999        
3000        <span class="min-w-0 flex flex-col">
3001            <span class="text-xs font-semibold text-neutral-900 truncate">
3002                [email protected]
3003            </span>
3004                    </span>
3005
3006        
3007                    <span
3008                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3009                <i class="fa-solid fa-arrow-right-long"></i>
3010            </span>
3011            </a>
3012
3013                        <a href="https://maps.google.com/?q=Hajduk+Veljkova+11,Novi+Sad"
3014       class="ui-btn relative inline-flex items-center justify-center select-none
3015             transition will-change-transform duration-150
3016             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
3017             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2   u-shadow place-self-end" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
3018       data-variant="secondary"
3019       data-scheme="light">
3020                <span class="ui-btn__label">Otvori mapu</span>
3021                                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
3022                        </a>
3023                    </div>
3024                </div>
3025                <div class="flex flex-col rounded-xl border border-gray-200 bg-blue-50 hover:bg-white p-5 text-wrap">
3026                    <h3 class="font-heading font-bold text-gray-900">Kongresni Centar</h3>
3027
3028                    <div class="text-sm text-gray-600 mt-0.5">
3029                        <span>Odeljenje Kongresnog Centra</span>
3030                        <div class="flex text-xs text-gray-400 items-center gap-2 mt-1">
3031                            <i data-ph="clock-bold"
3032                               class="w-4 h-4"></i>
3033                            <span class="">10:00 - 18:00</span>
3034                        </div>
3035                        <p class="text-xs font-normal inline-block text-gray-500 mb-4"><strong>Hajduk Veljkova
3036                                11</strong>,
3037                            21137 Novi Sad
3038                        </p>
3039                    </div>
3040
3041                    <div class="mt-auto grid grid-rows-3 gap-3 justify-baseline">
3042                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214830777"
3043              >
3044        
3045        <span class="relative shrink-0">
3046            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
3047                <i class="fa-solid fa-phone text-sm"></i>
3048            </span>
3049        </span>
3050
3051                    <span class="h-6 w-px bg-gray-200"></span>
3052        
3053        
3054        <span class="min-w-0 flex flex-col">
3055            <span class="text-xs font-semibold text-neutral-900 truncate">
3056                +381 (0)21/483-07-77
3057            </span>
3058                    </span>
3059
3060        
3061                    <span
3062                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3063                <i class="fa-solid fa-arrow-right-long"></i>
3064            </span>
3065            </a>
3066                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214830778"
3067              >
3068        
3069        <span class="relative shrink-0">
3070            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
3071                <i class="fa-solid fa-phone text-sm"></i>
3072            </span>
3073        </span>
3074
3075                    <span class="h-6 w-px bg-gray-200"></span>
3076        
3077        
3078        <span class="min-w-0 flex flex-col">
3079            <span class="text-xs font-semibold text-neutral-900 truncate">
3080                +381 (0)21/483-07-78
3081            </span>
3082                    </span>
3083
3084        
3085                    <span
3086                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3087                <i class="fa-solid fa-arrow-right-long"></i>
3088            </span>
3089            </a>
3090                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="mailto:[email protected]"
3091              >
3092        
3093        <span class="relative shrink-0">
3094            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
3095                <i class="fa-solid fa-envelope text-sm"></i>
3096            </span>
3097        </span>
3098
3099                    <span class="h-6 w-px bg-gray-200"></span>
3100        
3101        
3102        <span class="min-w-0 flex flex-col">
3103            <span class="text-xs font-semibold text-neutral-900 truncate">
3104                [email protected]
3105            </span>
3106                    </span>
3107
3108        
3109                    <span
3110                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3111                <i class="fa-solid fa-arrow-right-long"></i>
3112            </span>
3113            </a>
3114
3115                    </div>
3116                </div>
3117
3118                <div class="flex flex-col rounded-xl border border-gray-200 bg-gray-50 hover:bg-white p-5 text-wrap">
3119                    <h3 class="font-heading font-bold text-gray-900">Press i akreditacije</h3>
3120                    
3121
3122                    <div class="block text-sm text-gray-600 mt-0.5">
3123                        <span>Sektor za integrisane marketing komunikacije</span>
3124                        <p class="text-xs font-normal inline-block text-gray-500 mb-4"><strong>Hajduk Veljkova
3125                                11</strong>,
3126                            21137 Novi Sad
3127                        </p>
3128                    </div>
3129
3130                    <div class="mt-auto grid grid-rows-3 gap-3 justify-baseline">
3131                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214831136"
3132              >
3133        
3134        <span class="relative shrink-0">
3135            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
3136                <i class="fa-solid fa-phone text-sm"></i>
3137            </span>
3138        </span>
3139
3140                    <span class="h-6 w-px bg-gray-200"></span>
3141        
3142        
3143        <span class="min-w-0 flex flex-col">
3144            <span class="text-xs font-semibold text-neutral-900 truncate">
3145                +381 (0)21/483-11-36
3146            </span>
3147                    </span>
3148
3149        
3150                    <span
3151                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3152                <i class="fa-solid fa-arrow-right-long"></i>
3153            </span>
3154            </a>
3155                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="tel:+3810214831118"
3156              >
3157        
3158        <span class="relative shrink-0">
3159            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
3160                <i class="fa-solid fa-phone text-sm"></i>
3161            </span>
3162        </span>
3163
3164                    <span class="h-6 w-px bg-gray-200"></span>
3165        
3166        
3167        <span class="min-w-0 flex flex-col">
3168            <span class="text-xs font-semibold text-neutral-900 truncate">
3169                +381 (0)21/483-11-18
3170            </span>
3171                    </span>
3172
3173        
3174                    <span
3175                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3176                <i class="fa-solid fa-arrow-right-long"></i>
3177            </span>
3178            </a>
3179                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50" href="mailto:[email protected]"
3180              >
3181        
3182        <span class="relative shrink-0">
3183            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
3184                <i class="fa-solid fa-envelope text-sm"></i>
3185            </span>
3186        </span>
3187
3188                    <span class="h-6 w-px bg-gray-200"></span>
3189        
3190        
3191        <span class="min-w-0 flex flex-col">
3192            <span class="text-xs font-semibold text-neutral-900 truncate">
3193                [email protected]
3194            </span>
3195                    </span>
3196
3197        
3198                    <span
3199                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
3200                <i class="fa-solid fa-arrow-right-long"></i>
3201            </span>
3202            </a>
3203                    </div>
3204                </div>
3205            </div>
3206        </div>
3207        <div class="flex flex-col justify-between my-auto rounded-r-xl p-5 
3208             bg-white min-w-0 break-words">
3209            <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
3210                Pišite nam</h4>
3211            <p class="mb-1 mt-3 ps-2 text-xs text-wrap text-gray-600">
3212                Imate pitanje za nas ili samo želite da nam pošaljete poruku?
3213            </p>
3214
3215            
3216            <div x-data="contactForm()"
3217                 class="pb-5">
3218
3219                <template x-if="!sent">
3220                    <div>
3221                        <p x-show="error"
3222                           x-text="error"
3223                           class="mt-2 rounded bg-red-50 border border-red-200 text-red-800 p-2 text-sm"></p>
3224
3225                        <form class="mt-4 grid gap-3"
3226                              @submit.prevent="submit">
3227                            <input type="text"
3228                                   x-model="form.name"
3229                                   required
3230                                   class="w-full flex items-center justify-between rounded-lg 
3231                                   border border-gray-200 bg-white px-3 py-2 text-sm 
3232                                   hover:bg-gray-50 hover:border-gray-300 focus:outline-none 
3233                                   focus:ring-2 focus:ring-brand-500/30 focus:bg-white transition placeholder:font-normal placeholder:text-sm"
3234                                   placeholder="Vaše ime">
3235
3236                            <input type="email"
3237                                   x-model="form.email"
3238                                   required
3239                                   class="w-full flex items-center justify-between rounded-lg 
3240                                   border border-gray-200 bg-white px-3 py-2 text-sm 
3241                                   hover:bg-gray-50 hover:border-gray-300 focus:outline-none 
3242                                   focus:ring-2 focus:ring-brand-500/30 focus:bg-white transition placeholder:font-normal placeholder:text-sm"
3243                                   placeholder="Email adresa">
3244
3245                            <textarea x-model="form.message"
3246                                      rows="3"
3247                                      required
3248                                      class="w-full flex items-center justify-between rounded-lg 
3249                                   border border-gray-200 bg-white px-3 py-2 text-sm 
3250                                   hover:bg-gray-50 hover:border-gray-300 focus:outline-none 
3251                                   focus:ring-2 focus:ring-brand-500/30 focus:bg-white transition placeholder:font-normal placeholder:text-sm"
3252                                      placeholder="Vaša poruka..."></textarea>
3253
3254                            <button type="submit"
3255            class="ui-btn relative inline-flex items-center justify-center select-none
3256             transition will-change-transform duration-150
3257             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
3258             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-11 text-sm px-4 py-2 gap-2.5 w-full  u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
3259                        data-variant="primary"
3260            data-scheme="light">
3261                <span class="ui-btn__label"><template x-if="!loading">
3262                                    <span>Pošaljite poruku</span>
3263                                </template>
3264                                <template x-if="loading">
3265                                    <span class="inline-flex items-center gap-2">
3266                                        <svg class="animate-spin h-4 w-4"
3267                                             viewBox="0 0 24 24"
3268                                             fill="none">
3269                                            <circle class="opacity-25"
3270                                                    cx="12"
3271                                                    cy="12"
3272                                                    r="10"
3273                                                    stroke="currentColor"
3274                                                    stroke-width="4" />
3275                                            <path class="opacity-75"
3276                                                  fill="currentColor"
3277                                                  d="M4 12a8 8 0 018-8v4A4 4 0 008 12H4z" />
3278                                        </svg> Poruka se šalje...
3279                                    </span>
3280                                </template></span>
3281                                    <i class="fa-solid fa-paper-plane"></i>
3282                        </button>
3283                        </form>
3284                    </div>
3285                </template>
3286
3287                
3288                <template x-if="sent">
3289                    <div x-transition
3290                         class="text-center py-6">
3291                        <div
3292                             class="mx-auto mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50">
3293                            <i class="fa-solid fa-check text-emerald-600 text-xl"></i>
3294                        </div>
3295                        <h4 class="text-lg font-extrabold text-gray-900">Vaša poruka je uspešno poslata!
3296                        </h4>
3297                        <p class="text-sm text-gray-600 mt-1">Hvala vam, ubrzo ćemo vam odgovoriti!</p>
3298                        <button @click="reset()"
3299                                class="mt-4 inline-flex items-center gap-2 rounded border border-gray-200 px-3 py-1.5 text-sm font-semibold hover:bg-gray-50">
3300                            Pošalji ponovo <i class="fa-solid fa-rotate"></i>
3301                        </button>
3302                    </div>
3303                </template>
3304            </div>
3305        </div>
3306    </div>
3307</div>
3308</div>
3309                        </div>
3310
3311                        <template x-teleport="body">
3312                            <div x-show="open"
3313                                 x-transition.opacity
3314                                 class="fixed inset-0 z-40 bg-black/25 backdrop-blur-sm [content-visibility:auto] [contain-intrinsic-size:1000px]"
3315                                 @click="open = false"
3316                                 aria-hidden="true">
3317                                <div aria-hidden="true"
3318                                     class="absolute inset-0 z-0 pointer-events-none overflow-hidden">
3319                                    <svg class="hidden logomask md:block absolute right-[2%] bottom-[2%] w-[400px] max-w-none opacity-10 select-none text-white"
3320     
3321     role="img"
3322     aria-label="Novosadski Sajam"
3323     viewBox="0 0 126.41 126.45"
3324     xmlns="http://www.w3.org/2000/svg"
3325     preserveAspectRatio="xMidYMid meet"
3326     fill="currentColor">
3327    <g fill="#fff"
3328       fill-rule="evenodd">
3329        <path d="m0 0-.06.03-.79.48-.8.54-.48.37C-1.43-.37-.76-1.85.09-3.52l.1-.23.17-.11 1.49-.66.3-.14.15-.06A59 59 0 0 0 .09-.22zm11.64 60.8-.14-.03-.17-.06-.3-.08-.24-.06V47.64l.26-.05.31-.09.14-.05.18-.03.34-.07.2-.02v13.55l-.24-.03ZM11.5-3.55l-.5.03-.2.03v-1.9l.28.05.34.09.08.02.26.06.29.09.17.02v1.45l-.2.03zm11.37 1.93-.51-.2-.26-.09q-.69-1.39-1.42-2.75l.31-.08.4-.14.4-.12.25-.11c.12.2.2.4.32.6q.9 1.7 1.68 3.43L24-1.11zm28.5 9.1q-3.94 1.2-7.99 2.1l-.99.23q.54 1.34 1 2.72a51 51 0 0 1 2.37 14.55h10.46a45 45 0 0 0-4.85-19.6m-7.99-11.1a45 45 0 0 0-10.99-8.2 94 94 0 0 1-3.1 1.36q-.72.3-1.48.6.77.6 1.47 1.2A47 47 0 0 1 41.85 8.48q.76-.15 1.53-.36c2.48-.57 4.92-1.23 7.3-1.9a46 46 0 0 0-7.3-9.84m-14.1-9.71a44 44 0 0 0-13.34-3.47q3.4 1.4 6.42 3.18l.79.49-.43.2-.36.17-.34.16-.32.12-.11.06a51 51 0 0 0-7.27-3.5 52 52 0 0 1 3.64 4.37h-.3l-.3.03h-.66l-.3-.03h-.24q-1.36-1.78-2.89-3.4a5 5 0 0 1-1.05.37v2.1l-.03-.03-.37-.09-.32-.08h-.05l-.37-.12-.29-.05v-1.73c-.36-.1-.73-.2-1.05-.38q-.81.84-1.59 1.76l-.34-.02h-.74l-.36.02-.38.04h-.05a36 36 0 0 1 2.44-2.79 49 49 0 0 0-10.6 5.63c.66.23 1.32.4 1.97.6l.27.08v1.45L.1-8.23A53 53 0 0 1-3.27-9.3q-1.61 1.21-3.06 2.56A46 46 0 0 0-17.46 8.78c2.57.54 5.22 1.03 7.85 1.42l-.07.14-.4.85-.18.34q-3.9-.6-7.78-1.41a48 48 0 0 0-3.35 16.96h1.64l-.02.14-.1.22-.04.23-.07.23-.05.17-.03.2-.05.17v.03h-1.28q0 2.04.23 4.03l-.03.03-.14.26-.15.25-.13.26-.12.25-.12.29-.11.25-.1.28-.13.3-.08.28-.03.03q-.47-3.25-.51-6.51h-10.43A44 44 0 0 0-28.38 48c.68-.22 1.36-.39 2.05-.6q3.4-.92 6.86-1.72a50 50 0 0 1-2.12-6.97h1.45a47 47 0 0 0 2.1 6.68c3.83-.8 7.76-1.45 11.7-1.93.31-.03.66-.09.97-.11a60 60 0 0 1-.85-4.64h1.45q.33 2.26.79 4.5c1.37-.15 2.7-.3 4.07-.4q1.88-.15 3.8-.23l-.26.2-.53.45-.51.48-.34.37q-1.1.08-2.16.14-1.88.17-3.72.37a65 65 0 0 0 2.1 7.08l-.06.2-.1.74-.04.76-.03.74.03.77.04.28a65 65 0 0 1-3.37-10.43q-.63.08-1.27.15-5.65.7-11.17 1.85A45.4 45.4 0 0 0-3.3 64.8c1.14-.36 2.25-.73 3.39-1.02q.71-.21 1.47-.36l.08.1.47.52.48.5.05.06q-1.27.28-2.55.66-1 .25-2 .6.99.67 2 1.3 3.91 2.49 8.6 4.3a51 51 0 0 1-4.48-5.5l.56.4.6.4.62.35.63.3.65.32.09.03q1.12 1.4 2.35 2.7c.31-.18.72-.31 1.08-.37v-1.37l.71.09.72.06v1.19q.6.1 1.07.4.8-.82 1.51-1.68l.23-.03.65-.1.65-.15.63-.17h.06a80 80 0 0 1-2.7 3.15 53 53 0 0 0 8.04-3.98q1.28-.8 2.53-1.65c-.8-.25-1.54-.48-2.3-.68l.4-.4.44-.45.3-.31q1.27.38 2.55.8a45.6 45.6 0 0 0 14.17-18.06c-3.68-.79-7.4-1.38-11.17-1.86q-.63-.08-1.27-.15a68 68 0 0 1-2.07 7.11l-.09-.09-.28-.17-.31-.14-.28-.11-.32-.12a57 57 0 0 0 1.93-6.62q-.94-.11-1.87-.2l.39-.2 1.05-.62.63-.4q.07.02.12.03.03-.07.02-.11l.29-.17.99-.71.43-.34-.31 1.48q.5.05.95.1Q35.2 44.2 41 45.4a49 49 0 0 0 2.4-7.98q.88-4.42.95-8.95h-6.76l.06-.26.29-1.13h6.42a48 48 0 0 0-.97-9.01A49 49 0 0 0 41 10.12q-2.48.5-4.94.93l-.1-.23-.59-1.08q2.56-.42 5.06-.96A45 45 0 0 0 26.25-9.29q-1.02.35-2.05.65v-1.47c.24-.06.43-.12.66-.2l-.62-.43.02-1.7q1.15.75 2.22 1.56a51 51 0 0 0 4.28-1.76q-.7-.35-1.48-.68M.08-15.54a44 44 0 0 0-7.9 2.92q.75.33 1.49.66 1.4.59 2.8 1.08a49.85 49.85 0 0 1 10.59-5.91Q3.5-16.45.1-15.54M-26.33 3.9q-.74 1.14-1.37 2.33l1.36.4q3.69 1.02 7.45 1.87A47 47 0 0 1-6.33-8.64q.74-.63 1.47-1.22c-.48-.2-.96-.37-1.47-.6q-1.53-.6-3.07-1.36A45.4 45.4 0 0 0-26.34 3.9m-6.9 23.19h10.43a49 49 0 0 1 3.38-17.25 169 169 0 0 1-6.9-1.73l-2.05-.6a44 44 0 0 0-4.86 19.58m6.9 24.48a45 45 0 0 0 17 15.72c.98-.49 2.01-.92 3-1.34q.73-.3 1.45-.54l-1.44-1.2a47 47 0 0 1-12.6-17.15q-3.74.79-7.4 1.85-.7.16-1.37.4.64 1.15 1.36 2.26m20 17.2a45 45 0 0 0 13.07 3.46A51 51 0 0 1-3.58 66.4q-1.36.5-2.75 1.08-.7.31-1.43.62.72.35 1.43.66m28.69 2.38q3.59-.91 6.92-2.36c.5-.23.98-.42 1.43-.65a19 19 0 0 0-1.43-.65q-1.38-.56-2.77-1.08-1.96 1.48-4.15 2.75a52 52 0 0 1-6.1 3.07q3.1-.35 6.1-1.08m21.02-12.08a46 46 0 0 0 7.3-9.77 125 125 0 0 0-8.83-2.24A47 47 0 0 1 29.28 64.2c-.48.4-.92.8-1.44 1.2q.73.25 1.44.56 1.51.61 3.05 1.33a46 46 0 0 0 11.05-8.24m12.84-30.6H45.77a50 50 0 0 1-2.39 14.52q-.45 1.38-.99 2.7.5.15 1 .23 4.05.94 7.98 2.1a44.4 44.4 0 0 0 4.85-19.54M43.38 62.76a47.3 47.3 0 0 1-31.64 12.39h-.52A48 48 0 0 1 .1 73.75a47.83 47.83 0 0 1-26.42-17.5 47.2 47.2 
33290 0 1 0-57.02A47.7 47.7 0 0 1 .09-18.3a47.3 47.3 0 0 1 43.3 11 47.4 47.4 0 0 1 15.5 35.08c0 13.81-6 26.31-15.5 34.98"
3330              transform="matrix(1.33 0 0 -1.33 47.88 100.2)" />
3331        <path d="M0 0a13 13 0 0 1-10.37.97l-.72-.26c-3.71-.97-7.43-.9-11.13.77v-5.71c3.75-1.9 7.42-1.93 11.13-.77q.37.16.72.29C-7.05-3.63-3.55-3.9.06-5.77L0-2.78Zm4.03 17.16a19 19 0 0 0-3.86-3.72v30.03a19 19 0 0 0 3.86-3.72 18.3 18.3 0 0 0 3.9-11.28c0-4.27-1.45-8.18-3.9-11.3m-14.4-7.09a18.4 18.4 0 0 0-10 3h5.71v18.06l4.3-9.06 4.22-9H-.4a18 18 0 0 0-9.97-3m-10.6 3.42a18.5 18.5 0 0 0-7.72 14.97c0 4.15 1.39 8.32 3.86 11.53a15 15 0 0 0 3.86 3.61zm25 34.88a24.3 24.3 0 0 1-14.35 4.7h-.05a7.64 7.64 0 0 0 0 15.28c3.95 0 7.25-3.1 7.6-6.94.25-3.35 4.67-4.03 6-.8.2.52.27 1.32.12 2.14C2.02 69.38-3.38 74.7-10.37 74.7a14 14 0 0 1-13.95-13.95c0-7.67 6.28-13.89 13.95-13.89 3.24-.03 6.3-.88 8.95-2.38h-4.66V26.25l-4.29 9.15-4.29 9.12H-45.8c.74-2.16 1.74-6.45 3.87-6.4 3.58.07 5.37 0 8.91.07-.42-.94-.7-1.9-1.01-2.85h-8.7c.28-1.39 1.73-6.27 3.02-6.3h4.68v-.57c0-.8 0-1.5.11-2.22h-4.94c.71-2.13 1.77-6.34 3.4-6.39h3a24.6 24.6 0 0 1 8.63-11.34 24.3 24.3 0 0 1 14.46-4.71c5.34 0 10.34 1.73 14.4 4.68a24.6 24.6 0 0 1 10.23 19.98c0 8.18-4.06 15.45-10.23 19.91"
3332              transform="matrix(1.33 0 0 -1.33 79.1 109.06)" />
3333    </g>
3334</svg>
3335                                    <style>
3336                                        .logomask {
3337                                            filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .45));
3338                                            -webkit-mask-image: linear-gradient(140deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 48%, rgba(0, 0, 0, 1) 60%);
3339                                            mask-image: linear-gradient(140deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 48%, rgba(0, 0, 0, 1) 60%);
3340                                        }
3341                                    </style>
3342                                </div>
3343                                <div
3344                                     class="absolute bottom-6 left-1/2 -translate-x-1/2 z-50 w-full max-w-[90vw] sm:max-w-none text-end pointer-events-none px-6">
3345                                    <div class="inline-block pointer-events-auto">
3346                                        <section class="mt-4 sm:mt-6">
3347        <div class="grid grid-cols-3 gap-3 sm:gap-4 w-fit mx-auto items-center">
3348                            <a href="https://atis.rs"
3349                   target="_blank"
3350                   rel="noopener nofollow sponsored"
3351                   class="group block opacity-90 hover:opacity-100 bg-white rounded-md text-center ring-1 ring-black/5">
3352                    <img src="https://sajam.net/images/ads/atis-sr-180x150.webp"
3353                         alt="ATIS baner"
3354                         width="180"
3355                         height="150"
3356                         loading="lazy"
3357                         decoding="async"
3358                         class="mx-auto h-auto w-full max-w-[180px] object-contain rounded-md p-2" />
3359                    <span class="sr-only">ATIS baner</span>
3360                </a>
3361                        <a href="https://www.ekologija.gov.rs/"
3362               target="_blank"
3363               rel="noopener nofollow sponsored"
3364               class="group block opacity-90 hover:opacity-100 bg-white rounded-md text-center ring-1 ring-black/5">
3365                <img src="https://sajam.net/images/partners/ministarstvo-zastite-zivotne-sredine.svg"
3366                     alt="Министарство заштите животне средине Републике Србије"
3367                     width="180"
3368                     height="150"
3369                     loading="lazy"
3370                     decoding="async"
3371                     class="mx-auto h-auto w-full object-cover rounded-md" />
3372                <span class="sr-only">Министарство заштите животне средине Републике Србије logo</span>
3373            </a>
3374        </div>
3375    </section>
3376                                    </div>
3377                                </div>
3378                            </div>
3379                        </template>
3380                    </div>
3381                </div>
3382                
3383                <div class="hidden md:block relative"
3384                     x-data="annBell('sr', 'https://sajam.net/sr/announcements-feed.json')"
3385                     x-init="init()"
3386                     @click.outside="open = false">
3387
3388                    <button type="button"
3389                            @click="toggle()"
3390                            :class="open ? 'bg-white/10' : 'bg-transparent'"
3391                            class="relative inline-flex items-center justify-center rounded-lg p-2 transition hover:bg-white/10"
3392                            aria-label="Notifications">
3393                        <i :class="open ? 'fa-solid fa-bell' : 'fa-regular fa-bell'"></i>
3394
3395                        
3396                        <template x-if="showBadge">
3397                            <span class="absolute -top-1 -right-1 inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full text-[10px] font-extrabold px-1 leading-none ring-2"
3398                                  :class="specialBadge ? 'bg-amber-400 text-black ring-amber-200 animate-pulse' :
3399                                      'bg-emerald-500 text-white ring-black'">
3400                                <span x-text="unseen"></span>
3401                            </span>
3402                        </template>
3403                    </button>
3404
3405                    
3406                    <div x-show="open"
3407                         x-transition.opacity
3408                         class="absolute right-0 mt-2 w-[360px] max-w-[90vw] z-50">
3409                        <div class="rounded-xl border border-gray-200 bg-white shadow-xl overflow-hidden">
3410                            <div
3411                                 class="px-4 py-2 text-xs uppercase tracking-wide text-gray-500 border-b border-gray-200">
3412                                Obaveštenja
3413                            </div>
3414
3415                            <template x-if="items.length === 0">
3416                                <div class="p-4 text-sm text-gray-500">Trenutno nema obaveštenja.
3417                                </div>
3418                            </template>
3419
3420                            <ul class="max-h-[60vh] overflow-auto divide-y divide-gray-200">
3421                                <template x-for="itm in items"
3422                                          :key="itm.id">
3423                                    <li>
3424                                        <a @click.prevent="go(itm)"
3425                                           class="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer border-l-4"
3426                                           :class="[
3427                                               itm.pinned ? 'border-amber-400' : 'border-transparent',
3428                                               isRead(itm.id) ? 'opacity-60' : ''
3429                                           ]">
3430                                            <span class="mt-0.5">
3431                                                <i class="fa-solid"
3432                                                   :class="isRead(itm.id) ?
3433                                                       'fa-envelope-open text-gray-400' :
3434                                                       (itm.pinned ? 'fa-envelope text-amber-500' :
3435                                                           'fa-envelope text-emerald-600')"></i>
3436                                            </span>
3437                                            <div class="min-w-0">
3438                                                <div class="text-sm font-semibold line-clamp-1"
3439                                                     :class="isRead(itm.id) ? 'text-gray-600' : 'text-gray-900'">
3440                                                    <!-- pin chip -->
3441                                                    <template x-if="itm.pinned">
3442                                                        <span
3443                                                              class="inline-flex items-center gap-1 rounded-full bg-amber-400 text-amber-900 text-[10px] font-bold px-2 py-0.5 mr-2">
3444                                                            <i class="fa-solid fa-thumbtack -rotate-12"></i> PIN
3445                                                        </span>
3446                                                    </template>
3447                                                    <span x-text="itm.title || '-'"></span>
3448                                                </div>
3449                                                <div class="text-xs text-gray-500 line-clamp-1"
3450                                                     x-text="itm.event || ''"></div>
3451                                            </div>
3452                                            <i class="fa-solid fa-arrow-right-long ms-auto text-gray-400"></i>
3453                                        </a>
3454                                    </li>
3455                                </template>
3456                            </ul>
3457
3458                            <div class="p-2 border-t border-gray-200 bg-white">
3459                                <a href="https://sajam.net/sr/obavestenja"
3460       class="ui-btn relative inline-flex items-center justify-center select-none
3461             transition will-change-transform duration-150
3462             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
3463             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-10 text-xs px-3 py-1.5 gap-2 w-full  u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
3464       data-variant="secondary"
3465       data-scheme="light">
3466                                    <i class="fa-regular fa-bell"></i>
3467                            <span class="ui-btn__label">Pogledaj Sve</span>
3468            </a>
3469                            </div>
3470                        </div>
3471                    </div>
3472                </div>
3473
3474                
3475                <button class="md:hidden inline-flex items-center justify-center rounded p-2 text-white/90 hover:text-white hover:bg-white/10 transition relative z-50"
3476                        @click="mobileOpen = true"
3477                        aria-label="Menu"
3478                        type="button">
3479                    <i class="fa-solid fa-bars"></i>
3480                </button>
3481            </div>
3482        </div>
3483
3484        
3485        <template x-teleport="body">
3486            
3487            <div x-show="mobileOpen"
3488                 x-transition.opacity
3489                 @keydown.escape.window="mobileOpen = false"
3490                 class="fixed inset-0 z-[10000] md:hidden text-white"
3491                 role="dialog"
3492                 aria-modal="true">
3493
3494                
3495                <div class="absolute inset-0 bg-black/25 backdrop-blur-sm"
3496                     @click="mobileOpen = false"></div>
3497
3498                
3499                <div class="absolute inset-y-0 left-0 w-full max-w-[92%] sm:max-w-[420px] bg-black/95 backdrop-blur overflow-y-auto
3500                            transition-transform duration-300"
3501                     x-transition:enter-start="-translate-x-full"
3502                     x-transition:enter-end="translate-x-0"
3503                     x-transition:leave-start="translate-x-0"
3504                     x-transition:leave-end="-translate-x-full"
3505                     style="padding-bottom: env(safe-area-inset-bottom)">
3506
3507                    
3508                    <div class="sticky top-0 z-[100] bg-black flex items-center justify-between px-4 py-3 border-b border-white/10"
3509                         style="padding-top: calc(env(safe-area-inset-top,0px) + .5rem)">
3510                        <div class="flex items-center gap-2">
3511                            <svg class="h-9"
3512     
3513     role="img"
3514     aria-label="Novosadski Sajam"
3515     viewBox="0 0 126.41 126.45"
3516     xmlns="http://www.w3.org/2000/svg"
3517     preserveAspectRatio="xMidYMid meet"
3518     fill="currentColor">
3519    <g fill="#fff"
3520       fill-rule="evenodd">
3521        <path d="m0 0-.06.03-.79.48-.8.54-.48.37C-1.43-.37-.76-1.85.09-3.52l.1-.23.17-.11 1.49-.66.3-.14.15-.06A59 59 0 0 0 .09-.22zm11.64 60.8-.14-.03-.17-.06-.3-.08-.24-.06V47.64l.26-.05.31-.09.14-.05.18-.03.34-.07.2-.02v13.55l-.24-.03ZM11.5-3.55l-.5.03-.2.03v-1.9l.28.05.34.09.08.02.26.06.29.09.17.02v1.45l-.2.03zm11.37 1.93-.51-.2-.26-.09q-.69-1.39-1.42-2.75l.31-.08.4-.14.4-.12.25-.11c.12.2.2.4.32.6q.9 1.7 1.68 3.43L24-1.11zm28.5 9.1q-3.94 1.2-7.99 2.1l-.99.23q.54 1.34 1 2.72a51 51 0 0 1 2.37 14.55h10.46a45 45 0 0 0-4.85-19.6m-7.99-11.1a45 45 0 0 0-10.99-8.2 94 94 0 0 1-3.1 1.36q-.72.3-1.48.6.77.6 1.47 1.2A47 47 0 0 1 41.85 8.48q.76-.15 1.53-.36c2.48-.57 4.92-1.23 7.3-1.9a46 46 0 0 0-7.3-9.84m-14.1-9.71a44 44 0 0 0-13.34-3.47q3.4 1.4 6.42 3.18l.79.49-.43.2-.36.17-.34.16-.32.12-.11.06a51 51 0 0 0-7.27-3.5 52 52 0 0 1 3.64 4.37h-.3l-.3.03h-.66l-.3-.03h-.24q-1.36-1.78-2.89-3.4a5 5 0 0 1-1.05.37v2.1l-.03-.03-.37-.09-.32-.08h-.05l-.37-.12-.29-.05v-1.73c-.36-.1-.73-.2-1.05-.38q-.81.84-1.59 1.76l-.34-.02h-.74l-.36.02-.38.04h-.05a36 36 0 0 1 2.44-2.79 49 49 0 0 0-10.6 5.63c.66.23 1.32.4 1.97.6l.27.08v1.45L.1-8.23A53 53 0 0 1-3.27-9.3q-1.61 1.21-3.06 2.56A46 46 0 0 0-17.46 8.78c2.57.54 5.22 1.03 7.85 1.42l-.07.14-.4.85-.18.34q-3.9-.6-7.78-1.41a48 48 0 0 0-3.35 16.96h1.64l-.02.14-.1.22-.04.23-.07.23-.05.17-.03.2-.05.17v.03h-1.28q0 2.04.23 4.03l-.03.03-.14.26-.15.25-.13.26-.12.25-.12.29-.11.25-.1.28-.13.3-.08.28-.03.03q-.47-3.25-.51-6.51h-10.43A44 44 0 0 0-28.38 48c.68-.22 1.36-.39 2.05-.6q3.4-.92 6.86-1.72a50 50 0 0 1-2.12-6.97h1.45a47 47 0 0 0 2.1 6.68c3.83-.8 7.76-1.45 11.7-1.93.31-.03.66-.09.97-.11a60 60 0 0 1-.85-4.64h1.45q.33 2.26.79 4.5c1.37-.15 2.7-.3 4.07-.4q1.88-.15 3.8-.23l-.26.2-.53.45-.51.48-.34.37q-1.1.08-2.16.14-1.88.17-3.72.37a65 65 0 0 0 2.1 7.08l-.06.2-.1.74-.04.76-.03.74.03.77.04.28a65 65 0 0 1-3.37-10.43q-.63.08-1.27.15-5.65.7-11.17 1.85A45.4 45.4 0 0 0-3.3 64.8c1.14-.36 2.25-.73 3.39-1.02q.71-.21 1.47-.36l.08.1.47.52.48.5.05.06q-1.27.28-2.55.66-1 .25-2 .6.99.67 2 1.3 3.91 2.49 8.6 4.3a51 51 0 0 1-4.48-5.5l.56.4.6.4.62.35.63.3.65.32.09.03q1.12 1.4 2.35 2.7c.31-.18.72-.31 1.08-.37v-1.37l.71.09.72.06v1.19q.6.1 1.07.4.8-.82 1.51-1.68l.23-.03.65-.1.65-.15.63-.17h.06a80 80 0 0 1-2.7 3.15 53 53 0 0 0 8.04-3.98q1.28-.8 2.53-1.65c-.8-.25-1.54-.48-2.3-.68l.4-.4.44-.45.3-.31q1.27.38 2.55.8a45.6 45.6 0 0 0 14.17-18.06c-3.68-.79-7.4-1.38-11.17-1.86q-.63-.08-1.27-.15a68 68 0 0 1-2.07 7.11l-.09-.09-.28-.17-.31-.14-.28-.11-.32-.12a57 57 0 0 0 1.93-6.62q-.94-.11-1.87-.2l.39-.2 1.05-.62.63-.4q.07.02.12.03.03-.07.02-.11l.29-.17.99-.71.43-.34-.31 1.48q.5.05.95.1Q35.2 44.2 41 45.4a49 49 0 0 0 2.4-7.98q.88-4.42.95-8.95h-6.76l.06-.26.29-1.13h6.42a48 48 0 0 0-.97-9.01A49 49 0 0 0 41 10.12q-2.48.5-4.94.93l-.1-.23-.59-1.08q2.56-.42 5.06-.96A45 45 0 0 0 26.25-9.29q-1.02.35-2.05.65v-1.47c.24-.06.43-.12.66-.2l-.62-.43.02-1.7q1.15.75 2.22 1.56a51 51 0 0 0 4.28-1.76q-.7-.35-1.48-.68M.08-15.54a44 44 0 0 0-7.9 2.92q.75.33 1.49.66 1.4.59 2.8 1.08a49.85 49.85 0 0 1 10.59-5.91Q3.5-16.45.1-15.54M-26.33 3.9q-.74 1.14-1.37 2.33l1.36.4q3.69 1.02 7.45 1.87A47 47 0 0 1-6.33-8.64q.74-.63 1.47-1.22c-.48-.2-.96-.37-1.47-.6q-1.53-.6-3.07-1.36A45.4 45.4 0 0 0-26.34 3.9m-6.9 23.19h10.43a49 49 0 0 1 3.38-17.25 169 169 0 0 1-6.9-1.73l-2.05-.6a44 44 0 0 0-4.86 19.58m6.9 24.48a45 45 0 0 0 17 15.72c.98-.49 2.01-.92 3-1.34q.73-.3 1.45-.54l-1.44-1.2a47 47 0 0 1-12.6-17.15q-3.74.79-7.4 1.85-.7.16-1.37.4.64 1.15 1.36 2.26m20 17.2a45 45 0 0 0 13.07 3.46A51 51 0 0 1-3.58 66.4q-1.36.5-2.75 1.08-.7.31-1.43.62.72.35 1.43.66m28.69 2.38q3.59-.91 6.92-2.36c.5-.23.98-.42 1.43-.65a19 19 0 0 0-1.43-.65q-1.38-.56-2.77-1.08-1.96 1.48-4.15 2.75a52 52 0 0 1-6.1 3.07q3.1-.35 6.1-1.08m21.02-12.08a46 46 0 0 0 7.3-9.77 125 125 0 0 0-8.83-2.24A47 47 0 0 1 29.28 64.2c-.48.4-.92.8-1.44 1.2q.73.25 1.44.56 1.51.61 3.05 1.33a46 46 0 0 0 11.05-8.24m12.84-30.6H45.77a50 50 0 0 1-2.39 14.52q-.45 1.38-.99 2.7.5.15 1 .23 4.05.94 7.98 2.1a44.4 44.4 0 0 0 4.85-19.54M43.38 62.76a47.3 47.3 0 0 1-31.64 12.39h-.52A48 48 0 0 1 .1 73.75a47.83 47.83 0 0 1-26.42-17.5 47.2 47.2 
35210 0 1 0-57.02A47.7 47.7 0 0 1 .09-18.3a47.3 47.3 0 0 1 43.3 11 47.4 47.4 0 0 1 15.5 35.08c0 13.81-6 26.31-15.5 34.98"
3522              transform="matrix(1.33 0 0 -1.33 47.88 100.2)" />
3523        <path d="M0 0a13 13 0 0 1-10.37.97l-.72-.26c-3.71-.97-7.43-.9-11.13.77v-5.71c3.75-1.9 7.42-1.93 11.13-.77q.37.16.72.29C-7.05-3.63-3.55-3.9.06-5.77L0-2.78Zm4.03 17.16a19 19 0 0 0-3.86-3.72v30.03a19 19 0 0 0 3.86-3.72 18.3 18.3 0 0 0 3.9-11.28c0-4.27-1.45-8.18-3.9-11.3m-14.4-7.09a18.4 18.4 0 0 0-10 3h5.71v18.06l4.3-9.06 4.22-9H-.4a18 18 0 0 0-9.97-3m-10.6 3.42a18.5 18.5 0 0 0-7.72 14.97c0 4.15 1.39 8.32 3.86 11.53a15 15 0 0 0 3.86 3.61zm25 34.88a24.3 24.3 0 0 1-14.35 4.7h-.05a7.64 7.64 0 0 0 0 15.28c3.95 0 7.25-3.1 7.6-6.94.25-3.35 4.67-4.03 6-.8.2.52.27 1.32.12 2.14C2.02 69.38-3.38 74.7-10.37 74.7a14 14 0 0 1-13.95-13.95c0-7.67 6.28-13.89 13.95-13.89 3.24-.03 6.3-.88 8.95-2.38h-4.66V26.25l-4.29 9.15-4.29 9.12H-45.8c.74-2.16 1.74-6.45 3.87-6.4 3.58.07 5.37 0 8.91.07-.42-.94-.7-1.9-1.01-2.85h-8.7c.28-1.39 1.73-6.27 3.02-6.3h4.68v-.57c0-.8 0-1.5.11-2.22h-4.94c.71-2.13 1.77-6.34 3.4-6.39h3a24.6 24.6 0 0 1 8.63-11.34 24.3 24.3 0 0 1 14.46-4.71c5.34 0 10.34 1.73 14.4 4.68a24.6 24.6 0 0 1 10.23 19.98c0 8.18-4.06 15.45-10.23 19.91"
3524              transform="matrix(1.33 0 0 -1.33 79.1 109.06)" />
3525    </g>
3526</svg>
3527                            <span class="text-base font-bold">Novosadski sajam</span>
3528                        </div>
3529                        <button @click="mobileOpen = false"
3530                                class="p-2 rounded hover:bg-white/10"
3531                                aria-label="Zatvori">
3532                            <i class="fa-solid fa-xmark text-xl"></i>
3533                        </button>
3534                    </div>
3535
3536                    
3537                    <section class="px-4 pt-4 pb-2 border-b border-white/10 space-y-3">
3538
3539                        
3540                                                <div x-data="langTabs('sr', { sr: 'https:\/\/sajam.net\/sr\/kontakt', en: 'https:\/\/sajam.net\/en\/contact' })"
3541                             class="inline-flex items-center rounded bg-white/5 px-2 py-1 shadow ring-1 ring-white/10"
3542                             role="tablist"
3543                             aria-label="Language switcher">
3544                            <i class="fa-solid fa-language text-gray-100 mr-2"></i>
3545                            <div class="relative grid grid-cols-2 gap-1">
3546                                <span class="absolute inset-y-0 left-0 w-1/2 rounded-xs bg-white shadow transition-transform duration-200"
3547                                      :style="`transform: translateX(${active === 'en' ? '100%' : '0%'})`"></span>
3548                                <button type="button"
3549                                        class="relative z-10 px-3 py-1 text-xs font-bold rounded-xl"
3550                                        :class="active === 'sr' ? 'text-gray-900' : 'text-gray-100'"
3551                                        @click="switchTo('sr')">🇷🇸 SR</button>
3552                                <button type="button"
3553                                        class="relative z-10 px-3 py-1 text-xs font-bold rounded-xl"
3554                                        :class="active === 'en' ? 'text-gray-900' : 'text-gray-100'"
3555                                        @click="switchTo('en')">🇬🇧 EN</button>
3556                            </div>
3557                        </div>
3558
3559                        
3560                        <div class="grid grid-cols-3 gap-2">
3561                            <a href="https://sajam.net/sr/posetioci/ulaznice"
3562                               class="flex flex-col items-center justify-center gap-2 rounded bg-white/10 hover:bg-white/15 p-3 text-sm font-semibold">
3563                                <i class="fa-solid fa-ticket"></i> Ulaznice
3564                            </a>
3565                            <a href="https://sajam.net/sr/posetioci/kako-doci"
3566                               class="flex flex-col items-center justify-center gap-2 rounded bg-white/10 hover:bg-white/15 p-3 text-sm font-semibold">
3567                                <i class="fa-solid fa-route"></i> Kako doći
3568                            </a>
3569                            <a href="https://sajam.net/sr/posetioci/plan-sajma"
3570                               class="flex flex-col items-center justify-center gap-2 rounded bg-white/10 hover:bg-white/15 p-3 text-sm font-semibold">
3571                                <i class="fa-solid fa-map"></i> Mapa
3572                            </a>
3573                        </div>
3574
3575                        
3576                                                    <div class="mt-2">
3577                                <h4 class="text-xs font-semibold uppercase tracking-wide text-white/70 mb-2">
3578                                    Istaknuti sajmovi</h4>
3579                                <ul class="rounded-lg border border-white/10 overflow-hidden divide-y divide-white/10">
3580                                                                            <li>
3581                                            <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026"
3582                                               class="flex items-center gap-3 px-3 py-2 hover:bg-white/5">
3583                                                <div class="w-14 text-center shrink-0">
3584                                                    <div class="text-sm font-extrabold">28.09</div>
3585                                                    <div class="text-[10px] text-white/70">- 02.10</div>
3586                                                </div>
3587                                                <span class="h-6 w-px bg-white/10"></span>
3588                                                <div class="min-w-0">
3589                                                    <div class="flex items-center mb-1">
3590                                                        <span
3591                                                              class="line-clamp-2 leading-tight text-balance font-medium">16. EWDA konferencija - EWDA 2026</span>
3592                                                    </div>
3593                                                    <div class="text-xs text-white/70">
3594                                                                                                                    <span
3595                                                                  class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
3596                                                                U toku
3597                                                            </span>
3598                                                                                                            </div>
3599                                                </div>
3600                                                <i class="fa-solid fa-arrow-right-long ms-auto text-white/50"></i>
3601                                            </a>
3602                                        </li>
3603                                                                            <li>
3604                                            <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova"
3605                                               class="flex items-center gap-3 px-3 py-2 hover:bg-white/5">
3606                                                <div class="w-14 text-center shrink-0">
3607                                                    <div class="text-sm font-extrabold">30.09</div>
3608                                                    <div class="text-[10px] text-white/70">- 04.10</div>
3609                                                </div>
3610                                                <span class="h-6 w-px bg-white/10"></span>
3611                                                <div class="min-w-0">
3612                                                    <div class="flex items-center mb-1">
3613                                                        <span
3614                                                              class="line-clamp-2 leading-tight text-balance font-medium">57. MEĐUNARODNI SAJAM LOVA I RIBOLOVA</span>
3615                                                    </div>
3616                                                    <div class="text-xs text-white/70">
3617                                                                                                                    <span
3618                                                                  class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
3619                                                                U toku
3620                                                            </span>
3621                                                                                                            </div>
3622                                                </div>
3623                                                <i class="fa-solid fa-arrow-right-long ms-auto text-white/50"></i>
3624                                            </a>
3625                                        </li>
3626                                                                            <li>
3627                                            <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026"
3628                                               class="flex items-center gap-3 px-3 py-2 hover:bg-white/5">
3629                                                <div class="w-14 text-center shrink-0">
3630                                                    <div class="text-sm font-extrabold">30.09</div>
3631                                                    <div class="text-[10px] text-white/70">- 04.10</div>
3632                                                </div>
3633                                                <span class="h-6 w-px bg-white/10"></span>
3634                                                <div class="min-w-0">
3635                                                    <div class="flex items-center mb-1">
3636                                                        <span
3637                                                              class="line-clamp-2 leading-tight text-balance font-medium">SAJAM EKOLOGIJE - 2026</span>
3638                                                    </div>
3639                                                    <div class="text-xs text-white/70">
3640                                                                                                                    <span
3641                                                                  class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-green-600 text-white">
3642                                                                U toku
3643                                                            </span>
3644                                                                                                            </div>
3645                                                </div>
3646                                                <i class="fa-solid fa-arrow-right-long ms-auto text-white/50"></i>
3647                                            </a>
3648                                        </li>
3649                                                                    </ul>
3650                            </div>
3651                                            </section>
3652
3653                    
3654                    <nav class="px-4 py-4 divide-y divide-white/10"
3655                         x-data>
3656                        <ul class="space-y-1">
3657
3658                            
3659                            <li x-data="{ open: false }">
3660                                <button @click="open = !open"
3661                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3662                                        :aria-expanded="open.toString()"
3663                                        aria-controls="m-fairs">
3664                                    Sajmovi
3665                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3666                                       :class="{ 'rotate-180': open }"></i>
3667                                </button>
3668                                <div id="m-fairs"
3669                                     x-show="open"
3670                                     x-collapse
3671                                     class="pl-4 space-y-2 text-sm text-white/80">
3672                                    <a href="https://sajam.net/sr/posetioci/ulaznice"
3673                                       class="block px-3 py-2 hover:bg-white/10">Porudžbenice, ulaznice i formulari</a>
3674                                    <a href="https://sajam.net/sr/kalendar"
3675                                       class="block px-3 py-2 hover:bg-white/10">Kalendar događaja</a>
3676                                    <a href="https://sajam.net/sr/posetioci/kako-doci"
3677                                       class="block px-3 py-2 hover:bg-white/10">Kako do Sajma?</a>
3678                                    <a href="https://sajam.net/sr/posetioci/plan-sajma"
3679                                       class="block px-3 py-2 hover:bg-white/10">Mapa Sajma</a>
3680                                </div>
3681                            </li>
3682
3683                            
3684                            <li x-data="{ open: false }">
3685                                <button @click="open = !open"
3686                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3687                                        :aria-expanded="open.toString()"
3688                                        aria-controls="m-exh">
3689                                    Izlagači
3690                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3691                                       :class="{ 'rotate-180': open }"></i>
3692                                </button>
3693                                <div id="m-exh"
3694                                     x-show="open"
3695                                     x-collapse
3696                                     class="pl-4 space-y-2 text-sm text-white/80">
3697                                    <a href="https://sajam.net/sr/izlagaci/prijave"
3698                                       class="block px-3 py-2 hover:bg-white/10">Prijava i uslovi učešća</a>
3699                                    <a href="https://sajam.net/sr/izlagaci/setup-hub"
3700                                       class="block px-3 py-2 hover:bg-white/10">Å tandovi i oprema</a>
3701                                    <a href="https://sajam.net/sr/izlagaci/reklamne-usluge"
3702                                       class="block px-3 py-2 hover:bg-white/10">Brendiranje i reklamne usluge</a>
3703                                    <a href="https://sajam.net/sr/izlagaci/ocenjivanje-kvaliteta"
3704                                       class="block px-3 py-2 hover:bg-white/10">Ocenjivanje kvaliteta</a>
3705                                    <a href="https://sajam.net/sr/kontakt"
3706                                       class="block px-3 py-2 hover:bg-white/10">Kontakt informacije</a>
3707                                </div>
3708                            </li>
3709
3710                            
3711                            <li x-data="{ open: false }">
3712                                <button @click="open = !open"
3713                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3714                                        :aria-expanded="open.toString()"
3715                                        aria-controls="m-vis">
3716                                    Posetioci
3717                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3718                                       :class="{ 'rotate-180': open }"></i>
3719                                </button>
3720                                <div id="m-vis"
3721                                     x-show="open"
3722                                     x-collapse
3723                                     class="pl-4 space-y-2 text-sm text-white/80">
3724                                    <a href="https://sajam.net/sr/posetioci/ulaznice"
3725                                       class="block px-3 py-2 hover:bg-white/10">Ulaznice</a>
3726                                    <a href="https://sajam.net/sr/posetioci/kako-doci"
3727                                       class="block px-3 py-2 hover:bg-white/10">Kako do nas (mapa)</a>
3728                                    <a href="https://sajam.net/sr/posetioci/parking"
3729                                       class="block px-3 py-2 hover:bg-white/10">Parking i kapije</a>
3730                                    <a href="https://sajam.net/sr/posetioci/plan-sajma"
3731                                       class="block px-3 py-2 hover:bg-white/10">Plan Sajma (hale)</a>
3732                                    <a href="https://sajam.net/sr/obavestenja"
3733                                       class="block px-3 py-2 hover:bg-white/10">Saopštenja i objave</a>
3734                                </div>
3735                            </li>
3736
3737                            
3738                            <li x-data="{ open: false }">
3739                                <button @click="open = !open"
3740                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3741                                        :aria-expanded="open.toString()"
3742                                        aria-controls="m-cong">
3743                                    Kongresni Centar „Master&quot;
3744                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3745                                       :class="{ 'rotate-180': open }"></i>
3746                                </button>
3747                                <div id="m-cong"
3748                                     x-show="open"
3749                                     x-collapse
3750                                     class="pl-4 space-y-2 text-sm text-white/80">
3751                                    <a href="https://sajam.net/sr/kongres/sale-kapacitet"
3752                                       class="block px-3 py-2 hover:bg-white/10">Sale i kapaciteti</a>
3753                                    <a href="https://sajam.net/sr/kongres/tehnicka-oprema"
3754                                       class="block px-3 py-2 hover:bg-white/10">Tehnička oprema</a>
3755                                    <a href="https://sajam.net/sr/kongres/cenovnik-i-prijava"
3756                                       class="block px-3 py-2 hover:bg-white/10">Cenovnik i prijava</a>
3757                                    <a href="https://sajam.net/sr/kongres/posaljite-upit"
3758                                       class="block px-3 py-2 hover:bg-white/10">Pošaljite upit</a>
3759                                </div>
3760                            </li>
3761
3762                            
3763                            <li x-data="{ open: false }">
3764                                <button @click="open = !open"
3765                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3766                                        :aria-expanded="open.toString()"
3767                                        aria-controls="m-press">
3768                                    Press
3769                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3770                                       :class="{ 'rotate-180': open }"></i>
3771                                </button>
3772                                <div id="m-press"
3773                                     x-show="open"
3774                                     x-collapse
3775                                     class="pl-4 space-y-2 text-sm text-white/80">
3776                                    <a href="https://sajam.net/sr/press/konferencije"
3777                                       class="block px-3 py-2 hover:bg-white/10">Konferencije za štampu</a>
3778                                    <a href="https://sajam.net/sr/press/medijski-paket"
3779                                       class="block px-3 py-2 hover:bg-white/10">Media kit</a>
3780                                    <a href="https://sajam.net/sr/media/galerije"
3781                                       class="block px-3 py-2 hover:bg-white/10">
3781Foto galerija</a>
3782                                    <a href="https://sajam.net/sr/vesti/press"
3783                                       class="block px-3 py-2 hover:bg-white/10">Blog / priče</a>
3784                                </div>
3785                            </li>
3786
3787                            
3788                            <li x-data="{ open: false }">
3789                                <button @click="open = !open"
3790                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3791                                        :aria-expanded="open.toString()"
3792                                        aria-controls="m-cal">
3793                                    Kalendar
3794                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3795                                       :class="{ 'rotate-180': open }"></i>
3796                                </button>
3797                                <div id="m-cal"
3798                                     x-show="open"
3799                                     x-collapse
3800                                     class="pl-4 space-y-2 text-sm text-white/80">
3801                                    <a href="https://sajam.net/sr/kalendar"
3802                                       class="block px-3 py-2 hover:bg-white/10">Pretraži događaje</a>
3803                                    <a href="https://sajam.net/sr/obavestenja"
3804                                       class="block px-3 py-2 hover:bg-white/10">Najave</a>
3805                                </div>
3806                            </li>
3807
3808                            
3809                            <li x-data="{ open: false }">
3810                                <button @click="open = !open"
3811                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3812                                        :aria-expanded="open.toString()"
3813                                        aria-controls="m-about">
3814                                    O Sajmu
3815                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3816                                       :class="{ 'rotate-180': open }"></i>
3817                                </button>
3818                                <div id="m-about"
3819                                     x-show="open"
3820                                     x-collapse
3821                                     class="pl-4 space-y-2 text-sm text-white/80">
3822                                    <a href="https://sajam.net/sr/posetioci/plan-sajma"
3823                                       class="block px-3 py-2 hover:bg-white/10">Prostor i mapa Sajma</a>
3824                                    <a href="https://sajam.net/sr/kongres"
3825                                       class="block px-3 py-2 hover:bg-white/10">Kongresni centar „Master&quot;</a>
3826                                    <a href="https://sajam.net/sr/o-nama/istorijski-pregled"
3827                                       class="block px-3 py-2 hover:bg-white/10">Istorijski pregled</a>
3828                                    <a href="https://sajam.net/sr/kontakt"
3829                                       class="block px-3 py-2 hover:bg-white/10">Kontakt &amp; dolazak</a>
3830                                </div>
3831                            </li>
3832
3833                            
3834                            <li x-data="{ open: false }">
3835                                <button @click="open = !open"
3836                                        class="w-full flex items-center justify-between px-3 py-3 font-semibold hover:bg-white/10"
3837                                        :aria-expanded="open.toString()"
3838                                        aria-controls="m-contact">
3839                                    Kontakt
3840                                    <i class="fa-solid fa-chevron-down text-xs transition-transform"
3841                                       :class="{ 'rotate-180': open }"></i>
3842                                </button>
3843                                <div id="m-contact"
3844                                     x-show="open"
3845                                     x-collapse
3846                                     class="pl-4 space-y-2 text-sm text-white/80">
3847                                    <a href="tel:+38121000000"
3848                                       class="block px-3 py-2 hover:bg-white/10"><i class="fa-solid fa-phone"></i>
3849                                        +381 21 000 000</a>
3850                                    <a href="mailto:[email protected]"
3851                                       class="block px-3 py-2 hover:bg-white/10"><i class="fa-solid fa-envelope"></i>
3852                                        [email protected]</a>
3853                                    <a href="https://sajam.net/sr/kontakt"
3854                                       class="block px-3 py-2 hover:bg-white/10"><i
3855                                           class="fa-solid fa-location-dot"></i>
3856                                        Kontakt &amp; dolazak</a>
3857                                </div>
3858                            </li>
3859
3860                        </ul>
3861                    </nav>
3862
3863                    
3864                    <div class="sticky bottom-0 bg-black/95 border-t border-white/10 p-4 grid grid-cols-2 gap-3">
3865
3866                        <a href="https://sajam.net/sr/kalendar"
3867       class="ui-btn relative inline-flex items-center justify-center select-none
3868             transition will-change-transform duration-150
3869             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
3870             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-transparent border-[2px] border-white/40 min-h-12 text-base px-5 py-3 gap-3 w-full  u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
3871       data-variant="outline"
3872       data-scheme="dark">
3873                                    <i class="fa-solid fa-calendar"></i>
3874                            <span class="ui-btn__label">Kalendar događaja</span>
3875            </a>
3876                        <a href="https://sajam.net/sr/kontakt"
3877       class="ui-btn relative inline-flex items-center justify-center select-none
3878             transition will-change-transform duration-150
3879             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
3880             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-transparent border-[2px] border-white/40 min-h-12 text-base px-5 py-3 gap-3 w-full  u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
3881       data-variant="outline"
3882       data-scheme="dark">
3883                                    <i class="fa-solid fa-envelope"></i>
3884                            <span class="ui-btn__label">Kontaktirajte nas</span>
3885            </a>
3886                        <a href="https://sajam.net/sr/izlagaci"
3887       class="ui-btn relative inline-flex items-center justify-center select-none
3888             transition will-change-transform duration-150
3889             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
3890             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-brand-500 hover:bg-white hover:text-black font-medium min-h-12 text-base px-5 py-3 gap-3 w-full  u-shadow col-span-2" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-black)"
3891       data-variant="primary"
3892       data-scheme="dark-red">
3893                                    <i class="fa-solid fa-file-pen"></i>
3894                            <span class="ui-btn__label">Postani izlagač</span>
3895            </a>
3896                    </div>
3897                </div>
3898            </div>
3899        </template>
3900        </nav>
3901    </header>
3902    <main x-data
3903          x-bind:style="(Alpine.store('header')?.overlay ?? false) ? '' : ''">
3904            <section class="bg-white">
3905                    
3906            <div class="max-w-7xl mx-auto px-4 !py-10 grid grid-cols-1 lg:grid-cols-3 gap-10">
3907                <article class="lg:col-span-2 space-y-6">
3908                                            <header>
3909                                                            <h1 class="text-3xl md:text-4xl font-heading font-extrabold">Kontakti</h1>
3910                                                                                        <p class="text-gray-600 mt-1">Sekcije i službe Novosadskog Sajma.</p>
3911                                                    </header>
3912                    
3913                                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
3914                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
3915                    <h3 class="font-heading font-bold text-gray-900">Parking</h3>
3916                    
3917                    <dl class="mt-3 space-y-1 text-sm">
3918                                                    <div class="flex items-center gap-2">
3919                                <i class="fa-solid fa-phone text-gray-400"></i>
3920                                <a class="hover:text-brand-500"
3921                                   href="tel:+381021483-07-10">
3922                                    +381 021 483-07-10
3923                                </a>
3924                            </div>
3925                                                    <div class="flex items-center gap-2">
3926                                <i class="fa-solid fa-phone text-gray-400"></i>
3927                                <a class="hover:text-brand-500"
3928                                   href="tel:+381021483-07-07">
3929                                    +381 021 483-07-07
3930                                </a>
3931                            </div>
3932                        
3933                                                    <div class="flex items-center gap-2">
3934                                <i class="fa-solid fa-envelope text-gray-400"></i>
3935                                <a class="hover:text-brand-500"
3936                                   href="mailto:[email protected]">[email protected]</a>
3937                            </div>
3938                        
3939                                            </dl>
3940                </section>
3941                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
3942                    <h3 class="font-heading font-bold text-gray-900">Novosadski sajam – Centrala</h3>
3943                                            <div class="text-sm text-gray-600 mt-0.5">Centrala</div>
3944                    
3945                    <dl class="mt-3 space-y-1 text-sm">
3946                                                    <div class="flex items-center gap-2">
3947                                <i class="fa-solid fa-phone text-gray-400"></i>
3948                                <a class="hover:text-brand-500"
3949                                   href="tel:+381(0)21/483-00-00">
3950                                    +381 (0)21/483-00-00
3951                                </a>
3952                            </div>
3953                        
3954                                                    <div class="flex items-center gap-2">
3955                                <i class="fa-solid fa-envelope text-gray-400"></i>
3956                                <a class="hover:text-brand-500"
3957                                   href="mailto:[email protected]">[email protected]</a>
3958                            </div>
3959                        
3960                                            </dl>
3961                </section>
3962                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
3963                    <h3 class="font-heading font-bold text-gray-900">Kabinet generalnog direktora</h3>
3964                                            <div class="text-sm text-gray-600 mt-0.5">Kabinet</div>
3965                    
3966                    <dl class="mt-3 space-y-1 text-sm">
3967                                                    <div class="flex items-center gap-2">
3968                                <i class="fa-solid fa-phone text-gray-400"></i>
3969                                <a class="hover:text-brand-500"
3970                                   href="tel:+381(0)21/483-10-00">
3971                                    +381 (0)21/483-10-00
3972                                </a>
3973                            </div>
3974                        
3975                                                    <div class="flex items-center gap-2">
3976                                <i class="fa-solid fa-envelope text-gray-400"></i>
3977                                <a class="hover:text-brand-500"
3978                                   href="mailto:[email protected]">[email protected]</a>
3979                            </div>
3980                        
3981                                            </dl>
3982                </section>
3983                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
3984                    <h3 class="font-heading font-bold text-gray-900">Sektor za sajamsku delatnost</h3>
3985                                            <div class="text-sm text-gray-600 mt-0.5">Sektor</div>
3986                    
3987                    <dl class="mt-3 space-y-1 text-sm">
3988                                                    <div class="flex items-center gap-2">
3989                                <i class="fa-solid fa-phone text-gray-400"></i>
3990                                <a class="hover:text-brand-500"
3991                                   href="tel:+381(0)21/483-01-02">
3992                                    +381 (0)21/483-01-02
3993                                </a>
3994                            </div>
3995                                                    <div class="flex items-center gap-2">
3996                                <i class="fa-solid fa-phone text-gray-400"></i>
3997                                <a class="hover:text-brand-500"
3998                                   href="tel:+381(0)21/483-01-11">
3999                                    +381 (0)21/483-01-11
4000                                </a>
4001                            </div>
4002                        
4003                                                    <div class="flex items-center gap-2">
4004                                <i class="fa-solid fa-envelope text-gray-400"></i>
4005                                <a class="hover:text-brand-500"
4006                                   href="mailto:[email protected]">[email protected]</a>
4007                            </div>
4008                        
4009                                            </dl>
4010                </section>
4011                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4012                    <h3 class="font-heading font-bold text-gray-900">Sektor za integrisane marketing komunikacije</h3>
4013                                            <div class="text-sm text-gray-600 mt-0.5">Sektor</div>
4014                    
4015                    <dl class="mt-3 space-y-1 text-sm">
4016                                                    <div class="flex items-center gap-2">
4017                                <i class="fa-solid fa-phone text-gray-400"></i>
4018                                <a class="hover:text-brand-500"
4019                                   href="tel:+381(0)21/483-11-32">
4020                                    +381 (0)21/483-11-32
4021                                </a>
4022                            </div>
4023                        
4024                                                    <div class="flex items-center gap-2">
4025                                <i class="fa-solid fa-envelope text-gray-400"></i>
4026                                <a class="hover:text-brand-500"
4027                                   href="mailto:[email protected]">[email protected]</a>
4028                            </div>
4029                        
4030                                            </dl>
4031                </section>
4032                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4033                    <h3 class="font-heading font-bold text-gray-900">Sektor za ekonomsko–finansijske poslove</h3>
4034                                            <div class="text-sm text-gray-600 mt-0.5">Sektor</div>
4035                    
4036                    <dl class="mt-3 space-y-1 text-sm">
4037                                                    <div class="flex items-center gap-2">
4038                                <i class="fa-solid fa-phone text-gray-400"></i>
4039                                <a class="hover:text-brand-500"
4040                                   href="tel:+381(0)21/483-03-01">
4041                                    +381 (0)21/483-03-01
4042                                </a>
4043                            </div>
4044                        
4045                                                    <div class="flex items-center gap-2">
4046                                <i class="fa-solid fa-envelope text-gray-400"></i>
4047                                <a class="hover:text-brand-500"
4048                                   href="mailto:[email protected]">[email protected]</a>
4049                            </div>
4050                        
4051                                            </dl>
4052                </section>
4053                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4054                    <h3 class="font-heading font-bold text-gray-900">Sektor za pravne i opšte poslove</h3>
4055                                            <div class="text-sm text-gray-600 mt-0.5">Sektor</div>
4056                    
4057                    <dl class="mt-3 space-y-1 text-sm">
4058                                                    <div class="flex items-center gap-2">
4059                                <i class="fa-solid fa-phone text-gray-400"></i>
4060                                <a class="hover:text-brand-500"
4061                                   href="tel:+381(0)21/483-02-37">
4062                                    +381 (0)21/483-02-37
4063                                </a>
4064                            </div>
4065                        
4066                                                    <div class="flex items-center gap-2">
4067                                <i class="fa-solid fa-envelope text-gray-400"></i>
4068                                <a class="hover:text-brand-500"
4069                                   href="mailto:[email protected]">[email protected]</a>
4070                            </div>
4071                        
4072                                            </dl>
4073                </section>
4074                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4075                    <h3 class="font-heading font-bold text-gray-900">Odeljenje za ocenu kvaliteta proizvoda</h3>
4076                                            <div class="text-sm text-gray-600 mt-0.5">Odeljenje</div>
4077                    
4078                    <dl class="mt-3 space-y-1 text-sm">
4079                                                    <div class="flex items-center gap-2">
4080                                <i class="fa-solid fa-phone text-gray-400"></i>
4081                                <a class="hover:text-brand-500"
4082                                   href="tel:+381(0)21/483-01-37">
4083                                    +381 (0)21/483-01-37
4084                                </a>
4085                            </div>
4086                        
4087                                                    <div class="flex items-center gap-2">
4088                                <i class="fa-solid fa-envelope text-gray-400"></i>
4089                                <a class="hover:text-brand-500"
4090                                   href="mailto:[email protected]">[email protected]</a>
4091                            </div>
4092                        
4093                                            </dl>
4094                </section>
4095                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4096                    <h3 class="font-heading font-bold text-gray-900">Služba za tehničku realizaciju sajamskih priredbi</h3>
4097                                            <div class="text-sm text-gray-600 mt-0.5">Služba</div>
4098                    
4099                    <dl class="mt-3 space-y-1 text-sm">
4100                                                    <div class="flex items-center gap-2">
4101                                <i class="fa-solid fa-phone text-gray-400"></i>
4102                                <a class="hover:text-brand-500"
4103                                   href="tel:+381(0)21/483-07-01">
4104                                    +381 (0)21/483-07-01
4105                                </a>
4106                            </div>
4107                                                    <div class="flex items-center gap-2">
4108                                <i class="fa-solid fa-phone text-gray-400"></i>
4109                                <a class="hover:text-brand-500"
4110                                   href="tel:+381(0)21/483-07-73">
4111                                    +381 (0)21/483-07-73
4112                                </a>
4113                            </div>
4114                                                    <div class="flex items-center gap-2">
4115                                <i class="fa-solid fa-phone text-gray-400"></i>
4116                                <a class="hover:text-brand-500"
4117                                   href="tel:+381(0)21/483-07-74">
4118                                    +381 (0)21/483-07-74
4119                                </a>
4120                            </div>
4121                        
4122                                                    <div class="flex items-center gap-2">
4123                                <i class="fa-solid fa-envelope text-gray-400"></i>
4124                                <a class="hover:text-brand-500"
4125                                   href="mailto:[email protected]">[email protected]</a>
4126                            </div>
4127                        
4128                                            </dl>
4129                </section>
4130                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4131                    <h3 class="font-heading font-bold text-gray-900">Odeljenje restoranskih usluga</h3>
4132    
4132                                        <div class="text-sm text-gray-600 mt-0.5">Odeljenje</div>
4133                    
4134                    <dl class="mt-3 space-y-1 text-sm">
4135                                                    <div class="flex items-center gap-2">
4136                                <i class="fa-solid fa-phone text-gray-400"></i>
4137                                <a class="hover:text-brand-500"
4138                                   href="tel:+381(0)21/483-07-77">
4139                                    +381 (0)21/483-07-77
4140                                </a>
4141                            </div>
4142                        
4143                                                    <div class="flex items-center gap-2">
4144                                <i class="fa-solid fa-envelope text-gray-400"></i>
4145                                <a class="hover:text-brand-500"
4146                                   href="mailto:[email protected]">[email protected]</a>
4147                            </div>
4148                        
4149                                            </dl>
4150                </section>
4151                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4152                    <h3 class="font-heading font-bold text-gray-900">Odeljenje interne revizije</h3>
4153                                            <div class="text-sm text-gray-600 mt-0.5">Odeljenje</div>
4154                    
4155                    <dl class="mt-3 space-y-1 text-sm">
4156                                                    <div class="flex items-center gap-2">
4157                                <i class="fa-solid fa-phone text-gray-400"></i>
4158                                <a class="hover:text-brand-500"
4159                                   href="tel:+381(0)21/483-03-50">
4160                                    +381 (0)21/483-03-50
4161                                </a>
4162                            </div>
4163                                                    <div class="flex items-center gap-2">
4164                                <i class="fa-solid fa-phone text-gray-400"></i>
4165                                <a class="hover:text-brand-500"
4166                                   href="tel:+381(0)21/483-13-60">
4167                                    +381 (0)21/483-13-60
4168                                </a>
4169                            </div>
4170                        
4171                                                    <div class="flex items-center gap-2">
4172                                <i class="fa-solid fa-envelope text-gray-400"></i>
4173                                <a class="hover:text-brand-500"
4174                                   href="mailto:[email protected]">[email protected]</a>
4175                            </div>
4176                        
4177                                            </dl>
4178                </section>
4179                                            <section class="rounded-xl border border-gray-200 bg-white p-5">
4180                    <h3 class="font-heading font-bold text-gray-900">Kancelarija u Beogradu</h3>
4181                                            <div class="text-sm text-gray-600 mt-0.5">Kancelarija</div>
4182                    
4183                    <dl class="mt-3 space-y-1 text-sm">
4184                        
4185                                                    <div class="flex items-center gap-2">
4186                                <i class="fa-solid fa-envelope text-gray-400"></i>
4187                                <a class="hover:text-brand-500"
4188                                   href="mailto:[email protected]">[email protected]</a>
4189                            </div>
4190                        
4191                                            </dl>
4192                </section>
4193                    </div>
4194
4195        
4196        <div class="mt-8">
4197            <iframe class="w-full h-72 rounded-xl border border-gray-200"
4198                    src="https://www.google.com/maps?q=Novosadski%20sajam&output=embed"
4199                    loading="lazy"
4200                    referrerpolicy="no-referrer-when-downgrade">
4201            </iframe>
4202        </div>
4203                    </article>
4204
4205                <aside class="space-y-6">
4206                    <div class="sticky top-28">
4207                        <section class="bg-white p-5">
4208                            <h3 class="text-sm font-bold uppercase tracking-wide text-gray-600">
4209                                Brzi linkovi
4210                            </h3>
4211                            <ul class="mt-3 space-y-1">
4212                                                                    <li>
4213                                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50 !flex" href="https://sajam.net/sr/kalendar"
4214              >
4215        
4216        <span class="relative shrink-0">
4217            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
4218                <i class="fa-solid fa-calendar-days text-sm"></i>
4219            </span>
4220        </span>
4221
4222                    <span class="h-6 w-px bg-gray-200"></span>
4223        
4224        
4225        <span class="min-w-0 flex flex-col">
4226            <span class="text-xs font-semibold text-neutral-900 truncate">
4227                Kalendar
4228            </span>
4229                    </span>
4230
4231        
4232                    <span
4233                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
4234                <i class="fa-solid fa-arrow-right-long"></i>
4235            </span>
4236            </a>
4237                                    </li>
4238                                                                    <li>
4239                                        <a class="group inline-flex items-center gap-3 rounded-xl transition focus:outline-none focus-visible:ring-4 focus-visible:ring-black/5 bg-white border-gray-200 border px-3 py-2 hover:bg-gray-50 !flex" href="https://sajam.net/sr/izlagaci/prijave"
4240              >
4241        
4242        <span class="relative shrink-0">
4243            <span class="relative inline-flex items-center justify-center w-9 h-9 rounded text-gray-900">
4244                <i class="fa-solid fa-file-signature text-sm"></i>
4245            </span>
4246        </span>
4247
4248                    <span class="h-6 w-px bg-gray-200"></span>
4249        
4250        
4251        <span class="min-w-0 flex flex-col">
4252            <span class="text-xs font-semibold text-neutral-900 truncate">
4253                Prijave
4254            </span>
4255                    </span>
4256
4257        
4258                    <span
4259                  class="ml-auto text-gray-400 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-1">
4260                <i class="fa-solid fa-arrow-right-long"></i>
4261            </span>
4262            </a>
4263                                    </li>
4264                                                            </ul>
4265                        </section>
4266
4267                        <section class="bg-white p-5">
4268                            <h3 class="text-sm font-bold uppercase tracking-wide text-gray-600">
4269                                Akcije
4270                            </h3>
4271                            <div class="mt-3 grid grid-cols-1 gap-2 max-w-xs">
4272                                                                                                        <a href="https://sajam.net/sr/kalendar"
4273       class="ui-btn relative inline-flex items-center justify-center select-none
4274             transition will-change-transform duration-150
4275             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4276             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow font-medium hover:!border-brand-400 !bg-brand-500/20 text-black hover:!bg-white hover:text-black !border-brand-500/50" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
4277       data-variant="secondary"
4278       data-scheme="light">
4279                                    <i class="fa-solid fa-calendar-days"></i>
4280                            <span class="ui-btn__label">Kalendar</span>
4281            </a>
4282                                                                                                        <a href="https://sajam.net/sr/vesti"
4283       class="ui-btn relative inline-flex items-center justify-center select-none
4284             transition will-change-transform duration-150
4285             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4286             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow font-medium hover:!border-brand-400 !bg-[var(--footer-via)]/20 text-black !border-[var(--footer-from)]/50 hover:!bg-white hover:text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
4287       data-variant="secondary"
4288       data-scheme="light">
4289                                    <i class="fa-regular fa-newspaper"></i>
4290                            <span class="ui-btn__label">Vesti</span>
4291            </a>
4292                                                                                                        <a href="https://sajam.net/sr/obavestenja"
4293       class="ui-btn relative inline-flex items-center justify-center select-none
4294             transition will-change-transform duration-150
4295             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4296             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-white rounded-full border-[2px] border-brand-500 min-h-11 text-sm px-4 py-2 gap-2.5   u-shadow font-medium hover:!border-brand-400 !border-brand-400" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
4297       data-variant="secondary"
4298       data-scheme="light">
4299                                    <i class="fa-regular fa-bell"></i>
4300                            <span class="ui-btn__label">Obaveštenja</span>
4301            </a>
4302                                                            </div>
4303                        </section>
4304
4305                                            </div>
4306                </aside>
4307            </div>
4308            </section>
4309
4310            
4311        <section class="max-w-7xl mx-auto px-4 pb-14">
4312            <div class="grid lg:grid-cols-2 gap-10">
4313                <div>
4314                    <h2 class="text-xl font-heading font-bold flex items-center gap-2">
4315                        <span aria-hidden
4316                              class="inline-block h-4 w-2 -skew-x-[30deg] bg-brand-500"></span>
4317                        Predstojeći događaji
4318                    </h2>
4319                    <div class="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
4320                                                                                <a href="https://sajam.net/sr/dogadjaj/16-ewda-konferencija-ewda-2026"
4321                               class="group bg-white rounded-xl border border-gray-200 p-4 hover:shadow-sm transition">
4322                                <div class="text-xs text-gray-500">
4323                                    28.09.-02.10.2026
4324                                </div>
4325                                <div class="mt-1 font-semibold group-hover:text-brand-500">16. EWDA konferencija - EWDA 2026</div>
4326                            </a>
4327                                                                                <a href="https://sajam.net/sr/dogadjaj/57-medunarodni-sajam-lova-i-ribolova"
4328                               class="group bg-white rounded-xl border border-gray-200 p-4 hover:shadow-sm transition">
4329                                <div class="text-xs text-gray-500">
4330                                    30.09.-04.10.2026
4331                                </div>
4332                                <div class="mt-1 font-semibold group-hover:text-brand-500">57. MEĐUNARODNI SAJAM LOVA I RIBOLOVA</div>
4333                            </a>
4334                                                                                <a href="https://sajam.net/sr/dogadjaj/sajam-ekologije-2026"
4335                               class="group bg-white rounded-xl border border-gray-200 p-4 hover:shadow-sm transition">
4336                                <div class="text-xs text-gray-500">
4337                                    30.09.-04.10.2026
4338                                </div>
4339                                <div class="mt-1 font-semibold group-hover:text-brand-500">SAJAM EKOLOGIJE - 2026</div>
4340                            </a>
4341                                            </div>
4342                </div>
4343
4344                <div>
4345                    <h2 class="text-xl font-heading font-bold flex items-center gap-2">
4346                        <span aria-hidden
4347                              class="inline-block h-4 w-2 -skew-x-[30deg] bg-brand-500"></span>
4348                        Najnovije vesti
4349                    </h2>
4350                    <div class="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
4351                                                                                <a href="https://sajam.net/sr/vesti/lovci-dokazali-da-kuvaju-sjajno"
4352                               class="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-sm transition">
4353                                                                    <div class="aspect-[16/9] overflow-hidden">
4354                                        <img src="https://sajam.net/storage/news/covers/z7Lzo78GL3zW6X4tMqtXHH2DKQaucl2lJcuGPRBq.jpg"
4355                                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
4356                                             alt="">
4357                                    </div>
4358                                                                <div class="p-3">
4359                                    <div class="text-xs text-gray-500">01.10.2026.
4360                                    </div>
4361                                    <div class="mt-1 font-semibold group-hover:text-brand-500 line-clamp-2">
4362                                        Lovci dokazali da kuvaju sjajno</div>
4363                                </div>
4364                            </a>
4365                                                                                <a href="https://sajam.net/sr/vesti/plovila-i-oprema-za-ljubitelje-nautike"
4366                               class="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-sm transition">
4367                                                                    <div class="aspect-[16/9] overflow-hidden">
4368                                        <img src="https://sajam.net/storage/news/covers/rl2opdT6xNldym78m9qJyb0E1Bqw7V74AdpUKJK1.jpg"
4369                                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
4370                                             alt="">
4371                                    </div>
4372                                                                <div class="p-3">
4373                                    <div class="text-xs text-gray-500">01.10.2026.
4374                                    </div>
4375                                    <div class="mt-1 font-semibold group-hover:text-brand-500 line-clamp-2">
4376                                        PLOVILA I OPREMA ZA LJUBITELJE NAUTIKE</div>
4377                                </div>
4378                            </a>
4379                                                                                <a href="https://sajam.net/sr/vesti/najmladim-posetiocima-sajma-predstavljamo-svet-dinosaurusa"
4380                               class="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-sm transition">
4381                                                                    <div class="aspect-[16/9] overflow-hidden">
4382                                        <img src="https://sajam.net/storage/news/covers/ff6Y1l2cGEFcStOXLcYXAfFsGPyqCsLmfj5mVia4.jpg"
4383                                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
4384                                             alt="">
4385                                    </div>
4386                                                                <div class="p-3">
4387                                    <div class="text-xs text-gray-500">01.10.2026.
4388                                    </div>
4389                                    <div class="mt-1 font-semibold group-hover:text-brand-500 line-clamp-2">
4390                                        NAJMLAĐIM POSETIОCIMA SAJMA PREDSTAVLJAMO SVET DINOSAURUSA</div>
4391                                </div>
4392                            </a>
4393                                            </div>
4394                </div>
4395            </div>
4396        </section>
4397    
4398    <div x-data="toaster()"
4399     x-init="init()"
4400     class="fixed z-[9999] bottom-4 right-4 space-y-2 pointer-events-none"
4401     aria-live="polite"
4402     aria-atomic="true">
4403    <template x-for="t in items"
4404              :key="t.id">
4405        <div x-show="t.show"
4406             @click="close(t.id)"
4407             x-transition:enter="transition ease-out duration-300"
4408             x-transition:enter-start="opacity-0 translate-y-2 scale-95"
4409             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
4410             x-transition:leave="transition ease-in duration-200"
4411             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
4412             x-transition:leave-end="opacity-0 translate-y-2 scale-95"
4413             class="pointer-events-auto w-80 rounded-xl shadow-lg ring-1 ring-black/5 overflow-hidden cursor-pointer"
4414             :class="{
4415                 'bg-emerald-50 text-emerald-900': t.type==='success',
4416                 'bg-amber-50 text-amber-900': t.type==='warning',
4417                 'bg-red-50 text-red-900': t.type==='error',
4418                 'bg-white text-gray-900': !['success', 'warning', 'error'].includes(t.type),
4419             }"
4420             role="status">
4421            <div class="p-4">
4422                <div class="flex items-start gap-3">
4423                    <div class="shrink-0">
4424                        <i class="fa-solid"
4425                           :class="{
4426                               'fa-circle-check text-emerald-600': t.type==='success',
4427                               'fa-triangle-exclamation text-amber-600': t.type==='warning',
4428                               'fa-circle-xmark text-red-600': t.type==='error',
4429                               'fa-circle-info text-gray-600': !['success', 'warning', 'error'].includes(t.type),
4430                           }"></i>
4431                    </div>
4432                    <div class="flex-1">
4433                        <div class="font-semibold"
4434                             x-text="t.title || 'Obaveštenje'"></div>
4435                        <div class="text-sm mt-0.5"
4436                             x-text="t.text"></div>
4437                    </div>
4438                    <button @click="close(t.id)"
4439                            class="text-gray-500 hover:text-gray-700">
4440                        <i class="fa-solid fa-xmark"></i>
4441                    </button>
4442                </div>
4443            </div>
4444        </div>
4445    </template>
4446</div>
4447
4448<script>
4449    function toaster() {
4450        return {
4451            items: [],
4452            seed: 0,
4453            init() {
4454                if (window.__toastListener) {
4455                    window.removeEventListener('toast', window.__toastListener);
4456                }
4457                window.__toastListener = (e) => this.push(e.detail || {});
4458                window.addEventListener('toast', window.__toastListener);
4459                window.toast = (opts = {}) => window.dispatchEvent(new CustomEvent('toast', {
4460                    detail: opts
4461                }));
4462            },
4463            push({
4464                text = '',
4465                title = '',
4466                type = 'success',
4467                timeout = 3500
4468            } = {}) {
4469                const id = ++this.seed;
4470                const item = {
4471                    id,
4472                    text,
4473                    title,
4474                    type,
4475                    show: true
4476                };
4477                this.items.push(item);
4478                if (timeout) setTimeout(() => this.close(id), timeout);
4479            },
4480            close(id) {
4481                const i = this.items.findIndex(x => x.id === id);
4482                if (i !== -1) {
4483                    this.items[i].show = false;
4484                    setTimeout(() => {
4485                        this.items.splice(i, 1);
4486                        // notify listeners (we’ll use this to set localStorage)
4487                        window.dispatchEvent(new CustomEvent('toast:dismiss', {
4488                            detail: {
4489                                id
4490                            }
4491                        }));
4492                    }, 200);
4493                }
4494            },
4495        }
4496    }
4497</script>
4497
4498    </main>
4499
4500        <div x-data="toaster()"
4501     x-init="init()"
4502     class="fixed z-[9999] bottom-4 right-4 space-y-2 pointer-events-none"
4503     aria-live="polite"
4504     aria-atomic="true">
4505    <template x-for="t in items"
4506              :key="t.id">
4507        <div x-show="t.show"
4508             @click="close(t.id)"
4509             x-transition:enter="transition ease-out duration-300"
4510             x-transition:enter-start="opacity-0 translate-y-2 scale-95"
4511             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
4512             x-transition:leave="transition ease-in duration-200"
4513             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
4514             x-transition:leave-end="opacity-0 translate-y-2 scale-95"
4515             class="pointer-events-auto w-80 rounded-xl shadow-lg ring-1 ring-black/5 overflow-hidden cursor-pointer"
4516             :class="{
4517                 'bg-emerald-50 text-emerald-900': t.type==='success',
4518                 'bg-amber-50 text-amber-900': t.type==='warning',
4519                 'bg-red-50 text-red-900': t.type==='error',
4520                 'bg-white text-gray-900': !['success', 'warning', 'error'].includes(t.type),
4521             }"
4522             role="status">
4523            <div class="p-4">
4524                <div class="flex items-start gap-3">
4525                    <div class="shrink-0">
4526                        <i class="fa-solid"
4527                           :class="{
4528                               'fa-circle-check text-emerald-600': t.type==='success',
4529                               'fa-triangle-exclamation text-amber-600': t.type==='warning',
4530                               'fa-circle-xmark text-red-600': t.type==='error',
4531                               'fa-circle-info text-gray-600': !['success', 'warning', 'error'].includes(t.type),
4532                           }"></i>
4533                    </div>
4534                    <div class="flex-1">
4535                        <div class="font-semibold"
4536                             x-text="t.title || 'Obaveštenje'"></div>
4537                        <div class="text-sm mt-0.5"
4538                             x-text="t.text"></div>
4539                    </div>
4540                    <button @click="close(t.id)"
4541                            class="text-gray-500 hover:text-gray-700">
4542                        <i class="fa-solid fa-xmark"></i>
4543                    </button>
4544                </div>
4545            </div>
4546        </div>
4547    </template>
4548</div>
4549
4550<script>
4551    function toaster() {
4552        return {
4553            items: [],
4554            seed: 0,
4555            init() {
4556                if (window.__toastListener) {
4557                    window.removeEventListener('toast', window.__toastListener);
4558                }
4559                window.__toastListener = (e) => this.push(e.detail || {});
4560                window.addEventListener('toast', window.__toastListener);
4561                window.toast = (opts = {}) => window.dispatchEvent(new CustomEvent('toast', {
4562                    detail: opts
4563                }));
4564            },
4565            push({
4566                text = '',
4567                title = '',
4568                type = 'success',
4569                timeout = 3500
4570            } = {}) {
4571                const id = ++this.seed;
4572                const item = {
4573                    id,
4574                    text,
4575                    title,
4576                    type,
4577                    show: true
4578                };
4579                this.items.push(item);
4580                if (timeout) setTimeout(() => this.close(id), timeout);
4581            },
4582            close(id) {
4583                const i = this.items.findIndex(x => x.id === id);
4584                if (i !== -1) {
4585                    this.items[i].show = false;
4586                    setTimeout(() => {
4587                        this.items.splice(i, 1);
4588                        // notify listeners (we’ll use this to set localStorage)
4589                        window.dispatchEvent(new CustomEvent('toast:dismiss', {
4590                            detail: {
4591                                id
4592                            }
4593                        }));
4594                    }, 200);
4595                }
4596            },
4597        }
4598    }
4599</script>
4599
4600    <footer
4601        class="pt-16 bg-gradient-to-r from-[var(--footer-from)] via-[var(--footer-via)] to-[var(--footer-to)] text-white">
4602
4603    
4604    <div class="relative">
4605        <div class="w-full">
4606            <div class="max-w-7xl mx-auto px-4 sm:py-12 py-6 flex items-center justify-between gap-6">
4607                <div class="flex items-center gap-4">
4608                    
4609                    <img src="https://sajam.net/images/logos/novi-sad-logo.svg"
4610                         alt="Grad Novi Sad"
4611                         loading="lazy"
4612                         decoding="async"
4613                         class="sm:h-24 h-10  w-auto drop-shadow" />
4614                    <img src="https://sajam.net/images/logos/novi-sad-city-logo.svg"
4615                         alt="Grad Novi Sad"
4616                         loading="lazy"
4617                         decoding="async"
4618                         class="sm:h-24 h-10  w-auto drop-shadow" />
4619                    <div class="hidden sm:block">
4620                        <p class="text-xs tracking-wide uppercase text-white/80">Grad Novi Sad</p>
4621                        <p class="text-sm font-semibold">Partner Novosadskog Sajma</p>
4622                    </div>
4623                </div>
4624            </div>
4625        </div>
4626    </div>
4627
4628    
4629    <section class="relative overflow-visible newsletter-overlap">
4630        <div class="relative z-[1] max-w-7xl mx-auto px-4 py-8">
4631            <div class=" overflow-hidden bg-brand-600">
4632                <div class="grid md:grid-cols-2 items-center gap-6 px-5 sm:px-6 md:px-8 md:py-12 py-6  min-h-[300px]">
4633                    <div>
4634                        <h2 class="text-2xl sm:text-5xl font-heading font-extrabold">Bilten
4635                        </h2>
4636                        <p class="mt-2 text-white/90">
4637                            Prijavite se i dobijajte vesti, najave i korisne informacije direktno u inbox.
4638                        </p>
4639                    </div>
4640
4641                    <form method="POST"
4642                          class="flex flex-col items-stretch gap-3">
4643                        <input type="hidden" name="_token" value="diVUNBlLFH81Ti6YIimuclgLoiCenkYkD0trEjjr" autocomplete="off">                        <label for="footer-news-email"
4644                               class="text-white font-semibold">Unesite e-mail :</label>
4645                        <input id="footer-news-email"
4646                               type="email"
4647                               name="email"
4648                               disabled
4649                               required
4650                               placeholder="[email protected]"
4651                               class="min-w-0 flex-1 bg-gray-200 border-0 px-3 py-4 text-gray-400 placeholder:text-gray-500 cursor-not-allowed
4652                                  focus:ring-2 focus:ring-offset-2 focus:ring-offset-brand-600 focus:ring-white" />
4653                        <button disabled
4654                                class="inline-flex min-h-11 items-center justify-center gap-2 bg-black/30 text-gray-400 font-medium px-4 py-2 cursor-not-allowed relative">
4655                            Pošalji <i data-ph="arrow-right-bold"
4656                               class="w-4 h-4"></i>
4657                            <span
4658                                  class="absolute -bottom-2 -right-3 bg-amber-300 border border-white text-gray-900 text-[10px] uppercase font-bold px-3 py-1 shadow">
4659                                Uskoro / Soon
4660                            </span>
4661                        </button>
4662                    </form>
4663                </div>
4664            </div>
4665        </div>
4666    </section>
4667
4668    
4669    <section class="w-full mx-auto px-4 py-10 bg-gray-950">
4670        <div class="max-w-7xl mx-auto grid gap-10 md:grid-cols-3 lg:grid-cols-6">
4671
4672            
4673            <div class="lg:col-span-2">
4674                <div class="flex items-center gap-3">
4675                    <a href="https://sajam.net/sr"
4676                       class="relative inline-flex items-center">
4677                        <img src="https://sajam.net/images/logo.svg"
4678                             loading="lazy"
4679                             decoding="async"
4680                             alt="Novosadski Sajam Logo"
4681                             class="relative z-10 block transition-all duration-300 h-14">
4682                    </a>
4683                    <span class="sr-only">Novosadski Sajam</span>
4684                </div>
4685                <p class="mt-3 text-sm text-gray-300">Vodeća sajamska kuća u Srbiji - više od jednog veka povezuje industriju, inovacije i zajednicu.</p>
4686
4687                
4688                                <div class="mt-4 flex items-center gap-3">
4689                                            <a href="https://instagram.com/novosadski_sajam"
4690       class="ui-btn relative inline-flex items-center justify-center select-none
4691             transition will-change-transform duration-150
4692             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4693             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-11 text-sm px-4 py-2 gap-2.5    aspect-1/1 !rounded-full !p-2 leading-0 hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Instagram"
4694       data-variant="secondary"
4695       data-scheme="dark">
4696                <span class="ui-btn__label"><i data-ph="instagram-logo-duo"
4697                               class="w-5 h-5"></i></span>
4698            </a>
4699                                                                <a href="https://facebook.com/novosadski.sajam"
4700       class="ui-btn relative inline-flex items-center justify-center select-none
4701             transition will-change-transform duration-150
4702             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4703             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-11 text-sm px-4 py-2 gap-2.5    aspect-1/1 !rounded-full !p-2 leading-0 hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="Facebook"
4704       data-variant="secondary"
4705       data-scheme="dark">
4706                <span class="ui-btn__label"><i data-ph="facebook-logo-duo"
4707                               class="w-5 h-5"></i></span>
4708            </a>
4709                                                                <a href="https://youtube.com/@novosadskisajam"
4710       class="ui-btn relative inline-flex items-center justify-center select-none
4711             transition will-change-transform duration-150
4712             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4713             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-11 text-sm px-4 py-2 gap-2.5    aspect-1/1 !rounded-full !p-2 leading-0 hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" target="_blank" rel="noopener nofollow" aria-label="YouTube"
4714       data-variant="secondary"
4715       data-scheme="dark">
4716                <span class="ui-btn__label"><i data-ph="youtube-logo-duo"
4717                               class="w-5 h-5"></i></span>
4718            </a>
4719                                        
4720                </div>
4721            </div>
4722
4723            
4724            <nav aria-labelledby="ft-visitors"
4725                 x-data="{ open: false }">
4726                <h3 id="ft-visitors"
4727                    class="text-sm font-bold uppercase tracking-wide text-white/70">
4728                    <button type="button"
4729                            class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70"
4730                            :aria-expanded="open"
4731                            aria-controls="ft-visitors-panel"
4732                            @click="open = !open">
4733                        <span>Posetioci</span>
4734                        <span class="shrink-0 transition-transform duration-200"
4735                              :class="{ 'rotate-180': open }">
4736                            <i data-ph="caret-down-bold" class="w-4 h-4 block"></i>
4737                        </span>
4738                    </button>
4739                    <span class="hidden md:block">Posetioci</span>
4740                </h3>
4741                <div id="ft-visitors-panel"
4742                     class="ft-collapse"
4743                     :class="{ 'is-open': open }">
4744                    <div class="ft-collapse__inner">
4745                        <ul class="mt-3">
4746                            <li><a class="footer-link"
4747                                   href="https://sajam.net/sr/posetioci/ulaznice">Ulaznice</a></li>
4748                            <li><a class="footer-link"
4749                                   href="https://sajam.net/sr/posetioci/kako-doci">Kako do nas (mapa)</a></li>
4750                            <li><a class="footer-link"
4751                                   href="https://sajam.net/sr/posetioci/parking">Parking i kapije</a></li>
4752                            <li><a class="footer-link"
4753                                   href="https://sajam.net/sr/posetioci/plan-sajma">Plan Sajma (hale)</a></li>
4754                            <li><a class="footer-link"
4755                                   href="https://sajam.net/sr/posetioci/najave">Programi i najave</a></li>
4756                            <li><a class="footer-link"
4757                                   href="https://sajam.net/sr/posetioci/katalog">Katalog i izlagači</a></li>
4758                            <li><a class="footer-link"
4759                                   href="https://sajam.net/sr/posetioci/smestaj-preporuke">Smeštaj i preporuke</a></li>
4760                            <li><a class="footer-link"
4761                                   href="https://sajam.net/sr/posetioci/pristupacnost">Pristupačnost (A11y)</a>
4762                            </li>
4763                        </ul>
4764                    </div>
4765                </div>
4766            </nav>
4767
4768            
4769            <nav aria-labelledby="ft-exhibitors"
4770                 x-data="{ open: false }">
4771                <h3 id="ft-exhibitors"
4772                    class="text-sm font-bold uppercase tracking-wide text-white/70">
4773                    <button type="button"
4774                            class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70"
4775                            :aria-expanded="open"
4776                            aria-controls="ft-exhibitors-panel"
4777                            @click="open = !open">
4778                        <span>Izlagači</span>
4779                        <span class="shrink-0 transition-transform duration-200"
4780                              :class="{ 'rotate-180': open }">
4781                            <i data-ph="caret-down-bold" class="w-4 h-4 block"></i>
4782                        </span>
4783                    </button>
4784                    <span class="hidden md:block">Izlagači</span>
4785                </h3>
4786                <div id="ft-exhibitors-panel"
4787                     class="ft-collapse"
4788                     :class="{ 'is-open': open }">
4789                    <div class="ft-collapse__inner">
4790                        <ul class="mt-3">
4791                            <li><a class="footer-link"
4792                                   href="https://sajam.net/sr/izlagaci/prijave">Prijava i uslovi učešća</a></li>
4793                            <li><a class="footer-link"
4794                                   href="https://sajam.net/sr/izlagaci/setup-hub">Å tandovi i oprema</a>
4795                            </li>
4796                            <li><a class="footer-link"
4797                                   href="https://sajam.net/sr/izlagaci/reklamne-usluge">Brendiranje i reklamne usluge</a></li>
4798                            <li><a class="footer-link"
4799                                   href="https://sajam.net/sr/izlagaci/uredjenje-prostora">Uređenje prostora</a>
4800                            </li>
4801                            <li><a class="footer-link"
4802                                   href="https://sajam.net/sr/izlagaci/struja-voda-internet">Struja, voda, internet</a>
4803                            </li>
4804                            <li><a class="footer-link"
4805                                   href="https://sajam.net/sr/izlagaci/audio-video-podrska">Audio/Video podrška</a>
4806                            </li>
4807                            <li><a class="footer-link"
4808                                   href="https://sajam.net/sr/izlagaci/bezbednost-osiguranje">Bezbednost i osiguranje</a>
4809                            </li>
4810                            <li><a class="footer-link"
4811                                   href="https://sajam.net/sr/izlagaci/zastupnici-spediteri">Zastupnici i špediteri</a>
4812                            </li>
4813                            <li><a class="footer-link"
4814                                   href="https://sajam.net/sr/izlagaci/parking">Parking i skladištenje</a>
4815                            </li>
4816                        </ul>
4817                    </div>
4818                </div>
4819            </nav>
4820
4821            
4822            <nav aria-labelledby="ft-congress"
4823                 x-data="{ open: false }">
4824                <h3 id="ft-congress"
4825                    class="text-sm font-bold uppercase tracking-wide text-white/70">
4826                    <button type="button"
4827                            class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70"
4828                            :aria-expanded="open"
4829                            aria-controls="ft-congress-panel"
4830                            @click="open = !open">
4831                        <span>Kongresni Centar „Master&quot;</span>
4832                        <span class="shrink-0 transition-transform duration-200"
4833                              :class="{ 'rotate-180': open }">
4834                            <i data-ph="caret-down-bold" class="w-4 h-4 block"></i>
4835                        </span>
4836                    </button>
4837                    <span class="hidden md:block">Kongresni Centar „Master&quot;</span>
4838                </h3>
4839                <div id="ft-congress-panel"
4840                     class="ft-collapse"
4841                     :class="{ 'is-open': open }">
4842                    <div class="ft-collapse__inner">
4843                        <ul class="mt-3">
4844                            <li><a class="footer-link"
4845                                   href="https://sajam.net/sr/kongres/sale-kapacitet">Sale i kapaciteti</a>
4846                            </li>
4847                            <li><a class="footer-link"
4848                                   href="https://sajam.net/sr/kongres/tehnicka-oprema">Tehnička oprema</a>
4849                            </li>
4850                            <li><a class="footer-link"
4851                                   href="https://sajam.net/sr/kongres/cenovnik-i-prijava">Cenovnik i prijava</a></li>
4852                            <li><a class="footer-link"
4853                                   href="https://sajam.net/sr/kongres/dodatne-usluge">Dodatne usluge</a></li>
4854                            <li><a class="footer-link"
4855                                   href="https://sajam.net/sr/kongres/posaljite-upit">Pošaljite upit</a></li>
4856                            <li><a class="footer-link"
4857                                   href="https://sajam.net/sr/kongres/kontakt">Tim &amp; kontakt</a></li>
4858                        </ul>
4859                    </div>
4860                </div>
4861            </nav>
4862
4863            
4864            <nav aria-labelledby="ft-press"
4865                 x-data="{ open: false }">
4866                <h3 id="ft-press"
4867                    class="text-sm font-bold uppercase tracking-wide text-white/70">
4868                    <button type="button"
4869                            class="md:hidden flex items-center justify-between w-full min-h-[44px] text-left text-sm font-bold uppercase tracking-wide text-white/70"
4870                            :aria-expanded="open"
4871                            aria-controls="ft-press-panel"
4872                            @click="open = !open">
4873                        <span>Press</span>
4874                        <span class="shrink-0 transition-transform duration-200"
4875                              :class="{ 'rotate-180': open }">
4876                            <i data-ph="caret-down-bold" class="w-4 h-4 block"></i>
4877                        </span>
4878                    </button>
4879                    <span class="hidden md:block">Press</span>
4880                </h3>
4881                <div id="ft-press-panel"
4882                     class="ft-collapse"
4883                     :class="{ 'is-open': open }">
4884                    <div class="ft-collapse__inner">
4885                        <ul class="mt-3">
4886                            <li><a class="footer-link"
4887                                   href="https://sajam.net/sr/press/konferencije">Konferencije za štampu</a></li>
4888                            <li><a class="footer-link"
4889                                   href="https://sajam.net/sr/press/medijski-paket">Media kit</a></li>
4890                            <li><a class="footer-link"
4891                                   href="https://sajam.net/sr/media/galerije">Foto galerija</a></li>
4892                            <li><a class="footer-link"
4893                                   href="https://sajam.net/sr/vesti/press">Blog / priče</a></li>
4894                            <li><a class="footer-link"
4895                                   href="https://sajam.net/sr/kalendar">Kalendar</a></li>
4896                            <li><a class="footer-link"
4897                                   href="https://sajam.net/sr/posetioci/plan-sajma">Prostor i mapa Sajma</a></li>
4898                            <li><a class="footer-link"
4899                                   href="https://sajam.net/sr/o-nama/istorijski-pregled">Istorijski pregled</a></li>
4900                            <li><a class="footer-link"
4901                                   href="https://sajam.net/sr/kontakt">Kontakt</a></li>
4902                        </ul>
4903
4904                        
4905                        <div class="mt-4 flex flex-wrap gap-2">
4906                            <a href="https://sajam.net/sr"
4907       class="ui-btn relative inline-flex items-center justify-center select-none
4908             transition will-change-transform duration-150
4909             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
4910             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-white text-white bg-black/60 border rounded-full border-white/30 min-h-10 text-xs px-3 py-1.5 gap-2    !min-h-11 !rounded-full !text-sm !font-medium hover:!bg-white hover:!text-black" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)"
4911       data-variant="secondary"
4912       data-scheme="dark">
4913                <span class="ui-btn__label"><i data-ph="house-bold"
4914                                   class="w-4 h-4 inline-block shrink-0 align-middle"></i> Glavna</span>
4915            </a>
4916                        </div>
4917                    </div>
4918                </div>
4919            </nav>
4920        </div>
4921
4922        
4923        <div
4924             class="mt-10 border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-gray-400">
4925            <div>&copy; 2026 Novosadski sajam. Sva prava zadržana.</div>
4926            <div class="flex items-center gap-4">
4927                
4928                <a href="https://sajam.net/sr/kontakt"
4929                   class="footer-link">Kontakt</a>
4930            </div>
4931        </div>
4932    </section>
4933
4934    
4935    <style>
4936        .footer-link {
4937            display: inline-flex;
4938            min-height: 44px;
4939            align-items: center;
4940            color: rgb(209 213 219/1);
4941            font-size: .875rem;
4942            line-height: 1.25rem;
4943            font-weight: 500;
4944        }
4945
4946        .footer-link:hover {
4947            color: #fff
4948        }
4949
4950        .newsletter-overlap::before {
4951            content: "";
4952            position: absolute;
4953            left: 0;
4954            right: 0;
4955            top: calc(50% - 4px);
4956            bottom: 0;
4957            background-color: oklch(13% .028 261.692);
4958            z-index: 0;
4959            pointer-events: none;
4960        }
4961
4962        .ft-collapse {
4963            display: grid;
4964            grid-template-rows: 0fr;
4965            transition: grid-template-rows .25s ease;
4966        }
4967        .ft-collapse.is-open {
4968            grid-template-rows: 1fr;
4969        }
4970        .ft-collapse__inner {
4971            min-height: 0;
4972            overflow: hidden;
4973        }
4974        @media (min-width: 768px) {
4975            .ft-collapse { grid-template-rows: 1fr !important; }
4976        }
4977        @media (prefers-reduced-motion: reduce) {
4978            .ft-collapse { transition: none; }
4979        }
4980
4981    </style>
4982</footer>
4983
4984    
4985    
4986    
4987    <div class="h-[72px] lg:hidden"
4988         aria-hidden="true"></div>
4989
4990    <nav aria-label="Brza navigacija"
4991         class="fixed bottom-0 inset-x-0 z-40 lg:hidden bg-white/95 backdrop-blur-sm border-t border-neutral-200/60 shadow-[0_-1px_0_rgba(0,0,0,0.04),0_-4px_20px_rgba(0,0,0,0.06)]"
4992         style="padding-bottom: env(safe-area-inset-bottom)">
4993        <div class="flex h-[72px]">
4994                                            <a href="https://sajam.net/sr/kalendar"
4995                                      class="flex flex-col items-center justify-center flex-1 gap-1 select-none
4996                          transition-opacity active:opacity-60">
4997
4998                                            <span class="flex items-center justify-center w-14 h-8">
4999                            <i class="fa-solid fa-calendar-days text-neutral-400 text-[1.1rem] leading-none"></i>
5000                        </span>
5001                        <span class="text-[11px] text-neutral-400 leading-none">Kalendar</span>
5002                                    </a>
5003                                            <a href="https://sajam.net/sr/posetioci"
5004                                      class="flex flex-col items-center justify-center flex-1 gap-1 select-none
5005                          transition-opacity active:opacity-60">
5006
5007                                            <span class="flex items-center justify-center w-14 h-8">
5008                            <i class="fa-solid fa-users text-neutral-400 text-[1.1rem] leading-none"></i>
5009                        </span>
5010                        <span class="text-[11px] text-neutral-400 leading-none">Posetioci</span>
5011                                    </a>
5012                                            <a href="https://sajam.net/sr/izlagaci"
5013                                      class="flex flex-col items-center justify-center flex-1 gap-1 select-none
5014                          transition-opacity active:opacity-60">
5015
5016                                            <span class="flex items-center justify-center w-14 h-8">
5017                            <i class="fa-solid fa-store text-neutral-400 text-[1.1rem] leading-none"></i>
5018                        </span>
5019                        <span class="text-[11px] text-neutral-400 leading-none">Izlagači</span>
5020                                    </a>
5021                                            <a href="https://sajam.net/sr/kontakt"
5022                    aria-current="page"                    class="flex flex-col items-center justify-center flex-1 gap-1 select-none
5023                          transition-opacity active:opacity-60">
5024
5025                                            
5026                        <span
5027                              class="flex items-center justify-center w-14 h-8 rounded-full bg-brand-600 transition-all">
5028                            <i class="fa-solid fa-phone text-white text-sm leading-none"></i>
5029                        </span>
5030                        <span
5031                              class="text-[11px] font-semibold text-brand-600 leading-none tracking-tight">Kontakt</span>
5032                                    </a>
5033                    </div>
5034    </nav>
5035
5036    
5036<script>
5037        (function() {
5038            const PAGE_CONF = {
5039                overlay: false
5040            };
5041
5042            function setupStore() {
5043                if (!window.Alpine) return;
5044
5045                if (!Alpine.store('header')) {
5046                    Alpine.store('header', {
5047                        overlay: false,
5048                        scrolled: false,
5049                        height: 72,
5050                        el: null,
5051
5052                        shrinkAt: 140,
5053                        expandAt: 60,
5054
5055                        topbar: {
5056                            hidden: false,
5057                            height: 48,
5058                            offsetDown: 60,
5059                            offsetUp: 20,
5060                            _anchorShow: 0,
5061                            _anchorHide: 0,
5062                        },
5063
5064                        _ticking: false,
5065                        _lastY: 0,
5066                        _ro: null,
5067
5068                        setOverlay(v) {
5069                            this.overlay = !!v;
5070                        },
5071
5072                        _applyScrolled(y) {
5073                            if (!this.scrolled && y > this.shrinkAt) this.scrolled = true;
5074                            else if (this.scrolled && y < this.expandAt) this.scrolled = false;
5075                        },
5076
5077                        _applyTopbar(y) {
5078                            const dirDown = y > this._lastY;
5079                            const T = this.topbar;
5080                            if (dirDown) {
5081                                if (!T.hidden && y > (T._anchorShow + T.offsetDown)) {
5082                                    T.hidden = true;
5083                                    T._anchorHide = y;
5084                                }
5085                            } else {
5086                                if (T.hidden && y < (T._anchorHide - T.offsetUp)) {
5087                                    T.hidden = false;
5088                                    T._anchorShow = y;
5089                                }
5090                            }
5091                        },
5092
5093                        onScroll() {
5094                            const y = window.scrollY || 0;
5095                            if (this._ticking) return;
5096                            this._ticking = true;
5097                            requestAnimationFrame(() => {
5098                                this._applyScrolled(y);
5099                                this._applyTopbar(y);
5100                                this._ticking = false;
5101                                this._lastY = y;
5102                            });
5103                        },
5104
5105                        measure() {
5106                            const el = document.getElementById('site-header');
5107                            if (!el) return;
5108                            this.el = el;
5109                            const setH = () => {
5110                                const h = Math.round(el.getBoundingClientRect().height);
5111                                if (Math.abs(h - this.height) >= 2) this.height = h;
5112                            };
5113                            setH();
5114                            if (typeof ResizeObserver !== 'undefined') {
5115                                this._ro?.disconnect?.();
5116                                this._ro = new ResizeObserver(() => setH());
5117                                this._ro.observe(el);
5118                            } else {
5119                                window.addEventListener('resize', setH, {
5120                                    passive: true
5121                                });
5122                            }
5123                        },
5124                    });
5125                }
5126
5127                const H = Alpine.store('header');
5128                H.setOverlay(PAGE_CONF.overlay);
5129                H.measure();
5130
5131                const y0 = window.scrollY || 0;
5132                H._lastY = y0;
5133                H.topbar._anchorShow = y0;
5134                H.topbar._anchorHide = y0;
5135
5136                H._applyScrolled(y0);
5137                window.addEventListener('scroll', () => H.onScroll(), {
5138                    passive: true
5139                });
5140                window.addEventListener('load', () => H.measure());
5141            }
5142
5143            if (window.Alpine) setupStore();
5144            else document.addEventListener('alpine:init', setupStore);
5145        })();
5146    </script>
5146
5147    <div x-data="cookieConsent()"
5148     x-init="init()"
5149     x-show="open"
5150     class="fixed z-[1000] bottom-4 inset-x-0 px-4 sm:px-6">
5151    <div
5152         class="mx-auto max-w-4xl rounded-xl border border-gray-200
5153              bg-gradient-to-r from-gray-100 via-gray-50 to-blue-50
5154              shadow-sm p-4 sm:p-5 flex flex-col sm:flex-row gap-3 sm:items-center">
5155        <div class="text-sm text-gray-800 leading-snug">
5156            <strong>Kolačići i analitika</strong>
5157            <div class="text-gray-700">
5158                Koristimo analitičke kolačiće da bismo razumeli posećenost i poboljšali sajt. Analitika će biti omogućena tek nakon Vaše saglasnosti.
5159                                            </div>
5160        </div>
5161        <div class="sm:ms-auto flex items-center gap-2">
5162            <button type="button"
5163            class="ui-btn relative inline-flex items-center justify-center select-none
5164             transition will-change-transform duration-150
5165             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
5166             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-white bg-brand-500 hover:bg-black hover:text-white min-h-10 text-xs px-3 py-1.5 gap-2   u-shadow" style="--slab: rgba(202,33,43,.9);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" @click="acceptAll()"
5167                        data-variant="primary"
5168            data-scheme="light">
5169                <span class="ui-btn__label">Prihvatam analitiku</span>
5170            </button>
5171            <button type="button"
5172            class="ui-btn relative inline-flex items-center justify-center select-none
5173             transition will-change-transform duration-150
5174             focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-2
5175             disabled:opacity-60 disabled:cursor-not-allowed group focus-visible:outline-brand-500 text-black bg-transparent border-[2px] border-brand-600 min-h-10 text-xs px-3 py-1.5 gap-2   u-shadow" style="--slab: rgba(202,33,43,.75);--dropshadow: rgba(202,33,43,0);--shadow-hover: var(--shadow-brand)" @click="deny()"
5176                        data-variant="outline"
5177            data-scheme="light">
5178                <span class="ui-btn__label">Samo neophodno</span>
5179            </button>
5180        </div>
5181    </div>
5182</div>
5183
5184<script>
5185    function cookieConsent() {
5186        return {
5187            open: false,
5188            key: 'ns_cookie_consent_v1',
5189
5190            init() {
5191                try {
5192                    const v = localStorage.getItem(this.key);
5193                    if (v === 'accepted' || v === 'denied') return;
5194                } catch (_) {}
5195                this.open = true;
5196            },
5197
5198            acceptAll() {
5199                this.open = false;
5200                try {
5201                    localStorage.setItem(this.key, 'accepted');
5202                } catch (_) {}
5203
5204                // Push consent update (works even if gtag not yet loaded)
5205                window.dataLayer = window.dataLayer || [];
5206                window.dataLayer.push({
5207                    event: "consent_update",
5208                    'analytics_storage': 'granted',
5209                    'ad_storage': 'denied',
5210                    'ad_user_data': 'denied',
5211                    'ad_personalization': 'denied'
5212                });
5213                console.log("Consent updated: granted (analytics_storage)");
5214
5215
5216                // If gtag is defined, explicitly update it too
5217                if (typeof gtag === "function") {
5218                    gtag('consent', 'update', {
5219                        'analytics_storage': 'granted'
5220                    });
5221                    console.log("gtag consent update fired: granted");
5222
5223                }
5224            },
5225
5226            deny() {
5227                this.open = false;
5228                try {
5229                    localStorage.setItem(this.key, 'denied');
5230                } catch (_) {}
5231
5232                window.dataLayer = window.dataLayer || [];
5233                window.dataLayer.push({
5234                    event: "consent_update",
5235                    'analytics_storage': 'denied',
5236                    'ad_storage': 'denied',
5237                    'ad_user_data': 'denied',
5238                    'ad_personalization': 'denied'
5239                });
5240                console.log("Consent updated: denied (all)");
5241
5242
5243                if (typeof gtag === "function") {
5244                    gtag('consent', 'update', {
5245                        'analytics_storage': 'denied',
5246                        'ad_storage': 'denied',
5247                        'ad_user_data': 'denied',
5248                        'ad_personalization': 'denied'
5249                    });
5250                    console.log("gtag consent update fired: denied");
5251
5252                }
5253            }
5254        }
5255    }
5256</script>
5256
5257
5258        
5259    
5259<script>
5260        window.kalMini = window.kalMini || function() {
5261            return {
5262                category: '',
5263                season: '',
5264                status: '',
5265                opts: JSON.parse('{\u0022category\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Sve\u0022},{\u0022value\u0022:\u0022book\u0022,\u0022label\u0022:\u0022Knjiga\u0022},{\u0022value\u0022:\u0022agriculture\u0022,\u0022label\u0022:\u0022Poljoprivreda\u0022},{\u0022value\u0022:\u0022tourism\u0022,\u0022label\u0022:\u0022Turizam\u0022}],\u0022season\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Sve\u0022},{\u0022value\u0022:\u0022winter\u0022,\u0022label\u0022:\u0022Zima\u0022,\u0022icon\u0022:\u0022fa-solid fa-snowflake\u0022},{\u0022value\u0022:\u0022spring\u0022,\u0022label\u0022:\u0022Prole\\u0107e\u0022,\u0022icon\u0022:\u0022fa-solid fa-seedling\u0022},{\u0022value\u0022:\u0022summer\u0022,\u0022label\u0022:\u0022Leto\u0022,\u0022icon\u0022:\u0022fa-solid fa-sun\u0022},{\u0022value\u0022:\u0022autumn\u0022,\u0022label\u0022:\u0022Jesen\u0022,\u0022icon\u0022:\u0022fa-solid fa-leaf\u0022}],\u0022status\u0022:[{\u0022value\u0022:\u0022\u0022,\u0022label\u0022:\u0022Svi\u0022},{\u0022value\u0022:\u0022upcoming\u0022,\u0022label\u0022:\u0022Uskoro\u0022},{\u0022value\u0022:\u0022live\u0022,\u0022label\u0022:\u0022U toku\u0022},{\u0022value\u0022:\u0022past\u0022,\u0022label\u0022:\u0022Zavr\\u0161eni\u0022}]}'),
5266                label(key) {
5267                    const list = this.opts[key] || [];
5268                    const val = (this[key] ?? '');
5269                    const found = list.find(o => o.value === (val ?? ''));
5270                    return found ? found.label : (list[0]?.label || '');
5271                },
5272                selectedOption(key) {
5273                    const list = this.opts[key] || [];
5274                    const val = (this[key] ?? '');
5275                    return list.find(o => o.value === (val ?? '')) || list[0] || null;
5276                },
5277            }
5278        }
5279    </script>
5279
5280    
5280<script>
5281        function contactForm() {
5282            return {
5283                loading: false,
5284                sent: false,
5285                error: '',
5286                form: {
5287                    name: '',
5288                    email: '',
5289                    message: ''
5290                },
5291
5292                async submit() {
5293                    if (this.loading) return;
5294                    this.loading = true;
5295                    this.error = '';
5296
5297                    try {
5298                        const res = await fetch('https://sajam.net/sr/contact-submission', {
5299                            method: 'POST',
5300                            headers: {
5301                                'Content-Type': 'application/json',
5302                                'Accept': 'application/json',
5303                                'X-Requested-With': 'XMLHttpRequest',
5304                                'X-CSRF-TOKEN': 'diVUNBlLFH81Ti6YIimuclgLoiCenkYkD0trEjjr',
5305                            },
5306                            credentials: 'same-origin',
5307                            body: JSON.stringify(this.form),
5308                        });
5309
5310                        if (res.ok) {
5311                            this.sent = true;
5312                            window.toast({
5313                                type: 'success',
5314                                title: 'Poslato',
5315                                text: 'Vaša poruka je uspešno poslata.',
5316                                timeout: 4000,
5317                            });
5318                        } else if (res.status === 422) {
5319                            const data = await res.json();
5320                            this.error = Object.values(data.errors || {})[0]?.[0] ?? 'Greška u formularu.';
5321                        } else {
5322                            this.error = 'Došlo je do greške. Pokušajte ponovo.';
5323                        }
5324                    } catch {
5325                        this.error = 'Mrežna greška. Proverite vezu i pokušajte ponovo.';
5326                    } finally {
5327                        this.loading = false;
5328                    }
5329                },
5330
5331                reset() {
5332                    this.form = {
5333                        name: '',
5334                        email: '',
5335                        message: ''
5336                    };
5337                    this.sent = false;
5338                    this.error = '';
5339                },
5340            }
5341        }
5342    </script>
5342
5343            
5343<script>
5344                /**
5345                 * Pause helper for the bell badge.
5346                 * Stores a snapshot in localStorage so the dot hides for ~24h
5347                 * unless server reports a newer version / newer announcement.
5348                 */
5349                const AnnPause = {
5350                    key(locale) {
5351                        return `ann.pause.${locale}`;
5352                    },
5353                    get(locale) {
5354                        try {
5355                            return JSON.parse(localStorage.getItem(this.key(locale)) || 'null');
5356                        } catch {
5357                            return null;
5358                        }
5359                    },
5360                    set(locale, data) {
5361                        localStorage.setItem(this.key(locale), JSON.stringify(data));
5362                    },
5363                    clear(locale) {
5364                        localStorage.removeItem(this.key(locale));
5365                    },
5366                    isActive(locale, meta, ms = 24 * 60 * 60 * 1000) {
5367                        const pause = this.get(locale);
5368                        if (!pause) return false;
5369
5370                        const at = Date.parse(pause.at || '');
5371                        if (!at || Date.now() - at > ms) return false;
5372
5373                        // server signalled “new stuff”
5374                        if (meta?.pause_version && pause.version !== meta.pause_version) return false;
5375                        if (meta?.latest_published !== pause.latest_published) return false;
5376                        if (meta?.latest_id !== pause.latest_id) return false;
5377
5378                        return true;
5379                    }
5380                };
5381
5382                /**
5383                 * Navbar bell component
5384                 */
5385                window.annBell = function(locale = 'sr', feedUrl) {
5386                    const READ_KEY = `ann.read.${locale}`;
5387                    const HIDDEN_KEY = `ann.hidden.${locale}`;
5388
5389                    // --- storage helpers
5390                    const loadArr = (k) => {
5391                        try {
5392                            const v = JSON.parse(localStorage.getItem(k) || '[]');
5393                            return Array.isArray(v) ? v : [];
5394                        } catch {
5395                            return [];
5396                        }
5397                    };
5398                    const saveArr = (k, v) => {
5399                        try {
5400                            localStorage.setItem(k, JSON.stringify(v));
5401                        } catch {}
5402                    };
5403
5404                    // Bucketed shortlist (max 6; up to 3 pinned first)
5405                    const shortlistAnnouncements = (items, readIds) => {
5406                        const MAX_TOTAL = 6;
5407                        const MAX_PINNED = 3;
5408                        const readSet = new Set(readIds.map(String));
5409
5410                        const enriched = items.map(it => ({
5411                            ...it,
5412                            read: readSet.has(String(it.id)),
5413                            _ts: it.published ? new Date(it.published).getTime() : 0,
5414                            pinned: !!it.pinned,
5415                        }));
5416
5417                        const byNewest = (a, b) => b._ts - a._ts;
5418
5419                        const unreadPinned = enriched.filter(i => !i.read && i.pinned).sort(byNewest);
5420                        const unreadNormal = enriched.filter(i => !i.read && !i.pinned).sort(byNewest);
5421                        const readPinned = enriched.filter(i => i.read && i.pinned).sort(byNewest);
5422                        const readNormal = enriched.filter(i => i.read && !i.pinned).sort(byNewest);
5423
5424                        const list = [];
5425                        list.push(...unreadPinned.slice(0, MAX_PINNED));
5426                        if (list.length < MAX_TOTAL) list.push(...unreadNormal.slice(0, MAX_TOTAL - list.length));
5427                        if (list.length < MAX_TOTAL) list.push(...readPinned.slice(0, MAX_TOTAL - list.length));
5428                        if (list.length < MAX_TOTAL) list.push(...readNormal.slice(0, MAX_TOTAL - list.length));
5429
5430                        const unreadCount = unreadPinned.length + unreadNormal.length;
5431                        return {
5432                            list,
5433                            unreadCount
5434                        };
5435                    };
5436
5437                    return {
5438                        // reactive
5439                        open: false,
5440                        items: [],
5441                        read: loadArr(READ_KEY),
5442                        hidden: loadArr(HIDDEN_KEY),
5443
5444                        unseen: 0,
5445                        hasPinnedUnseen: false,
5446
5447                        // server meta
5448                        meta: {
5449                            latest_published: null,
5450                            latest_id: null,
5451                            pause_version: null
5452                        },
5453
5454                        // ui flags
5455                        showBadge: false,
5456                        specialBadge: false, // gold pulse when there is unread pinned
5457
5458                        async init() {
5459                            try {
5460                                const res = await fetch(feedUrl, {
5461                                    headers: {
5462                                        'Accept': 'application/json'
5463                                    }
5464                                });
5465                                const json = await res.json();
5466
5467                                this.meta.latest_published = json?.meta?.latest_published || null;
5468                                this.meta.latest_id = json?.meta?.latest_id || null;
5469                                this.meta.pause_version = json?.meta?.pause_version || null;
5470
5471                                // Filter out client-hidden IDs
5472                                const visible = (json.items || []).filter(i => !this.hidden.includes(String(i.id)));
5473
5474                                // Build shortlist and counters
5475                                const {
5476                                    list,
5477                                    unreadCount
5478                                } = shortlistAnnouncements(visible, this.read);
5479                                this.items = list;
5480                                this.unseen = unreadCount;
5481
5482                                // compute pinned state + badge visibility
5483                                this.hasPinnedUnseen = this.items.some(i => i.pinned && !this.read.includes(String(i.id)));
5484                                this.updateBadge();
5485                            } catch (e) {
5486                                console.error('Announcements feed error', e);
5487                            }
5488                        },
5489
5490                        updateBadge() {
5491                            // unread pinned always shows (gold)
5492                            if (this.hasPinnedUnseen) {
5493                                this.showBadge = true;
5494                                this.specialBadge = true;
5495                                return;
5496                            }
5497
5498                            if (this.unseen > 0) {
5499                                // hide if paused (user opened the tray recently and nothing new landed)
5500                                this.showBadge = !AnnPause.isActive(locale, this.meta);
5501                                this.specialBadge = false;
5502                            } else {
5503                                this.showBadge = false;
5504                                this.specialBadge = false;
5505                            }
5506                        },
5507
5508                        toggle() {
5509                            this.open = !this.open;
5510                            if (this.open) {
5511                                // start/refresh pause (don’t mark read)
5512                                AnnPause.set(locale, {
5513                                    at: new Date().toISOString(),
5514                                    latest_published: this.meta.latest_published,
5515                                    latest_id: this.meta.latest_id,
5516                                    version: this.meta.pause_version,
5517                                });
5518                                this.updateBadge();
5519                            }
5520                        },
5521
5522                        isRead(id) {
5523                            return this.read.includes(String(id));
5524                        },
5525
5526                        markRead(id) {
5527                            const sid = String(id);
5528                            if (!this.read.includes(sid)) {
5529                                this.read = [...this.read, sid];
5530                                saveArr(READ_KEY, this.read);
5531
5532                                // reflect inside list
5533                                const item = this.items.find(i => String(i.id) === sid);
5534                                if (item) item.read = true;
5535
5536                                if (this.unseen > 0) this.unseen -= 1;
5537
5538                                // recompute pinned + badge
5539                                this.hasPinnedUnseen = this.items.some(i => i.pinned && !this.read.includes(String(i.id)));
5540                                this.updateBadge();
5541                            }
5542                        },
5543
5544                        // Optional utility if you decide to add a “Mark all as read” button
5545                        markAllRead() {
5546                            for (const it of this.items) this.markRead(it.id);
5547                        },
5548
5549                        go(itm) {
5550                            this.markRead(itm.id);
5551                            window.location.href = itm.href || 'https://sajam.net/sr/obavestenja';
5552                        },
5553                    };
5554                };
5555            </script>
5555
5556        </body>
5557
5558</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.