PageSourceSearch

https://katolikusradio.hu/musoraink

html katolikusradio.hu collected 2026-09-24 09:31:15 UTC 403,376 bytes, 5,298 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>Műsoraink | 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-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-bold text-brand-green bg-brand-green/5">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-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">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: true }">
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-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" >
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-medium text-gray-600 hover:text-brand-green">Műsoraink (Kategóriák szerint)</a>
352                    <a href="/musoraink" class="block text-base py-1 font-bold 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<style>
463    [x-cloak] {
464        display: none !important;
465    }
466
467    .grid-accordion {
468        display: grid;
469        grid-template-rows: 0fr;
470        transition: grid-template-rows 0.3s ease-in-out;
471    }
472
473    .grid-accordion.is-open {
474        grid-template-rows: 1fr;
475    }
476
477    .grid-accordion-inner {
478        min-height: 0;
479        /* EZ A KULCS: Enélkül nem csukódik össze 0 pixelre! */
480        overflow: hidden;
481    }
482
483    /*
484     * iOS WebKit alatt az első hideg betöltéskor a CDN-es Tailwind/arbitrary
485     * color utility-k néha csak később állnak elő; ilyenkor a fehér szöveg
486     * fehér háttéren látszólag eltüntette a műsorsáv fejléceket és az időpontokat.
487     * Ezek a kritikus műsorújság-stílusok ezért natív CSS fallbacket kapnak,
488     * hogy első rendernél, Turbo cache-ből és későbbi refresh után is látszódjanak.
489     */
490    .musor-slot-header {
491        background-color: #70a300;
492        color: #fff;
493        display: flex;
494        align-items: center;
495        justify-content: space-between;
496        width: 100%;
497        padding: 0.75rem 1.25rem;
498        border-radius: 0.75rem;
499        margin-bottom: 0.5rem;
500        font-weight: 700;
501        font-size: 1.125rem;
502        line-height: 1.75rem;
503        text-align: left;
504    }
505
506    .musor-slot-header:hover {
507        background-color: #6a9900;
508    }
509
510    .musor-slot-header--current {
511        background-color: #2563eb;
512        color: #fff;
513    }
514
515    .musor-slot-header--current:hover {
516        background-color: #1d4ed8;
517    }
518
519    .musor-slot-range {
520        display: none;
521        align-items: center;
522        justify-content: center;
523        color: #fff;
524        line-height: 1.25;
525        white-space: nowrap;
526        width: 7rem;
527        text-align: center;
528    }
529
530    @media (min-width: 640px) {
531        .musor-slot-range {
532            display: inline-flex;
533        }
534    }
535
536    .musor-episode-time {
537        display: inline-flex;
538        align-items: center;
539        justify-content: center;
540        color: #fff;
541        line-height: 1.25;
542        white-space: nowrap;
543        background-color: #5c8500;
544        min-width: 50px;
545        padding: 0.125rem 0.5rem;
546        border-radius: 0.125rem;
547        font-weight: 700;
548        font-size: 0.875rem;
549    }
550
551    .musor-episode-time--current {
552        background-color: #2563eb;
553    }
554</style>
555
556<script>
557    function registerMusorainkAlpineComponents() {
558        if (!window.Alpine || window.__mkrMusorainkAlpineRegistered) {
559            return;
560        }
561
562        window.__mkrMusorainkAlpineRegistered = true;
563
564        Alpine.data('datePicker', (initialDate) => ({
565            open: false,
566            month: '',
567            year: '',
568            no_of_days: [],
569            blankdays: [],
570            monthNames: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
571            selectedDate: initialDate,
572
573            initDate() {
574                let parts = this.selectedDate.split('-');
575                let date = new Date(parts[0], parts[1] - 1, parts[2]);
576
577                this.month = date.getMonth();
578                this.year = date.getFullYear();
579                this.getNoOfDays();
580            },
581
582            toggle() {
583                this.open = !this.open;
584            },
585
586            formatDisplayDate() {
587                let parts = this.selectedDate.split('-');
588                let d = new Date(parts[0], parts[1] - 1, parts[2]);
589                return d.getFullYear() + '. ' + (d.getMonth() + 1).toString().padStart(2, '0') + '. ' + d.getDate().toString().padStart(2, '0') + '.';
590            },
591
592            isToday(date) {
593                const today = new Date();
594                const d = new Date(this.year, this.month, date);
595                return today.toDateString() === d.toDateString();
596            },
597
598            isSelected(date) {
599                const d = new Date(this.year, this.month, date);
600                let parts = this.selectedDate.split('-');
601                const s = new Date(parts[0], parts[1] - 1, parts[2]);
602                return d.toDateString() === s.toDateString();
603            },
604
605            selectDate(date) {
606                let selected = new Date(this.year, this.month, date);
607                let formatted = selected.getFullYear() + '-' + (selected.getMonth() + 1).toString().padStart(2, '0') + '-' + selected.getDate().toString().padStart(2, '0');
608
609                if (window.Turbo) {
610                    window.Turbo.visit('?datum=' + formatted);
611                } else {
612                    window.location.href = '?datum=' + formatted;
613                }
614            },
615
616            getNoOfDays() {
617                let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
618                let dayOfWeek = new Date(this.year, this.month).getDay();
619                let blankdaysArray = [];
620                let startDay = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
621
622                for (let i = 1; i <= startDay; i++) {
623                    blankdaysArray.push(i);
624                }
625                let daysArray = [];
626                for (let i = 1; i <= daysInMonth; i++) {
627                    daysArray.push(i);
628                }
629
630                this.blankdays = blankdaysArray;
631                this.no_of_days = daysArray;
632            },
633
634            prevMonth() {
635                if (this.month === 0) {
636                    this.month = 11;
637                    this.year--;
638                } else {
639                    this.month--;
640                }
641                this.getNoOfDays();
642            },
643
644            nextMonth() {
645                if (this.month === 11) {
646                    this.month = 0;
647                    this.year++;
648                } else {
649                    this.month++;
650                }
651                this.getNoOfDays();
652            }
653        }));
654
655        Alpine.data('adasGalleryManager', (imageArray) => ({
656            images: imageArray,
657            lightboxOpen: false,
658            currentImageIndex: 0,
659
660            openLightbox(index) {
661                if (this.images.length === 0) return;
662                this.currentImageIndex = index;
663                this.lightboxOpen = true;
664                document.body.style.overflow = 'hidden';
665            },
666
667            closeLightbox() {
668                this.lightboxOpen = false;
669                document.body.style.overflow = 'auto';
670            },
671
672            prevImage() {
673                if (this.images.length <= 1) return;
674                if (this.currentImageIndex > 0) {
675                    this.currentImageIndex--;
676                } else {
677                    this.currentImageIndex = this.images.length - 1;
678                }
679            },
680
681            nextImage() {
682                if (this.images.length <= 1) return;
683                if (this.currentImageIndex < this.images.length - 1) {
684                    this.currentImageIndex++;
685                } else {
686                    this.currentImageIndex = 0;
687                }
688            }
689        }));
690    }
691
692    if (window.Alpine) {
693        registerMusorainkAlpineComponents();
694    }
695
696    document.addEventListener('alpine:init', registerMusorainkAlpineComponents);
697
698    document.addEventListener('turbo:before-cache', () => {
699        document.body.style.overflow = 'auto';
700    }, {
701        once: true
702    });
703</script>
703
704
705<div class="max-w-4xl mx-auto px-4 py-8 md:py-12">
706
707    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6">
708        <div>
709            <h1 class="text-3xl md:text-4xl font-bold text-brand-dark tracking-tight">Műsorújság</h1>
710            <p class="text-gray-500 mt-2">Hallgasd vissza kedvenc műsoraidat</p>
711        </div>
712
713        <div x-data="datePicker('2026-09-24')" x-init="initDate()" class="relative w-full md:w-auto" x-cloak>
714            <div class="flex items-center justify-between w-full bg-brand-grey rounded-xl p-1 shadow-sm border border-gray-100">
715
716                <a href="?datum=2026-09-23" class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-brand-dark hover:bg-white rounded-lg transition-all shrink-0" title="Előző nap" data-turbo-action="advance">
717                    <i class="fa-solid fa-chevron-left text-sm"></i>
718                </a>
719
720                <button
721                    @click="toggle()"
722                    type="button"
723                    class="px-4 py-2 flex-1 flex items-center justify-center gap-2 font-bold text-brand-dark hover:bg-white rounded-lg transition-all min-w-[140px]">
724                    <i class="fa-regular fa-calendar text-brand-green"></i>
725                    <span x-text="formatDisplayDate()"></span>
726                </button>
727
728                <a href="?datum=2026-09-25" class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-brand-dark hover:bg-white rounded-lg transition-all shrink-0" title="Következő nap" data-turbo-action="advance">
729                    <i class="fa-solid fa-chevron-right text-sm"></i>
730                </a>
731            </div>
732
733            <div
734                x-show="open"
735                @click.outside="open = false"
736                x-transition:enter="transition ease-out duration-200"
737                x-transition:enter-start="opacity-0 translate-y-2"
738                x-transition:enter-end="opacity-100 translate-y-0"
739                class="absolute top-full mt-2 left-0 right-0 md:left-1/2 md:-translate-x-1/2 z-[100] bg-white shadow-2xl rounded-2xl p-4 border border-gray-100 min-w-[280px]"
740                x-cloak>
741                <div class="flex items-center justify-between mb-4">
742                    <button type="button" @click="prevMonth()" class="p-2 hover:bg-gray-100 rounded-lg"><i class="fa-solid fa-chevron-left text-xs"></i></button>
743                    <div class="font-bold text-brand-dark" x-text="monthNames[month] + ' ' + year"></div>
744                    <button type="button" @click="nextMonth()" class="p-2 hover:bg-gray-100 rounded-lg"><i class="fa-solid fa-chevron-right text-xs"></i></button>
745                </div>
746
747                <div class="grid grid-cols-7 gap-1 text-center mb-2">
748                    <template x-for="day in ['H', 'K', 'Sze', 'Cs', 'P', 'Szo', 'V']">
749                        <div class="text-[10px] font-bold text-gray-400 uppercase" x-text="day"></div>
750                    </template>
751                </div>
752
753                <div class="grid grid-cols-7 gap-1">
754                    <template x-for="blankday in blankdays">
755                        <div class="p-2"></div>
756                    </template>
757                    <template x-for="(date, dateIndex) in no_of_days" :key="dateIndex">
758                        <button
759                            type="button"
760                            @click="selectDate(date)"
761                            class="p-2 text-sm rounded-lg transition-all"
762                            :class="{
763                        'bg-brand-green text-white font-bold shadow-md': isSelected(date),
764                        'hover:bg-brand-grey text-gray-700': !isSelected(date),
765                        'text-brand-green font-bold': isToday(date) && !isSelected(date)
766                    }"
767                            x-text="date"></button>
768                    </template>
769                </div>
770            </div>
771        </div>
772    </div>
773
774            <div class="space-y-6">
775            
776                <section x-data="{ open: true }"
777                    >
778
779                    <button @click="open = !open" type="button"
780                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
781                        <span class="flex items-center gap-2 text-left">
782                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
783                            Olvasólámpa                                                    </span>
784                        <div class="flex items-center gap-4 shrink-0">
785                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
786                                0:00 - 5:00                            </span>
787
788                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
789                                <i class="fa-solid fa-chevron-down"></i>
790                            </span>
791                        </div>
792                    </button>
793
794                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
795                        <div class="grid-accordion-inner">
796                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
797
798                                                                    
799                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
800
801                                        <div class="shrink-0 mt-0.5">
802                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
803                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
804                                                0:00                                            </div>
805                                        </div>
806
807                                        <div class="flex-1 min-w-0">
808
809                                            <!-- Kategória teljesen külön sorban, a cím felett -->
810                                                                                            <div class="mb-1">
811                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
812                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
813                                                </div>
814                                            
815                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
816                                            <div class="flex items-start gap-2 mb-1.5">
817                                                                                                    <button type="button"
818                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_00.mp3', '\&quot;Isten, hazánkért térdelünk elődbe ...\&quot;', false, 0, true); }"
819                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
820                                                        title="Visszahallgatom az adást">
821                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
822                                                    </button>
823                                                
824                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
825                                                    <a href="/musoraink/adas/723727" class="hover:underline">
826                                                        &quot;Isten, hazánkért térdelünk elődbe ...&quot;                                                    </a>
827
828                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
829                                                                                                    </h3>
830                                            </div>
831
832                                            
833                                                                                            <a href="/musoraink/adas/723727" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
834                                                    » bővebben...
835                                                </a>
836                                            
837                                        </div>
838
839                                        
840                                    </div>
841                                                                    
842                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
843
844                                        <div class="shrink-0 mt-0.5">
845                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
846                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
846shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
847                                                0:05                                            </div>
848                                        </div>
849
850                                        <div class="flex-1 min-w-0">
851
852                                            <!-- Kategória teljesen külön sorban, a cím felett -->
853                                                                                            <div class="mb-1">
854                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
855                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
856                                                </div>
857                                            
858                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
859                                            <div class="flex items-start gap-2 mb-1.5">
860                                                                                                    <button type="button"
861                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_00.mp3', 'Benső végtelen', false, 300, true); }"
862                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
863                                                        title="Visszahallgatom az adást">
864                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
865                                                    </button>
866                                                
867                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
868                                                    <a href="/musoraink/adas/henri-morice-jezus-krisztus-szemelyisege-cimu-kotetbol-kekesi-eniko-olvas-fel-86-5-ism-723728" class="hover:underline">
869                                                        Benső végtelen                                                    </a>
870
871                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
872                                                                                                    </h3>
873                                            </div>
874
875                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
876                                                    Henri Morice: Jézus Krisztus személyisége című kötetből Kékesi Enikő olvas fel.  (86/5.)                                                </div>
877                                            
878                                                                                            <a href="/musoraink/adas/henri-morice-jezus-krisztus-szemelyisege-cimu-kotetbol-kekesi-eniko-olvas-fel-86-5-ism-723728" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
879                                                    » bővebben...
880                                                </a>
881                                            
882                                        </div>
883
884                                        
885                                    </div>
886                                                                    
887                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
888
889                                        <div class="shrink-0 mt-0.5">
890                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
891                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
891shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
892                                                0:15                                            </div>
893                                        </div>
894
895                                        <div class="flex-1 min-w-0">
896
897                                            <!-- Kategória teljesen külön sorban, a cím felett -->
898                                                                                            <div class="mb-1">
899                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
900                                                        <i class="fa-solid fa-folder-open opacity-70"></i> irodalmi és versműsorok                                                    </span>
901                                                </div>
902                                            
903                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
904                                            <div class="flex items-start gap-2 mb-1.5">
905                                                                                                    <button type="button"
906                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_00.mp3', 'Miért szeretem?', false, 900, true); }"
907                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
908                                                        title="Visszahallgatom az adást">
909                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
910                                                    </button>
911                                                
912                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
913                                                    <a href="/musoraink/adas/petri-gyorgy-egy-oszi-levelre-ism-723729" class="hover:underline">
914                                                        Miért szeretem?                                                    </a>
915
916                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
917                                                                                                    </h3>
918                                            </div>
919
920                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
921                                                    vallomások irodalomról, művekről, szerzőkről
922Petri György: Egy őszi levélre
923Szerkesztő: Mihályi Anikó                                                </div>
924                                            
925                                                                                            <a href="/musoraink/adas/petri-gyorgy-egy-oszi-levelre-ism-723729" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
926                                                    » bővebben...
927                                                </a>
928                                            
929                                        </div>
930
931                                        
932                                    </div>
933                                                                    
934                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
935
936                                        <div class="shrink-0 mt-0.5">
937                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
938                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
938shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
939                                                0:30                                            </div>
940                                        </div>
941
942                                        <div class="flex-1 min-w-0">
943
944                                            <!-- Kategória teljesen külön sorban, a cím felett -->
945                                                                                            <div class="mb-1">
946                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
947                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
948                                                </div>
949                                            
950                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
951                                            <div class="flex items-start gap-2 mb-1.5">
952                                                                                                    <button type="button"
953                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_00.mp3', 'Hangárium', false, 1800, true); }"
954                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
955                                                        title="Visszahallgatom az adást">
956                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
957                                                    </button>
958                                                
959                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
960                                                    <a href="/musoraink/adas/magyar-kincsek-unnepe-2026-ism-723730" class="hover:underline">
961                                                        Hangárium                                                    </a>
962
963                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
964                                                                                                    </h3>
965                                            </div>
966
967                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
968                                                    Magyar Kincsek Ünnepe 2026
969Szerkesztő: Csuth Judit                                                </div>
970                                            
971                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
972                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
973                                                </button>
974
975                                                <div x-show="detailsOpen"
976                                                    x-transition:enter="transition ease-out duration-200"
977                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
978                                                    x-transition:enter-end="opacity-100 translate-y-0"
979                                                    x-cloak
980                                                    class="mt-3 pt-3 border-t border-gray-100">
981
982                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
983                                                            Kroó György emléke és Kurtág György géniusza előtt tiszteleg a Magyar Kincsek Ünnepe 2026, mely október 11-én ebben az évben is egyetlen napba sűríti a magyar zene páratlan gazdagságát a Zeneakadémia Nagytermében a Concerto Budapest szervezésében. Erről a három koncertet kínáló napról beszélgetünk Keller András Kossuth-díjas hegedűművésszel, a Concerto Budapest főzeneigazgatójával. 
984A képen Kurtág György és Keller András. (Fotó: Éder Vera)                                                        </div>
985                                                    
986                                                    
987                                                </div>
988                                            
989                                        </div>
990
991                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
992                                                <a href="/musoraink/adas/magyar-kincsek-unnepe-2026-ism-723730" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
993                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/723730/kicsi/00_Keller_Kurt__g_c___der_Vera__2515_.jpg"
994                                                        alt="Műsor kép"
995                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
996                                                </a>
997                                            </div>
998                                        
999                                    </div>
1000                                                                    
1001                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1002
1003                                        <div class="shrink-0 mt-0.5">
1004                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1005                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1005shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1006                                                1:00                                            </div>
1007                                        </div>
1008
1009                                        <div class="flex-1 min-w-0">
1010
1011                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1012                                                                                            <div class="mb-1">
1013                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1014                                                        <i class="fa-solid fa-folder-open opacity-70"></i> szolgáltató és életviteli műsorok                                                    </span>
1015                                                </div>
1016                                            
1017                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1018                                            <div class="flex items-start gap-2 mb-1.5">
1019                                                                                                    <button type="button"
1020                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_01.mp3', 'Házunk táján', false, 0, true); }"
1021                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1022                                                        title="Visszahallgatom az adást">
1023                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1024                                                    </button>
1025                                                
1026                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1027                                                    <a href="/musoraink/adas/723731" class="hover:underline">
1028                                                        Házunk táján                                                    </a>
1029
1030                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1031                                                                                                    </h3>
1032                                            </div>
1033
1034                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1035                                                    Szerkesztő: Szabó Csilla                                                </div>
1036                                            
1037                                                                                            <a href="/musoraink/adas/723731" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1038                                                    » bővebben...
1039                                                </a>
1040                                            
1041                                        </div>
1042
1043                                        
1044                                    </div>
1045                                                                    
1046                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1047
1048                                        <div class="shrink-0 mt-0.5">
1049                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1050                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1051                                                2:00                                            </div>
1052                                        </div>
1053
1054                                        <div class="flex-1 min-w-0">
1055
1056                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1057                                                                                            <div class="mb-1">
1058                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1059                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb kulturális műsorok                                                    </span>
1060                                                </div>
1061                                            
1062                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1063                                            <div class="flex items-start gap-2 mb-1.5">
1064                                                                                                    <button type="button"
1065                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_02.mp3', 'Akvarell', false, 0, true); }"
1066                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1067                                                        title="Visszahallgatom az adást">
1068                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1069                                                    </button>
1070                                                
1071                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1072                                                    <a href="/musoraink/adas/orizni-fenyt-kiallitas-bazsonyi-arany-kepeibol-es-verseibol-btm-eltunt-epuletek-hirmondoi-ism-723732" class="hover:underline">
1073                                                        Akvarell                                                    </a>
1074
1075                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1076                                                                                                    </h3>
1077                                            </div>
1078
1079                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1080                                                    kulturális paletta
1081Őrizni a fényt: kiállítás Bazsonyi Arany képeiből és verseiből
1082BTM: Eltűnt épületek hírmondói
1083Szerkesztő: Fazekas Gyöngyvér                                                </div>
1084                                            
1085                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
1086                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
1087                                                </button>
1088
1089                                                <div x-show="detailsOpen"
1090                                                    x-transition:enter="transition ease-out duration-200"
1091                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
1092                                                    x-transition:enter-end="opacity-100 translate-y-0"
1093                                                    x-cloak
1094                                                    class="mt-3 pt-3 border-t border-gray-100">
1095
1096                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
1097                                                            Esztergomi Keresztény Múzeum, Szombathelyi Modern Képtár, Kalocsai Érseki Kincstár – csak néhány azon hazai közgyűjtemények közül, melyek Bazsonyi Arany munkáit őrzik.  Bazsonyi festészetében a magyar múlt történelmi eseményei, és a Biblia történetei a modern képalkotással kapcsolódnak össze. Különös látásmódú képi megfogalmazásai egyszerre szürreálisak, ugyanakkor a figuralitás sem áll tőle távol. Az 1928-ban Gyulajon született művész életét számos 
1097szenvedésteli esemény kísérte: miután családját kulákká nyilvánították, el kellett hagynia a főiskolát, miközben édesapját és öccsét is bebörtönözték. Ez a fájdalom visszatérően megjelenik alkotásaiban. Bazsonyi Arany munkáiból számos kiállítás nyílt hazánkban és külföldön is, műveinek nagyobb részét még életében Tolna megyének ajándékozta. Képzőművészeti munkássága mellett figyelemre méltó költői tevékenysége is, versei egy most nyíló időszaki kiállításban szintén helyet kaptak. A Törökbálinti Falumúzeumban látható tárlaton Hubert Ildikó irodalomtörténésszel és a kurátor Tüskés Anna művészettörténésszel beszélget Tóth Zsófia.
1098A középkor világát kevés dolog idézi fel olyan kézzelfoghatóan, mint az egykor élt emberek által hátrahagyott épített és tárgyi örökség. Az Eltűnt épületek hírmondói című állandó kiállítás, illetve az ehhez kapcsolódó időszaki tárlat ezek segítségével idézi fel Budapest középkori épített örökségét és szakrális tárgyi kultúráját. A bemutatott leleteken keresztül olyan templomok, kolostorok és más egyházi épületek története rajzolódik ki, amelyeknek ma már gyakran csak régészeti nyomai maradtak fenn. Takács Ágoston régész, muzeológus, a Középkori Kőtár gyűjteményvezetője és Terei György régész, muzeológus, a Középkori Főosztály vezetője mesél a középkori Buda, Pest és Óbuda nyomairól Fazekas Gyöngyvérnek.                                                        </div>
1099                                                    
1100                                                    
1101                                                </div>
1102                                            
1103                                        </div>
1104
1105                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
1106                                                <a href="/musoraink/adas/orizni-fenyt-kiallitas-bazsonyi-arany-kepeibol-es-verseibol-btm-eltunt-epuletek-hirmondoi-ism-723732" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
1107                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/723732/kicsi/IMG_20260912_155939.jpg"
1108                                                        alt="Műsor kép"
1109                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
1110                                                </a>
1111                                            </div>
1112                                        
1113                                    </div>
1114                                                                    
1115                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1116
1117                                        <div class="shrink-0 mt-0.5">
1118                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1119                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1120                                                3:00                                            </div>
1121                                        </div>
1122
1123                                        <div class="flex-1 min-w-0">
1124
1125                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1126                                                                                            <div class="mb-1">
1127                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1128                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb kulturális műsorok                                                    </span>
1129                                                </div>
1130                                            
1131                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1132                                            <div class="flex items-start gap-2 mb-1.5">
1133                                                                                                    <button type="button"
1134                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_03.mp3', 'M
1134űvészbejáró', false, 0, true); }"
1135                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1136                                                        title="Visszahallgatom az adást">
1137                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1138                                                    </button>
1139                                                
1140                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1141                                                    <a href="/musoraink/adas/nemeth-laszlo-iszony-c-regenyenek-elso-nagyszinpadi-valtozata-keszult-el-szatmarnemetiben-1-resz-ism-723733" class="hover:underline">
1142                                                        Művészbejáró                                                    </a>
1143
1144                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1145                                                                                                    </h3>
1146                                            </div>
1147
1148                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1149                                                    Németh László Iszony c. regényének első nagyszínpadi változata készült el Szatmárnémetiben 1. rész
1150Szerkesztő: Ungvári Judit                                                </div>
1151                                            
1152                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
1153                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
1154                                                </button>
1155
1156                                                <div x-show="detailsOpen"
1157                                                    x-transition:enter="transition ease-out duration-200"
1158                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
1159                                                    x-transition:enter-end="opacity-100 translate-y-0"
1160                                                    x-cloak
1161                                                    class="mt-3 pt-3 border-t border-gray-100">
1162
1163                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
1164                                                            Sokrétegű igazi remekmű Németh László regénye, az Iszony, amelynek első nagyszínházi feldolgozását mutatta be a Szatmárnémeti Színház Harag György Társulata 2026. augusztus 8-án a Gyulai Várszínház programjában. A Szabó K. István rendezésében és adaptációjában megvalósult produkcióról beszélgetünk Oláh Zsolt színházi elemző-szakíróval. Műsorunkban az előadásból részleteket is hallhatnak a szatmárnémeti színház színészeinek előadásában. Két hét múlva folytatjuk.                                                        </div>
1165                                                    
1166                                                    
1167                                                </div>
1168                                            
1169                                        </div>
1170
1171                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
1172                                                <a href="/musoraink/adas/nemeth-laszlo-iszony-c-regenyenek-elso-nagyszinpadi-valtozata-keszult-el-szatmarnemetiben-1-resz-ism-723733" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
1173                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/723733/kicsi/768372610_1665507125579819_4854156465661791121_n.jpg"
1174                                                        alt="Műsor kép"
1175                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
1176                                                </a>
1177                                            </div>
1178                                        
1179                                    </div>
1180                                                                    
1181                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1182
1183                                        <div class="shrink-0 mt-0.5">
1184                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1185                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1185shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1186                                                4:00                                            </div>
1187                                        </div>
1188
1189                                        <div class="flex-1 min-w-0">
1190
1191                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1192                                                                                            <div class="mb-1">
1193                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1194                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
1195                                                </div>
1196                                            
1197                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1198                                            <div class="flex items-start gap-2 mb-1.5">
1199                                                                                                    <button type="button"
1200                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_04.mp3', 'Vendég-oldal', false, 0, true); }"
1201                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1202                                                        title="Visszahallgatom az adást">
1203                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1204                                                    </button>
1205                                                
1206                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1207                                                    <a href="/musoraink/adas/mezokovesden-27-gepesz-talalkozo-kisgyorben-nepmuveszeti-sokadalom-ism-723734" class="hover:underline">
1208                                                        Vendég-oldal                                                    </a>
1209
1210                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1211                                                                                                    </h3>
1212                                            </div>
1213
1214                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1215                                                    válogatás a Szent István Rádió műsorából
1216Mezőkövesden a 27. Gépész találkozó
1217Kisgyőrben a népművészeti sokadalom                                                </div>
1218                                            
1219                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
1220                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
1221                                                </button>
1222
1223                                                <div x-show="detailsOpen"
1224                                                    x-transition:enter="transition ease-out duration-200"
1225                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
1226                                                    x-transition:enter-end="opacity-100 translate-y-0"
1227                                                    x-cloak
1228                                                    class="mt-3 pt-3 border-t border-gray-100">
1229
1230                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
1231                                                            Mai összeállításunkban először Itt élünk című műsorunkat hallják Papp Péter szerkesztésében. Ma Mezőkövesdet és Kisgyőrt látogatjuk meg. Mezőkövesden a 27. Gépész találkozóról lesz szó, Kisgyőrben a népművészeti sokadalomban veszünk részt. 
1232Zenei szerkesztő: Vasvári Bernadett
1233Műsorvezető: Molnár András                                                        </div>
1234                                                    
1235                                                    
1236                                                </div>
1237                                            
1238                                        </div>
1239
1240                                        
1241                                    </div>
1242                                
1243                            </div>
1244                        </div>
1245                    </div>
1246                </section>
1247
1248            
1249                <section x-data="{ open: true }"
1250                    >
1251
1252                    <button @click="open = !open" type="button"
1253                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
1254                        <span class="flex items-center gap-2 text-left">
1255                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
1256                            Ébredj, ember!                                                    </span>
1257                        <div class="flex items-center gap-4 shrink-0">
1258                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
1259                                5:00 - 7:00                            </span>
1260
1261                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
1262                                <i class="fa-solid fa-chevron-down"></i>
1263                            </span>
1264                        </div>
1265                    </button>
1266
1267                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
1268                        <div class="grid-accordion-inner">
1269                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
1270
1271                                                                    
1272                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1273
1274                                        <div class="shrink-0 mt-0.5">
1275                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1276                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1277                                                5:00                                            </div>
1278                                        </div>
1279
1280                                        <div class="flex-1 min-w-0">
1281
1282                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1283                                                                                            <div class="mb-1">
1284                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1285                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1286                                                </div>
1287                                            
1288                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1289                                            <div class="flex items-start gap-2 mb-1.5">
1290                                                                                                    <button type="button"
1291                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_05.mp3', 'Körkép', false, 0, true); }"
1292                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1293                                                        title="Visszahallgatom az adást">
1294                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1295                                                    </button>
1296                                                
1297                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1298                                                    <a href="/musoraink/adas/723735" class="hover:underline">
1299                                                        Körkép                                                    </a>
1300
1301                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1302                                                                                                    </h3>
1303                                            </div>
1304
1305                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1306                                                    orosházi és debreceni összeállítás                                                </div>
1307                                            
1308                                                                                            <a href="/musoraink/adas/723735" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1309                                                    » bővebben...
1310                                                </a>
1311                                            
1312                                        </div>
1313
1314                                        
1315                                    </div>
1316                                                                    
1317                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1318
1319                                        <div class="shrink-0 mt-0.5">
1320                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1321                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1322                                                5:30                                            </div>
1323                                        </div>
1324
1325                                        <div class="flex-1 min-w-0">
1326
1327                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1328                                                                                            <div class="mb-1">
1329                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1330                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1331                                                </div>
1332                                            
1333                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1334                                            <div class="flex items-start gap-2 mb-1.5">
1335                                                                                                    <button type="button"
1336                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_05.mp3', 'Hírek', false, 1800, true); }"
1337                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1338                                                        title="Visszahallgatom az adást">
1339                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1340                                                    </button>
1341                                                
1342                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1343                                                    <a href="/musoraink/adas/723736" class="hover:underline">
1344                                                        Hírek                                                    </a>
1345
1346                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1347                                                                                                    </h3>
1348                                            </div>
1349
1350                                            
1351                                                                                            <a href="/musoraink/adas/723736" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1352                                                    » bővebben...
1353                                                </a>
1354                                            
1355                                        </div>
1356
1357                                        
1358                                    </div>
1359                                                                    
1360                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1361
1362                                        <div class="shrink-0 mt-0.5">
1363                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1364                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1364shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1365                                                5:34                                            </div>
1366                                        </div>
1367
1368                                        <div class="flex-1 min-w-0">
1369
1370                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1371                                                                                            <div class="mb-1">
1372                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1373                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
1374                                                </div>
1375                                            
1376                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1377                                            <div class="flex items-start gap-2 mb-1.5">
1378                                                                                                    <button type="button"
1379                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_05.mp3', 'Napi evangélium', false, 2040, true); }"
1380                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1381                                                        title="Visszahallgatom az adást">
1382                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1383                                                    </button>
1384                                                
1385                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1386                                                    <a href="/musoraink/adas/napi-evangelium-szent-gellert-puspok-vertanu-mt-10-28-33" class="hover:underline">
1387                                                        Napi evangélium                                                    </a>
1388
1389                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1390                                                                                                    </h3>
1391                                            </div>
1392
1393                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1394                                                    Szent Gellért püspök, vértanú
1395** Mt 10,28-33 **
1396Felolvassa: Varga László                                                </div>
1397                                            
1398                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
1399                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
1400                                                </button>
1401
1402                                                <div x-show="detailsOpen"
1403                                                    x-transition:enter="transition ease-out duration-200"
1404                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
1405                                                    x-transition:enter-end="opacity-100 translate-y-0"
1406                                                    x-cloak
1407                                                    class="mt-3 pt-3 border-t border-gray-100">
1408
1409                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
1410                                                            Ne féljetek azoktól, akik megölik a testet, de a lelket nem tudják megölni. Féljetek inkább attól, aki a lelket is és a testet is el tudja pusztítani a gyehennában. Két verebet ugye egy fillérért árulnak? És egy sem esik közülük a földre a ti Atyátok tudta nélkül. Nektek azonban még a hajszálaitok is mind meg vannak számlálva a fejeteken. Ne féljetek hát, hisz különbek vagytok ti sok verébnél. Mindazt, aki megvall engem az emberek előtt, én is megvallom Atyám előtt, aki a mennyekben van. De azt, aki megtagad engem az emberek előtt, én is meg fogom tagadni Atyám előtt, aki a mennyekben van. 
1411Olvasmányok, ünnepek a liturgikus naptárban.                                                        </div>
1412                                                    
1413                                                    
1414                                                </div>
1415                                            
1416                                        </div>
1417
1418                                        
1419                                    </div>
1420                                                                    
1421                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1422
1423                                        <div class="shrink-0 mt-0.5">
1424                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1425                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1425shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1426                                                5:40                                            </div>
1427                                        </div>
1428
1429                                        <div class="flex-1 min-w-0">
1430
1431                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1432                                                                                            <div class="mb-1">
1433                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1434                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
1435                                                </div>
1436                                            
1437                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1438                                            <div class="flex items-start gap-2 mb-1.5">
1439                                                                                                    <button type="button"
1440                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_05.mp3', 'A Vatikáni Rádió magyar műsora', false, 2400, true); }"
1441                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1442                                                        title="Visszahallgatom az adást">
1443                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1444                                                    </button>
1445                                                
1446                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1447                                                    <a href="/musoraink/adas/723738" class="hover:underline">
1448                                                        A Vatikáni Rádió magyar műsora                                                    </a>
1449
1450                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1451                                                                                                    </h3>
1452                                            </div>
1453
1454                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1455                                                    (a tegnap esti adás ismétlése)                                                </div>
1456                                            
1457                                                                                            <a href="/musoraink/adas/723738" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1458                                                    » bővebben...
1459                                                </a>
1460                                            
1461                                        </div>
1462
1463                                        
1464                                    </div>
1465                                                                    
1466                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1467
1468                                        <div class="shrink-0 mt-0.5">
1469                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1470                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1471                                                6:00                                            </div>
1472                                        </div>
1473
1474                                        <div class="flex-1 min-w-0">
1475
1476                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1477                                                                                            <div class="mb-1">
1478                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1479                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
1480                                                </div>
1481                                            
1482                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1483                                            <div class="flex items-start gap-2 mb-1.5">
1484                                                                                                    <button type="button"
1485                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_06.mp3', 'Harangszó', false, 0, true); }"
1486                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1487                                                        title="Visszahallgatom az adást">
1488                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1489                                                    </button>
1490                                                
1491                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1492                                                    <a href="/musoraink/adas/723739" class="hover:underline">
1493                                                        Harangszó                                                    </a>
1494
1495                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1496                                                                                                    </h3>
1497                                            </div>
1498
1499                                            
1500                                                                                            <a href="/musoraink/adas/723739" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1501                                                    » bővebben...
1502                                                </a>
1503                                            
1504                                        </div>
1505
1506                                        
1507                                    </div>
1508                                                                    
1509                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1510
1511                                        <div class="shrink-0 mt-0.5">
1512                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1513                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1514                                                6:01                                            </div>
1515                                        </div>
1516
1517                                        <div class="flex-1 min-w-0">
1518
1519                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1520                                                                                            <div class="mb-1">
1521                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1522                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1523                                                </div>
1524                                            
1525                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1526                                            <div class="flex items-start gap-2 mb-1.5">
1527                                                                                                    <button type="button"
1528                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_06.mp3', 'Hírek', false, 60, true); }"
1529                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1530                                                        title="Visszahallgatom az adást">
1531                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1532                                                    </button>
1533                                                
1534                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1535                                                    <a href="/musoraink/adas/723740" class="hover:underline">
1536                                                        Hírek                                                    </a>
1537
1538                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1539                                                                                                    </h3>
1540                                            </div>
1541
1542                                            
1543                                                                                            <a href="/musoraink/adas/723740" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1544                                                    » bővebben...
1545                                                </a>
1546                                            
1547                                        </div>
1548
1549                                        
1550                                    </div>
1551                                                                    
1552                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1553
1554                                        <div class="shrink-0 mt-0.5">
1555                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1556                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1556shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1557                                                6:15                                            </div>
1558                                        </div>
1559
1560                                        <div class="flex-1 min-w-0">
1561
1562                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1563                                                                                            <div class="mb-1">
1564                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1565                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
1566                                                </div>
1567                                            
1568                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1569                                            <div class="flex items-start gap-2 mb-1.5">
1570                                                                                                    <button type="button"
1571                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_06.mp3', 'Benső végtelen', false, 900, true); }"
1572                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1573                                                        title="Visszahallgatom az adást">
1574                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1575                                                    </button>
1576                                                
1577                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1578                                                    <a href="/musoraink/adas/henri-morice-jezus-krisztus-szemelyisege-cimu-kotetbol-kekesi-eniko-olvas-fel-86-6-723741" class="hover:underline">
1579                                                        Benső végtelen                                                    </a>
1580
1581                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1582                                                                                                    </h3>
1583                                            </div>
1584
1585                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1586                                                    Henri Morice: Jézus Krisztus személyisége című kötetből Kékesi Enikő olvas fel.  (86/6.)                                                </div>
1587                                            
1588                                                                                            <a href="/musoraink/adas/henri-morice-jezus-krisztus-szemelyisege-cimu-kotetbol-kekesi-eniko-olvas-fel-86-6-723741" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1589                                                    » bővebben...
1590                                                </a>
1591                                            
1592                                        </div>
1593
1594                                        
1595                                    </div>
1596                                                                    
1597                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1598
1599                                        <div class="shrink-0 mt-0.5">
1600                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1601                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1601shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1602                                                6:30                                            </div>
1603                                        </div>
1604
1605                                        <div class="flex-1 min-w-0">
1606
1607                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1608                                                                                            <div class="mb-1">
1609                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1610                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1611                                                </div>
1612                                            
1613                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1614                                            <div class="flex items-start gap-2 mb-1.5">
1615                                                                                                    <button type="button"
1616                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_06.mp3', 'Hírtükör', false, 1801, true); }"
1617                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1618                                                        title="Visszahallgatom az adást">
1619                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1620                                                    </button>
1621                                                
1622                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1623                                                    <a href="/musoraink/adas/723742" class="hover:underline">
1624                                                        Hírtükör                                                    </a>
1625
1626                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1627                                                                                                    </h3>
1628                                            </div>
1629
1630                                            
1631                                                                                            <a href="/musoraink/adas/723742" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1632                                                    » bővebben...
1633                                                </a>
1634                                            
1635                                        </div>
1636
1637                                        
1638                                    </div>
1639                                                                    
1640                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1641
1642                                        <div class="shrink-0 mt-0.5">
1643                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1644                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1645                                                6:50                                            </div>
1646                                        </div>
1647
1648                                        <div class="flex-1 min-w-0">
1649
1650                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1651                                                                                            <div class="mb-1">
1652                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1653                                                        <i class="fa-solid fa-folder-open opacity-70"></i> ismeretterjesztő műsorok                                                    </span>
1654                                                </div>
1655                                            
1656                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1657                                            <div class="flex items-start gap-2 mb-1.5">
1658                                                                                                    <button type="button"
1659                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_06.mp3', 'Múltidéző', false, 3000, true); }"
1660                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1661                                                        title="Visszahallgatom az adást">
1662                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1663                                                    </button>
1664                                                
1665                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1666                                                    <a href="/musoraink/adas/723743" class="hover:underline">
1667                                                        Múltidéző                                                    </a>
1668
1669                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1670                                                                                                    </h3>
1671                                            </div>
1672
1673                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1674                                                    Szerkesztő: Szikora József                                                </div>
1675                                            
1676                                                                                            <a href="/musoraink/adas/723743" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1677                                                    » bővebben...
1678                                                </a>
1679                                            
1680                                        </div>
1681
1682                                        
1683                                    </div>
1684                                                                    
1685                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1686
1687                                        <div class="shrink-0 mt-0.5">
1688                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1689                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1690                                                6:52                                            </div>
1691                                        </div>
1692
1693                                        <div class="flex-1 min-w-0">
1694
1695                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1696                                                                                            <div class="mb-1">
1697                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1698                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
1699                                                </div>
1700                                            
1701                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1702                                            <div class="flex items-start gap-2 mb-1.5">
1703                                                                                                    <button type="button"
1704                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_06.mp3', 'Reggeli ima', false, 3120, true); }"
1705                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1706                                                        title="Visszahallgatom az adást">
1707                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1708                                                    </button>
1709                                                
1710                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1711                                                    <a href="/musoraink/adas/723744" class="hover:underline">
1712                                                        Reggeli ima                                                    </a>
1713
1714                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1715                                                                                                    </h3>
1716                                            </div>
1717
1718                                            
1719                                                                                            <a href="/musoraink/adas/723744" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1720                                                    » bővebben...
1721                                                </a>
1722                                            
1723                                        </div>
1724
1725                                        
1726                                    </div>
1727                                
1728                            </div>
1729                        </div>
1730                    </div>
1731                </section>
1732
1733            
1734                <section x-data="{ open: true }"
1735                    >
1736
1737                    <button @click="open = !open" type="button"
1738                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
1739                        <span class="flex items-center gap-2 text-left">
1740                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
1741                            Zenés napköszöntő                                                    </span>
1742                        <div class="flex items-center gap-4 shrink-0">
1743                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
1744                                7:00 - 9:00                            </span>
1745
1746                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
1747                                <i class="fa-solid fa-chevron-down"></i>
1748                            </span>
1749                        </div>
1750                    </button>
1751
1752                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
1753                        <div class="grid-accordion-inner">
1754                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
1755
1756                                                                    
1757                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1758
1759                                        <div class="shrink-0 mt-0.5">
1760                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1761                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1761shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1762                                                7:00                                            </div>
1763                                        </div>
1764
1765                                        <div class="flex-1 min-w-0">
1766
1767                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1768                                                                                            <div class="mb-1">
1769                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1770                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
1771                                                </div>
1772                                            
1773                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1774                                            <div class="flex items-start gap-2 mb-1.5">
1775                                                                                                    <button type="button"
1776                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_07.mp3', 'Szentmise', false, 0, true); }"
1777                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1778                                                        title="Visszahallgatom az adást">
1779                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1780                                                    </button>
1781                                                
1782                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1783                                                    <a href="/musoraink/adas/723745" class="hover:underline">
1784                                                        Szentmise                                                    </a>
1785
1786                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1787                                                                                                    </h3>
1788                                            </div>
1789
1790                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1791                                                    közvetítés Budapestről, a városmajori Jézus Szíve plébániatemplomból                                                </div>
1792                                            
1793                                                                                            <a href="/musoraink/adas/723745" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1794                                                    » bővebben...
1795                                                </a>
1796                                            
1797                                        </div>
1798
1799                                        
1800                                    </div>
1801                                                                    
1802                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1803
1804                                        <div class="shrink-0 mt-0.5">
1805                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1806                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1807                                                7:30                                            </div>
1808                                        </div>
1809
1810                                        <div class="flex-1 min-w-0">
1811
1812                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1813                                                                                            <div class="mb-1">
1814                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1815                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1816                                                </div>
1817                                            
1818                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1819                                            <div class="flex items-start gap-2 mb-1.5">
1820                                                                                                    <button type="button"
1821                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_07.mp3', 'Hírek', false, 1800, true); }"
1822                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1823                                                        title="Visszahallgatom az adást">
1824                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1825                                                    </button>
1826                                                
1827                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1828                                                    <a href="/musoraink/adas/723746" class="hover:underline">
1829                                                        Hírek                                                    </a>
1830
1831                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1832                                                                                                    </h3>
1833                                            </div>
1834
1835                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1836                                                    közlekedés, lapszemle, műsorajánló                                                </div>
1837                                            
1838                                                                                            <a href="/musoraink/adas/723746" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1839                                                    » bővebben...
1840                                                </a>
1841                                            
1842                                        </div>
1843
1844                                        
1845                                    </div>
1846                                                                    
1847                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1848
1849                                        <div class="shrink-0 mt-0.5">
1850                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1851                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1852                                                8:00                                            </div>
1853                                        </div>
1854
1855                                        <div class="flex-1 min-w-0">
1856
1857                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1858                                                                                            <div class="mb-1">
1859                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1860                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1861                                                </div>
1862                                            
1863                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1864                                            <div class="flex items-start gap-2 mb-1.5">
1865                                                                                                    <button type="button"
1866                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_08.mp3', 'Hírek', false, 0, true); }"
1867                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1868                                                        title="Visszahallgatom az adást">
1869                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1870                                                    </button>
1871                                                
1872                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1873                                                    <a href="/musoraink/adas/723747" class="hover:underline">
1874                                                        Hírek                                                    </a>
1875
1876                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1877                                                                                                    </h3>
1878                                            </div>
1879
1880                                            
1881                                                                                            <a href="/musoraink/adas/723747" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1882                                                    » bővebben...
1883                                                </a>
1884                                            
1885                                        </div>
1886
1887                                        
1888                                    </div>
1889                                                                    
1890                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1891
1892                                        <div class="shrink-0 mt-0.5">
1893                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1894                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1895                                                8:08                                            </div>
1896                                        </div>
1897
1898                                        <div class="flex-1 min-w-0">
1899
1900                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1901                                                                                            <div class="mb-1">
1902                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1903                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1904                                                </div>
1905                                            
1906                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1907                                            <div class="flex items-start gap-2 mb-1.5">
1908                                                                                                    <button type="button"
1909                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_08.mp3', 'Reggeli riport', false, 480, true); }"
1910                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1911                                                        title="Visszahallgatom az adást">
1912                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1913                                                    </button>
1914                                                
1915                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1916                                                    <a href="/musoraink/adas/elte-kutatas-nehezebb-dolga-van-mai-gyerekeknek-vekety-boglarka-az-elte-egyetemi-adjunktusa-723748" class="hover:underline">
1917                                                        Reggeli riport                                                    </a>
1918
1919                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1920                                                                                                    </h3>
1921                                            </div>
1922
1923                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
1924                                                    ELTE kutatás: nehezebb dolga van a mai gyerekeknek?
1925Vekety Boglárka, az ELTE egyetemi adjunktusa
1926Szerkesztő: Balázs Zsanett                                                </div>
1927                                            
1928                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
1929                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
1930                                                </button>
1931
1932                                                <div x-show="detailsOpen"
1933                                                    x-transition:enter="transition ease-out duration-200"
1934                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
1935                                                    x-transition:enter-end="opacity-100 translate-y-0"
1936                                                    x-cloak
1937                                                    class="mt-3 pt-3 border-t border-gray-100">
1938
1939                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
1940                                                            Az     ELTE PPK kutatóinak friss vizsgálata  szerint nem igaz, hogy a mai fiataloknak összességében több érzelmi és viselkedési problémájuk lenne, mint a korábbi generációknak. 
1941Általánosan elterjedt az a vélekedés, hogy a mentális egészséggel kapcsolatos problémák egyre gyakoribbak a fiatalabb generációk körében.  Ennek alátámasztására viszont kevés objektív összehasonlító adat áll rendelkezésre. Az ELTE PPK Neveléstudományi Intézet kutatói egy nemzetközi együttműködés keretében 175 reprezentatív, a világ különböző pontjairól származó kutatás adatait használták fel, és az adatok metaanalitikus elemzésével szerettek volna objektív képet kapni a fiatalok (1–18 évesek) körében tapasztalható érzelmi és viselkedési problémák mértékének változásáról az elmúlt 30–40 évben.
1942Pszichoszomatikus tünetek, szorongás, figyelemzavar - ezekről a kérdésekről is szó esik műsorunkban a   Clinical Child and Family Psychology Review   folyóiratban megjelent kutatás fényében.
1943A kutatásról bővebben   ide kattintva   olvashatnak.                                                        </div>
1944                                                    
1945                                                    
1946                                                </div>
1947                                            
1948                                        </div>
1949
1950                                        
1951                                    </div>
1952                                                                    
1953                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1954
1955                                        <div class="shrink-0 mt-0.5">
1956                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
1957                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
1957shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
1958                                                8:22                                            </div>
1959                                        </div>
1960
1961                                        <div class="flex-1 min-w-0">
1962
1963                                            <!-- Kategória teljesen külön sorban, a cím felett -->
1964                                                                                            <div class="mb-1">
1965                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
1966                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
1967                                                </div>
1968                                            
1969                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
1970                                            <div class="flex items-start gap-2 mb-1.5">
1971                                                                                                    <button type="button"
1972                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_08.mp3', 'Műsorajánló', false, 1320, true); }"
1973                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
1974                                                        title="Visszahallgatom az adást">
1975                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
1976                                                    </button>
1977                                                
1978                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
1979                                                    <a href="/musoraink/adas/723749" class="hover:underline">
1980                                                        Műsorajánló                                                    </a>
1981
1982                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
1983                                                                                                    </h3>
1984                                            </div>
1985
1986                                            
1987                                                                                            <a href="/musoraink/adas/723749" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
1988                                                    » bővebben...
1989                                                </a>
1990                                            
1991                                        </div>
1992
1993                                        
1994                                    </div>
1995                                                                    
1996                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
1997
1998                                        <div class="shrink-0 mt-0.5">
1999                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2000                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2001                                                8:30                                            </div>
2002                                        </div>
2003
2004                                        <div class="flex-1 min-w-0">
2005
2006                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2007                                                                                            <div class="mb-1">
2008                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2009                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
2010                                                </div>
2011                                            
2012                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2013                                            <div class="flex items-start gap-2 mb-1.5">
2014                                                                                                    <button type="button"
2015                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_08.mp3', 'Hírek', false, 1800, true); }"
2016                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2017                                                        title="Visszahallgatom az adást">
2018                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2019                                                    </button>
2020                                                
2021                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2022                                                    <a href="/musoraink/adas/723750" class="hover:underline">
2023                                                        Hírek                                                    </a>
2024
2025                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2026                                                                                                    </h3>
2027                                            </div>
2028
2029                                            
2030                                                                                            <a href="/musoraink/adas/723750" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2031                                                    » bővebben...
2032                                                </a>
2033                                            
2034                                        </div>
2035
2036                                        
2037                                    </div>
2038                                                                    
2039                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2040
2041                                        <div class="shrink-0 mt-0.5">
2042                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2043                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2044                                                8:37                                            </div>
2045                                        </div>
2046
2047                                        <div class="flex-1 min-w-0">
2048
2049                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2050                                                                                            <div class="mb-1">
2051                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2052                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
2053                                                </div>
2054                                            
2055                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2056                                            <div class="flex items-start gap-2 mb-1.5">
2057                                                                                                    <button type="button"
2058                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_08.mp3', 'M
2058űsorajánló', false, 2220, true); }"
2059                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2060                                                        title="Visszahallgatom az adást">
2061                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2062                                                    </button>
2063                                                
2064                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2065                                                    <a href="/musoraink/adas/723751" class="hover:underline">
2066                                                        Műsorajánló                                                    </a>
2067
2068                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2069                                                                                                    </h3>
2070                                            </div>
2071
2072                                            
2073                                                                                            <a href="/musoraink/adas/723751" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2074                                                    » bővebben...
2075                                                </a>
2076                                            
2077                                        </div>
2078
2079                                        
2080                                    </div>
2081                                                                    
2082                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2083
2084                                        <div class="shrink-0 mt-0.5">
2085                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2086                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2087                                                8:45                                            </div>
2088                                        </div>
2089
2090                                        <div class="flex-1 min-w-0">
2091
2092                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2093                                                                                            <div class="mb-1">
2094                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2095                                                        <i class="fa-solid fa-folder-open opacity-70"></i> szolgáltató és életviteli műsorok                                                    </span>
2096                                                </div>
2097                                            
2098                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2099                                            <div class="flex items-start gap-2 mb-1.5">
2100                                                                                                    <button type="button"
2101                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_08.mp3', 'Venite', false, 2700, true); }"
2102                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2103                                                        title="Visszahallgatom az adást">
2104                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2105                                                    </button>
2106                                                
2107                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2108                                                    <a href="/musoraink/adas/723752" class="hover:underline">
2109                                                        Venite                                                    </a>
2110
2111                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2112                                                                                                    </h3>
2113                                            </div>
2114
2115                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2116                                                    egyházi programajánló 
2117Szerkesztő: Hámori Kinga                                                </div>
2118                                            
2119                                                                                            <a href="/musoraink/adas/723752" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2120                                                    » bővebben...
2121                                                </a>
2122                                            
2123                                        </div>
2124
2125                                        
2126                                    </div>
2127                                
2128                            </div>
2129                        </div>
2130                    </div>
2131                </section>
2132
2133            
2134                <section x-data="{ open: true }"
2135                    >
2136
2137                    <button @click="open = !open" type="button"
2138                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
2139                        <span class="flex items-center gap-2 text-left">
2140                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
2141                            Életre-való                                                    </span>
2142                        <div class="flex items-center gap-4 shrink-0">
2143                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
2144                                9:00 - 11:00                            </span>
2145
2146                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
2147                                <i class="fa-solid fa-chevron-down"></i>
2148                            </span>
2149                        </div>
2150                    </button>
2151
2152                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
2153                        <div class="grid-accordion-inner">
2154                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
2155
2156                                                                    
2157                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2158
2159                                        <div class="shrink-0 mt-0.5">
2160                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2161                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2162                                                9:00                                            </div>
2163                                        </div>
2164
2165                                        <div class="flex-1 min-w-0">
2166
2167                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2168                                                                                            <div class="mb-1">
2169                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2170                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
2171                                                </div>
2172                                            
2173                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2174                                            <div class="flex items-start gap-2 mb-1.5">
2175                                                                                                    <button type="button"
2176                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_09.mp3', 'Hírek', false, 0, true); }"
2177                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2178                                                        title="Visszahallgatom az adást">
2179                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2180                                                    </button>
2181                                                
2182                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2183                                                    <a href="/musoraink/adas/723753" class="hover:underline">
2184                                                        Hírek                                                    </a>
2185
2186                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2187                                                                                                    </h3>
2188                                            </div>
2189
2190                                            
2191                                                                                            <a href="/musoraink/adas/723753" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2192                                                    » bővebben...
2193                                                </a>
2194                                            
2195                                        </div>
2196
2197                                        
2198                                    </div>
2199                                                                    
2200                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2201
2202                                        <div class="shrink-0 mt-0.5">
2203                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2204                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2204shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2205                                                9:04                                            </div>
2206                                        </div>
2207
2208                                        <div class="flex-1 min-w-0">
2209
2210                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2211                                                                                            <div class="mb-1">
2212                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2213                                                        <i class="fa-solid fa-folder-open opacity-70"></i> szolgáltató és életviteli műsorok                                                    </span>
2214                                                </div>
2215                                            
2216                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2217                                            <div class="flex items-start gap-2 mb-1.5">
2218                                                                                                    <button type="button"
2219                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_09.mp3', 'Házunk táján', false, 240, true); }"
2220                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2221                                                        title="Visszahallgatom az adást">
2222                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2223                                                    </button>
2224                                                
2225                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2226                                                    <a href="/musoraink/adas/vecsesi-kaposztafeszt-ismet-magyar-zenere-iranyitja-figyelmet-szeptember-26-an-az-el-zene-723754" class="hover:underline">
2227                                                        Házunk táján                                                    </a>
2228
2229                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2230                                                                                                    </h3>
2231                                            </div>
2232
2233                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2234                                                    Vecsési Káposztafeszt 
2235Ismét a magyar zenére irányítja a figyelmet szeptember 26-án az Él a Zene! 
2236Szerkesztő: Csuth Judit                                                </div>
2237                                            
2238                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
2239                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
2240                                                </button>
2241
2242                                                <div x-show="detailsOpen"
2243                                                    x-transition:enter="transition ease-out duration-200"
2244                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
2245                                                    x-transition:enter-end="opacity-100 translate-y-0"
2246                                                    x-cloak
2247                                                    class="mt-3 pt-3 border-t border-gray-100">
2248
2249                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
2250                                                            A hétvégén rendezik meg a Vecsési Káposztafesztet, amely idén különleges jelentőséggel bír a város és a magyar gasztronómiai hagyományok szempontjából: a vecsési savanyú káposzta bekerült a Hungarikumok Gyűjteményébe, így a fesztivál a 100. hungarikum elismerését is ünnepli. A kétnapos, ingyenesen látogatható fesztiválon gasztronómiai versenyeken, hagyomány
2250őrző programokon, koncerteken és családi rendezvényeken vehetnek részt, miközben Vecsés történetével és kulturális örökségével is megismerkedhetnek. A rendezvény egyik különleges külső helyszíne idén is a Bálint Ágnes Emlékház, amely a magyar gyermekirodalom és televíziós mesevilág ikonikus alakjához kapcsolódik: Bálint Ágnes nevéhez olyan közkedvelt mesék fűződnek, mint a Mazsola és Tádé, Frakk, Kukori és Kotkoda, valamint a Futrinka utca. A Káposztafeszt hétvégéjén az Emlékház mindkét napon délután fogadja a látogatókat, a program egyszerre kínál betekintést Bálint Ágnes világába, valamint egy különleges történelmi kalandozást Erzsébet királyné, azaz Sisi korába. Erről beszélgetünk az Emlékház munkatársával Császár Rékával.
2251Az Él a zene! kezdeményezés már 5. alkalommal irányítja a figyelmet a magyar könnyűzenei előadókra, a hazai dalszerzőkre. Az Él a Zene! a magyar könnyűzene napja hívatott lenni, mely idén szeptember 26-án lesz, aminek köszönhetően szombaton országszerte több mint kétezer üzletben, szállodában, vendéglátóhelyen vagy akár benzinkúton kizárólag magyar zene szól majd. A tavalyi évhez hasonlóan, de már jóval nagyobb számban sporteseményeken is hazai zenészek szerzeményei hangzanak el. Az Él a Zene! 2026-os nagykövetei zeneszerető sportolók: Szemerey Zsófi, a magyar kézilabda válogatott és a Győri Audi ETO kapusa, Pigniczki Fanni VB-bronzérmes ritmikus gimnasztikázó, Takács Boglárka atléta, olimpikon, és Pekler Zalán Európa-bajnok sportlövő. A kezdeményezéshez sok rádió és zenetévé is csatlakozik, köztük rádiónk is, így szombaton, ah
2251ol műsorstruktúránk engedi nálunk is magyar zene szól majd. A kezdeményezésről Pekler Zalán Európa-bajnok sportlövővel és Nagy Szabolccsal az Él a zene! megálmodójával beszélgetünk.                                                        </div>
2252                                                    
2253                                                    
2254                                                </div>
2255                                            
2256                                        </div>
2257
2258                                        
2259                                    </div>
2260                                                                    
2261                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2262
2263                                        <div class="shrink-0 mt-0.5">
2264                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2265                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2266                                                10:00                                            </div>
2267                                        </div>
2268
2269                                        <div class="flex-1 min-w-0">
2270
2271                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2272                                                                                            <div class="mb-1">
2273                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2274                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
2275                                                </div>
2276                                            
2277                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2278                                            <div class="flex items-start gap-2 mb-1.5">
2279                                                                                                    <button type="button"
2280                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_10.mp3', 'Hírek', false, 0, true); }"
2281                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2282                                                        title="Visszahallgatom az adást">
2283                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2284                                                    </button>
2285                                                
2286                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2287                                                    <a href="/musoraink/adas/723755" class="hover:underline">
2288                                                        Hírek                                                    </a>
2289
2290                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2291                                                                                                    </h3>
2292                                            </div>
2293
2294                                            
2295                                                                                            <a href="/musoraink/adas/723755" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2296                                                    » bővebben...
2297                                                </a>
2298                                            
2299                                        </div>
2300
2301                                        
2302                                    </div>
2303                                                                    
2304                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2305
2306                                        <div class="shrink-0 mt-0.5">
2307                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2308                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2308shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2309                                                10:04                                            </div>
2310                                        </div>
2311
2312                                        <div class="flex-1 min-w-0">
2313
2314                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2315                                                                                            <div class="mb-1">
2316                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2317                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb közéleti műsorok                                                    </span>
2318                                                </div>
2319                                            
2320                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2321                                            <div class="flex items-start gap-2 mb-1.5">
2322                                                                                                    <button type="button"
2323                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_10.mp3', 'Kamarai percek', false, 240, true); }"
2324                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2325                                                        title="Visszahallgatom az adást">
2326                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2327                                                    </button>
2328                                                
2329                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2330                                                    <a href="/musoraink/adas/elutazott-magyar-csapat-worldskills-shanghai-2026-vilagbajnoksagra-726074" class="hover:underline">
2331                                                        Kamarai percek                                                    </a>
2332
2333                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2334                                                                                                    </h3>
2335                                            </div>
2336
2337                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2338                                                    Sajtóközlemény - Budapest, 2026. szeptember 22.
2339Elutazott a magyar csapat a WorldSkills Shanghai 2026 világbajnokságra                                                </div>
2340                                            
2341                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
2342                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
2343                                                </button>
2344
2345                                                <div x-show="detailsOpen"
2346                                                    x-transition:enter="transition ease-out duration-200"
2347                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
2348                                                    x-transition:enter-end="opacity-100 translate-y-0"
2349                                                    x-cloak
2350                                                    class="mt-3 pt-3 border-t border-gray-100">
2351
2352                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
2353                                                            A   Magyar Kereskedelmi és Iparkamara   szervezésében összesen 105 fős küldöttség utazott a világ egyik legjelentősebb szakmai megmérettetésére, a 48. WorldSkills világbajnokságra. Hazánkat 25 versenyszámban képviseli a 29 fiatal szakember a szeptember 22–27. közötti eseményen. 
2354A szakmák világbajnokságán 68 ország 1385 fiatalja 64 versenyszámban méri össze tudását. A versenyzőknek nemcsak magas szintű szakmai ismereteikről, hanem kreativitásukról, problémamegoldó képességükről, precizitásukról, kitartásukról és a folyamatosan változó szakmai környezethez való alkalmazkodási képességükről is számot kell adniuk a távol-keleti metropoliszban. A Kamara kulcsszerepet játszik a fiatal tehetségek támogatásában és a szakmai utánpótlás nevelésében. A szervezet a gazdaság és a szakképzés összekapcsolásával, valamint a hazai versenyrendszer működtetésével biztosítja a magyar fiatalok sikeres részvételét a nemzetközi WorldSkills mozgalomban.
2355A világbajnokságon ács, ápolás és gondozás, autószerelő, bútorasztalos, épületasztalos, felhőtechnológia, festő - és díszítőfestő, fodrász, grafikus, hűtő- és klímatechnikai szerelő, informatikai rendszerüzemeltető, ipar 4.0, ipari robotika, kertépítő, mechatronika, pék, pincér, szakács, szépségápoló, szoftverfejlesztő, villanyszerelő, virágkötő, víz-, gáz- és fűtésszerelő, vízipari technológiák és webfejlesztő szakmákban indulnak magyar versenyzők. 
2356A WorldSkills célja, hogy a szakmai kiválóságot, a fiatalok tehetségét, a korszerű szakképzést és a gazdaság igényeihez igazodó szakmai tudást nemzetközi szinten is bemutassa és elismerje. A magyar fiatalok sanghaji szereplése egyben a magyar szakképzés teljesítményének bemutatása is. A versenyzők eredményei mögött ugyanis nemcsak egyéni tehetség és teljesítmény áll, hanem oktatók, szakértők, felkészítők, iskolák, szakképzési centrumok, vállalkozások, szakmai 
2356szervezetek és számos támogató összehangolt munkája. 
2357A verseny mellett a WorldSkills Shanghai 2026 kiemelt programja a nemzetközi szakképzési konferencia, amelyen a részt vevő országok képviselői a szakképzés jövőjéről, a szakmai készségek fejlesztéséről, a technológiai változásokról és a munkaerőpiac új kihívásairól folytatnak szakmai párbeszédet. A konferencia lehetőséget teremt a jó gyakorlatok és tapasztalatok megosztására, valamint arra, hogy Magyarország és a Kamara nemzetközi környezetben is bemutassa a szakképzés fejlesztésével kapcsolatos eredményeit és tapasztalatait. 
2358A Kamara koordinálásával felkészült magyar csapat tavaly a negyedik legsikeresebb nemzet lett a szakmák Európa-bajnokságán, az EuroSkills Herning 2025 versenyen Svájc, Németország és Franciaország mögött. Egy szoftverfejlesztő, egy webfejlesztő, egy informatikai rendszerüzemeltető duó és egy ipar 4.0 páros nyert aranyérmet. A magyar csapat további két ezüst és öt bronzérmet gyűjtött be, emellett öt versenyző nyert kiválósági érmet.
2359Fotó: MKIK                                                        </div>
2360                                                    
2361                                                    
2362                                                </div>
2363                                            
2364                                        </div>
2365
2366                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
2367                                                <a href="/musoraink/adas/elutazott-magyar-csapat-worldskills-shanghai-2026-vilagbajnoksagra-726074" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
2368                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/726074/kicsi/WorldSkills_Shanghai_2026_magyar_csapat.jpg"
2369                                                        alt="Műsor kép"
2370                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
2371                                                </a>
2372                                            </div>
2373                                        
2374                                    </div>
2375                                                                    
2376                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2377
2378                                        <div class="shrink-0 mt-0.5">
2379                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2380                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2381                                                10:08                                            </div>
2382                                        </div>
2383
2384                                        <div class="flex-1 min-w-0">
2385
2386                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2387                                                                                            <div class="mb-1">
2388                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2389                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
2390                                                </div>
2391                                            
2392                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2393                                            <div class="flex items-start gap-2 mb-1.5">
2394                                                                                                    <button type="button"
2395                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_10.mp3', 'Tény-kérdés', false, 480, true); }"
2396                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2397                                                        title="Visszahallgatom az adást">
2398                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2399                                                    </button>
2400                                                
2401                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2402                                                    <a href="/musoraink/adas/meghivo-szent-jeromos-bilbliakorok-elso-nyilt-napjara-723756" class="hover:underline">
2403                                                        Tény-kérdés                                                    </a>
2404
2405                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2406                                                                                                    </h3>
2407                                            </div>
2408
2409                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2410                                                    Meghívó a Szent Jeromos Bilbliakörök első nyílt napjára
2411Riporter: Kékesi Enikő                                                </div>
2412                                            
2413                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
2414                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
2415                                                </button>
2416
2417                                                <div x-show="detailsOpen"
2418                                                    x-transition:enter="transition ease-out duration-200"
2419                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
2420                                                    x-transition:enter-end="opacity-100 translate-y-0"
2421                                                    x-cloak
2422                                                    class="mt-3 pt-3 border-t border-gray-100">
2423
2424                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
2425                                                            A szombaton az Avilai Nagy Szent Teréz plébánián megrendezendő nyílt napról Madassery Benvin Sebastian verbita szerzetessel, a Szent Jeromos Katolikus Bibliatársulat elnökével Kékesi Enikő beszélget. 
2426Az ingyenes programra a [email protected] email címen lehet jelentkezni.                                                        </div>
2427                                                    
2428                                                    
2429                                                </div>
2430                                            
2431                                        </div>
2432
2433                                        
2434                                    </div>
2435                                                                    
2436                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2437
2438                                        <div class="shrink-0 mt-0.5">
2439                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2440                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2440shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2441                                                10:22                                            </div>
2442                                        </div>
2443
2444                                        <div class="flex-1 min-w-0">
2445
2446                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2447                                                                                            <div class="mb-1">
2448                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2449                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb közéleti műsorok                                                    </span>
2450                                                </div>
2451                                            
2452                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2453                                            <div class="flex items-start gap-2 mb-1.5">
2454                                                                                                    <button type="button"
2455                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_10.mp3', 'Műsorajánló', false, 1320, true); }"
2456                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2457                                                        title="Visszahallgatom az adást">
2458                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2459                                                    </button>
2460                                                
2461                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2462                                                    <a href="/musoraink/adas/723757" class="hover:underline">
2463                                                        Műsorajánló                                                    </a>
2464
2465                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2466                                                                                                    </h3>
2467                                            </div>
2468
2469                                            
2470                                                                                            <a href="/musoraink/adas/723757" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2471                                                    » bővebben...
2472                                                </a>
2473                                            
2474                                        </div>
2475
2476                                        
2477                                    </div>
2478                                                                    
2479                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2480
2481                                        <div class="shrink-0 mt-0.5">
2482                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2483                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2484                                                10:30                                            </div>
2485                                        </div>
2486
2487                                        <div class="flex-1 min-w-0">
2488
2489                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2490                                                                                            <div class="mb-1">
2491                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2492                                                        <i class="fa-solid fa-folder-open opacity-70"></i> gyermek- és ifjúsági műsorok                                                    </span>
2493                                                </div>
2494                                            
2495                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2496                                            <div class="flex items-start gap-2 mb-1.5">
2497                                                                                                    <button type="button"
2498                                                        onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://www.katolikusradio.hu/archivum/2026/09/24/2026-09-24_10.mp3', 'Varázsdoboz', false, 1800, true); }"
2499                                                        class="text-[#5c8500] hover:text-[#7ba800] transition-colors mt-[2px] shrink-0"
2500                                                        title="Visszahallgatom az adást">
2501                                                        <i class="fa-solid fa-circle-play text-[18px]"></i>
2502                                                    </button>
2503                                                
2504                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2505                                                    <a href="/musoraink/adas/bodo-bela-brumi-mackovarosban-felolvassa-kristan-attila-8-4-723758" class="hover:underline">
2506                                                        Varázsdoboz                                                    </a>
2507
2508                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2509                                                                                                    </h3>
2510                                            </div>
2511
2512                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2513                                                    mesés irodalom
2514Bodó Béla: Brumi Mackóvárosban
2515Felolvassa: Kristán Attila (8/4.)
2516Szerkesztő: Varga Andrea                                                </div>
2517                                            
2518                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
2519                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
2520                                                </button>
2521
2522                                                <div x-show="detailsOpen"
2523                                                    x-transition:enter="transition ease-out duration-200"
2524                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
2525                                                    x-transition:enter-end="opacity-100 translate-y-0"
2526                                                    x-cloak
2527                                                    class="mt-3 pt-3 border-t border-gray-100">
2528
2529                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
2530                                                            Hangmérnök: Horváth János
2531Zeneszerző: Laczó Zoltán Vince
2532Rendező: Varga Andrea                                                        </div>
2533                                                    
2534                                                    
2535                                                </div>
2536                                            
2537                                        </div>
2538
2539                                        
2540                                    </div>
2541                                
2542                            </div>
2543                        </div>
2544                    </div>
2545                </section>
2546
2547            
2548                <section x-data="{ open: true }"
2549                                        id="current-timeslot"
2550                    x-init="setTimeout(() => { 
2551                        const headerOffset = 100;
2552                        const elementPosition = $el.getBoundingClientRect().top;
2553                        const offsetPosition = elementPosition + window.scrollY - headerOffset;
2554                        window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
2555                    }, 400)"
2556                    >
2557
2558                    <button @click="open = !open" type="button"
2559                        class="musor-slot-header musor-slot-header--current bg-blue-600 ring-4 ring-blue-200 w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
2560                        <span class="flex items-center gap-2 text-left">
2561                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
2562                            Zenit                                                            <span class="ml-2 text-xs bg-white text-blue-600 px-2 py-1 rounded-md uppercase tracking-wider shadow-sm animate-pulse">Most szól</span>
2563                                                    </span>
2564                        <div class="flex items-center gap-4 shrink-0">
2565                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
2566                                11:00 - 13:00                            </span>
2567
2568                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
2569                                <i class="fa-solid fa-chevron-down"></i>
2570                            </span>
2571                        </div>
2572                    </button>
2573
2574                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
2575                        <div class="grid-accordion-inner">
2576                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
2577
2578                                                                    
2579                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2580
2581                                        <div class="shrink-0 mt-0.5">
2582                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2583                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2584                                                11:00                                            </div>
2585                                        </div>
2586
2587                                        <div class="flex-1 min-w-0">
2588
2589                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2590                                                                                            <div class="mb-1">
2591                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2592                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
2593                                                </div>
2594                                            
2595                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2596                                            <div class="flex items-start gap-2 mb-1.5">
2597                                                
2598                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2599                                                    <a href="/musoraink/adas/723759" class="hover:underline">
2600                                                        Hírek                                                    </a>
2601
2602                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2603                                                                                                    </h3>
2604                                            </div>
2605
2606                                            
2607                                                                                            <a href="/musoraink/adas/723759" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2608                                                    » bővebben...
2609                                                </a>
2610                                            
2611                                        </div>
2612
2613                                        
2614                                    </div>
2615                                                                    
2616                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2617
2618                                        <div class="shrink-0 mt-0.5">
2619                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2620                                            <div class="musor-episode-time musor-episode-time--current bg-blue-600 text-white font-bold text-sm px-2 py-0.5 
2620shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2621                                                11:04                                            </div>
2622                                        </div>
2623
2624                                        <div class="flex-1 min-w-0">
2625
2626                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2627                                                                                            <div class="mb-1">
2628                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2629                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
2630                                                </div>
2631                                            
2632                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2633                                            <div class="flex items-start gap-2 mb-1.5">
2634                                                
2635                                                <h3 class="text-[17px] md:text-[18px] font-bold text-blue-600 leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2636                                                    <a href="/musoraink/adas/723760" class="hover:underline">
2637                                                        Hangoló                                                    </a>
2638
2639                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2640                                                                                                            <span class="bg-blue-100 text-blue-700 text-[10px] px-2 py-0.5 rounded-sm uppercase tracking-wider animate-pulse border border-blue-200 shadow-sm">
2641                                                            Most szól
2642                                                        </span>
2643                                                                                                    </h3>
2644                                            </div>
2645
2646                                            
2647                                                                                            <a href="/musoraink/adas/723760" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2648                                                    » bővebben...
2649                                                </a>
2650                                            
2651                                        </div>
2652
2653                                        
2654                                    </div>
2655                                                                    
2656                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2657
2658                                        <div class="shrink-0 mt-0.5">
2659                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2660                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2661                                                12:00                                            </div>
2662                                        </div>
2663
2664                                        <div class="flex-1 min-w-0">
2665
2666                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2667                                                                                            <div class="mb-1">
2668                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2669                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
2670                                                </div>
2671                                            
2672                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2673                                            <div class="flex items-start gap-2 mb-1.5">
2674                                                
2675                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2676                                                    <a href="/musoraink/adas/723761" class="hover:underline">
2677                                                        Harangszó                                                    </a>
2678
2679                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2680                                                                                                    </h3>
2681                                            </div>
2682
2683                                            
2684                                                                                            <a href="/musoraink/adas/723761" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2685                                                    » bővebben...
2686                                                </a>
2687                                            
2688                                        </div>
2689
2690                                        
2691                                    </div>
2692                                                                    
2693                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2694
2695                                        <div class="shrink-0 mt-0.5">
2696                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2697                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2697shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2698                                                12:01                                            </div>
2699                                        </div>
2700
2701                                        <div class="flex-1 min-w-0">
2702
2703                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2704                                                                                            <div class="mb-1">
2705                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2706                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
2707                                                </div>
2708                                            
2709                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2710                                            <div class="flex items-start gap-2 mb-1.5">
2711                                                
2712                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2713                                                    <a href="/musoraink/adas/723762" class="hover:underline">
2714                                                        Úrangyala-imádság                                                    </a>
2715
2716                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2717                                                                                                    </h3>
2718                                            </div>
2719
2720                                            
2721                                                                                            <a href="/musoraink/adas/723762" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2722                                                    » bővebben...
2723                                                </a>
2724                                            
2725                                        </div>
2726
2727                                        
2728                                    </div>
2729                                                                    
2730                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2731
2732                                        <div class="shrink-0 mt-0.5">
2733                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2734                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2735                                                12:04                                            </div>
2736                                        </div>
2737
2738                                        <div class="flex-1 min-w-0">
2739
2740                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2741                                                                                            <div class="mb-1">
2742                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2743                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
2744                                                </div>
2745                                            
2746                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2747                                            <div class="flex items-start gap-2 mb-1.5">
2748                                                
2749                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2750                                                    <a href="/musoraink/adas/723763" class="hover:underline">
2751                                                        Hírek                                                    </a>
2752
2753                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2754                                                                                                    </h3>
2755                                            </div>
2756
2757                                            
2758                                                                                            <a href="/musoraink/adas/723763" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2759                                                    » bővebben...
2760                                                </a>
2761                                            
2762                                        </div>
2763
2764                                        
2765                                    </div>
2766                                                                    
2767                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2768
2769                                        <div class="shrink-0 mt-0.5">
2770                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2771                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2771shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2772                                                12:08                                            </div>
2773                                        </div>
2774
2775                                        <div class="flex-1 min-w-0">
2776
2777                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2778                                                                                            <div class="mb-1">
2779                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2780                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
2781                                                </div>
2782                                            
2783                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2784                                            <div class="flex items-start gap-2 mb-1.5">
2785                                                
2786                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2787                                                    <a href="/musoraink/adas/723764" class="hover:underline">
2788                                                        Napi evangélium                                                    </a>
2789
2790                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2791                                                                                                    </h3>
2792                                            </div>
2793
2794                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2795                                                    Szent Gellért püspök, vértanú
2796** Mt 10,28-33 **
2797Felolvassa: Varga László                                                </div>
2798                                            
2799                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
2800                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
2801                                                </button>
2802
2803                                                <div x-show="detailsOpen"
2804                                                    x-transition:enter="transition ease-out duration-200"
2805                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
2806                                                    x-transition:enter-end="opacity-100 translate-y-0"
2807                                                    x-cloak
2808                                                    class="mt-3 pt-3 border-t border-gray-100">
2809
2810                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
2811                                                            Ne féljetek azoktól, akik megölik a testet, de a lelket nem tudják megölni. Féljetek inkább attól, aki a lelket is és a testet is el tudja pusztítani a gyehennában. Két verebet ugye egy fillérért árulnak? És egy sem esik közülük a földre a ti Atyátok tudta nélkül. Nektek azonban még a hajszálaitok is mind meg vannak számlálva a fejeteken. Ne féljetek hát, hisz különbek vagytok ti sok verébnél. Mindazt, aki megvall engem az emberek előtt, én is megvallom Atyám előtt, aki a mennyekben van. De azt, aki megtagad engem az emberek előtt, én is meg fogom tagadni Atyám előtt, aki a mennyekben van. 
2812Olvasmányok, ünnepek a liturgikus naptárban.                                                        </div>
2813                                                    
2814                                                    
2815                                                </div>
2816                                            
2817                                        </div>
2818
2819                                        
2820                                    </div>
2821                                                                    
2822                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2823
2824                                        <div class="shrink-0 mt-0.5">
2825                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2826                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2826shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2827                                                12:10                                            </div>
2828                                        </div>
2829
2830                                        <div class="flex-1 min-w-0">
2831
2832                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2833                                                                                            <div class="mb-1">
2834                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2835                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
2836                                                </div>
2837                                            
2838                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2839                                            <div class="flex items-start gap-2 mb-1.5">
2840                                                
2841                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2842                                                    <a href="/musoraink/adas/723765" class="hover:underline">
2843                                                        A Vatikáni Rádió magyar műsora                                                    </a>
2844
2845                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2846                                                                                                    </h3>
2847                                            </div>
2848
2849                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2850                                                    (a tegnap esti adás ismétlése)                                                </div>
2851                                            
2852                                                                                            <a href="/musoraink/adas/723765" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2853                                                    » bővebben...
2854                                                </a>
2855                                            
2856                                        </div>
2857
2858                                        
2859                                    </div>
2860                                                                    
2861                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2862
2863                                        <div class="shrink-0 mt-0.5">
2864                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2865                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2866                                                12:30                                            </div>
2867                                        </div>
2868
2869                                        <div class="flex-1 min-w-0">
2870
2871                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2872                                                                                            <div class="mb-1">
2873                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2874                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
2875                                                </div>
2876                                            
2877                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2878                                            <div class="flex items-start gap-2 mb-1.5">
2879                                                
2880                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2881                                                    <a href="/musoraink/adas/723766" class="hover:underline">
2882                                                        Guzsalyas                                                    </a>
2883
2884                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2885                                                                                                    </h3>
2886                                            </div>
2887
2888                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2889                                                    népzenei műsor                                                </div>
2890                                            
2891                                                                                            <a href="/musoraink/adas/723766" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2892                                                    » bővebben...
2893                                                </a>
2894                                            
2895                                        </div>
2896
2897                                        
2898                                    </div>
2899                                
2900                            </div>
2901                        </div>
2902                    </div>
2903                </section>
2904
2905            
2906                <section x-data="{ open: true }"
2907                    >
2908
2909                    <button @click="open = !open" type="button"
2910                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
2911                        <span class="flex items-center gap-2 text-left">
2912                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
2913                            Kapcsolatban                                                    </span>
2914                        <div class="flex items-center gap-4 shrink-0">
2915                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
2916                                13:00 - 15:00                            </span>
2917
2918                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
2919                                <i class="fa-solid fa-chevron-down"></i>
2920                            </span>
2921                        </div>
2922                    </button>
2923
2924                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
2925                        <div class="grid-accordion-inner">
2926                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
2927
2928                                                                    
2929                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2930
2931                                        <div class="shrink-0 mt-0.5">
2932                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2933                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2934                                                13:00                                            </div>
2935                                        </div>
2936
2937                                        <div class="flex-1 min-w-0">
2938
2939                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2940                                                                                            <div class="mb-1">
2941                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2942                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
2943                                                </div>
2944                                            
2945                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2946                                            <div class="flex items-start gap-2 mb-1.5">
2947                                                
2948                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2949                                                    <a href="/musoraink/adas/723767" class="hover:underline">
2950                                                        Hírek                                                    </a>
2951
2952                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2953                                                                                                    </h3>
2954                                            </div>
2955
2956                                            
2957                                                                                            <a href="/musoraink/adas/723767" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
2958                                                    » bővebben...
2959                                                </a>
2960                                            
2961                                        </div>
2962
2963                                        
2964                                    </div>
2965                                                                    
2966                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
2967
2968                                        <div class="shrink-0 mt-0.5">
2969                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
2970                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
2970shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
2971                                                13:04                                            </div>
2972                                        </div>
2973
2974                                        <div class="flex-1 min-w-0">
2975
2976                                            <!-- Kategória teljesen külön sorban, a cím felett -->
2977                                                                                            <div class="mb-1">
2978                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
2979                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
2980                                                </div>
2981                                            
2982                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
2983                                            <div class="flex items-start gap-2 mb-1.5">
2984                                                
2985                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
2986                                                    <a href="/musoraink/adas/hegedus-blanka-ilonaval-beszelgetunk-b-z-varmeg
2986yei-kozfoglalkoztatasi-vasar-723768" class="hover:underline">
2987                                                        Vendég-oldal                                                    </a>
2988
2989                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
2990                                                                                                    </h3>
2991                                            </div>
2992
2993                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
2994                                                    válogatás a Szent István Rádió műsorából
2995Hegedűs Blanka Ilonával beszélgetünk
2996B-A-Z Vármegyei Közfoglalkoztatási Vásár                                                </div>
2997                                            
2998                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
2999                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3000                                                </button>
3001
3002                                                <div x-show="detailsOpen"
3003                                                    x-transition:enter="transition ease-out duration-200"
3004                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3005                                                    x-transition:enter-end="opacity-100 translate-y-0"
3006                                                    x-cloak
3007                                                    class="mt-3 pt-3 border-t border-gray-100">
3008
3009                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3010                                                            Mai összeállításunkban először Szerzetesek félórája című műsorunkat hallják, melyben Hegedűs Blanka Ilonával, a Szent Ferenc Kisnővérei Közösség egyik tagjával Pap Ildikó beszélgetett.
3011Ezután Kapcsolat c. műsorunk következik, melyben ellátogatunk a Borsd-Abaúj- Zemplén Vármegyei Közfoglalkoztatási Vásárra.
3012Szerkesztő: Grunda János
3013Összeállításunkat a Nap imájával zárjuk.
3014Zenei szerkesztő: Vasvári Bernadett
3015Műsorvezető: Tikovits Errnő                                                        </div>
3016                                                    
3017                                                    
3018                                                </div>
3019                                            
3020                                        </div>
3021
3022                                        
3023                                    </div>
3024                                                                    
3025                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3026
3027                                        <div class="shrink-0 mt-0.5">
3028                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3029                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3030                                                14:00                                            </div>
3031                                        </div>
3032
3033                                        <div class="flex-1 min-w-0">
3034
3035                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3036                                                                                            <div class="mb-1">
3037                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3038                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3039                                                </div>
3040                                            
3041                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3042                                            <div class="flex items-start gap-2 mb-1.5">
3043                                                
3044                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3045                                                    <a href="/musoraink/adas/723769" class="hover:underline">
3046                                                        Hírek                                                    </a>
3047
3048                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3049                                                                                                    </h3>
3050                                            </div>
3051
3052                                            
3053                                                                                            <a href="/musoraink/adas/723769" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3054                                                    » bővebben...
3055                                                </a>
3056                                            
3057                                        </div>
3058
3059                                        
3060                                    </div>
3061                                                                    
3062                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3063
3064                                        <div class="shrink-0 mt-0.5">
3065                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3066                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3067                                                14:04                                            </div>
3068                                        </div>
3069
3070                                        <div class="flex-1 min-w-0">
3071
3072                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3073                                                                                            <div class="mb-1">
3074                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3075                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
3076                                                </div>
3077                                            
3078                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3079                                            <div class="flex items-start gap-2 mb-1.5">
3080                                                
3081                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3082                                                    <a href="/musoraink/adas/ismet-el-zene-723770" class="hover:underline">
3083                                                        Hangárium                                                    </a>
3084
3085                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3086                                                                                                    </h3>
3087                                            </div>
3088
3089                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3090                                                    Ismét Él a zene! 
3091Szerkesztő: Csuth Judit                                                </div>
3092                                            
3093                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
3094                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3095                                                </button>
3096
3097                                                <div x-show="detailsOpen"
3098                                                    x-transition:enter="transition ease-out duration-200"
3099                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3100                                                    x-transition:enter-end="opacity-100 translate-y-0"
3101                                                    x-cloak
3102                                                    class="mt-3 pt-3 border-t border-gray-100">
3103
3104                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3105                                                            Az Él a zene! kezdeményezés már 5. alkalommal jön létre annak érdekében, hogy a figyelem a magyar könnyűzenei előadókra, hazai dalszerzőkre irányuljon. A magyar könnyűzene napja idén szeptember 26-án lesz, aminek köszönhetően szombaton országszerte több mint kétezer üzletben, szállodában, vendéglátóhelyeken vagy akár benzinkúton kizárólag magyar zene szól majd. A kezdeményezéshez sok rádió és zenetévé is csatlakozik, köztük rádiónk is, így szombaton, ah
3105ol műsorstruktúránk engedi nálunk is magyar zene szól majd.                                                        </div>
3106                                                    
3107                                                    
3108                                                </div>
3109                                            
3110                                        </div>
3111
3112                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
3113                                                <a href="/musoraink/adas/ismet-el-zene-723770" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
3114                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/723770/kicsi/elazene-logo.jpg"
3115                                                        alt="Műsor kép"
3116                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
3117                                                </a>
3118                                            </div>
3119                                        
3120                                    </div>
3121                                                                    
3122                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3123
3124                                        <div class="shrink-0 mt-0.5">
3125                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3126                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3127                                                14:30                                            </div>
3128                                        </div>
3129
3130                                        <div class="flex-1 min-w-0">
3131
3132                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3133                                                                                            <div class="mb-1">
3134                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3135                                                        <i class="fa-solid fa-folder-open opacity-70"></i> irodalmi és versműsorok                                                    </span>
3136                                                </div>
3137                                            
3138                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3139                                            <div class="flex items-start gap-2 mb-1.5">
3140                                                
3141                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3142                                                    <a href="/musoraink/adas/wittinger-laszlo-tiszta-szivuek-kiteljesedes-felolvassa-schnell-adam-18-4-723771" class="hover:underline">
3143                                                        Rádiós regénytár                                                    </a>
3144
3145                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3146                                                                                                    </h3>
3147                                            </div>
3148
3149                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3150                                                    Wittinger László: Tiszta szívűek - A kiteljesedés 
3151Felolvassa: Schnell Ádám  (18/4.)
3152Szerkesztő: Varga Andrea                                                </div>
3153                                            
3154                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
3155                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3156                                                </button>
3157
3158                                                <div x-show="detailsOpen"
3159                                                    x-transition:enter="transition ease-out duration-200"
3160                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3161                                                    x-transition:enter-end="opacity-100 translate-y-0"
3162                                                    x-cloak
3163                                                    class="mt-3 pt-3 border-t border-gray-100">
3164
3165                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3166                                                            Hangmester: Liszkai Károly 
3167Zenei szerkesztő: Máry Szabó Eszter 
3168Dramaturg-rendező: Sárospataki Zsuzsanna                                                        </div>
3169                                                    
3170                                                    
3171                                                </div>
3172                                            
3173                                        </div>
3174
3175                                        
3176                                    </div>
3177                                
3178                            </div>
3179                        </div>
3180                    </div>
3181                </section>
3182
3183            
3184                <section x-data="{ open: true }"
3185                    >
3186
3187                    <button @click="open = !open" type="button"
3188                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
3189                        <span class="flex items-center gap-2 text-left">
3190                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
3191                            Szalon                                                    </span>
3192                        <div class="flex items-center gap-4 shrink-0">
3193                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
3194                                15:00 - 17:00                            </span>
3195
3196                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
3197                                <i class="fa-solid fa-chevron-down"></i>
3198                            </span>
3199                        </div>
3200                    </button>
3201
3202                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
3203                        <div class="grid-accordion-inner">
3204                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
3205
3206                                                                    
3207                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3208
3209                                        <div class="shrink-0 mt-0.5">
3210                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3211                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3212                                                15:00                                            </div>
3213                                        </div>
3214
3215                                        <div class="flex-1 min-w-0">
3216
3217                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3218                                                                                            <div class="mb-1">
3219                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3220                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3221                                                </div>
3222                                            
3223                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3224                                            <div class="flex items-start gap-2 mb-1.5">
3225                                                
3226                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3227                                                    <a href="/musoraink/adas/723772" class="hover:underline">
3228                                                        Hírek                                                    </a>
3229
3230                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3231                                                                                                    </h3>
3232                                            </div>
3233
3234                                            
3235                                                                                            <a href="/musoraink/adas/723772" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3236                                                    » bővebben...
3237                                                </a>
3238                                            
3239                                        </div>
3240
3241                                        
3242                                    </div>
3243                                                                    
3244                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3245
3246                                        <div class="shrink-0 mt-0.5">
3247                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3248                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3248shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3249                                                15:04                                            </div>
3250                                        </div>
3251
3252                                        <div class="flex-1 min-w-0">
3253
3254                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3255                                                                                            <div class="mb-1">
3256                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3257                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb kulturális műsorok                                                    </span>
3258                                                </div>
3259                                            
3260                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3261                                            <div class="flex items-start gap-2 mb-1.5">
3262                                                
3263                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3264                                                    <a href="/musoraink/adas/723773" class="hover:underline">
3265                                                        Akvarell                                                    </a>
3266
3267                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3268                                                                                                    </h3>
3269                                            </div>
3270
3271                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3272                                                    kulturális paletta
3273Szerkesztő: Fülöp Tamás                                                </div>
3274                                            
3275                                                                                            <a href="/musoraink/adas/723773" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3276                                                    » bővebben...
3277                                                </a>
3278                                            
3279                                        </div>
3280
3281                                        
3282                                    </div>
3283                                                                    
3284                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3285
3286                                        <div class="shrink-0 mt-0.5">
3287                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3288                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3289                                                15:50                                            </div>
3290                                        </div>
3291
3292                                        <div class="flex-1 min-w-0">
3293
3294                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3295                                                                                            <div class="mb-1">
3296                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3297                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb közéleti műsorok                                                    </span>
3298                                                </div>
3299                                            
3300                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3301                                            <div class="flex items-start gap-2 mb-1.5">
3302                                                
3303                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3304                                                    <a href="/musoraink/adas/723774" class="hover:underline">
3305                                                        Műsorajánló                                                    </a>
3306
3307                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3308                                                                                                    </h3>
3309                                            </div>
3310
3311                                            
3312                                                                                            <a href="/musoraink/adas/723774" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3313                                                    » bővebben...
3314                                                </a>
3315                                            
3316                                        </div>
3317
3318                                        
3319                                    </div>
3320                                                                    
3321                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3322
3323                                        <div class="shrink-0 mt-0.5">
3324                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3325                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3325shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3326                                                16:00                                            </div>
3327                                        </div>
3328
3329                                        <div class="flex-1 min-w-0">
3330
3331                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3332                                                                                            <div class="mb-1">
3333                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3334                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3335                                                </div>
3336                                            
3337                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3338                                            <div class="flex items-start gap-2 mb-1.5">
3339                                                
3340                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3341                                                    <a href="/musoraink/adas/723775" class="hover:underline">
3342                                                        Hírek                                                    </a>
3343
3344                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3345                                                                                                    </h3>
3346                                            </div>
3347
3348                                            
3349                                                                                            <a href="/musoraink/adas/723775" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3350                                                    » bővebben...
3351                                                </a>
3352                                            
3353                                        </div>
3354
3355                                        
3356                                    </div>
3357                                                                    
3358                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3359
3360                                        <div class="shrink-0 mt-0.5">
3361                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3362                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3363                                                16:04                                            </div>
3364                                        </div>
3365
3366                                        <div class="flex-1 min-w-0">
3367
3368                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3369                                                                                            <div class="mb-1">
3370                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3371                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb közéleti műsorok                                                    </span>
3372                                                </div>
3373                                            
3374                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3375                                            <div class="flex items-start gap-2 mb-1.5">
3376                                                
3377                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3378                                                    <a href="/musoraink/adas/723776" class="hover:underline">
3379                                                        Magyar téka                                                    </a>
3380
3381                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3382                                                                                                    </h3>
3383                                            </div>
3384
3385                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3386                                                    Szerkesztő: Nagy György András                                                </div>
3387                                            
3388                                                                                            <a href="/musoraink/adas/723776" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3389                                                    » bővebben...
3390                                                </a>
3391                                            
3392                                        </div>
3393
3394                                        
3395                                    </div>
3396                                                                    
3397                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3398
3399                                        <div class="shrink-0 mt-0.5">
3400                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3401                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3401shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3402                                                16:30                                            </div>
3403                                        </div>
3404
3405                                        <div class="flex-1 min-w-0">
3406
3407                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3408                                                                                            <div class="mb-1">
3409                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3410                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
3411                                                </div>
3412                                            
3413                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3414                                            <div class="flex items-start gap-2 mb-1.5">
3415                                                
3416                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3417                                                    <a href="/musoraink/adas/723777" class="hover:underline">
3418                                                        Dallamív                                                    </a>
3419
3420                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3421                                                                                                    </h3>
3422                                            </div>
3423
3424                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3425                                                    Szerkesztő: Máry Szabó Eszter                                                </div>
3426                                            
3427                                                                                            <a href="/musoraink/adas/723777" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3428                                                    » bővebben...
3429                                                </a>
3430                                            
3431                                        </div>
3432
3433                                        
3434                                    </div>
3435                                
3436                            </div>
3437                        </div>
3438                    </div>
3439                </section>
3440
3441            
3442                <section x-data="{ open: true }"
3443                    >
3444
3445                    <button @click="open = !open" type="button"
3446                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
3447                        <span class="flex items-center gap-2 text-left">
3448                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
3449                            Délutáni találkozás                                                    </span>
3450                        <div class="flex items-center gap-4 shrink-0">
3451                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
3452                                17:00 - 19:00                            </span>
3453
3454                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
3455                                <i class="fa-solid fa-chevron-down"></i>
3456                            </span>
3457                        </div>
3458                    </button>
3459
3460                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
3461                        <div class="grid-accordion-inner">
3462                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
3463
3464                                                                    
3465                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3466
3467                                        <div class="shrink-0 mt-0.5">
3468                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3469                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3469shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3470                                                17:00                                            </div>
3471                                        </div>
3472
3473                                        <div class="flex-1 min-w-0">
3474
3475                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3476                                                                                            <div class="mb-1">
3477                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3478                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3479                                                </div>
3480                                            
3481                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3482                                            <div class="flex items-start gap-2 mb-1.5">
3483                                                
3484                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3485                                                    <a href="/musoraink/adas/723778" class="hover:underline">
3486                                                        Hírek                                                    </a>
3487
3488                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3489                                                                                                    </h3>
3490                                            </div>
3491
3492                                            
3493                                                                                            <a href="/musoraink/adas/723778" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3494                                                    » bővebben...
3495                                                </a>
3496                                            
3497                                        </div>
3498
3499                                        
3500                                    </div>
3501                                                                    
3502                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3503
3504                                        <div class="shrink-0 mt-0.5">
3505                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3506                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3507                                                17:04                                            </div>
3508                                        </div>
3509
3510                                        <div class="flex-1 min-w-0">
3511
3512                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3513                                                                                            <div class="mb-1">
3514                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3515                                                        <i class="fa-solid fa-folder-open opacity-70"></i> portré- és riportműsorok                                                    </span>
3516                                                </div>
3517                                            
3518                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3519                                            <div class="flex items-start gap-2 mb-1.5">
3520                                                
3521                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3522                                                    <a href="/musoraink/adas/kriston-endre-egri-segedpuspok-megprobaltatasai-2-resz-723779" class="hover:underline">
3523                                                        Arcok és sorsok                                                    </a>
3524
3525                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3526                                                                                                    </h3>
3527                                            </div>
3528
3529                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3530                                                    fejezetek a Magyar Katolikus Egyház életéből
3531Kriston Endre egri segédpüspök megpróbáltatásai
35322.rész
3533Szerkesztő: Soós Viktor                                                </div>
3534                                            
3535                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
3536                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3537                                                </button>
3538
3539                                                <div x-show="detailsOpen"
3540                                                    x-transition:enter="transition ease-out duration-200"
3541                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3542                                                    x-transition:enter-end="opacity-100 translate-y-0"
3543                                                    x-cloak
3544                                                    class="mt-3 pt-3 border-t border-gray-100">
3545
3546                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3547                                                            Kriston Endre egri segédpüspök életútjáról, megpróbáltatásairól, a kommunista diktatúra vele szembeni eljárásairól beszél Szabó Tamás tudományos kutató.                                                        </div>
3548                                                    
3549                                                    
3550                                                </div>
3551                                            
3552                                        </div>
3553
3554                                        
3555                                    </div>
3556                                                                    
3557                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3558
3559                                        <div class="shrink-0 mt-0.5">
3560                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3561                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3561shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3562                                                17:30                                            </div>
3563                                        </div>
3564
3565                                        <div class="flex-1 min-w-0">
3566
3567                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3568                                                                                            <div class="mb-1">
3569                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3570                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3571                                                </div>
3572                                            
3573                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3574                                            <div class="flex items-start gap-2 mb-1.5">
3575                                                
3576                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3577                                                    <a href="/musoraink/adas/adjatok-vissza-negyzetkilometereinket-afrika-keresere-uj-vilagterkepet-szavazott-meg-az-ensz-723780" class="hover:underline">
3578                                                        Kerengő                                                    </a>
3579
3580                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3581                                                                                                    </h3>
3582                                            </div>
3583
3584                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3585                                                    külpolitikai beszélgetések
3586Adjátok vissza a négyzetkilométereinket! 
3587Afrika kérésére új világtérképet szavazott meg az ENSZ
3588Szerkesztő: Pozsgai Nóra                                                </div>
3589                                            
3590                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
3591                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3592                                                </button>
3593
3594                                                <div x-show="detailsOpen"
3595                                                    x-transition:enter="transition ease-out duration-200"
3596                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3597                                                    x-transition:enter-end="opacity-100 translate-y-0"
3598                                                    x-cloak
3599                                                    class="mt-3 pt-3 border-t border-gray-100">
3600
3601                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3602                                                            Az Afrikai Unió javaslatára az ENSZ új világtérkép bevezetéséről döntött. Donald Trump 3 nappal később közétette saját térképét, amelyen Grönlandtól Közép-Amerikáig mindent Amerikai zászló borít. Kínának és Oroszországnak is saját szemléletű térképe van, ugyanakkor megszavazták Afrika javaslatát …
3603Búcsút mondhatunk a gyerekkorunkból ismert atlasznak? de Miért nem volt már jó a régi? Ki dönti el mi legyen középen? Hogyan dolgozik a térkép a fejekben, és hogyan hat a politikára? Miként lesz geopolitikai eszköz, információs fegyver? 
3604Beszélgetőtársaik: a Szegedi Tudományegyetem oktatói: 
3605GÁL TAMÁS tanszékvezető egy. tanár,
3606KÁDÁR ANETT ADJUNKTUS, és KRISKA OLIVÉR adjunktus.
3607(Grafika: Fr24)                                                        </div>
3608                                                    
3609                                                    
3610                                                </div>
3611                                            
3612                                        </div>
3613
3614                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
3615                                                <a href="/musoraink/adas/adjatok-vissza-negyzetkilometereinket-afrika-keresere-uj-vilagterkepet-szavazott-meg-az-ensz-723780" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
3616                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/723780/kicsi/ENSZ2.jpg"
3617                                                        alt="Műsor kép"
3618                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
3619                                                </a>
3620                                            </div>
3621                                        
3622                                    </div>
3623                                                                    
3624                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3625
3626                                        <div class="shrink-0 mt-0.5">
3627                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3628                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3628shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3629                                                18:00                                            </div>
3630                                        </div>
3631
3632                                        <div class="flex-1 min-w-0">
3633
3634                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3635                                                                                            <div class="mb-1">
3636                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3637                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3638                                                </div>
3639                                            
3640                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3641                                            <div class="flex items-start gap-2 mb-1.5">
3642                                                
3643                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3644                                                    <a href="/musoraink/adas/723781" class="hover:underline">
3645                                                        Hírek                                                    </a>
3646
3647                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3648                                                                                                    </h3>
3649                                            </div>
3650
3651                                            
3652                                                                                            <a href="/musoraink/adas/723781" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3653                                                    » bővebben...
3654                                                </a>
3655                                            
3656                                        </div>
3657
3658                                        
3659                                    </div>
3660                                                                    
3661                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3662
3663                                        <div class="shrink-0 mt-0.5">
3664                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3665                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3666                                                18:04                                            </div>
3667                                        </div>
3668
3669                                        <div class="flex-1 min-w-0">
3670
3671                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3672                                                                                            <div class="mb-1">
3673                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3674                                                        <i class="fa-solid fa-folder-open opacity-70"></i> portré- és riportműsorok                                                    </span>
3675                                                </div>
3676                                            
3677                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3678                                            <div class="flex items-start gap-2 mb-1.5">
3679                                                
3680                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3681                                                    <a href="/musoraink/adas/avos-borton-conti-utcaban-vezetett-seta-mindszenty-biboros-egykori-bortoneben-2-resz-723782" class="hover:underline">
3682                                                        Magyar csillagok                                                    </a>
3683
3684                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3685                                                                                                    </h3>
3686                                            </div>
3687
3688                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3689                                                    Ávós börtön a Conti utcában
3690Vezetett séta Mindszenty bíboros egykori börtönében – 2. rész
3691Szerkesztő: Kövesdy Zsuzsa                                                </div>
3692                                            
3693                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
3694                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3695                                                </button>
3696
3697                                                <div x-show="detailsOpen"
3698                                                    x-transition:enter="transition ease-out duration-200"
3699                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3700                                                    x-transition:enter-end="opacity-100 translate-y-0"
3701                                                    x-cloak
3702                                                    class="mt-3 pt-3 border-t border-gray-100">
3703
3704                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3705                                                            Folytatjuk    múlt héten megkezdett   műsorunkat.
3706Különleges, megrendítő, ritka élményben lesz része azoknak a hallgatóknak, akik most megnyitják szívüket e műsorunk előtt. Kovács Gergely, a Mindszenty Alapítvány képviselője, Mindszenty József bíboros boldoggá avatási eljárásának viceposztulátora megnyitja számunkra a Conti utcai ávós börtön ajtaját, ahol egykor Mindszenty József bíboros raboskodott. És akkor mi egy csapásra egyszerű hallgatóból helyszíni látogatóvá válunk. Megrázó, felejthetetlen élményben lesz részünk, mely egyúttal megindít bennünket lélekben a nagy 56-os forradalmi évforduló felé.
3707A 2022. március 20-án elhangzott Ávós börtön a Conti utcában című adásunk ismétlése.                                                        </div>
3708                                                    
3709                                                    
3710                                                </div>
3711                                            
3712                                        </div>
3713
3714                                        
3715                                    </div>
3716                                                                    
3717                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3718
3719                                        <div class="shrink-0 mt-0.5">
3720                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3721                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3721shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3722                                                18:30                                            </div>
3723                                        </div>
3724
3725                                        <div class="flex-1 min-w-0">
3726
3727                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3728                                                                                            <div class="mb-1">
3729                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3730                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3731                                                </div>
3732                                            
3733                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3734                                            <div class="flex items-start gap-2 mb-1.5">
3735                                                
3736                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3737                                                    <a href="/musoraink/adas/723783" class="hover:underline">
3738                                                        Hírtükör                                                    </a>
3739
3740                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3741                                                                                                    </h3>
3742                                            </div>
3743
3744                                            
3745                                                                                            <a href="/musoraink/adas/723783" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3746                                                    » bővebben...
3747                                                </a>
3748                                            
3749                                        </div>
3750
3751                                        
3752                                    </div>
3753                                                                    
3754                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3755
3756                                        <div class="shrink-0 mt-0.5">
3757                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3758                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3759                                                18:50                                            </div>
3760                                        </div>
3761
3762                                        <div class="flex-1 min-w-0">
3763
3764                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3765                                                                                            <div class="mb-1">
3766                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3767                                                        <i class="fa-solid fa-folder-open opacity-70"></i> ismeretterjesztő műsorok                                                    </span>
3768                                                </div>
3769                                            
3770                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3771                                            <div class="flex items-start gap-2 mb-1.5">
3772                                                
3773                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3774                                                    <a href="/musoraink/adas/723784" class="hover:underline">
3775                                                        Múltidéző                                                    </a>
3776
3777                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3778                                                                                                    </h3>
3779                                            </div>
3780
3781                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3782                                                    Szerkesztő: Szikora József                                                </div>
3783                                            
3784                                                                                            <a href="/musoraink/adas/723784" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3785                                                    » bővebben...
3786                                                </a>
3787                                            
3788                                        </div>
3789
3790                                        
3791                                    </div>
3792                                
3793                            </div>
3794                        </div>
3795                    </div>
3796                </section>
3797
3798            
3799                <section x-data="{ open: true }"
3800                    >
3801
3802                    <button @click="open = !open" type="button"
3803                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
3804                        <span class="flex items-center gap-2 text-left">
3805                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
3806                            Alkonyórán                                                    </span>
3807                        <div class="flex items-center gap-4 shrink-0">
3808                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
3809                                19:00 - 21:00                            </span>
3810
3811                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
3812                                <i class="fa-solid fa-chevron-down"></i>
3813                            </span>
3814                        </div>
3815                    </button>
3816
3817                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
3818                        <div class="grid-accordion-inner">
3819                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
3820
3821                                                                    
3822                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3823
3824                                        <div class="shrink-0 mt-0.5">
3825                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3826                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3827                                                19:00                                            </div>
3828                                        </div>
3829
3830                                        <div class="flex-1 min-w-0">
3831
3832                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3833                                                                                            <div class="mb-1">
3834                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3835                                                        <i class="fa-solid fa-folder-open opacity-70"></i> egyéb műsorok                                                    </span>
3836                                                </div>
3837                                            
3838                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3839                                            <div class="flex items-start gap-2 mb-1.5">
3840                                                
3841                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3842                                                    <a href="/musoraink/adas/723785" class="hover:underline">
3843                                                        Harangszó                                                    </a>
3844
3845                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3846                                                                                                    </h3>
3847                                            </div>
3848
3849                                            
3850                                                                                            <a href="/musoraink/adas/723785" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3851                                                    » bővebben...
3852                                                </a>
3853                                            
3854                                        </div>
3855
3856                                        
3857                                    </div>
3858                                                                    
3859                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3860
3861                                        <div class="shrink-0 mt-0.5">
3862                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3863                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3863shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3864                                                19:01                                            </div>
3865                                        </div>
3866
3867                                        <div class="flex-1 min-w-0">
3868
3869                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3870                                                                                            <div class="mb-1">
3871                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3872                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
3873                                                </div>
3874                                            
3875                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3876                                            <div class="flex items-start gap-2 mb-1.5">
3877                                                
3878                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3879                                                    <a href="/musoraink/adas/723786" class="hover:underline">
3880                                                        Rózsafüzér-imádság                                                    </a>
3881
3882                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3883                                                                                                    </h3>
3884                                            </div>
3885
3886                                            
3887                                                                                            <a href="/musoraink/adas/723786" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3888                                                    » bővebben...
3889                                                </a>
3890                                            
3891                                        </div>
3892
3893                                        
3894                                    </div>
3895                                                                    
3896                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3897
3898                                        <div class="shrink-0 mt-0.5">
3899                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3900                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3901                                                19:32                                            </div>
3902                                        </div>
3903
3904                                        <div class="flex-1 min-w-0">
3905
3906                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3907                                                                                            <div class="mb-1">
3908                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3909                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
3910                                                </div>
3911                                            
3912                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3913                                            <div class="flex items-start gap-2 mb-1.5">
3914                                                
3915                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3916                                                    <a href="/musoraink/adas/723787" class="hover:underline">
3917                                                        Hírek                                                    </a>
3918
3919                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3920                                                                                                    </h3>
3921                                            </div>
3922
3923                                            
3924                                                                                            <a href="/musoraink/adas/723787" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
3925                                                    » bővebben...
3926                                                </a>
3927                                            
3928                                        </div>
3929
3930                                        
3931                                    </div>
3932                                                                    
3933                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3934
3935                                        <div class="shrink-0 mt-0.5">
3936                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3937                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3937shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3938                                                19:35                                            </div>
3939                                        </div>
3940
3941                                        <div class="flex-1 min-w-0">
3942
3943                                            <!-- Kategória teljesen külön sorban, a cím felett -->
3944                                                                                            <div class="mb-1">
3945                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
3946                                                        <i class="fa-solid fa-folder-open opacity-70"></i> gyermek- és ifjúsági műsorok                                                    </span>
3947                                                </div>
3948                                            
3949                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
3950                                            <div class="flex items-start gap-2 mb-1.5">
3951                                                
3952                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
3953                                                    <a href="/musoraink/adas/bodo-bela-brumi-mackovarosban-felolvassa-kristan-attila-8-4-ism-723788" class="hover:underline">
3954                                                        Varázsdoboz                                                    </a>
3955
3956                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
3957                                                                                                    </h3>
3958                                            </div>
3959
3960                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
3961                                                    mesés irodalom
3962Bodó Béla: Brumi Mackóvárosban
3963Felolvassa: Kristán Attila (8/4.)
3964Szerkesztő: Varga Andrea                                                </div>
3965                                            
3966                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
3967                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
3968                                                </button>
3969
3970                                                <div x-show="detailsOpen"
3971                                                    x-transition:enter="transition ease-out duration-200"
3972                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
3973                                                    x-transition:enter-end="opacity-100 translate-y-0"
3974                                                    x-cloak
3975                                                    class="mt-3 pt-3 border-t border-gray-100">
3976
3977                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
3978                                                            Hangmérnök: Horváth János
3979Zeneszerző: Laczó Zoltán Vince
3980Rendező: Varga Andrea                                                        </div>
3981                                                    
3982                                                    
3983                                                </div>
3984                                            
3985                                        </div>
3986
3987                                        
3988                                    </div>
3989                                                                    
3990                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
3991
3992                                        <div class="shrink-0 mt-0.5">
3993                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
3994                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
3994shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
3995                                                20:00                                            </div>
3996                                        </div>
3997
3998                                        <div class="flex-1 min-w-0">
3999
4000                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4001                                                                                            <div class="mb-1">
4002                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4003                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
4004                                                </div>
4005                                            
4006                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4007                                            <div class="flex items-start gap-2 mb-1.5">
4008                                                
4009                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4010                                                    <a href="/musoraink/adas/723789" class="hover:underline">
4011                                                        Hírek                                                    </a>
4012
4013                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4014                                                                                                    </h3>
4015                                            </div>
4016
4017                                            
4018                                                                                            <a href="/musoraink/adas/723789" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4019                                                    » bővebben...
4020                                                </a>
4021                                            
4022                                        </div>
4023
4024                                        
4025                                    </div>
4026                                                                    
4027                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4028
4029                                        <div class="shrink-0 mt-0.5">
4030                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4031                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4032                                                20:04                                            </div>
4033                                        </div>
4034
4035                                        <div class="flex-1 min-w-0">
4036
4037                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4038                                                                                            <div class="mb-1">
4039                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4040                                                        <i class="fa-solid fa-folder-open opacity-70"></i> irodalmi és versműsorok                                                    </span>
4041                                                </div>
4042                                            
4043                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4044                                            <div class="flex items-start gap-2 mb-1.5">
4045                                                
4046                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4047                                                    <a href="/musoraink/adas/puskin-anyegin-723790" class="hover:underline">
4048                                                        Miért szeretem?                                                    </a>
4049
4050                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4051                                                                                                    </h3>
4052                                            </div>
4053
4054                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
4055                                                    vallomások irodalomról, művekről, szerzőkről
4056Puskin:Anyegin
4057Szerkesztő: Fazekas Gyöngyvér                                                </div>
4058                                            
4059                                                                                            <a href="/musoraink/adas/puskin-anyegin-723790" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4060                                                    » bővebben...
4061                                                </a>
4062                                            
4063                                        </div>
4064
4065                                        
4066                                    </div>
4067                                                                    
4068                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4069
4070                                        <div class="shrink-0 mt-0.5">
4071                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4072                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
4072shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4073                                                20:30                                            </div>
4074                                        </div>
4075
4076                                        <div class="flex-1 min-w-0">
4077
4078                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4079                                                                                            <div class="mb-1">
4080                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4081                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
4082                                                </div>
4083                                            
4084                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4085                                            <div class="flex items-start gap-2 mb-1.5">
4086                                                
4087                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4088                                                    <a href="/musoraink/adas/723791" class="hover:underline">
4089                                                        Hangoló                                                    </a>
4090
4091                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4092                                                                                                    </h3>
4093                                            </div>
4094
4095                                            
4096                                                                                            <a href="/musoraink/adas/723791" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4097                                                    » bővebben...
4098                                                </a>
4099                                            
4100                                        </div>
4101
4102                                        
4103                                    </div>
4104                                
4105                            </div>
4106                        </div>
4107                    </div>
4108                </section>
4109
4110            
4111                <section x-data="{ open: true }"
4112                    >
4113
4114                    <button @click="open = !open" type="button"
4115                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
4116                        <span class="flex items-center gap-2 text-left">
4117                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
4118                            Velünk vannak                                                    </span>
4119                        <div class="flex items-center gap-4 shrink-0">
4120                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
4121                                21:00 - 23:00                            </span>
4122
4123                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
4124                                <i class="fa-solid fa-chevron-down"></i>
4125                            </span>
4126                        </div>
4127                    </button>
4128
4129                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
4130                        <div class="grid-accordion-inner">
4131                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
4132
4133                                                                    
4134                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4135
4136                                        <div class="shrink-0 mt-0.5">
4137                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4138                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
4138shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4139                                                21:00                                            </div>
4140                                        </div>
4141
4142                                        <div class="flex-1 min-w-0">
4143
4144                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4145                                                                                            <div class="mb-1">
4146                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4147                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
4148                                                </div>
4149                                            
4150                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4151                                            <div class="flex items-start gap-2 mb-1.5">
4152                                                
4153                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4154                                                    <a href="/musoraink/adas/723792" class="hover:underline">
4155                                                        Hírek                                                    </a>
4156
4157                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4158                                                                                                    </h3>
4159                                            </div>
4160
4161                                            
4162                                                                                            <a href="/musoraink/adas/723792" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4163                                                    » bővebben...
4164                                                </a>
4165                                            
4166                                        </div>
4167
4168                                        
4169                                    </div>
4170                                                                    
4171                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4172
4173                                        <div class="shrink-0 mt-0.5">
4174                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4175                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4176                                                21:04                                            </div>
4177                                        </div>
4178
4179                                        <div class="flex-1 min-w-0">
4180
4181                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4182                                                                                            <div class="mb-1">
4183                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4184                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
4185                                                </div>
4186                                            
4187                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4188                                            <div class="flex items-start gap-2 mb-1.5">
4189                                                
4190                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4191                                                    <a href="/musoraink/adas/723793" class="hover:underline">
4192                                                        Napi evangélium                                                    </a>
4193
4194                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4195                                                                                                    </h3>
4196                                            </div>
4197
4198                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
4199                                                    Szent Gellért püspök, vértanú
4200** Mt 10,28-33 **
4201Felolvassa: Varga László                                                </div>
4202                                            
4203                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
4204                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
4205                                                </button>
4206
4207                                                <div x-show="detailsOpen"
4208                                                    x-transition:enter="transition ease-out duration-200"
4209                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
4210                                                    x-transition:enter-end="opacity-100 translate-y-0"
4211                                                    x-cloak
4212                                                    class="mt-3 pt-3 border-t border-gray-100">
4213
4214                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
4215                                                            Ne féljetek azoktól, akik megölik a testet, de a lelket nem tudják megölni. Féljetek inkább attól, aki a lelket is és a testet is el tudja pusztítani a gyehennában. Két verebet ugye egy fillérért árulnak? És egy sem esik közülük a földre a ti Atyátok tudta nélkül. Nektek azonban még a hajszálaitok is mind meg vannak számlálva a fejeteken. Ne féljetek hát, hisz különbek vagytok ti sok verébnél. Mindazt, aki megvall engem az emberek előtt, én is megvallom Atyám előtt, aki a mennyekben van. De azt, aki megtagad engem az emberek előtt, én is meg fogom tagadni Atyám előtt, aki a mennyekben van. 
4216Olvasmányok, ünnepek a liturgikus naptárban.                                                        </div>
4217                                                    
4218                                                    
4219                                                </div>
4220                                            
4221                                        </div>
4222
4223                                        
4224                                    </div>
4225                                                                    
4226                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4227
4228                                        <div class="shrink-0 mt-0.5">
4229                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4230                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
4230shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4231                                                21:08                                            </div>
4232                                        </div>
4233
4234                                        <div class="flex-1 min-w-0">
4235
4236                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4237                                                                                            <div class="mb-1">
4238                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4239                                                        <i class="fa-solid fa-folder-open opacity-70"></i> vallási műsorok                                                    </span>
4240                                                </div>
4241                                            
4242                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4243                                            <div class="flex items-start gap-2 mb-1.5">
4244                                                
4245                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4246                                                    <a href="/musoraink/adas/723794" class="hover:underline">
4247                                                        A Vatikáni Rádió magyar műsora                                                    </a>
4248
4249                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4250                                                                                                    </h3>
4251                                            </div>
4252
4253                                            
4254                                                                                            <a href="/musoraink/adas/723794" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4255                                                    » bővebben...
4256                                                </a>
4257                                            
4258                                        </div>
4259
4260                                        
4261                                    </div>
4262                                                                    
4263                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4264
4265                                        <div class="shrink-0 mt-0.5">
4266                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4267                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4268                                                21:30                                            </div>
4269                                        </div>
4270
4271                                        <div class="flex-1 min-w-0">
4272
4273                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4274                                                                                            <div class="mb-1">
4275                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4276                                                        <i class="fa-solid fa-folder-open opacity-70"></i> irodalmi és versműsorok                                                    </span>
4277                                                </div>
4278                                            
4279                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4280                                            <div class="flex items-start gap-2 mb-1.5">
4281                                                
4282                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4283                                                    <a href="/musoraink/adas/wittinger-laszlo-tiszta-szivuek-kiteljesedes-felolvassa-schnell-adam-18-4-ism-723795" class="hover:underline">
4284                                                        Rádiós regénytár                                                    </a>
4285
4286                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4287                                                                                                    </h3>
4288                                            </div>
4289
4290                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
4291                                                    Wittinger László: Tiszta szívűek - A kiteljesedés 
4292Felolvassa: Schnell Ádám  (18/4.)
4293Szerkesztő: Varga Andrea                                                </div>
4294                                            
4295                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
4296                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
4297                                                </button>
4298
4299                                                <div x-show="detailsOpen"
4300                                                    x-transition:enter="transition ease-out duration-200"
4301                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
4302                                                    x-transition:enter-end="opacity-100 translate-y-0"
4303                                                    x-cloak
4304                                                    class="mt-3 pt-3 border-t border-gray-100">
4305
4306                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
4307                                                            Hangmester: Liszkai Károly 
4308Zenei szerkesztő: Máry Szabó Eszter 
4309Dramaturg-rendező: Sárospataki Zsuzsanna                                                        </div>
4310                                                    
4311                                                    
4312                                                </div>
4313                                            
4314                                        </div>
4315
4316                                        
4317                                    </div>
4318                                                                    
4319                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4320
4321                                        <div class="shrink-0 mt-0.5">
4322                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4323                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
4323shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4324                                                22:00                                            </div>
4325                                        </div>
4326
4327                                        <div class="flex-1 min-w-0">
4328
4329                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4330                                                                                            <div class="mb-1">
4331                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4332                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
4333                                                </div>
4334                                            
4335                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4336                                            <div class="flex items-start gap-2 mb-1.5">
4337                                                
4338                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4339                                                    <a href="/musoraink/adas/723796" class="hover:underline">
4340                                                        Hírek                                                    </a>
4341
4342                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4343                                                                                                    </h3>
4344                                            </div>
4345
4346                                            
4347                                                                                            <a href="/musoraink/adas/723796" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4348                                                    » bővebben...
4349                                                </a>
4350                                            
4351                                        </div>
4352
4353                                        
4354                                    </div>
4355                                                                    
4356                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4357
4358                                        <div class="shrink-0 mt-0.5">
4359                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4360                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4361                                                22:04                                            </div>
4362                                        </div>
4363
4364                                        <div class="flex-1 min-w-0">
4365
4366                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4367                                                                                            <div class="mb-1">
4368                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4369                                                        <i class="fa-solid fa-folder-open opacity-70"></i> portré- és riportműsorok                                                    </span>
4370                                                </div>
4371                                            
4372                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4373                                            <div class="flex items-start gap-2 mb-1.5">
4374                                                
4375                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4376                                                    <a href="/musoraink/adas/kriston-endre-egri-segedpuspok-megprobaltatasai-2-resz-ism-723797" class="hover:underline">
4377                                                        Arcok és sorsok                                                    </a>
4378
4379                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4380                                                                                                    </h3>
4381                                            </div>
4382
4383                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
4384                                                    fejezetek a Magyar Katolikus Egyház életéből
4385Kriston Endre egri segédpüspök megpróbáltatásai
43862.rész
4387Szerkesztő: Soós Viktor                                                </div>
4388                                            
4389                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
4390                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
4391                                                </button>
4392
4393                                                <div x-show="detailsOpen"
4394                                                    x-transition:enter="transition ease-out duration-200"
4395                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
4396                                                    x-transition:enter-end="opacity-100 translate-y-0"
4397                                                    x-cloak
4398                                                    class="mt-3 pt-3 border-t border-gray-100">
4399
4400                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
4401                                                            Kriston Endre egri segédpüspök életútjáról, megpróbáltatásairól, a kommunista diktatúra vele szembeni eljárásairól beszél Szabó Tamás tudományos kutató.                                                        </div>
4402                                                    
4403                                                    
4404                                                </div>
4405                                            
4406                                        </div>
4407
4408                                        
4409                                    </div>
4410                                                                    
4411                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4412
4413                                        <div class="shrink-0 mt-0.5">
4414                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4415                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
4415shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4416                                                22:30                                            </div>
4417                                        </div>
4418
4419                                        <div class="flex-1 min-w-0">
4420
4421                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4422                                                                                            <div class="mb-1">
4423                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4424                                                        <i class="fa-solid fa-folder-open opacity-70"></i> aktuális és hírműsorok                                                    </span>
4425                                                </div>
4426                                            
4427                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4428                                            <div class="flex items-start gap-2 mb-1.5">
4429                                                
4430                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4431                                                    <a href="/musoraink/adas/adjatok-vissza-negyzetkilometereinket-afrika-keresere-uj-vilagterkepet-szavazott-meg-az-ensz-ism-723798" class="hover:underline">
4432                                                        Kerengő                                                    </a>
4433
4434                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4435                                                                                                    </h3>
4436                                            </div>
4437
4438                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
4439                                                    külpolitikai beszélgetések
4440Adjátok vissza a négyzetkilométereinket! 
4441Afrika kérésére új világtérképet szavazott meg az ENSZ
4442Szerkesztő: Pozsgai Nóra                                                </div>
4443                                            
4444                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
4445                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
4446                                                </button>
4447
4448                                                <div x-show="detailsOpen"
4449                                                    x-transition:enter="transition ease-out duration-200"
4450                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
4451                                                    x-transition:enter-end="opacity-100 translate-y-0"
4452                                                    x-cloak
4453                                                    class="mt-3 pt-3 border-t border-gray-100">
4454
4455                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
4456                                                            Az Afrikai Unió javaslatára az ENSZ új világtérkép bevezetéséről döntött. Donald Trump 3 nappal később közétette saját térképét, amelyen Grönlandtól Közép-Amerikáig mindent Amerikai zászló borít. Kínának és Oroszországnak is saját szemléletű térképe van, ugyanakkor megszavazták Afrika javaslatát …
4457Búcsút mondhatunk a gyerekkorunkból ismert atlasznak? de Miért nem volt már jó a régi? Ki dönti el mi legyen középen? Hogyan dolgozik a térkép a fejekben, és hogyan hat a politikára? Miként lesz geopolitikai eszköz, információs fegyver? 
4458Beszélgetőtársaik: a Szegedi Tudományegyetem oktatói: 
4459GÁL TAMÁS tanszékvezető egy. tanár,
4460KÁDÁR ANETT ADJUNKTUS, és KRISKA OLIVÉR adjunktus.
4461(Grafika: Fr24)                                                        </div>
4462                                                    
4463                                                    
4464                                                </div>
4465                                            
4466                                        </div>
4467
4468                                                                                    <div class="shrink-0 w-24 h-20 md:w-32 md:h-24 ml-2 md:ml-4">
4469                                                <a href="/musoraink/adas/adjatok-vissza-negyzetkilometereinket-afrika-keresere-uj-vilagterkepet-szavazott-meg-az-ensz-ism-723798" class="block w-full h-full rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
4470                                                    <img src="https://www.katolikusradio.hu/kepek/musorok/723798/kicsi/ENSZ2.jpg"
4471                                                        alt="Műsor kép"
4472                                                        class="w-full h-full object-cover hover:opacity-90 transition-opacity">
4473                                                </a>
4474                                            </div>
4475                                        
4476                                    </div>
4477                                
4478                            </div>
4479                        </div>
4480                    </div>
4481                </section>
4482
4483            
4484                <section x-data="{ open: true }"
4485                    >
4486
4487                    <button @click="open = !open" type="button"
4488                        class="musor-slot-header bg-[#70a300] w-full text-white px-5 py-3 rounded-xl shadow-sm font-bold text-lg mb-2 hover:bg-opacity-90 transition-all focus:outline-none">
4489                        <span class="flex items-center gap-2 text-left">
4490                            <i class="fa-solid fa-clock opacity-80 text-sm"></i>
4491                            Olvasólámpa                                                    </span>
4492                        <div class="flex items-center gap-4 shrink-0">
4493                            <span class="musor-slot-range text-sm font-medium bg-white/20 py-1 rounded-lg backdrop-blur-sm hidden sm:inline-flex w-28 text-center">
4494                                23:00 - 0:00                            </span>
4495
4496                            <span class="inline-flex transition-transform duration-300 rotate-180" :class="{ 'rotate-180': open }">
4497                                <i class="fa-solid fa-chevron-down"></i>
4498                            </span>
4499                        </div>
4500                    </button>
4501
4502                    <div class="grid-accordion is-open" :class="{ 'is-open': open }">
4503                        <div class="grid-accordion-inner">
4504                            <div class="flex flex-col gap-4 pl-3 md:pl-8 border-l-2 border-gray-100 ml-2 md:ml-4 pb-4 pt-2">
4505
4506                                                                    
4507                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4508
4509                                        <div class="shrink-0 mt-0.5">
4510                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4511                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4512                                                23:00                                            </div>
4513                                        </div>
4514
4515                                        <div class="flex-1 min-w-0">
4516
4517                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4518                                                                                            <div class="mb-1">
4519                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4520                                                        <i class="fa-solid fa-folder-open opacity-70"></i> portré- és riportműsorok                                                    </span>
4521                                                </div>
4522                                            
4523                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4524                                            <div class="flex items-start gap-2 mb-1.5">
4525                                                
4526                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4527                                                    <a href="/musoraink/adas/avos-borton-conti-utcaban-vezetett-seta-mindszenty-biboros-egykori-bortoneben-2-resz-ism-723799" class="hover:underline">
4528                                                        Magyar csillagok                                                    </a>
4529
4530                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4531                                                                                                    </h3>
4532                                            </div>
4533
4534                                                                                            <div class="text-[#333] text-[14px] md:text-[15px] leading-snug whitespace-pre-line mb-2">
4535                                                    Ávós börtön a Conti utcában
4536Vezetett séta Mindszenty bíboros egykori börtönében – 2. rész
4537Szerkesztő: Kövesdy Zsuzsa                                                </div>
4538                                            
4539                                                                                            <button @click="detailsOpen = !detailsOpen" type="button" class="text-[#5c8500] text-[14px] hover:underline focus:outline-none">
4540                                                    » <span x-text="detailsOpen ? 'kevesebb...' : 'bővebben...'"></span>
4541                                                </button>
4542
4543                                                <div x-show="detailsOpen"
4544                                                    x-transition:enter="transition ease-out duration-200"
4545                                                    x-transition:enter-start="opacity-0 translate-y-[-5px]"
4546                                                    x-transition:enter-end="opacity-100 translate-y-0"
4547                                                    x-cloak
4548                                                    class="mt-3 pt-3 border-t border-gray-100">
4549
4550                                                                                                            <div class="text-gray-600 text-[14px] whitespace-pre-line mb-4">
4551                                                            Folytatjuk    múlt héten megkezdett   műsorunkat.
4552Különleges, megrendítő, ritka élményben lesz része azoknak a hallgatóknak, akik most megnyitják szívüket e műsorunk előtt. Kovács Gergely, a Mindszenty Alapítvány képviselője, Mindszenty József bíboros boldoggá avatási eljárásának viceposztulátora megnyitja számunkra a Conti utcai ávós börtön ajtaját, ahol egykor Mindszenty József bíboros raboskodott. És akkor mi egy csapásra egyszerű hallgatóból helyszíni látogatóvá válunk. Megrázó, felejthetetlen élményben lesz részünk, mely egyúttal megindít bennünket lélekben a nagy 56-os forradalmi évforduló felé.
4553A 2022. március 20-án elhangzott Ávós börtön a Conti utcában című adásunk ismétlése.                                                        </div>
4554                                                    
4555                                                    
4556                                                </div>
4557                                            
4558                                        </div>
4559
4560                                        
4561                                    </div>
4562                                                                    
4563                                    <div x-data="{ detailsOpen: false }" class="bg-white border-b border-gray-100 py-4 flex items-start gap-4">
4564
4565                                        <div class="shrink-0 mt-0.5">
4566                                            <!-- Az időpont háttere kékre vált, ha épp most szól -->
4567                                            <div class="musor-episode-time bg-[#5c8500] text-white font-bold text-sm px-2 py-0.5 
4567shadow-sm text-center min-w-[50px] transition-colors rounded-sm">
4568                                                23:30                                            </div>
4569                                        </div>
4570
4571                                        <div class="flex-1 min-w-0">
4572
4573                                            <!-- Kategória teljesen külön sorban, a cím felett -->
4574                                                                                            <div class="mb-1">
4575                                                    <span class="text-[10px] md:text-[11px] text-gray-400 font-bold uppercase tracking-wider flex items-center gap-1.5">
4576                                                        <i class="fa-solid fa-folder-open opacity-70"></i> zenei műsorok                                                    </span>
4577                                                </div>
4578                                            
4579                                            <!-- Lejátszógomb és a Műsor címe egy sorban -->
4580                                            <div class="flex items-start gap-2 mb-1.5">
4581                                                
4582                                                <h3 class="text-[17px] md:text-[18px] font-bold text-[#5c8500] leading-tight flex flex-wrap items-center gap-x-2 gap-y-1">
4583                                                    <a href="/musoraink/adas/723800" class="hover:underline">
4584                                                        Hangoló                                                    </a>
4585
4586                                                    <!-- ÚJ: Most szól badge az épp futó adás címe mellett -->
4587                                                                                                    </h3>
4588                                            </div>
4589
4590                                            
4591                                                                                            <a href="/musoraink/adas/723800" class="text-[#5c8500] text-[14px] hover:underline block mt-1">
4592                                                    » bővebben...
4593                                                </a>
4594                                            
4595                                        </div>
4596
4597                                        
4598                                    </div>
4599                                
4600                            </div>
4601                        </div>
4602                    </div>
4603                </section>
4604
4605                    </div>
4606    
4607            <div class="flex justify-center mt-10 border-t border-gray-100 pt-10">
4608            <div x-data="datePicker('2026-09-24')" x-init="initDate()" class="relative w-full md:w-auto" x-cloak>
4609                <div class="flex items-center justify-between w-full bg-brand-grey rounded-xl p-1 shadow-sm border border-gray-100">
4610
4611                    <a href="?datum=2026-09-23" class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-brand-dark hover:bg-white rounded-lg transition-all shrink-0" title="Előző nap" data-turbo-action="advance">
4612                        <i class="fa-solid fa-chevron-left text-sm"></i>
4613                    </a>
4614
4615                    <button
4616                        @click="toggle()"
4617                        type="button"
4618                        class="px-4 py-2 flex-1 flex items-center justify-center gap-2 font-bold text-brand-dark hover:bg-white rounded-lg transition-all min-w-[140px]">
4619                        <i class="fa-regular fa-calendar text-brand-green"></i>
4620                        <span x-text="formatDisplayDate()"></span>
4621                    </button>
4622
4623                    <a href="?datum=2026-09-25" class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-brand-dark hover:bg-white rounded-lg transition-all shrink-0" title="Következő nap" data-turbo-action="advance">
4624                        <i class="fa-solid fa-chevron-right text-sm"></i>
4625                    </a>
4626                </div>
4627
4628                <div
4629                    x-show="open"
4630                    @click.outside="open = false"
4631                    x-transition:enter="transition ease-out duration-200"
4632                    x-transition:enter-start="opacity-0 translate-y-2"
4633                    x-transition:enter-end="opacity-100 translate-y-0"
4634                    class="absolute bottom-full mb-2 left-0 right-0 md:left-1/2 md:-translate-x-1/2 z-[100] bg-white shadow-2xl rounded-2xl p-4 border border-gray-100 min-w-[280px]"
4635                    x-cloak>
4636                    <div class="flex items-center justify-between mb-4">
4637                        <button type="button" @click="prevMonth()" class="p-2 hover:bg-gray-100 rounded-lg"><i class="fa-solid fa-chevron-left text-xs"></i></button>
4638                        <div class="font-bold text-brand-dark" x-text="monthNames[month] + ' ' + year"></div>
4639                        <button type="button" @click="nextMonth()" class="p-2 hover:bg-gray-100 rounded-lg"><i class="fa-solid fa-chevron-right text-xs"></i></button>
4640                    </div>
4641
4642                    <div class="grid grid-cols-7 gap-1 text-center mb-2">
4643                        <template x-for="day in ['H', 'K', 'Sze', 'Cs', 'P', 'Szo', 'V']">
4644                            <div class="text-[10px] font-bold text-gray-400 uppercase" x-text="day"></div>
4645                        </template>
4646                    </div>
4647
4648                    <div class="grid grid-cols-7 gap-1">
4649                        <template x-for="blankday in blankdays">
4650                            <div class="p-2"></div>
4651                        </template>
4652                        <template x-for="(date, dateIndex) in no_of_days" :key="dateIndex">
4653                            <button
4654                                type="button"
4655                                @click="selectDate(date)"
4656                                class="p-2 text-sm rounded-lg transition-all"
4657                                :class="{
4658                                    'bg-brand-green text-white font-bold shadow-md': isSelected(date),
4659                                    'hover:bg-brand-grey text-gray-700': !isSelected(date),
4660                                    'text-brand-green font-bold': isToday(date) && !isSelected(date)
4661                                }"
4662                                x-text="date"></button>
4663                        </template>
4664                    </div>
4665                </div>
4666            </div>
4667        </div>
4668    
4669</div>
4670
4671<script>
4672    document.addEventListener('turbo:before-cache', () => {
4673        document.body.style.overflow = 'auto';
4674    }, {
4675        once: true
4676    });
4677
4678    window.adasGalleryManager = function(imageArray) {
4679        return {
4680            images: imageArray,
4681            lightboxOpen: false,
4682            currentImageIndex: 0,
4683
4684            openLightbox(index) {
4685                if (this.images.length === 0) return;
4686                this.currentImageIndex = index;
4687                this.lightboxOpen = true;
4688                document.body.style.overflow = 'hidden';
4689            },
4690
4691            closeLightbox() {
4692                this.lightboxOpen = false;
4693                document.body.style.overflow = 'auto';
4694            },
4695
4696            prevImage() {
4697                if (this.images.length <= 1) return;
4698                if (this.currentImageIndex > 0) {
4699                    this.currentImageIndex--;
4700                } else {
4701                    this.currentImageIndex = this.images.length - 1;
4702                }
4703            },
4704
4705            nextImage() {
4706                if (this.images.length <= 1) return;
4707                if (this.currentImageIndex < this.images.length - 1) {
4708                    this.currentImageIndex++;
4709                } else {
4710                    this.currentImageIndex = 0;
4711                }
4712            }
4713        }
4714    }
4715</script>
4715 <!-- Az oldal tartalma -->
4716
4717
4718
4719    <footer id="footer" class="bg-brand-dark text-white py-12 lg:py-16">
4720  <div class="max-w-[1440px] mx-auto px-4 md:px-8">
4721    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 mb-12">
4722
4723      <div class="md:col-span-3 lg:col-span-2 space-y-6">
4724        <div class="flex items-center justify-center md:justify-start">
4725          <div class="w-14 h-14 lg:w-16 lg:h-16 rounded-full flex items-center justify-center overflow-hidden">
4726            <img src="/img/logo.png"
4727              alt="Magyar Katolikus Rádió" class="w-full h-full object-cover">
4728          </div>
4729          <div class="ml-4 text-left">
4730            <div class="text-lg lg:text-xl font-bold">Magyar Katolikus Rádió</div>
4731            <div class="text-sm text-gray-400">Örömhír mindenkinek!</div>
4732          </div>
4733        </div>
4734        <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">
4735          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.
4736        </p>
4737        <div class="flex items-center justify-center md:justify-start space-x-4">
4738          <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>
4739          <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>
4740          <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>
4741          <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>
4742          <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>
4743          <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>
4744        </div>
4745      </div>
4746
4747      
4748      <div class="text-center md:text-left">
4749        <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>
4750        <ul class="space-y-2 lg:space-y-3">
4751            <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>
4752          <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>
4753          <li><a href="/podcastok" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Podcastok</a></li>
4754        </ul>
4755      </div>
4756
4757      <div class="text-center md:text-left">
4758        <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>
4759        <ul class="space-y-2 lg:space-y-3">
4760          <li><a href="/hireink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Hírek</a></li>
4761          <li><a href="/videoink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Videók</a></li>
4762          <li><a href="/igenaptar" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Igenaptár</a></li>
4763        </ul>
4764      </div>
4765
4766      <div class="text-center md:text-left">
4767        <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>
4768        <ul class="space-y-2 lg:space-y-3">
4769          <li><a href="/rolunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Rólunk</a></li>
4770          <li><a href="/bemutatkozunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Kapcsolat</a></li>
4771          <li><a href="/tamogatas" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Támogatás</a></li>
4772          <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>
4773          <li><a href="/impresszum" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Impresszum</a></li>
4774        </ul>
4775      </div>
4776    </div>
4777
4778    <div class="border-t border-white/10 pt-10">
4779      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 ga
4779p-10 lg:gap-12 mb-12">
4780
4781        <div class="md:col-span-3 lg:col-span-2 space-y-6">
4782          <h4 class="text-lg font-bold mb-4">Kapcsolat</h4>
4783          <div class="space-y-3 text-gray-400 max-w-xs mx-auto md:mx-0">
4784            <div class="flex items-start justify-center md:justify-start">
4785              <i class="fa-solid fa-location-dot mt-1 mr-3 text-brand-green"></i>
4786              <span class="text-sm">1062 Budapest, Délibáb u. 15.-17.</span>
4787            </div>
4788            <div class="flex items-center justify-center md:justify-start">
4789              <i class="fa-solid fa-phone mr-3 text-brand-green"></i>
4790              <span class="text-sm">(+36 1) 255-3333</span>
4791            </div>
4792            <div class="flex items-center justify-center md:justify-start">
4793              <i class="fa-solid fa-envelope mr-3 text-brand-green"></i>
4794              <span class="text-sm">[email protected]</span>
4795            </div>
4796          </div>
4797        </div>
4798
4799        <div class="md:col-span-3 lg:col-span-2 space-y-6">
4800          <h4 class="text-lg font-bold mb-4">Támogatók</h4>
4801          <div class="space-y-3 text-gray-400 max-w-md mx-auto md:mx-0">
4802            <div class="flex items-start justify-center md:justify-start">
4803              <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>
4804            </div>
4805          </div>
4806        </div>
4807
4808		<div class="text-center md:text-left">
4809			<div class="flex flex-col gap-4 max-w-[150px] w-full">
4810			  <img src="/img/nmhh_logo-150px.jpg" alt="NMHH logó" class="w-full h-auto object-contain rounded shadow-sm">
4811			  <img src="/img/nka_logo-150px.jpg" alt="NKA logó" class="w-full h-auto object-contain rounded shadow-sm">
4812			</div>
4813
4814		</div>
4815      </div>
4816
4817      <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">
4818        <p class="text-gray-500 text-xs lg:text-sm">
4819          © 2026 Magyar Katolikus Rádió Zrt. Minden jog fenntartva.
4820        </p>
4821        <p class="text-gray-500 text-xs lg:text-sm">
4822          Készítette: <a href="https://novanow.hu" class="text-brand-green hover:underline">NovaNow</a>
4823        </p>
4824      </div>
4825    </div>
4826  </div>
4827</footer>    <style>
4828  /* Alap padding az élő adáshoz (vagy becsukott állapothoz) */
4829  body {
4830    padding-bottom: 72px;
4831    transition: padding-bottom 0.3s ease;
4832  }
4833
4834  /* Becsukva mindegy mi megy, kicsi a padding */
4835  body.player-minimized {
4836    padding-bottom: 16px !important;
4837  }
4838
4839  /* Archív adásnál nagyobbnak kell lennie a paddingnak mobilon, mert két soros a lejátszó */
4840  @media (max-width: 767px) {
4841    body.player-archive {
4842      padding-bottom: 110px;
4843    }
4844  }
4845
4846  input[type="range"] {
4847    accent-color: #85c000;
4848    cursor: pointer;
4849  }
4850
4851  input[type="range"]:disabled {
4852    cursor: not-allowed;
4853    accent-color: #6c757d;
4854  }
4855
4856  .radio-pulse {
4857    position: relative;
4858    display: flex;
4859    align-items: center;
4860    justify-content: center; /* JAVÍTVA: justify-center -> justify-content */
4861  }
4862
4863  .radio-pulse.is-playing::before {
4864    content: "";
4865    position: absolute;
4866    overflow: hidden;
4867    top: 50%;
4868    left: 50%;
4869    width: 100%;
4870    height: 100%;
4871    margin-top: -50%;
4872    margin-left: -50%;
4873    border-radius: 9999px;
4874    background-color: #85c000;
4875    opacity: 0.5;
4876    animation: pulse-wave 2.5s infinite ease-out;
4877    z-index: -1;
4878    pointer-events: none;
4879  }
4880
4881  @keyframes pulse-wave {
4882    0% { transform: scale(1); opacity: 0.5; }
4883    100% { transform: scale(2.4); opacity: 0; }
4884  }
4885</style>
4886
4887<div id="radio-player-global" data-turbo-permanent x-data="radioPlayer" x-init="init()" x-cloak>
4888  <section
4889    id="quick-listen-bar"
4890    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"
4891    :class="{ 'h-[72px]': isLiveStream || minimized, 'h-[110px] md:h-[72px]': !isLiveStream && !minimized }"
4892    x-show="!minimized"
4893    x-transition.opacity>
4894    
4895    <div class="max-w-[1440px] w-full mx-auto px-4 md:px-6">
4896      <div class="flex items-center justify-between gap-2 md:gap-4 h-[56px] md:h-auto md:py-2">
4897
4898        <div class="flex items-center gap-3 md:gap-4 min-w-[50%] md:min-w-[200px]">
4899          <button
4900            type="button"
4901            class="w-10 h-10 bg-[#85c000] hover:bg-[#96d100] rounded-full flex items-center justify-center transition-colors shrink-0"
4902            @click="toggle()"
4903            :aria-label="playing ? 'Szünet' : 'Lejátszás'">
4904            <i class="fa-solid fa-play text-white ml-1" x-show="!playing" x-cloak></i>
4905            <i class="fa-solid fa-pause text-white" x-show="playing" x-cloak></i>
4906          </button>
4907
4908          <div class="min-w-0 flex-1">
4909            <div class="text-white font-semibold text-sm leading-tight truncate" x-text="displayTitle"></div>
4910            <div class="text-gray-400 text-xs leading-tight truncate" x-text="sourceLabel"></div>
4911          </div>
4912        </div>
4913
4914        <div class="hidden md:flex flex-1 items-center justify-center gap-3 px-4" x-show="!isLiveStream" x-cloak>
4915          <span class="text-xs text-gray-400 font-mono w-12 text-right" x-text="formatTime(currentTime)"></span>
4916          <input
4917            type="range"
4918            min="0"
4919            :max="duration > 0 ? duration : 100"
4920            step="1"
4921            class="flex-1 max-w-[400px] h-1.5 bg-gray-600 rounded-lg appearance-none"
4922            x-model="currentTime"
4923            @input="seek()" />
4924          <span class="text-xs text-gray-400 font-mono w-12" x-text="formatTime(duration)"></span>
4925        </div>
4926        
4927        <div class="hidden md:block flex-1" x-show="isLiveStream" x-cloak></div>
4928
4929        <div class="flex items-center gap-2 md:gap-3 min-w-[80px] md:min-w-[180px] justify-end">
4930          
4931          <div class="hidden md:flex items-center gap-2 w-28">
4932            <i class="fa-solid fa-volume-high text-gray-400 text-sm"></i>
4933            <input
4934              type="range" min="0" max="1" step="0.01"
4935              class="w-full h-1.5 bg-gray-600 rounded-lg appearance-none"
4936              x-model.number="volume"
4937              @input="applyVolume()"
4938              aria-label="Hangerő" />
4939          </div>
4940
4941          <button
4942            type="button"
4943            class="w-9 h-9 rounded-md hover:bg-white/10 text-gray-400 flex items-center justify-center transition-colors ml-1"
4944            @click="minimize()"
4945            aria-label="Becsukás"
4946            title="Becsukás">
4947            <i class="fa-solid fa-chevron-down"></i>
4948          </button>
4949        </div>
4950
4951      </div>
4952
4953      <div class="flex md:hidden items-center justify-between gap-3 pb-3 px-1" x-show="!isLiveStream" x-cloak>
4954        <span class="text-xs text-gray-400 font-mono w-10 text-left shrink-0" x-text="formatTime(currentTime)"></span>
4955        <input
4956            type="range"
4957            min="0"
4958            :max="duration > 0 ? duration : 100"
4959            step="1"
4960            class="flex-1 h-1.5 bg-gray-600 rounded-lg appearance-none w-full"
4961            x-model="currentTime"
4962            @input="seek()" />
4963        <span class="text-xs text-gray-400 font-mono w-10 text-right shrink-0" x-text="formatTime(duration)"></span>
4964      </div>
4965
4966    </div>
4967
4968    <audio x-ref="audio" preload="none"></audio>
4969  </section>
4970
4971  <button
4972    type="button"
4973    x-show="minimized"
4974    @click="expand()"
4975    :class="{ 'radio-pulse is-playing': playing, 'radio-pulse': !playing }"
4976    style="
4977    position: fixed !important;
4978    bottom: 32px !important;
4979    right: 32px !important;
4980    width: 64px !important;
4981    height: 64px !important;
4982    border-radius: 9999px !important;
4983    background-color: #85c000 !important;
4984    color: white !important;
4985    display: flex !important;
4986    align-items: center !important;
4987    justify-content: center !important;
4988    z-index: 999999 !important;
4989    border: none !important;
4990    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
4991    cursor: pointer !important;
4992  "
4993    x-transition:enter="transition ease-out duration-300"
4994    x-transition:enter-start="opacity-0 scale-50 translate-x-10"
4995    x-transition:enter-end="opacity-100 scale-100 translate-x-0">
4996    <i class="fa-solid fa-radio text-2xl"></i>
4997  </button>
4998
4999  
4999<script>
5000    document.addEventListener('alpine:init', () => {
5001      Alpine.data('radioPlayer', () => ({
5002        defaultUrl: 'https://katolikusradio.hu:8001/live_hi.mp3',
5003        defaultTitle: 'Élő adás',
5004
5005        streamUrl: null,
5006        programTitle: null,
5007        isLiveStream: true,
5008
5009        playing: false,
5010        minimized: sessionStorage.getItem('radioMinimized') === 'true', 
5011        volume: 0.7,
5012
5013        currentTime: 0,
5014        duration: 0,
5015        targetStartTime: 0,
5016
5017        get displayTitle() {
5018          return (this.programTitle && this.programTitle.trim()) ? this.programTitle : this.defaultTitle;
5019        },
5020        get sourceLabel() {
5021          return 'Magyar Katolikus Rádió';
5022        },
5023
5024        persistPlaybackState(isPlaying) {
5025          sessionStorage.setItem('radioWasPlaying', isPlaying ? 'true' : 'false');
5026        },
5027
5028        syncPlaybackState(isPlaying = !this.$refs.audio.paused) {
5029          this.playing = !!isPlaying;
5030          this.persistPlaybackState(this.playing);
5031        },
5032
5033        syncProgressState() {
5034          const audio = this.$refs.audio;
5035          if (!this.isLiveStream) {
5036            this.currentTime = audio.currentTime;
5037          }
5038        },
5039
5040        syncMetadataState() {
5041          const audio = this.$refs.audio;
5042          this.duration = audio.duration === Infinity ? 0 : audio.duration;
5043
5044          if (this.targetStartTime > 0) {
5045            audio.currentTime = this.targetStartTime;
5046            this.targetStartTime = 0;
5047          }
5048        },
5049
5050        syncFromAudioElement() {
5051          const audio = this.$refs.audio;
5052          this.syncPlaybackState(!audio.paused);
5053          this.currentTime = audio.currentTime;
5054          this.duration = audio.duration === Infinity ? 0 : audio.duration;
5055        },
5056
5057        init() {
5058          const a = this.$refs.audio;
5059          window.__mkrRadioPlayerInstance = this;
5060
5061          // Turbo permanent elemként a player DOM-ja oldalváltások között megmarad.
5062          // iOS Safari érzékeny arra, ha ugyanarra az audio elemre többször tesszük fel
5063          // ugyanazokat a listenereket, ezért az init idempotens.
5064          if (a.dataset.radioPlayerListenersAttached !== 'true') {
5065            a.dataset.radioPlayerListenersAttached = 'true';
5066
5067            const getActivePlayer = () => window.__mkrRadioPlayerInstance;
5068
5069            a.addEventListener('play', () => {
5070              getActivePlayer()?.syncPlaybackState(true);
5071            });
5072            a.addEventListener('pause', () => {
5073              getActivePlayer()?.syncPlaybackState(false);
5074            });
5075            a.addEventListener('ended', () => {
5076              getActivePlayer()?.syncPlaybackState(false);
5077            });
5078            a.addEventListener('error', (e) => {
5079              getActivePlayer()?.syncPlaybackState(false);
5080              console.error('audio error', e);
5081            });
5082
5083            a.addEventListener('timeupdate', () => {
5084              getActivePlayer()?.syncProgressState();
5085            });
5086
5087            a.addEventListener('loadedmetadata', () => {
5088              getActivePlayer()?.syncMetadataState();
5089            });
5090          }
5091
5092          a.volume = this.volume;
5093
5094          window.RadioPlayer = {
5095            setStream: (url, title, isLive, startAt, forcePlay) => this.setStream(url, title, isLive, startAt, forcePlay),
5096            play: () => this.play(),
5097            pause: () => this.pause(),
5098            toggle: () => this.toggle(),
5099            minimize: () => this.minimize(),
5100            expand: () => this.expand(),
5101            applyBodyPadding: () => this.applyBodyPadding(),
5102          };
5103
5104          // Memória betöltés
5105          if (!a.src || a.src === window.location.href || a.src === '') {
5106            const params = new URLSearchParams(window.location.search);
5107            const pStream = params.get('stream');
5108            const pTitle = params.get('title');
5109
5110            if (pStream) this.setStream(pStream, pTitle);
5111            else this.setStream(this.defaultUrl, null);
5112          } else {
5113            this.syncFromAudioElement();
5114            
5115            const savedState = JSON.parse(sessionStorage.getItem('radioState') || '{}');
5116            this.streamUrl = savedState.streamUrl || a.src;
5117            this.programTitle = savedState.programTitle || '';
5118            this.isLiveStream = savedState.isLiveStream !== undefined ? savedState.isLiveStream : true;
5119          }
5120
5121          this.syncFromAudioElement();
5122          
5123          this.applyBodyPadding();
5124        },
5125
5126        formatTime(seconds) {
5127          if (isNaN(seconds) || !isFinite(seconds)) return '00:00';
5128          const h = Math.floor(seconds / 3600);
5129          const m = Math.floor((seconds % 3600) / 60);
5130          const s = Math.floor(seconds % 60);
5131          if (h > 0) {
5132            return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
5133          }
5134          return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
5135        },
5136
5137        seek() {
5138          if (this.isLiveStream) return;
5139          this.$refs.audio.currentTime = this.currentTime;
5140        },
5141
5142        // Test Padding hozzáadása dinamikusan
5143        applyBodyPadding() {
5144          document.body.classList.toggle('player-minimized', !!this.minimized);
5145          
5146          // Ha NYITVA van és ARCHÍV, akkor plusz osztály a mobilos kétsoros nézet miatt
5147          if (!this.minimized && !this.isLiveStream) {
5148              document.body.classList.add('player-archive');
5149          } else {
5150              document.body.classList.remove('player-archive');
5151          }
5152        },
5153
5154        minimize() {
5155          this.minimized = true;
5156          sessionStorage.setItem('radioMinimized', 'true');
5157          this.applyBodyPadding();
5158        },
5159
5160        expand() {
5161          this.minimized = false;
5162          sessionStorage.setItem('radioMinimized', 'false');
5163          this.applyBodyPadding();
5164        },
5165
5166        ensureAudioSource() {
5167          const a = this.$refs.audio;
5168          if (this.streamUrl && a.src !== this.streamUrl) {
5169            a.src = this.streamUrl;
5170            a.load();
5171          }
5172        },
5173
5174        setStream(url, title = null, isLive = null, startAt = 0, forcePlay = false) {
5175          if (!url) return;
5176          const a = this.$refs.audio;
5177          const wasPlaying = !a.paused;
5178          const shouldStart = wasPlaying || forcePlay;
5179
5180          this.streamUrl = url;
5181          this.programTitle = title;
5182          this.isLiveStream = isLive !== null ? isLive : url.includes('live_hi');
5183
5184          sessionStorage.setItem('radioState', JSON.stringify({
5185            streamUrl: this.streamUrl,
5186            programTitle: this.programTitle,
5187            isLiveStream: this.isLiveStream
5188          }));
5189
5190          this.targetStartTime = startAt;
5191          this.currentTime = startAt;
5192          this.duration = 0;
5193
5194          if (shouldStart) {
5195            a.pause();
5196            this.ensureAudioSource();
5197            this.syncPlaybackState(false);
5198          } else if (this.isLiveStream) {
5199            // iOS Safari a live stream automatikus a.load()/src indítását a teljes
5200            // oldalbetöltés részének tekinti, ezért a progress bar félúton megállhat,
5201            // a Turbo/Alpine restore pedig félkész DOM-ot festhet. Élő adást csak
5202            // felhasználói play vagy explicit visszajátszás után nyitunk meg.
5203            a.pause();
5204            a.removeAttribute('src');
5205            a.load();
5206            this.syncPlaybackState(false);
5207          } else if (a.src !== url) {
5208            a.pause();
5209            this.ensureAudioSource();
5210            this.syncPlaybackState(false);
5211          }
5212
5213          this.applyBodyPadding(); // Frissítjük a magasságot betöltéskor
5214
5215          if (shouldStart) setTimeout(() => this.play(), 50);
5216        },
5217
5218        async play() {
5219          const a = this.$refs.audio;
5220          this.ensureAudioSource();
5221          try {
5222            await a.play();
5223            this.syncPlaybackState(true);
5224          } catch (e) {
5225            this.syncPlaybackState(false);
5226            console.error('play failed', e);
5227          }
5228        },
5229
5230        pause() {
5231          this.$refs.audio.pause();
5232          this.syncPlaybackState(false);
5233        },
5234
5235        async toggle() {
5236          const a = this.$refs.audio;
5237          if (a.paused) await this.play();
5238          else this.pause();
5239        },
5240
5241        applyVolume() {
5242          this.$refs.audio.volume = this.volume;
5243        },
5244      }));
5245    });
5246  </script>
5246
5247
5248  
5248<script>
5249    if (!window.__mkrRadioTurboBridgeRegistered) {
5250      window.__mkrRadioTurboBridgeRegistered = true;
5251      let wasRadioPlaying = false;
5252
5253      document.addEventListener("turbo:before-render", () => {
5254        const audioEl = document.querySelector('#radio-player-global audio');
5255        if (audioEl) {
5256          wasRadioPlaying = !audioEl.paused;
5257          sessionStorage.setItem('radioWasPlaying', wasRadioPlaying ? 'true' : 'false');
5258        }
5259      });
5260
5261      document.addEventListener("turbo:render", () => {
5262        if (wasRadioPlaying) {
5263          const audioEl = document.querySelector('#radio-player-global audio');
5264          if (audioEl) {
5265            setTimeout(() => {
5266              if (window.RadioPlayer && typeof window.RadioPlayer.play === 'function') {
5267                window.RadioPlayer.play();
5268              } else {
5269                audioEl.play().catch(e => console.log('Auto-play preventálva:', e));
5270              }
5271            }, 50);
5272          }
5273        }
5274
5275        if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') {
5276          window.RadioPlayer.applyBodyPadding();
5277        }
5278      });
5279
5280      window.addEventListener('pageshow', () => {
5281        const shouldResumePlayback = sessionStorage.getItem('radioWasPlaying') === 'true';
5282
5283        if (shouldResumePlayback && window.RadioPlayer && typeof window.RadioPlayer.play === 'function') {
5284          window.RadioPlayer.play();
5285        }
5286
5287        if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') {
5288          window.RadioPlayer.applyBodyPadding();
5289        }
5290      });
5291    }
5292  </script>
5292
5293</div>
5294
5295
5296  </body>
5297
5298  </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.