/* dfodrasz.hu — teljes stíluslap. Világos alap, sötét felülírással. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* --tompa a #f6f7f9 világos háttéren mérve 4.54:1 kontrasztarányú –
     a WCAG AA 4.5:1 minimumot teljesíti kisméretű szövegen is (pl. a
     morzsamenü 12px-es és az "ELADÁSI ÁR" címke 10px-es szövege). A
     korábbi #8b96a4 csak 2.80:1-et adott, ami nem felelt meg. */
  --bg: #f6f7f9; --fg: #111823; --halvany: #6b7787; --tompa: #647382;
  --vonal: #e2e6ec; --kartya: #fff; --keret: #e6e9ee;
  --arnyek: 0 1px 3px rgba(16, 24, 40, .07);
  --kiemel: #8a5a00; --fejlecbg: #fff; --torzs: #39434f; --hajszal: #f0f2f5;
  --dobozbg: #111823; --dobozfg: #fff; --dobozhalvany: #a9b4c2;
  --dobozvonal: #2a333f; --gomb: #f0b849; --gombfg: #111823;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mod="light"]) {
    --bg: #0f1520; --fg: #eef2f7; --halvany: #8b99ac; --tompa: #75839a;
    --vonal: rgba(255,255,255,.09); --kartya: #1a2231; --keret: rgba(255,255,255,.08);
    --arnyek: none; --kiemel: #f0b849; --fejlecbg: #131a27; --torzs: #b8c3d1;
    --hajszal: rgba(255,255,255,.06); --dobozbg: #1a2231;
    --dobozhalvany: #93a1b3; --dobozvonal: rgba(255,255,255,.1);
  }
}

:root[data-mod="dark"] {
  --bg: #0f1520; --fg: #eef2f7; --halvany: #8b99ac; --tompa: #75839a;
  --vonal: rgba(255,255,255,.09); --kartya: #1a2231; --keret: rgba(255,255,255,.08);
  --arnyek: none; --kiemel: #f0b849; --fejlecbg: #131a27; --torzs: #b8c3d1;
  --hajszal: rgba(255,255,255,.06); --dobozbg: #1a2231;
  --dobozhalvany: #93a1b3; --dobozvonal: rgba(255,255,255,.1);
}

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; }
a { color: inherit; }

.keret { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* --- fejléc --- */
.fejlec { background: var(--fejlecbg); border-bottom: 1px solid var(--vonal); }
.fejlec-sor { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; }
.marka { text-decoration: none; line-height: 1.32; }
.marka span { display: block; font-size: 13px; font-weight: 600; }
.marka em { font-style: normal; color: var(--kiemel); font-weight: 700; }
.menu { font-size: 13px; color: var(--halvany); margin-left: auto; }
.menu a { margin-left: 22px; text-decoration: none; }
.menu a.on { color: var(--fg); font-weight: 600; }
#mod-kapcsolo {
  margin-left: 18px; border: 1px solid var(--vonal); background: none;
  color: var(--fg); border-radius: 20px; padding: 5px 11px;
  font-size: 13px; cursor: pointer;
}

/* --- nyitókép --- */
.nyito { position: relative; overflow: hidden; }
/* Az ingatlanoldal főképe: a hirdetés fő fotója, ezért nagy és
   középre vágott — a fotós rendszerint a homlokzat közepére komponál. */
.nyito > img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* A FŐOLDAL felső sávja ellenben szándékosan alacsony: ott a négy
   ingatlankártya a lap fő tartalma, a kép csak keret. Ez az egy fotó
   fix (a Széchenyi utcai homlokzat), ezért a kivágás hozzá hangolható. */
.nyito-sav > img { height: 230px; aspect-ratio: auto; object-position: center 72%; }
.nyito-fatyol { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,12,20,.92) 4%, rgba(8,12,20,.45) 55%, rgba(8,12,20,.12) 100%); }
.nyito-szoveg { position: absolute; left: 0; right: 0; bottom: 18px; color: #fff; }
.nyito-szoveg h1 { font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 0; line-height: 1.16; }
.nyito-szoveg p { font-size: 14px; color: #cdd7e2; margin: 7px 0 0; }

/* --- lista --- */
.racs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 0 44px; }
.kartya { background: var(--kartya); border: 1px solid var(--keret); box-shadow: var(--arnyek);
  border-radius: 10px; overflow: hidden; text-decoration: none; display: block; position: relative; }
.kartya img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kartya-torzs { display: block; padding: 12px 14px 15px; }
/* A kártya belseje <a>-ban van, ezért span — blokká kell tenni, hogy a
   margók és a paddingek érvényesüljenek. */
.kartya-nev { display: block; font-size: 16px; font-weight: 650; }
.kartya-adat { display: block; font-size: 12.5px; color: var(--halvany); margin-top: 4px; }
.kartya-ar { display: block; font-size: 17px; font-weight: 750; color: var(--kiemel); margin-top: 9px; }
.kepszam { position: absolute; right: 9px; top: 9px; background: rgba(8,12,20,.72);
  color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.elkelt { position: absolute; left: 9px; top: 9px; background: #b0392c; color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
/* Ugyanaz a jelzés az ingatlanoldal árblokkjában, ahol nincs abszolút
   pozicionált szülő – itt a normál dokumentumfolyásban, jobbra igazítva. */
.elkelt-cimke { display: inline-block; background: #b0392c; color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  margin-bottom: 6px; }

/* --- ingatlanoldal --- */
.morzsa { font-size: 12px; color: var(--tompa); padding: 16px 0 6px; }
.morzsa a { text-decoration: none; }
.fejsor { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; }
.fejsor h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.helyszin { font-size: 14px; color: var(--halvany); margin-top: 5px; }
.arblokk { text-align: right; flex: none; }
.arblokk .cimke { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--tompa); }
.arblokk .ertek { font-size: 29px; font-weight: 800; color: var(--kiemel); line-height: 1.15; white-space: nowrap; }

.doboz { border: 1px solid var(--keret); border-radius: 10px; box-shadow: var(--arnyek);
  background: var(--kartya); overflow: hidden; }

.oszlopok { display: grid; grid-template-columns: 1fr 330px; gap: 28px;
  margin-top: 24px; align-items: start; padding-bottom: 44px; }
.bevezeto { font-size: 17px; font-weight: 600; line-height: 1.5; margin: 0 0 14px; }
.leiras p { font-size: 15px; line-height: 1.72; color: var(--torzs); margin: 0 0 14px; }
h2 { font-size: 16px; font-weight: 700; margin: 28px 0 12px; letter-spacing: -.01em; }

.adatok { padding: 4px 16px; }
.adatsor { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 9px 0; border-bottom: 1px solid var(--hajszal); }
.adatsor:last-child { border-bottom: none; }
.adatsor .k { color: var(--halvany); }
.adatsor .v { font-weight: 650; text-align: right; }

.ajanlat { background: var(--dobozbg); color: var(--dobozfg); border: 1px solid var(--keret);
  border-radius: 10px; padding: 16px; margin-top: 14px; }
.ajanlat h2 { font-size: 15px; margin: 0 0 8px; }
.ajanlat p { font-size: 12.5px; color: var(--dobozhalvany); line-height: 1.6; margin: 0 0 12px; }
.gomb { display: block; background: var(--gomb); color: var(--gombfg); font-size: 14px;
  font-weight: 750; padding: 11px; border-radius: 7px; text-align: center; text-decoration: none; }
.gomb-masodlagos { display: block; border: 1px solid var(--dobozvonal); color: var(--dobozhalvany);
  font-size: 13px; font-weight: 600; padding: 10px; border-radius: 7px;
  text-align: center; margin-top: 8px; text-decoration: none; }
.apro { font-size: 11.5px; color: var(--dobozhalvany); opacity: .85; line-height: 1.55;
  margin: 12px 0 0; border-top: 1px solid var(--dobozvonal); padding-top: 11px; }

/* --- fotórács és alaprajzok --- */
.fotoracs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fotoracs img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 6px; cursor: zoom-in; }
.alaprajzok { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* A <figure> böngészői alapstílusa 40px vízszintes margót ad; nullázni kell,
   különben a rácsban zsugorodnak a kártyák és nem töltik ki a hasábot. */
.alaprajz { margin: 0; background: var(--kartya); border: 1px solid var(--keret);
  border-radius: 8px; overflow: hidden; }
.alaprajz img { display: block; width: 100%; height: 190px; object-fit: contain;
  background: #fff; padding: 6px; cursor: zoom-in; }
.alaprajz figcaption { font-size: 12.5px; font-weight: 600; padding: 9px 11px;
  border-top: 1px solid var(--hajszal); }

/* --- térkép --- */
.terkep { border: 1px solid var(--keret); border-radius: 10px; overflow: hidden; }
.terkep iframe { display: block; width: 100%; height: 340px; border: 0; }

/* --- szalonoldal --- */
.szalonracs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 0 44px; }
.szalonkartya { background: var(--kartya); border: 1px solid var(--keret); box-shadow: var(--arnyek);
  border-radius: 10px; padding: 16px; }
.szalonkartya h2 { margin: 0 0 8px; font-size: 17px; }
.szalonkartya p { font-size: 13.5px; color: var(--torzs); margin: 0 0 6px; line-height: 1.6; }
.kiemelt-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 650;
  color: var(--kiemel); text-decoration: none; }

/* --- lightbox --- */
.nagyito { position: fixed; inset: 0; background: rgba(6, 9, 15, .96); z-index: 100;
  display: flex; align-items: center; justify-content: center; }
.nagyito[hidden] { display: none; }
.nagyito img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.nagyito-vezerlo { position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; color: #fff; font-size: 14px; }
.nagyito button { background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 8px; font-size: 20px; width: 44px; height: 44px; cursor: pointer; }
.nagyito .elore { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.nagyito .vissza { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }

/* --- lábléc --- */
.lablec { border-top: 1px solid var(--vonal); background: var(--fejlecbg);
  padding: 26px 0; font-size: 13px; color: var(--halvany); }
.lablec p { margin: 0 0 5px; }
.lablec-nev { font-weight: 650; color: var(--fg); }

/* A mobilmenü gombja: alapból rejtve, a 820 px-es töréspont alatt jelenik meg.
   Fontos, hogy ez a szabály a média-lekérdezés ELŐTT álljon — azonos
   specificitásnál a később következő nyerne, és a gomb mobilon is eltűnne. */
#menu-kapcsolo { display: none; background: none; border: 0; color: var(--fg);
  font-size: 20px; cursor: pointer; margin-left: 12px; }

/* ---------------- MOBIL ---------------- */
@media (max-width: 820px) {
  .keret { padding: 0 14px; }
  .fejlec-sor { padding: 12px 14px; }
  .menu { display: none; }
  .menu.nyitva { display: block; position: absolute; top: 58px; left: 0; right: 0;
    background: var(--fejlecbg); border-bottom: 1px solid var(--vonal);
    padding: 10px 14px 14px; z-index: 20; }
  .menu.nyitva a { display: block; margin: 0; padding: 10px 0; font-size: 15px; }
  /* A rejtett menü `margin-left: auto`-ja mobilon nem érvényesül, ezért a
     gomb kapja meg — különben a space-between középre tenné. */
  #menu-kapcsolo { display: block; margin-left: auto; }
  .nyito > img { aspect-ratio: 4 / 3; }
  .nyito-sav > img { height: 170px; aspect-ratio: auto; }
  .nyito-szoveg h1 { font-size: 23px; }
  .racs { grid-template-columns: 1fr; }
  .fejsor { display: block; padding-bottom: 14px; }
  .fejsor h1 { font-size: 23px; }
  .arblokk { text-align: left; margin-top: 10px; }
  .arblokk .ertek { font-size: 25px; }
  .oszlopok { display: flex; flex-direction: column; gap: 0; }
  .oldalsav { order: -1; margin-bottom: 24px; }
  .fotoracs { grid-template-columns: repeat(2, 1fr); }
  .alaprajzok { grid-template-columns: 1fr; }
  .alaprajz img { height: 260px; }
  .szalonracs { grid-template-columns: 1fr; }
  .terkep iframe { height: 260px; }
}