/* =========================================================
   Novex Biztonságtechnika Kft. – statikus stíluslap
   Nincs külső betűtípus, nincs JavaScript, nincs függőség.
   ========================================================= */

:root{
  --red:        #e42d24;
  --red-dark:   #b81f18;
  --bg:         #1c1c1c;
  --bg-dark:    #141414;
  --bg-darker:  #0d0d0d;
  --panel:      #262626;
  --panel-2:    #2e2e2e;
  --line:       #3a3a3a;
  --text:       #e6e6e6;
  --text-dim:   #b4b4b4;
  --white:      #ffffff;

  --wrap:       1180px;
  --radius:     0px;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--white); text-decoration:none; }
a:hover{ color:var(--red); }
a:focus-visible,
button:focus-visible,
input:focus-visible + label,
label:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

h1,h2,h3{ margin:0; font-weight:400; line-height:1.2; }
p{ margin:0 0 .6em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.wrap--narrow{ max-width:860px; }
.wrap--narrow-sub{ max-width:1200px; }
.center{ text-align:center; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--red); color:#fff; padding:10px 16px;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------
   FELSŐ SÁV
   --------------------------------------------------------- */
.topbar{ background:var(--red); color:#fff; font-size:13px; }
.topbar__in{
  display:flex; align-items:center; justify-content:space-between;
  min-height:32px;
}
.topbar__name{ letter-spacing:.2px; }
.topbar__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; color:#fff;
}
.topbar__social a:hover{ color:#ffd9d7; }

/* ---------------------------------------------------------
   FEJLÉC
   --------------------------------------------------------- */
.header{ background:var(--bg-dark); padding:18px 0; }
.header__in{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.logo img{ width:200px; max-width:55vw; }

.headinfo{
  display:flex; flex:1 1 520px; gap:34px; flex-wrap:wrap;
  justify-content:space-between;
}
.headinfo li{ display:flex; align-items:flex-start; gap:12px; }
.headinfo__ico{ color:var(--red); flex:0 0 auto; margin-top:6px; }
.headinfo__txt{ display:block; }
.headinfo__txt strong{
  display:block; font-size:21px; font-weight:400; color:#fff; line-height:1.3;
}
.headinfo__txt a,
.headinfo__txt span{ font-size:14px; color:var(--text-dim); }
.headinfo__txt a{ color:var(--text-dim); }
.headinfo__txt a:hover{ color:var(--red); }

/* ---------------------------------------------------------
   MENÜ
   --------------------------------------------------------- */
.nav{ background:var(--red); }
.nav__in{ position:relative; }

.nav__cb{ position:absolute; opacity:0; pointer-events:none; }

.nav__burger{
  display:none; align-items:center; gap:10px;
  padding:14px 0; cursor:pointer; color:#fff; font-size:15px;
}
.nav__burger span{
  display:block; width:22px; height:2px; background:#fff;
  box-shadow:0 6px 0 #fff, 0 -6px 0 #fff;
}
.nav__burger em{ font-style:normal; margin-left:14px; }

.nav__list{ display:flex; flex-wrap:wrap; }
.nav__list a{
  display:block; padding:16px 14px;
  font-size:13px; font-weight:600; letter-spacing:.6px;
  text-transform:uppercase; color:#fff;
}
.nav__list a:hover{ background:var(--red-dark); color:#fff; }
.nav__list a.is-active{ background:#fff; color:#222; }

/* ---------------------------------------------------------
   SLIDER
   Alapból (JS nélkül) @keyframes-szel automatikusan vált.
   Ha fut a JavaScript (lásd a lap alján), a <html> elem "js"
   osztályt kap, és az alábbi .js szabályok veszik át az
   irányítást osztály-alapon (.is-active) — ez minden
   böngészőben egyformán, megbízhatóan viselkedik, kézi
   váltással is.
   --------------------------------------------------------- */
.slider{ background:#000; }
.slider__track{
  position:relative;
  height:clamp(240px, 38vw, 800px);
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  animation:slider-fade 15s infinite;
}
.slide:nth-child(1){ animation-delay:0s; }
.slide:nth-child(2){ animation-delay:5s; }
.slide:nth-child(3){ animation-delay:10s; }

@keyframes slider-fade{
  0%    { opacity:0; z-index:1; }
  3%    { opacity:1; z-index:2; }
  30%   { opacity:1; z-index:2; }
  36%   { opacity:0; z-index:1; }
  100%  { opacity:0; z-index:1; }
}

/* JS által vezérelt állapot — felülírja a fenti animációt */
.js .slide{
  animation:none;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:opacity .6s ease;
}
.js .slide.is-active{
  opacity:1;
  z-index:2;
  pointer-events:auto;
}

.slide__link{
  display:block;
  position:absolute; inset:0;
  color:inherit;
  text-decoration:none;
}
.slide img{
  width:100%; height:100%; object-fit:cover;
}
.slide__cap{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(680px, 82%);
  background:var(--red);
  color:#fff;
  padding:16px 24px;
  text-align:center;
  font-size:clamp(20px, 3.4vw, 40px);
  text-transform:uppercase;
}
.slide__link:hover .slide__cap{ background:var(--red-dark); }
.slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px;
  background:rgba(0,0,0,.25);
  z-index:5;
}
.slider__arrow:hover{ background:rgba(0,0,0,.55); color:#fff; }
.slider__arrow--prev{ left:6px; }
.slider__arrow--next{ right:6px; }

/* ---------------------------------------------------------
   SZEKCIÓK
   --------------------------------------------------------- */
.section{ padding:60px 0; }
.section--dark{ background:var(--bg); }
.section--darker{ background:var(--bg-darker); }
.section--darker-2{ background:url("../images/hero/stat-1920x420.jpg") no-repeat; }
.section--vir{ background:url("../images/hero/croatia-1920x420.jpg") no-repeat;/*#000;*/ padding:70px 0; text-align:center; }

.title{
  margin:0 0 26px;
  text-align:center;
  font-size:clamp(26px, 4vw, 42px);
  text-transform:uppercase;
  color:#fff;
}
.title::after{
  content:""; display:block; width:52px; height:3px;
  background:var(--red); margin:16px auto 0;
}
.title--plain{ text-transform:uppercase; }

.lead{ color:var(--text-dim); font-size:15px; }
.lead a{ color:var(--text-dim); }
.lead a:hover{ color:var(--red); }

.tag{ text-align:center; margin:0 0 26px; }
.tag span{
  display:inline-block; background:var(--red); color:#fff;
  padding:5px 16px; font-size:14px;
}

.btn{
  display:inline-block;
  background:var(--red); color:#fff;
  padding:13px 30px;
  font-size:14px;
  border:1px solid var(--red);
}
.btn:hover{ background:transparent; color:var(--red); }

/* ---------------------------------------------------------
   RÁCS
   --------------------------------------------------------- */
.grid{ display:grid; gap:14px; }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--4{ grid-template-columns:repeat(4, 1fr); }

/* ---------------------------------------------------------
   ÜZLET / PARTNER KÁRTYA
   --------------------------------------------------------- */
.card{
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.card__img{
  width:100%; height:150px; object-fit:cover;
  background:var(--panel-2);
}
.card_img2{
  border-radius:10px;	
}
.card__body{
  flex:1 1 auto;
  padding:16px 14px;
  text-align:center;
  font-size:15px;
  color:var(--text);
}

.card_body{
  color:var(--white);	
}
.card__body p{ margin:0 0 2px; }
.card__body a{ color:var(--text); }
.card__body a:hover{ color:var(--red); }
.card__name{
  font-weight: bold;
  background:var(--red);
  color:#fff;
  text-align:center;
  padding:8px 10px;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.card--partner .card__logos{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:26px 18px; min-height:220px;
  background:var(--bg-dark);
}
.card--partner .card__logos img{ max-height:84px; width:auto; }
.card--partner .card__badge{ max-height:86px; }
.card__sub{ margin:0; font-size:17px; color:var(--text); }

/* ---------------------------------------------------------
   KATALÓGUS
   --------------------------------------------------------- */
.cat{ text-align:center; }
.cat a{ display:block; }
.cat img{
  width:100%; height:250px; object-fit:cover; background:var(--panel);
}
.cat__name{
  background:var(--red); color:#fff;
  padding:9px 8px;
  font-size:15px;
  text-transform:uppercase;
}
.cat a:hover .cat__name{ background:var(--red-dark); }
.cat__desc{ margin:10px 0 0; font-size:13px; color:var(--text-dim); }

/* ---------------------------------------------------------
   SZÁMOK
   --------------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:44px;
}
.stats li{ text-align:center; }
.stats__ico{ display:block; color:#fff; margin:0 auto 10px; width:40px; }
.stats strong{
  display:block; font-size:clamp(34px, 6vw, 56px);
  font-weight:300; color:#fff; line-height:1;
}
.stats__lbl{
  display:block; margin-top:8px;
  font-size:13px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--text-dim);
}

/* ---------------------------------------------------------
   AJÁNLOTT OLDALAK
   --------------------------------------------------------- */
.post img{
  width:100%; height:210px; object-fit:cover; background:var(--panel);
}
.post__meta{ display:flex; align-items:flex-start; gap:16px; margin-top:-22px; }
.post__date{
  background:var(--red); color:#fff;
  width:46px; padding:6px 0 8px;
  text-align:center; line-height:1.25; font-size:11px;
  flex:0 0 auto;
}
.post__date b{ display:block; font-size:13px; font-weight:600; }
.post__date span{ display:block; text-transform:uppercase; }
.post__date i{ display:block; font-style:normal; }
.post__title{ font-size:19px; padding-top:26px; }

/* ---------------------------------------------------------
   MÁRKÁK
   --------------------------------------------------------- */
.brands{ background:var(--bg); padding:40px 0 60px; }
.brands ul{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-around; gap:30px;
}
.brands img{ max-height:155px; width:auto; opacity:.9; }

/* ---------------------------------------------------------
   LÁBLÉC
   --------------------------------------------------------- */
.footer{
  background:#333333;
  border-top:3px solid var(--red);
  padding:44px 0 0;
  font-size:14px;
}
.footer__in{
  display:grid;
  grid-template-columns:1.1fr 1fr .8fr 1.1fr;
  gap:34px;
  align-items:start;
}
.footer h2{
  font-size:22px; color:#fff; margin:0 0 12px;
  text-transform:uppercase; font-weight:400;
}
.footer__logos{ display:flex; flex-direction:column; gap:16px; }
.footer__logos img{ max-width:210px; }

.footer__links li{ margin-bottom:8px; }
.footer__links a{ color:var(--text-dim); }
.footer__links a:hover{ color:var(--red); }

.footer__contact li{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:12px; color:var(--text-dim);
}
.footer__contact svg{ flex:0 0 auto; margin-top:4px; color:var(--text-dim); }
.footer__contact a{ color:var(--text-dim); }
.footer__contact a:hover{ color:var(--red); }

.footer__bottom{
  margin-top:40px; padding:16px;
  text-align:center; font-size:13px;
  color:var(--text-dim);
  border-top:1px solid #454545;
}

/* ---------------------------------------------------------
   VISSZA A TETEJÉRE
   --------------------------------------------------------- */
.totop{
  position:fixed; right:0; bottom:60px; z-index:50;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.75); color:#333;
  font-size:12px;
}
.totop:hover{ background:#fff; color:var(--red); }

/* ---------------------------------------------------------
   ÜZLET ALOLDAL – HERO (fogaskerék háttér + morzsamenü)
   --------------------------------------------------------- */
.storehero{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  background: linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(255,20,16,.25) 25%, rgba(0,0,0,.75) 100%),
    /*url("../images/hero/fogaskerek-hatter.jpg")*/ center/cover no-repeat;
}
.storehero__in{ position:relative; padding:34px 0; }
.storehero__crumb{
  display:block; margin-bottom:6px;
  font-size:14px; color:rgba(255,255,255,.75);
}
.storehero__crumb a{ color:rgba(255,255,255,.75); }
.storehero__crumb a:hover{ color:#fff; }
.storehero__title{
  font-size:clamp(30px, 5vw, 48px);
  text-transform:uppercase;
  color:#fff;
}

/* ---------------------------------------------------------
   ÜZLET ALOLDAL – TARTALOM
   --------------------------------------------------------- */
.store__date{
  display:flex; align-items:center; gap:8px;
  color:var(--text-dim); font-size:14px;
  margin-bottom:28px;
}
.store__date svg{ color:var(--red); flex:0 0 auto; }

.store__gallery{
  display:flex; gap:6px; flex-wrap:wrap;
  justify-content:center; margin-bottom:26px;
}
.store__gallery img{
  width:calc(50% - 3px); min-width:260px; flex:1 1 260px;
  height:300px; object-fit:cover; background:var(--panel);
}

.store__address{ text-align:center; margin-bottom:34px; }
.store__address p{ margin:0 0 2px; color:var(--text); }
.store__address a{ color:var(--text); }
.store__address a:hover{ color:var(--red); }

.store__staffhead{
  text-align:center; font-size:17px; font-weight:600;
  color:#fff; margin-bottom:18px;
}

.store__staff{
  text-align: center;
  display:grid; gap:24px 48px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  max-width:720px; margin:0 auto 40px;
}
.staffcard strong{ display:block; font-size:16px; color:#fff; }
.staffcard em{ display:block; font-style:italic; color:var(--text-dim); font-size:14px; margin:2px 0 8px; }
.staffcard a{ display:block; color:var(--text-dim); font-size:14px; }
.staffcard a:hover{ color:var(--red); }

.store__hours{ text-align: center; max-width:720px; margin:0 auto; }
.store__hours h3{
  font-size:16px; font-weight:600; color:#fff; margin-bottom:8px;
}
.store__hours p{ color:var(--text-dim); margin:0 0 3px; }

@media (max-width: 560px){
  .store__gallery img{ width:100%; }
  .store__staff{ grid-template-columns:1fr; text-align:center; }
}
@media (max-width: 1000px){
  .footer__in{ grid-template-columns:1fr 1fr; }
  .headinfo{ gap:22px; }
  .headinfo__txt strong{ font-size:18px; }
}

@media (max-width: 860px){
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .grid--3{ grid-template-columns:repeat(2, 1fr); }

  .header__in{ justify-content:center; text-align:left; }
  .headinfo{ justify-content:flex-start; }

  .nav__burger{ display:flex; }
  .nav__list{
    display:none; flex-direction:column;
    border-top:1px solid rgba(255,255,255,.3);
  }
  .nav__cb:checked ~ .nav__list{ display:flex; }
  .nav__list a{ padding:13px 4px; }
  .nav__list a.is-active{ background:transparent; color:#fff; font-weight:700; }
}

@media (max-width: 560px){
  .grid--4,
  .grid--3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; gap:34px; }
  .footer__in{ grid-template-columns:1fr; }
  .section{ padding:44px 0; }
  .headinfo{ flex-direction:column; gap:14px; }
  .totop{ bottom:20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
  .slide{ animation:none !important; opacity:0; z-index:1; }
  .slide:first-child{ opacity:1; z-index:2; }
  .js .slide.is-active{ opacity:1; z-index:2; }
}

/* ---------------------------------------------------------
   MÁRKA LOGÓK LÉPTETÉSE
   --------------------------------------------------------- */
.carousel-viewport {
    width: 1325px;
    height: 155px;
    overflow: hidden;
    position: relative;
}
/* A görgethető belső sáv */
.carousel-track {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
/* Animációs osztály a gördüléshez */
.carousel-track.transitioning {
    transition: transform 0.8s ease-in-out;
}
/* Egyedi kép kártyák és képek */
.carousel-item {
    width: 225px;
    height: 155px;
    flex-shrink: 0;
    margin-right: 50px; /* 50 pixel átlátszó tér a képek között */
}
/* Képek */
.carousel-item img {
    width: 225px;
    height: 155px;
    object-fit: cover;
    display: block;
}

.aszf_table td {
	border:1px solid #FFFFFF;
}