/* ═══════════════════════════════════════════════════════════════
   DJ Martin — layout.css
   Nav (+hamburger), hero (+effektek), stats, szekciók, rácsok,
   galéria, kapcsolat grid, footer, RESPONSIVE szabályok a végén
   ═══════════════════════════════════════════════════════════════ */

/* ── NAVIGATION ────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 40px;
  background: rgba(4,12,26,0.84);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border-bottom: 1px solid rgba(59,201,218,0.12);
  box-shadow: 0 4px 32px rgba(4,12,26,0.45);
}
/* Logo */
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0;
}
.brand-logo { flex-shrink: 0; display: block; }
.brand-text  { display: flex; flex-direction: column; gap: 2px; }
.brand-name  {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 600; letter-spacing: 0.3px; line-height: 1;
  color: var(--gold-light);
}
.brand-name .dj  { color: #fff; font-weight: 300; font-style: italic; }
.brand-name .hu  { color: var(--teal-light); font-weight: 400; }
.brand-tagline   {
  font-size: 0.60rem; color: var(--muted); letter-spacing: 1px;
  text-transform: uppercase; line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.62);
  padding: 0 15px; border-radius: 999px; border: 1px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.nav-links a:hover {
  color: #fff; background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Hamburger — csak mobilon látszik */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; transition: background .2s, border-color .2s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(59,201,218,0.35); }
.nav-toggle svg { display: block; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

/* ── HERO — középre igazított, teljes szélességű háttérképpel ── */
.hero {
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: center; justify-content: center;
  padding: 100px 24px 80px;
  position: relative; overflow: hidden;
  text-align: center;
}
/* Teal glare hatás a hero közepén */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 30%, rgba(11,143,160,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(201,147,58,0.06) 0%, transparent 55%);
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 680px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 300; line-height: 1.08;
  letter-spacing: -1px; margin-bottom: 24px; color: #fff;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 60%, var(--teal-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero h1 .h1-kw {
  display: block;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(0.78rem, 1.6vw, 0.95rem); letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 16px;
}
.hero p {
  font-size: 1.05rem; color: rgba(255,255,255,0.68);
  margin-bottom: 40px; line-height: 1.70;
  max-width: 520px;
}
.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
}

/* Görgetési jelző nyíl */
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.28); font-size: 0.68rem; letter-spacing: 1px;
  text-transform: uppercase; animation: bobFloat 3s ease-in-out infinite;
}
.hero-scroll svg { width: 20px; height: 20px; opacity: 0.5; }
@keyframes bobFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* KÖRBEFORGÓ fényfoltok */
.hero-particles {
  position: absolute; inset: -22%; z-index: 0; pointer-events: none;
  mix-blend-mode: screen; transform-origin: 50% 32%;
  animation: rays-rotate 24s linear infinite; will-change: transform;
}
.hero-particles i {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  background: var(--c, #fff); box-shadow: 0 0 9px 1px var(--c, #fff);
  opacity: var(--o, .5); will-change: opacity, transform;
  animation: disco-pulse var(--tw, 5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes disco-pulse {
  0%, 100% { opacity: calc(var(--o, .5) * .5); transform: scale(.82); }
  50%      { opacity: var(--o, .5); transform: scale(1.08); }
}
@keyframes rays-rotate { to { transform: rotate(360deg); } }

/* Forgó fénysugarak */
.disco-glow {
  position: absolute; left: 50%; top: 8%; width: 130vw; height: 130vw;
  transform: translate(-50%, -50%); transform-origin: 50% 50%;
  z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(59,201,218,0.10) 16deg, transparent 36deg,
    transparent 72deg, rgba(229,190,112,0.09) 88deg, transparent 108deg,
    transparent 144deg, rgba(182,156,255,0.08) 160deg, transparent 180deg,
    transparent 216deg, rgba(59,201,218,0.09) 232deg, transparent 252deg,
    transparent 288deg, rgba(229,190,112,0.08) 304deg, transparent 324deg);
  animation: disco-spin 24s linear infinite;
}
@keyframes disco-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Hero belépő animáció */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.hero-eyebrow, .hero h1, .hero p, .hero-actions {
  animation: rise .8s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero-eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .16s; }
.hero p  { animation-delay: .30s; }
.hero-actions { animation-delay: .44s; }

/* Hero élő hanghullám az alján */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 88px; z-index: 0;
  overflow: hidden; pointer-events: none; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.hero-wave .wt { display: flex; width: 200%; animation: wave-x 15s linear infinite; }
.hero-wave svg { width: 50%; flex: none; height: 88px; display: block; }
@keyframes wave-x { to { transform: translateX(-50%); } }

/* Scroll reveal */
html.anim .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rd, 0s);
}
html.anim .reveal.in { opacity: 1; transform: none; }

/* ── STATISZTIKÁK ─── */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 0 40px 60px; max-width: 900px; margin: 0 auto;
  list-style: none;
}

/* ── SZEKCIÓK ─── */
.section {
  padding: 80px 40px; max-width: 1100px; margin: 0 auto;
  text-align: center;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; font-style: italic;
  letter-spacing: -0.5px; margin-bottom: 14px; color: #fff;
}
.section-title strong { font-weight: 600; font-style: normal; color: var(--gold-light); }
.section-sub { color: var(--muted); margin-bottom: 52px; font-size: 0.96rem; max-width: 520px; margin-left: auto; margin-right: auto; }

/* Teal elválasztó vonal a cím alatt */
.section-divider {
  display: block; width: 48px; height: 2px; margin: 16px auto 24px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  border-radius: 2px;
}

/* Megosztott üveges h2 (kapcsolat) */
.h2-glass {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; font-style: italic;
  margin-bottom: 14px; color: #fff;
}
.h2-glass strong { font-weight: 600; font-style: normal; color: var(--gold-light); }

#bulik-ma, #szolgaltatasok, #rolam, #galeria, #gyik, #kapcsolat { scroll-margin-top: 84px; }

/* ── SZOLGÁLTATÁS RÁCS ─── */
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (min-width: 900px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── RÓLAM SZEKCIÓ ─── */
.about-text {
  max-width: 640px; margin: 0 auto;
  font-size: 1.02rem; color: rgba(255,255,255,0.72); line-height: 1.80;
}

/* ── KÉPGALÉRIA ─── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-shot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(59,201,218,0.12);
  aspect-ratio: 4 / 3;
  background: var(--navy-mid);
  box-shadow: 0 8px 28px rgba(4,12,26,0.45);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.gallery-shot:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 18px 48px rgba(4,12,26,0.60);
  border-color: rgba(59,201,218,0.30);
}
.gallery-shot picture { display: block; width: 100%; height: 100%; }
.gallery-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.gallery-shot:hover img { transform: scale(1.08); }
/* Sötét gradient overlay */
.gallery-shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4,12,26,0.42) 100%);
  pointer-events: none;
  transition: opacity .3s;
}
/* Teal keret felső szél hover */
.gallery-shot::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  opacity: 0; transition: opacity .3s;
}
.gallery-shot:hover::before { opacity: 1; }

/* ── KAPCSOLAT BOX + GRID ─── */
.contact-box {
  padding: 70px 40px; border-radius: var(--radius-lg);
  background: rgba(7,30,56,0.60);
  border: 1px solid rgba(59,201,218,0.18);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  text-align: center; margin: 0 40px 80px;
  box-shadow: 0 24px 64px rgba(4,12,26,0.50);
  position: relative; overflow: hidden;
}
.contact-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--teal-light), transparent);
}
.contact-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start;
  text-align: left; max-width: 1040px; margin: 0 auto;
}
.contact-left > p { color: var(--muted); margin-bottom: 26px; line-height: 1.7; }
.contact-quick { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.contact-quick a { display: inline-flex; align-items: center; gap: 12px; color: #fff; width: fit-content; transition: color .2s; }
.contact-quick a:hover { color: var(--gold-light); }
.contact-assure { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── FOOTER ─── */
footer {
  padding: 28px 40px;
  border-top: 1px solid rgba(59,201,218,0.10);
  text-align: center; color: var(--muted); font-size: 0.78rem;
  background: rgba(4,12,26,0.50);
}
footer a { color: var(--teal-light); transition: color .2s; }
footer a:hover { color: var(--gold-light); }
.footer-links {
  margin-top: 10px; font-size: 0.72rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
}
.footer-links a { color: rgba(255,255,255,0.5); }
.footer-links a:hover { color: var(--gold-light); }

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Nehéz effektek kikapcsolása mobilon / érintőképernyőn */
@media (max-width: 768px), (hover: none) {
  .disco-glow, .hero-particles { display: none; }
}

/* 1200 px alatt tömörebb linkek (1024 px-en még egy sorban elférjen a 6 link + a gomb) */
@media (max-width: 1200px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 7px 10px; font-size: 0.8rem; }
  .nav-brand { flex: 0 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Hamburger 1000 px alatt */
@media (max-width: 1000px) {
  .nav { padding: 13px 18px; }
  .nav-toggle { display: inline-flex; }
  /* Lenyíló üveg panel a sáv alatt */
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px 14px 16px; margin: 0;
    background: rgba(4,12,26,0.94);
    backdrop-filter: blur(15px) saturate(160%); -webkit-backdrop-filter: blur(15px) saturate(160%);
    border-bottom: 1px solid rgba(59,201,218,0.14);
    box-shadow: 0 18px 40px rgba(4,12,26,0.6);
  }
  .nav-links.open { display: flex; }
  .nav-links a { min-height: 44px; padding: 10px 16px; font-size: 1rem; border-radius: var(--radius-sm); }
  .btn-bulik { padding: 9px 14px; font-size: 0.8rem; }
}
/* Keskeny telefonon a márka-tagline kitolná a hamburgert és a gombot a képernyőről */
@media (max-width: 720px) {
  .brand-tagline { display: none; }
  .nav-brand { flex-shrink: 1; min-width: 0; }
  .brand-text { overflow: hidden; }
  .btn-bulik { padding: 8px 11px; font-size: 0.76rem; }
}

@media (max-width: 768px) {
  .hero { padding: 80px 20px 64px; min-height: 85vh; min-height: 85svh; }
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .stats { grid-template-columns: repeat(3, 1fr); padding: 0 16px 40px; gap: 10px; }
  .stat-value { font-size: 2.2rem; }
  .section { padding: 56px 20px; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .contact-box { margin: 0 16px 60px; padding: 44px 22px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-q { font-size: 1.12rem; }
  footer { padding: 22px 18px; }

  /* Blur felére csökkentése — GPU-kímélés */
  .nav { backdrop-filter: blur(15px) saturate(160%); -webkit-backdrop-filter: blur(15px) saturate(160%); }
  .stat-card, .contact-box { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .service-card { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
  .faq-item { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .contact-form { backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
  .btn-ghost, .social-btn, .skip-link:focus { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; max-width: 260px; }
  .hero-actions { flex-direction: column; align-items: center; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; justify-content: center; }
  .services-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .contact-social .social-btn { flex: 1 1 100%; justify-content: center; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 22px; }
  .ssr-more { flex-direction: column; align-items: stretch; }
}