/* MOSAIC oxigenterapia landing (/oxigenterapia-budapest) - a jovahagyando kepernyoterv szerint, a PMU landing (pmu-landing.css) betuivel es szinvilagaval.
   Betuk: Playfair Display (cimek, sajat tarhelyrol) + Jost (szoveg). A [szogletes zarojeles] szovegek validalasra varo helyorzok. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/playfair-display-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/playfair-display-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/playfair-display-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jost-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jost-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --sotet: #0f3a3c;      /* cimek, sotet savok */
  --sotet2: #164547;
  --mely: #0c3433;       /* sotet szekcio-hatter */
  --szoveg: #1b2e2f;
  --halk: #5c6766;
  --arany: #a07f4b;      /* felcimek, ikonok */
  --arany-v: #c9b28a;
  --arany-gomb: linear-gradient(180deg, #c6a346 0%, #d9c164 100%); /* a tobbi oldal aranygombja */
  --krem: #f3f4ef;       /* oldal-hatter */
  --krem2: #eceee7;
  --lap: #e9ebe5;        /* kartyak */
  --lap2: #ece3d1;
  --feher: #fff;
  --vonal: #e3d9c6;
  --hiba: #b1382c;
  --cim: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --test: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --szeles: 1200px;
  --arnyek: 0 1px 2px rgba(60, 40, 15, .05), 0 10px 28px rgba(60, 40, 15, .08);
}
:where(main, dialog), :where(main, dialog) * { box-sizing: border-box; }
html { scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
/* a piros akcio-sav (a MOSAIC fejlec resze) ezen a landingen nincs: a fejlec csak a menusor */
#comp-mpv0ganp { display: none !important; }
body { margin: 0; background: var(--krem); color: var(--szoveg); font: 400 16px/1.5 var(--test); -webkit-font-smoothing: antialiased; }
:where(main, dialog) img { display: block; max-width: 100%; }
:where(main, dialog) a { color: inherit; }
:where(main, dialog) :is(button, input, textarea) { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:where(main, dialog) svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:where(main, dialog) :is(h1, h2, h3, h4) { font-family: var(--cim); font-weight: 500; color: var(--sotet); margin: 0; letter-spacing: -.01em; }
:where(main, dialog) h2 { font-size: 40px; line-height: 1.12; }
:where(main, dialog) h3 { font-size: 20px; line-height: 1.25; }
:where(main, dialog) p { margin: 0; }
:where(main, dialog) ol, :where(main, dialog) ul { margin: 0; padding: 0; list-style: none; }
:where(main, dialog) :focus-visible { outline: 2px solid var(--arany); outline-offset: 3px; }
.tartalom { width: min(var(--szeles), calc(100% - 64px)); margin: 0 auto; position: relative; }
.kozepre { text-align: center; }
.halk { color: var(--halk); }
.lead { font-size: 18px; color: #2c3d3d; margin-top: 12px; }
.nyil { display: inline-block; transition: transform .2s; }
a:hover .nyil, button:hover .nyil { transform: translateX(3px); }
.ik { width: 1em; height: 1em; flex: none; }
/* helyorzo: validalasra varo adat (kesobb csere) - lasd a CLAUDE.md-t: ne talalj ki helyette adatot */
.helyorzo { color: #8a7a62; }

/* --- gombok --- */
.gomb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 50px; padding: 13px 28px; font: 600 15px/1.25 var(--test); text-decoration: none; cursor: pointer; transition: transform .1s, box-shadow .2s, filter .2s; text-align: center; }
.gomb:active { transform: translateY(1px); }
/* minden gomb ugyanolyan: a tobbi oldal aranygombja (arany atmenet, pill, feher felirat) */
.gomb-arany { background: var(--arany-gomb); color: #fff; border-color: #c6a346; text-shadow: 0 1px 1px rgba(90, 62, 10, .28); box-shadow: 0 6px 16px rgba(160, 125, 40, .26); }
.gomb-arany:hover { filter: brightness(1.05); box-shadow: 0 9px 22px rgba(160, 125, 40, .36); }
.gomb-feher { background: #fff; color: var(--sotet); border-color: #d3bf96; box-shadow: 0 4px 14px rgba(60, 40, 15, .1); }
.gomb-feher:hover { background: #fbfcf8; box-shadow: 0 7px 18px rgba(60, 40, 15, .16); }
.gomb-korvonal { background: transparent; color: var(--sotet); border: 1.5px solid var(--sotet); box-shadow: none; }
.gomb-korvonal:hover { background: rgba(15, 58, 60, .06); }
.gomb-kontur { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.gomb-kontur:hover { background: rgba(255, 255, 255, .1); }
.gomb-ketsoros { flex-direction: column; gap: 2px; padding: 13px 30px; }
.gomb-ketsoros .c { font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.gomb-ketsoros .ar { font-size: 15px; opacity: .96; font-weight: 500; }
.gomb-kicsi { padding: 10px 22px; font-size: 14px; }
.link-gomb { background: none; border: 0; padding: 0; color: var(--sotet); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* --- hero --- */
.hero { position: relative; overflow: hidden; background: linear-gradient(100deg, #f6f8f2 0%, #edefe9 100%); }
.hero-racs { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); grid-template-rows: auto 1fr; grid-template-areas: "cim gal" "szoveg gal"; column-gap: 44px; align-items: start; padding: 48px 0 52px; }
.hero-szoveg { grid-area: szoveg; padding: 0; position: relative; z-index: 2; }
.hero h1 { grid-area: cim; font-size: clamp(38px, 3.5vw, 50px); line-height: 1.06; letter-spacing: -.025em; color: #111f20; text-wrap: balance; }
.hero-al { font: 600 17px/1.5 var(--test); color: #1f3333; margin-top: 16px; }
.hero-al sup { font-size: .6em; vertical-align: super; line-height: 0; }
.hero-lab { font-size: 13px; color: var(--halk); margin-top: 4px; }
.hero-eredmeny-link { display: none; }
.hero-lead { font-size: 17px; line-height: 1.5; color: #2f4040; margin-top: 14px; max-width: 520px; }
.tenyek { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 26px 0 28px; }
.tenyek li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.25; color: #2a3a3a; }
.tenyek .teny-m { display: none; }
.teny-google { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.teny-google svg { stroke: none; }
.teny-google svg path { fill: currentColor; }
.teny-google .te-cs-m { font-size: 11px; letter-spacing: 0; }
.teny-google .te-db-sor { white-space: nowrap; font-size: clamp(9.5px, 2.55vw, 11px); }
.ikon-kor { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #efe3cb; display: inline-grid; place-items: center; color: #8a6c3e; }
.ikon-kor svg { width: 21px; height: 21px; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-link { font-size: 14.5px; color: var(--sotet); text-decoration: none; }
.hero-link u { text-underline-offset: 3px; font-weight: 500; white-space: nowrap; }
.hero-link:hover u { color: var(--arany); }
.hero-cta .gomb { flex: 0 0 auto; }
.hero-bizalom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 22px; }
.szep { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--szoveg); margin: 0; }
.szep svg { width: 22px; height: 22px; color: var(--arany); flex: none; }
.google { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-decoration: none; color: var(--szoveg); font-size: 14.5px; }
.google:hover { text-decoration: underline; }
.google > svg { width: 24px; height: 24px; stroke: none; }
.google b { font-weight: 600; }
.te-csillagok { position: relative; display: inline-block; font-size: 15px; letter-spacing: 1px; line-height: 1; color: #dadce0; }
.te-csillagok::before { content: '★★★★★'; }
.te-csillagok::after { content: '★★★★★'; position: absolute; left: 0; top: 0; width: var(--ert, 100%); overflow: hidden; white-space: nowrap; color: #f4b400; }

/* --- hero-galeria: elotte/utana fotok (a tulajdonos valogatja) --- */
.hero-galeria { grid-area: gal; min-width: 0; align-self: stretch; display: flex; flex-direction: column; margin-top: calc(clamp(38px, 4vw, 54px) * .24); position: relative; background: #fff; border: 1px solid #dfe3d8; border-radius: 22px; padding: 12px 12px 16px; box-shadow: 0 18px 40px rgba(60, 40, 20, .14); }
.hg-sav { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 14px; }
.hg-sav::-webkit-scrollbar { display: none; }
.hg-dia { margin: 0; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 0; }
.hg-kep { position: relative; flex: 1; min-height: 260px; border-radius: 14px; overflow: hidden; background: #dde1d6; }
.hg-kep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hg-dia .cimke { position: absolute; bottom: 12px; background: rgba(20, 20, 20, .72); color: #fff; font: 600 11px/1 var(--test); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; }
.hg-dia .cimke.elotte { left: 12px; }
.hg-dia .cimke.utana { right: 12px; }
.hg-dia figcaption { text-align: center; margin-top: 12px; }
.hg-dia figcaption span { display: block; font-size: 14px; color: #4a5757; margin-top: 0; }
.hg-dia figcaption i { font-style: normal; }
.hg-dia .sz-m { display: none; }
.hg-pontok { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.hg-pontok button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: #d9ccb0; cursor: pointer; }
.hg-pontok button[aria-current="true"] { background: #b89a52; transform: scale(1.25); }
.hero-galeria .lapozo { top: 38%; }
.hero-galeria .lapozo.elozo { left: 22px; }
.hero-galeria .lapozo.kovetkezo { right: 22px; }

/* --- jelek --- */
.jelek { padding: 66px 0 56px; background: var(--krem); }
.jelek h2 { font-size: 40px; }
.jel-racs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.jel { background: linear-gradient(180deg, #f4f6f0 0%, #eff1eb 100%); border: 1px solid #ede2cb; border-radius: 20px; padding: 22px 20px 28px; text-align: center; box-shadow: 0 2px 4px rgba(60, 40, 15, .04), 0 16px 36px rgba(110, 80, 30, .07); }
/* a tulajdonos kepterve (vekony.jpg) illusztracioi; a lagy szelet a maszk adja, a kartya hattere a kep hatterehez igazodik */
.jel-kep { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 12px; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); }
.jel h3 { font: 500 21px/1.25 var(--cim); color: var(--sotet); letter-spacing: -.005em; }
.jel p { font-size: 15px; color: #4a5757; margin-top: 10px; line-height: 1.55; }

/* --- allapotfelmeres (sotet) --- */
.allapot { background: var(--mely); color: #e8efee; padding: 0; overflow: hidden; }
.allapot-racs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); gap: 56px; align-items: center; padding: 42px 0; }
.monitor { position: relative; margin: 0; background: #1a1a1a; border-radius: 18px; padding: 14px 14px 30px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45), inset 0 0 0 1px #2c2c2c; transform: rotate(-1.2deg); }
.monitor img { width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; border-radius: 8px; }
.monitor::after { content: ''; position: absolute; left: 50%; bottom: 10px; width: 34px; height: 5px; border-radius: 3px; background: #3a3a3a; transform: translateX(-50%); }
.allapot-szoveg { position: relative; }
.allapot h2 { color: #fff; font-size: 40px; }
.allapot-szoveg > p { color: #d3dedc; font-size: 16px; margin-top: 16px; }
.pipa-lista { display: grid; gap: 10px; margin-top: 18px; }
.pipa-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.pipa-lista li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; background: #c6a56a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c3433' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pipa-lista b { font-weight: 600; }
.allapot-cta { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* --- kezelok --- */
.kezelok { padding: 58px 0 24px; background: var(--krem); }
.kezelok h2 { font-size: 40px; }
.kezelok .lead { font-size: 16px; color: #3b4a49; }
.kezelo-keret { position: relative; margin-top: 30px; }
.kezelo-sav { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
.kezelo-sav::-webkit-scrollbar { display: none; }
.kezelo { scroll-snap-align: start; display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; background: var(--lap); border: 1px solid #dfe3d8; border-radius: 16px; padding: 16px 20px 16px 16px; }
.kezelo img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(60, 40, 15, .14); }
.kezelo h3 { font: 600 17px/1.25 var(--cim); }
.kezelo .szerep { font-size: 14px; color: var(--arany); font-weight: 500; margin-top: 3px; }
.kezelo .bemutato { font-size: 13.5px; color: #4a5757; margin-top: 8px; line-height: 1.45; }
.lapozo { position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; border: 1px solid #cdb68a; background: #fff; color: var(--sotet); cursor: pointer; display: grid; place-items: center; box-shadow: var(--arnyek); z-index: 3; }
.lapozo svg { width: 18px; height: 18px; }
.lapozo:disabled { opacity: .35; cursor: default; }
.lapozo.elozo { left: -18px; }
.lapozo.kovetkezo { right: -18px; }

/* --- elso alkalom --- */
.elso { padding: 56px 0 30px; background: var(--krem); }
.elso-racs { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: stretch; }
.elso h2 { font-size: 38px; }
.elso .halk { font-size: 16px; margin-top: 8px; }
.lepesek3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 30px; counter-reset: lepes; }
.lepes3 { position: relative; }
.lepes3:not(:last-child)::after { content: ''; position: absolute; top: 20px; right: -28px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07f4b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.lepes3 .fej { display: flex; align-items: center; gap: 12px; }
.lepes3 .szam { font: 400 40px/1 var(--cim); color: #bf9c63; }
.lepes3 .fej svg { width: 30px; height: 30px; color: #8a6c3e; stroke-width: 1.4; }
.lepes3 h3 { font: 600 17px/1.3 var(--test); color: var(--szoveg); margin-top: 12px; }
.lepes3 p { font-size: 14px; color: #4a5757; line-height: 1.5; margin-top: 6px; }
.elso-link { margin-top: 30px; text-align: center; }
.elso-link .gomb { padding: 16px 36px; font-size: 16px; }
/* a kep magassagat a bal oszlop adja (a gomb aljaig er), a kep maga nem nyujtja a sort */
.elso-kep { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(60, 40, 20, .16); min-height: 330px; }
.elso-kep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* --- mit csinalunk --- */
.folyamat { padding: 34px 0 62px; background: var(--krem); }
.folyamat h2 { font-size: 38px; }
.folyamat .lead { font-size: 16px; max-width: 820px; color: #3b4a49; }
.lepesek-kep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; }
.lk { position: relative; }
.lk:not(:last-child)::after { content: ''; position: absolute; top: 56%; right: -34px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07f4b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.lk .fej { display: flex; align-items: flex-start; gap: 14px; min-height: 70px; }
.lk .kor { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--arany-gomb); color: #fff; display: grid; place-items: center; font: 600 17px/1 var(--test); text-shadow: 0 1px 1px rgba(90, 62, 10, .28); }
.lk h3 { font: 600 17px/1.25 var(--test); color: var(--szoveg); }
.lk .fej p { font-size: 14px; color: #4a5757; margin-top: 3px; line-height: 1.45; }
.lk img { width: 100%; aspect-ratio: 1.75; object-fit: cover; border-radius: 14px; box-shadow: var(--arnyek); }
.protokoll { margin-top: 34px; background: var(--lap); border: 1px solid #dfe3d8; border-radius: 16px; }
.protokoll summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 26px; font: 600 16px/1.3 var(--test); color: var(--sotet); }
.protokoll summary::-webkit-details-marker { display: none; }
.protokoll summary::after { content: ''; flex: none; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07f4b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v17M6 14l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
.protokoll[open] summary::after { transform: rotate(180deg); }
.protokoll ol { counter-reset: p; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 34px; padding: 6px 26px 8px; }
.protokoll li { counter-increment: p; position: relative; padding-left: 52px; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.protokoll li::before { content: counter(p); position: absolute; left: 0; top: 50%; margin-top: -19px; width: 38px; height: 38px; border-radius: 50%; background: var(--arany-gomb); color: #fff; display: grid; place-items: center; font: 600 16px/1 var(--test); text-shadow: 0 1px 1px rgba(90, 62, 10, .28); }
.protokoll li b { display: block; font: 600 15.5px/1.3 var(--test); color: var(--szoveg); white-space: nowrap; }
.protokoll li span { display: block; font-size: 14px; color: #4a5757; line-height: 1.3; margin-top: 2px; white-space: nowrap; }
.hatas { margin: 12px 26px 26px; padding-top: 22px; border-top: 1px solid #e4d8bf; }
.hatas h3 { font-size: 24px; }
.hatas-bev { font-size: 15px; color: #3b4a49; margin-top: 8px; line-height: 1.55; }
.protokoll .hatas ol { counter-reset: h; display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; padding: 0; }
.protokoll .hatas li { counter-increment: h; position: relative; display: block; min-height: 0; padding-left: 42px; font-size: 14.5px; line-height: 1.5; color: #3b4a49; }
.protokoll .hatas li::before { content: counter(h); position: absolute; left: 0; top: 0; margin-top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--arany-gomb); color: #fff; display: grid; place-items: center; font: 600 13.5px/1 var(--test); text-shadow: 0 1px 1px rgba(90, 62, 10, .28); }
.protokoll .hatas li b { display: inline; white-space: normal; font: 600 14.5px/1.5 var(--test); color: var(--szoveg); }
.hatas-forras { margin-top: 16px; font-size: 13px; color: var(--halk); line-height: 1.5; }

/* --- milyen hajhullasokra mukodik + videok --- */
.yt-cim { font-size: 24px; margin-top: 40px; }
.yt-racs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.yt-csempe { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid #dfe3d8; border-radius: 14px; background: #fff; color: var(--szoveg); cursor: pointer; overflow: hidden; box-shadow: var(--arnyek); transition: transform .15s, box-shadow .2s; }
.yt-csempe:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60, 40, 20, .18); }
.yt-kep { position: relative; display: block; aspect-ratio: 16 / 9; background: #1c1f1f; }
.yt-kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .35); display: grid; place-items: center; }
.yt-play svg { width: 20px; height: 20px; fill: #fff; stroke: none; margin-left: 3px; }
.yt-szoveg { display: block; padding: 12px 14px 14px; font-size: 14px; line-height: 1.4; font-weight: 500; }
.tipus-forras { margin-top: 18px; font-size: 13px; color: var(--halk); }
.yt-gomb { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; color: var(--sotet); font: 500 14.5px/1.3 var(--test); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.yt-gomb svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--arany-gomb); fill: #fff; stroke: none; }
.hatas-video { margin-top: 16px; }
.yt-ablak { border: 0; padding: 0; background: transparent; width: min(960px, 94vw); max-width: none; overflow: visible; }
.yt-ablak::backdrop { background: rgba(8, 22, 23, .82); }
.yt-keret { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.yt-keret.allo { aspect-ratio: 9 / 16; height: min(86vh, 760px); width: auto; margin: 0 auto; }
.yt-keret iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-zar { position: absolute; top: -44px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--sotet); font-size: 24px; line-height: 1; cursor: pointer; }
.yt-ablak form { margin: 0; }

/* --- eredmenyek --- */
.eredmenyek { padding: 56px 0 60px; background: var(--krem2); }
.eredmenyek h2 { font-size: 38px; }
.ba-csoport { margin-top: 38px; }
.ba-csoport:first-of-type { margin-top: 30px; }
.ba-fej { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ba-fej h3 { font-size: 24px; }
.ba-fej span { font-size: 13.5px; color: var(--halk); }
.ba-keret { position: relative; }
.ba-sav { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
.ba-sav::-webkit-scrollbar { display: none; }
.ba { scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid #dfe3d8; border-radius: 16px; padding: 8px; box-shadow: var(--arnyek); }
.ba-kep { position: relative; border-radius: 10px; overflow: hidden; background: #dde1d6; }
.ba-kep img { width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.ba .cimke { position: absolute; bottom: 10px; background: rgba(20, 20, 20, .72); color: #fff; font: 600 10.5px/1 var(--test); letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 6px; }
.ba .cimke.elotte { left: 10px; }
.ba .cimke.utana { right: 10px; }
.eredmenyek .lead { font-size: 17px; max-width: 820px; margin: 14px auto 0; color: #3b4a49; }
/* a masodik blokk (a szalon sajat vendegei): ugyanaz a komponens, a hatter a krem oldal-hatter (a ket blokk elvalik egymastol) */
.eredmenyek-sajat { background: var(--krem); }
/* --- 7A. Glamour-cikk: kis ajanlo-doboz a ket eredmeny-szekcio kozott (2026-10-09) --- */
.glamour-sav { background: var(--krem2); padding: 0 0 34px; }
.glamour-doboz { margin: 0 auto; max-width: 940px; display: flex; align-items: center; gap: 30px; padding: 22px 30px; background: #fff; border: 1px solid #e0e6df; border-radius: 18px; box-shadow: 0 6px 22px rgba(30, 50, 45, .07); }
.glamour-jel { flex: none; display: grid; justify-items: start; gap: 8px; padding-right: 30px; border-right: 1px solid #e3e8e0; }
.glamour-logo { display: block; width: 128px; aspect-ratio: 213 / 48; background-color: var(--sotet); -webkit-mask: url(/assets/img/sajto/logok/glamour.png) center / contain no-repeat; mask: url(/assets/img/sajto/logok/glamour.png) center / contain no-repeat; }
.glamour-cimke { font: 500 12px/1 var(--test); letter-spacing: .16em; text-transform: uppercase; color: #5b6e69; }
.glamour-szoveg { min-width: 0; }
.glamour-szoveg blockquote { margin: 0; }
.glamour-szoveg blockquote p { margin: 0; font: 500 21px/1.38 var(--cim); color: var(--sotet); text-wrap: pretty; }
.glamour-szoveg blockquote p::before { content: '„'; }
.glamour-szoveg blockquote p::after { content: '”'; }
.glamour-szoveg figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 12px; font-size: 14px; color: #5b6e69; }
.glamour-link { color: var(--sotet); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.glamour-link:hover { color: #1f6f62; }
@media (max-width: 760px) {
  .glamour-sav { padding-bottom: 26px; }
  .glamour-doboz { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 18px; border-radius: 16px; }
  .glamour-jel { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #e3e8e0; width: 100%; }
  .glamour-logo { width: 104px; }
  .glamour-szoveg blockquote p { font-size: 18px; }
}

/* kartya-felirat (az alkalmak szama + panasz); a regi (Oxygeni) kartyakon nincs, ott a figcaption hianyzik */
.ba figcaption { padding: 11px 6px 5px; text-align: center; line-height: 1.3; }
.ba figcaption b { display: block; font: 600 16.5px/1.3 var(--test); color: var(--sotet); }
.ba figcaption span { display: block; font-size: 13.5px; color: var(--halk); margin-top: 2px; }
.ba-megj { margin-top: 34px !important; margin-top: 18px; font-size: 16px; color: var(--sotet); line-height: 1.5; max-width: 760px; margin-left: auto; margin-right: auto; }
.ba-megj b { font-weight: 600; }

/* --- video + privat szfera --- */
.video-sor { padding: 58px 0 50px; background: var(--krem); }
.video-sor h2 { font-size: 38px; max-width: 900px; margin: 0 auto; }
.video-sor .lead { max-width: 820px; margin: 14px auto 0; font-size: 17px; color: #3b4a49; }
.video-racs { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: stretch; margin-top: 34px; }
.video-szoveg { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.video-doboz { position: relative; border-radius: 18px; overflow: hidden; background: #1c1f1f; aspect-ratio: 9 / 16; align-self: stretch; box-shadow: 0 22px 46px rgba(60, 40, 20, .24); }
.video-doboz > button { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.video-doboz img, .video-doboz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lejatszas { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .32); display: grid; place-items: center; transition: transform .2s; pointer-events: none; }
.video-doboz > button:hover .lejatszas { transform: scale(1.07); }
.lejatszas svg { width: 28px; height: 28px; fill: #fff; stroke: none; margin-left: 5px; }
.elonyok { display: grid; gap: 16px; }
.elony { display: flex; align-items: flex-start; gap: 18px; background: var(--lap); border: 1px solid #dfe3d8; border-radius: 16px; padding: 20px 22px; }
.elony.kiemelt { background: #fff; border-color: #cfb27a; box-shadow: 0 0 0 1px #cfb27a, var(--arnyek); }
.elony > svg { flex: none; width: 44px; height: 44px; color: #b08b51; stroke-width: 1.3; margin-top: 2px; }
.elony h3 { font: 600 18px/1.3 var(--test); color: var(--szoveg); letter-spacing: 0; }
.elony.kiemelt h3 { font-size: 20px; color: var(--sotet); }
.elony p { font-size: 15px; color: #3f4e4e; margin-top: 6px; line-height: 1.5; }
.szoba-kepek { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.szoba-kepek figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.szoba-kepek img { flex: 1 1 0; min-height: 200px; width: 100%; height: 0; object-fit: cover; border-radius: 14px; box-shadow: var(--arnyek); }
.szoba-kepek figcaption { font-size: 13.5px; color: var(--halk); margin-top: 8px; text-align: center; }

/* --- vendegvelemenyek (Trustindex-widget keretben) --- */
.velemenyek { padding: 22px 0 46px; background: var(--krem); }
.velemenyek h2 { font-size: 36px; }
.ti-doboz { margin-top: 26px; min-height: 260px; }
.ti-helykitolto { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; background: #fff; border: 1px solid #dfe3d8; border-radius: 16px; padding: 30px; color: var(--halk); }
.ti-doboz iframe { display: block; width: 100%; height: 352px; border: 0; background: transparent; }
.ti-link { margin-top: 14px; font-size: 14.5px; }
.ti-link a { color: var(--sotet); }

/* --- arak --- */
.szep-sav img { width: 112px; height: auto; aspect-ratio: 1.74; object-fit: cover; border-radius: 10px; flex: none; }
.szep-sav p { margin: 0; }
.szep-sav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; background: #fff; border: 1px solid #e3d6b8; border-radius: 14px; padding: 8px 18px; font-size: 15.5px; color: var(--sotet); text-align: left; }
.szep-sav svg { flex: none; width: 34px; height: 34px; color: var(--arany); stroke-width: 1.4; }
.szep-sav b { font-weight: 600; }
.ar-lab { margin-top: 18px; font-size: 14.5px; text-align: center; color: #3b4a49; }
/* --- miert maskepp --- */
.miert { padding: 34px 0 40px; background: var(--krem); }
.miert h2 { font-size: 36px; }
.miert-racs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.miert-kartya { background: var(--lap); border: 1px solid #dfe3d8; border-radius: 14px; padding: 20px 18px; text-align: center; }
.miert-kartya svg { width: 40px; height: 40px; color: #b08b51; stroke-width: 1.3; margin: 0 auto 10px; display: block; }
.miert-kartya h3 { font: 600 16px/1.3 var(--test); color: var(--szoveg); }
.miert-kartya p { font-size: 14px; color: #4a5757; margin-top: 4px; line-height: 1.45; }

/* --- arc + haj es GYIK --- */
.gyik-szekcio { padding: 20px 0 64px; background: var(--krem); }
.gyik-racs { max-width: 880px; margin: 0 auto; }
.gyik h2 { font-size: 34px; text-align: center; }
.gyik-lista { margin-top: 16px; }
.gyik-lista details { border-bottom: 1px solid var(--vonal); }
.gyik-lista summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; font: 500 15.5px/1.35 var(--test); color: var(--szoveg); }
.gyik-lista summary::-webkit-details-marker { display: none; }
.gyik-lista summary::after { content: '+'; flex: none; font: 400 22px/1 var(--test); color: var(--arany); }
.gyik-lista details[open] summary::after { content: '–'; }
.gyik-lista details > p { padding: 0 2px 16px; font-size: 14.5px; line-height: 1.55; color: #4a5757; }
.gyik-lista details > p + p { margin-top: -6px; }

/* --- szalon --- */
.szalon { padding: 4px 0 56px; background: var(--krem); }
.szalon-racs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.szalon-kepek { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.szalon-kepek img { width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: 16px; box-shadow: var(--arnyek); }
.szalon h2 { font-size: 32px; }
.szalon p { font-size: 15.5px; color: #3b4a49; margin-top: 12px; line-height: 1.55; }
.szalon .szep { margin: 16px 0 0; }

/* --- zaro CTA --- */
.zaro { background: var(--mely); color: #fff; padding: 28px 0; }
.zaro-racs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center; }
.zaro h2 { color: #fff; font-size: 22px; line-height: 1.3; max-width: 520px; }
.zaro-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- mobil sticky CTA --- */
.sticky-cta { display: none; }
@media (max-width: 700px) {
  .sticky-cta { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(246, 247, 242, .97); box-shadow: 0 -6px 22px rgba(60, 40, 15, .16); transform: translateY(115%); transition: transform .25s ease; }
  .sticky-cta.lathato { transform: none; }
  .sticky-cta .gomb { flex: 1; padding: 13px 16px; font-size: 15.5px; white-space: nowrap; }
  .sticky-masodlagos { flex: none; font: 500 12.5px/1.25 var(--test); color: var(--sotet); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
  body.sticky-be { padding-bottom: 76px; }
}

/* --- milyen hajhullasokra mukodik (kartyak ikonnal, a tulajdonos kepterve szerint) --- */
.tipusok { padding: 56px 0 60px; background: linear-gradient(180deg, #eceee8 0%, #f1e8d6 100%); }
.tipusok h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.tipusok .lead { font-size: 17px; color: #3b4a49; margin-top: 14px; }
.tipus-racs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
.tipus { display: flex; align-items: center; gap: 22px; padding: 28px 26px; background: linear-gradient(180deg, #fff 0%, #fbfdf7 100%); border: 1px solid #e4e8de; border-radius: 22px; box-shadow: 0 2px 4px rgba(60, 40, 15, .04), 0 18px 40px rgba(110, 80, 30, .1); }
.tipus-ikon { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #a98446; background: radial-gradient(circle at 32% 26%, #fbfdf7 0%, #f8eed8 72%); box-shadow: 0 10px 22px rgba(160, 125, 40, .2), inset 0 0 0 1px rgba(214, 185, 120, .5); }
.tipus-ikon svg { width: 40px; height: 40px; stroke-width: 1.5; }
.tipus-sz { min-width: 0; }
.tipus h3 { font: 600 19px/1.3 var(--test); color: var(--szoveg); letter-spacing: 0; }
.tipus p { font-size: 15px; color: #3f4e4e; margin-top: 8px; line-height: 1.55; }
.tipus-cta { background: linear-gradient(180deg, #fcf4e2 0%, #f7ebd0 100%); border-color: #d9bd83; box-shadow: 0 14px 32px rgba(160, 125, 40, .14); }
.tipus-cta p { margin-bottom: 16px; }
.tipus-cta .gomb { background: rgba(255, 255, 255, .55); }

/* --- mire szamithatsz + miert mukodik --- */
.varhato { padding: 54px 0 66px; background: linear-gradient(180deg, #f1e8d6 0%, #eceee8 100%); }
.varhato h2 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.02em; }
.varhato h2::after { content: ''; display: block; width: 120px; height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, #c6a346, transparent); }
.varhato-racs { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 26px; margin-top: 60px; align-items: stretch; }
.hatas-racs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 18px; }
.hatas-csempe { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, #fcfef8 0%, #f5f7f1 100%); border: 1px solid #efe3c9; border-radius: 18px; padding: 16px 14px; box-shadow: 0 2px 4px rgba(60, 40, 15, .04), 0 14px 30px rgba(120, 90, 30, .09); }
.hatas-ikon { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #a47c35; background: radial-gradient(circle at 34% 28%, #fbfcf8 0%, #f6e7c4 80%); box-shadow: 0 8px 18px rgba(160, 125, 40, .22), inset 0 0 0 2px rgba(205, 170, 85, .6); }
.hatas-ikon svg { width: 32px; height: 32px; stroke-width: 1.6; }
.hatas-csempe b { display: block; font: 500 17px/1.2 var(--cim); color: var(--sotet); letter-spacing: -.005em; }
.hatas-csempe small { display: block; font-size: 13px; line-height: 1.4; color: #4a5757; margin-top: 4px; }
.miert-mukodik { position: relative; overflow: visible; background: linear-gradient(135deg, #123f41 0%, #0b2d2f 100%); color: #dfe9e7; border-radius: 22px; box-shadow: 0 26px 54px rgba(15, 58, 60, .3); min-height: 440px; }
.mm-szoveg { position: relative; z-index: 2; width: 40%; padding: 34px 6px 34px 36px; }
.miert-mukodik h3 { color: #fff; font-size: 30px; letter-spacing: -.01em; }
.miert-mukodik p { font-size: 14.5px; line-height: 1.6; margin-top: 12px; color: #d3dedc; }
.miert-mukodik p.mm-kiemelt { font: 500 19px/1.35 var(--cim); color: #e7cd92; margin-top: 14px; }
.miert-mukodik b { color: #fff; font-weight: 600; }
/* a kepterv AI-generalt kepe (vekony/miert.jpg kivagas): a kor (hajhagyma-nagyitas) a kepbe van sutve, ezert a kep nem vagodik; a bal szelet maszk halvanyitja (a kepterv szovege nem latszik) */
/* a kepterv AI-kepe: a kezelo feje kilog a kartyabol (atlatszo hatter a kartya folott); a szovegmaradvanyok maszkja a kepbe van sutve */
.mm-foto { position: absolute; top: -46px; right: 0; bottom: 0; width: auto; max-width: 62%; aspect-ratio: 487 / 640; }
.mm-foto img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }

/* --- arak: Mivel kezdjunk? --- */
.arak { padding: 58px 0 44px; background: radial-gradient(900px 460px at 94% -8%, #fbfcf8 0%, rgba(255, 250, 240, 0) 70%), var(--krem); }
.arak-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.62fr); grid-template-areas: "cim cim cim" "k1 k2 aside" "lab lab ."; column-gap: 22px; align-items: stretch; }
.arak-cim { grid-area: cim; margin-bottom: 28px; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.025em; }
.ar-kartyak { display: contents; }
.ar-kartya.kiemelt { grid-area: k1; }
.ar-kartya.gyengebb { grid-area: k2; }
.alkalom { grid-area: aside; }
.arak-lab { grid-area: lab; }
.ar-kartya { position: relative; background: linear-gradient(180deg, #fcfef8 0%, #fbfcf8 100%); border: 1px solid #ecdfc3; border-radius: 22px; padding: 24px 24px 20px; text-align: center; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(60, 40, 15, .04), 0 16px 36px rgba(110, 80, 30, .08); }
.ar-kartya.kiemelt { border: 1.5px solid #cfae5a; background: linear-gradient(180deg, #fff 0%, #fafcf6 100%); box-shadow: 0 0 0 4px rgba(207, 174, 90, .1), 0 24px 50px rgba(160, 125, 40, .2); }
.ar-kartya.gyengebb { background: linear-gradient(180deg, #fbfdf7 0%, #f5f7f1 100%); }
.ar-badge { align-self: center; background: var(--arany-gomb); color: #fff; font: 600 11.5px/1 var(--test); letter-spacing: .09em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; margin-bottom: 14px; text-shadow: 0 1px 1px rgba(90, 62, 10, .25); box-shadow: 0 6px 14px rgba(160, 125, 40, .24); }
.ar-badge.halvany { background: #f3f5ef; color: var(--halk); border: 1px solid #e7dbc0; text-shadow: none; box-shadow: none; }
.ar-kartya h3 { font: 500 25px/1.18 var(--cim); color: var(--sotet); letter-spacing: -.01em; }
.ar-kartya .rovid { font-size: 15px; color: #3f4e4e; margin-top: 10px; line-height: 1.5; }
.ar-kartya .osszeg { font: 500 52px/1.05 var(--cim); color: var(--sotet); margin: 12px 0 16px; letter-spacing: -.02em; }
.ar-kartya.gyengebb .osszeg { font-size: 44px; }
.ar-kartya .gomb { align-self: stretch; padding: 15px 22px; font-size: 16.5px; }
.ar-kartya .pipak { text-align: left; display: grid; gap: 11px; margin: 22px 4px 0; font-size: 15px; color: #33433f; }
.ar-kartya .pipak li { display: flex; gap: 13px; align-items: center; }
.ar-kartya .pipak li::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 62% no-repeat, linear-gradient(180deg, #d9bb6a 0%, #b88e34 100%); box-shadow: 0 3px 7px rgba(160, 125, 40, .3); }
.ar-kartya.gyengebb .pipak li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07f4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 62% no-repeat, #f6ebd2; box-shadow: inset 0 0 0 1px #e4d3ab; }
.ar-kartya .masodik { margin: auto 4px 0; padding-top: 16px; border-top: 1px solid #ecdfc3; font-size: 15.5px; font-weight: 600; color: var(--sotet); text-align: center; }
.ar-kartya.kiemelt .pipak { margin-bottom: 18px; }

.alkalom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 28px; row-gap: 22px; padding-left: 6px; }
.al-szoveg { min-width: 0; padding: 4px 26px 0 0; }
.alkalom h2 { font-size: clamp(25px, 2.35vw, 31px); line-height: 1.1; letter-spacing: -.015em; }
.al-szoveg > p { font-size: 15px; color: #4a5757; margin-top: 14px; line-height: 1.6; }
.al-szoveg > p.alkalom-tapasztalat { margin-top: 20px; padding: 2px 0 2px 16px; border-left: 3px solid #d2ae5c; font-weight: 600; color: var(--sotet); font-size: 15.5px; line-height: 1.5; }
.al-kep { min-width: 0; display: flex; flex-direction: column; }
.al-fotok { position: relative; }
/* a kepterv kompoziciojat (2 foto + nyil + feliratok) egy kepkent tesszuk be; a lekerekitett, lagy szelu alakot maszk adja */
.al-komp { display: block; width: 112.7%; max-width: none; height: auto; margin-left: -12.7%; -webkit-mask-image: url(/assets/img/oxigen/alkalom-kompozicio-maszk.png); mask-image: url(/assets/img/oxigen/alkalom-kompozicio-maszk.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.al-skala { margin-top: 10px; }
.al-pontok { display: flex; align-items: center; gap: 6px; }
.al-pontok i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #c6a346; background: #fff; }
.al-pontok i.vegso { border-color: #c6a346; background: #c6a346; }
.al-vonal { flex: 1; height: 1.5px; background: #c6a346; position: relative; margin: 0 4px; }
.al-vonal::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid #c6a346; border-right: 1.5px solid #c6a346; transform: rotate(45deg); }
.al-cimkek { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; line-height: 1.3; color: #4a5757; }
.al-cimkek span { display: block; }
.al-cimkek b { display: block; font-size: 13px; color: var(--szoveg); }
.al-cimkek span:last-child { text-align: right; }
.al-forras { margin-top: 12px; font-size: 11.5px; color: var(--halk); text-align: right; }
.alkalom-doboz { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; background: linear-gradient(180deg, #f8efdc 0%, #f3e7cd 100%); border: 1px solid #e8d9b5; border-radius: 18px; padding: 24px 28px; }
.alkalom-doboz svg { flex: none; width: 54px; height: 54px; color: #b08b51; stroke-width: 1.3; padding-right: 22px; box-sizing: content-box; border-right: 1px solid #dcc994; }
.alkalom-doboz p { font: 500 21px/1.35 var(--cim); color: var(--sotet); }

@media (max-width: 1100px) {
  .tipus-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .varhato-racs { grid-template-columns: 1fr; }
  .miert-mukodik { min-height: 0; }
  .mm-szoveg { width: 100%; padding: 34px 30px 0; }
  .mm-foto { position: relative; top: auto; right: auto; bottom: auto; width: min(430px, 88%); max-width: none; margin: 0 0 0 auto; }
  .arak-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "cim cim" "k1 k2" "aside aside" "lab lab"; row-gap: 22px; }
  .alkalom { margin-top: 10px; }
}
@media (max-width: 700px) {
  .tipusok { padding: 42px 0 44px; }
  .tipusok h2, .varhato h2 { font-size: 28px; }
  .tipus-racs { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .tipus { align-items: flex-start; gap: 14px; padding: 16px 16px 18px; border-radius: 18px; }
  .tipus-ikon { width: 52px; height: 52px; }
  .tipus-ikon svg { width: 29px; height: 29px; }
  .tipus h3 { font-size: 17px; }
  .tipus p { font-size: 14px; margin-top: 5px; line-height: 1.5; }
  .tipus-cta { align-items: flex-start; }
  .varhato { padding: 42px 0 46px; }
  .varhato h2::after { margin-top: 14px; width: 90px; }
  .varhato-racs { margin-top: 28px; gap: 18px; }
  .hatas-racs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hatas-csempe { flex-direction: column; text-align: center; gap: 10px; padding: 16px 8px 18px; border-radius: 16px; }
  .hatas-ikon { width: 56px; height: 56px; }
  .hatas-ikon svg { width: 32px; height: 32px; }
  .hatas-csempe b { font-size: 16px; }
  .hatas-csempe small { font-size: 12.5px; margin-top: 3px; }
  .mm-szoveg { padding: 28px 22px 0; }
  .miert-mukodik h3 { font-size: 28px; }
  .miert-mukodik p.mm-kiemelt { font-size: 19px; }
  .mm-foto { width: min(380px, 92%); }
  .arak { padding: 42px 0 36px; }
  .arak-cim { font-size: 34px; margin-bottom: 20px; }
  .arak-racs { grid-template-columns: 1fr; grid-template-areas: "cim" "k1" "k2" "aside" "lab"; row-gap: 16px; }
  .ar-kartya { padding: 22px 18px 18px; border-radius: 18px; }
  .ar-kartya h3 { font-size: 22px; }
  .ar-kartya .osszeg { font-size: 44px; }
  .ar-kartya.gyengebb .osszeg { font-size: 38px; }
  .alkalom { grid-template-columns: 1fr; row-gap: 26px; padding-left: 0; margin-top: 14px; }
  .alkalom h2 { font-size: 26px; }
  .al-kep { width: min(270px, 74%); margin: 0 0 0 auto; }
  .alkalom-doboz { gap: 14px; padding: 18px 16px; }
  .alkalom-doboz svg { width: 40px; height: 40px; padding-right: 14px; }
  .alkalom-doboz p { font-size: 17.5px; }
}

/* --- reszponziv --- */
@media (max-width: 1100px) {
  .tartalom { width: min(var(--szeles), calc(100% - 48px)); }
  .hero h1 { font-size: 44px; }
  .hero-racs { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "cim" "gal" "szoveg"; row-gap: 16px; padding: 36px 0 0; }
  .hero-szoveg { padding: 6px 0 22px; }
  .hero-galeria { align-self: auto; margin: 0 auto; max-width: 640px; width: 100%; }
  .hg-sav { flex: none; }
  .hg-kep { flex: none; aspect-ratio: 1.5; min-height: 0; }
  .jel-racs { grid-template-columns: repeat(2, 1fr); }
  /* a zold szekcio cime a "Ismerosek ezek a jelek?" folytatasa: egymas alatt a cim van legfelul, utana a kep, majd a szoveg */
  .allapot-racs { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 0 44px; }
  .allapot-szoveg { display: contents; }
  .allapot h2 { order: -1; margin-bottom: 26px; }
  .monitor { max-width: 560px; width: 100%; margin: 0 auto 10px; }
  .kezelo-sav { grid-auto-columns: calc((100% - 20px) / 2); }
  .elso-racs { grid-template-columns: minmax(0, 1fr); }
  .elso-kep { min-height: 0; aspect-ratio: 16 / 10; }
  .ba-sav { grid-auto-columns: calc((100% - 20px) / 2); }
  .video-racs { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .szalon-racs { grid-template-columns: 1fr; gap: 24px; }
  .yt-racs { grid-template-columns: repeat(2, 1fr); }
  .miert-racs { grid-template-columns: repeat(2, 1fr); }
  .protokoll ol { grid-template-columns: repeat(2, 1fr); }
  .zaro-racs { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 70px; }
  .tartalom { width: calc(100% - 32px); }
  :where(main, dialog) h2 { font-size: 30px; }
  .hero h1 { font-size: clamp(22px, 7.4vw, 30px); line-height: 1.1; }
  .hero-racs { padding-top: 12px; row-gap: 10px; }
  .hero-al { font-size: 16px; }
  .hero-lead { font-size: 16px; }
  .hero-szoveg { padding: 4px 0 20px; }
  .tenyek { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 6px; margin: 18px 0 20px; }
  .hero-bizalom { display: none; }
  .hero-lab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
  .hero-eredmeny-link { display: inline; background: none; border: 0; padding: 0; font: 500 13px/1.3 var(--test); color: var(--sotet); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
  .tenyek .teny-m { display: flex; }
  .szep { flex: 0 1 auto; font-size: 12.5px; align-items: flex-start; }
  .google { flex: 0 1 auto; font-size: 12.5px; gap: 2px 6px; justify-content: flex-end; text-align: right; }
  .google > svg { width: 20px; height: 20px; }
  #te-minosites, .google .halk { display: none; }
  .tenyek li { min-width: 0; flex-direction: column; text-align: center; font-size: clamp(10px, 2.9vw, 12px); line-height: 1.2; gap: 6px; }
  .teny-google .ikon-kor svg { width: 22px; height: 22px; }
  .ikon-kor { width: 36px; height: 36px; }
  .ikon-kor svg { width: 18px; height: 18px; }
  .google .halk { display: none; }
  .hero-cta { align-items: stretch; }
  .hero-link { text-align: center; }
  .hero-cta .gomb-ketsoros .ar { font-size: 12.5px; white-space: nowrap; }
  .hero-cta .gomb-ketsoros { padding-left: 14px; padding-right: 14px; }
  .hero-cta .gomb { width: 100%; }
  .gomb-ketsoros .c { white-space: normal; }
  .hero-galeria { padding: 6px 6px 10px; border-radius: 18px; margin-bottom: 0; }
  .hg-kep { aspect-ratio: 1.7; }
  .hg-dia figcaption { margin-top: 8px; }
  .hg-dia figcaption span { font-size: clamp(10px, 3.3vw, 12.5px); white-space: nowrap; }
  .hg-dia .sz-d { display: none; }
  .hg-dia .sz-m { display: inline; }
  .hg-pontok { margin-top: 8px; }
  .hero-galeria .lapozo { width: 36px; height: 36px; margin-top: -18px; }
  .hero-galeria .lapozo.elozo { left: 6px; }
  .hero-galeria .lapozo.kovetkezo { right: 6px; }
  .szep-sav { font-size: 14.5px; padding: 14px 16px; }
  .jelek { padding: 44px 0 40px; }
  .jelek h2, .kezelok h2, .elso h2, .folyamat h2, .eredmenyek h2, .video-sor h2, .miert h2 { font-size: 28px; }
  .jel-racs { gap: 12px; margin-top: 24px; }
  .yt-racs { grid-template-columns: 1fr 1fr; }
  .yt-cim { font-size: 21px; }
  .szep-sav img { width: 110px; }
  .ti-doboz iframe { height: 475px; }
  .velemenyek h2 { font-size: 28px; }
  .ba-fej h3 { font-size: 20px; }
  .jel { padding: 14px 10px 18px; border-radius: 16px; }
  .jel-kep { max-width: 150px; margin-bottom: 6px; }
  .jel h3 { font-size: 16px; }
  .jel p { font-size: 13px; margin-top: 6px; }
  .allapot h2 { font-size: 28px; }
  .allapot-cta .gomb { width: 100%; }
  .kezelok { padding: 42px 0 16px; }
  .kezelo-sav { grid-auto-columns: 88%; }
  .kezelo { grid-template-columns: 92px 1fr; gap: 14px; padding: 14px; }
  .kezelo img { width: 92px; height: 92px; }
  .lapozo.elozo { left: -8px; }
  .lapozo.kovetkezo { right: -8px; }
  .elso { padding: 40px 0 20px; }
  .elso-link .gomb { width: 100%; padding: 15px 16px; font-size: 15.5px; white-space: nowrap; }
  .lepesek3 { grid-template-columns: 1fr; gap: 22px; }
  .lepes3:not(:last-child)::after { display: none; }
  .lepes3 .szam { font-size: 34px; }
  .folyamat { padding: 24px 0 44px; }
  .lepesek-kep { grid-template-columns: 1fr; gap: 28px; }
  .lk:not(:last-child)::after { display: none; }
  .lk .fej { min-height: 0; margin-bottom: 4px; }
  .lk img { margin-top: 10px; aspect-ratio: 1.8; }
  .protokoll summary { padding: 16px 18px; font-size: 15px; }
  .protokoll ol { grid-template-columns: 1fr; padding: 4px 18px 6px; }
  .hatas { margin: 8px 18px 20px; }
  .hatas h3 { font-size: 21px; }
  .eredmenyek { padding: 42px 0 46px; }
  .eredmenyek .lead { font-size: 16px; }
  .ba-sav { grid-auto-columns: 88%; }
  .video-sor { padding: 42px 0 24px; }
  .video-racs { grid-template-columns: 1fr; gap: 24px; }
  .video-doboz { width: min(360px, 100%); margin: 0 auto; align-self: auto; }
  .video-sor h2 { font-size: 27px; }
  .elony { padding: 16px 16px; gap: 14px; }
  .elony > svg { width: 36px; height: 36px; }
  .elony.kiemelt h3 { font-size: 18px; }
  .szoba-kepek { grid-template-columns: 1fr; }
  .szoba-kepek img { flex: none; height: auto; min-height: 0; aspect-ratio: 1.4; }
  .szalon-kepek { gap: 10px; }
  .szalon h2 { font-size: 27px; }
  .miert-racs { gap: 12px; }
  .miert-kartya { padding: 16px 12px; }
  .zaro { padding: 26px 0; }
  .zaro h2 { font-size: 19px; }
  .zaro-cta { flex-direction: column; }
  .zaro-cta .gomb { width: 100%; }
}
@media (max-width: 345px) {
  .tenyek { gap: 4px; }
  .szep, .google { font-size: 11px; }
  .elso-link .gomb { font-size: 13.5px; padding: 14px 10px; white-space: normal; }
  .szep svg { width: 18px; height: 18px; }
  .google > svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Ajandek Oxygeni sampon-minta + 5/10 alkalmas berlet (2026-10-07) --- */
.ajandekok { padding: 34px 0 38px; background: radial-gradient(760px 380px at 6% -8%, rgba(201, 178, 138, .17) 0%, rgba(201, 178, 138, 0) 70%), radial-gradient(720px 440px at 102% 108%, rgba(201, 178, 138, .11) 0%, rgba(201, 178, 138, 0) 70%), var(--mely); color: #d3dedc; }
.aj-fej { text-align: center; margin-bottom: 20px; }
.aj-felcim { font: 600 11.5px/1 var(--test); letter-spacing: .18em; text-transform: uppercase; color: var(--arany-v); margin-bottom: 8px; }
.ajandekok h2 { color: #fff; font-size: clamp(26px, 2.8vw, 34px); }
.aj-kartya { display: grid; align-items: center; gap: 24px; padding: 16px 20px; border: 1px solid rgba(201, 178, 138, .4); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .025) 100%); box-shadow: 0 16px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06); }
.aj-kartya + .aj-kartya { margin-top: 16px; }
.aj-minta { grid-template-columns: 124px minmax(0, 1fr); }
.aj-berlet { grid-template-columns: minmax(0, 1fr) 150px; }
.aj-berlet .aj-kep { order: 2; }
.aj-kep { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
.aj-kep img { width: 100%; height: auto; }
.aj-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--arany-gomb); color: #fff; font: 600 10.5px/1 var(--test); letter-spacing: .09em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; margin-bottom: 9px; text-shadow: 0 1px 1px rgba(90, 62, 10, .25); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.aj-badge svg { flex: none; width: 13px; height: 13px; stroke-width: 1.8; }
.aj-szoveg h3 { color: #fff; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.15; }
.aj-szoveg > p:not(.aj-badge) { color: #d3dedc; font-size: 14.5px; margin-top: 7px; max-width: 62ch; }
.berlet-sor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.berlet-doboz { position: relative; display: flex; flex-direction: column; padding: 16px 16px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .17); background: rgba(8, 36, 35, .55); }
.berlet-doboz.kiemelt { border: 1.5px solid #cfae5a; background: linear-gradient(180deg, rgba(207, 174, 90, .17) 0%, rgba(8, 36, 35, .55) 72%); box-shadow: 0 0 0 3px rgba(207, 174, 90, .1); }
.b-szalag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--arany-gomb); color: #fff; font: 600 10.5px/1 var(--test); letter-spacing: .09em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; text-shadow: 0 1px 1px rgba(90, 62, 10, .25); }
.b-cim { font: 600 11.5px/1.2 var(--test); letter-spacing: .12em; text-transform: uppercase; color: var(--arany-v); }
.b-ar { font: 500 30px/1.05 var(--cim); color: #fff; margin: 4px 0 3px; letter-spacing: -.02em; white-space: nowrap; }
.b-szamitas { font-size: 13px; line-height: 1.35; color: #aebdbb; }
.b-ajandek { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-direction: column; flex: 1; }
.b-ajandek-cim { font: 600 10.5px/1 var(--test); letter-spacing: .12em; text-transform: uppercase; color: var(--arany-v); }
.b-tetelek { display: grid; gap: 7px; margin: 8px 0 10px; }
.b-tetelek li { display: block; }
.b-tn { font: 500 16px/1.2 var(--cim); color: #fff; }
.b-arak { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; margin-top: 3px; }
.b-arak s { font: 500 14px/1 var(--test); color: #b9c7c4; text-decoration-color: rgba(217, 193, 100, .95); text-decoration-thickness: 1.5px; }
.b-arak b { font: 600 20px/1 var(--cim); color: #e6cf86; letter-spacing: -.01em; }
.b-sporolas { margin-top: auto; padding: 8px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 11px; background: var(--arany-gomb); color: #2b2205; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.b-sporolas span { font: 600 11.5px/1.2 var(--test); letter-spacing: .1em; text-transform: uppercase; }
.b-sporolas b { font: 600 22px/1 var(--cim); letter-spacing: -.01em; white-space: nowrap; }
.aj-alcim { margin: 8px auto 0; max-width: 40em; font-size: 15.5px; line-height: 1.45; color: #e3ece9; }
.aj-megj { font-size: 13px; line-height: 1.4; color: #cbd6d3; margin-top: 10px; }
@media (max-width: 1100px) {
  .aj-kartya { gap: 20px; }
  .aj-minta { grid-template-columns: 110px minmax(0, 1fr); }
  .aj-berlet { grid-template-columns: minmax(0, 1fr) 124px; }
  .berlet-sor { grid-template-columns: 1fr; gap: 14px; }
}
/* asztal: a ket kartya EGYMAS MELLETT (keskeny sampon-minta + szelesebb berlet), nem egymas alatt: a blokk a korabbi magassag fele alatt marad */
@media (min-width: 1101px) {
  .ajandekok .tartalom { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
  .aj-fej { grid-column: 1 / -1; margin-bottom: 4px; }
  .aj-kartya + .aj-kartya { margin-top: 0; }
  .aj-minta { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; }
  .aj-minta .aj-szoveg h3 { font-size: 18px; }
  .aj-minta .aj-szoveg > p:not(.aj-badge) { font-size: 14px; }
  .aj-berlet { grid-template-columns: minmax(0, 1fr) 112px; gap: 18px; align-items: start; }
  .aj-berlet .aj-szoveg h3 { font-size: 21px; }
}
/* telefon: a kep kis bélyeg a szoveg mellett (nem teljes szelessegu, magas kep): a cim / leiras mellett, a berlet-dobozok teljes szelessegben alatta */
@media (max-width: 700px) {
  .ajandekok { padding: 26px 0 30px; }
  .aj-fej { margin-bottom: 14px; }
  .ajandekok h2 { font-size: 25px; }
  .aj-alcim { font-size: 14.5px; margin-top: 6px; }
  .aj-kartya, .aj-minta, .aj-berlet { grid-template-columns: 78px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; padding: 12px 12px 14px; border-radius: 16px; }
  .aj-kartya + .aj-kartya { margin-top: 12px; }
  .aj-szoveg { display: contents; }
  .aj-kep, .aj-minta .aj-kep, .aj-berlet .aj-kep { order: 0; grid-column: 1; grid-row: 1 / span 3; width: 100%; margin: 0; border-radius: 10px; }
  .aj-szoveg > .aj-badge, .aj-szoveg > h3, .aj-szoveg > p { grid-column: 2; }
  .aj-szoveg .aj-badge { margin: 0; width: fit-content; font-size: 10px; padding: 6px 11px; }
  .aj-szoveg h3 { font-size: 18px; }
  .aj-szoveg > p:not(.aj-badge) { font-size: 13.5px; margin-top: 0; }
  .berlet-sor, .aj-szoveg > .aj-megj { grid-column: 1 / -1; }
  .berlet-sor { gap: 12px; margin-top: 6px; }
  .berlet-doboz { padding: 14px 14px 11px; }
  .b-ar { font-size: 28px; }
  .b-tn { font-size: 15.5px; }
  .b-sporolas b { font-size: 20px; }
  .aj-megj { margin-top: 2px; }
}

/* --- személyre szabott ajándékkártya sáv (az árak után; a /oxigen-ajandekkartya oldalra visz) --- */
.ajk { padding: 64px 0; background: #f8f9f4; border-top: 1px solid var(--vonal); border-bottom: 1px solid var(--vonal); }
.ajk-racs { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.ajk-kep { margin: 0; }
.ajk-kep img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1097; object-fit: cover; border-radius: 16px; box-shadow: var(--arnyek); }
.ajk h2 { font-size: 44px; line-height: 1.08; }
.ajk-szoveg > p { margin: 16px 0 22px; font-size: 17px; line-height: 1.65; color: #2c3d3d; }
.ajk-lista { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; }
.ajk-lista li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.3; }
.ajk-lista b { display: block; font-size: 16px; }
.ajk-lista small { display: block; color: var(--halk); font-size: 14px; margin-top: 2px; }
@media (max-width: 1024px) { .ajk-racs { grid-template-columns: 1fr; gap: 30px; } .ajk h2 { font-size: 36px; } }
@media (max-width: 700px) { .ajk { padding: 44px 0; } .ajk h2 { font-size: 31px; } .ajk-szoveg .gomb { width: 100%; } }

/* ============ Google Ads celoldal-terv (2026-10-31): a keresett kifejezesek alcimei es mondatai - lathato, normal szoveg ============ */
.hero-alcim { font: 500 23px/1.25 var(--cim); color: var(--sotet); margin: 4px 0 0; }
.hero-szoveg > .hero-alcim + .hero-al { margin-top: 10px; }
.hero-lead.hero-bevezeto { margin-top: 0; margin-bottom: 4px; }
.kulcsszo-szekcio { padding: 44px 0 40px; background: #fff; border-block: 1px solid #e4e8de; }
.kulcsszo-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.kulcsszo-kartya { background: var(--lap); border: 1px solid #dfe3d8; border-radius: 16px; padding: 20px 22px; }
.kulcsszo-kartya h2 { font-size: 22px; line-height: 1.22; margin-bottom: 8px; text-wrap: balance; }
.kulcsszo-kartya p { font-size: 15.5px; line-height: 1.55; color: #3c4b4b; margin: 0; }
.kulcsszo-mondat { margin: 18px auto 0; max-width: 760px; text-align: center; font-size: 16px; line-height: 1.5; color: #2f4040; }
@media (max-width: 700px) {
  .hero-alcim { font-size: 20px; }
  .kulcsszo-szekcio { padding: 30px 0 28px; }
  .kulcsszo-kartya h2 { font-size: 20px; }
}

/* ============ Google Ads celoldal (main.celoldal: /hajhullas-kezeles-budapest): telefonon az elso gomb az elso kepernyon (Feri, 2026-10-31) ============
   a fo gomb rogton a bevezeto mondat alatt; a tobbi (95%, labjegyzet, leiras, tenyek, ertekeles) utana, valtozatlanul lathato */
@media (max-width: 700px) {
  main.celoldal .hero-szoveg { display: flex; flex-direction: column; }
  main.celoldal .hero-szoveg > * { order: 3; }
  main.celoldal .hero-szoveg > .hero-bevezeto { order: 1; }
  main.celoldal .hero-szoveg > .hero-cta { order: 2; margin-top: 14px; margin-bottom: 6px; }
}