/*
Theme Name: Next Dekor Custom
Theme URI: https://nd.pppro.hu
Author: Next Dekor
Description: Prémium sablon vízjellel, fájlfeltöltéssel, animációkkal és Gyakori Kérdésekkel.
Version: 1.5.0
*/

:root {
  --primary: #667a50;
  --primary-dark: #4e5e3c;
  --dark: #121416;
  --dark-surface: #1e2227;
  --gray-light: #f4f5f7;
  --text-main: #22262a;
  --text-muted: #5e6670;
  --radius: 12px;
  --transition: all 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: var(--gray-light); color: var(--text-main); line-height: 1.6; overflow-x: hidden; position: relative; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* FIX HÁTTÉR VÍZJEL */
body::before { content: ''; position: fixed; inset: 0; z-index: -999; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20 20 L80 80" stroke="%23111111" stroke-width="12" stroke-linecap="round"/><path d="M80 20 Q50 50 20 80" stroke="%23667a50" stroke-width="12" stroke-linecap="round" fill="none"/></svg>'); background-repeat: no-repeat; background-position: center center; background-size: 75vh; opacity: 0.04; }

/* EXTRA: GÖRGETÉSI FOLYAMATSÁV */
#scroll-progress { position: fixed; top: 0; left: 0; height: 4px; background: var(--primary); z-index: 1005; width: 0%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; transition: width 0.1s; }

/* EXTRA: BEÚSZÓ ANIMÁCIÓK (SCROLL REVEAL) */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.services-grid .service-card:nth-child(1), .features-grid .feature-card:nth-child(1) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(2), .features-grid .feature-card:nth-child(2) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(3), .features-grid .feature-card:nth-child(3) { transition-delay: 0.3s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.4s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.5s; }
.services-grid .service-card:nth-child(6) { transition-delay: 0.6s; }

/* INTRO ANIMÁCIÓ */
#intro-overlay { position: fixed; inset: 0; background: #fff; z-index: 99999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; }
#intro-logo-box { width: 280px; transition: transform 0.8s ease, opacity 0.5s ease; }
body.intro-running { overflow: hidden; }
body.intro-animating #intro-logo-box { transform: translate(-38vw, -42vh) scale(0.35); opacity: 0; }
body.intro-complete #intro-overlay { opacity: 0; pointer-events: none; display: none; }

/* FEJLÉC ÉS NAVIGÁCIÓ */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 75px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid #eaeaea; z-index: 1000; display: flex; align-items: center; }
.header-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.site-logo img { height: 46px; }
.mobile-toggle { display: none !important; }

/* MENÜ ANIMÁCIÓK */
.main-nav ul { display: flex; list-style: none; gap: 10px; align-items: center; } 
.main-nav a { font-weight: 600; font-size: 15px; text-transform: uppercase; color: var(--dark); display: flex; align-items: center; position: relative; }
.nav-item-animated { display: flex; align-items: center; position: relative; padding: 8px 16px; padding-right: 46px; border-radius: 8px; transition: background-color 0.3s ease; }
.nav-item-animated.logo-hover { padding-right: 71px; } 
.nav-item-animated.contact-hover { padding-right: 66px; } 
.nav-icon { position: absolute; left: 16px; opacity: 0; transform: translateX(-15px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); height: 20px; display: flex; align-items: center; gap: 4px; color: var(--primary); pointer-events: none; }
.nav-icon.logo-icon img { height: 20px; width: auto; mix-blend-mode: multiply; transition: all 0.3s ease; }
.nav-text { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s; display: inline-block; }
.nav-item-animated:hover { background-color: var(--primary); }
.nav-item-animated:hover .nav-icon { opacity: 1; transform: translateX(0); color: #ffffff; }
.nav-item-animated:hover .nav-text { transform: translateX(28px); color: #ffffff; }
.nav-item-animated.logo-hover:hover .nav-text { transform: translateX(50px); } 
.nav-item-animated.contact-hover:hover .nav-text { transform: translateX(45px); }
.nav-item-animated:hover .logo-icon img { filter: grayscale(100%) contrast(1000%) invert(100%); mix-blend-mode: screen; }

/* Nyomtató almenü */
.has-printer { position: relative; padding-bottom: 25px; margin-bottom: -25px; cursor: pointer; }
.printer-trigger { position: relative; width: 155px; height: 40px; display: flex; justify-content: center; align-items: center; overflow: visible; border-radius: 8px; transition: background-color 0.3s ease; }
.trigger-text { position: absolute; transition: all 0.3s ease; color: var(--dark); font-weight: 600; font-size: 15px; }
.trigger-icon { position: absolute; width: 26px; height: 26px; color: var(--primary); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; }
.has-printer:hover .printer-trigger { background-color: var(--primary); }
.has-printer:hover .trigger-text { opacity: 0; transform: translateY(-10px); }
.has-printer:hover .trigger-icon { opacity: 1; transform: translateY(0); color: #ffffff; }
.printer-ribbon { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%) scaleY(0); transform-origin: top center; width: 250px; background: #fff; box-shadow: 0 15px 30px rgba(0,0,0,0.1); border: 1px solid #e1e4e8; border-bottom: 4px dashed var(--primary); transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease; opacity: 0; pointer-events: none; z-index: 1010; }
.has-printer:hover .printer-ribbon { transform: translateX(-50%) scaleY(1); opacity: 1; pointer-events: auto; }
.printer-ribbon ul { display: flex; flex-direction: column; padding: 5px 0; gap: 0; }
.printer-ribbon li { border-bottom: 1px dashed #f0f0f0; }
.printer-ribbon a { padding: 12px 18px; font-size: 13px; text-transform: none; border-radius: 0; }
.printer-ribbon a:hover { background: #f9f9f9; padding-left: 22px; color: var(--primary); }

/* ALAP SZEKCIÓK & CÍMSOROK FILCTOLL EFFEKTTEL */
section { padding: 90px 0; }
.hero-section { padding-top: 130px; }
.hero-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; text-align: left; }
.hero-img { width: 100%; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); object-fit: cover; aspect-ratio: 1 / 1; }
.hero-title { font-size: 3rem; font-weight: 900; margin-bottom: 20px; line-height: 1.2; }

.section-head { text-align: center; margin-bottom: 50px; }
.section-title { font-size: 2.3rem; font-weight: 800; margin-bottom: 10px; position: relative; display: inline-block; z-index: 1; }
.section-title::after { content: ''; position: absolute; left: -2%; bottom: 0px; width: 104%; height: 9px; background: var(--primary); z-index: -1; border-radius: 8px 20px 8px 30px; transform: rotate(-1.5deg); opacity: 0.85; clip-path: polygon(0 15%, 100% 40%, 97% 85%, 2% 100%); }

.btn { display: inline-flex; justify-content: center; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; border: none; transition: var(--transition); text-align: center; font-size: 14px; }
.btn-primary { color: #fff; background: var(--primary-dark); }
.btn-primary:hover { background: var(--primary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,122,80,0.3); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,122,80,0.3); }

/* FOTÓREALISZTIKUS KÁRTYÁK */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; margin-top: 20px; }
.service-card { padding: 30px; display: flex; flex-direction: column; position: relative; z-index: 1; margin-bottom: 20px; border-radius: 8px; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 15px; position: relative; z-index: 2; line-height: 1.3; }
.service-card ul { list-style: none; margin-bottom: 25px; flex-grow: 1; position: relative; z-index: 2; }
.service-card li { padding-left: 20px; margin-bottom: 10px; font-size: 0.95rem; font-weight: 500; }
.service-card li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 900; }
.card-actions { display: flex; gap: 10px; margin-top: 15px; }
.card-actions .btn { flex: 1; padding: 10px 5px; }

.card-cegtabla { background: repeating-linear-gradient(45deg, #e3e3e3, #e3e3e3 5px, #ebebeb 5px, #ebebeb 10px); border: 4px solid #b3b3b3; box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 10px 25px rgba(0,0,0,0.2); }
.card-cegtabla h3 { color: #444; text-shadow: 1px 1px 0px #fff, -1px -1px 0px #aaa; letter-spacing: 1px; font-weight: 900; }
.card-cegtabla::before, .card-cegtabla::after { content: ''; position: absolute; bottom: -40px; width: 16px; height: 45px; background: linear-gradient(to right, #444, #777, #333); z-index: -1; border-radius: 0 0 4px 4px; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); }
.card-cegtabla::before { left: 40px; } .card-cegtabla::after { right: 40px; }

.card-autofolia { background: linear-gradient(135deg, #1f2530 0%, #11151c 50%, #2b3340 100%); color: #fff; border-radius: 20px 60px 10px 10px; border-left: 6px solid var(--primary); padding-bottom: 50px; box-shadow: inset 0 20px 20px rgba(255,255,255,0.05), 0 15px 30px rgba(0,0,0,0.3); }
.card-autofolia h3 { color: #fff; font-style: italic; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--primary); text-transform: uppercase; font-weight: 900; }
.card-autofolia li::before { color: #9bb27c; }
.card-autofolia::after { content: ''; position: absolute; bottom: -25px; right: 30px; width: 70px; height: 70px; background: radial-gradient(circle, #888 20%, #222 25%, #111 60%, #000 100%); border: 4px solid #000; border-radius: 50%; box-shadow: 0 10px 15px rgba(0,0,0,0.6), inset 0 5px 10px rgba(255,255,255,0.2); }

.card-uvegfolia { background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); border: 15px solid #fff; border-radius: 4px; box-shadow: inset 0 0 15px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.1); }
.card-uvegfolia h3 { color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.5); font-weight: 800; }
.card-uvegfolia::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; border: 2px solid rgba(0,0,0,0.03); pointer-events: none; }
.card-uvegfolia::after { content: ''; position: absolute; top: 50%; right: 15px; width: 12px; height: 60px; background: linear-gradient(to right, #d4d4d4, #fdfdfd, #a3a3a3); border-radius: 6px; box-shadow: 2px 4px 6px rgba(0,0,0,0.3), inset -1px -1px 2px rgba(0,0,0,0.2); transform: translateY(-50%); }

.card-belyegzo { background: #fdfdfd; border: 1px solid #ddd; border-radius: 12px; box-shadow: inset 0 0 30px rgba(0,0,0,0.03), 0 10px 25px rgba(0,0,0,0.1); position: relative; border-bottom: 18px solid #555; }
.card-belyegzo h3 { display: inline-block; color: #c92a2a; border: 3px solid #c92a2a; border-radius: 4px; padding: 5px 10px; transform: rotate(-3deg); font-family: 'Courier New', monospace; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; margin-top: 10px; font-weight: 900; max-width: 100%; box-sizing: border-box; word-wrap: break-word; font-size: clamp(1.1rem, 5vw, 1.5rem); }
.card-belyegzo::before { content: ''; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); width: 65%; height: 10px; background: linear-gradient(to bottom, #a02020, #701010); border-radius: 0 0 8px 8px; box-shadow: 0 5px 10px rgba(0,0,0,0.3); }

.card-polonyomtatas { background-color: #f1f3f5; background-image: radial-gradient(#d1d5db 1.5px, transparent 1.5px); background-size: 8px 8px; border-radius: 8px 8px 15px 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); position: relative; border-top: 30px solid #e9ecef; margin-top: 15px; }
.card-polonyomtatas h3 { font-family: 'Arial Black', Impact, sans-serif; text-transform: uppercase; color: #222; text-shadow: 1px 1px 0 rgba(255,255,255,0.8); letter-spacing: 1px; }
.card-polonyomtatas::before { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 120px; height: 45px; background: var(--gray-light); border-radius: 0 0 60px 60px; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.04); }
.card-polonyomtatas::after { content: ''; position: absolute; top: -10px; left: -15px; right: -15px; height: 90px; background-color: #e9ecef; border-radius: 15px 15px 40px 40px; z-index: -1; box-shadow: 0 8px 15px rgba(0,0,0,0.06); background-image: radial-gradient(#d1d5db 1.5px, transparent 1.5px); background-size: 8px 8px; }

.card-oklevel { background: #fffdf8; border: 2px solid #e8e3d3; position: relative; box-shadow: -6px 6px 0 -1px #fffdf8, -6px 6px 0 1px #d6d0ba, -12px 12px 0 -2px #fffdf8, -12px 12px 0 1px #b5b099, 0 15px 25px rgba(0,0,0,0.1); }
.card-oklevel h3 { font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #927534; text-align: center; font-size: 1.8rem; border-bottom: 1px solid #e8e3d3; padding-bottom: 10px; }

/* RÓLUNK SZEKCIÓ */
.about-box { background: #fff; padding: 40px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; margin-bottom: 40px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.feature-card { background: #fff; padding: 40px 30px; border-radius: var(--radius); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: var(--transition); border-bottom: 4px solid var(--primary); }
.feature-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.feature-icon { width: 60px; height: 60px; color: var(--primary); margin: 0 auto 20px; }
.feature-card h4 { font-size: 1.3rem; margin-bottom: 15px; color: var(--dark); font-weight: 800; }
.feature-card p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* REFERENCIÁK SLIDER SZEKCIÓ */
.portfolio-section { background: #fff; }
.portfolio-slider-wrapper { position: relative; display: flex; align-items: center; margin-top: 40px; }
.portfolio-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; scroll-behavior: smooth; flex: 1; padding-bottom: 15px; scrollbar-width: none; }
.portfolio-slider::-webkit-scrollbar { display: none; }
.portfolio-item { flex: 0 0 calc(33.333% - 14px); scroll-snap-align: start; min-width: 280px; position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #e0e0e0; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.portfolio-item img, .portfolio-item video, .portfolio-item iframe { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; border: none; }
.portfolio-item:hover img, .portfolio-item:hover video { transform: scale(1.08); }
.portfolio-overlay { position: absolute; inset: 0; background: rgba(18, 20, 22, 0.6); opacity: 0; display: flex; justify-content: center; align-items: center; transition: opacity 0.4s ease; pointer-events: none; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay span { color: #fff; font-size: 1.2rem; font-weight: 700; padding: 10px 20px; border: 2px solid #fff; border-radius: 6px; transform: translateY(20px); transition: transform 0.4s ease; text-align: center; }
.portfolio-item:hover .portfolio-overlay span { transform: translateY(0); }
.slider-btn { background: var(--primary); color: #fff; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 28px; cursor: pointer; position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.slider-btn:hover { opacity: 1; background: var(--primary-dark); }
.prev-btn { left: -20px; } .next-btn { right: -20px; }

/* EXTRA: GYAKORI KÉRDÉSEK (FAQ) SZEKCIÓ */
.faq-section { background: rgba(237, 240, 245, 0.7); }
.faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-item { background: #fff; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); overflow: hidden; border-left: 4px solid var(--primary); transition: var(--transition); }
.faq-question { padding: 20px; font-weight: 700; font-size: 1.1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--dark); }
.faq-question::after { content: '+'; font-size: 1.5rem; color: var(--primary); transition: transform 0.3s ease; }
.faq-item.active .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; padding: 0 20px; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; color: var(--text-muted); }
.faq-item.active .faq-answer { max-height: 300px; padding: 0 20px 20px 20px; }

/* KAPCSOLAT SZEKCIÓ & MODÁLOK */
.contact-section { background: var(--dark); color: #fff; }
.contact-section .section-title { color: #fff; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }
.contact-card { background: var(--dark-surface); padding: 40px 20px; border-radius: var(--radius); text-align: center; transition: var(--transition); border: 1px solid #2a3038; }
.contact-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.contact-icon { width: 70px; height: 70px; color: var(--primary); margin: 0 auto 20px; }
.contact-card h4 { font-size: 1.4rem; margin-bottom: 10px; color: #fff; }
.contact-card p, .contact-card a { font-size: 1.1rem; color: #a1aab5; display: block; margin-top: 10px; }
.contact-card a:hover { color: #fff; }

dialog { border: none; border-radius: var(--radius); padding: 30px; max-width: 600px; width: 90%; margin: auto; box-shadow: 0 25px 60px rgba(0,0,0,0.3); }
dialog::backdrop { background: rgba(18, 20, 22, 0.7); backdrop-filter: blur(4px); }
.modal-close-btn { float: right; font-size: 26px; border: none; background: none; cursor: pointer; color: #555; }
.modal-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 20px; }
.modal-img { width: 100%; max-height: 250px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }

.contact-form label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }
.contact-form input[type="file"] { width: 100%; margin-bottom: 15px; padding: 8px; border: 1px dashed #aaa; border-radius: 6px; background: #f9f9f9; }
.contact-form button { width: 100%; font-size: 1.1rem; }
.success-msg { background: #d4edda; color: #155724; padding: 15px; border-radius: 6px; margin-bottom: 20px; text-align: center; font-weight: bold; display: none; }

section[id], .service-card[id] { scroll-margin-top: 110px; }

/* MOBIL NÉZET */
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .site-header { height: 68px; }
  .mobile-toggle { display: block !important; font-size: 26px; background: none; border: none; color: var(--dark); cursor: pointer; }
  .main-nav { position: fixed; top: 68px; left: 0; width: 100%; height: calc(100vh - 68px); background: #fff; display: none; flex-direction: column; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); overflow-y: auto; }
  .main-nav.active { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { padding: 15px 0; border-bottom: 1px solid #eee; width: 100%; }
  
  .nav-icon { display: none !important; }
  .nav-item-animated:hover .nav-text { transform: none !important; }
  .has-printer { padding-bottom: 0; margin-bottom: 0; }
  .printer-trigger { width: 100%; justify-content: flex-start; }
  .trigger-text { position: static; }
  .trigger-icon { display: none; }
  .printer-ribbon { position: static; transform: none; opacity: 1; pointer-events: auto; width: 100%; box-shadow: none; border: none; border-left: 3px solid var(--primary); display: none; padding-left: 14px; }
  .has-printer.active .printer-ribbon { display: block; }
  
  .card-actions { flex-direction: column; }
  .portfolio-item { flex: 0 0 calc(50% - 10px); }
  .slider-btn { display: none; }
}
@media (max-width: 600px) { .portfolio-item { flex: 0 0 100%; } }