PageSourceSearch

https://katolikusradio.hu/

html katolikusradio.hu collected 2026-10-01 11:43:12 UTC 138,551 bytes, 2,260 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>Magyar Katolikus Rádió - Főoldal</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-green">Kezdőlap</a>
220
221                        <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false">
222                <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green">
223                    <span>Műsorok</span>
224                    <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
225                        <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i>
226                    </span>
227                </button>
228                <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak>
229                    <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden">
230                        <a href="/musoraink" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">MŰSORÚJSÁG és archívum</a>
231                        <a href="/musorabc" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Műsoraink ABC-sorrendben</a>
232                        <a href="/musorkategoriak" class="block px-4 py-2.5 text-sm font-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-green">Kezdőlap</a>
341
342            <div class="py-2 border-b border-gray-50" x-data="{ open: false }">
343                <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green">
344                    <span class="pointer-events-none">Műsorok</span>
345                    <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
346                        <i class="fa-solid fa-chevron-down text-sm"></i>
347                    </span>
348                </button>
349                <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;">
350                    <a href="/musoraink" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">MŰSORÚJSÁG és archívum</a>
351                    <a href="/musorabc" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Műsoraink ABC-sorrendben</a>
352                    <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>
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="/videoink" class="block text-base py-1 mb-1 font-medium text-gray-600 hover:text-brand-green">Videók</a>
381					
382                                                                                                    <a href="/oldal/letoltheto-anyagok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">
383                                Letölthető anyagok                            </a>
384                                                                                <a href="/oldal/studioberles" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">
385                                Stúdióbérlés                            </a>
386                                                            </div>
387            </div>
388
389            <div class="py-2 border-b border-gray-50" x-data="{ open: false }">
390                <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">
391                    <span class="pointer-events-none">Rádió</span>
392                    <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'">
393                        <i class="fa-solid fa-chevron-down text-sm"></i>
394                    </span>
395                </button>
396                <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;">
397                    <a href="/rolunk" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Rólunk</a>
398                    <a href="/bemutatkozunk" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Kapcsolat</a>
399                    <a href="/rolunk#frequencies" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Vételkörzetek</a>
400                    <a href="/munkatarsaink" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Munkatársaink</a>
401                    <a href="/tamogatas" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Támogatás</a>
402                </div>
403            </div>
404
405            <div class="flex flex-col gap-3 pt-6 md:hidden px-2 pb-4">
406                <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">
407                    <i class="fa-solid fa-envelope"></i><span>Hírlevél</span>
408                </a>
409                <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">
410                    <i class="fa-solid fa-mobile-screen"></i><span>App Letöltése</span>
411                </a>
412                <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">
413                    <i class="fa-solid fa-shopping-cart"></i><span>Webshop</span>
414                </a>
415            </div>
416        </nav>
417    </div>
418
419    <div x-show="searchOpen"
420        style="display: none;"
421        x-cloak
422        @keydown.window.escape="searchOpen = false"
423        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">
424
425        <div class="absolute inset-0 cursor-pointer" @click="searchOpen = false"></div>
426
427        <div x-show="searchOpen"
428            x-transition:enter="transition ease-out duration-300 transform"
429            x-transition:enter-start="opacity-0 -translate-y-12 scale-95"
430            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
431            x-transition:leave="transition ease-in duration-200 transform"
432            x-transition:leave-start="opacity-100 translate-y-0 scale-100"
433            x-transition:leave-end="opacity-0 -translate-y-12 scale-95"
434            class="relative w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden ring-4 ring-white/20"
435            @click.stop>
436
437            <form action="/kereses" method="GET" class="flex items-center relative w-full">
438                <div class="pl-6 text-brand-green hidden sm:block">
439                    <i class="fa-solid fa-search text-2xl"></i>
440                </div>
441
442                <input type="text"
443                    name="kulcsszo"
444                    x-ref="searchInput"
445                    placeholder="Mit keres? (pl. Húsvét...)"
446                    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"
447                    autocomplete="off"
448                    required>
449
450                <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">
451                    <span class="hidden sm:inline">Keresés</span>
452                    <i class="fa-solid fa-arrow-right sm:hidden"></i>
453                </button>
454
455                <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">
456                    <i class="fa-solid fa-times text-xl sm:text-2xl"></i>
457                </button>
458            </form>
459        </div>
460    </div>
461</header>
462
463
464    <style data-grapesjs-styles="true">
465    #i8asec {
466        height: auto;
467        width: auto;
468        opacity: 1;
469        display: block;
470    }
471
472    #i6h2g {
473        height: 500px;
474    }
475
476    #imn37 {
477        box-shadow: rgba(255, 255, 255, 0.24) 0px 0px 0px 0px;
478        font-size: 16px;
479        font-weight: 600;
480        color: rgb(0, 0, 0);
481    }
482
483    #it9umu {
484        color: rgb(18, 18, 18);
485    }
486
487    #iprmch {
488        color: rgb(106, 151, 2);
489    }
490
491    #iul5a8 {
492        color: rgb(106, 151, 2);
493    }
494
495    #iejsvf {
496        color: rgb(106, 151, 2);
497    }
498
499    #ifytis {
500        color: rgb(106, 151, 2);
501    }
502
503    #imhbjc {
504        color: rgb(106, 151, 2);
505    }
506
507    #i3q3wy {
508        color: rgb(106, 151, 2);
509    }
510
511    #im3n1e {
512        display: flex;
513        flex-direction: row;
514        align-items: flex-end;
515        justify-content: space-around;
516    }
517
518    #inon2i {
519        width: 600px;
520    }
521
522    #ii23my {
523        width: 600px;
524    }
525</style>
526
527<section id="hero-section" class="bg-gradient-to-br from-gray-50 to-white py-10 lg:py-20">
528    <div class="max-w-[1440px] mx-auto px-4 md:px-8">
529        <div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-12">
530
531            <div class="w-full lg:w-1/2 space-y-6 text-center lg:text-left order-2 lg:order-1">
532                <div class="inline-block bg-brand-green/10 text-brand-green px-4 py-2 rounded-full text-sm font-bold flex items-center justify-center lg:justify-start gap-2 w-max mx-auto lg:mx-0">
533                    <span class="w-2 h-2 rounded-full bg-brand-green animate-pulse"></span>
534                    Most szól
535                </div>
536
537                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-brand-dark">
538                    Vendég-oldal                </h1>
539
540                <p class="text-lg text-gray-600 leading-relaxed">
541                    Válogatás a Szent István Rádió műsorából<br />
542 Nagy-eged hegyi Szent Kereszt kápolna<br />
543Szihalmi Mária szobor<br />
544Zsódi Viktor piarista tartományfőnök                </p>
545
546                <div class="flex flex-col sm:flex-row gap-4 pt-4 items-center justify-center lg:justify-start">
547                    <button type="button" onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://katolikusradio.hu:8001/live_hi.mp3', 'Élő Adás', true, 0, true); window.RadioPlayer.expand(); }" class="w-full sm:w-auto bg-brand-green hover:bg-[#85c000] text-white font-medium px-8 py-4 rounded-lg transition-colors text-lg flex items-center justify-center">
548                        <i class="fa-solid fa-play mr-3"></i>
549                        Élő adás hallgatása
550                    </button>
551                    <a href="/musoraink/adas/nagy-eged-hegyi-szent-kereszt-kapolna-szihalmi-maria-szobor-zsodi-viktor-piarista-tartomanyfonok-724281" class="w-full sm:w-auto border-2 border-gray-300 hover:border-brand-green text-brand-dark font-medium px-8 py-4 rounded-lg transition-colors text-lg flex items-center justify-center">
552                        Tovább a műsorhoz
553                    </a>
554                </div>
555
556                <div class="flex flex-wrap items-center justify-center lg:justify-start gap-6 pt-2">
557                    <div class="flex items-center text-gray-600 text-sm">
558                        <i class="fa-regular fa-clock mr-2"></i> 2026. 10. 01. 13:04                    </div>
559                </div>
560            </div>
561
562            <div class="w-full lg:w-1/2 relative order-1 lg:order-2">
563                <div class="aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl relative">
564                    <picture>
565                        <source
566                            srcset="/img/main-page/big-image2-600.webp 600w, /img/main-page/big-image2.webp 1000w"
567                            sizes="(max-width: 768px) 100vw, 50vw"
568                            type="image/webp"
569                        >
570                        <img
571                            src="/img/main-page/big-image2.png"
572                            width="1000"
573                            height="1000"
574                            loading="eager"
575                            fetchpriority="high"
576                            decoding="async"
577                            alt="Aktuális műsor"
578                            class="w-full h-full object-cover"
579                        >
580                    </picture>
581                </div>
582                <div class="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white p-4 sm:p-6 rounded-xl shadow-xl border border-gray-100">
583                    <div class="flex items-center space-x-4">
584                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 text-brand-green">
585                            <i class="fa-regular fa-clock"></i>
586                        </div>
587                        <div>
588                            <div class="text-xs text-gray-500 uppercase tracking-wide font-semibold mb-0.5">Következik: 14:00</div>
589                            <div class="font-bold text-brand-dark text-sm sm:text-base whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] sm:max-w-[250px]">
590                                Hírek                            </div>
591                        </div>
592                    </div>
593                </div>
594            </div>
595
596        </div>
597    </div>
598</section>
599<section id="news-section" class="py-12 lg:py-20 bg-brand-grey">
600    <div class="max-w-[1440px] mx-auto px-4 md:px-8">
601
602        <div class="text-center max-w-3xl mx-auto mb-6 lg:mb-6">
603            <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-[#1a1a1a] mb-4">Hírek és aktualitások</h2>
604        </div>
605
606        <div class="flex justify-center md:justify-end mb-3">
607            <a href="/hireink" class="text-brand-green font-medium text-lg hover:underline inline-flex items-center">
608                Összes hír
609                <i class="fa-solid fa-arrow-right ml-2"></i>
610            </a>
611        </div>
612
613                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
614
615                <!-- 1. NAGY CIKK (Bal oldal) -->
616                                    <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow flex flex-col group h-full border border-gray-100">
617                        <a href="/hir/remelt-kormanyzati-tamogatas-helyett-elvonas-a-belvarosi-onkormanyzatoknak" class="h-64 md:h-80 lg:min-h-[350px] overflow-hidden block">
618                            <img src="/uploads/media/media_1790848586_1bc95e3c.jpg" alt="Remélt kormányzati támogatás helyett elvonás a belvárosi önkormányzatoknak" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
619                        </a>
620                        <div class="p-6 md:p-8 flex flex-col flex-grow">
621                            <div class="flex items-center flex-wrap gap-3 mb-4">
622                                <!-- ÚJ: Kiemelt badge -->
623                                                                    <span class="bg-red-50 text-red-600 border border-red-100 px-3 py-1 rounded-full text-xs md:text-sm font-bold uppercase flex items-center gap-1">
624                                        <i class="fa-solid fa-star text-[10px]"></i> Kiemelt
625                                    </span>
626                                                                <span class="bg-brand-green/10 text-brand-green px-4 py-1 rounded-full text-xs md:text-sm font-medium">
627                                    belföld                                </span>
628                                <span class="text-gray-500 text-xs md:text-sm">2026. 10. 01.</span>
629                            </div>
630                            <h3 class="text-2xl md:text-3xl font-bold text-brand-dark mb-4 leading-tight">
631                                <a href="/hir/remelt-kormanyzati-tamogatas-helyett-elvonas-a-belvarosi-onkormanyzatoknak" class="hover:text-brand-green transition-colors">Remélt kormányzati támogatás helyett elvonás a belvárosi önkormányzatoknak</a>
632                            </h3>
633                            <p class="text-gray-600 text-base md:text-lg mb-6 leading-relaxed line-clamp-3">
634                                A kormány és a főváros között elfogadni tervezett megállapodás több eleme ellen is tiltakoznak belvárosi kerületi polgármesterek, akik szerint a várt ...                            </p>
635                            <div class="mt-auto pt-4">
636                                <a href="/hir/remelt-kormanyzati-tamogatas-helyett-elvonas-a-belvarosi-onkormanyzatoknak" class="text-brand-green font-medium text-base md:text-lg hover:underline inline-flex items-center">
637                                    Teljes hír elolvasása
638                                    <i class="fa-solid fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
639                                </a>
640                            </div>
641                        </div>
642                    </div>
643                
644                <!-- 2-4. KIS CIKKEK (Jobb oldal) -->
645                <!-- JAVÍTÁS: A justify-between eltávolítva, helyette justify-start, hogy ne nyúljanak meg -->
646                <div class="flex flex-col gap-4 md:gap-6 justify-start h-full">
647                                            
648                            <!-- JAVÍTÁS: A flex-1 eltávolítva innen is -->
649                            <div class="bg-white rounded-xl p-4 md:p-5 hover:shadow-xl transition-shadow shadow-sm border border-gray-100 group flex flex-col justify-center">
650                                <div class="flex flex-col sm:flex-row items-center sm:items-stretch gap-4 md:gap-5 h-full">
651
652                                    <a href="/hir/teruletlezarast-rendeltek-el-az-orszaghaz-korul" class="w-full sm:w-40 md:w-48 h-48 sm:h-auto min-h-[120px] md:min-
652h-[140px] flex-shrink-0 rounded-lg overflow-hidden block relative">
653                                        <img src="/uploads/media/media_1790839973_4d4c5f52.png" alt="Területlezárást rendeltek el az Országház körül" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
654                                    </a>
655
656                                    <div class="flex-1 w-full flex flex-col justify-center py-1">
657                                        <div class="flex items-center flex-wrap gap-2 mb-2">
658                                            <!-- ÚJ: Kiemelt badge -->
659                                                                                            <span class="bg-red-50 text-red-600 border border-red-100 px-2 py-0.5 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wide flex items-center gap-1">
660                                                    <i class="fa-solid fa-star text-[8px]"></i> Kiemelt
661                                                </span>
662                                                                                        <span class="bg-blue-100 text-blue-600 px-2.5 py-0.5 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wide">
663                                                belföld                                            </span>
664                                            <span class="text-gray-500 text-[10px] md:text-xs font-medium">2026. okt. 01.</span>
665                                        </div>
666
667                                        <h4 class="text-base md:text-lg font-bold text-brand-dark mb-1.5 leading-tight line-clamp-2">
668                                            <a href="/hir/teruletlezarast-rendeltek-el-az-orszaghaz-korul" class="hover:text-brand-green transition-colors">Területlezárást rendeltek el az Országház körül</a>
669                                        </h4>
670
671                                        <p class="text-gray-600 text-sm line-clamp-2 mb-3 leading-relaxed">
672                                             
673A rendőrség csütörtöktől legkésőbb december 31-ig területlezárást rendelt el Parlament és a hozzá tartozó mélygarázs környékén: az intézkedés az ép...                                        </p>
674
675                                        <div class="mt-auto">
676                                            <a href="/hir/teruletlezarast-rendeltek-el-az-orszaghaz-korul" class="text-brand-green font-bold text-xs hover:text-brand-dark inline-flex items-center transition-colors">
677                                                Tovább <i class="fa-solid fa-arrow-right ml-1 text-[10px] transition-transform group-hover:translate-x-1"></i>
678                                            </a>
679                                        </div>
680                                    </div>
681
682                                </div>
683                            </div>
684                                                                    
685                            <!-- JAVÍTÁS: A flex-1 eltávolítva innen is -->
686                            <div class="bg-white rounded-xl p-4 md:p-5 hover:shadow-xl transition-shadow shadow-sm border border-gray-100 group flex flex-col justify-center">
687                                <div class="flex flex-col sm:flex-row items-center sm:items-stretch gap-4 md:gap-5 h-full">
688
689                                    <a href="/hir/ujabb-orosz-drontamadas-kijev-ellen" class="w-full sm:w-40 md:w-48 h-48 sm:h-auto min-h-[120px] md:min-h-[140px] flex-shrink-0 rounded-lg overflow-hidden block relative">
690                                        <img src="/uploads/media/media_1789901465_f0555010.jpg" alt="Újabb orosz dróntámadás Kijev ellen" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
691                                    </a>
692
693                                    <div class="flex-1 w-full flex flex-col justify-center py-1">
694                                        <div class="flex items-center flex-wrap gap-2 mb-2">
695                                            <!-- ÚJ: Kiemelt badge -->
696                                                                                        <sp
696an class="bg-purple-100 text-purple-600 px-2.5 py-0.5 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wide">
697                                                külföld                                            </span>
698                                            <span class="text-gray-500 text-[10px] md:text-xs font-medium">2026. okt. 01.</span>
699                                        </div>
700
701                                        <h4 class="text-base md:text-lg font-bold text-brand-dark mb-1.5 leading-tight line-clamp-2">
702                                            <a href="/hir/ujabb-orosz-drontamadas-kijev-ellen" class="hover:text-brand-green transition-colors">Újabb orosz dróntámadás Kijev ellen</a>
703                                        </h4>
704
705                                        <p class="text-gray-600 text-sm line-clamp-2 mb-3 leading-relaxed">
706                                            A kijevi Pivdennij híd tartószerkezetébe csapódott két orosz drón csütörtökön, a közlekedés szünetel az ukrán főváros egyik legfontosabb átkelőjén - j...                                        </p>
707
708                                        <div class="mt-auto">
709                                            <a href="/hir/ujabb-orosz-drontamadas-kijev-ellen" class="text-brand-green font-bold text-xs hover:text-brand-dark inline-flex items-center transition-colors">
710                                                Tovább <i class="fa-solid fa-arrow-right ml-1 text-[10px] transition-transform group-hover:translate-x-1"></i>
711                                            </a>
712                                        </div>
713                                    </div>
714
715                                </div>
716                            </div>
717                                                                    
718                            <!-- JAVÍTÁS: A flex-1 eltávolítva innen is -->
719                            <div class="bg-white rounded-xl p-4 md:p-5 hover:shadow-xl transition-shadow shadow-sm border border-gray-100 group flex flex-col justify-center">
720                                <div class="flex flex-col sm:flex-row items-center sm:items-stretch gap-4 md:gap-5 h-full">
721
722                                    <a href="/hir/joint-venture-szovetseg--ki-kell-vezetni-az-arrestopot---szerintuk-csokkennek-az-elelmiszerarak" class="w-full sm:w-40 md:w-48 h-48 sm:h-auto min-h-[120px] md:min-h-[140px] flex-shrink-0 rounded-lg overflow-hidden block relative">
723                                        <img src="/uploads/media/media_1790846171_3f78dc67.png" alt="Joint Venture Szövetség : Ki kell vezetni az árréstopot - szerintük csökkennek az élelmiszerárak" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
724                                    </a>
725
726                                    <div class="flex-1 w-full flex flex-col justify-center py-1">
727                                        <div class="flex items-center flex-wrap gap-2 mb-2">
728                                            <!-- ÚJ: Kiemelt badge -->
729                                                                                        <span class="bg-orange-100 text-orange-600 px-2.5 py-0.5 rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wide">
730                                                belföld                                            </span>
731                                            <span class="text-gray-500 text-[10px] md:text-xs font-medium">2026. okt. 01.</span>
732                                        </div>
733
734                                        <h4 class="text-base md:text-lg font-bold text-brand-dark mb-1.5 leading-tight line-clamp-2">
735                                            <a href="/hir/joint-venture-szovetseg--ki-kell-vezetni-az-arrestopot---szerintuk-csokkennek-az-elelmiszerarak" class="hover:text-brand-green transition-colors">Joint Venture Szövetség : Ki kell vezetni az árréstopot - szerintük csökkennek az élelmiszerárak</a>
736                                        </h4>
737
738                                        <p class="text-gray-600 text-sm line-clamp-2 mb-3 leading-relaxed">
739                                            Eljött az árrésstop kivezetésének ideje, a jelenlegi, alacsony infláció a csökkenő élelmiszerárakkal, az erős forint árfolyam és a jegybank hosszú táv...                                        </p>
740
741                                        <div class="mt-auto">
742                                            <a href="/hir/joint-venture-szovetseg--ki-kell-vezetni-az-arrestopot---szerintuk-csokkennek-az-elelmiszerarak" class="text-brand-green font-bold text-xs hover:text-brand-dark inline-flex items-center transition-colors">
743                                                Tovább <i class="fa-solid fa-arrow-right ml-1 text-[10px] transition-transform group-hover:translate-x-1"></i>
744                                            </a>
745                                        </div>
746                                    </div>
747
748                                </div>
749                            </div>
750                                                            </div>
751
752            </div>
753
754            <!-- TÖBBI CIKK (Grid alul, ha több van mint 4) -->
755                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
756                                            <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-shadow border border-gray-100 flex flex-col group relative">
757                            <div class="flex justify-between items-center mb-2">
758                                <div class="text-xs text-gray-500">2026. 10. 01.</div>
759                                <!-- ÚJ: Kiemelt badge (Kicsi változat a gridhez) -->
760                                                            </div>
761                            <h5 class="text-base font-bold text-brand-dark mb-3 leading-tight flex-grow line-clamp-3">
762                                <a href="/hir/nem-kapott-bizalmat-a-muresan-kormany-romaniaban" class="hover:text-brand-green transition-colors">Nem kapott bizalmat a Muresan-kormány Romániában</a>
763                            </h5>
764                            <a href="/hir/nem-kapott-bizalmat-a-muresan-kormany-romaniaban" class="text-brand-green font-medium text-sm hover:underline inline-flex items-center mt-auto">
765                                Részletek <i class="fa-solid fa-arrow-right ml-1 text-xs transition-transform group-hover:translate-x-1"></i>
766                            </a>
767                        </div>
768                                            <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-shadow border border-gray-100 flex flex-col group relative">
769                            <div class="flex justify-between items-center mb-2">
770                                <div class="text-xs text-gray-500">2026. 10. 01.</div>
771                                <!-- ÚJ: Kiemelt badge (Kicsi változat a gridhez) -->
772                                                            </div>
773                            <h5 class="text-base font-bold text-brand-dark mb-3 leading-tight flex-grow line-clamp-3">
774                                <a href="/hir/kihelyezett-kormanyules-lesz-erdobenyen" class="hover:text-brand-green transition-colors">Kihelyezett kormányülés lesz Erdőbényén</a>
775                            </h5>
776                            <a href="/hir/kihelyezett-kormanyules-lesz-erdobenyen" class="text-brand-green font-medium text-sm hover:underline inline-flex items-center mt-auto">
777                                Részletek <i class="fa-solid fa-arrow-right ml-1 text-xs transition-transform group-hover:translate-x-1"></i>
778                            </a>
779                        </div>
780                                            <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-shadow border border-gray-100 flex flex-col group relative">
781                            <div class="flex justify-between items-center mb-2">
782                                <div class="text-xs text-gray-500">2026. 10. 01.</div>
783                                <!-- ÚJ: Kiemelt badge (Kicsi változat a gridhez) -->
784                                                            </div>
785                            <h5 class="text-base font-bold text-brand-dark mb-3 leading-tight flex-grow line-clamp-3">
786                                <a href="/hir/diaktuntetesek-franciaorszagban" class="hover:text-brand-green transition-colors">Diáktüntetések Franciaországban</a>
787                            </h5>
788                            <a href="/hir/diaktuntetesek-franciaorszagban" class="text-brand-green font-medium text-sm hover:underline inline-flex items-center mt-auto">
789                                Részletek <i class="fa-solid fa-arrow-right ml-1 text-xs transition-transform group-hover:translate-x-1"></i>
790                            </a>
791                        </div>
792                                            <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-shadow border border-gray-100 flex flex-col group relative">
793                            <div class="flex justify-between items-center mb-2">
794                                <div class="text-xs text-gray-500">2026. 10. 01.</div>
795                                <!-- ÚJ: Kiemelt badge (Kicsi változat a gridhez) -->
796                                                            </div>
797                            <h5 class="text-base font-bold text-brand-dark mb-3 leading-tight flex-grow line-clamp-3">
798                                <a href="/hir/terrortamadas-a-flydubai-fedelzeten" class="hover:text-brand-green transition-colors">Terrortámadás a Flydubai fedélzetén</a>
799                            </h5>
800                            <a href="/hir/terrortamadas-a-flydubai-fedelzeten" class="text-brand-green font-medium text-sm hover:underline inline-flex items-center mt-auto">
801                                Részletek <i class="fa-solid fa-arrow-right ml-1 text-xs transition-transform group-hover:translate-x-1"></i>
802                            </a>
803                        </div>
804                                    </div>
805            
806        
807    </div>
808</section><section id="programs-archive-section" class="py-12 lg:py-20 bg-white">
809    <div class="max-w-[1440px] mx-auto px-4 md:px-8">
810
811        <div class="text-center max-w-3xl mx-auto mb-6 lg:mb-6">
812            <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-[#1a1a1a] mb-4">Műsorajánló</h2>
813        </div>
814
815        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
816
817                                                <div class="bg-white border-2 border-gray-200 rounded-xl overflow-hidden hover:border-brand-green hover:shadow-xl transition-all flex flex-col">
818
819                        <a href="/musoraink/adas/a-hevero-falusi-marton-hangjateka-4-4-rendezo-lazar-csaba-fsz-szelyes-imre-reviczky-gabor-724439" class="block h-40 lg:h-48 overflow-hidden group">
820                            <img src="https://www.katolikusradio.hu/kepek/musorok/sablonkepek/771/book-1421097.jpg"
821                                alt="&quot;Itt az írás, forgassátok!&quot;"
822                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
823                        </a>
824
825                        <div class="p-6 lg:p-8 flex flex-col flex-grow">
826                            <div class="w-12 h-12 lg:w-16 lg:h-16 bg-brand-green/10 rounded-xl flex items-center justify-center mb-4 lg:mb-6">
827                                <i class="fa-solid fa-radio text-brand-green text-xl lg:text-2xl"></i>
828                            </div>
829
830                            <h3 class="text-xl lg:text-2xl font-bold text-brand-dark mb-2 lg:mb-3">
831                                <a href="/musoraink/adas/a-hevero-falusi-marton-hangjateka-4-4-rendezo-lazar-csaba-fsz-szelyes-imre-reviczky-gabor-724439" class="hover:text-brand-green transition-colors">
832                                    &quot;Itt az írás, forgassátok!&quot;                                </a>
833                            </h3>
834
835                            <p class="text-gray-600 text-sm lg:text-base mb-6 leading-relaxed line-clamp-3 flex-grow">
836                                Lázár Csaba szépirodalmi félórája                            </p>
837
838
839                            <div class="flex items-center justify-between mb-6">
840                                <span class="text-xs lg:text-sm text-gray-500">Szombat, 16:30</span>
841                                                                    <span class="text-xs lg:text-sm font-medium text-brand-green">28 perc</span>
842                                                            </div>
843
844                                                            <a href="/musoraink/adas/a-hevero-falusi-marton-hangjateka-4-4-rendezo-lazar-csaba-fsz-szelyes-imre-reviczky-gabor-724439"
845                                    class="block text-center w-full bg-brand-grey hover:bg-brand-green hover:text-white text-brand-dark font-medium py-3 lg:py-4 rounded-lg transition-colors text-sm lg:text-base mt-auto">
846                                    <i class="fa-solid fa-info-circle mr-2"></i> Műsor adatlapja                                </a>
847                                                    </div>
848                    </div>
849                            
850        </div>
851    </div>
852</section>    <section id="youtube-video-section" class="py-16 lg:py-24 bg-[#f8f9fa] relative">
853        <div class="max-w-[1440px] mx-auto px-4 md:px-8">
854
855            <div class="text-center max-w-3xl mx-auto mb-12 lg:mb-16">
856                <span class="text-[#97d700] font-bold tracking-wider uppercase text-sm mb-3 block flex items-center justify-center gap-2">
857                    <i class="fa-solid fa-video"></i> MKR Stúdió
858                </span>
859                <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-[#1a1a1a] mb-4">Legfrissebb videóink</h2>
860                <p class="text-lg text-[#1a1a1a]/60">Nézze meg stúdiónk legújabb felvételeit!</p>
861            </div>
862
863            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10">
864
865                                <div class="lg:col-span-8 flex flex-col">
866                    <div class="group relative rounded-3xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.1)] cursor-pointer aspect-video mb-6 bg-black" onclick="openYtModal('8LxIPdHGAtc')">
867                        <img src="https://img.youtube.com/vi/8LxIPdHGAtc/maxresdefault.jpg" alt="Orvosként élet és halál határán
868Vendégünk dr. Csapody Marcell, aneszteziológus, intenzív t. főorvos - Embernek maradni 2026.09.30" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-90 group-hover:opacity-100">
869                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent pointer-events-none"></div>
870
871                        <div class="absolute inset-0 flex items-center justify-center">
872                            <div class="w-20 h-20 bg-[#97d700] rounded-full flex items-center justify-center text-[#1a1a1a] shadow-[0_0_40px_rgba(151,215,0,0.4)] group-hover:scale-110 transition-transform duration-300">
873                                <i class="fa-solid fa-play text-2xl ml-1"></i>
874                            </div>
875                        </div>
876
877                        <div class="absolute bottom-6 left-6 right-6 flex items-center justify-between">
878                            <span class="bg-red-600 text-white px-3 py-1.5 rounded-lg text-xs font-bold tracking-wider uppercase flex items-center gap-2 shadow-lg">
879                                <span class="w-2 h-2 rounded-full bg-white animate-pulse"></span> Legújabb
880                            </span>
881                            <span class="text-white bg-black/40 backdrop-blur-sm px-3 py-1.5 rounded-lg text-sm font-medium">
882                                <i class="fa-regular fa-calendar mr-1.5"></i>2026. szept. 30.                            </span>
883                        </div>
884                    </div>
885
886                    <div class="px-2">
887                        <h3 class="text-2xl md:text-3xl font-bold text-[#1a1a1a] mb-3 cursor-pointer hover:text-[#97d700] transition-colors leading-tight" onclick="openYtModal('8LxIPdHGAtc')">
888                            Orvosként élet és halál határán
889Vendégünk dr. Csapody Marcell, aneszteziológus, intenzív t. főorvos - Embernek maradni 2026.09.30                        </h3>
890                        <p class="text-[#1a1a1a]/70 text-lg leading-relaxed line-clamp-4">
891                             Hogyan formálja át egy orvos gondolkodását a legkiszolgáltatottabb emberekkel való találkozás, 
891és miként maradhatunk igazán emberek a mai felgyorsult ...                        </p>
892                    </div>
893                </div>
894
895                <div class="lg:col-span-4 flex flex-col">
896                    <div class="bg-white rounded-3xl p-6 shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-[#1a1a1a]/5 h-full flex flex-col">
897                        <h4 class="text-lg font-bold text-[#1a1a1a] mb-6 flex items-center border-b border-[#1a1a1a]/10 pb-4">
898                            <i class="fa-solid fa-list-ul text-[#97d700] mr-3"></i> További friss videók
899                        </h4>
900
901                        <div class="flex flex-col gap-5 flex-grow">
902                                                            <div class="group flex items-center gap-4 cursor-pointer" onclick="openYtModal('8LxIPdHGAtc')">
903                                    <div class="relative w-32 aspect-video rounded-xl overflow-hidden shrink-0 shadow-md bg-black">
904                                        <img src="https://img.youtube.com/vi/8LxIPdHGAtc/maxresdefault.jpg" alt="Szenvedés, hit és orvoslás - Embernek Maradni 2026.09.30." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
905                                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
906                                            <div class="w-10 h-10 bg-[#97d700] rounded-full flex items-center justify-center text-[#1a1a1a] shadow-lg">
907                                                <i class="fa-solid fa-play text-sm ml-0.5"></i>
908                                            </div>
909                                        </div>
910                                    </div>
911                                    <div class="flex-grow py-1">
912                                        <div class="text-xs font-bold text-[#97d700] mb-1">2026. szept. 30.</div>
913                                        <h5 class="text-[#1a1a1a] font-bold leading-snug line-clamp-3 group-hover:text-[#97d700] transition-colors text-sm">
914                                            Szenvedés, hit és orvoslás - Embernek Maradni 2026.09.30.                                        </h5>
915                                    </div>
916                                </div>
917                                                            <div class="group flex items-center gap-4 cursor-pointer" onclick="openYtModal('qxn-2s1vlVo')">
918                                    <div class="relative w-32 aspect-video rounded-xl overflow-hidden shrink-0 shadow-md bg-black">
919                                        <img src="https://img.youtube.com/vi/qxn-2s1vlVo/maxresdefault.jpg" alt="Az energia - honnan jön, és mennyibe kerül? - Kerengő 2026.09.29." class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
920                                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
921                                            <div class="w-10 h-10 bg-[#97d700] rounded-full flex items-center justify-center text-[#1a1a1a] shadow-lg">
922                                                <i class="fa-solid fa-play text-sm ml-0.5"></i>
923                                            </div>
924                                        </div>
925                                    </div>
926                                    <div class="flex-grow py-1">
927                                        <div class="text-xs font-bold text-[#97d700] mb-1">2026. szept. 30.</div>
928                                        <h5 class="text-[#1a1a1a] font-bold leading-snug line-clamp-3 group-hover:text-[#97d700] transition-colors text-sm">
929                                            Az energia - honnan jön, és mennyibe kerül? - Kerengő 2026.09.29.                                        </h5>
930                                    </div>
931                                </div>
932                                                            <div class="group flex items-center gap-4 cursor-pointer" onclick="openYtModal('7T8PhGd4J0M')">
933                                    <div class="relative w-32 aspect-video rounded-xl overflow-hidden shrink-0 shadow-md bg-black">
934                                        <img src="https://img.youtube.com/vi/7T8PhGd4J0M/maxresdefault.jpg" alt="Rózsafüzér a Katolikus Pedagógiai Intézet munkatársaival" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
935                                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
936                                            <div class="w-10 h-10 bg-[#97d700] rounded-full flex items-center justify-center text-[#1a1a1a] shadow-lg">
937                                                <i class="fa-solid fa-play text-sm ml-0.5"></i>
938                                            </div>
939                                        </div>
940                                    </div>
941                                    <div class="flex-grow py-1">
942                                        <div class="text-xs font-bold text-[#97d700] mb-1">2026. szept. 30.</div>
943                                        <h5 class="text-[#1a1a1a] font-bold leading-snug line-clamp-3 group-hover:text-[#97d700] transition-colors text-sm">
944                                            Rózsafüzér a Katolikus Pedagógiai Intézet munkatársaival                                        </h5>
945                                    </div>
946                                </div>
947                                                            <div class="group flex items-center gap-4 cursor-pointer" onclick="openYtModal('qxn-2s1vlVo')">
948                                    <div class="relative w-32 aspect-video rounded-xl overflow-hidden shrink-0 shadow-md bg-black">
949                                        <img src="https://img.youtube.com/vi/qxn-2s1vlVo/maxresdefault.jpg" alt="I/ Az energia – honnan jön, és mennyibe kerül?
950Az 1000 forintos dízelár fikció, vagy valóság lehet?
951 - Kerengő 2026.09.29" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
952                                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
953                                            <div class="w-10 h-10 bg-[#97d700] rounded-full flex items-center justify-center text-[#1a1a1a] shadow-lg">
954                                                <i class="fa-solid fa-play text-sm ml-0.5"></i>
955                                            </div>
956                                        </div>
957                                    </div>
958                                    <div class="flex-grow py-1">
959                                        <div class="text-xs font-bold text-[#97d700] mb-1">2026. szept. 29.</div>
960                                        <h5 class="text-[#1a1a1a] font-bold leading-snug line-clamp-3 group-hover:text-[#97d700] transition-colors text-sm">
961                                            I/ Az energia – honnan jön, és mennyibe kerül?
962Az 1000 forintos dízelár fikció, vagy valóság lehet?
963 - Kerengő 2026.09.29                                        </h5>
964                                    </div>
965                                </div>
966                                                    </div>
967
968                        <div class="mt-6 pt-6 border-t border-[#1a1a1a]/10">
969                            <a href="https://www.youtube.com/channel/UCgJyAWToXM6aHVic0CtIt4w" target="_blank" class="flex items-center justify-center gap-3 w-full bg-red-50 hover:bg-red-100 border border-red-100 rounded-xl p-4 transition-colors group">
970                                <i class="fa-brands fa-youtube text-red-600 text-3xl group-hover:scale-110 transition-transform"></i>
971                                <div class="text-left">
972                                    <div class="font-bold text-red-900 text-sm leading-tight">Iratkozzon fel!</div>
973                                    <div class="text-xs text-red-700">Magyar Katolikus Rádió YouTube csatorna</div>
974                                </div>
975                            </a>
976                        </div>
977                    </div>
978                </div>
979
980            </div>
981
982            <div class="mt-12 lg:mt-16 flex justify-center">
983                <a href="/videoink" class="group relative inline-flex items-center justify-center px-8 py-4 font-bold text-white bg-[#1a1a1a] rounded-full overflow-hidden transition-all hover:scale-105 hover:shadow-[0_10px_40px_rgba(26,26,26,0.2)]">
984                    <span class="relative flex items-center gap-4 text-base tracking-wide">
985                        ÖSSZES VIDEÓ MEGTEKINTÉSE
986                        <div class="w-8 h-8 rounded-full bg-[#97d700] flex items-center justify-center text-[#1a1a1a] group-hover:translate-x-1 transition-transform">
987                            <i class="fa-solid fa-arrow-right"></i>
988                        </div>
989                    </span>
990                </a>
991            </div>
992
993        </div>
994
995        <div id="yt-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/95 p-4 md:p-10 transition-opacity duration-300 opacity-0" onclick="closeYtModal()">
996            <div class="relative w-full max-w-5xl aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl scale-95 transition-transform duration-300" id="yt-modal-content">
997                <button onclick="closeYtModal()" class="absolute top-4 right-4 z-10 w-12 h-12 bg-black/50 text-white rounded-full hover:bg-[#97d700] hover:text-[#1a1a1a] flex items-center justify-center transition-colors cursor-pointer backdrop-blur-sm border border-white/20 text-xl">
998                    <i class="fa-solid fa-times"></i>
999                </button>
1000                <div id="yt-player-container" class="w-full h-full"></div>
1001            </div>
1002        </div>
1003    </section>
1004
1005    
1005<script>
1006        function openYtModal(ytId) {
1007            if (!ytId) return;
1008            const modal = document.getElementById('yt-modal');
1009            const container = document.getElementById('yt-player-container');
1010            const content = document.getElementById('yt-modal-content');
1011
1012            container.innerHTML = `<iframe src="https://www.youtube.com/embed/${ytId}?autoplay=1&rel=0&showinfo=0" class="w-full h-full border-0" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>`;
1013
1014            modal.classList.remove('hidden');
1015            modal.classList.add('flex');
1016            setTimeout(() => {
1017                modal.classList.remove('opacity-0');
1018                content.classList.remove('scale-95');
1019                content.classList.add('scale-100');
1020            }, 10);
1021        }
1022
1023        function closeYtModal() {
1024            const modal = document.getElementById('yt-modal');
1025            const container = document.getElementById('yt-player-container');
1026            const content = document.getElementById('yt-modal-content');
1027
1028            modal.classList.add('opacity-0');
1029            content.classList.remove('scale-100');
1030            content.classList.add('scale-95');
1031
1032            setTimeout(() => {
1033                modal.classList.add('hidden');
1034                modal.classList.remove('flex');
1035                container.innerHTML = '';
1036            }, 300);
1037        }
1038
1039        document.addEventListener('keydown', function(e) {
1040            if (e.key === 'Escape') {
1041                const modal = document.getElementById('yt-modal');
1042                if (!modal.classList.contains('hidden')) {
1043                    closeYtModal();
1044                }
1045            }
1046        });
1047    </script>
1047
1048    <section id="ige-calendar-section" class="py-12 lg:py-20 bg-gradient-to-br from-[#70a300]/5 to-white">
1049        <div class="max-w-[1440px] mx-auto px-4 md:px-8">
1050
1051            <div class="text-center max-w-3xl mx-auto mb-12 lg:mb-16">
1052                <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-[#1a1a1a] mb-4">Igenaptár</h2>
1053                <p class="text-lg text-[#1a1a1a]/60">A mai liturgia olvasmányai és a nap szentje. Kövesse velünk az egyházi év ünnepeit.</p>
1054            </div>
1055
1056            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-12 items-start">
1057
1058                <!-- BAL OLDALI OSZLOP (Nap doboza) -->
1059                <div class="lg:col-span-2">
1060                    <div class="lg:sticky lg:top-24 text-center lg:text-left">
1061                        <div id="ifytis" class="inline-block bg-[#70a300]/10 text-[#70a300] px-4 py-2 rounded-full text-sm font-medium mb-4 lg:mb-6">
1062                            Mai nap
1063                        </div>
1064
1065                        <div class="bg-white rounded-2xl p-6 lg:p-8 shadow-lg mb-6 inline-block w-full sm:w-auto lg:w-full border-b-4" style="border-color: #ffffff">
1066                            <div class="text-5xl lg:text-6xl font-bold text-[#70a300] mb-2">1</div>
1067                            <div class="text-xl lg:text-2xl font-bold text-gray-900 mb-2">Október</div>
1068
1069                            <div class="text-base lg:text-lg text-gray-600 font-medium leading-snug">
1070                                páros év, Évközi idő, 26. hét, csütörtök                            </div>
1071
1072                            <div class="mt-4 text-sm font-bold uppercase text-gray-600">
1073                                Liturgikus szín: fehér                            </div>
1074
1075                            <!-- ÚJ HELYEN: Napi elmélkedés gomb -->
1076                                                            <div class="mt-6 border-t border-gray-100 pt-5">
1077                                    <a href="/igenaptar-liturgikus-naptar-hallgathato-napi-evangelium/20261001"
1078                                        class="flex items-center justify-center gap-2 w-full bg-gray-50 hover:bg-[#70a300] hover:text-white text-gray-700 font-bold transition-colors text-sm px-4 py-3.5 rounded-xl border border-gray-100 shadow-sm group">
1079                                        Napi elmélkedés megnyitása
1080                                        <i class="fa-solid fa-arrow-right text-[#70a300] group-hover:text-white transition-colors"></i>
1081                                    </a>
1082                                </div>
1083                                                    </div>
1084
1085                        <div class="block">
1086                            <a href="/igenaptar" class="inline-flex items-center text-[#70a300] font-medium text-lg hover:underline">
1087                                Teljes liturgikus naptár
1088                                <i class="fa-solid fa-arrow-right ml-2 text-sm"></i>
1089                            </a>
1090                        </div>
1091                    </div>
1092                </div>
1093
1094                <!-- JOBB OLDALI OSZLOP (Olvasmányok és Szentek) -->
1095                <div class="lg:col-span-3 space-y-6">
1096
1097                    <!-- ELSŐ OLVASMÁNY -->
1098                                            <div x-data="{ expanded: false }" class="bg-white rounded-xl p-6 lg:p-8 shadow-lg border-l-4 border-[#70a300] transition-all">
1099                            <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 lg:mb-6 gap-2">
1100                                <h3 class="text-xl lg:text-2xl font-bold text-gray-900">Első olvasmány</h3>
1101                                <span class="text-[#70a300] font-medium bg-[#70a300]/10 px-3 py-1 rounded-lg text-sm lg:text-base">Jób 19,21-27</span>
1102                            </div>
1103                            <div class="prose prose-base lg:prose-lg max-w-none text-gray-700 leading-relaxed" :class="expanded ? '' : 'line-clamp-3'">
1104                                Szánjatok meg! Szánjatok meg legalább ti, barátaim! Mert az Úr keze érintett engem. Miért üldöztök engem úgy, mint Isten, és mért nem tudtok betelni húsommal? Bárcsak felírnák szavaimat, vajha könyvbe jegyeznék azokat, vas íróvesszővel ólomtáblára, vagy vésővel sziklába metszenék őket! Mert tudom, hogy Megváltóm él, s a végső napon felkelek a földről; és ismét körülvesz a bőröm, és saját testemben látom meg Istenemet; én magam látom meg őt, és önnön szemem nézi őt, és nem más! 
1104E reményem van eltéve keblemben!                            </div>
1105                            <button @click="expanded = !expanded" class="mt-4 text-[#70a300] font-bold hover:underline flex items-center text-sm lg:text-base focus:outline-none">
1106                                <span x-text="expanded ? 'Kevesebb mutatása' : 'Teljes szöveg'"></span>
1107                                <span class="ml-2 flex items-center">
1108                                    <i class="fa-solid fa-chevron-down" x-show="!expanded"></i>
1109                                    <i class="fa-solid fa-chevron-up" x-show="expanded" style="display: none;"></i>
1110                                </span>
1111                            </button>
1112                        </div>
1113                    
1114                    <!-- SZENTLECKE -->
1115                    
1116                    <!-- EVANGÉLIUM -->
1117                                            <div x-data="{ expanded: false }" class="bg-white rounded-xl p-6 lg:p-8 shadow-lg border-l-4 border-purple-500 transition-all">
1118                            <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 lg:mb-6 gap-2">
1119                                <h3 class="text-xl lg:text-2xl font-bold text-gray-900">Evangélium</h3>
1120                                <span class="text-purple-600 font-medium bg-purple-50 px-3 py-1 rounded-lg text-sm lg:text-base">Lk 10,1-12</span>
1121                            </div>
1122                            <div class="prose prose-base lg:prose-lg max-w-none text-gray-700 leading-relaxed" :class="expanded ? '' : 'line-clamp-3'">
1123                                Ezek után az Úr kiválasztott más hetvenkettőt, és elküldte őket kettesével maga előtt minden városba és helységbe, ahova menni készült. Azt mondta nekik: ,,Az aratnivaló sok, de a munkás kevés. Kérjétek azért az aratás Urát, küldjön munkásokat az aratásába. Menjetek! Íme, úgy küldelek titeket, mint bárányokat a farkasok közé. Ne vigyetek erszényt, se tarisznyát, se sarut, és az úton senkit se köszöntsetek. Ha valamelyik házba bementek, először ezt mondjátok: ,,Békesség e háznak!'' Ha a békesség fia lakik ott, rászáll a ti békességtek; ha pedig nem, visszaszáll rátok. Maradjatok ugyanabban a házban, egyétek és igyátok, amijük van, mert méltó a munkás a maga bérére. Ne járjatok házról-házra. Ha valamelyik városba betértek, és ott befogadnak titeket, egyétek, amit elétek tesznek. Gyógyítsátok meg az ott lévő betegeket, és mondjátok nekik: ,,Elközelgett hozzátok az Isten országa.'' Ha pedig egy városba betértek, és nem fogadnak be titeket, menjetek ki az utcára, és mondjátok: ,,Még a port is lerázzuk nektek, amely a ti városotokban lábainkra tapadt; tudjátok meg azonban, hogy elközelgett az Isten országa.'' Mondom nektek: Szodomának könnyebb lesz a sorsa azon a napon, mint annak a városnak.                            </div>
1124                            <div class="mt-6 flex flex-wrap gap-4 items-center">
1125                                <button @click="expanded = !expanded" class="text-purple-600 font-bold hover:underline flex items-center text-sm lg:text-base focus:outline-none">
1126                                    <span x-text="expanded ? 'Kevesebb mutatása' : 'Teljes szöveg'"></span>
1127                                    <span class="ml-2 flex items-center">
1128                                        <i class="fa-solid fa-chevron-down" x-show="!expanded"></i>
1129                                        <i class="fa-solid fa-chevron-up" x-show="expanded" style="display: none;"></i>
1130                                    </span>
1131                                </button>
1132                            </div>
1133                        </div>
1134                    
1135                    <!-- A NAP SZENTJE -->
1136                                                                    <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl p-6 lg:p-8 shadow-lg border border-orange-100">
1137                            <div class="flex flex-col sm:flex-row items-start sm:items-center gap-6">
1138                                <div class="w-20 h-20 lg:w-24 lg:h-24 flex-shrink-0 mx-auto 
1138sm:mx-0 relative">
1139                                                                        <div class="szent-fallback  w-full h-full rounded-full border-4 border-white shadow-md bg-gradient-to-br from-amber-100 to-orange-200 flex items-center justify-center">
1140                                        <i class="fa-solid fa-cross text-orange-500/70 text-3xl lg:text-4xl"></i>
1141                                    </div>
1142                                </div>
1143                                <div class="text-center sm:text-left flex-grow">
1144                                    <div class="text-xs text-orange-600 font-bold tracking-wider mb-1 uppercase">A nap szentje</div>
1145                                    <h3 class="text-xl lg:text-2xl font-bold text-gray-900 mb-2">A gyermek Jézusról nevezett Lisieux-i kis Szent Teréz</h3>
1146                                    <div class="text-gray-700 text-sm lg:text-base leading-relaxed mb-4 line-clamp-2">
1147                                        Szent Teréz megtalálta a maga kis útját alázatban, egyszerűségben, Isten iránti bizalomban. Hivatását így foglalja össze: „Anyámnak, az Egyháznak szívében szeretet leszek.” Isten segítségével akarjuk járni életünk útját, megtalálni mi is hivatásunkat, és megmaradni az Istentől rendelt úton.                                    </div>
1148                                    <a href="/szentek/188" class="text-orange-600 font-bold hover:underline inline-flex items-center text-sm lg:text-base">
1149                                        Teljes életrajz <i class="fa-solid fa-arrow-right ml-2 text-xs"></i>
1150                                    </a>
1151                                </div>
1152                            </div>
1153                        </div>
1154                    
1155                </div>
1156            </div>
1157        </div>
1158    </section>
1159<section id="live-schedule-section" class="py-12 lg:py-20 bg-brand-dark text-white">
1160    <div class="max-w-[1440px] mx-auto px-4 md:px-8">
1161        <div class="text-center mb-8 lg:mb-12">
1162            <h2 class="text-3xl lg:text-4xl font-bold mb-3 lg:mb-4">Mai műsorfolyam</h2>
1163            <p class="text-lg lg:text-xl text-gray-400 max-w-2xl mx-auto">
1164                Nézze meg, mi vár Önre ma a Magyar Katolikus Rádióban
1165            </p>
1166        </div>
1167
1168        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
1169                                            
1170                                    <div class="bg-white/5 backdrop-blur rounded-xl p-5 lg:p-6 border border-white/10 hover:bg-white/10 transition-all group flex flex-col h-full">
1171                        <div class="text-brand-green font-bold text-xl lg:text-2xl mb-2">13:00</div>
1172                        
1173                        <div class="flex-1">
1174                            <h4 class="text-lg lg:text-xl font-bold mb-2 group-hover:text-brand-green transition-colors">Hírek</h4>
1175                            <p class="text-gray-400 text-sm mb-4 line-clamp-2"></p>
1176                        </div>
1177
1178                        <div class="flex items-center text-xs lg:text-sm text-gray-500 mt-auto pt-4 border-t border-white/5">
1179                            <i class="fa-regular fa-clock mr-2"></i><span>4 perc</span>
1180                        </div>
1181                    </div>
1182                                                            
1183                                    <div class="bg-brand-green/20 backdrop-blur rounded-xl p-5 lg:p-6 border-2 border-brand-green relative overflow-hidden shadow-[0_0_20px_rgba(163,211,0,0.2)] flex flex-col h-full">
1184                        <div class="absolute top-3 right-3">
1185                            <span class="bg-brand-green text-white text-[10px] lg:text-xs px-2 lg:px-3 py-1 rounded-full font-bold uppercase tracking-wider flex items-center">
1186                                <i class="fa-solid fa-circle text-[8px] mr-1.5 animate-pulse"></i> Élő
1187                            </span>
1188                        </div>
1189                        <div class="text-brand-green font-bold text-xl lg:text-2xl mb-2">13:04</div>
1190                        
1191                        <div class="flex-1"> <h4 class="text-lg lg:text-xl font-bold mb-2">Vendég-oldal</h4>
1192                            <p class="text-gray-200 text-sm mb-4 line-clamp-2">Válogatás a Szent István Rádió műsorából
1193 Nagy-eged hegyi Szent Kereszt kápolna
1194Szihalmi Mária szobor
1195Zsódi Viktor piarista tartományfőnök</p>
1196                        </div>
1197
1198                        <div class="flex items-center text-xs lg:text-sm text-brand-green/80 mt-auto pt-4 border-t border-white/5">
1199                            <i class="fa-regular fa-clock mr-2"></i><span>54 perc</span>
1200                        </div>
1201                    </div>
1202                                                            
1203                                    <div class="bg-white/5 backdrop-blur rounded-xl p-5 lg:p-6 border border-white/10 hover:bg-white/10 transition-all group flex flex-col h-full">
1204                        <div class="text-brand-green font-bold text-xl lg:text-2xl mb-2">14:00</div>
1205                        
1206                        <div class="flex-1">
1207                            <h4 class="text-lg lg:text-xl font-bold mb-2 group-hover:text-brand-green transition-colors">Hírek</h4>
1208                            <p class="text-gray-400 text-sm mb-4 line-clamp-2"></p>
1209                        </div>
1210
1211                        <div class="flex items-center text-xs lg:text-sm text-gray-500 mt-auto pt-4 border-t border-white/5">
1212                            <i class="fa-regular fa-clock mr-2"></i><span>4 perc</span>
1213                        </div>
1214                    </div>
1215                                                            
1216                                    <div class="bg-white/5 backdrop-blur rounded-xl p-5 lg:p-6 border border-white/10 hover:bg-white/10 transition-all group flex flex-col h-full">
1217                        <div class="text-brand-green font-bold text-xl lg:text-2xl mb-2">14:04</div>
1218                        
1219                        <div class="flex-1">
1220                            <h4 class="text-lg lg:text-xl font-bold mb-2 group-hover:text-brand-green transition-colors">Hangárium</h4>
1221                            <p class="text-gray-400 text-sm mb-4 line-clamp-2">A könnyűzene kiválóságai
1222
1223Mai vendég Dr. Kovács László producer.  Bemutatjuk a Magyar Filharmóniai Társaság  koncertalbumát.
1224Szerkesztő: Balogh Tibor</p>
1225                        </div>
1226
1227                        <div class="flex items-center text-xs lg:text-sm text-gray-500 mt-auto pt-4 border-t border-white/5">
1228                            <i class="fa-regular fa-clock mr-2"></i><span>24 perc</span>
1229                        </div>
1230                    </div>
1231                                    </div>
1232
1233        <div class="text-center mt-10 lg:mt-12">
1234            <a href="/musoraink" class="inline-flex items-center text-brand-green font-medium text-base lg:text-lg hover:underline group">
1235                Teljes napi műsorújság
1236                <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
1237            </a>
1238        </div>
1239    </div>
1240</section><section id="community-section" class="py-12 lg:py-20 bg-white"
1241    x-data="{
1242        isOpen: false,
1243        isLoading: false,
1244        successMsg: '',
1245        errorMsg: '',
1246        formData: {
1247            name: '',
1248            email: '',
1249            story: ''
1250        },
1251
1252        submitForm() {
1253            this.isLoading = true;
1254            this.successMsg = '';
1255            this.errorMsg = '';
1256
1257            // reCAPTCHA v3 hívás beágyazva
1258            if (typeof grecaptcha !== 'undefined') {
1259                grecaptcha.ready(() => {
1260                    grecaptcha.execute('6Lcu2I8sAAAAADr7sn9X5zMdJMIEcGYmRQVn3TTn', {
1261                        action: 'submit_story'
1262                    }).then((token) => {
1263                        const payload = {
1264                            ...this.formData,
1265                            recaptcha_token: token
1266                        };
1267
1268                        fetch('/api/send-story', {
1269                            method: 'POST',
1270                            headers: {
1271                                'Content-Type': 'application/json',
1272                                'Accept': 'application/json'
1273                            },
1274                            body: JSON.stringify(payload)
1275                        })
1276                        .then(response => {
1277                            if (!response.ok) {
1278                                throw new Error('Hiba a hálózatban vagy a szerveren.');
1279                            }
1280                            return response.json();
1281                        })
1282                        .then(data => {
1283                            this.isLoading = false;
1284                            if (data.success) {
1285                                this.successMsg = 'Köszönjük! Az üzenetét sikeresen megkaptuk.';
1286                                this.formData = {
1287                                    name: '',
1288                                    email: '',
1289                                    story: ''
1290                                };
1291
1292                                setTimeout(() => {
1293                                    this.isOpen = false;
1294                                    this.successMsg = '';
1295                                }, 3000);
1296                            } else {
1297                                this.errorMsg = data.error || 'Hiba történt a küldés során.';
1298                            }
1299                        })
1300                        .catch(error => {
1301                            this.isLoading = false;
1302                            this.errorMsg = 'Hiba történt a kommunikáció során. Kérjük, próbálja újra később.';
1303                        });
1304                    });
1305                });
1306            } else {
1307                this.isLoading = false;
1308                this.errorMsg = 'A biztonsági ellenőrzés (reCAPTCHA) nem tölthető be. Kérjük, frissítse az oldalt!';
1309            }
1310        }
1311    }">
1312
1313    <div class="max-w-[1440px] mx-auto px-4 md:px-8">
1314        <div class="text-center mb-10 lg:mb-12">
1315            <h2 class="text-3xl lg:text-4xl font-bold text-brand-dark mb-4">Közösségünk</h2>
1316            <p class="text-lg lg:text-xl text-gray-600">Csatlakozzon hozzánk a közösségi médiában</p>
1317        </div>
1318
1319        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 mb-12 max-w-6xl mx-auto items-stretch">
1320
1321            <div class="h-full flex flex-col bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 lg:p-8 text-center hover:shadow-xl transition-shadow border border-blue-200/50">
1322                <div class="w-16 h-16 lg:w-20 lg:h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-blue-200">
1323                    <i class="fa-brands fa-facebook-f text-white text-2xl lg:text-3xl"></i>
1324                </div>
1325                <h3 class="text-xl lg:text-2xl font-bold text-brand-dark mb-3">Facebook</h3>
1326                <p class="text-gray-600 mb-6 text-base lg:text-lg">Kövesse napi bejegyzéseinket és élő közvetítéseinket</p>
1327                <div class="text-2xl lg:text-3xl font-bold text-blue-600 mb-6">7,4 E követő</div>
1328                <a href="https://www.facebook.com/katradio/?locale=hu_HU" target="_blank" class="mt-auto inline-block w-full bg-blue-600 hover:bg-blue-700 text-white font-medium px-8 py-3 rounded-lg transition-colors">
1329                    Követés
1330                </a>
1331            </div>
1332
1333            <div class="h-full flex flex-col bg-gradient-to-br from-red-50 to-red-100 rounded-2xl p-6 lg:p-8 text-center hover:shadow-xl transition-shadow border border-red-200/50">
1334                <div class="w-16 h-16 lg:w-20 lg:h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-red-200">
1335                    <i class="fa-brands fa-youtube text-white text-2xl lg:text-3xl"></i>
1336                </div>
1337                <h3 class="text-xl lg:text-2xl font-bold text-brand-dark mb-3">YouTube</h3>
1338                <p class="text-gray-600 mb-6 text-base lg:text-lg">Nézze meg videóinkat és közvetítéseinket</p>
1339                <div class="text-2xl lg:text-3xl font-bold text-red-600 mb-6">1,11 E Feliratkozó</div>
1340                <a href="https://www.youtube.com/channel/UCgJyAWToXM6aHVic0CtIt4w" target="_blank" class="mt-auto inline-block w-full bg-red-600 hover:bg-red-700 text-white font-medium px-8 py-3 rounded-lg transition-colors">
1341                    Feliratkozás
1342                </a>
1343            </div>
1344
1345            <div class="h-full flex flex-col bg-gradient-to-br from-pink-50 to-purple-100 rounded-2xl p-6 lg:p-8 text-center hover:shadow-xl transition-shadow border border-pink-200/50">
1346                <div class="w-16 h-16 lg:w-20 lg:h-20 bg-gradient-to-tr from-yellow-400 via-pink-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-pink-200">
1347                    <i class="fa-brands fa-instagram text-white text-2xl lg:text-3xl"></i>
1348                </div>
1349                <h3 class="text-xl lg:text-2xl font-bold text-brand-dark mb-3">Instagram</h3>
1350                <p class="text-gray-600 mb-6 text-base lg:text-lg">Kövesse stúdiónk kulisszatitkait és képgalériáinkat</p>
1351                <div class="text-2xl lg:text-3xl font-bold text-pink-600 mb-6">1,19 E követő</div>
1352                <a href="https://www.instagram.com/katolikusradio/" target="_blank" class="mt-auto inline-block w-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-medium px-8 py-3 rounded-lg transition-colors">
1353                    Követés
1354                </a>
1355            </div>
1356
1357        </div>
1358
1359        <div class="bg-brand-grey rounded-2xl p-6 md:p-10 lg:p-12">
1360            <div class="text-center lg:text-left">
1361                <h3 class="text-2xl lg:text-3xl font-bold text-brand-dark mb-4">Ossza meg velünk véleményét!</h3>
1362                <p class="text-base lg:text-lg text-gray-600 leading-relaxed mb-8">
1363                    Észrevétele van műsorunkkal kapcsolatban? Egy érdekes témára szeretné felhívni figyelmünket? Írja meg nekünk, és amint lehet, válaszolunk.
1364                </p>
1365                <button @click="isOpen = true" class="w-full sm:w-auto bg-brand-green hover:bg-[#85c000] text-white font-medium px-8 py-4 rounded-lg transition-colors text-lg">
1366                    Kapcsolatfelvétel
1367                </button>
1368            </div>
1369        </div>
1370    </div>
1371
1372    <div x-show="isOpen"
1373        style="display: none;"
1374        class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
1375
1376        <div @click.away="isOpen = false"
1377            x-show="isOpen"
1378            x-transition:enter="transition ease-out duration-300"
1379            x-transition:enter-start="opacity-0 translate-y-8"
1380            x-transition:enter-end="opacity-100 translate-y-0"
1381            x-transition:leave="transition ease-in duration-200"
1382            x-transition:leave-start="opacity-100 translate-y-0"
1383            x-transition:leave-end="opacity-0 translate-y-8"
1384            class="bg-white w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
1385
1386            <div class="flex justify-between items-center p-6 border-b border-gray-100">
1387                <h3 class="text-2xl font-bold text-brand-dark">Üzenetküldés</h3>
1388                <button @click="isOpen = false" class="text-gray-400 hover:text-gray-600 transition-colors">
1389                    <i class="fa-solid fa-xmark text-2xl"></i>
1390                </button>
1391            </div>
1392
1393            <div class="p-6 overflow-y-auto">
1394                <form @submit.prevent="submitForm">
1395                    <template x-if="successMsg">
1396                        <div class="bg-green-50 text-brand-green p-4 rounded-lg mb-6" x-text="successMsg"></div>
1397                    </template>
1398                    <template x-if="errorMsg">
1399                        <div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6" x-text="errorMsg"></div>
1400                    </template>
1401
1402                    <div class="mb-4">
1403                        <label class="block text-gray-700 font-medium mb-2" for="name">Név (opcionális)</label>
1404                        <input type="text" id="name" x-model="formData.name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-brand-green focus:ring-1 focus:ring-brand-green transition-colors" placeholder="Kovács János">
1405                    </div>
1406
1407                    <div class="mb-4">
1408                        <label class="block text-gray-700 font-medium mb-2" for="email">
1408E-mail cím</label>
1409                        <input type="email" id="email" x-model="formData.email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-brand-green focus:ring-1 focus:ring-brand-green transition-colors" placeholder="[email protected]">
1410                    </div>
1411
1412                    <div class="mb-6">
1413                        <label class="block text-gray-700 font-medium mb-2" for="story">Üzenet</label>
1414                        <textarea id="story" x-model="formData.story" required rows="6" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-brand-green focus:ring-1 focus:ring-brand-green transition-colors" placeholder="Írja meg az üzenetét..."></textarea>
1415                    </div>
1416
1417                    <button type="submit" :disabled="isLoading" class="w-full bg-brand-green hover:bg-[#85c000] text-white font-medium px-8 py-4 rounded-lg transition-colors text-lg flex justify-center items-center disabled:opacity-70 disabled:cursor-not-allowed">
1418                        <span x-show="!isLoading">Küldés</span>
1419                        <span x-show="isLoading" class="flex items-center" style="display: none;">
1420                            <i class="fa-solid fa-circle-notch fa-spin mr-2"></i> Küldés folyamatban...
1421                        </span>
1422                    </button>
1423
1424                    <div class="text-xs text-center text-gray-400 mt-4">
1425                        Az oldalt a reCAPTCHA védi, így a Google <a href="https://policies.google.com/privacy" class="underline" target="_blank">Adatvédelmi irányelvei</a> és <a href="https://policies.google.com/terms" class="underline" target="_blank">Szolgáltatási feltételei</a> érvényesek.
1426                    </div>
1427                </form>
1428            </div>
1429        </div>
1430    </div>
1431</section><section id="newsletter-section" class="py-20" style="background-color: #98ca3c;">
1432    <div class="max-w-[1440px] mx-auto px-8">
1433
1434        <div class="max-w-5xl mx-auto text-center mb-14">
1435            <h2 class="text-4xl font-bold text-white mb-4">
1436                Iratkozzon fel hírleveleinkre
1437            </h2>
1438            <p class="text-xl text-white/90 leading-relaxed">
1439                Válassza ki az Önnek megfelelő értesítési formát.
1440            </p>
1441        </div>
1442
1443        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
1444
1445            <div class="bg-white rounded-2xl p-8 shadow-2xl"
1446                x-data="{
1447                     isLoading: false,
1448                     successMsg: '',
1449                     errorMsg: '',
1450                     category: 'altalanos',
1451                     formData: { name: '', email: '' },
1452
1453                     submitForm() {
1454                         this.isLoading = true;
1455                         this.successMsg = '';
1456                         this.errorMsg = '';
1457
1458                         if (typeof grecaptcha !== 'undefined') {
1459                             grecaptcha.ready(() => {
1460                                 grecaptcha.execute('6Lcu2I8sAAAAADr7sn9X5zMdJMIEcGYmRQVn3TTn', {
1461                                     action: 'newsletter_subscribe'
1462                                 }).then((token) => {
1463                                     this.sendDataToApi(token);
1464                                 });
1465                             });
1466                         } else {
1467                             this.sendDataToApi('');
1468                         }
1469                     },
1470
1471                     async sendDataToApi(token) {
1472                         const payload = {
1473                             ...this.formData,
1474                             category: this.category,
1475                             recaptcha_token: token
1476                         };
1477
1478                         try {
1479                             const response = await fetch('/api/hirlevel-feliratkozas', {
1480                                 method: 'POST',
1481                                 headers: {
1482                                     'Content-Type': 'application/json',
1483                                     'Accept': 'application/json'
1484                                 },
1485                                 body: JSON.stringify(payload)
1486                             });
1487
1488                             const data = await response.json().catch(() => ({}));
1489
1490                             if (!response.ok) {
1491                                 this.errorMsg = data.error || 'Hiba történt a feliratkozás során.';
1492                             } else if (data.success) {
1493                                 this.successMsg = 'Köszönjük, hogy feliratkozott! Hamarosan értesítéseket fog kapni az email fiókjába.';
1494                                 this.formData = { name: '', email: '' };
1495                                 setTimeout(() => { this.successMsg = ''; }, 5000);
1496                             } else {
1497                                 this.errorMsg = 'Ismeretlen hiba történt.';
1498                             }
1499                         } catch (error) {
1500                             this.errorMsg = 'Hálózati hiba. Kérjük, próbálja újra később.';
1501                         } finally {
1502                             this.isLoading = false;
1503                         }
1504                     }
1505                 }">
1506
1507                <div class="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto mb-6">
1508                    <i class="fa-solid fa-newspaper text-brand-green text-2xl"></i>
1509                </div>
1510
1511                <h3 class="text-2xl font-bold text-center mb-4">Heti hírlevél</h3>
1512                <p class="text-gray-600 text-center mb-8">
1513                    Hetente egyszer a legfontosabb hírek, műsorajánlók és lelki gondolatok.
1514                </p>
1515
1516                <form @submit.prevent="submitForm" class="relative">
1517                    <template x-if="successMsg">
1518                        <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6 text-center" x-text="successMsg"></div>
1519                    </template>
1520                    <template x-if="errorMsg">
1521                        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-center" x-text="errorMsg"></div>
1522                    </template>
1523
1524                    <div class="mb-5 text-left">
1525                        <label class="block text-sm font-medium text-gray-700 mb-2" for="general-name">Név</label>
1526                        <input type="text" id="general-name" placeholder="Kovács János" x-model="formData.name"
1527                            class="w-full px-4 py-4 border-2 border-gray-200 rounded-lg focus:border-brand-green focus:outline-none text-lg">
1528                    </div>
1529
1530                    <div class="mb-5 text-left">
1531                        <label class="block text-sm font-medium text-gray-700 mb-2" for="general-email">
1532                            E-mail cím <span class="text-red-500">*</span>
1533                        </label>
1534                        <input type="email" id="general-email" required placeholder="[email protected]" x-model="formData.email"
1535                            class="w-full px-4 py-4 border-2 border-gray-200 rounded-lg focus:border-brand-green focus:outline-none text-lg">
1536                    </div>
1537
1538                    <div class="text-left mb-6">
1539                        <label class="flex items-start cursor-pointer">
1540                            <input type="checkbox" required class="mt-1 mr-3 w-5 h-5 text-brand-green accent-brand-green">
1541                            <a href="/adatkezelesi-tajekoztato"><span class="text-sm text-gray-600">Elfogadom az adatkezelési tájékoztatót.</span></a>
1542                        </label>
1543                    </div>
1544
1545                    <button type="submit" :disabled="isLoading"
1546                        class="w-full bg-brand-green hover:bg-[#85c000] text-white font-bold py-4 rounded-lg transition-colors text-lg flex justify-center items-center disabled:opacity-70 disabled:cursor-not-allowed">
1547                        <span x-show="!isLoading">Feliratkozás</span>
1548                        <span x-show="isLoading" class="flex items-center" style="display: none;">
1549                            <i class="fa-solid fa-circle-notch fa-spin mr-2"></i> Küldés...
1550                        </span>
1551                    </button>
1552                </form>
1553            </div>
1554
1555            <div class="bg-white rounded-2xl p-8 shadow-2xl"
1556                x-data="{
1557                     isLoading: false,
1558                     successMsg: '',
1559                     errorMsg: '',
1560                     category: 'napi_evangelium',
1561                     formData: { name: '', email: '' },
1562
1563                     submitForm() {
1564                         this.isLoading = true;
1565                         this.successMsg = '';
1566                         this.errorMsg = '';
1567
1568                         if (typeof grecaptcha !== 'undefined') {
1569                             grecaptcha.ready(() => {
1570                                 grecaptcha.execute('6Lcu2I8sAAAAADr7sn9X5zMdJMIEcGYmRQVn3TTn', {
1571                                     action: 'newsletter_subscribe'
1572                                 }).then((token) => {
1573                                     this.sendDataToApi(token);
1574                                 });
1575                             });
1576                         } else {
1577                             this.sendDataToApi('');
1578                         }
1579                     },
1580
1581                     async sendDataToApi(token) {
1582                         const payload = {
1583                             ...this.formData,
1584                             category: this.category,
1585                             recaptcha_token: token
1586                         };
1587
1588                         try {
1589                             const response = await fetch('/api/hirlevel-feliratkozas', {
1590                                 method: 'POST',
1591                                 headers: {
1592                                     'Content-Type': 'application/json',
1593                                     'Accept': 'application/json'
1594                                 },
1595                                 body: JSON.stringify(payload)
1596                             });
1597
1598                             const data = await response.json().catch(() => ({}));
1599
1600                             if (!response.ok) {
1601                                 this.errorMsg = data.error || 'Hiba történt a feliratkozás során.';
1602                             } else if (data.success) {
1603                                 this.successMsg = 'Köszönjük, hogy feliratkozott! Hamarosan értesítéseket fog kapni az email fiókjába.';
1604                                 this.formData = { name: '', email: '' };
1605                                 setTimeout(() => { this.successMsg = ''; }, 5000);
1606                             } else {
1607                                 this.errorMsg = 'Ismeretlen hiba történt.';
1608                             }
1609                         } catch (error) {
1610                             this.errorMsg = 'Hálózati hiba. Kérjük, próbálja újra később.';
1611                         } finally {
1612                             this.isLoading = false;
1613                         }
1614                     }
1615                 }">
1616
1617                <div class="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto mb-6">
1618                    <i class="fa-solid fa-cross text-brand-green text-2xl"></i>
1619                </div>
1620
1621                <h3 class="text-2xl font-bold text-center mb-4">Napi evangélium</h3>
1622                <p class="text-gray-600 text-center mb-8">
1623                    Minden reggel egy rövid evangéliumi részlet és gondolat.
1624                </p>
1625
1626                <form @submit.prevent="submitForm" class="relative">
1627                    <template x-if="successMsg">
1628                        <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6 text-center" x-text="successMsg"></div>
1629                    </template>
1630                    <template x-if="errorMsg">
1631                        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-center" x-text="errorMsg"></div>
1632                    </template>
1633
1634                    <div class="mb-5 text-left">
1635                        <label class="block text-sm font-medium text-gray-700 mb-2" for="daily-name">Név</label>
1636                        <input type="text" id="daily-name" placeholder="Kovács János" x-model="formData.name"
1637                            class="w-full px-4 py-4 border-2 border-gray-200 rounded-lg focus:border-brand-green focus:outline-none text-lg">
1638                    </div>
1639
1640                    <div class="mb-5 text-left">
1641                        <label class="block text-sm font-medium text-gray-700 mb-2" for="daily-email">
1642                            E-mail cím <span class="text-red-500">*</span>
1643                        </label>
1644                        <input type="email" id="daily-email" required placeholder="[email protected]" x-model="formData.email"
1645                            class="w-full px-4 py-4 border-2 border-gray-200 rounded-lg focus:border-brand-green focus:outline-none text-lg">
1646                    </div>
1647
1648                    <div class="text-left mb-6">
1649                        <label class="flex items-start cursor-pointer">
1650                            <input type="checkbox" required class="mt-1 mr-3 w-5 h-5 text-brand-green accent-brand-green">
1651                            <a href="/adatkezelesi-tajekoztato"><span class="text-sm text-gray-600">Elfogadom az adatkezelési tájékoztatót.</span></a>
1652                        </label>
1653                    </div>
1654
1655                    <button type="submit" :disabled="isLoading"
1656                        class="w-full bg-brand-green hover:bg-[#85c000] text-white font-bold py-4 rounded-lg transition-colors text-lg flex justify-center items-center disabled:opacity-70 disabled:cursor-not-allowed">
1657                        <span x-show="!isLoading">Feliratkozás</span>
1658                        <span x-show="isLoading" class="flex items-center" style="display: none;">
1659                            <i class="fa-solid fa-circle-notch fa-spin mr-2"></i> Küldés...
1660                        </span>
1661                    </button>
1662                </form>
1663            </div>
1664
1665        </div>
1666    </div>
1667</section>
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677 <!-- Az oldal tartalma -->
1678
1679
1680
1681    <footer id="footer" class="bg-brand-dark text-white py-12 lg:py-16">
1682  <div class="max-w-[1440px] mx-auto px-4 md:px-8">
1683    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 mb-12">
1684
1685      <div class="md:col-span-3 lg:col-span-2 space-y-6">
1686        <div class="flex items-center justify-center md:justify-start">
1687          <div class="w-14 h-14 lg:w-16 lg:h-16 rounded-full flex items-center justify-center overflow-hidden">
1688            <img src="/img/logo.png"
1689              alt="Magyar Katolikus Rádió" class="w-full h-full object-cover">
1690          </div>
1691          <div class="ml-4 text-left">
1692            <div class="text-lg lg:text-xl font-bold">Magyar Katolikus Rádió</div>
1693            <div class="text-sm text-gray-400">Örömhír mindenkinek!</div>
1694          </div>
1695        </div>
1696        <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">
1697          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.
1698        </p>
1699        <div class="flex items-center justify-center md:justify-start space-x-4">
1700          <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>
1701          <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>
1702          <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>
1703          <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>
1704          <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>
1705          <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>
1706        </div>
1707      </div>
1708
1709      
1710      <div class="text-center md:text-left">
1711        <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>
1712        <ul class="space-y-2 lg:space-y-3">
1713            <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>
1714          <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>
1715          <li><a href="/podcastok" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Podcastok</a></li>
1716        </ul>
1717      </div>
1718
1719      <div class="text-center md:text-left">
1720        <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>
1721        <ul class="space-y-2 lg:space-y-3">
1722          <li><a href="/hireink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Hírek</a></li>
1723          <li><a href="/videoink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Videók</a></li>
1724          <li><a href="/igenaptar" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Igenaptár</a></li>
1725        </ul>
1726      </div>
1727
1728      <div class="text-center md:text-left">
1729        <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>
1730        <ul class="space-y-2 lg:space-y-3">
1731          <li><a href="/rolunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Rólunk</a></li>
1732          <li><a href="/bemutatkozunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Kapcsolat</a></li>
1733          <li><a href="/tamogatas" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Támogatás</a></li>
1734          <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>
1735          <li><a href="/impresszum" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Impresszum</a></li>
1736        </ul>
1737      </div>
1738    </div>
1739
1740    <div class="border-t border-white/10 pt-10">
1741      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 ga
1741p-10 lg:gap-12 mb-12">
1742
1743        <div class="md:col-span-3 lg:col-span-2 space-y-6">
1744          <h4 class="text-lg font-bold mb-4">Kapcsolat</h4>
1745          <div class="space-y-3 text-gray-400 max-w-xs mx-auto md:mx-0">
1746            <div class="flex items-start justify-center md:justify-start">
1747              <i class="fa-solid fa-location-dot mt-1 mr-3 text-brand-green"></i>
1748              <span class="text-sm">1062 Budapest, Délibáb u. 15.-17.</span>
1749            </div>
1750            <div class="flex items-center justify-center md:justify-start">
1751              <i class="fa-solid fa-phone mr-3 text-brand-green"></i>
1752              <span class="text-sm">(+36 1) 255-3333</span>
1753            </div>
1754            <div class="flex items-center justify-center md:justify-start">
1755              <i class="fa-solid fa-envelope mr-3 text-brand-green"></i>
1756              <span class="text-sm">[email protected]</span>
1757            </div>
1758          </div>
1759        </div>
1760
1761        <div class="md:col-span-3 lg:col-span-2 space-y-6">
1762          <h4 class="text-lg font-bold mb-4">Támogatók</h4>
1763          <div class="space-y-3 text-gray-400 max-w-md mx-auto md:mx-0">
1764            <div class="flex items-start justify-center md:justify-start">
1765              <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>
1766            </div>
1767          </div>
1768        </div>
1769
1770		<div class="text-center md:text-left">
1771			<div class="flex flex-col gap-4 max-w-[150px] w-full">
1772			  <img src="/img/nmhh_logo-150px.jpg" alt="NMHH logó" class="w-full h-auto object-contain rounded shadow-sm">
1773			  <img src="/img/nka_logo-150px.jpg" alt="NKA logó" class="w-full h-auto object-contain rounded shadow-sm">
1774			</div>
1775
1776		</div>
1777      </div>
1778
1779      <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">
1780        <p class="text-gray-500 text-xs lg:text-sm">
1781          © 2026 Magyar Katolikus Rádió Zrt. Minden jog fenntartva.
1782        </p>
1783        <p class="text-gray-500 text-xs lg:text-sm">
1784          Készítette: <a href="https://novanow.hu" class="text-brand-green hover:underline">NovaNow</a>
1785        </p>
1786      </div>
1787    </div>
1788  </div>
1789</footer>    <style>
1790  /* Alap padding az élő adáshoz (vagy becsukott állapothoz) */
1791  body {
1792    padding-bottom: 72px;
1793    transition: padding-bottom 0.3s ease;
1794  }
1795
1796  /* Becsukva mindegy mi megy, kicsi a padding */
1797  body.player-minimized {
1798    padding-bottom: 16px !important;
1799  }
1800
1801  /* Archív adásnál nagyobbnak kell lennie a paddingnak mobilon, mert két soros a lejátszó */
1802  @media (max-width: 767px) {
1803    body.player-archive {
1804      padding-bottom: 110px;
1805    }
1806  }
1807
1808  input[type="range"] {
1809    accent-color: #85c000;
1810    cursor: pointer;
1811  }
1812
1813  input[type="range"]:disabled {
1814    cursor: not-allowed;
1815    accent-color: #6c757d;
1816  }
1817
1818  .radio-pulse {
1819    position: relative;
1820    display: flex;
1821    align-items: center;
1822    justify-content: center; /* JAVÍTVA: justify-center -> justify-content */
1823  }
1824
1825  .radio-pulse.is-playing::before {
1826    content: "";
1827    position: absolute;
1828    overflow: hidden;
1829    top: 50%;
1830    left: 50%;
1831    width: 100%;
1832    height: 100%;
1833    margin-top: -50%;
1834    margin-left: -50%;
1835    border-radius: 9999px;
1836    background-color: #85c000;
1837    opacity: 0.5;
1838    animation: pulse-wave 2.5s infinite ease-out;
1839    z-index: -1;
1840    pointer-events: none;
1841  }
1842
1843  @keyframes pulse-wave {
1844    0% { transform: scale(1); opacity: 0.5; }
1845    100% { transform: scale(2.4); opacity: 0; }
1846  }
1847</style>
1848
1849<div id="radio-player-global" data-turbo-permanent x-data="radioPlayer" x-init="init()" x-cloak>
1850  <section
1851    id="quick-listen-bar"
1852    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"
1853    :class="{ 'h-[72px]': isLiveStream || minimized, 'h-[110px] md:h-[72px]': !isLiveStream && !minimized }"
1854    x-show="!minimized"
1855    x-transition.opacity>
1856    
1857    <div class="max-w-[1440px] w-full mx-auto px-4 md:px-6">
1858      <div class="flex items-center justify-between gap-2 md:gap-4 h-[56px] md:h-auto md:py-2">
1859
1860        <div class="flex items-center gap-3 md:gap-4 min-w-[50%] md:min-w-[200px]">
1861          <button
1862            type="button"
1863            class="w-10 h-10 bg-[#85c000] hover:bg-[#96d100] rounded-full flex items-center justify-center transition-colors shrink-0"
1864            @click="toggle()"
1865            :aria-label="playing ? 'Szünet' : 'Lejátszás'">
1866            <i class="fa-solid fa-play text-white ml-1" x-show="!playing" x-cloak></i>
1867            <i class="fa-solid fa-pause text-white" x-show="playing" x-cloak></i>
1868          </button>
1869
1870          <div class="min-w-0 flex-1">
1871            <div class="text-white font-semibold text-sm leading-tight truncate" x-text="displayTitle"></div>
1872            <div class="text-gray-400 text-xs leading-tight truncate" x-text="sourceLabel"></div>
1873          </div>
1874        </div>
1875
1876        <div class="hidden md:flex flex-1 items-center justify-center gap-3 px-4" x-show="!isLiveStream" x-cloak>
1877          <span class="text-xs text-gray-400 font-mono w-12 text-right" x-text="formatTime(currentTime)"></span>
1878          <input
1879            type="range"
1880            min="0"
1881            :max="duration > 0 ? duration : 100"
1882            step="1"
1883            class="flex-1 max-w-[400px] h-1.5 bg-gray-600 rounded-lg appearance-none"
1884            x-model="currentTime"
1885            @input="seek()" />
1886          <span class="text-xs text-gray-400 font-mono w-12" x-text="formatTime(duration)"></span>
1887        </div>
1888        
1889        <div class="hidden md:block flex-1" x-show="isLiveStream" x-cloak></div>
1890
1891        <div class="flex items-center gap-2 md:gap-3 min-w-[80px] md:min-w-[180px] justify-end">
1892          
1893          <div class="hidden md:flex items-center gap-2 w-28">
1894            <i class="fa-solid fa-volume-high text-gray-400 text-sm"></i>
1895            <input
1896              type="range" min="0" max="1" step="0.01"
1897              class="w-full h-1.5 bg-gray-600 rounded-lg appearance-none"
1898              x-model.number="volume"
1899              @input="applyVolume()"
1900              aria-label="Hangerő" />
1901          </div>
1902
1903          <button
1904            type="button"
1905            class="w-9 h-9 rounded-md hover:bg-white/10 text-gray-400 flex items-center justify-center transition-colors ml-1"
1906            @click="minimize()"
1907            aria-label="Becsukás"
1908            title="Becsukás">
1909            <i class="fa-solid fa-chevron-down"></i>
1910          </button>
1911        </div>
1912
1913      </div>
1914
1915      <div class="flex md:hidden items-center justify-between gap-3 pb-3 px-1" x-show="!isLiveStream" x-cloak>
1916        <span class="text-xs text-gray-400 font-mono w-10 text-left shrink-0" x-text="formatTime(currentTime)"></span>
1917        <input
1918            type="range"
1919            min="0"
1920            :max="duration > 0 ? duration : 100"
1921            step="1"
1922            class="flex-1 h-1.5 bg-gray-600 rounded-lg appearance-none w-full"
1923            x-model="currentTime"
1924            @input="seek()" />
1925        <span class="text-xs text-gray-400 font-mono w-10 text-right shrink-0" x-text="formatTime(duration)"></span>
1926      </div>
1927
1928    </div>
1929
1930    <audio x-ref="audio" preload="none"></audio>
1931  </section>
1932
1933  <button
1934    type="button"
1935    x-show="minimized"
1936    @click="expand()"
1937    :class="{ 'radio-pulse is-playing': playing, 'radio-pulse': !playing }"
1938    style="
1939    position: fixed !important;
1940    bottom: 32px !important;
1941    right: 32px !important;
1942    width: 64px !important;
1943    height: 64px !important;
1944    border-radius: 9999px !important;
1945    background-color: #85c000 !important;
1946    color: white !important;
1947    display: flex !important;
1948    align-items: center !important;
1949    justify-content: center !important;
1950    z-index: 999999 !important;
1951    border: none !important;
1952    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
1953    cursor: pointer !important;
1954  "
1955    x-transition:enter="transition ease-out duration-300"
1956    x-transition:enter-start="opacity-0 scale-50 translate-x-10"
1957    x-transition:enter-end="opacity-100 scale-100 translate-x-0">
1958    <i class="fa-solid fa-radio text-2xl"></i>
1959  </button>
1960
1961  
1961<script>
1962    document.addEventListener('alpine:init', () => {
1963      Alpine.data('radioPlayer', () => ({
1964        defaultUrl: 'https://katolikusradio.hu:8001/live_hi.mp3',
1965        defaultTitle: 'Élő adás',
1966
1967        streamUrl: null,
1968        programTitle: null,
1969        isLiveStream: true,
1970
1971        playing: false,
1972        minimized: sessionStorage.getItem('radioMinimized') === 'true', 
1973        volume: 0.7,
1974
1975        currentTime: 0,
1976        duration: 0,
1977        targetStartTime: 0,
1978
1979        get displayTitle() {
1980          return (this.programTitle && this.programTitle.trim()) ? this.programTitle : this.defaultTitle;
1981        },
1982        get sourceLabel() {
1983          return 'Magyar Katolikus Rádió';
1984        },
1985
1986        persistPlaybackState(isPlaying) {
1987          sessionStorage.setItem('radioWasPlaying', isPlaying ? 'true' : 'false');
1988        },
1989
1990        syncPlaybackState(isPlaying = !this.$refs.audio.paused) {
1991          this.playing = !!isPlaying;
1992          this.persistPlaybackState(this.playing);
1993        },
1994
1995        syncProgressState() {
1996          const audio = this.$refs.audio;
1997          if (!this.isLiveStream) {
1998            this.currentTime = audio.currentTime;
1999          }
2000        },
2001
2002        syncMetadataState() {
2003          const audio = this.$refs.audio;
2004          this.duration = audio.duration === Infinity ? 0 : audio.duration;
2005
2006          if (this.targetStartTime > 0) {
2007            audio.currentTime = this.targetStartTime;
2008            this.targetStartTime = 0;
2009          }
2010        },
2011
2012        syncFromAudioElement() {
2013          const audio = this.$refs.audio;
2014          this.syncPlaybackState(!audio.paused);
2015          this.currentTime = audio.currentTime;
2016          this.duration = audio.duration === Infinity ? 0 : audio.duration;
2017        },
2018
2019        init() {
2020          const a = this.$refs.audio;
2021          window.__mkrRadioPlayerInstance = this;
2022
2023          // Turbo permanent elemként a player DOM-ja oldalváltások között megmarad.
2024          // iOS Safari érzékeny arra, ha ugyanarra az audio elemre többször tesszük fel
2025          // ugyanazokat a listenereket, ezért az init idempotens.
2026          if (a.dataset.radioPlayerListenersAttached !== 'true') {
2027            a.dataset.radioPlayerListenersAttached = 'true';
2028
2029            const getActivePlayer = () => window.__mkrRadioPlayerInstance;
2030
2031            a.addEventListener('play', () => {
2032              getActivePlayer()?.syncPlaybackState(true);
2033            });
2034            a.addEventListener('pause', () => {
2035              getActivePlayer()?.syncPlaybackState(false);
2036            });
2037            a.addEventListener('ended', () => {
2038              getActivePlayer()?.syncPlaybackState(false);
2039            });
2040            a.addEventListener('error', (e) => {
2041              getActivePlayer()?.syncPlaybackState(false);
2042              console.error('audio error', e);
2043            });
2044
2045            a.addEventListener('timeupdate', () => {
2046              getActivePlayer()?.syncProgressState();
2047            });
2048
2049            a.addEventListener('loadedmetadata', () => {
2050              getActivePlayer()?.syncMetadataState();
2051            });
2052          }
2053
2054          a.volume = this.volume;
2055
2056          window.RadioPlayer = {
2057            setStream: (url, title, isLive, startAt, forcePlay) => this.setStream(url, title, isLive, startAt, forcePlay),
2058            play: () => this.play(),
2059            pause: () => this.pause(),
2060            toggle: () => this.toggle(),
2061            minimize: () => this.minimize(),
2062            expand: () => this.expand(),
2063            applyBodyPadding: () => this.applyBodyPadding(),
2064          };
2065
2066          // Memória betöltés
2067          if (!a.src || a.src === window.location.href || a.src === '') {
2068            const params = new URLSearchParams(window.location.search);
2069            const pStream = params.get('stream');
2070            const pTitle = params.get('title');
2071
2072            if (pStream) this.setStream(pStream, pTitle);
2073            else this.setStream(this.defaultUrl, null);
2074          } else {
2075            this.syncFromAudioElement();
2076            
2077            const savedState = JSON.parse(sessionStorage.getItem('radioState') || '{}');
2078            this.streamUrl = savedState.streamUrl || a.src;
2079            this.programTitle = savedState.programTitle || '';
2080            this.isLiveStream = savedState.isLiveStream !== undefined ? savedState.isLiveStream : true;
2081          }
2082
2083          this.syncFromAudioElement();
2084          
2085          this.applyBodyPadding();
2086        },
2087
2088        formatTime(seconds) {
2089          if (isNaN(seconds) || !isFinite(seconds)) return '00:00';
2090          const h = Math.floor(seconds / 3600);
2091          const m = Math.floor((seconds % 3600) / 60);
2092          const s = Math.floor(seconds % 60);
2093          if (h > 0) {
2094            return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
2095          }
2096          return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
2097        },
2098
2099        seek() {
2100          if (this.isLiveStream) return;
2101          this.$refs.audio.currentTime = this.currentTime;
2102        },
2103
2104        // Test Padding hozzáadása dinamikusan
2105        applyBodyPadding() {
2106          document.body.classList.toggle('player-minimized', !!this.minimized);
2107          
2108          // Ha NYITVA van és ARCHÍV, akkor plusz osztály a mobilos kétsoros nézet miatt
2109          if (!this.minimized && !this.isLiveStream) {
2110              document.body.classList.add('player-archive');
2111          } else {
2112              document.body.classList.remove('player-archive');
2113          }
2114        },
2115
2116        minimize() {
2117          this.minimized = true;
2118          sessionStorage.setItem('radioMinimized', 'true');
2119          this.applyBodyPadding();
2120        },
2121
2122        expand() {
2123          this.minimized = false;
2124          sessionStorage.setItem('radioMinimized', 'false');
2125          this.applyBodyPadding();
2126        },
2127
2128        ensureAudioSource() {
2129          const a = this.$refs.audio;
2130          if (this.streamUrl && a.src !== this.streamUrl) {
2131            a.src = this.streamUrl;
2132            a.load();
2133          }
2134        },
2135
2136        setStream(url, title = null, isLive = null, startAt = 0, forcePlay = false) {
2137          if (!url) return;
2138          const a = this.$refs.audio;
2139          const wasPlaying = !a.paused;
2140          const shouldStart = wasPlaying || forcePlay;
2141
2142          this.streamUrl = url;
2143          this.programTitle = title;
2144          this.isLiveStream = isLive !== null ? isLive : url.includes('live_hi');
2145
2146          sessionStorage.setItem('radioState', JSON.stringify({
2147            streamUrl: this.streamUrl,
2148            programTitle: this.programTitle,
2149            isLiveStream: this.isLiveStream
2150          }));
2151
2152          this.targetStartTime = startAt;
2153          this.currentTime = startAt;
2154          this.duration = 0;
2155
2156          if (shouldStart) {
2157            a.pause();
2158            this.ensureAudioSource();
2159            this.syncPlaybackState(false);
2160          } else if (this.isLiveStream) {
2161            // iOS Safari a live stream automatikus a.load()/src indítását a teljes
2162            // oldalbetöltés részének tekinti, ezért a progress bar félúton megállhat,
2163            // a Turbo/Alpine restore pedig félkész DOM-ot festhet. Élő adást csak
2164            // felhasználói play vagy explicit visszajátszás után nyitunk meg.
2165            a.pause();
2166            a.removeAttribute('src');
2167            a.load();
2168            this.syncPlaybackState(false);
2169          } else if (a.src !== url) {
2170            a.pause();
2171            this.ensureAudioSource();
2172            this.syncPlaybackState(false);
2173          }
2174
2175          this.applyBodyPadding(); // Frissítjük a magasságot betöltéskor
2176
2177          if (shouldStart) setTimeout(() => this.play(), 50);
2178        },
2179
2180        async play() {
2181          const a = this.$refs.audio;
2182          this.ensureAudioSource();
2183          try {
2184            await a.play();
2185            this.syncPlaybackState(true);
2186          } catch (e) {
2187            this.syncPlaybackState(false);
2188            console.error('play failed', e);
2189          }
2190        },
2191
2192        pause() {
2193          this.$refs.audio.pause();
2194          this.syncPlaybackState(false);
2195        },
2196
2197        async toggle() {
2198          const a = this.$refs.audio;
2199          if (a.paused) await this.play();
2200          else this.pause();
2201        },
2202
2203        applyVolume() {
2204          this.$refs.audio.volume = this.volume;
2205        },
2206      }));
2207    });
2208  </script>
2208
2209
2210  
2210<script>
2211    if (!window.__mkrRadioTurboBridgeRegistered) {
2212      window.__mkrRadioTurboBridgeRegistered = true;
2213      let wasRadioPlaying = false;
2214
2215      document.addEventListener("turbo:before-render", () => {
2216        const audioEl = document.querySelector('#radio-player-global audio');
2217        if (audioEl) {
2218          wasRadioPlaying = !audioEl.paused;
2219          sessionStorage.setItem('radioWasPlaying', wasRadioPlaying ? 'true' : 'false');
2220        }
2221      });
2222
2223      document.addEventListener("turbo:render", () => {
2224        if (wasRadioPlaying) {
2225          const audioEl = document.querySelector('#radio-player-global audio');
2226          if (audioEl) {
2227            setTimeout(() => {
2228              if (window.RadioPlayer && typeof window.RadioPlayer.play === 'function') {
2229                window.RadioPlayer.play();
2230              } else {
2231                audioEl.play().catch(e => console.log('Auto-play preventálva:', e));
2232              }
2233            }, 50);
2234          }
2235        }
2236
2237        if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') {
2238          window.RadioPlayer.applyBodyPadding();
2239        }
2240      });
2241
2242      window.addEventListener('pageshow', () => {
2243        const shouldResumePlayback = sessionStorage.getItem('radioWasPlaying') === 'true';
2244
2245        if (shouldResumePlayback && window.RadioPlayer && typeof window.RadioPlayer.play === 'function') {
2246          window.RadioPlayer.play();
2247        }
2248
2249        if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') {
2250          window.RadioPlayer.applyBodyPadding();
2251        }
2252      });
2253    }
2254  </script>
2254
2255</div>
2256
2257
2258  </body>
2259
2260  </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.