/* -----------------------------------------------------------
ALAP BEÁLLÍTÁSOK
----------------------------------------------------------- */
:root {--gold: #d4af37;--gold-light: #f5d98c;--gold-dark: #8c6b1f;--panel-bg: #1b2433;--panel-border: #2d3748;}
body {margin: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;display: flex;justify-content: center;flex-direction: column; align-items: center;padding: 2rem;box-sizing: border-box;background-image:radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.6) 80%),url('img/img_bg_paper_6.jpg');background-size: cover;background-blend-mode: overlay;color: #e5e7eb;}
.container {max-width: 900px;width: 100%;}
.header1 { font-size: 1.8rem !important; }
.header2 { font-size: 1.6rem !important; }
.header3 { font-size: 1.4rem !important; }
.basefont { font-size: 1.2rem !important; }


/* -----------------------------------------------------------
VIKTORIÁNUS STICKY NAVIGÁCIÓ
----------------------------------------------------------- */
.nav {position: sticky;top: 0;z-index: 999;background: rgba(0,0,0,0.55);border-bottom: 1px solid var(--gold-dark);box-shadow: 0 0 15px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.4);backdrop-filter: blur(4px);padding: 0.6rem 1rem;}
.nav ul {display: flex;justify-content: center;gap: 2.2rem;list-style: none;margin: 0;padding: 0;}
.nav a {font-family: "Cinzel", serif;color: var(--gold-light);font-size: 1.15rem;letter-spacing: 1px;text-decoration: none;transition: 0.3s ease;text-shadow: 0 0 6px rgba(212,175,55,0.35);}
.nav a:hover {color: var(--gold);text-shadow: 0 0 10px rgba(212,175,55,0.5);}
nav > ul > li {margin: 0.5rem;}

/* -----------------------------------------------------------
70 / 30 LAYOUT – TÖKÉLETESEN KÖZÉPRE IGAZÍTVA
----------------------------------------------------------- */
.layout {display: grid;grid-template-columns: 68% 32%;gap: 2.5rem;max-width: 1500px;margin: 0 auto;padding: 0 2rem;}
.main-content {width: 100%;}
/* OLDALSÁV – timeline */
.sidebar-timeline {position: relative;top: -3rem;height: fit-content;margin-left: 1rem;transform: translateX(-20px);max-width: 380px;}

/* -----------------------------------------------------------
CÍMEK
----------------------------------------------------------- */
.header1, .header2, .header3, .basefont {font-family: "Cinzel", serif;}
.header1, .header2 {text-align: center; margin-bottom: 1rem;}
.header1 {letter-spacing: 2px;color: var(--gold);text-shadow: 0 0 10px rgba(212,175,55,0.4);}
.header2, .header3 {letter-spacing: 1px;color: var(--gold-light);}
.event-title {font-size: 1.2rem;font-weight: bold;color: var(--gold-light);text-shadow: 0 0 6px rgba(212,175,55,0.3);}
.event-date {font-size: 0.95rem;color: #e5e7eb;opacity: 0.9;margin-bottom: 0.3rem;}

/* -----------------------------------------------------------
HERO BANNER
----------------------------------------------------------- */
.hero-banner {display: flex;align-items: center;justify-content: space-between;background: rgba(0,0,0,0.45);padding: 1.5rem 2rem;border-radius: 10px;border: 1px solid var(--gold-dark);box-shadow:0 0 15px rgba(0,0,0,0.6),inset 0 0 20px rgba(0,0,0,0.4);margin-bottom: 2rem;position: relative;}
.hero-text {flex: 1;text-align: center;padding-right: 1rem;}
.hero-text h1 {margin: 0;font-size: 2.6rem;}
.hero-subtitle {margin-top: 0.3rem;font-size: 1.2rem;color: #e5e7eb;text-shadow: 0 0 6px rgba(0,0,0,0.8);}
.hero-logo img {width: 160px;border-radius: 8px;filter: drop-shadow(0 0 12px rgba(212,175,55,0.4));}

/* -----------------------------------------------------------
BEMUTATKOZÁS
----------------------------------------------------------- */
.profile-photo,.hero-text {text-align: center;}
.profile-photo img,.about-photo img {box-shadow:0 0 15px rgba(0,0,0,0.6),0 0 20px rgba(212,175,55,0.25);border: 2px solid var(--gold-dark);border-radius: 8px;}
.profile-photo img {width: 180px;height: 180px;object-fit: cover;}
.about-section {display: flex;align-items: flex-start;gap: 2rem;}
.about-photo img {width: 220px;}
.about-text {flex: 1;}
.about-text h2 {margin-top: 0;}

/* -----------------------------------------------------------
LINK STÍLUSOK
----------------------------------------------------------- */
a {color: var(--gold-light);text-decoration: none;}
a:hover {color: var(--gold);text-shadow: 0 0 6px rgba(212,175,55,0.5);}

/* -----------------------------------------------------------
PANEL / SZEKCIÓ
----------------------------------------------------------- */
.section {background: rgba(0,0,0,0.45);border: 1px solid var(--gold-dark);border-radius: 10px;padding: 1.8rem;margin-top: 3rem;position: relative;overflow: visible;box-shadow:0 0 15px rgba(0,0,0,0.6),inset 0 0 20px rgba(0,0,0,0.4);}
.section::before,.section::after {content: "";position: absolute;left: 50%;width: 320px;height: 48px;transform: translateX(-50%);background-image: url('img/bg_ornament_01.png');background-size: contain;background-repeat: no-repeat;opacity: 0.6;pointer-events: none;animation: ornamentGlow 6s ease-in-out infinite;}
.section::before {top: -28px;}
.section::after {bottom: -28px;transform: translateX(-50%) scaleY(-1);}
@keyframes ornamentGlow {0%, 100% { filter: brightness(0.9); }50% { filter: brightness(1.2); }}

/* -----------------------------------------------------------
GALÉRIA
----------------------------------------------------------- */
.gallery {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 1.5rem;margin-top: 1.5rem;}
.gallery-item {position: relative;background: #1b2433;border: 2px solid var(--gold-dark);border-radius: 10px;padding: 0.6rem;overflow: hidden;box-shadow:0 0 15px rgba(0,0,0,0.6),inset 0 0 25px rgba(0,0,0,0.5);transition: 0.3s;}
.gallery-item::before,.gallery-item::after {content: "";position: absolute;width: 40px;height: 40px;background-image: url('img/bg_ornament_01.png');background-size: contain;background-repeat: no-repeat;opacity: 0.35;pointer-events: none;}
.gallery-item::before {top: -5px;left: -5px;}
.gallery-item::after {bottom: -5px;right: -5px;transform: rotate(180deg);}
.gallery-item img {width: 100%;height: 100%;object-fit: cover;border-radius: 6px;filter: brightness(0.85);animation: candleGlow 4.5s ease-in-out infinite;transition: 0.3s;}
.gallery-item:hover {border-color: var(--gold);box-shadow:0 0 25px rgba(212,175,55,0.4),inset 0 0 30px rgba(212,175,55,0.2);}
.gallery-item:hover img {filter: brightness(1.15);animation-duration: 2.5s;}
@keyframes candleGlow {0%, 100% { filter: brightness(0.85) blur(0px); }25% { filter: brightness(0.92) blur(0.3px); }50% { filter: brightness(1) blur(0.6px); }75% { filter: brightness(0.93) blur(0.2px); }}

/* -----------------------------------------------------------
LIGHTBOX
----------------------------------------------------------- */
.lightbox-overlay {position: fixed;inset: 0;background: rgba(0,0,0,0.85);backdrop-filter: blur(4px);display: flex;justify-content: center;align-items: center;z-index: 999;animation: fadeIn 0.3s;}
.lightbox-content {position: relative;max-width: 90%;max-height: 90%;padding: 1rem;background: #1b2433;border: 2px solid var(--gold-dark);border-radius: 12px;overflow: hidden;box-shadow:0 0 25px rgba(212,175,55,0.25),inset 0 0 30px rgba(0,0,0,0.6);animation: popIn 0.25s;}
.lightbox-content img {width: 100%;border-radius: 6px;filter: brightness(1.05);}
.lightbox-content::before,.lightbox-content::after {content: "";position: absolute;width: 60px;height: 60px;background-image: url('img/bg_ornament_01.png');background-size: contain;background-repeat: no-repeat;opacity: 0.35;pointer-events: none;}
.lightbox-content::before {top: -10px;left: -10px;}
.lightbox-content::after {bottom: -10px;right: -10px;transform: rotate(180deg);}
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}
@keyframes popIn {from { transform: scale(0.85); opacity: 0; }to { transform: scale(1); opacity: 1; }}
/* -----------------------------------------------------------
GALÉRIA SLIDESHOW
----------------------------------------------------------- */
.gallery-slideshow, .gallery-slideshow-section {display: none;position: relative;}
.slide-wrapper {overflow: hidden;border: 2px solid var(--gold-dark);border-radius: 10px;box-shadow: 0 0 15px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.5);}
.slide-wrapper img {width: 100%;display: none;border-radius: 8px;}
.slide-wrapper img.active {display: block;}
/* Navigációs nyilak */
.slide-nav { height: max-content; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--gold-dark); color: var(--gold-light); font-size: 2rem; padding: 0.4rem 0.8rem; border-radius: 8px; cursor: pointer; transition: 0.3s ease; position: relative; top: 40%; }
.slide-nav:hover {background: rgba(212,175,55,0.2);color: var(--gold);box-shadow: 0 0 10px rgba(212,175,55,0.4);}
.slide-nav.left { left: -1rem; }
.slide-nav.right { right: -1rem; }
/* -----------------------------------------------------------
TIMELINE + GYERTYALÁNG
----------------------------------------------------------- */
.timeline {position: relative;margin: 2rem 0;padding-left: 40px;}
.timeline::before {content: "";position: absolute;left: 20px;top: 0;bottom: 0;width: 3px;background: linear-gradient(to bottom, var(--gold-light), var(--gold-dark));box-shadow: 0 0 10px rgba(212,175,55,0.4);}
.timeline-content {margin-left:1rem;}
.timeline-item {position: relative;margin-bottom: 2.5rem;}
/* Gyertyaláng konténer */
.timeline-flame {position: absolute;left: -1.8rem;top: -1rem;width: 22px;height: 38px;pointer-events: none;}
/* Külső lángréteg */
.flame-outer {position: absolute;width: 22px;height: 38px;background: radial-gradient(circle at 50% 20%, #ffdca8, #ffb347, #ff7a1f, #d46a1f);border-radius: 50% 50% 35% 35% / 70% 70% 30% 30%;filter: blur(1px);opacity: 0.9;animation: flameOuterMove 2.8s infinite ease-in-out;transform-origin: 50% 90%;}
/* Belső lángmag */
.flame-inner {position: absolute;width: 12px;height: 24px;left: 50%;top: 6px;transform: translateX(-50%);background: radial-gradient(circle at 50% 30%, #fff, #fff6c7, #ffd27a);border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;filter: blur(0.5px);opacity: 0.95;animation: flameInnerMove 1.9s infinite ease-in-out;transform-origin: 50% 90%;}
/* Láng animációk */
@keyframes flameOuterMove {0%, 100% { transform: scale(1) skewX(2deg) skewY(3deg); filter: brightness(1); }25% { transform: scale(1.12) skewX(-2deg) skewY(-1deg); filter: brightness(1.25); }50% { transform: scale(0.92) skewX(1deg) skewY(2deg); filter: brightness(0.85); }75% { transform: scale(1.15) skewX(-1deg) skewY(-2deg); filter: brightness(1.3); }}
@keyframes flameInnerMove {0%, 100% { transform: translateX(-50%) scale(1); filter: brightness(1.1); }20% { transform: translateX(-50%) scale(1.18); filter: brightness(1.4); }40% { transform: translateX(-50%) scale(0.9); filter: brightness(0.9); }60% { transform: translateX(-50%) scale(1.22); filter: brightness(1.5); }80% { transform: translateX(-50%) scale(0.95); filter: brightness(1); }}

/* -----------------------------------------------------------
MŰSOROK / SZOLGÁLTATÁSOK
----------------------------------------------------------- */
.shows {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 2rem;margin-top: 2rem;}
.show-card {background: rgba(0,0,0,0.35);border: 1px solid var(--gold-dark);border-radius: 10px;padding: 1.5rem;text-align: center;box-shadow:0 0 15px rgba(0,0,0,0.5),inset 0 0 20px rgba(0,0,0,0.4);position: relative;transition: 0.3s ease;}
.show-card:hover {border-color: var(--gold);box-shadow:0 0 25px rgba(212,175,55,0.4),inset 0 0 25px rgba(212,175,55,0.2);transform: translateY(-4px);}
.show-card h3 {font-family: "Cinzel", serif;color: var(--gold-light);margin-top: 0.5rem;margin-bottom: 0.8rem;font-size: 1.4rem;}
.show-card p {color: #d1d5db;line-height: 1.6;font-size: 1.05rem;}
.show-icon {font-size: 2.4rem;margin-bottom: 0.5rem;text-shadow: 0 0 10px rgba(212,175,55,0.4);}

/* -----------------------------------------------------------
MŰSOROK – CAROUSEL
----------------------------------------------------------- */
.show-card {background: rgba(0,0,0,0.55);border: 1px solid var(--gold-dark);border-radius: 12px;padding: 1.8rem 1.6rem;text-align: center;max-width: fit-content;margin: 0 auto;box-shadow:0 0 18px rgba(0,0,0,0.6),inset 0 0 25px rgba(0,0,0,0.45);backdrop-filter: blur(2px);transition: 0.35s ease;position: absolute;top: 0;left: 0;width: 100%;opacity: 0;visibility: hidden;pointer-events: none;transform: scale(0.9);}
.show-card.active {opacity: 1;visibility: visible;pointer-events: auto;position: relative;transform: scale(1);}
.show-card:hover {border-color: var(--gold);box-shadow:0 0 28px rgba(212,175,55,0.35),inset 0 0 30px rgba(212,175,55,0.25);transform: translateY(-4px);}.show-icon {font-size: 2.8rem;margin-bottom: 0.4rem;text-shadow: 0 0 12px rgba(212,175,55,0.45);}
.show-card h3 {font-family: "Cinzel", serif;font-size: 1.55rem;color: var(--gold-light);margin: 0.4rem 0 1rem 0;letter-spacing: 1px;text-shadow: 0 0 8px rgba(212,175,55,0.35);}
.show-card p {color: #d8d8d8;line-height: 1.65;font-size: 1.1rem;max-width: 90%;margin: 0 auto;}
.show-carousel {position: relative;display: flex;align-items: center;justify-content: center;margin-top: 2rem;}
.show-card-wrapper {width: 100%;max-width: 420px;width: 55%;padding:1rem;overflow: hidden;position: relative;}
.show-nav {background: rgba(0,0,0,0.4);border: 1px solid var(--gold-dark);color: var(--gold-light);font-size: 2rem;padding: 0.4rem 0.8rem;border-radius: 8px;cursor: pointer;transition: 0.3s ease;}
.show-nav:hover {background: rgba(212,175,55,0.2);color: var(--gold);box-shadow: 0 0 10px rgba(212,175,55,0.4);}

/* -----------------------------------------------------------
KAPCSOLAT – VIKTORIÁNUS ŰRLAP
----------------------------------------------------------- */
.contact-form {display: grid;gap: 1.4rem;margin-top: 1.5rem;}
.form-group {display: flex;flex-direction: column;}
.form-group label {font-family: "Cinzel", serif;color: var(--gold-light);margin-bottom: 0.4rem;letter-spacing: 0.5px;font-size: 1.1rem;}
.contact-form input,.contact-form select,.contact-form textarea {background: rgba(0,0,0,0.35);border: 1px solid var(--gold-dark);border-radius: 8px;padding: 0.7rem 0.9rem;color: #e5e5e5;font-size: 1rem;box-shadow:inset 0 0 10px rgba(0,0,0,0.5),0 0 8px rgba(0,0,0,0.4);transition: 0.3s ease;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {outline: none;border-color: var(--gold);box-shadow:0 0 12px rgba(212,175,55,0.4),inset 0 0 12px rgba(212,175,55,0.2);}
.contact-submit {margin-top: 0.5rem;padding: 0.9rem 1.2rem;background: rgba(0,0,0,0.5);border: 1px solid var(--gold-dark);border-radius: 10px;color: var(--gold-light);font-family: "Cinzel", serif;font-size: 1.2rem;cursor: pointer;text-shadow: 0 0 6px rgba(212,175,55,0.4);transition: 0.3s ease;}
.contact-submit:hover {background: rgba(212,175,55,0.15);border-color: var(--gold);color: var(--gold);box-shadow:0 0 18px rgba(212,175,55,0.4),inset 0 0 20px rgba(212,175,55,0.2);transform: translateY(-2px);}

/* -----------------------------------------------------------
VIKTORIÁNUS FOOTER
----------------------------------------------------------- */
.footer {width:90%;margin-top: 4rem;padding: 2.5rem 1.5rem 4rem;background: rgba(0,0,0,0.55);border-top: 1px solid var(--gold-dark);box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.4);position: relative;overflow: visible;}
.footer::before,.footer::after {content: "";position: absolute;left: 50%;width: 300px;height: 40px;transform: translateX(-50%);background-image: url('img/bg_ornament_01.png');background-size: contain;background-repeat: no-repeat;opacity: 0.5;pointer-events: none;animation: ornamentGlow 6s ease-in-out infinite;}
.footer::before { top: -20px; }.footer::after { bottom: -20px; transform: translateX(-50%) scaleY(-1); }
.footer-inner {display: flex;justify-content: space-between;gap: 3rem;max-width: 1100px;margin: 0 auto;flex-wrap: wrap;}
.footer-section h3 {font-family: "Cinzel", serif;color: var(--gold-light);margin-bottom: 0.8rem;font-size: 1.3rem;text-shadow: 0 0 6px rgba(212,175,55,0.4);}
.footer-section a {display: block;color: #e5e5e5;margin-bottom: 0.4rem;text-decoration: none;transition: 0.3s ease;}
.footer-section a:hover {color: var(--gold);text-shadow: 0 0 6px rgba(212,175,55,0.4);}
/* SVG ikonok */
.icon-svg {width: 22px;height: 22px;fill: var(--gold-light);margin-right: 8px;vertical-align: middle;filter: drop-shadow(0 0 6px rgba(212,175,55,0.4));transition: 0.3s ease;}
.social-icon:hover .icon-svg {fill: var(--gold);filter: drop-shadow(0 0 10px rgba(212,175,55,0.6));}

/* -----------------------------------------------------------
BACK-TO-TOP
----------------------------------------------------------- */
.back-to-top {position: absolute;bottom: 1rem;right: 1rem;background: rgba(0,0,0,0.5);border: 1px solid var(--gold-dark);color: var(--gold-light);font-family: "Cinzel", serif;padding: 0.6rem 1rem;border-radius: 8px;cursor: pointer;transition: 0.3s ease;text-shadow: 0 0 6px rgba(212,175,55,0.4);}
.back-to-top:hover {background: rgba(212,175,55,0.2);color: var(--gold);box-shadow: 0 0 12px rgba(212,175,55,0.4);}

/* -----------------------------------------------------------
VIDEO LEJÁTSZÓ
----------------------------------------------------------- */
.video-frame {max-width: 900px;margin: 1.5rem auto 0;background: rgba(0,0,0,0.55);border: 1px solid var(--gold-dark);border-radius: 12px;padding: 0.8rem;box-shadow: 0 0 18px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.45);position: relative;overflow: hidden;}
.video-frame::before,.video-frame::after {content: "";position: absolute;width: 70px;height: 70px;background-image: url("img/bg_ornament_01.png");background-size: contain;background-repeat: no-repeat;opacity: 0.4;pointer-events: none;}
.video-frame::before {top: -10px;left: -10px;}
.video-frame::after {bottom: -10px;right: -10px;transform: rotate(180deg);}
.video-player {width: 100%;display: block;border-radius: 8px;box-shadow: 0 0 12px rgba(0,0,0,0.8);}

/* -----------------------------------------------------------
MOBIL
----------------------------------------------------------- */
@media only screen and (max-width: 996px){
/* -----------------------------------------------------------
VIKTORIÁNUS STICKY NAVIGÁCIÓ
----------------------------------------------------------- */
    .nav ul {gap: 1rem;flex-wrap: wrap;}
    .nav a {font-size: 1rem;}

/* -----------------------------------------------------------
TEXT
----------------------------------------------------------- */
    .header1 { font-size: 1.8rem !important; }
    .header2 { font-size: 1.6rem !important; }
    .header3 { font-size: 1.4rem !important; }
    .basefont { font-size: 1.2rem !important; }
    .event-title.header3 {font-size:1.2rem !important;}
/* -----------------------------------------------------------
LAYOUT
----------------------------------------------------------- */    
    .layout {grid-template-columns: 1fr; padding: 0 1rem; gap: 0;}
/* -----------------------------------------------------------
SECTION
----------------------------------------------------------- */
    .section { padding: 1.2rem; }
    .about-section {text-align: center;}
    .about-photo img {width: 180px; margin: 0 auto;}
/* -----------------------------------------------------------
GALLERY
----------------------------------------------------------- */
    .gallery, .gallery-section { display: none; }
    .gallery-slideshow, .gallery-slideshow-section {display: flex; position: relative; padding: 1.2rem; }
/* -----------------------------------------------------------
HERO
----------------------------------------------------------- */
    .hero-text {padding: 0;}
    .hero-banner {flex-direction: column-reverse; text-align: center; padding: 1.5rem;}
    .hero-logo img {width: 100%;}
    .hero-text {display:none;}
/* -----------------------------------------------------------
SIDEBAR
----------------------------------------------------------- */
    .sidebar-timeline {position: relative; top: 0; transform: none; margin-left: 0; max-width: 100%;}
/* -----------------------------------------------------------
SHOW-CARD
----------------------------------------------------------- */
    .show-card-wrapper {max-width: unset; width: 100%; padding: 1rem; overflow: hidden; position: relative;}

/* -----------------------------------------------------------
VIKTORIÁNUS FOOTER
----------------------------------------------------------- */
    .footer-inner {flex-direction: column;text-align: center;gap: 2rem;}

/* -----------------------------------------------------------
BACK-TO-TOP
----------------------------------------------------------- */
    .footer-inner {flex-direction: column;text-align: center;gap: 2rem;}
    .back-to-top {right: 50%;transform: translateX(50%);}
}
