/* ============================================================
   Mozaikkép – kepetafalra.hu | közös stíluslap
   Színvilág: sötétkék (#10243a) + narancs (#f77f00), lapos dizájn
   Mobil-first: alap = telefon, media query = tablet/desktop
   ============================================================ */
:root {
  --kek: #10243a;          /* sötétkék alap */
  --kek-vilagos: #1b3a5c;  /* világosabb kék felületekhez */
  --narancs: #f77f00;      /* kiemelés, CTA */
  --narancs-sotet: #d96e00;
  --feher: #ffffff;
  --hatter: #f6f8fa;       /* világos oldalháttér */
  --szoveg: #1d2b3a;
  --szoveg-halvany: #5a6b7d;
  --sugar: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--szoveg);
  background: var(--hatter);
}

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

a { color: var(--narancs-sotet); }
a:hover { color: var(--narancs); }

h1, h2, h3 { line-height: 1.25; color: var(--kek); }
h1 { font-size: 1.75rem; margin: 0 0 .75em; }
h2 { font-size: 1.4rem; margin: 1.6em 0 .6em; }
h3 { font-size: 1.15rem; margin: 1.2em 0 .5em; }

p { margin: 0 0 1em; }

.tartalom {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------- Fejléc ---------- */
.fejlec {
  background: var(--kek);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.fejlec-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 18px;
}
.marka {
  color: var(--feher);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-decoration: none;
}
.marka span { color: var(--narancs); }
.marka:hover { color: var(--feher); }

/* Hamburger gomb (mobil) */
.menu-gomb {
  background: none;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 8px;
  color: var(--feher);
  font-size: 1.5rem;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}
.menu-gomb:focus-visible { outline: 3px solid var(--narancs); }

.fomenu {
  display: none;
  background: var(--kek);
  border-top: 1px solid rgba(255,255,255,.12);
}
.fomenu.nyitva { display: block; }
.fomenu ul {
  list-style: none;
  margin: 0 auto;
  padding: 8px 0;
  max-width: 1080px;
}
.fomenu a {
  display: block;
  padding: 14px 22px;
  color: #e8eef4;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
}
.fomenu a:hover, .fomenu a:focus { background: var(--kek-vilagos); color: var(--feher); }
.fomenu a.aktiv { color: var(--narancs); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--kek) 0%, var(--kek-vilagos) 100%);
  color: var(--feher);
  padding: 48px 0 56px;
  text-align: center;
}
.hero h1 { color: var(--feher); font-size: 1.9rem; margin-bottom: .4em; }
.hero p.alcim {
  color: #cdd9e5;
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto 1.6em;
}
.hero .narancs { color: var(--narancs); }

/* ---------- Gombok ---------- */
.gomb {
  display: inline-block;
  background: var(--narancs);
  color: var(--feher);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  padding: 15px 28px;
  border: none;
  border-radius: var(--sugar);
  cursor: pointer;
  transition: background .2s;
  min-width: 220px;
}
.gomb:hover, .gomb:focus { background: var(--narancs-sotet); color: var(--feher); }
.gomb.masodlagos {
  background: transparent;
  border: 2px solid var(--narancs);
  color: var(--narancs);
}
.gomb.masodlagos:hover { background: rgba(247,127,0,.12); }
.gomb-sor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin: 10px 0;
}

/* ---------- Szekciók, kártyák ---------- */
.szekcio { padding: 40px 0; }
.szekcio.sotet { background: var(--kek); color: #dde7f0; }
.szekcio.sotet h2, .szekcio.sotet h3 { color: var(--feher); }
.szekcio.feher { background: var(--feher); }

.kartya-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 24px 0;
}
.kartya {
  background: var(--feher);
  border-radius: var(--sugar);
  padding: 22px;
  box-shadow: 0 2px 10px rgba(16,36,58,.08);
  border-top: 4px solid var(--narancs);
}
.kartya h3 { margin-top: 0; }
.szekcio.sotet .kartya { background: var(--kek-vilagos); border-top-color: var(--narancs); }
.szekcio.sotet .kartya h3 { color: var(--feher); }
.szekcio.sotet .kartya p { color: #cdd9e5; }

/* ---------- Lépéslista (hogyan készül) ---------- */
.lepesek { list-style: none; counter-reset: lepes; padding: 0; margin: 24px 0; }
.lepesek li {
  counter-increment: lepes;
  position: relative;
  padding: 0 0 22px 62px;
  min-height: 48px;
}
.lepesek li::before {
  content: counter(lepes);
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--narancs);
  color: var(--feher);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lepesek li strong { display: block; color: var(--kek); font-size: 1.05rem; }

/* ---------- GYIK (details/summary) ---------- */
.gyik-elem {
  background: var(--feher);
  border-radius: var(--sugar);
  margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(16,36,58,.08);
  overflow: hidden;
}
.gyik-elem summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--kek);
  padding: 16px 44px 16px 18px;
  position: relative;
  list-style: none;
  font-size: 1.02rem;
}
.gyik-elem summary::-webkit-details-marker { display: none; }
.gyik-elem summary::after {
  content: "+";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--narancs);
  font-size: 1.5rem;
  font-weight: 800;
}
.gyik-elem[open] summary::after { content: "–"; }
.gyik-elem .valasz { padding: 0 18px 16px; color: var(--szoveg); }

/* ---------- Galéria rács ---------- */
.galeria-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.galeria-kartya {
  background: var(--feher);
  border-radius: var(--sugar);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(16,36,58,.1);
  text-decoration: none;
  color: var(--szoveg);
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.galeria-kartya:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(16,36,58,.18);
  color: var(--szoveg);
}
.galeria-kartya img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galeria-kartya .cimke { padding: 14px 16px; }
.galeria-kartya .cimke strong { color: var(--kek); display: block; }
.galeria-kartya .cimke small { color: var(--szoveg-halvany); }
.galeria-kartya .zoom-jelzes { color: var(--narancs-sotet); font-weight: 700; font-size: .9rem; }

/* ---------- Vakráma 3D animáció (vászonkép a falon) ---------- */
.vakrama-szinpad {
  width: min(400px, 88vw);
  aspect-ratio: 4 / 3;
  margin: 28px auto;
  perspective: 1000px;
}
.vakrama {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  cursor: pointer;
}
.vakrama-szinpad:hover .vakrama,
.vakrama-szinpad.aktiv .vakrama {
  transform: rotateX(72deg);
  transform-origin: bottom;
}
.vakrama::after {           /* a vászon oldala – ide is nyomtatunk */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 34px;
  background: inherit;
  background-position: bottom;
  transform: rotateX(90deg);
  transform-origin: bottom;
}
.vakrama .felirat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--feher);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  background: rgba(16,36,58,.25);
  transition: opacity .4s;
  text-align: center;
  padding: 10px;
}
.vakrama-szinpad:hover .felirat,
.vakrama-szinpad.aktiv .felirat { opacity: 0; }
.vakrama-megjegyzes {
  text-align: center;
  color: var(--szoveg-halvany);
  font-size: .95rem;
}

/* ---------- Kapcsolat gombok ---------- */
.kapcsolat-gombok {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  margin: 28px auto;
}
.kapcsolat-gombok .gomb {
  font-size: 1.15rem;
  padding: 18px 24px;
  width: 100%;
}
.gomb.whatsapp { background: #25d366; }
.gomb.whatsapp:hover { background: #1eb457; }

/* ---------- Ár táblázat ---------- */
.ar-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: var(--feher);
  border-radius: var(--sugar);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(16,36,58,.08);
}
.ar-tabla th {
  background: var(--kek);
  color: var(--feher);
  text-align: left;
  padding: 13px 16px;
}
.ar-tabla td { padding: 13px 16px; border-bottom: 1px solid #e6ebf0; }
.ar-tabla tr:last-child td { border-bottom: none; }
.ar-tabla .ar { font-weight: 800; color: var(--narancs-sotet); white-space: nowrap; }

/* ---------- Kiemelt doboz ---------- */
.kiemelt {
  background: #fff4e6;
  border-left: 5px solid var(--narancs);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 20px 0;
}
.kiemelt.kek {
  background: #e9f1f9;
  border-left-color: var(--kek);
}

/* ---------- Morzsamenü ---------- */
.morzsa {
  font-size: .9rem;
  color: var(--szoveg-halvany);
  padding: 14px 0 0;
}
.morzsa a { color: var(--szoveg-halvany); }
.morzsa a:hover { color: var(--narancs-sotet); }

/* ---------- Lábléc ---------- */
.lablec {
  background: var(--kek);
  color: #b9c7d4;
  padding: 36px 0 28px;
  margin-top: 48px;
  font-size: .95rem;
}
.lablec h3 { color: var(--feher); font-size: 1.05rem; margin-top: 0; }
.lablec a { color: #dbe6f0; text-decoration: none; }
.lablec a:hover { color: var(--narancs); }
.lablec-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
.lablec ul { list-style: none; margin: 0; padding: 0; }
.lablec li { margin-bottom: 8px; }
.lablec .copyright {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 26px;
  padding-top: 18px;
  text-align: center;
  color: #8fa2b5;
}

/* ---------- CTA sáv ---------- */
.cta-sav {
  background: var(--narancs);
  color: var(--feher);
  text-align: center;
  padding: 36px 0;
}
.cta-sav h2 { color: var(--feher); margin-top: 0; }
.cta-sav .gomb { background: var(--kek); }
.cta-sav .gomb:hover { background: var(--kek-vilagos); }

/* ============================================================
   Tablet és nagyobb (min. 640px)
   ============================================================ */
@media (min-width: 640px) {
  h1 { font-size: 2.1rem; }
  .hero h1 { font-size: 2.4rem; }
  .kartya-racs { grid-template-columns: repeat(2, 1fr); }
  .gomb-sor { flex-direction: row; justify-content: center; }
  .lablec-racs { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Desktop (min. 960px)
   ============================================================ */
@media (min-width: 960px) {
  body { font-size: 17px; }
  .hero { padding: 70px 0 80px; }
  .hero h1 { font-size: 2.7rem; }
  .kartya-racs.harmas { grid-template-columns: repeat(3, 1fr); }
  .kartya-racs.negyes { grid-template-columns: repeat(4, 1fr); }

  /* Desktopon vízszintes menü, hamburger nélkül */
  .menu-gomb { display: none; }
  .fomenu { display: block; border-top: none; background: transparent; }
  .fejlec-sor { padding-bottom: 0; }
  .fomenu ul {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 0 18px 6px;
  }
  .fomenu a { padding: 10px 16px; border-radius: 8px; font-size: 1rem; }
}


/* Linkajánló oldal (mozaik-vilag.html) */
.link-lista{list-style:none;padding:0;margin:0 0 1.5rem}
.link-lista li{padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.08);line-height:1.5}
.link-lista li a{font-weight:600}
.apro{font-size:.85rem;opacity:.7;margin-top:1.5rem}