/* 
 * Kert EKG - Global Styles & Diagnostic Navigation Engine
 * Verzió: 8.6 (Letisztult, Precíziós Kiadás)
 */

:root {
    /* Globális változók a könnyebb módosíthatóságért */
    --accent: #22c55e;
    --nav-height: 72px; 
}

/* HTML és Body alap stílusok */
html {
    /* A natív smooth scroll kikapcsolva a GSAP motor tűpontos vezérlése miatt */
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #0a0a0a;
}

body {
    background-color: #0a0a0a;
    color: white;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    overflow-x: hidden;
}

/* Speciális állapotok görgetés tiltásához (Modal/Mobil Menü) */
body.menu-open,
body.modal-open {
    overflow: hidden;
}

/* Biztosítja, hogy a fix navigációs sáv ne takarja ki a szekciók tetejét ugráskor */
section[id] { 
    scroll-margin-top: var(--nav-height); 
}

/* ======================================================================= */
/* ÚJ: EKG SCAN LINE ÉS DIAGNOSZTIKAI EFFEKTEK                             */
/* ======================================================================= */

/* A navigáció alján végigfutó zöld diagnosztikai vonal */
#nav-scan-line {
    pointer-events: none;
    z-index: 60;
    /* Kezdetben láthatatlan és nulla szélességű */
    transition: opacity 0.3s ease;
}

/* EKG Impulzus animáció a szekciók megérkezésekor */
@keyframes diagnostic-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.005); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

.section-pulse-arrival {
    animation: diagnostic-pulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ======================================================================= */

/* Sötét téma a Google Térképhez */
.google-map-dark { 
    filter: grayscale(100%) invert(90%) contrast(90%); 
}

/* Az "előtte-utána" csúszka fogantyújának érintési viselkedése */
.slider-handle { 
    touch-action: none; 
}

/* Hero cím betűközének finomhangolása */
.hero-title { 
    letter-spacing: -0.04em; 
}

/* A hero tartalmának reszponzív padding beállítása */
.hero-content-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Kijelölés színének beállítása (Céges zöld) */
::selection { 
    background: var(--accent); 
    color: #000; 
}

/* Elmosott háttér effekt a navigációs sávhoz */
nav { 
    -webkit-backdrop-filter: blur(12px); 
}

/* --- Általános segédosztályok --- */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
    position: relative; 
    padding: 8px 0; 
}
.nav-link:hover {
    color: var(--accent);
}

.form-input {
    width: 100%;
    margin-top: 0.5rem;
    background-color: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    padding: 0.75rem;
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.social-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.social-icon:hover {
    background-color: var(--accent);
    color: #0a0a0a;
}

.footer-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    position: relative;
    padding-bottom: 0.5rem;
}
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    height: 2px;
    background-color: var(--accent);
}

.footer-link-list {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #a0a0a0;
}
.footer-link {
    transition: color 0.2s;
}
.footer-link:hover {
    color: var(--accent);
}

/* --- Animációk --- */
@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.5)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.9)); transform: scale(1.03); }
}
.logo-pulse {
    animation: pulse-glow 4s ease-in-out infinite;
}

.footer-logo-glow {
    filter: drop-shadow(0 0 12px rgba(100, 255, 150, 0.5));
    transition: filter 0.3s ease-in-out;
}
.footer-logo-glow:hover {
    filter: drop-shadow(0 0 20px rgba(100, 255, 150, 0.8));
}

/* --- MENÜ EFFEKTEK --- */
@keyframes lightning-flash {
    0% { border-top-color: transparent; text-shadow: 0 0 5px rgba(139, 195, 255, 0); }
    50% { border-top-color: rgba(191, 219, 254, 0.8); text-shadow: 0 0 15px rgba(139, 195, 255, 0.7); }
    100% { border-top-color: transparent; text-shadow: 0 0 5px rgba(139, 195, 255, 0); }
}
.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(to top, rgba(34, 197, 94, 0.7), transparent);
    transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-link:hover::after { transform: scaleY(1); }
.nav-link:active { animation: lightning-flash 0.4s ease-out; }

/* --- Mobil Menü Stílusok --- */
#mobile-menu-panel {
    position: fixed; top: 0; bottom: 0; right: 0; width: 70%; max-width: 320px;
    background-color: #101010; border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
}
#mobile-menu-panel.is-open { transform: translateX(0); }
#menu-overlay {
    position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    z-index: 99; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
#menu-overlay.is-open { opacity: 1; pointer-events: auto; }
@keyframes side-glow-pulse {
    0%, 100% { box-shadow: 0 0 10px -5px rgba(34, 197, 94, 0.6); }
    50% { box-shadow: 0 0 25px -5px rgba(34, 197, 94, 0.9); }
}
#menu-glow-bar {
    position: fixed; top: 0; right: 0; width: 3px; height: 100vh;
    background: rgba(34, 197, 94, 0.4); z-index: 30; pointer-events: none;
    animation: side-glow-pulse 3s ease-in-out infinite;
}

/* --- MODAL (FELUGRÓ ABLAK) ÁLTALÁNOS STÍLUSOK --- */
.modal-container {
    position: fixed; inset: 0; z-index: 110; display: flex;
    align-items: center; justify-content: center; padding: 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out;
}
.modal-container.is-open { opacity: 1; pointer-events: auto; }
.modal-overlay {
    position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px); cursor: pointer;
}
.modal-content-box {
    position: relative; z-index: 111; background-color: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem;
    padding: 1.5rem 2rem; width: 100%;
    max-width: 64rem; 
    max-height: 90vh; overflow-y: auto;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease-in-out;
}
.modal-container.is-open .modal-content-box { transform: scale(1) translateY(0); }

/* NAGYMÉRETŰ MODALOK (Pl. Folyamat, Történetünk) */
#process-modal-content-box,
#story-modal-content-box,
#gallery-modal-content-box {
    max-width: 80rem; 
    padding: 2rem 2.5rem;
}

/* --- GALÉRIA STÍLUSOK (MODAL-ON BELÜL) --- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.filter-btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a0a0a0;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.filter-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.filter-btn.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #0a0a0a;
}

/* --- Lábléc Stílusok --- */
.design-text { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
.dropx-link {
    font-family: 'Syne', sans-serif; font-weight: 600; color: #a0a0a0;
    transition: color 0.3s; position: relative; display: inline-block;
}
.dropx-link span { font-weight: 800; color: #ffffff; transition: color 0.3s; }
.dropx-link::after {
    content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px;
    bottom: -4px; left: 0; background-color: var(--accent);
    transform-origin: bottom right; transition: transform 0.3s ease-out;
}
.dropx-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }
@keyframes dropx-glow {
    0% { text-shadow: 0 0 4px rgba(34, 197, 94, 0); }
    50% { text-shadow: 0 0 12px rgba(34, 197, 94, 0.8); }
    100% { text-shadow: 0 0 4px rgba(34, 197, 94, 0); }
}
.dropx-link:hover span { animation: dropx-glow 2s ease-in-out infinite; color: var(--accent); }

/* --- RESZPONZÍV TÖRÉSPONTOK --- */
@media (max-width: 767px) {
    .hero-title { font-size: 2.25rem; line-height: 1; }
    h2 { font-size: 2.25rem; line-height: 1.1; }
    section { padding-top: 5rem; padding-bottom: 5rem; }
    #rolunk .grid { gap: 3rem; }
    .footer-bottom-text-left, .footer-bottom-text-right { text-align: center; }
}