PageSourceSearch

https://katolikusradio.hu/musorkategoriak

html katolikusradio.hu collected 2026-09-24 09:31:17 UTC 77,607 bytes, 1,155 lines download raw bytes

1  <html lang="hu">
2
3  <head>
4    <link rel="stylesheet"
5      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
8    <title>Tematikus műsorcsoportok | Magyar Katolikus Rádió</title>
9    <link rel="icon" type="image/png" href="/img/favicon.png">
10
11    
11<script src="https://cdn.tailwindcss.com"></script>
11
12    
12<script>
13      window.FontAwesomeConfig = {
14        autoReplaceSvg: 'nest'
15      };
16    </script>
16
17    <style>
18      /* 1. Alpine.js ugrálásgátló (ez kötelező az x-cloak működéséhez!) */
19      [x-cloak] {
20        display: none !important;
21      }
22
23      /* 2. Oldal elrejtése az indulás pillanatában */
24      html {
25        visibility: hidden;
26        opacity: 0;
27      }
28
29      /* 3. Finom áttűnés, amikor minden betöltött */
30      html.ready {
31        visibility: visible;
32        opacity: 1;
33        transition: opacity 0.3s ease-in;
34      }
35    </style>
36
37    
37<script>
38      // Amikor a böngésző/Turbo végzett az aktuális oldal DOM-cseréjével,
39      // megjelenítjük az oldalt. iOS Safari alatt a DOMContentLoaded nem fut le
40      // Turbo navigációnál vagy bfcache visszaállításnál, ezért minden releváns
41      // lifecycle eseményre idempotensen rátesszük a ready osztályt.
42      (function() {
43        function markDocumentReady() {
44          document.documentElement.classList.add('ready');
45        }
46
47        if (document.readyState === 'loading') {
48          document.addEventListener('DOMContentLoaded', markDocumentReady, { once: true });
49        } else {
50          markDocumentReady();
51        }
52        window.addEventListener('pageshow', markDocumentReady);
53        document.addEventListener('turbo:load', markDocumentReady);
54        document.addEventListener('turbo:render', markDocumentReady);
55      })();
56    </script>
56
57    
57<script
58      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
59      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
59
60    <link rel="preconnect" href="https://fonts.googleapis.com">
61    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
62    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
63    
63<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/dist/turbo.es2017-esm.js"></script>
63
64    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
vendor: 68 bytes, lines 64-66
64
65
66    <script src="https://www.google.com/recaptcha/api.js?render=
666Lcu2I8sAAAAADr7sn9X5zMdJMIEcGYmRQVn3TTn
vendor: 19 bytes, lines 66-68
66"></script>
67
68    
68<link
69      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&amp;display=swap"
70      rel="stylesheet">
71    
71<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
71
72    <style>
73      body {
74        font-family: 'DM Sans', sans-serif;
75      }
76
77      .page-content-gutter-compact {
78        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
79        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
80      }
81
82      .page-content-gutter-regular {
83        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
84        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
85      }
86
87      .page-content-gutter-roomy {
88        padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
89        padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
90      }
91
92      @media (min-width: 768px) {
93        .page-content-gutter-regular {
94          padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important;
95          padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important;
96        }
97      }
98
99      .input-icon-shell {
100        position: relative;
101      }
102
103      .input-inline-safe {
104        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
105        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
106      }
107
108      .input-inline-safe-relaxed {
109        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
110        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
111      }
112
113      @media (min-width: 640px) {
114        .input-inline-safe-relaxed {
115          padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
116          padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
117        }
118      }
119
120      .input-inline-safe-leading {
121        padding-left: max(3rem, calc(env(safe-area-inset-left, 0px) + 3rem)) !important;
122        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
123      }
124
125      .input-inline-safe-leading-trailing {
126        padding-left: max(3rem, calc(env(safe-area-inset-left, 0px) + 3rem)) !important;
127        padding-right: max(3rem, calc(env(safe-area-inset-right, 0px) + 3rem)) !important;
128      }
129
130      .input-icon-leading {
131        position: absolute !important;
132        top: 0 !important;
133        bottom: 0 !important;
134        display: flex !important;
135        align-items: center !important;
136        left: env(safe-area-inset-left, 0px) !important;
137        padding-left: 1rem !important;
138      }
139
140      .input-icon-trailing {
141        position: absolute !important;
142        top: 0 !important;
143        bottom: 0 !important;
144        display: flex !important;
145        align-items: center !important;
146        right: env(safe-area-inset-right, 0px) !important;
147        padding-right: 1rem !important;
148      }
149    </style>
150    
150<script>
151      tailwind.config = {
152        theme: {
153          extend: {
154            colors: {
155              'brand-green': '#98ca3c',
156              'brand-grey': '#F5F5F5',
157              'brand-dark': '#1A1A1A'
158            },
159            fontFamily: {
160              'din': ['DM Sans', 'sans-serif']
161            }
162          }
163        }
164      }
165    </script>
165
166
167
168    <style>
169      [x-cloak] {
170        display: none !important;
171      }
172    </style>
173  </head>
174
175  <body class="bg-white text-brand-dark font-din">
176
177    
178<header id="header"
179    x-data="{ 
180        mobileMenuOpen: false, 
181        searchOpen: false, 
182        scrolled: false,
183        handleScroll() {
184            const y = window.pageYOffset;
185            if (!this.scrolled && y > 40) {
186                this.scrolled = true;
187            } else if (this.scrolled && y < 10) {
188                this.scrolled = false;
189            }
190        }
191    }"
192    @scroll.window="handleScroll()"
193    class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm relative transition-all duration-300">
194
195    <div class="max-w-[1440px] mx-auto px-4 md:px-6 lg:px-8 flex items-center justify-between transition-all duration-300"
196        :class="scrolled ? 'py-2' : 'py-4'">
197
198        <div class="flex items-center shrink-0 mr-4">
199            <a href="/" class="flex items-center">
200                <div class="relative shrink-0 transition-all duration-300 z-50 rounded-full bg-white"
201                    :class="scrolled
202                        ? 'w-10 h-10 md:w-[50px] md:h-[50px] lg:w-[60px] lg:h-[60px] p-0 shadow-none'
203                        : 'w-14 h-14 -mb-4 md:w-[90px] md:h-[90px] md:-mb-8 lg:w-[150px] lg:h-[150px] lg:-mb-[75px] lg:p-1.5 lg:shadow-xl'">
204                    <img src="/img/logo.png"
205                        alt="Magyar Katolikus Rádió Logo"
206                        class="w-full h-full object-cover rounded-full">
207                </div>
208                <div class="ml-3 hidden sm:block relative z-10 transition-all duration-300"
209                    :class="scrolled ? '' : 'lg:-mt-2'">
210                    <div class="font-bold text-brand-dark leading-tight transition-all duration-300"
211                        :class="scrolled ? 'text-sm md:text-base lg:text-lg' : 'text-base md:text-lg lg:text-xl'">Magyar Katolikus Rádió</div>
212                    <div class="text-gray-600 transition-all duration-300"
213                        :class="scrolled ? 'text-[9px] md:text-[10px] lg:text-xs' : 'text-[10px] md:text-xs lg:text-sm'">Örömhír mindenkinek!</div>
214                </div>
215            </a>
216        </div>
217
218        <nav class="hidden lg:flex items-center space-x-4 xl:space-x-8 h-full relative z-10">
219            <a href="/" class="text-sm xl:text-base font-bold transition-colors py-4 text-brand-dark hover:text-brand-green">Kezdőlap</a>
220
221                        <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false">
222                <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green">
223                    <span>Műsorok</span>
224                    <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
225                        <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i>
226                    </span>
227                </button>
228                <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak>
229                    <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden">
230                        <a href="/musoraink" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Műsorújság és archívum</a>
231                        <a href="/musorabc" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Műsoraink ABC-sorrendben</a>
232                        <a href="/musorkategoriak" class="block px-4 py-2.5 text-sm font-bold text-brand-green bg-brand-green/5">Műsoraink kategóriák szerint</a>
233                        <a href="/musorcsoportok" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Tematikus műsorcsoportok</a>
234                        <a href="/podcastok" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Podcastok</a>
235                    </div>
236                </div>
237            </div>
238
239                        <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false">
240                <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green">
241                    <span>Lelkiség</span>
242                    <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
243                        <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i>
244                    </span>
245                </button>
246                <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak>
247                    <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden">
248                        <a href="/igenaptar" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Igenaptár</a>
249                        <a href="/szentek" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Szentek Katalógusa</a>
250                    </div>
251                </div>
252            </div>
253
254                        <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false">
255                <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green">
256                    <span>Tartalmak</span>
257                    <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
258                        <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i>
259                    </span>
260                </button>
261
262                <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak>
263                    <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden">
264                        <a href="/hireink" class="block px-4 py-2.5 text-sm border-b border-gray-50 font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Hírek</a>
265                        <a href="/videoink" class="block px-4 py-2.5 text-sm border-b border-gray-50 font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Videók</a>
266
267                                                                                                                    <a href="/oldal/letoltheto-anyagok" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">
268                                    Letölthető anyagok                                </a>
269                                                                                            <a href="/oldal/studioberles" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">
270                                    Stúdióbérlés                                </a>
271                                                                        </div>
272                </div>
273            </div>
274
275                        <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false">
276                <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green">
277                    <span>Rádió</span>
278                    <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
279                        <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i>
280                    </span>
281                </button>
282
283                <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] right-0 lg:left-0 lg:right-auto w-48 pt-1 z-50" style="display: none;" x-cloak>
284                    <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden">
285                        <a href="/rolunk" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Rólunk</a>
286                        <a href="/bemutatkozunk" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Kapcsolat</a>
287                        <a href="/rolunk#frequencies" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Vételkörzetek</a>
288                        <a href="/munkatarsaink" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Munkatársaink</a>
289                        <a href="/tamogatas" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Támogatás</a>
290                    </div>
291                </div>
292            </div>
293        </nav>
294
295        <div class="flex items-center space-x-2 xl:space-x-3 shrink-0 ml-4 z-10">
296            <button type="button" @click="searchOpen = true; $nextTick(() => $refs.searchInput.focus())" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:text-brand-green transition-colors rounded-full hover:bg-gray-100 relative z-50">
297                <i class="fa-solid fa-search text-lg pointer-events-none"></i>
298            </button>
299
300            <a href="/#newsletter-section" class="hidden md:flex">
301                <button type="button" class="flex items-center justify-center bg-brand-green hover:bg-[#85c000] text-white font-medium rounded-lg transition-colors md:w-10 md:h-10 xl:w-auto xl:px-4 xl:py-2.5 shadow-sm">
302                    <i class="fa-solid fa-envelope pointer-events-none"></i>
303                    <span class="hidden xl:inline ml-2 text-sm pointer-events-none">Hírlevél</span>
304                </button>
305            </a>
306
307            <a href="/app" rel="noopener noreferrer" class="hidden md:flex items-center justify-center bg-brand-dark hover:bg-gray-800 text-white font-medium rounded-lg transition-colors md:w-10 md:h-10 xl:w-auto xl:px-4 xl:py-2.5 shadow-sm">
308                <i class="fa-solid fa-mobile-screen pointer-events-none"></i>
309                <span class="hidden xl:inline ml-2 text-sm pointer-events-none">App</span>
310            </a>
311
312            <a href="https://bolt.katolikusradio.hu/" target="_blank" rel="noopener noreferrer" class="hidden md:flex items-center justify-center bg-brand-dark hover:bg-gray-800 text-white font-medium rounded-lg transition-colors md:w-10 md:h-10 xl:w-auto xl:px-4 xl:py-2.5 shadow-sm">
313                <i class="fa-solid fa-shopping-cart pointer-events-none"></i>
314                <span class="hidden xl:inline ml-2 text-sm pointer-events-none">Bolt</span>
315            </a>
316
317            <button type="button" @click="mobileMenuOpen = !mobileMenuOpen"
318                class="block lg:hidden w-10 h-10 flex items-center justify-center text-brand-dark focus:outline-none rounded-full hover:bg-gray-100 ml-2 relative z-50 cursor-pointer">
319                <svg x-show="!mobileMenuOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
320                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
321                </svg>
322                <svg x-show="mobileMenuOpen" style="display: none;" x-cloak xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
323                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
324                </svg>
325            </button>
326        </div>
327    </div>
328
329    <div x-show="mobileMenuOpen"
330        x-transition:enter="transition ease-out duration-200"
331        x-transition:enter-start="opacity-0 -translate-y-4"
332        x-transition:enter-end="opacity-100 translate-y-0"
333        x-transition:leave="transition ease-in duration-150"
334        x-transition:leave-start="opacity-100 translate-y-0"
335        x-transition:leave-end="opacity-0 -translate-y-4"
336        class="block lg:hidden bg-white border-t border-gray-100 absolute w-full shadow-2xl z-40 left-0 top-full"
337        style="display: none;" x-cloak>
338
339        <nav class="flex flex-col p-4 space-y-1 max-h-[85vh] overflow-y-auto relative z-40">
340            <a href="/" class="text-lg py-3 border-b border-gray-50 px-2 font-bold text-brand-dark hover:text-brand-green">Kezdőlap</a>
341
342            <div class="py-2 border-b border-gray-50" x-data="{ open: false }">
343                <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green">
344                    <span class="pointer-events-none">Műsorok</span>
345                    <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
346                        <i class="fa-solid fa-chevron-down text-sm"></i>
347                    </span>
348                </button>
349                <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;">
350                    <a href="/musorabc" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Műsoraink ABC-sorrendben</a>
351                    <a href="/musorkategoriak" class="block text-base py-1 font-bold text-brand-green">Műsoraink (Kategóriák szerint)</a>
352                    <a href="/musoraink" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Műsorújság és archívum</a>
353                    <a href="/musorcsoportok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Tematikus műsorcsoportok</a>
354                    <a href="/podcastok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Podcastok</a>
355                </div>
356            </div>
357
358            <div class="py-2 border-b border-gray-50" x-data="{ open: false }">
359                <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green">
360                    <span class="pointer-events-none">Lelkiség</span>
361                    <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
362                        <i class="fa-solid fa-chevron-down text-sm"></i>
363                    </span>
364                </button>
365                <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;">
366                    <a href="/igenaptar" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Igenaptár</a>
367                    <a href="/szentek" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Szentek Katalógusa</a>
368                </div>
369            </div>
370
371            <div class="py-2 border-b border-gray-50" x-data="{ open: false }">
372                <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green">
373                    <span class="pointer-events-none">Tartalmak</span>
374                    <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
375                        <i class="fa-solid fa-chevron-down text-sm"></i>
376                    </span>
377                </button>
378                <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;">
379                    <a href="/hireink" class="block text-base py-1 mb-1 font-medium text-gray-600 hover:text-brand-green">Hírek</a>
380                                                                                                    <a href="/oldal/letoltheto-anyagok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">
381                                Letölthető anyagok                            </a>
382                                                                                <a href="/oldal/studioberles" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">
383                                Stúdióbérlés                            </a>
384                                                            </div>
385            </div>
386
387            <div class="py-2 border-b border-gray-50" x-data="{ open: false }">
388                <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green">
389                    <span class="pointer-events-none">Rádió</span>
390                    <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
391                        <i class="fa-solid fa-chevron-down text-sm"></i>
392                    </span>
393                </button>
394                <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;">
395                    <a href="/rolunk" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Rólunk</a>
396                    <a href="/bemutatkozunk" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Kapcsolat</a>
397                    <a href="/munkatarsaink" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Munkatársaink</a>
398                    <a href="/tamogatas" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Támogatás</a>
399                </div>
400            </div>
401
402            <div class="flex flex-col gap-3 pt-6 md:hidden px-2 pb-4">
403                <a href="/#newsletter-section" class="flex items-center justify-center space-x-2 bg-brand-green text-white font-bold py-3 rounded-lg w-full shadow-sm">
404                    <i class="fa-solid fa-envelope"></i><span>Hírlevél</span>
405                </a>
406                <a href="/app" rel="noopener noreferrer" class="flex items-center justify-center space-x-2 bg-brand-dark text-white font-bold py-3 rounded-lg w-full shadow-sm">
407                    <i class="fa-solid fa-mobile-screen"></i><span>App Letöltése</span>
408                </a>
409                <a href="https://bolt.katolikusradio.hu/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center space-x-2 bg-brand-dark text-white font-bold py-3 rounded-lg w-full shadow-sm">
410                    <i class="fa-solid fa-shopping-cart"></i><span>Webshop</span>
411                </a>
412            </div>
413        </nav>
414    </div>
415
416    <div x-show="searchOpen"
417        style="display: none;"
418        x-cloak
419        @keydown.window.escape="searchOpen = false"
420        class="fixed inset-0 z-[100] flex items-start justify-center pt-16 md:pt-24 page-content-gutter-compact bg-gray-900/60 backdrop-blur-sm">
421
422        <div class="absolute inset-0 cursor-pointer" @click="searchOpen = false"></div>
423
424        <div x-show="searchOpen"
425            x-transition:enter="transition ease-out duration-300 transform"
426            x-transition:enter-start="opacity-0 -translate-y-12 scale-95"
427            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
428            x-transition:leave="transition ease-in duration-200 transform"
429            x-transition:leave-start="opacity-100 translate-y-0 scale-100"
430            x-transition:leave-end="opacity-0 -translate-y-12 scale-95"
431            class="relative w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden ring-4 ring-white/20"
432            @click.stop>
433
434            <form action="/kereses" method="GET" class="flex items-center relative w-full">
435                <div class="pl-6 text-brand-green hidden sm:block">
436                    <i class="fa-solid fa-search text-2xl"></i>
437                </div>
438
439                <input type="text"
440                    name="kulcsszo"
441                    x-ref="searchInput"
442                    placeholder="Mit keres? (pl. Húsvét...)"
443                    class="w-full py-5 sm:py-6 px-4 sm:px-6 text-lg sm:text-xl md:text-2xl text-brand-dark bg-transparent border-none focus:ring-0 outline-none placeholder-gray-400 input-inline-safe-relaxed"
444                    autocomplete="off"
445                    required>
446
447                <button type="submit" class="bg-brand-green hover:bg-[#85c000] text-white font-bold py-2.5 px-4 sm:py-3 sm:px-6 rounded-xl transition-colors shrink-0 mr-2 sm:mr-4 shadow-sm text-sm sm:text-base flex items-center gap-2">
448                    <span class="hidden sm:inline">Keresés</span>
449                    <i class="fa-solid fa-arrow-right sm:hidden"></i>
450                </button>
451
452                <button type="button" @click="searchOpen = false" class="pr-4 sm:pr-6 pl-2 sm:pl-4 text-gray-400 hover:text-red-500 transition-colors focus:outline-none border-l border-gray-100 h-10 sm:h-12 flex items-center justify-center shrink-0">
453                    <i class="fa-solid fa-times text-xl sm:text-2xl"></i>
454                </button>
455            </form>
456        </div>
457    </div>
458</header>
459
460
461    
462<div class="bg-white min-h-screen py-12 lg:py-20" x-data='tematikusKereso([{"szoveg":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok","musorok":[{"id":791,"cim":"Egyh\u00e1zi lapszemle","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":16,"cim":"H\u00edrek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":43,"cim":"H\u00edrt\u00fck\u00f6r","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":777,"cim":"Kereng\u0151","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/0EN7v7QCgrb6qJB2askwYi","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/kereng%C5%91-k%C3%B6z%C3%A9leti-besz%C3%A9lget%C3%A9sek\/id1563014434","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":373,"cim":"Kereszt\u00e9ny K\u00f6z\u00e9leti Akad\u00e9mia","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":786,"cim":"K\u00f6rk\u00e9p","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":143,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":658,"cim":"Nemzetk\u00f6zi lapszemle","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":378,"cim":"Pillanatfelv\u00e9tel","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":239,"cim":"Reggeli riport","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":830,"cim":"Szentsz\u00e9ki percek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"}]},{"szoveg":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok","musorok":[{"id":739,"cim":"A l\u00e9lek titkai","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":731,"cim":"A m\u00e9diavil\u00e1g erk\u00f6lcs\u00e9r\u0151l","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":829,"cim":"Kamarai percek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":688,"cim":"K\u00e9p a t\u00fck\u00f6rben","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1LweRsBXihJxjDFq6BYaPG","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/k\u00e9p-a-t\u00fck\u00f6rben\/id1618726091","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":725,"cim":"Kereng\u0151","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/0EN7v7QCgrb6qJB2askwYi","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/kereng%C5%91-k%C3%B6z%C3%A9leti-besz%C3%A9lget%C3%A9sek\/id1563014434","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":736,"cim":"Magyar t\u00e9ka","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":805,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":803,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":734,"cim":"Pesti mes\u00e9k","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":193,"cim":"Templom \u2013 t\u00e9r \u2013 k\u00e9p","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":491,"cim":"Vil\u00e1g\u00fajs\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"}]},{"szoveg":"egy\u00e9b kultur\u00e1lis m\u0171sorok","musorok":[{"id":823,"cim":"A katedra k\u00e9t oldala","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1YtGZJALDjENR2xcpUogsI","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/a-katedra-k\u00e9t-oldala\/id1880663941","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":459,"cim":"Akvarell","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":727,"cim":"\u00c9rt\u00e9kment\u0151","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":810,"cim":"M\u0171v\u00e9szbej\u00e1r\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"}
462,{"id":809,"cim":"Olvas\u00f3pr\u00f3ba","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/71ZYUNW05CvLeBrhBzfOj7","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/olvas\u00f3pr\u00f3ba\/id1715657487","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":118,"cim":"P\u00e1holy \u00e9s p\u00f3dium","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"}]},{"szoveg":"egy\u00e9b m\u0171sorok","musorok":[{"id":684,"cim":"A f\u00f6ld s\u00f3ja","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":40,"cim":"Harangsz\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":753,"cim":"Hitvall\u00e1s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":804,"cim":"K\u00e1rp\u00e1ti apr\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":822,"cim":"Kult\u00farpal\u00e1nt\u00e1k","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1TRBhmhF6WdABvq1w2aDep","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/kult\u00farpal\u00e1nt\u00e1k\/id1878339550","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":798,"cim":"Mad\u00e1rv\u00e1rta","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/6GwZXmmx2xjfQnaabsvpPo","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/mad%C3%A1rv%C3%A1rta\/id1689030617","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":711,"cim":"Megk\u00e9rdezt\u00fck ...","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":756,"cim":"Mester-fog\u00e1s","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1wA0sAbeQBVifLBmnME6lS","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/mester-fog%C3%A1s\/id1556442817","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":754,"cim":"M\u00falt \u00e9s jelen","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":793,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":827,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":782,"cim":"NEK riport","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":744,"cim":"Teljess\u00e9g\u00fcnk fel\u00e9","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":465,"cim":"T\u00e9ny-k\u00e9rd\u00e9s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":800,"cim":"Trezor","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":750,"cim":"T\u00fck\u00f6rk\u00e9p","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":517,"cim":"Vend\u00e9g-oldal","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":746,"cim":"Vil\u00e1g-egyh\u00e1z","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"}]},{"szoveg":"gyermek- \u00e9s ifj\u00fas\u00e1gi m\u0171sorok","musorok":[{"id":160,"cim":"Var\u00e1zsdoboz","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"gyermek- \u00e9s ifj\u00fas\u00e1gi m\u0171sorok"}]},{"szoveg":"irodalmi \u00e9s versm\u0171sorok","musorok":[{"id":771,"cim":"\u0022Itt az \u00edr\u00e1s, forgass\u00e1tok!\u0022","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":45,"cim":"\u0022Valaki \u00edr a kezeddel\u0022","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":773,"cim":"Legkedvesebb k\u00f6nyveim","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":627,"cim":"Mi\u00e9rt szeretem?","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":770,"cim":"Olvas\u00f3jegy","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":89,"cim":"R\u00e1di\u00f3s reg\u00e9nyt\u00e1r","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"}]},{"szoveg":"ismeretterjeszt\u0151 m\u0171sorok","musorok":[{"id":760,"cim":"Anzix","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":763,"cim":"Architek-t\u00fara","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/4FlcStdLUhNVwkAsuIQYV3","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/architek-t\u00fara\/id1554874477","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":765,"cim":"Blende","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":289,"cim":"M\u00faltid\u00e9z\u0151","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":769,"cim":"Pannon-panor\u00e1ma","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":764,"cim":"Pereg m\u00e1r a film","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"}]},{"szoveg":"mez\u0151gazdas\u00e1g \u00e9s k\u00f6rnyezetkult\u00fara","musorok":[{"id":320,"cim":"Agr\u00e1r-vil\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"mez\u0151gazdas\u00e1g \u00e9s k\u00f6rnyezetkult\u00fara"},{"id":683,"cim":"Vid\u00e9kj\u00e1r\u00f3 magazin","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"mez\u0151gazdas\u00e1g \u00e9s k\u00f6rnyezetkult\u00fara"}]},{"szoveg":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok","musorok":[{"id":46,"cim":"Nyelv\u00e9desany\u00e1nk","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok"},{"id":766,"cim":"Sz\u00f3r\u00f3l \u2013 sz\u00f3val","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok"},{"id":768,"cim":"\u00dczen\u0151f\u00fczet","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok"}]},{"szoveg":"portr\u00e9- \u00e9s riportm\u0171sorok","musorok":[{"id":112,"cim":"A h\u00e9ten t\u00f6rt\u00e9nt","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":331,"cim":"Arcok \u00e9s sorsok","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/2m6eF8sj91aVE93DXev3Ws","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/arcok-%C3%A9s-sorsok\/id1556443179","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":32,"cim":"Asztali \u00e1ld\u00e1s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":821,"cim":"Dogma vagy axi\u00f3ma?","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/4F4wnHIg1xOAcTOgd6g10s","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/dogma-vagy-axi\u00f3ma\/id1876796763","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":825,"cim":"Embernek maradni","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/7n1uC3iDM7VtNwwRit0N5C","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/embernek-maradni\/id1878370829","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":707,"cim":"Ir\u00e1nyt\u0171","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/160wEf3bXXV3ankhDmD95i","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/ir\u00e1nyt\u0171\/id1851991694","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":747,"cim":"Koszor\u00fak","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":12,"cim":"Kvaterka","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1E5HFgDJOugm164PYsnDeH","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/kvaterka\/id1699202973","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":790,"cim":"Magyar csillagok","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":831,"cim":"Mondd el te is!","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":826,"cim":"Portr\u00e9 mikrofonnal","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/05DnYjkZEArjqgKVnTbb8L","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/portr\u00e9-mikrofonnal\/id1875972293","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"}]},{"szoveg":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok","musorok":[{"id":723,"cim":"H\u00e1zunk t\u00e1j\u00e1n","urlkod":"","pod_spoti":"http:\/\/open.spotify.com\/show\/3K8zeaDO7XRAxfz883kFoO","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/h%C3%A1zunk-t%C3%A1j%C3%A1n-csal%C3%A1di-magazin\/id1553439603","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":712,"cim":"Messzel\u00e1t\u00f3","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/0NQ0RuiBbLULHTkUazg9AS","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/messzel\u00e1t\u00f3\/id1746679164","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":806,"cim":"Sportkulissza","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":819,"cim":"T\u00e1masz \u00e9s talpk\u0151","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/4fOAKycyVund5e6nBEyR3n","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/t\u00e1masz-\u00e9s-talpk\u0151\/id1829448454","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":255,"cim":"Venite","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"}]},{"szoveg":"vall\u00e1si m\u0171sorok","musorok":[{"id":6,"cim":"\u0022Isten, haz\u00e1nk\u00e9rt t\u00e9rdel\u00fcnk el\u0151dbe ...\u0022","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":828,"cim":"A l\u00e9lek hangja","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":807,"cim":"A l\u00e9lek szava","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":63,"cim":"A Vatik\u00e1ni R\u00e1di\u00f3 magyar m\u0171sora","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":694,"cim":"Bens\u0151 v\u00e9gtelen","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":724,"cim":"Magvet\u00e9s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":146,"cim":"Napi evang\u00e9lium","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/5Y4CYXwVYGEUrl6lUCnO2E","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/napi-evang%C3%A9lium\/id1573373045","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":799,"cim":"Perik\u00f3pa","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":693,"cim":"Reggeli ima","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"}
462,{"id":41,"cim":"R\u00f3zsaf\u00fcz\u00e9r-im\u00e1ds\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":28,"cim":"Szentmise","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":31,"cim":"\u00darangyala-im\u00e1ds\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"}]},{"szoveg":"zenei m\u0171sorok","musorok":[{"id":668,"cim":"Dallam\u00edv","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":198,"cim":"Egyh\u00e1zzenei \u00e1hitat","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":68,"cim":"Guzsalyas","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":680,"cim":"Hang\u00e1rium","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":801,"cim":"Hangol\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":788,"cim":"Hangol\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":700,"cim":"H\u00e1zimuzsika a D\u00e9lib\u00e1b utc\u00e1ban","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":703,"cim":"Heti zene","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":592,"cim":"Inspir\u00e1ci\u00f3k","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":372,"cim":"Liturgikus \u00e9nekek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":59,"cim":"OMCE magazin","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":812,"cim":"Sanzonpar\u00e1d\u00e9","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":679,"cim":"Zene-k\u00f6zelben","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":774,"cim":"Zenei barangol\u00e1s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":795,"cim":"Zenepavilon","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"}]}])'>
463    <div class="max-w-4xl mx-auto w-full page-content-gutter-roomy">
464
465        <header class="mb-10 border-b border-gray-100 pb-8">
466            <h1 class="text-3xl lg:text-4xl font-bold text-brand-dark mb-3">Műsoraink kategóriák szerint</h1>
467            <p class="text-gray-500 text-lg mb-8">Fedezze fel műsorainkat kategóriák szerint rendezve!</p>
468
469            <!-- Keresőmező -->
470            <div class="relative max-w-xl input-icon-shell">
471                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none input-icon-leading">
472                    <i class="fa-solid fa-magnifying-glass text-gray-400 text-lg"></i>
473                </div>
474                <input
475                    type="text"
476                    x-model="searchQuery"
477                    placeholder="Keress a műsorok között..."
478                    class="w-full pl-12 pr-12 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-brand-dark focus:bg-white focus:ring-2 focus:ring-brand-green focus:border-brand-green outline-none transition-all text-base input-inline-safe-leading-trailing">
479                <button
480                    x-show="searchQuery.length > 0"
481                    @click="searchQuery = ''"
482                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 transition-colors input-icon-trailing"
483                    x-cloak>
484                    <i class="fa-solid fa-xmark text-lg"></i>
485                </button>
486            </div>
487        </header>
488
489        <!-- Nincs találat állapot -->
490        <div x-show="filteredCsoportok.length === 0" class="py-12 text-center" x-cloak>
491            <i class="fa-solid fa-microphone-lines-slash text-5xl text-gray-200 mb-4"></i>
492            <h3 class="text-xl font-bold text-brand-dark mb-2">Nincs találat</h3>
493            <p class="text-gray-500">Nincs olyan műsor ebben a nézetben, ami megfelel a keresésnek.</p>
494        </div>
495
496        <!-- Dinamikus lista -->
497        <div class="space-y-12">
498            <template x-for="csoport in filteredCsoportok" :key="csoport.szoveg">
499                <section>
500                    <h2 class="text-2xl font-bold text-brand-dark tracking-tight mb-6 lowercase" x-text="csoport.szoveg"></h2>
501
502                    <ul class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-3">
503                        <template x-for="musor in csoport.musorok" :key="musor.id">
504                            <li class="group flex items-center justify-between py-1 border-b border-transparent hover:border-gray-50 transition-all">
505                                <div class="flex items-center gap-3 min-w-0">
506                                    <div class="w-1.5 h-1.5 rounded-full bg-brand-green shrink-0"></div>
507                                    <a :href="'/musoraink/' + (musor.urlkod ? musor.urlkod : musor.id)"
508                                        class="text-lg text-brand-green font-medium hover:text-brand-dark transition-colors truncate"
509                                        x-text="musor.cim">
510                                    </a>
511                                </div>
512
513                                <div class="flex items-center gap-3 shrink-0 ml-4">
514                                    <template x-if="musor.pod_spoti">
515                                        <a :href="musor.pod_spoti" target="_blank" class="text-[#1DB954] hover:scale-110 transition-transform" title="Spotify">
516                                            <i class="fa-brands fa-spotify text-xl"></i>
517                                        </a>
518                                    </template>
519
520                                    <template x-if="musor.pod_apple">
521                                        <a :href="musor.pod_apple" target="_blank" class="text-[#872EC4] hover:scale-110 transition-transform" title="Ap
521ple Podcast">
522                                            <i class="fa-solid fa-podcast text-xl"></i>
523                                        </a>
524                                    </template>
525
526                                    <template x-if="musor.pod_spoti || musor.pod_apple">
527                                        <a :href="'https://www.katolikusradio.hu/podcast/rss/?musorid=' + musor.id" target="_blank" class="text-[#F26522] hover:scale-110 transition-transform" title="RSS">
528                                            <i class="fa-solid fa-rss text-xl"></i>
529                                        </a>
530                                    </template>
531                                </div>
532                            </li>
533                        </template>
534                    </ul>
535                </section>
536            </template>
537        </div>
538
539    </div>
540</div>
541
542<script>
543    window.tematikusKereso = function(initialData) {
544        return {
545            csoportok: initialData || [],
546            searchQuery: '',
547
548            get filteredCsoportok() {
549                if (this.searchQuery.trim() === '') {
550                    return this.csoportok;
551                }
552
553                // Keresőszó ékezetmentesítése
554                const q = this.searchQuery.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
555
556                // Dupla szűrés: Először a műsorokat szűrjük a kategórián belül, 
557                // aztán azokat a kategóriákat eldobjuk, amik kiürültek.
558                return this.csoportok.map(cs => {
559                    const filteredMusorok = cs.musorok.filter(show => {
560                        const cim = (show.cim || '').toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
561                        return cim.includes(q);
562                    });
563
564                    return {
565                        ...cs,
566                        musorok: filteredMusorok
567                    };
568                }).filter(cs => cs.musorok.length > 0);
569            }
570        };
571    };
572</script>
572 <!-- Az oldal tartalma -->
573
574
575
576    <footer id="footer" class="bg-brand-dark text-white py-12 lg:py-16">
577  <div class="max-w-[1440px] mx-auto px-4 md:px-8">
578    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 mb-12">
579
580      <div class="md:col-span-3 lg:col-span-2 space-y-6">
581        <div class="flex items-center justify-center md:justify-start">
582          <div class="w-14 h-14 lg:w-16 lg:h-16 rounded-full flex items-center justify-center overflow-hidden">
583            <img src="/img/logo.png"
584              alt="Magyar Katolikus Rádió" class="w-full h-full object-cover">
585          </div>
586          <div class="ml-4 text-left">
587            <div class="text-lg lg:text-xl font-bold">Magyar Katolikus Rádió</div>
588            <div class="text-sm text-gray-400">Örömhír mindenkinek!</div>
589          </div>
590        </div>
591        <p class="text-gray-400 leading-relaxed text-sm lg:text-base text-center md:text-left max-w-md mx-auto md:mx-0">
592          A Magyar Katolikus Rádió küldetése, hogy hiteles információkkal, értékközvetítő műsorokkal és lelki táplálékkal szolgálja hallgatóit. Minden nap, 24 órában.
593        </p>
594        <div class="flex items-center justify-center md:justify-start space-x-4">
595          <a href="https://www.facebook.com/katradio/?locale=hu_HU" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-facebook-f"></i></a>
596          <a href="https://www.youtube.com/channel/UCgJyAWToXM6aHVic0CtIt4w" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-youtube"></i></a>
597          <a href="https://www.instagram.com/katolikusradio/" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-instagram"></i></a>
598          <a href="https://play.google.com/store/apps/details?id=hu.arteries.katolikusradio&hl=hu" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-google-play"></i></a>
599          <a href="https://apps.apple.com/hu/app/magyar-katolikus-r%C3%A1di%C3%B3/id1474931701?l=hu" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-apple"></i></a>
600          <a href="https://bolt.katolikusradio.hu/" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-solid fa-shopping-cart"></i></a>
601        </div>
602      </div>
603
604      
605      <div class="text-center md:text-left">
606        <h4 class="text-lg font-bold mb-4 lg:mb-6 border-b border-white/10 pb-2 md:border-0 md:pb-0">Műsorok</h4>
607        <ul class="space-y-2 lg:space-y-3">
608            <li><a onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://katolikusradio.hu:8001/live_hi.mp3', 'Élő Adás', true, 0, true); window.RadioPlayer.expand(); }"  class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base cursor-pointer">Élő adás</a></li>
609          <li><a href="/musoraink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Műsorújság és archívum</a></li>
610          <li><a href="/podcastok" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Podcastok</a></li>
611        </ul>
612      </div>
613
614      <div class="text-center md:text-left">
615        <h4 class="text-lg font-bold mb-4 lg:mb-6 border-b border-white/10 pb-2 md:border-0 md:pb-0">Tartalom</h4>
616        <ul class="space-y-2 lg:space-y-3">
617          <li><a href="/hireink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Hírek</a></li>
618          <li><a href="/videoink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Videók</a></li>
619          <li><a href="/igenaptar" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Igenaptár</a></li>
620        </ul>
621      </div>
622
623      <div class="text-center md:text-left">
624        <h4 class="text-lg font-bold mb-4 lg:mb-6 border-b border-white/10 pb-2 md:border-0 md:pb-0">Információ</h4>
625        <ul class="space-y-2 lg:space-y-3">
626          <li><a href="/rolunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Rólunk</a></li>
627          <li><a href="/bemutatkozunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Kapcsolat</a></li>
628          <li><a href="/tamogatas" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Támogatás</a></li>
629          <li><a href="/adatkezelesi-tajekoztato" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Adatkezelési tájékoztató</a></li>
630          <li><a href="/impresszum" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Impresszum</a></li>
631        </ul>
632      </div>
633    </div>
634
635    <div class="border-t border-white/10 pt-10">
636      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 ga
636p-10 lg:gap-12 mb-12">
637
638        <div class="md:col-span-3 lg:col-span-2 space-y-6">
639          <h4 class="text-lg font-bold mb-4">Kapcsolat</h4>
640          <div class="space-y-3 text-gray-400 max-w-xs mx-auto md:mx-0">
641            <div class="flex items-start justify-center md:justify-start">
642              <i class="fa-solid fa-location-dot mt-1 mr-3 text-brand-green"></i>
643              <span class="text-sm">1062 Budapest, Délibáb u. 15.-17.</span>
644            </div>
645            <div class="flex items-center justify-center md:justify-start">
646              <i class="fa-solid fa-phone mr-3 text-brand-green"></i>
647              <span class="text-sm">(+36 1) 255-3333</span>
648            </div>
649            <div class="flex items-center justify-center md:justify-start">
650              <i class="fa-solid fa-envelope mr-3 text-brand-green"></i>
651              <span class="text-sm">[email protected]</span>
652            </div>
653          </div>
654        </div>
655
656        <div class="md:col-span-3 lg:col-span-2 space-y-6">
657          <h4 class="text-lg font-bold mb-4">Támogatók</h4>
658          <div class="space-y-3 text-gray-400 max-w-md mx-auto md:mx-0">
659            <div class="flex items-start justify-center md:justify-start">
660              <span class="text-sm">A médiaszolgáltatási tevékenységet és a műszaki fejlesztést a Médiatanács a Médiatanács Támogatási Program keretében támogatja.</span>
661            </div>
662          </div>
663        </div>
664
665		<div class="text-center md:text-left">
666			<div class="flex flex-col gap-4 max-w-[150px] w-full">
667			  <img src="/img/nmhh_logo-150px.jpg" alt="NMHH logó" class="w-full h-auto object-contain rounded shadow-sm">
668			  <img src="/img/nka_logo-150px.jpg" alt="NKA logó" class="w-full h-auto object-contain rounded shadow-sm">
669			</div>
670
671		</div>
672      </div>
673
674      <div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-white/5 gap-4 text-center md:text-left">
675        <p class="text-gray-500 text-xs lg:text-sm">
676          © 2026 Magyar Katolikus Rádió Zrt. Minden jog fenntartva.
677        </p>
678        <p class="text-gray-500 text-xs lg:text-sm">
679          Készítette: <a href="https://novanow.hu" class="text-brand-green hover:underline">NovaNow</a>
680        </p>
681      </div>
682    </div>
683  </div>
684</footer>    <style>
685  /* Alap padding az élő adáshoz (vagy becsukott állapothoz) */
686  body {
687    padding-bottom: 72px;
688    transition: padding-bottom 0.3s ease;
689  }
690
691  /* Becsukva mindegy mi megy, kicsi a padding */
692  body.player-minimized {
693    padding-bottom: 16px !important;
694  }
695
696  /* Archív adásnál nagyobbnak kell lennie a paddingnak mobilon, mert két soros a lejátszó */
697  @media (max-width: 767px) {
698    body.player-archive {
699      padding-bottom: 110px;
700    }
701  }
702
703  input[type="range"] {
704    accent-color: #85c000;
705    cursor: pointer;
706  }
707
708  input[type="range"]:disabled {
709    cursor: not-allowed;
710    accent-color: #6c757d;
711  }
712
713  .radio-pulse {
714    position: relative;
715    display: flex;
716    align-items: center;
717    justify-content: center; /* JAVÍTVA: justify-center -> justify-content */
718  }
719
720  .radio-pulse.is-playing::before {
721    content: "";
722    position: absolute;
723    overflow: hidden;
724    top: 50%;
725    left: 50%;
726    width: 100%;
727    height: 100%;
728    margin-top: -50%;
729    margin-left: -50%;
730    border-radius: 9999px;
731    background-color: #85c000;
732    opacity: 0.5;
733    animation: pulse-wave 2.5s infinite ease-out;
734    z-index: -1;
735    pointer-events: none;
736  }
737
738  @keyframes pulse-wave {
739    0% { transform: scale(1); opacity: 0.5; }
740    100% { transform: scale(2.4); opacity: 0; }
741  }
742</style>
743
744<div id="radio-player-global" data-turbo-permanent x-data="radioPlayer" x-init="init()" x-cloak>
745  <section
746    id="quick-listen-bar"
747    class="fixed bottom-0 left-0 right-0 z-[99999] bg-gray-900/95 backdrop-blur border-t border-white/10 flex flex-col justify-center transition-all duration-300"
748    :class="{ 'h-[72px]': isLiveStream || minimized, 'h-[110px] md:h-[72px]': !isLiveStream && !minimized }"
749    x-show="!minimized"
750    x-transition.opacity>
751    
752    <div class="max-w-[1440px] w-full mx-auto px-4 md:px-6">
753      <div class="flex items-center justify-between gap-2 md:gap-4 h-[56px] md:h-auto md:py-2">
754
755        <div class="flex items-center gap-3 md:gap-4 min-w-[50%] md:min-w-[200px]">
756          <button
757            type="button"
758            class="w-10 h-10 bg-[#85c000] hover:bg-[#96d100] rounded-full flex items-center justify-center transition-colors shrink-0"
759            @click="toggle()"
760            :aria-label="playing ? 'Szünet' : 'Lejátszás'">
761            <i class="fa-solid fa-play text-white ml-1" x-show="!playing" x-cloak></i>
762            <i class="fa-solid fa-pause text-white" x-show="playing" x-cloak></i>
763          </button>
764
765          <div class="min-w-0 flex-1">
766            <div class="text-white font-semibold text-sm leading-tight truncate" x-text="displayTitle"></div>
767            <div class="text-gray-400 text-xs leading-tight truncate" x-text="sourceLabel"></div>
768          </div>
769        </div>
770
771        <div class="hidden md:flex flex-1 items-center justify-center gap-3 px-4" x-show="!isLiveStream" x-cloak>
772          <span class="text-xs text-gray-400 font-mono w-12 text-right" x-text="formatTime(currentTime)"></span>
773          <input
774            type="range"
775            min="0"
776            :max="duration > 0 ? duration : 100"
777            step="1"
778            class="flex-1 max-w-[400px] h-1.5 bg-gray-600 rounded-lg appearance-none"
779            x-model="currentTime"
780            @input="seek()" />
781          <span class="text-xs text-gray-400 font-mono w-12" x-text="formatTime(duration)"></span>
782        </div>
783        
784        <div class="hidden md:block flex-1" x-show="isLiveStream" x-cloak></div>
785
786        <div class="flex items-center gap-2 md:gap-3 min-w-[80px] md:min-w-[180px] justify-end">
787          
788          <div class="hidden md:flex items-center gap-2 w-28">
789            <i class="fa-solid fa-volume-high text-gray-400 text-sm"></i>
790            <input
791              type="range" min="0" max="1" step="0.01"
792              class="w-full h-1.5 bg-gray-600 rounded-lg appearance-none"
793              x-model.number="volume"
794              @input="applyVolume()"
795              aria-label="Hangerő" />
796          </div>
797
798          <button
799            type="button"
800            class="w-9 h-9 rounded-md hover:bg-white/10 text-gray-400 flex items-center justify-center transition-colors ml-1"
801            @click="minimize()"
802            aria-label="Becsukás"
803            title="Becsukás">
804            <i class="fa-solid fa-chevron-down"></i>
805          </button>
806        </div>
807
808      </div>
809
810      <div class="flex md:hidden items-center justify-between gap-3 pb-3 px-1" x-show="!isLiveStream" x-cloak>
811        <span class="text-xs text-gray-400 font-mono w-10 text-left shrink-0" x-text="formatTime(currentTime)"></span>
812        <input
813            type="range"
814            min="0"
815            :max="duration > 0 ? duration : 100"
816            step="1"
817            class="flex-1 h-1.5 bg-gray-600 rounded-lg appearance-none w-full"
818            x-model="currentTime"
819            @input="seek()" />
820        <span class="text-xs text-gray-400 font-mono w-10 text-right shrink-0" x-text="formatTime(duration)"></span>
821      </div>
822
823    </div>
824
825    <audio x-ref="audio" preload="none"></audio>
826  </section>
827
828  <button
829    type="button"
830    x-show="minimized"
831    @click="expand()"
832    :class="{ 'radio-pulse is-playing': playing, 'radio-pulse': !playing }"
833    style="
834    position: fixed !important;
835    bottom: 32px !important;
836    right: 32px !important;
837    width: 64px !important;
838    height: 64px !important;
839    border-radius: 9999px !important;
840    background-color: #85c000 !important;
841    color: white !important;
842    display: flex !important;
843    align-items: center !important;
844    justify-content: center !important;
845    z-index: 999999 !important;
846    border: none !important;
847    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
848    cursor: pointer !important;
849  "
850    x-transition:enter="transition ease-out duration-300"
851    x-transition:enter-start="opacity-0 scale-50 translate-x-10"
852    x-transition:enter-end="opacity-100 scale-100 translate-x-0">
853    <i class="fa-solid fa-radio text-2xl"></i>
854  </button>
855
856  
856<script>
857    document.addEventListener('alpine:init', () => {
858      Alpine.data('radioPlayer', () => ({
859        defaultUrl: 'https://katolikusradio.hu:8001/live_hi.mp3',
860        defaultTitle: 'Élő adás',
861
862        streamUrl: null,
863        programTitle: null,
864        isLiveStream: true,
865
866        playing: false,
867        minimized: sessionStorage.getItem('radioMinimized') === 'true', 
868        volume: 0.7,
869
870        currentTime: 0,
871        duration: 0,
872        targetStartTime: 0,
873
874        get displayTitle() {
875          return (this.programTitle && this.programTitle.trim()) ? this.programTitle : this.defaultTitle;
876        },
877        get sourceLabel() {
878          return 'Magyar Katolikus Rádió';
879        },
880
881        persistPlaybackState(isPlaying) {
882          sessionStorage.setItem('radioWasPlaying', isPlaying ? 'true' : 'false');
883        },
884
885        syncPlaybackState(isPlaying = !this.$refs.audio.paused) {
886          this.playing = !!isPlaying;
887          this.persistPlaybackState(this.playing);
888        },
889
890        syncProgressState() {
891          const audio = this.$refs.audio;
892          if (!this.isLiveStream) {
893            this.currentTime = audio.currentTime;
894          }
895        },
896
897        syncMetadataState() {
898          const audio = this.$refs.audio;
899          this.duration = audio.duration === Infinity ? 0 : audio.duration;
900
901          if (this.targetStartTime > 0) {
902            audio.currentTime = this.targetStartTime;
903            this.targetStartTime = 0;
904          }
905        },
906
907        syncFromAudioElement() {
908          const audio = this.$refs.audio;
909          this.syncPlaybackState(!audio.paused);
910          this.currentTime = audio.currentTime;
911          this.duration = audio.duration === Infinity ? 0 : audio.duration;
912        },
913
914        init() {
915          const a = this.$refs.audio;
916          window.__mkrRadioPlayerInstance = this;
917
918          // Turbo permanent elemként a player DOM-ja oldalváltások között megmarad.
919          // iOS Safari érzékeny arra, ha ugyanarra az audio elemre többször tesszük fel
920          // ugyanazokat a listenereket, ezért az init idempotens.
921          if (a.dataset.radioPlayerListenersAttached !== 'true') {
922            a.dataset.radioPlayerListenersAttached = 'true';
923
924            const getActivePlayer = () => window.__mkrRadioPlayerInstance;
925
926            a.addEventListener('play', () => {
927              getActivePlayer()?.syncPlaybackState(true);
928            });
929            a.addEventListener('pause', () => {
930              getActivePlayer()?.syncPlaybackState(false);
931            });
932            a.addEventListener('ended', () => {
933              getActivePlayer()?.syncPlaybackState(false);
934            });
935            a.addEventListener('error', (e) => {
936              getActivePlayer()?.syncPlaybackState(false);
937              console.error('audio error', e);
938            });
939
940            a.addEventListener('timeupdate', () => {
941              getActivePlayer()?.syncProgressState();
942            });
943
944            a.addEventListener('loadedmetadata', () => {
945              getActivePlayer()?.syncMetadataState();
946            });
947          }
948
949          a.volume = this.volume;
950
951          window.RadioPlayer = {
952            setStream: (url, title, isLive, startAt, forcePlay) => this.setStream(url, title, isLive, startAt, forcePlay),
953            play: () => this.play(),
954            pause: () => this.pause(),
955            toggle: () => this.toggle(),
956            minimize: () => this.minimize(),
957            expand: () => this.expand(),
958            applyBodyPadding: () => this.applyBodyPadding(),
959          };
960
961          // Memória betöltés
962          if (!a.src || a.src === window.location.href || a.src === '') {
963            const params = new URLSearchParams(window.location.search);
964            const pStream = params.get('stream');
965            const pTitle = params.get('title');
966
967            if (pStream) this.setStream(pStream, pTitle);
968            else this.setStream(this.defaultUrl, null);
969          } else {
970            this.syncFromAudioElement();
971            
972            const savedState = JSON.parse(sessionStorage.getItem('radioState') || '{}');
973            this.streamUrl = savedState.streamUrl || a.src;
974            this.programTitle = savedState.programTitle || '';
975            this.isLiveStream = savedState.isLiveStream !== undefined ? savedState.isLiveStream : true;
976          }
977
978          this.syncFromAudioElement();
979          
980          this.applyBodyPadding();
981        },
982
983        formatTime(seconds) {
984          if (isNaN(seconds) || !isFinite(seconds)) return '00:00';
985          const h = Math.floor(seconds / 3600);
986          const m = Math.floor((seconds % 3600) / 60);
987          const s = Math.floor(seconds % 60);
988          if (h > 0) {
989            return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
990          }
991          return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
992        },
993
994        seek() {
995          if (this.isLiveStream) return;
996          this.$refs.audio.currentTime = this.currentTime;
997        },
998
999        // Test Padding hozzáadása dinamikusan
1000        applyBodyPadding() {
1001          document.body.classList.toggle('player-minimized', !!this.minimized);
1002          
1003          // Ha NYITVA van és ARCHÍV, akkor plusz osztály a mobilos kétsoros nézet miatt
1004          if (!this.minimized && !this.isLiveStream) {
1005              document.body.classList.add('player-archive');
1006          } else {
1007              document.body.classList.remove('player-archive');
1008          }
1009        },
1010
1011        minimize() {
1012          this.minimized = true;
1013          sessionStorage.setItem('radioMinimized', 'true');
1014          this.applyBodyPadding();
1015        },
1016
1017        expand() {
1018          this.minimized = false;
1019          sessionStorage.setItem('radioMinimized', 'false');
1020          this.applyBodyPadding();
1021        },
1022
1023        ensureAudioSource() {
1024          const a = this.$refs.audio;
1025          if (this.streamUrl && a.src !== this.streamUrl) {
1026            a.src = this.streamUrl;
1027            a.load();
1028          }
1029        },
1030
1031        setStream(url, title = null, isLive = null, startAt = 0, forcePlay = false) {
1032          if (!url) return;
1033          const a = this.$refs.audio;
1034          const wasPlaying = !a.paused;
1035          const shouldStart = wasPlaying || forcePlay;
1036
1037          this.streamUrl = url;
1038          this.programTitle = title;
1039          this.isLiveStream = isLive !== null ? isLive : url.includes('live_hi');
1040
1041          sessionStorage.setItem('radioState', JSON.stringify({
1042            streamUrl: this.streamUrl,
1043            programTitle: this.programTitle,
1044            isLiveStream: this.isLiveStream
1045          }));
1046
1047          this.targetStartTime = startAt;
1048          this.currentTime = startAt;
1049          this.duration = 0;
1050
1051          if (shouldStart) {
1052            a.pause();
1053            this.ensureAudioSource();
1054            this.syncPlaybackState(false);
1055          } else if (this.isLiveStream) {
1056            // iOS Safari a live stream automatikus a.load()/src indítását a teljes
1057            // oldalbetöltés részének tekinti, ezért a progress bar félúton megállhat,
1058            // a Turbo/Alpine restore pedig félkész DOM-ot festhet. Élő adást csak
1059            // felhasználói play vagy explicit visszajátszás után nyitunk meg.
1060            a.pause();
1061            a.removeAttribute('src');
1062            a.load();
1063            this.syncPlaybackState(false);
1064          } else if (a.src !== url) {
1065            a.pause();
1066            this.ensureAudioSource();
1067            this.syncPlaybackState(false);
1068          }
1069
1070          this.applyBodyPadding(); // Frissítjük a magasságot betöltéskor
1071
1072          if (shouldStart) setTimeout(() => this.play(), 50);
1073        },
1074
1075        async play() {
1076          const a = this.$refs.audio;
1077          this.ensureAudioSource();
1078          try {
1079            await a.play();
1080            this.syncPlaybackState(true);
1081          } catch (e) {
1082            this.syncPlaybackState(false);
1083            console.error('play failed', e);
1084          }
1085        },
1086
1087        pause() {
1088          this.$refs.audio.pause();
1089          this.syncPlaybackState(false);
1090        },
1091
1092        async toggle() {
1093          const a = this.$refs.audio;
1094          if (a.paused) await this.play();
1095          else this.pause();
1096        },
1097
1098        applyVolume() {
1099          this.$refs.audio.volume = this.volume;
1100        },
1101      }));
1102    });
1103  </script>
1103
1104
1105  
1105<script>
1106    if (!window.__mkrRadioTurboBridgeRegistered) {
1107      window.__mkrRadioTurboBridgeRegistered = true;
1108      let wasRadioPlaying = false;
1109
1110      document.addEventListener("turbo:before-render", () => {
1111        const audioEl = document.querySelector('#radio-player-global audio');
1112        if (audioEl) {
1113          wasRadioPlaying = !audioEl.paused;
1114          sessionStorage.setItem('radioWasPlaying', wasRadioPlaying ? 'true' : 'false');
1115        }
1116      });
1117
1118      document.addEventListener("turbo:render", () => {
1119        if (wasRadioPlaying) {
1120          const audioEl = document.querySelector('#radio-player-global audio');
1121          if (audioEl) {
1122            setTimeout(() => {
1123              if (window.RadioPlayer && typeof window.RadioPlayer.play === 'function') {
1124                window.RadioPlayer.play();
1125              } else {
1126                audioEl.play().catch(e => console.log('Auto-play preventálva:', e));
1127              }
1128            }, 50);
1129          }
1130        }
1131
1132        if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') {
1133          window.RadioPlayer.applyBodyPadding();
1134        }
1135      });
1136
1137      window.addEventListener('pageshow', () => {
1138        const shouldResumePlayback = sessionStorage.getItem('radioWasPlaying') === 'true';
1139
1140        if (shouldResumePlayback && window.RadioPlayer && typeof window.RadioPlayer.play === 'function') {
1141          window.RadioPlayer.play();
1142        }
1143
1144        if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') {
1145          window.RadioPlayer.applyBodyPadding();
1146        }
1147      });
1148    }
1149  </script>
1149
1150</div>
1151
1152
1153  </body>
1154
1155  </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.