/* monokróm téma + animált részletek */
:root{
  --bg-0:#0a0a0a;
  --bg-1:#111213;
  --line:#2a2b2c;
  --txt-0:#ffffff;
  --txt-1:#c8c8c8;
  --txt-2:#9a9a9a;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{ color-scheme: dark; } /* OS-kompatibilis űrlap/scrollbar téma */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt-0);
  background:
    radial-gradient(1200px 600px at 20% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, rgba(255,255,255,.05), transparent 50%),
    var(--bg-0);
  line-height:1.6;
}

/* fejlécek, navigáció */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background: rgba(10,10,10,.45);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
}
.logo{font-weight:800; letter-spacing:.5px; color:#fff; text-decoration:none}
.brand{ text-transform:none; font-variant-caps:normal } /* márkanév védelme */
.nav a{
  color:var(--txt-0); text-decoration:none; margin-left:18px; opacity:.8;
  transition:opacity .2s ease,color .2s ease;
}
.nav a:hover,.nav a.active{opacity:1; color:#fff}

/* hero */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px;
  padding:72px 22px 40px; align-items:center;
}
.hero__content .lead{max-width:56ch}
.muted{ color: var(--txt-1) }
.gradient-text{
  font-size:clamp(36px,6vw,64px); line-height:1.05; margin:0 0 10px 0;
  background:linear-gradient(90deg,#fff,#cfcfcf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta-row{display:flex; gap:12px; margin-top:18px}
.btn{border-radius:999px; padding:12px 18px; text-decoration:none; font-weight:600}
.btn--primary{background:#1a1a1a; color:#fff; box-shadow:var(--shadow); border:1px solid var(--line)}
.btn--primary:hover{background:#202020}
.btn--ghost{border:1px solid var(--line); color:#fff}
.btn--ghost:hover{border-color:#3a3b3c}

/* hero vizuál */
.hero__visual{position:relative; height:320px}
.orb{
  position:absolute; width:160px; height:160px; border-radius:50%;
  filter:blur(12px); opacity:.7; animation:float 8s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 60%);
}
.orb--1{left:10%; top:20%}
.orb--2{right:15%; top:40%; animation-delay:1.2s}
.orb--3{left:40%; bottom:0; animation-delay:2.4s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

/* szekciók */
section{padding:48px 22px}
h2{margin:0 0 14px 0; font-weight:700}

/* link rács + ikonok */
.link-grid{
  list-style:none; padding:0; margin:24px 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
}
.link-card{
  display:flex; gap:10px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:16px; color:#fff; text-decoration:none; position:relative; overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.link-card:hover{transform:translateY(-4px); border-color: rgba(255,255,255,.22); background:rgba(255,255,255,.04)}
.link-card__icon{display:flex; align-items:center; justify-content:center}
.ico{ width:22px; height:22px; color:#e8e8e8; opacity:.9; transition:opacity .2s ease, transform .2s ease; }
.link-card:hover .ico{ opacity:1; transform:translateY(-2px); }
.link-card__title{font-weight:700; display:block}
.link-card__desc{display:block;}

/* munkakártyák */
.works__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;
}
.work-card{
  background:var(--bg-1); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.work-card img{width:100%; height:200px; object-fit:cover; display:block}
.work-card__body{padding:14px}
.work-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}

/* kontakt */
.contact{text-align:center}
.contact .btn{margin-top:8px}

/* about */
.about{display:grid; grid-template-columns: .9fr 1.1fr; gap:26px; padding-top:64px}
.about__photo{width:100%; border-radius:var(--radius); border:1px solid rgba(255,255,255,.06)}

/* tagek */
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:14px 0}
.tags li{padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:var(--txt-2)}

/* szolgáltatások */
.services__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;
}
.service-card{
  background:var(--bg-1); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:16px;
}

/* setup */
.setup__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px;
}
.setup-card{
  background:var(--bg-1); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px;
}
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px;
}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.06)}

.specs summary{cursor:pointer; font-weight:700}
.specs ul{margin-top:10px}

/* lábléc */
.site-footer{
  padding:28px 22px; border-top:1px solid rgba(255,255,255,.08); color:var(--txt-2); text-align:center;
}

/* reszponzív */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding-top:48px}
  .about{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .gallery{grid-template-columns:1fr}
}

.auto-rotator{position:relative;aspect-ratio:16/9;min-height:400px;overflow:hidden;border-radius:12px;background:#0f0f10;border:1px solid rgba(255,255,255,.06);}
.ar__slide{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;opacity:0;transition:opacity .9s ease;pointer-events:none;}
.ar__slide.is-active{opacity:1;pointer-events:auto;}
.ar__slide a{display:grid;grid-template-rows:1fr auto;width:100%;height:100%;text-decoration:none;color:inherit;}
.ar__slide img{width:100%;height:100%;object-fit:cover;display:block;}
.ar__caption{align-self:end;width:100%;color:#fff;padding:2px 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.70));border-bottom-left-radius:12px;border-bottom-right-radius:12px;}


@keyframes arCrossfade{
  0%   { opacity:0 }
  10%  { opacity:1 }   /* ~0.5s fade-in egy 5s szeletben */
  80%  { opacity:1 }   /* ~3.5s látható szakasz */
  90%  { opacity:0 }   /* ~0.5s fade-out */
  100% { opacity:0 }
} /* [1] */

.ar__slide.css-only{                 /* add hozzá ezt az osztályt, ha CSS-only-t használsz */
  animation: arCrossfade 15s ease-in-out infinite both; /* both = megbízható kör eleji állapot */
} /* [6][1] */
.ar__slide.css-only:nth-child(1){ animation-delay: 0s }
.ar__slide.css-only:nth-child(2){ animation-delay: 5s }
.ar__slide.css-only:nth-child(3){ animation-delay:10s }

/* ===== JS-es indexelőhöz (ajánlott stabilitás): 
   hagyd meg a .ar__slide és .ar__slide.is-active fenti szabályait,
   és NE add hozzá a .css-only osztályt; a JS kapcsolja az .is-active-et 5s-enként. 
   Így nincs nth-child számolás és nem csúszik el a ciklus. [7] */

/* Mozgáscsökkentés: ne animáljunk, csak az első dia látszódjon */
@media (prefers-reduced-motion: reduce){
  .ar__slide{ animation: none !important; opacity:0; visibility:hidden; pointer-events:none }
  .ar__slide:nth-child(1){ opacity:1; visibility:visible; pointer-events:auto }
} /* [8] */


/* Global fluid guards */
img, video { max-width: 100%; height: auto; display: block; } /* prevent overflow on phones */  /* [22][23] */
:root { --space-1: 10px; --space-2: 14px; --space-3: 20px; --space-4: 26px; }

/* Header/nav: wrap nicely on small screens */
.site-header{ padding: 12px 16px; gap: 10px; }
.site-header .nav a{ margin-left: 14px; }

/* Sections: tighter side padding on phones */
section{ padding: 40px 16px; }

/* Hero: stack columns on phones */
@media (max-width: 40em){                 /* ≈ 640px and below */
  .hero{ grid-template-columns: 1fr; padding-top: 48px; gap: 22px; }
  .hero__visual{ height: 260px; }
}

/* About page: single column on phones */
@media (max-width: 40em){
  .about{ grid-template-columns: 1fr; gap: clamp(14px, 4vw, 26px); padding-top: 40px; }
  .about__photo{ width: 100%; }
  .tags{ gap: 8px; }
  .btn{ padding: 12px 16px; }            /* bigger tap targets */
}

/* Slideshow frame responsive minimums */
.auto-rotator{ width: 100%; aspect-ratio: 16/9; min-height: 220px; }  /* phones */
@media (min-width: 40em){ .auto-rotator{ min-height: 280px; } }       /* tablet */
@media (min-width: 64em){ .auto-rotator{ min-height: 340px; } }       /* desktop */

/* Works and services grids: responsive auto-fit cards */
.works__grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.services__grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* Setup grid and gallery: scale down columns on phones */
@media (max-width: 40em){
  .setup__grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
  .gallery{ grid-template-columns: 1fr; gap: 8px; }
  .gallery img{ height: 200px; }
}
@media (min-width: 40em) and (max-width: 64em){
  .gallery{ grid-template-columns: 1fr 1fr; }
}

/* Footer: tighter padding on phones */
@media (max-width: 40em){
  .site-footer{ padding: 22px 16px; font-size: .95rem; }
}

/* Fluid typography using clamp: readable on phones, scales up gracefully */
.about h1{ font-size: clamp(28px, 6vw, 52px); line-height: 1.15; }     /* hero-like titles */  /* [11][20] */
section p{ font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6; }
.tags li{ font-size: clamp(.85rem, 1.6vw, .95rem); }

/* Navigation wrapping for very narrow screens (~360px) */
@media (max-width: 22.5em){
  .site-header{ padding: 10px 14px; }
  section{ padding: 32px 14px; }
  .nav a{ margin-left: 10px; }
}