:root{
      --ink:#1f1b2e;           /* sötét szöveg */
      --muted:#6c6a73;         /* halvány szöveg */
      --paper:#faf9fb;         /* háttér */
      --accent:#7b5cff;        /* retro lila */
      --accent-2:#00d4ff;      /* retro cián */
      --brand:#222;            /* nav szín */
    }
    body{background:var(--paper); color:var(--ink);}    
    .topbar{background:#111; color:#fff; font-size:.9rem}
    .topbar a{color:#fff; text-decoration:none}
    .navbar{box-shadow:0 2px 8px rgba(0,0,0,.06)}
    /* HERO háttér beállítás */

    .hero h1{font-weight:800; letter-spacing:.5px}
    .lead{color:var(--muted)}

    /* szakaszcímek */
    .section-title{font-weight:700; letter-spacing:.3px}

    /* kártyák a leírásokhoz */
    .retro-card{background:#fff; bordder:1px solid rgba(0,0,0,.06); border-radius:14px; box-shdadow:0 8px 20px rgba(31,27,46,.06)}
    .retro-card:hover{transform:translateY(-2px); transition:.2s}

    /* csomagok badge-ek */
    .price{font-weight:800; font-size:1.25rem}
    .vat{font-size:.85rem; color:var(--muted)}

    /* kódblokk */
    pre.code{background:#0c0c0f; color:#e7e7e7; border-radius:12px; padding:1rem 1.25rem}

    /* contact doboz (újrafelhasználva) */
    .bk-card{background:#fff; border:1px solsid rgba(0,0,0,.08); border-radius:16px; box-shadosw:0 10px 24px rgba(31,27,46,.08)}
    .form-control:focus{border-color:var(--accent); box-shadow:0 0 0 .25rem rgba(123,92,255,.15)}

    footer{border-top:1px solid rgba(0,0,0,.08)}
	
	/* HERO: háttérkép + sötét overlay */
.hero{
  position: relative;
  color: #fff;
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 18% 50%; /* balra fókusz, hogy a GAME OVER jól látszódjon */
  min-height: 60vh;             /* szép magasság desktopon */
}

/* jobbról halványodó sötétítés a szöveghez */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.58) 45%,
    rgba(0,0,0,.30) 70%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
}

/* a tartalom a kép/overlay fölé kerüljön */
.hero > .container{ position: relative; z-index: 1; }

/* tipó */
.hero h1{ font-weight: 800; color:#fff; }
.hero .lead{ color: rgba(255,255,255,.92); }

/* a jobb oldali fehér doboz kinézete */
.hero .bk-card{
  background: rgba(255,255,255,.96);
  color: #222;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* gomb kontraszt a sötét hero-n */
.hero .btn-outline-dark{
  border-color:#fff; color:#fff;
}
.hero .btn-outline-dark:hover{
  background:#fff; color:#000;
}

/* mobil finomhangolás */
@media (max-width: 991.98px){
  .hero{ background-position: 50% 50%; min-height: 52vh; }
  .hero::before{ background: rgba(0,0,0,.55); } /* egységes sötétítés mobilon */
  .hero .bk-card{ margin-top: .75rem; }
}
/* a bérelhető gépek képei szépen arányosan, lekerekítve */
#games img{ object-position:center; }
#games .shadow{ box-shadow: 0 14px 32px rgba(0,0,0,.18)!important; }
/* finom árnyékok, szép képarány, jó vágás */
/* logólapok kis emelése */
#brand-cats .brand-tile{transition:.2s ease; background:#fff}
#brand-cats .brand-tile:hover{transform:translateY(-2px)}

/* képek vágása, puha árnyék */
.object-fit-cover{object-fit:cover}
#sinclair .shadow,#commodore .shadow,#atari .shadow{box-shadow:0 14px 32px rgba(0,0,0,.16)!important}
/* Alap: ahol nem akarunk vágást */
.object-fit-contain {
  object-fit: contain !important;   /* teljes kép látszódjon */
  object-position: center;
  background: #fff;                 /* oldalsáv/felső sáv kulturáltan */
}
/* --- NO CROP mód: a képek teljesben látszódjanak, ne vágjunk --- */
.no-crop .ratio {                /* a 16:9 keret megmarad, de fehér "letterbox" */
  background: #fff;
}

.no-crop .ratio > img {          /* MINDEN ratio-n belüli kép teljesben */
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  background: #fff;
}

/* enyhe finomhangolás nagy képernyőn, hogy ne legyen túl alacsony a doboz */
@media (min-width: 992px) {
  .no-crop .ratio { --bs-aspect-ratio: 62%; } /* kb. 16:10-hez közelít, magasabb doboz */
}

/* (opcionális) puha árnyék + kerekítés maradjon egységes */
.no-crop figure.shadow { box-shsadow: 0 14px 32px rgba(0,0,0,.16) !important; }
#brand-cats {
  background: #fff;
  padding: 2rem 0;
}

.brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 120px; /* egységes magasság */
}

.brand-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.brand-tile img {
  max-height: 80px; /* arányos méretezés */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: saturate(1.1);
}

#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  display: none; /* alapból rejtve */
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.2s;
}

#backToTop:hover {
  background-color: #555;
  transform: translateY(-3px);
}

.retro-banner{
  background:
    radial-gradient(1200px 300px at 0% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 300px at 100% 100%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #f6f8ff 0%, #f4f9ff 22%, #f7f6ff 48%, #fff7fb 100%);
  border: 1px solid rgba(0,0,0,.06);
}

.retro-image-banner img {
  object-fit: cover;
  max-height: 600px; /* ha túl magas lenne */
}
.retro-image-banner .ratio {
  max-height: 350px;
}

.retro-image-banner .ratio {
  max-height: 350px;
}

.retro-image-banner img {
  object-fit: cover;
  transition: transform 0.5s ease;
}

.retro-image-banner img:hover {
  transform: scale(1.03);
}

.brandimg,.ac{
	height:100px;text-align:center;margin:auto;
}
/* FOOTER */
.site-footer{
  position: relative;
  background:#fff;
  padding: 20px 0 28px;
  overflow: hidden; /* a díszkép ne lógjon ki */
}

/* Dísz-joystick a footerben – kisebb és színes */
.site-footer::after{
  content:"";
  position:absolute;
  right: -18px;
  bottom: 0px;                    /* lejjebb, hogy a teteje biztosan látszon */
  width: clamp(130px, 16vw, 220px); /* kisebb szélesség */
  height: clamp(85px, 13vw, 160px); /* kisebb magasság */
  background: url("images/kep4 quick shot ii.jfif") no-repeat right bottom / contain;
  opacity: .5;                     /* finom vízjel, de már látszik */
  filter: none;                     /* SZÍNES! (korábban grayscale volt) */
  pointer-events: none;
  z-index: 0;
}

/* mobil finomhangolás */
@media (max-width:576px){
  .site-footer::after{
    right: -28px;
    bottom: -20px;
    width: 120px;
    height: 90px;
    opacity: .26;
  }
}


/* a szöveg biztosan a díszkép fölött legyen */
.site-footer .footer-content{ position: relative; z-index: 1; }

/* Back to top alaphelyzet és rétegzés */
#backToTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2; /* a díszkép fölött, de nem takarja amikor feljebb toljuk */
}

/* Ha a footer a nézetben van, emeljük feljebb a gombot */
body.at-footer #backToTop{
  bottom: 120px; /* annyival feljebb, hogy ne lógjon bele */
}

/* apró link finomítás a footerben */
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* mobil finomhangolás */
@media (max-width:576px){
  
  body.at-footer #backToTop{ bottom: 100px; }
}
/* Finomhangolható változók */
.site-footer{
  --joy-scale: .78;   /* ← itt tudod "lejjebb venni" a méretet (0.6–0.95) */
  --joy-right: -18px;
  --joy-bottom: -20px;
}

.site-footer::after{
  content:"";
  position:absolute;
  right: var(--joy-right);
  bottom: var(--joy-bottom);
  width: clamp(130px, 16vw, 220px);
  height: clamp(85px, 13vw, 160px);
  background: url("images/kep4 quick shot ii.jfif") no-repeat right bottom / contain;
  opacity: .28;        /* színes = filter: none */
  filter: none;
  pointer-events: none;
  z-index: 0;

  /* ↓ Csak a díszképet zsugorítjuk, a pozíció a jobb-alsó sarokhoz ragad */
  transform: scale(var(--joy-scale));
  transform-origin: right bottom;
}

/* Mobilon még egy picit kisebb lehet, ha kell */
@media (max-width: 576px){
  .site-footer{ --joy-scale: .72; --joy-right: -26px; --joy-bottom: -22px; }
}

/* állítsd be magasabbra: */
.site-footer{
  --joy-bottom: 0px;   /* volt: -20px körül */
  /* opcionális: finomhangolás */
  --joy-right: 0px;
  --joy-scale: .78;
}
@media (max-width:576px){
  .site-footer{ --joy-bottom: 10px; }
}
/* Galéria cover enyhe zoom hoverre */
.gallery-cover img { transition: transform .35s ease; }
.gallery-cover:hover img { transform: scale(1.02); }

/* Modal: fekete háttér, képek szépen igazodjanak kisebb képernyőn is */
#galleryModal .modal-content { background:#000; }
#galleryModal img { max-height: 80vh; object-fit: contain; }
/* Egyszerű visszajelző doboz – illeszkedő, visszafogott */
.msg{
  max-width: 1100px;        /* igazítsd az oldal fő szélességéhez */
  margin: 16px auto;
  padding: 12px 16px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-left: 4px solid #bbb;   /* finom bal színes sáv */
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.45;
  color: #222;
  text-align:center;
}

/* Siker */
.msg-success{
  border-left-color: #2e7d32;    /* sötétebb zöld, nem rikító */
  background: #f3f8f4;
  color: #1f4e22;
}

/* Hiba */
.msg-error{
  border-left-color: #c62828;    /* sötétebb piros */
  background: #fbeeee;
  color: #7a1f1f;
}