/* ============================================================
   CÉL CENTRUM — látványterv „B" (világos változat)
   Koncepció: „A raj" — a logó madarai kirepülnek a kérdőjelből.
   Világos, meleg, levegős. Sötét felület CSAK a lábléc.
   Az arany kizárólag FELÜLET (gomb, vonal, keret) — soha nem szöveg.
   ============================================================ */

:root{
  /* --- márkaszínek --- */
  --krem:#F6F4EF;
  --krem-2:#EFEBE1;
  --feher:#FFFDFA;
  --barna:#291C12;
  --barna-lagy:#4A3B2C;
  --sarga:#E9D77E;          /* Kati tablajarol merve */
  --sarga-halvany:#F2E6B0;
  --sarga-mely:#D9C356;
  --turkiz:#5CAFB5;
  --turkiz-sotet:#2C7C82;
  --turkiz-melyebb:#256A70;   /* apró szövegek krém háttéren (5,6:1) */
  --turkiz-vilagos:#A7D7DA;
  --turkiz-halvany:#E4F1F1;
  --vonal:#E6DDCE;
  /* 2026.07.25 – Gabi kerese: a lablec a MARKA turkize legyen, mint az eles
     celcentrum.hu lablecen (ott #5BAFB5). A szoveg ezert BARNA, nem krem:
     feher felirattal 2,54:1 (bukja), barnaval 6,50:1 (AA+). */
  --lablec-alap:#5CAFB5;      /* lablec-felulet = marka turkiz */
  --lablec-mely:#1F5D62;      /* mely turkiz - MAR CSAK a Demjan-panel */
  --csillag:#E8C34A;          /* CSAK Google-ertekeles csillagai */
  --lablec-szoveg:#291C12;    /* egyseges lablec-szovegszin (6,50:1 a turkizen) */
  --krem-halk:rgba(246,244,239,.74);
  --krem-halkabb:rgba(246,244,239,.52);
  /* --- forma --- */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --script:'Allura',cursive;
  --max:1220px;
  --r-kartya:26px;
  --r-nagy:38px;
  --arnyek:0 26px 60px -34px rgba(41,28,18,.34);
  --arnyek-emelt:0 34px 74px -40px rgba(41,28,18,.42);
  /* --- madár-maszkok --- */
  --b1:url(../img/madar-1.png); --b2:url(../img/madar-2.png); --b3:url(../img/madar-3.png);
  --b4:url(../img/madar-4.png); --b5:url(../img/madar-5.png); --b6:url(../img/madar-6.png);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:17px;line-height:1.72;
  color:var(--barna);background:var(--krem);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}  /* height:auto KELL: e nelkul a HTML height attributuma felulirja a CSS-t,
     es a logo 273px magasra nott a fejlecben (2026.07.24) */
a{color:inherit;text-decoration:none}
::selection{background:var(--sarga);color:var(--barna)}

/* ---------- tipográfia ----------
   2026.07.28 – Kati (grafikus) észrevétele Gabi továbbításában: „ha a nagy sötétbarna
   címeknél a betűközt egy kicsit nagyobbra hagyjuk, akkor a kommunikáció nyugodtabb,
   nem olyan, mintha zsúfolódna, szorongna a betű. Belső stabilitás… ahogy kimondjuk,
   ahogy írva látjuk, az nem kell zsúfolt legyen."
   Igaza van: a Playfair Display negatív betűközzel display-méretben tényleg szoros.
   A negatív tracking ezért kikerült (h1: -.03em → -.004em, h2: -.015em → .006em,
   h3: -.01em → .01em). A sortörések nem változtak, mert a szélesedés soronként
   csak néhány pixel. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:.004em;color:var(--barna)}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem);line-height:1.09;letter-spacing:-.004em}
h2{font-size:clamp(2rem,4.4vw,3.3rem);letter-spacing:.006em}
h3{font-size:clamp(1.25rem,2.1vw,1.6rem);letter-spacing:.01em}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.script{font-family:var(--script);font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;
  color:var(--turkiz-sotet);display:inline-block;font-weight:400;letter-spacing:0}
.kicker{font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.75em;color:var(--turkiz-melyebb)}
.kicker::before{content:"";width:30px;height:1px;background:var(--turkiz)}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.68;color:var(--barna-lagy)}
.maxw{max-width:58ch}

/* ---------- elrendezés ---------- */
.wrap{width:min(100% - 44px,var(--max));margin-inline:auto}
.wrap.keskeny{width:min(100% - 44px,880px)}
.szekcio{position:relative;padding:clamp(74px,9.5vw,132px) 0;overflow:hidden}
.szekcio.tomor{padding:clamp(52px,6.5vw,84px) 0}
.grid{display:grid;gap:clamp(28px,4vw,60px)}
.g2{grid-template-columns:1fr 1fr}
.split{grid-template-columns:1.02fr .98fr;align-items:center}
.stack{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.fej{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;
  margin-bottom:clamp(44px,5vw,68px)}

/* háttér-rétegek — a ritmus krém / fehér / türkiz-halvány váltásból jön */
.bg-feher{background:var(--feher)}
.bg-krem{background:var(--krem)}
.bg-krem2{background:var(--krem-2)}
.bg-turkiz{background:var(--turkiz-halvany)}

/* meleg fény-derengés (a mélység a színből jön, nem sötétből) */
.derengo::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 60% at 88% 6%,rgba(233,215,126,.34),transparent 62%),
    radial-gradient(60% 55% at 4% 92%,rgba(92,175,181,.16),transparent 60%);
}
/* papírszemcse */
.szemcse::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
.hatar{height:1px;background:linear-gradient(90deg,transparent,rgba(92,175,181,.75),rgba(167,215,218,.5),transparent)}

/* ---------- madár-motívum (a logóból) ---------- */
.madar{
  position:absolute;pointer-events:none;z-index:1;
  width:calc(var(--w)*1px*var(--s,1));height:calc(var(--h)*1px*var(--s,1));
  background:currentColor;
  -webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat;
  opacity:var(--o,.32);
  transform:rotate(var(--r,0deg));   /* statikus, nyugvó raj — nincs lebegés */
}
.b1{--u:var(--b1);--w:182;--h:158}
.b2{--u:var(--b2);--w:165;--h:220}
.b3{--u:var(--b3);--w:202;--h:125}
.b4{--u:var(--b4);--w:164;--h:113}
.b5{--u:var(--b5);--w:107;--h:138}
.b6{--u:var(--b6);--w:136;--h:131}
.raj{position:absolute;inset:0;color:var(--turkiz);pointer-events:none;z-index:1}

/* ---------- gombok ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.62em;
  font-size:.94rem;font-weight:600;letter-spacing:.01em;
  padding:1.02em 1.9em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .32s cubic-bezier(.2,.9,.3,1),box-shadow .32s,background-color .3s,color .3s,border-color .3s;
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.btn:hover svg{transform:translateX(4px)}
.btn-sarga{background:var(--sarga);color:var(--barna);box-shadow:0 14px 32px -16px rgba(201,168,60,.55)}
.btn-sarga:hover{background:#F0E29A;transform:translateY(-2px);
  box-shadow:0 20px 42px -16px rgba(201,168,60,.65)}
.btn-vonal{border-color:rgba(41,28,18,.22);color:var(--barna)}
.btn-vonal:hover{border-color:var(--turkiz-sotet);color:var(--turkiz-sotet);transform:translateY(-3px)}
.btn-szoveg{padding:0;font-size:.9rem;color:var(--turkiz-melyebb);border-radius:0;
  border-bottom:1.5px solid rgba(44,124,130,.38);background:none}
.btn-szoveg:hover{border-color:currentColor;transform:none}

/* ---------- fejléc ---------- */
.fejlec{position:fixed;top:0;left:0;right:0;z-index:60;padding:20px 0;
  transition:background-color .45s,box-shadow .45s,padding .45s,backdrop-filter .45s}
.fejlec.tapad{background:rgba(255,253,250,.92);backdrop-filter:blur(14px) saturate(1.2);
  padding:11px 0;box-shadow:0 1px 0 rgba(92,175,181,.45),0 16px 38px -32px rgba(41,28,18,.6)}
.fejlec-sor{display:flex;align-items:center;gap:26px;width:min(100% - 44px,1360px);margin-inline:auto}
.marka img{width:clamp(178px,19vw,248px);transition:width .45s}
.fejlec.tapad .marka img{width:clamp(158px,15vw,208px)}
.menu{display:flex;gap:clamp(12px,1.7vw,26px);margin-left:auto;list-style:none}
.menu a{font-size:.83rem;font-weight:500;color:var(--barna-lagy);position:relative;padding:6px 0;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--turkiz);transition:right .38s cubic-bezier(.2,.9,.3,1)}
.menu a:hover{color:var(--barna)}
.menu a:hover::after{right:0}
.fejlec .btn{padding:.78em 1.4em;font-size:.83rem}
/* A fejléc CTA-ja SOHA nem törhet két sorba: rajta múlik a foglalás, és tört
   szöveggel a fejléc is megnő. Flex-elemként alapból zsugorodott és tördelt
   (2026.07.30, Gabi képernyőjén ~1100 px szélességnél). Helyet a menü ad, lásd
   az 1280 / 1180 px-es szabályokat lentebb. */
.fejlec-cta{white-space:nowrap;flex-shrink:0}
.hamburger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid rgba(41,28,18,.22);
  border-radius:999px;background:rgba(255,253,250,.7);color:var(--barna);cursor:pointer;position:relative}
.hamburger span,.hamburger::before,.hamburger::after{content:"";position:absolute;left:13px;right:13px;
  height:1.5px;background:currentColor;transition:transform .35s,opacity .25s}
.hamburger::before{top:17px}.hamburger span{top:22.5px}.hamburger::after{bottom:17px}
.nyitva .hamburger::before{transform:translateY(5.5px) rotate(45deg)}
.nyitva .hamburger span{opacity:0}
.nyitva .hamburger::after{transform:translateY(-5.5px) rotate(-45deg)}

.mobilmenu{position:fixed;inset:0;z-index:55;background:var(--krem);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:100px 34px 40px;
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;overflow:hidden}
.nyitva .mobilmenu{opacity:1;visibility:visible}
.mobilmenu a{font-family:var(--serif);font-size:clamp(1.6rem,6.4vw,2.3rem);color:var(--barna);
  padding:8px 0;opacity:0;transform:translateY(22px);transition:opacity .5s,transform .5s,color .3s}
.nyitva .mobilmenu a{opacity:1;transform:none;transition-delay:calc(.07s * var(--i))}
.mobilmenu a:hover{color:var(--turkiz-sotet)}
.mobilmenu .btn{margin-top:24px;align-self:flex-start;font-size:1rem}

.progress{position:fixed;top:0;left:0;height:2px;z-index:70;width:0;
  background:linear-gradient(90deg,var(--turkiz-sotet),var(--turkiz))}

/* ---------- HERO (világos) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:safe center;
  padding:clamp(132px,15vh,196px) 0 clamp(70px,9vh,110px);overflow:hidden;
  background:
    radial-gradient(66% 58% at 84% 4%,rgba(233,215,126,.42),transparent 62%),
    radial-gradient(58% 60% at 2% 86%,rgba(92,175,181,.22),transparent 60%),
    linear-gradient(168deg,var(--feher) 0%,var(--krem) 48%,var(--krem-2) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,64px);
  align-items:center;position:relative;z-index:3}
.qmark{
  position:absolute;right:-3%;top:-6%;width:min(44vw,540px);aspect-ratio:520/806;z-index:0;
  background:linear-gradient(160deg,var(--sarga) 0%,var(--sarga-halvany) 100%);
  -webkit-mask:url(../img/kerdojel.png) center/contain no-repeat;
  mask:url(../img/kerdojel.png) center/contain no-repeat;
  opacity:.16;will-change:transform;
}
.hero .lead{max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}

/* kiemelt szó + kézzel húzott arany vonal */
.kiemelt{position:relative;color:var(--turkiz-sotet);white-space:nowrap}
.huzas{position:absolute;left:-2%;right:-2%;bottom:-.16em;width:104%;height:.28em;overflow:visible}
.huzas path{fill:none;stroke:var(--turkiz);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1) .9s}


.hero-media{position:relative;z-index:2}
.hero-media::before{ /* organikus türkiz folt a portré mögött */
  content:"";position:absolute;inset:-8% -6% -4% -10%;z-index:-1;
  background:linear-gradient(150deg,var(--turkiz-halvany),rgba(167,215,218,.55));
  border-radius:56% 44% 40% 60%/50% 46% 54% 50%;
}
.portre{position:relative;border-radius:52% 48% 46% 54%/44% 42% 58% 56%;overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--arnyek-emelt);border:1px solid rgba(92,175,181,.5)}
.portre img{width:100%;height:100%;object-fit:cover;object-position:52% 22%}
.portre-jelveny{
  position:absolute;left:-6%;bottom:7%;z-index:4;display:flex;align-items:center;gap:12px;
  background:var(--feher);border:1px solid var(--vonal);border-radius:999px;
  padding:11px 20px 11px 14px;box-shadow:var(--arnyek);
}
.portre-jelveny .csillagok{display:flex;gap:2px;color:var(--csillag)}
.portre-jelveny svg{width:15px;height:15px}
.portre-jelveny b{font-size:.92rem;font-weight:600;color:var(--barna)}
.portre-jelveny span{font-size:.74rem;color:var(--barna-lagy);letter-spacing:.03em}
/* Az átlag és a darabszám közti elválasztó – enélkül „5,0 29" egy számnak látszik. */
.portre-jelveny i{font-style:normal;color:#B9AB94;margin-inline:5px 6px}

.gorgetes{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--barna-lagy)}
.gorgetes i{display:block;width:1px;height:52px;background:linear-gradient(var(--turkiz-sotet),transparent)}

/* ---------- tény-sáv ---------- */
.tenyek{background:var(--feher);padding:clamp(38px,4.6vw,58px) 0;position:relative;z-index:3;
  border-block:1px solid var(--vonal)}
.tenyek-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.teny b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.6vw,2.9rem);
  color:var(--barna);line-height:1;letter-spacing:-.02em}
.teny span{display:block;margin-top:9px;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--turkiz-melyebb)}
.teny+.teny{border-left:1px solid var(--vonal)}

/* ---------- „ismerős?" kérdések ---------- */
.kerdesek{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;max-width:960px;margin-inline:auto;
  position:relative;z-index:3}
.kerdes{
  display:flex;gap:14px;align-items:flex-start;padding:19px 24px;border-radius:20px;
  background:var(--feher);border:1px solid var(--vonal);color:var(--barna-lagy);
  font-size:1rem;line-height:1.55;
  transition:opacity .7s ease,box-shadow .4s,border-color .4s;
}
/* Az elrejtes CSAK JS mellett: enelkul a kartyak lathatatlanok maradnanak. */
.js .kerdes{opacity:0}
.js .kerdes.in{opacity:1}
.kerdes:hover{box-shadow:var(--arnyek);border-color:var(--turkiz-vilagos)}
.kerdes::before{content:"?";font-family:var(--serif);font-size:1.5rem;line-height:1;
  color:var(--turkiz);flex:none;margin-top:-2px}
.megnyugtat{margin:clamp(38px,4vw,54px) auto 0;max-width:62ch;text-align:center;position:relative;z-index:3;
  font-family:var(--serif);font-size:clamp(1.3rem,2.5vw,1.85rem);line-height:1.42}
.megnyugtat em{font-style:italic;color:var(--turkiz-sotet)}

/* ---------- szegmens-választó ---------- */
.valaszto{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(34px,4vw,50px);
  position:relative;z-index:3}
.valaszto button{
  font-family:var(--sans);font-size:.93rem;font-weight:600;color:var(--barna-lagy);
  background:var(--feher);border:1.5px solid var(--vonal);border-radius:999px;
  padding:.92em 1.55em;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;
  transition:all .34s cubic-bezier(.2,.9,.3,1);
}
.valaszto button:hover{border-color:var(--turkiz);color:var(--barna);transform:translateY(-2px)}
.valaszto button[aria-selected="true"]{
  background:var(--turkiz-sotet);border-color:var(--turkiz-sotet);color:var(--feher);
  box-shadow:0 16px 32px -20px rgba(44,124,130,.9)}
.valaszto button[aria-selected="true"] .pont{background:var(--turkiz-sotet)}
.pont{width:7px;height:7px;border-radius:50%;background:var(--turkiz);flex:none;transition:background .3s}

.panel{display:none}
.panel.aktiv{display:block;animation:panel-be .5s ease}
@keyframes panel-be{from{opacity:0}to{opacity:1}}
.panel-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:center;
  position:relative;z-index:3}
.panel-kep{position:relative;border-radius:var(--r-nagy);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--arnyek)}
.panel-kep img{width:100%;height:100%;object-fit:cover}
.ajanlat{margin-top:6px;background:var(--feher);border:1px solid var(--vonal);border-radius:var(--r-kartya);
  padding:22px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;width:100%;box-shadow:var(--arnyek)}
.ajanlat .cimke{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--turkiz-melyebb);
  display:block;margin-bottom:3px}
.ajanlat .nev{font-family:var(--serif);font-size:1.28rem;line-height:1.2}
.ajanlat .ar{margin-left:auto;font-family:var(--serif);font-size:1.42rem;white-space:nowrap}
.ajanlat .ar small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  color:var(--barna-lagy);text-align:right;margin-top:2px}

/* ---------- rólam ---------- */
.rolam-media{position:relative}
.rolam-media .keret{border-radius:46% 54% 52% 48%/40% 46% 54% 60%;overflow:hidden;aspect-ratio:5/6;
  border:1px solid rgba(92,175,181,.5);box-shadow:var(--arnyek-emelt)}
.rolam-media img{width:100%;height:100%;object-fit:cover}
.idezet-blokk{border-left:2.5px solid var(--turkiz);padding-left:22px;margin:4px 0;
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.45}
.alairas{font-family:var(--script);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--turkiz-sotet);line-height:.9;margin-top:6px}

/* ---------- szolgáltatás-kártyák ---------- */
.kartyak{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px);position:relative;z-index:3}
/* minmax(0,1fr) KELL: sima 1fr mellett a racs-elem min-width-je auto, es a
   nem-zsugorodo bekezdes szethuzta a kiemelt kartyat a masik ketto rovasara. */
.kartya{
  position:relative;background:var(--feher);border:1px solid var(--vonal);border-radius:var(--r-nagy);
  padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.9,.3,1),box-shadow .45s,border-color .45s;
}
.kartya::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(233,215,126,.30),transparent 68%)}
.kartya:hover{box-shadow:var(--arnyek-emelt);border-color:rgba(92,175,181,.7)}
.kartya:hover::before{opacity:1}
.kartya-ikon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:var(--turkiz-halvany);color:var(--turkiz-sotet);border:1px solid rgba(92,175,181,.35)}
.kartya-ikon svg{width:26px;height:26px}
.kartya p{color:var(--barna-lagy);font-size:.98rem}
.kinek{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--turkiz-melyebb)}
.ar-sor{margin-top:auto;padding-top:18px;border-top:1px dashed var(--vonal);width:100%;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ar-sor b{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.ar-sor span{font-size:.78rem;color:var(--barna-lagy)}

/* ---------- folyamat: csempe – iránytű – csempe ---------- */
.folyamat-grid{display:grid;grid-template-columns:1fr minmax(230px,300px) 1fr;
  gap:clamp(18px,2.6vw,40px);align-items:center;position:relative;z-index:3}
.oszlop{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}
.iranytu-doboz{display:grid;place-items:center;padding:8px 0}
.iranytu{width:100%;max-width:300px;aspect-ratio:1;position:relative}
.iranytu svg{width:100%;height:100%;overflow:visible}
.iranytu .ut{fill:none;stroke:var(--vonal);stroke-width:2}
.iranytu .ut-aktiv{fill:none;stroke:var(--turkiz-sotet);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 4px 10px rgba(44,124,130,.35));
  transition:stroke-dashoffset .85s cubic-bezier(.2,.9,.3,1)}
.iranytu .jel{fill:var(--vonal);transition:fill .5s}
.iranytu .jel.eleven{fill:var(--turkiz-sotet)}
.mutato{position:absolute;inset:0;display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.2,.9,.3,1)}
.mutato i{display:block;width:2.5px;height:34%;border-radius:3px;margin-bottom:38%;
  background:linear-gradient(var(--turkiz),var(--turkiz-sotet))}
.iranytu-mag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;background:var(--feher);
  border:1px solid rgba(92,175,181,.55);box-shadow:var(--arnyek);
  display:grid;place-items:center;text-align:center;line-height:1}
.iranytu-mag b{display:block;font-family:var(--serif);font-size:1.75rem;color:var(--barna)}
.iranytu-mag span{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turkiz-melyebb);margin-top:4px}
.lepes{
  border:1px solid var(--vonal);border-radius:var(--r-kartya);background:var(--feher);
  padding:clamp(20px,2.2vw,28px);
  opacity:.58;transition:opacity .6s,border-color .6s,transform .6s,box-shadow .6s;
}
.lepes.eleven{opacity:1;border-color:rgba(92,175,181,.75);box-shadow:var(--arnyek-emelt);transform:translateY(-4px)}
.lepes .szam{font-family:var(--serif);font-size:.92rem;color:var(--turkiz-melyebb);letter-spacing:.2em;
  display:block;margin-bottom:6px}
.lepes h3{margin-bottom:7px;font-size:clamp(1.15rem,1.8vw,1.42rem)}
.lepes p{color:var(--barna-lagy);font-size:.95rem;margin:0}

/* ---------- vélemények (statikus rács, nincs futószalag) ---------- */
.szalag{position:relative;width:min(100% - 44px,var(--max));margin-inline:auto}
.szalag-sor{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,26px)}
/* ---------- élő Google-vélemények (kreativ-google-velemenyek) ----------
   A bővítmény szándékosan örökli a téma betűjét és szövegszínét, a többit
   CSS-változóval hangoljuk a márkához, hogy egy lapon lehessen a kézzel
   felvett vélemény-kártyákkal. A blokk a Bemutatkozás oldalon, türkiz
   szekcióban ül, ezért a kártya krém-fehér és a szöveg barna. */
.kgv-keret .kgv{
  --kgv-card-bg:var(--feher);
  --kgv-card-border:var(--vonal);
  --kgv-radius:var(--r-kartya);
  --kgv-shadow:var(--arnyek);
  --kgv-star:var(--csillag);
  --kgv-star-empty:rgba(41,28,18,.16);
  --kgv-muted:var(--barna-lagy);
  --kgv-gap:22px;
  color:var(--barna)
}
.kgv-keret .kgv__score{font-family:var(--serif);font-weight:500}
.kgv-keret .kgv__card{padding:28px 30px}
.kgv-keret .kgv__text{font-size:.96rem;line-height:1.62;color:var(--barna-lagy)}
.kgv-keret .kgv__author{font-family:var(--serif);font-size:1.02rem;color:var(--barna)}
.kgv-keret .kgv__date,
.kgv-keret .kgv__source{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--turkiz-melyebb)}

.velemeny{background:var(--feher);border:1px solid var(--vonal);
  border-radius:var(--r-kartya);padding:28px 30px;box-shadow:var(--arnyek);
  display:flex;flex-direction:column;gap:12px}
.velemeny-fej{display:flex;align-items:center;justify-content:space-between}
.csillagok{display:flex;gap:2px;color:var(--csillag)}
.csillagok svg{width:16px;height:16px}
.velemeny p{font-size:.96rem;line-height:1.62;color:var(--barna-lagy);margin:0}
.velemeny .szerzo{font-family:var(--serif);font-size:1.02rem;margin-top:auto}
.velemeny .forras{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--turkiz-melyebb)}
/* Páratlan darabszámnál az utolsó vélemény kitölti a sort. A rács kéthasábos,
   tehát 3 véleménynél (Személyiségfejlesztés, 2026.07.28) a harmadik egyedül
   maradt, mellette féloldalas lyukkal – és pont a leghosszabb szöveg állt ott,
   keskeny hasábban, nagyon magasra nyúlva. A `p` sorhossza korlátozva marad,
   mert a teljes szélesség (~1150px) már olvashatatlanul hosszú sorokat adna. */
.szalag-sor > .velemeny:last-child:nth-child(odd){grid-column:1 / -1}
.szalag-sor > .velemeny:last-child:nth-child(odd) p{max-width:88ch}
.g-ikon{width:20px;height:20px}

/* ---------- eredmény / videók ---------- */
.eredmeny-lista{display:grid;gap:12px;list-style:none;width:100%}
.eredmeny-lista li{display:flex;gap:13px;align-items:flex-start;font-size:1.04rem}
.eredmeny-lista svg{width:22px;height:22px;flex:none;color:var(--turkiz-sotet);margin-top:2px}
.video{position:relative;border-radius:var(--r-nagy);overflow:hidden;aspect-ratio:16/10;
  box-shadow:var(--arnyek);background:var(--krem-2);cursor:pointer}
.video video,
.video .video-poszter{width:100%;height:100%;object-fit:cover;display:block}
/* Az iframe a poszterkép FÖLÉ kerül, abszolút pozícióban: normál folyásban a
   fix arányú, overflow:hidden dobozból kicsúszna (hang szólna, kép nem). */
.video iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;z-index:2}
.video.jatszik .video-poszter{opacity:0}
.video-jel{position:absolute;inset:0;display:grid;place-items:center;
  appearance:none;-webkit-appearance:none;border:0;padding:0;width:100%;cursor:pointer;
  transition:opacity .4s;background:linear-gradient(0deg,rgba(41,28,18,.34),transparent 55%)}
.video.jatszik .video-jel,
.video.kerdez .video-jel{opacity:0;pointer-events:none}
.video-jel i{width:74px;height:74px;border-radius:50%;background:rgba(233,215,126,.98);
  display:grid;place-items:center;box-shadow:0 18px 40px -14px rgba(201,168,60,.7);
  transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.video:hover .video-jel i{transform:scale(1.09)}
.video-jel:focus-visible{outline:3px solid var(--turkiz-sotet);outline-offset:-3px}
.video-jel svg{width:26px;height:26px;color:var(--barna);margin-left:3px}

/* Hozzájárulás-kérő a YouTube-beágyazás előtt (facade). */
.video-suti{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;text-align:center;cursor:default;
  padding:clamp(16px,4%,30px);background:rgba(41,28,18,.9);backdrop-filter:blur(3px)}
.video-suti p{margin:0;color:#fff;font-size:.95rem;line-height:1.5;max-width:38ch}
.video-suti-gombok{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.video-suti .btn{cursor:pointer}
.video-suti .btn-szoveg{color:#fff;text-decoration:underline}
@media (max-width:520px){
  .video-suti{gap:12px}
  .video-suti p{font-size:.86rem}
}

/* ---------- dobozok ---------- */
.doboz{border-radius:var(--r-nagy);padding:clamp(30px,4vw,54px);
  border:1px solid var(--vonal);background:var(--feher);box-shadow:var(--arnyek);position:relative;z-index:3}
.doboz.halk{background:transparent;border-style:dashed;box-shadow:none}
.doboz-sor{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:.5em;font-size:.76rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--turkiz-melyebb);
  border:1px solid rgba(92,175,181,.45);border-radius:999px;padding:.55em 1.05em;white-space:nowrap}
.probono-lab .pill{white-space:normal;letter-spacing:.1em}

/* ---------- pro bono (halk, de saját arculattal) ---------- */
.probono{
  position:relative;overflow:hidden;z-index:3;
  border-radius:clamp(28px,3.4vw,46px);
  padding:clamp(34px,4.4vw,62px) clamp(26px,4vw,60px);
  background:linear-gradient(135deg,var(--feher) 0%,var(--turkiz-halvany) 118%);
  border:1px solid rgba(92,175,181,.38);
  box-shadow:var(--arnyek);
}
.probono::before{ /* meleg fénykör a sarokban */
  content:"";position:absolute;right:-10%;top:-34%;width:58%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(233,215,126,.34),transparent 66%);
}
.probono-be{position:relative;z-index:2;max-width:60ch;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.probono h3{font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.24;max-width:22ch}
.probono p{color:var(--barna-lagy);font-size:1rem;margin:0}
.probono-lab{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:4px}
/* elrepülő madár — a logó motívuma, a „szárnyra kapás" képe */
.probono-madar{
  position:absolute;right:3%;bottom:-8%;z-index:1;pointer-events:none;
  width:clamp(140px,26%,268px);aspect-ratio:165/220;
  background:var(--turkiz);opacity:.2;
  -webkit-mask:var(--b2) center/contain no-repeat;mask:var(--b2) center/contain no-repeat;
}
.probono-vonal{width:54px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--turkiz-sotet),rgba(92,175,181,.6))}

/* ---------- záró CTA ---------- */
.zaro-kartya{
  position:relative;z-index:3;text-align:center;border-radius:clamp(30px,4vw,54px);
  padding:clamp(44px,6vw,88px) clamp(26px,5vw,72px);
  background:linear-gradient(150deg,var(--feher) 0%,var(--krem) 100%);
  border:1.5px solid rgba(92,175,181,.55);
  box-shadow:0 40px 90px -50px rgba(201,168,60,.55),inset 0 1px 0 rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;gap:22px;overflow:hidden;
}
.zaro-kartya::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% -10%,rgba(233,215,126,.38),transparent 62%)}
.zaro-kartya h2{font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:17ch}
.zaro-kartya>*{position:relative;z-index:2}

/* ---------- lábléc (az EGYETLEN sötét felület) ----------
   EGYSÉGES tipográfia: minden szöveg és link .92rem, azonos krém színnel.
   Korábban négyféle méret és háromféle áttetszőség keveredett itt. */
.lablec{background:var(--lablec-alap);color:var(--lablec-szoveg);
  padding:clamp(56px,6vw,84px) 0 26px;position:relative;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--sarga),var(--turkiz),transparent) 1;
  font-size:.92rem;line-height:1.75}
.lablec p,.lablec li,.lablec span,.lablec a{font-size:.92rem;color:var(--lablec-szoveg)}
.lablec h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sarga-halvany);margin-bottom:16px;font-weight:600}
.lablec a{transition:color .3s}
.lablec a:hover{color:var(--sarga)}
.lablec-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,54px)}
.lablec ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.lablec-logo{width:250px;margin-bottom:18px}
.lablec-marka p{max-width:38ch}

/* !! A lablec `a` szabalya kulonben ELVISZI a gomb sajat szinet: a felirat
   krem lett a sarga gombon (olvashatatlan), hoveren pedig sarga a sargan. */
.lablec .btn,.lablec .btn:hover{font-size:.88rem}
.lablec .btn-sarga{background:var(--sarga);color:var(--barna)}
.lablec .btn-sarga:hover{background:var(--feher);color:var(--barna)}
.lablec-cta{margin-top:20px;padding:.78em 1.5em}

.social{display:flex;gap:11px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(246,244,239,.24);
  display:grid;place-items:center;transition:all .32s}
.social a:hover{border-color:var(--sarga);color:var(--sarga);transform:translateY(-3px)}
.social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Demján-blokk + ALATTA egy sorban a jogi linkek */
.lablec-alj{margin-top:clamp(38px,4vw,54px);padding-top:26px;
  border-top:1px solid rgba(246,244,239,.14);
  display:flex;flex-direction:column;gap:18px}
.demjan{display:flex;align-items:center;gap:14px;max-width:60ch}
.demjan img{width:130px;flex:none}
.jogi-linkek{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.jogi-linkek a{position:relative}
.jogi-linkek a+a::before{content:"·";position:absolute;left:-13px;opacity:.5}
/* Süti-beállítások: gomb, de a jogi linkek sorában ül, ezért linkként viselkedik
   (a lebegő pajzs-gomb helyét vette át, 2026.07.30). */
.jogi-linkek .suti-beallitas{position:relative;padding:0;border:0;background:none;
  cursor:pointer;font:inherit;color:inherit;text-decoration:none}
.jogi-linkek .suti-beallitas::before{content:"·";position:absolute;left:-13px;opacity:.5}
.jogi-linkek .suti-beallitas:hover{text-decoration:underline;text-underline-offset:3px}

/* Záró sor: copyright balra, karbantartás jobbra, EGY sorban */
.lablec-zaro{margin-top:22px;padding-top:18px;border-top:1px solid rgba(246,244,239,.14);
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.lablec-zaro p{margin:0;white-space:nowrap}
.lablec-zaro a{text-decoration:underline;text-underline-offset:3px}

/* ---------- megjelenés: csak halk áttűnés, semmi beúszás ---------- */
.js .rev{opacity:0;transition:opacity .75s ease}
.js .rev.in{opacity:1}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}

/* ---------- reszponzív ---------- */
/* 1080 px fölött minden egy sorban van a fejlécben: logó + hét menüpont + CTA.
   Együtt ez ~1240 px-t kíván, ezért 1280 alatt a MENÜ ad helyet (kisebb betű,
   szűkebb köz), nem a gomb tördel. Két lépcső, hogy 1081-nél is maradjon
   tartalék; ez alatt úgyis a hamburger veszi át. */
@media (max-width:1280px){
  .menu{gap:14px}
  .menu a{font-size:.79rem}
  .fejlec .btn{padding:.74em 1.25em}
}
@media (max-width:1180px){
  .menu{gap:9px}
  .menu a{font-size:.73rem}
}

@media (max-width:1080px){
  .menu,.fejlec .btn{display:none}
  .hamburger{display:block}
  .hero-grid,.split,.panel-grid,.g2{grid-template-columns:1fr}
  .folyamat-grid{grid-template-columns:1fr}
  .iranytu-doboz{order:-1}
  .iranytu{max-width:250px}
  .kartyak{grid-template-columns:1fr}
  .lablec-grid{grid-template-columns:1fr 1fr}
  .hero-media{order:-1;max-width:380px;margin-inline:auto}
  .qmark{width:66vw;right:-16%;top:1%}
}
@media (max-width:720px){
  body{font-size:16px}
  .kerdesek,.szalag-sor{grid-template-columns:1fr}
  .tenyek-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .teny:nth-child(3){border-left:none}
  .lablec-grid{grid-template-columns:1fr}
  .portre-jelveny{left:0;bottom:-14px}
  .ajanlat .ar{margin-left:0}
  .demjan{max-width:none}
  .doboz-sor{grid-template-columns:1fr}
  .doboz-sor .pill{justify-self:start}
  .probono-madar{opacity:.12!important;right:-6%;width:150px}
}

/* ---------- akadálymentesség ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--turkiz-sotet);outline-offset:4px;border-radius:6px}
.ugras{position:absolute;left:-9999px;top:0;z-index:99;background:var(--sarga);color:var(--barna);
  padding:12px 22px;border-radius:0 0 12px 0;font-weight:600}
.ugras:focus{left:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rev,.kerdes{opacity:1}
  .lepes{opacity:1}
  .huzas path{stroke-dashoffset:0!important}
}

/* ============================================================
   CÉL CENTRUM — a WordPress-változat kiegészítései
   A main.css a látványterv design rendszere. Ez a fájl azt egészíti ki
   azokkal az elemekkel, amik a látványtervben még nem voltak:
   aloldalak, űrlap, podcast/esemény kártyák, blog, lábléc-menük.
   A paletta ugyanaz: sárga csak felület, akcentus mindig türkiz.
   ============================================================ */

/* ---------- hero: a NÉV látványosan (Gabi 07.23-i kérése) ---------- */
.hero-nev{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.hero-nev .script{font-size:clamp(2.4rem,4.2vw,3.4rem);line-height:1;margin-bottom:2px}
.hero-nev .kicker{color:var(--turkiz-melyebb)}

/* ---------- „Miért Cél Centrum?" — érték → motiváció → cél ---------- */
.lanc{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,44px);counter-reset:lanc;position:relative}
.lanc::before{content:"";position:absolute;top:27px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--turkiz-vilagos),transparent);z-index:0}
.lanc-elem{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lanc-ikon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--feher);border:1px solid rgba(92,175,181,.5);color:var(--turkiz-sotet);
  box-shadow:0 12px 26px -18px rgba(41,28,18,.4)}
.lanc-ikon svg{width:24px;height:24px}
.lanc-cimke{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--turkiz-melyebb)}
.lanc-elem p{color:var(--barna-lagy);font-size:.99rem;line-height:1.72}
.lanc-zaro{margin:clamp(40px,5vw,64px) auto 0;max-width:60ch;text-align:center}
.lanc-zaro blockquote{font-family:var(--serif);font-size:clamp(1.14rem,2.1vw,1.42rem);
  line-height:1.55;font-style:italic;color:var(--barna)}
.lanc-zaro figcaption{margin-top:12px;font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--turkiz-melyebb)}

/* ---------- aloldal-nyitó ---------- */
.aloldal-hero{position:relative;overflow:hidden;padding:clamp(140px,16vh,200px) 0 clamp(56px,7vw,84px);
  background:
    radial-gradient(60% 54% at 86% 6%,rgba(233,215,126,.38),transparent 62%),
    radial-gradient(54% 56% at 2% 88%,rgba(92,175,181,.20),transparent 60%),
    linear-gradient(168deg,var(--feher) 0%,var(--krem) 56%,var(--krem-2) 100%)}
.aloldal-hero .wrap{position:relative;z-index:3}
.aloldal-hero h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.aloldal-hero.nincs-kep{text-align:left}
.aloldal-hero.nincs-kep .stack{max-width:62ch}
.qmark.halk{opacity:.5;width:min(34vw,420px)}
.jelzok{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- panel- és szekció-apróságok ---------- */
.panel-cim{font-size:clamp(1.6rem,3vw,2.2rem)}
.panel-kep.szeles{aspect-ratio:4/3}
.eredmeny-sor{margin-bottom:clamp(60px,7vw,96px);position:relative;z-index:3}
.videok-blokk{position:relative;z-index:3}
.video-cim{font-size:1.12rem}
.velemeny-lab{text-align:center;margin-top:34px}
.hero-cta.kozepre{justify-content:center}
.fej.bal{align-items:flex-start;text-align:left}

/* ---------- kártyarács: podcast, esemény, blog ---------- */
.lista-racs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(22px,2.6vw,32px)}
.lista-kartya{background:var(--feher);border:1px solid var(--vonal);border-radius:var(--r-kartya);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .4s,border-color .4s,transform .4s}
.lista-kartya:hover{box-shadow:var(--arnyek-emelt);border-color:rgba(92,175,181,.7);transform:translateY(-3px)}
.lista-kep{aspect-ratio:16/9;overflow:hidden;background:var(--krem-2)}
.lista-kep img{width:100%;height:100%;object-fit:cover}
.lista-kep.nincs{display:grid;place-items:center;color:var(--turkiz-vilagos)}
.lista-kep.nincs svg{width:52px;height:52px}
.lista-torzs{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.lista-torzs h3{font-size:1.18rem;line-height:1.28}
.lista-torzs h3 a{transition:color .3s}
.lista-torzs h3 a:hover{color:var(--turkiz-sotet)}
.lista-torzs p{color:var(--barna-lagy);font-size:.95rem}
.lista-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.76rem;letter-spacing:.06em;
  color:var(--turkiz-melyebb);font-weight:600;text-transform:uppercase}
.lista-lab{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* esemény-állapot */
.esemeny-jelzo{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.esemeny-jelzo.kozelgo{background:var(--turkiz-vilagos);color:var(--barna)}
.esemeny-jelzo.volt{background:var(--krem-2);color:var(--barna-lagy)}
.esemeny-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:76px;padding:10px 12px;border-radius:16px;background:var(--sarga);color:var(--barna);
  font-family:var(--serif);line-height:1.05}
.esemeny-datum b{font-size:1.6rem}
.esemeny-datum span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans)}
.esemeny-fej{display:flex;gap:16px;align-items:center}

/* podcast-hallgatás gombok */
.hallgat{display:flex;flex-wrap:wrap;gap:10px}
.hallgat a{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;
  padding:.62em 1.1em;border-radius:999px;border:1px solid rgba(41,28,18,.2);transition:all .3s}
.hallgat a:hover{border-color:var(--turkiz-sotet);color:var(--turkiz-sotet)}
.hallgat svg{width:15px;height:15px}
/* !! Ugyanaz a csapda, mint a láblécben: a `.hallgat a:hover` erősebb a gomb
   saját szabályánál, ezért a „Megnézem” felirata türkiz lenne a türkiz gombon. */
.hallgat a.btn{font-size:.85rem;padding:.72em 1.4em;border-color:transparent}
.hallgat a.btn-turkiz:hover{background:var(--turkiz-sotet);color:var(--feher);border-color:transparent}

/* ---------- szöveges tartalom (blog, jogi oldalak, single) ---------- */
.szoveg-oldal{padding:clamp(46px,6vw,80px) 0 clamp(64px,8vw,110px);background:var(--feher)}
.szoveg-torzs{max-width:72ch;margin-inline:auto}
.szoveg-torzs h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:2em 0 .6em}
.szoveg-torzs h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin:1.6em 0 .5em}
.szoveg-torzs p,.szoveg-torzs li{color:var(--barna-lagy)}
.szoveg-torzs ul,.szoveg-torzs ol{margin:0 0 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.szoveg-torzs a{color:var(--turkiz-melyebb);text-decoration:underline;text-underline-offset:3px}
.szoveg-torzs a:hover{color:var(--barna)}
.szoveg-torzs img{border-radius:var(--r-kartya);margin:1.4rem 0}
.szoveg-torzs blockquote{border-left:2.5px solid var(--turkiz);padding-left:22px;margin:1.6rem 0;
  font-family:var(--serif);font-size:1.14rem;font-style:italic}
.szoveg-torzs blockquote cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--turkiz-melyebb)}
.szoveg-torzs .cc-kiemelt-mondat{font-family:var(--serif);font-size:1.24rem;line-height:1.5;
  color:var(--barna);border-left:3px solid var(--turkiz);padding-left:20px;margin:1.6rem 0}
.szoveg-torzs .cc-doboz{border-radius:var(--r-kartya);padding:clamp(22px,2.4vw,30px);margin:1.8rem 0}
.szoveg-torzs .cc-cta-blokk{background:var(--krem);border-radius:var(--r-kartya);
  padding:clamp(24px,2.6vw,34px);margin:2rem 0;text-align:center}
.szoveg-torzs .wp-block-button__link{display:inline-flex;align-items:center;gap:.6em;
  background:var(--sarga);color:var(--barna);font-weight:600;font-size:.94rem;
  padding:1em 1.9em;border-radius:999px;text-decoration:none}
.szoveg-torzs .wp-block-button__link:hover{background:var(--turkiz-sotet);color:var(--feher)}

.bejegyzes-fej{max-width:72ch;margin:0 auto clamp(28px,3vw,44px)}
.bejegyzes-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--turkiz-melyebb);font-weight:600;margin-top:14px}
.bejegyzes-kep{max-width:1000px;margin:0 auto clamp(32px,4vw,54px);border-radius:var(--r-nagy);
  overflow:hidden;box-shadow:var(--arnyek)}

/* ---------- lapozó ---------- */
.lapozo{display:flex;justify-content:center;gap:8px;margin-top:clamp(38px,4vw,56px);flex-wrap:wrap}
.lapozo .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border-radius:999px;border:1px solid var(--vonal);font-size:.88rem;font-weight:600;transition:all .3s}
.lapozo .page-numbers:hover{border-color:var(--turkiz);color:var(--turkiz-sotet)}
.lapozo .page-numbers.current{background:var(--turkiz-sotet);color:var(--feher);border-color:var(--turkiz-sotet)}

/* ---------- kapcsolati űrlap ---------- */
.cc-urlap{background:var(--feher);border:1px solid var(--vonal);border-radius:var(--r-nagy);
  padding:clamp(24px,3vw,40px);box-shadow:var(--arnyek)}
.cc-urlap-racs{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.cc-urlap p{margin:0 0 18px}
.cc-urlap label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  color:var(--barna);margin-bottom:7px}
.cc-urlap input[type=text],.cc-urlap input[type=email],.cc-urlap input[type=tel],
.cc-urlap select,.cc-urlap textarea{
  width:100%;font-family:var(--sans);font-size:.97rem;color:var(--barna);background:var(--krem);
  border:1px solid var(--vonal);border-radius:14px;padding:.82em 1em;transition:border-color .3s,background .3s}
.cc-urlap textarea{border-radius:18px;resize:vertical;min-height:132px}
.cc-urlap input:focus,.cc-urlap select:focus,.cc-urlap textarea:focus{
  outline:none;border-color:var(--turkiz);background:var(--feher)}
.cc-mez{position:absolute!important;left:-9999px!important}
.cc-jelolo label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.86rem;
  color:var(--barna-lagy);letter-spacing:0}
.cc-jelolo input{margin-top:3px;accent-color:var(--turkiz-sotet)}
.cc-jelolo a{color:var(--turkiz-melyebb);text-decoration:underline;text-underline-offset:3px}
.cc-kuldes{margin-bottom:0}
.cc-visszajelzes{border-radius:16px;padding:14px 18px;font-size:.92rem;margin-bottom:22px!important}
.cc-visszajelzes.cc-ok{background:var(--turkiz-halvany);border:1px solid rgba(92,175,181,.5);color:var(--barna)}
.cc-visszajelzes.cc-hiba{background:#FCEFE6;border:1px solid #E3B79A;color:#7A3B14}

/* ---------- elérhetőség-kártyák ---------- */
.elerhetoseg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.elerhetoseg-kartya{background:var(--feher);border:1px solid var(--vonal);border-radius:var(--r-kartya);
  padding:24px;display:flex;flex-direction:column;gap:8px}
.elerhetoseg-kartya .cimke{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turkiz-melyebb)}
.elerhetoseg-kartya .ertek{font-family:var(--serif);font-size:1.16rem;line-height:1.35}
.elerhetoseg-kartya a:hover{color:var(--turkiz-sotet)}

/* ---------- üres állapot ---------- */
.ures{max-width:56ch;margin:0 auto;text-align:center;background:var(--krem);
  border:1px dashed var(--vonal);border-radius:var(--r-kartya);padding:clamp(30px,4vw,48px)}
.ures h3{margin-bottom:10px}
.ures p{color:var(--barna-lagy)}

/* ---------- 404 és kereső ---------- */
.hiba-oldal{min-height:64vh;display:grid;place-items:center;text-align:center;
  padding:clamp(140px,16vh,200px) 0 clamp(70px,8vw,110px)}
.hiba-szam{font-family:var(--serif);font-size:clamp(5rem,16vw,11rem);line-height:.9;
  color:var(--turkiz-vilagos)}
.kereso-urlap{display:flex;gap:10px;max-width:520px;margin:22px auto 0}
.kereso-urlap input{flex:1;font-family:var(--sans);font-size:.97rem;background:var(--feher);
  border:1px solid var(--vonal);border-radius:999px;padding:.86em 1.3em;color:var(--barna)}
.kereso-urlap input:focus{outline:none;border-color:var(--turkiz)}

/* ---------- reszponzív kiegészítések ---------- */
@media (max-width:1080px){
  .lanc{grid-template-columns:1fr;gap:26px}
  .lanc::before{display:none}
  .lanc-elem{flex-direction:row;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .lanc-ikon{flex:none}
  .lanc-elem p{flex:1 1 100%}
  .aloldal-hero .hero-media{max-width:340px}
  .lablec-jogi{text-align:left}
  .jogi-linkek{justify-content:flex-start}
}
@media (max-width:720px){
  .cc-urlap-racs{grid-template-columns:1fr}
  .lista-racs{grid-template-columns:1fr}
  .esemeny-fej{flex-direction:column;align-items:flex-start}
}

/* ---------- pipa-listák, kinek-kinek nem, ár-doboz ---------- */
.pipa-lista{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.pipa-lista li{display:flex;gap:12px;align-items:flex-start;color:var(--barna-lagy);font-size:.99rem;line-height:1.62}
.pipa-lista svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--turkiz-sotet)}
.pipa-lista.x svg{color:var(--turkiz)}
.pipa-lista.ket-oszlop{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.pipa-lista.vegzettseg li{font-size:1rem}

.kinek-racs{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,2.6vw,32px);align-items:start}
.kinek-doboz{background:var(--krem);border:1px solid var(--vonal);border-radius:var(--r-kartya);
  padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:16px}
.kinek-doboz.halkabb{background:var(--krem-2)}
.kinek-doboz h3{font-size:1.32rem}
.kinek-extra{color:var(--barna-lagy);font-size:.95rem;padding-top:6px;border-top:1px solid var(--vonal)}
.kinek-sor{font-size:.9rem;color:var(--barna-lagy)}

.ar-doboz{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  background:var(--feher);border:1px solid rgba(92,175,181,.5);border-radius:var(--r-kartya);
  padding:22px 26px;margin-top:8px;box-shadow:var(--arnyek)}
.ar-doboz .cimke{display:block;font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--turkiz-melyebb)}
.ar-nagy{display:block;font-family:var(--serif);font-size:2rem;line-height:1.1;margin-top:4px}
.ar-reszlet{display:block;font-size:.78rem;color:var(--barna-lagy);letter-spacing:.06em}

/* ---------- idézet-buborékok (szülői mondatok) ---------- */
.idezet-racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;max-width:960px;margin-inline:auto}
.idezet-buborek{background:var(--feher);border:1px solid var(--vonal);border-radius:20px 20px 20px 6px;
  padding:20px 24px;font-family:var(--serif);font-size:1.06rem;font-style:italic;line-height:1.5;
  color:var(--barna);box-shadow:0 14px 34px -26px rgba(41,28,18,.5)}

/* ---------- bemutatkozás ---------- */
.nev-cim{font-size:clamp(2rem,4vw,2.8rem)}
.szoveg-kartya{background:var(--krem);border-left:4px solid var(--turkiz);
  border-radius:var(--r-kartya);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.szoveg-kartya h3{font-size:1.28rem;line-height:1.35}
.szoveg-kartya p{color:var(--barna-lagy)}

/* ---------- esemény adatlap ---------- */
.esemeny-adatok{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px 22px;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--vonal)}
.esemeny-adatok li{display:flex;flex-direction:column;gap:3px}
.esemeny-adatok span{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--turkiz-melyebb)}
.esemeny-adatok b{font-family:var(--serif);font-size:1.08rem;font-weight:600}
.vissza-link{max-width:72ch;margin:clamp(30px,4vw,48px) auto 0}

/* ---------- képernyőolvasó ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:1080px){
  .kinek-racs{grid-template-columns:1fr}
  .pipa-lista.ket-oszlop{grid-template-columns:1fr}
}

/* ---------- hero: soha ne csússzon a fix fejléc alá ---------- */
/* Az align-items:center tulcsordulaskor FELFELE is kitol, es a focim a menu ala kerul.
   A "safe center" ezt megoldja, de ahol nem tamogatott, ott ez a tartalek: */
@supports not (align-items:safe center){
  .hero{align-items:flex-start}
  .hero-grid{margin-block:auto}
}
.hero-grid{width:min(100% - 44px,var(--max));padding-block:8px}

/* ---------- képkivágás: ne vágja le Gabi fejét ----------
   A .panel-kep alapból 5:4-es kivagast eroltet, es a kozepre igazitott
   object-position az allo portrekon a FEJET vagja le (2026.07.24-i eszrevetel).
   Ket megoldas:
     .teljes        -> nincs eroltetett arany, a teljes kep latszik (mint a devcc-n)
     object-position -> ahol megis kell a kivagas, ott felso harmadra igazitva */
.panel-kep.teljes{aspect-ratio:auto}
.panel-kep.teljes img{height:auto;object-fit:contain}
.panel-kep img{object-position:50% 22%}
.rolam-media .keret img{object-position:50% 18%}

/* ---------- Kapcsolat: foglalási opciók, közösségi blokk ---------- */
.cimke-verzal{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turkiz-melyebb)}
.foglalas-racs{grid-template-columns:1fr 1fr}
.foglalas-meta{margin-top:auto;padding-top:10px;border-top:1px solid var(--vonal);
  color:var(--turkiz-melyebb);font-size:.9rem}
.kozossegi{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kozossegi .btn{font-size:.85rem;padding:.78em 1.4em}
.kozepre-sor{text-align:center;margin-top:6px}

/* ---------- Bemutatkozás: életút két hasábban ---------- */
.eletut p{color:var(--barna-lagy);margin-bottom:1rem}
.szoveg-kartya .kiemelt-mondat{font-family:var(--serif);font-style:italic;font-size:1.16rem;
  line-height:1.45;color:var(--barna)}

@media (max-width:1080px){
  .foglalas-racs{grid-template-columns:1fr}
}

/* ---------- időpontfoglaló (Easy Appointments) ----------
   A plugin Bootstrap 3-at hoz, ami FLOATOKKAL dolgozik: emiatt a .ea-bootstrap
   konténer magassága 0 volt, a kártya üres fehér sávnak látszott, a naptár meg
   kilógott alóla. A display:flow-root ezt zárja le.
   A színek: a plugin alap kékjei helyett a márka türkize és lágy sárgája. */
.foglalo{margin-top:clamp(28px,3vw,42px);background:var(--feher);border:1px solid var(--vonal);
  border-radius:var(--r-nagy);padding:clamp(18px,2.4vw,32px);box-shadow:var(--arnyek)}
.foglalo .ea-bootstrap{display:flow-root;font-family:var(--sans)!important;color:var(--barna)}
.foglalo .ea-bootstrap::after{content:"";display:table;clear:both}

/* A köszönő doboz a pluginban inline `min-width:400px`-et kap, ami 360-390 px-es
   telefonon szélesebb a kártyánál: kilóg, és levágja a szöveg jobb szélét
   (Gabi, 2026.08.04.). A JS ezt leszedi, de az csak a doboz megjelenése után fut
   le, ezért a méret-korlát itt is bent marad védőhálónak. */
.foglalo #ea-success-box{min-width:0!important;max-width:100%!important;
  min-height:0!important;box-sizing:border-box}
.foglalo #ea-success-box>*{max-width:100%}

/* Foglalás utáni köszönő doboz. A plugin inline stílusokkal hozza (zöld cím, kék
   gomb); a JS leszedi őket és ezt az osztályt teszi rá. 2026.07.30. */
.foglalo .cc-koszono{max-width:520px;margin:6px auto 0;padding:clamp(20px,2.4vw,30px);
  background:var(--krem);border:1px solid var(--vonal);border-radius:var(--r-kartya);text-align:center}
.foglalo .cc-koszono .ea-confirmation-title{font-family:var(--serif);font-size:1.32rem;
  font-weight:500;color:var(--barna);margin:0 0 10px}
.foglalo .cc-koszono .ea-status-note{font-size:.95rem;color:var(--barna-lagy)}
.foglalo .cc-koszono #ea-overview-buttons{display:flex;justify-content:center;
  gap:10px;flex-wrap:wrap;margin-top:18px}
.foglalo .cc-koszono .btn{font-size:.85rem;padding:.78em 1.4em}

/* Foglalás áttekintő lépése (Gabi, 2026.07.31: „kilógnak a keretből" telefonon).
   A plugin a TELJES widgetre `white-space:nowrap`-ot tesz (`.ea-bootstrap`), ezért
   az áttekintő tábla hosszú értékei – „Személyiségfejlesztés 20.000 Ft" – nem
   tudnak tördelni: 390 px-en a tábla 343 px széles egy 278 px-es dobozban, a
   szöveg pedig levágódik, mert vízszintesen nincs görgetés.
   A nowrap-ot CSAK itt oldjuk fel: az idősáv-pirulákon szükség van rá. */
.foglalo .ea-bootstrap #booking-overview,
.foglalo .ea-bootstrap #booking-overview *,
.foglalo .ea-bootstrap #ea-overview-details,
.foglalo .ea-bootstrap #ea-overview-details *{white-space:normal}
.foglalo .ea-bootstrap #booking-overview table,
.foglalo .ea-bootstrap #ea-overview-details table{width:100%;table-layout:fixed}
.foglalo .ea-bootstrap #booking-overview .ea-label,
.foglalo .ea-bootstrap #ea-overview-details .ea-label{width:38%;vertical-align:top}
.foglalo .ea-bootstrap #booking-overview .value,
.foglalo .ea-bootstrap #ea-overview-details .value{vertical-align:top;overflow-wrap:break-word}

/* Telefonon a két hasáb EGYMÁS ALÁ kerül. Két hasábban ugyanis az érték-oszlop
   ~160 px marad, amiben a „Személyiségfejlesztés" szó SZÓ KÖZEPÉN törik el.
   Címke fölé, érték alá: teljes szélesség, tehát szóhatáron tördel. */
@media (max-width:560px){
  .foglalo .ea-bootstrap #booking-overview table,
  .foglalo .ea-bootstrap #ea-overview-details table,
  .foglalo .ea-bootstrap #booking-overview tbody,
  .foglalo .ea-bootstrap #ea-overview-details tbody,
  .foglalo .ea-bootstrap #booking-overview tr,
  .foglalo .ea-bootstrap #ea-overview-details tr,
  .foglalo .ea-bootstrap #booking-overview td,
  .foglalo .ea-bootstrap #ea-overview-details td{display:block;width:auto}
  .foglalo .ea-bootstrap #booking-overview tr,
  .foglalo .ea-bootstrap #ea-overview-details tr{padding:9px 0}
  .foglalo .ea-bootstrap #booking-overview tr+tr,
  .foglalo .ea-bootstrap #ea-overview-details tr+tr{border-top:1px solid var(--vonal)}
  .foglalo .ea-bootstrap #booking-overview .ea-label,
  .foglalo .ea-bootstrap #ea-overview-details .ea-label{padding:0 0 2px;
    font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--barna-lagy)}
  .foglalo .ea-bootstrap #booking-overview .value,
  .foglalo .ea-bootstrap #ea-overview-details .value{padding:0}

  /* A záró gombsor 320 px-es telefonon kilógott a kártyából. Nem a nowrap volt
     az oka, hanem hogy `inline-flex`, tördelés nélkül – ezért nem szűkült a
     szülőjéhez. Törhető sor + max-width: ha nem férnek el, egymás alá kerülnek. */
  .foglalo .ea-bootstrap .ea-actions-group{white-space:normal;flex-wrap:wrap;
    max-width:100%;row-gap:8px}
}

/* Időzóna-jelzés a foglaló alatt. Halkan, mert a magyar látogatónak nem üzenet –
   a külföldön élő diáknak viszont az egyetlen kapaszkodó (a plugin nem vált időzónát). */
.foglalo-ido{margin:14px auto 0;max-width:62ch;text-align:center;
  font-size:.86rem;line-height:1.6;color:var(--barna-lagy)}
.foglalo-ido strong{color:var(--turkiz-sotet)}

/* feliratok, mezők */
.foglalo .ea-bootstrap label,
.foglalo .ea-bootstrap .control-label{color:var(--barna)!important;font-weight:600!important;
  font-size:.84rem!important;letter-spacing:.02em}
.foglalo .ea-bootstrap legend,
.foglalo .ea-bootstrap h3,
.foglalo .ea-bootstrap h4{font-family:var(--serif)!important;color:var(--barna)!important;
  border-color:var(--vonal)!important}
.foglalo .ea-bootstrap .form-control,
.foglalo .ea-bootstrap select,
.foglalo .ea-bootstrap input,
.foglalo .ea-bootstrap textarea{border-radius:12px!important;border-color:var(--vonal)!important;
  background:var(--krem)!important;color:var(--barna)!important;box-shadow:none!important;
  font-family:var(--sans)!important}
.foglalo .ea-bootstrap .form-control:focus,
.foglalo .ea-bootstrap select:focus,
.foglalo .ea-bootstrap input:focus,
.foglalo .ea-bootstrap textarea:focus{border-color:var(--turkiz)!important;background:var(--feher)!important;
  outline:none!important}

/* gombok */
.foglalo .ea-bootstrap .btn,
.foglalo .ea-bootstrap button{border-radius:999px!important;font-weight:600!important;
  font-family:var(--sans)!important;padding:.7em 1.5em!important;transition:all .3s!important}
.foglalo .ea-bootstrap .btn-primary,
.foglalo .ea-bootstrap button[type=submit],
.foglalo .ea-bootstrap .btn-success{background:var(--sarga)!important;border-color:var(--sarga)!important;
  color:var(--barna)!important;text-shadow:none!important;box-shadow:none!important}
.foglalo .ea-bootstrap .btn-primary:hover,
.foglalo .ea-bootstrap button[type=submit]:hover,
.foglalo .ea-bootstrap .btn-success:hover{background:var(--turkiz-sotet)!important;
  border-color:var(--turkiz-sotet)!important;color:var(--feher)!important}
.foglalo .ea-bootstrap .btn-default{background:transparent!important;color:var(--barna)!important;
  border-color:rgba(41,28,18,.22)!important}
.foglalo .ea-bootstrap .btn-default:hover{border-color:var(--turkiz-sotet)!important;
  color:var(--turkiz-sotet)!important;background:transparent!important}

/* naptár – a jQuery UI kékjei helyett márkaszín */
.foglalo .ui-datepicker{border:1px solid var(--vonal)!important;border-radius:18px!important;
  background:var(--feher)!important;padding:8px!important;font-family:var(--sans)!important;
  box-shadow:none!important;width:100%!important}
.foglalo .ui-datepicker .ui-datepicker-header{background:transparent!important;border:none!important;
  color:var(--barna)!important;font-family:var(--serif)!important;padding-bottom:6px!important}
.foglalo .ui-datepicker .ui-datepicker-title{font-weight:600!important;color:var(--barna)!important}
.foglalo .ui-datepicker th{color:var(--turkiz-melyebb)!important;font-size:.72rem!important;
  font-weight:600!important;text-transform:uppercase;letter-spacing:.08em}
.foglalo .ui-datepicker td span,
.foglalo .ui-datepicker td a{border:none!important;background:transparent!important;
  color:var(--barna)!important;text-align:center!important;border-radius:10px!important;
  padding:.5em .2em!important;transition:background .25s,color .25s}
.foglalo .ui-datepicker td a:hover{background:var(--turkiz-halvany)!important;color:var(--barna)!important}
.foglalo .ui-datepicker .ui-state-active,
.foglalo .ui-datepicker .ui-state-active:hover,
.foglalo .ui-datepicker td.ui-datepicker-current-day a{background:var(--turkiz-sotet)!important;
  color:var(--feher)!important;font-weight:600!important}
.foglalo .ui-datepicker .ui-state-highlight,
.foglalo .ui-datepicker .ui-datepicker-today a{background:var(--sarga)!important;color:var(--barna)!important}
.foglalo .ui-datepicker .ui-state-disabled,
.foglalo .ui-datepicker td.ui-datepicker-unselectable span{opacity:.32!important}
.foglalo .ui-datepicker .ui-datepicker-prev,
.foglalo .ui-datepicker .ui-datepicker-next{background:transparent!important;border:none!important;
  color:var(--turkiz-sotet)!important;cursor:pointer}
.foglalo .ui-datepicker .ui-icon{background-image:none!important;text-indent:0!important;
  color:var(--turkiz-sotet)!important}

/* szabad időpontok listája */
.foglalo .ea-bootstrap .ea-slot,
.foglalo .ea-bootstrap .slot,
.foglalo .ea-bootstrap .ea-hour{border-radius:999px!important;border:1px solid var(--vonal)!important;
  background:var(--krem)!important;color:var(--barna)!important}
.foglalo .ea-bootstrap .ea-slot:hover,
.foglalo .ea-bootstrap .slot:hover,
.foglalo .ea-bootstrap .ea-hour:hover{border-color:var(--turkiz)!important;background:var(--turkiz-halvany)!important}
.foglalo .ea-bootstrap .selected,
.foglalo .ea-bootstrap .ea-selected{background:var(--turkiz-sotet)!important;color:var(--feher)!important;
  border-color:var(--turkiz-sotet)!important}

/* visszajelző üzenetek */
.foglalo .ea-bootstrap .alert-success{background:var(--turkiz-halvany)!important;
  border-color:rgba(92,175,181,.5)!important;color:var(--barna)!important;border-radius:14px!important}
.foglalo .ea-bootstrap .alert-danger{background:#FCEFE6!important;border-color:#E3B79A!important;
  color:#7A3B14!important;border-radius:14px!important}
.foglalo .ea-bootstrap a{color:var(--turkiz-melyebb)!important}

/* ---------- aloldali nyitókép: a teljes jelenet látszik ----------
   A főoldali .portre organikus, 4:5-ös kivágás – az aloldalak konzultációs
   fotóin ez levágta Gabi arcát és az ügyfelet. Itt nincs kivágás. */
.aloldal-kep{position:relative;border-radius:var(--r-nagy);overflow:hidden;
  box-shadow:var(--arnyek-emelt);border:1px solid rgba(92,175,181,.4);background:var(--krem-2)}
.aloldal-kep img{width:100%;height:auto;display:block}
.aloldal-hero .hero-media::before{width:78%;height:78%}

/* a lábléc „Kreatívoldal" link ugyanúgy nézzen ki, mint a többi lábléc-szöveg */
.lablec-zaro a{text-decoration:none}
.lablec-zaro a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- kiemelt szolgáltatás-kártya (Gabi: a pályatervezés a fő profil) ----------
   FIGYELEM: az osztály neve `fo-kartya`, NEM `kiemelt` – a `.kiemelt` a hero
   kiemelt szavát jelöli, és van rajta white-space:nowrap, ami itt szétvitte
   a kártya szövegét. */
.kartya.fo-kartya{background:var(--feher);border-color:var(--turkiz);border-width:2px;
  box-shadow:0 22px 50px -26px rgba(41,28,18,.35);overflow:visible}
.kartya.fo-kartya .fo-jelzo{
  position:absolute;top:-14px;left:26px;z-index:2;white-space:nowrap;
  background:var(--sarga);color:var(--barna);border-radius:999px;padding:6px 16px;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* A leírás NEM zsugorodhat (a kiemelt kártyán a magasabb gomb miatt a flexbox
   összenyomta), de a kártya TELJES szélességét használja – a flex:none önmagában
   max-content szélességet adott neki, és a mondat kilógott a kártyából. */
.kartya p{flex-shrink:0;align-self:stretch}

/* ---------- „Miért Cél Centrum?" – az idézet alatt ne maradjon nagy üres sáv ---------- */
.miert-blokk{padding-bottom:clamp(48px,5vw,72px)}
.miert-blokk .lanc-zaro{margin-top:clamp(30px,3.4vw,44px);margin-bottom:0}

/* ---------- vissza a tetejére ---------- */
.fel{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:58;
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(41,28,18,.14);
  background:var(--feher);color:var(--turkiz-sotet);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 14px 34px -14px rgba(41,28,18,.45);
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s,background .3s,color .3s}
.fel.latszik{opacity:1;transform:none}
.fel:hover{background:var(--turkiz-sotet);color:var(--feher);border-color:var(--turkiz-sotet)}
.fel svg{width:20px;height:20px}
.fel[hidden]{display:none}

/* ---------- portré-kivágás: ne vágja le az arcot ---------- */
.portre img{object-position:50% 18%}
.panel-kep img{object-position:50% 26%}

/* ---------- Kapcsolat: elérhetőség-kártyák ----------
   Korábban három sovány doboz lebegett egy nagy fehér mezőben. Most kitöltik a
   teret: nagyobb ikon-korong, márkaszínű háttér-derengés, hover-emelés. */
.elerhetoseg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2.2vw,26px)}
.elerhetoseg-kartya{position:relative;overflow:hidden;isolation:isolate;
  background:var(--feher);border:1px solid var(--vonal);border-radius:var(--r-nagy);
  padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;gap:12px;
  align-items:flex-start;min-height:230px;
  box-shadow:0 18px 44px -30px rgba(41,28,18,.45);
  transition:transform .4s cubic-bezier(.2,.9,.3,1),box-shadow .4s,border-color .4s}
.elerhetoseg-kartya::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.75;
  background:radial-gradient(120% 90% at 100% 0%,var(--turkiz-halvany),transparent 62%)}
.elerhetoseg-kartya::after{content:"";position:absolute;right:-38px;bottom:-38px;z-index:-1;
  width:130px;height:130px;border-radius:50%;background:var(--sarga);opacity:.16}
.elerhetoseg-kartya:hover{transform:translateY(-4px);border-color:rgba(92,175,181,.7);
  box-shadow:var(--arnyek-emelt)}
.elerhetoseg-ikon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  background:var(--feher);color:var(--turkiz-sotet);border:1px solid rgba(92,175,181,.4);
  box-shadow:0 10px 24px -16px rgba(41,28,18,.5)}
.elerhetoseg-ikon svg{width:24px;height:24px}
.elerhetoseg-kartya .cimke{font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--turkiz-melyebb)}
.elerhetoseg-kartya .ertek{font-family:var(--serif);font-size:1.24rem;line-height:1.35;
  color:var(--barna)}
.elerhetoseg-kartya .ertek a{transition:color .3s}
.elerhetoseg-kartya .ertek a:hover{color:var(--turkiz-sotet)}
.elerhetoseg-kartya .megjegyzes{margin-top:auto;font-size:.88rem;color:var(--barna-lagy)}

/* ---------- lábléc: Demján-blokk nagyobb logóval, egy sorban ---------- */
.lablec-alj{flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px 32px}
.demjan{max-width:none;flex:1 1 520px;gap:18px}
.demjan img{width:190px}
.demjan span{flex:1;min-width:0}
.lablec-alj .jogi-linkek{flex:0 1 auto;justify-content:flex-end}

@media (max-width:980px){
  .lablec-alj{flex-direction:column;align-items:flex-start}
  .lablec-alj .jogi-linkek{justify-content:flex-start}
}

/* három szám a tények sávban (a vélemény-darabszám kikerült) */
.tenyek-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){ .tenyek-grid{grid-template-columns:1fr} }

/* A Demján-mondat NE törjön két sorba: elég széles képernyőn egy sorban fut,
   és ilyenkor mellé fér a jogi linksor is. Szűkebb nézetben a linksor lép
   új sorba (a mondat marad egyben, amíg belefér). */
.lablec-alj{align-items:center}
.demjan{flex:0 1 auto}
.demjan span{font-size:.86rem}
.lablec-alj .jogi-linkek{flex:1 1 auto}
@media (min-width:1180px){
  .demjan span{white-space:nowrap}
}

/* ---------- türkiz gomb ----------
   A fejléc CTA-ja korábban lágy sárga volt, és a hero sárgás derengésében
   gyakorlatilag eltűnt. A márka türkize elüt tőle, és fehér felirattal
   4,87:1 (AA). */
.btn-turkiz{background:var(--turkiz-sotet);color:var(--feher);
  box-shadow:0 14px 32px -16px rgba(44,124,130,.75)}
.btn-turkiz:hover{background:var(--barna);color:var(--feher);transform:translateY(-2px);
  box-shadow:0 20px 42px -16px rgba(41,28,18,.6)}
.mobilmenu .btn-turkiz{align-self:flex-start}

/* ---------- Kapcsolat: a cím férjen ki egy sorba ----------
   Három egyenlő oszlopnál a „2336 Dunavarsány, Kossuth Lajos utca 38." két sorba
   tört, és emiatt a telefon/e-mail kártyán nagy üres sáv maradt. A cím-kártya
   szélesebb sávot kap, az érték betűje pedig kicsit kisebb. */
@media (min-width:980px){
  .elerhetoseg{grid-template-columns:1.42fr 1fr 1fr}
  .elerhetoseg-kartya.cim-kartya .ertek{white-space:nowrap}
}
.elerhetoseg-kartya{min-height:0}
.elerhetoseg-kartya .ertek{font-size:1.12rem}
.elerhetoseg-kartya .megjegyzes{margin-top:6px}

/* a Kapcsolat elérhetőség-kártyák címkéje címsor, de a megjelenése változatlan */
.elerhetoseg-kartya h3.cimke{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--turkiz-melyebb);margin:0;line-height:1.4}

/* ============================================================
   2026.07.25 – GABI SZÍNKÉRÉSE: „legyen a #5cafb5, mint az éles oldal láblécén"
   ------------------------------------------------------------
   Mérés: az éles celcentrum.hu lábléce Elementor „primary" = #5BAFB5,
   tehát Gabi jól emlékezett – ez ugyanaz a szín, mint a mi --turkiz-ünk.

   A szabály, ami eddig útban volt: NEM a színnel volt baj, hanem azzal,
   hogy FEHÉR feliratot tettünk rá.
     #5CAFB5 + fehér szöveg  = 2,54:1  → bukja az AA-t (min. 4,5:1)
     #5CAFB5 + barna szöveg  = 6,50:1  → bőven AA fölött
   Ezért mostantól a #5CAFB5 FELÜLET (lábléc, gomb, kijelölés), és ami rajta
   van, az BARNA. A logóhoz NEM kell hozzányúlni.

   A --turkiz-sotet (#2C7C82) megmarad, de csak ott, ahol a szín maga a SZÖVEG
   vagy vékony ikon krém háttéren (link, ikon, aláírás, iránytű) – ott a
   világos türkiz olvashatatlan lenne (2,31:1).
   ============================================================ */

/* ---------- lábléc: türkiz felület, barna szöveg ---------- */
.lablec{border-image:linear-gradient(90deg,transparent,var(--sarga),var(--krem),transparent) 1}
.lablec h4{color:var(--barna)}                       /* volt: halvány sárga – türkizen 1,9:1 */
.lablec a:hover{color:var(--barna);text-decoration:underline;text-underline-offset:4px}
.lablec-alj,.lablec-zaro{border-top-color:rgba(41,28,18,.22)}
.lablec-marka p{color:rgba(41,28,18,.86)}

.social a{border-color:rgba(41,28,18,.3)}
.social a:hover{border-color:var(--barna);background:var(--barna);color:var(--krem);
  transform:translateY(-3px)}

/* a sárga CTA a türkizen is jól elüt – a fehér hover viszont már nem kell.
   Az arany derengés (box-shadow) türkizen fakó foltként látszott: nincs rá szükség. */
.lablec .btn-sarga{box-shadow:none}
.lablec .btn-sarga:hover{background:var(--barna);color:var(--krem);box-shadow:none}

/* Demján Sándor Program: a logó FEHÉR változatú, ezért saját mély türkiz
   panelt kap a világos láblécen belül. Így a kötelező elem hibátlanul
   látszik, a lábléc mégis világos lehet. */
.lablec-alj .demjan{background:var(--lablec-mely);border-radius:20px;
  padding:16px 24px;color:var(--krem)}
.lablec-alj .demjan span{color:var(--krem)}
/* keskeny kijelzőn a 190px-es logó mellé csak 150px maradt a mondatnak,
   ami hat sorba tört – ott a logó a mondat FÖLÉ kerül */
@media (max-width:620px){
  .lablec-alj .demjan{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px}
  .lablec-alj .demjan img{width:170px}
}

/* ---------- gombok és kijelölések: türkiz felület + barna felirat ---------- */
.btn-turkiz{background:var(--turkiz);color:var(--barna);
  box-shadow:0 14px 32px -16px rgba(44,124,130,.75)}
.btn-turkiz:hover{background:var(--turkiz-sotet);color:var(--feher);transform:translateY(-2px);
  box-shadow:0 20px 42px -16px rgba(44,124,130,.85)}

.valaszto button[aria-selected="true"]{background:var(--turkiz);border-color:var(--turkiz);
  color:var(--barna);box-shadow:0 16px 32px -20px rgba(44,124,130,.9)}
.valaszto button[aria-selected="true"] .pont{background:var(--barna)}

.lapozo .page-numbers.current{background:var(--turkiz);color:var(--barna);border-color:var(--turkiz)}
.fel:hover{background:var(--turkiz);color:var(--barna);border-color:var(--turkiz)}
.szoveg-torzs .wp-block-button__link:hover{background:var(--turkiz);color:var(--barna)}

/* ---------- időpontfoglaló: ugyanez a logika ---------- */
.foglalo .ea-bootstrap .btn-primary:hover,
.foglalo .ea-bootstrap button[type=submit]:hover,
.foglalo .ea-bootstrap .btn-success:hover{background:var(--turkiz)!important;
  border-color:var(--turkiz)!important;color:var(--barna)!important}

/* ============================================================
   2026.07.25 – IDŐPONTFOGLALÓ: EGYSÉGES MÁRKASZÍNEK
   ------------------------------------------------------------
   Az Easy Appointments saját CSS-e (css/eafront-bootstrap.css) ÖT idegen
   színt hozott be, ezek látszottak a naptárban:

     kiválasztott nap ..... #4289cc            (Bootstrap-kék)
     nincs szabad időpont . rgba(163,163,117,.5) (khaki)
     foglalt nap .......... rgba(255,0,0,.5)   (piros)
     kiválasztott időpont . green              (alap zöld)
     nap-hover ............ #eee, link-hover: #2A6496

   Az első körben azért maradtak, mert a plugin más osztályneveket használ,
   mint amire tippeltem: a napok állapota a TD-n van (`free` / `no-slots` /
   `busy` / `ui-datepicker-current-day`), az időpontok pedig
   `a.time-value` / `a.selected-time` egy Bootstrap `.well` dobozban.
   Emiatt a kiválasztott napon EGYSZERRE látszott az EA kék TD-je és az én
   türkiz A-foltom. Mostantól a hátteret MINDIG a TD viszi, az A átlátszó.
   ============================================================ */

/* a még nem aktív lépés fátyla: fehér helyett krém, hogy ne „kifakult" legyen */
.foglalo .ea-bootstrap .disabled .block{background:var(--krem)!important;opacity:.62!important}

/* rácsvonalak halkabbra, a napok mérete egységes */
.foglalo .ui-datepicker table,
.foglalo .ui-datepicker th,
.foglalo .ui-datepicker td{border-color:rgba(41,28,18,.07)!important}
.foglalo .ui-datepicker td{border-radius:12px!important}
.foglalo .ui-datepicker a,
.foglalo .ui-datepicker .ui-state-disabled{font-size:1rem!important}
.foglalo .ui-datepicker a:hover,
.foglalo .ui-datepicker td:hover a{color:var(--barna)!important}

/* a hátteret a TD viszi, az A/SPAN soha (különben folt a folton) */
.foglalo .ui-datepicker td a,
.foglalo .ui-datepicker td span,
.foglalo .ui-datepicker td:hover a,
.foglalo .ui-datepicker td:hover span{background:transparent!important}
.foglalo .ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover,
.foglalo .ea-bootstrap .ui-datepicker .no-slots:hover,
.foglalo .ea-bootstrap .ui-datepicker .busy:hover{background:rgba(41,28,18,.06)!important}

/* HOVER a választható napon: EGY tömör felület a cellán, a szám fehér.
   Csak a `free` napra megy, hogy a letiltott/foglalt napok halkak maradjanak. */
.foglalo .ea-bootstrap .ui-datepicker td.free:hover{background:var(--turkiz)!important}
.foglalo .ea-bootstrap .ui-datepicker td.free:hover a,
.foglalo .ea-bootstrap .ui-datepicker td.free:hover span{color:var(--feher)!important}

/* nincs szabad időpont – volt: khaki */
.foglalo .ea-bootstrap .ui-datepicker .no-slots{background:rgba(41,28,18,.06)!important}
.foglalo .ea-bootstrap .ui-datepicker .no-slots a,
.foglalo .ea-bootstrap .ui-datepicker .no-slots span{color:rgba(41,28,18,.36)!important}

/* foglalt – volt: piros */
.foglalo .ea-bootstrap .ui-datepicker .busy{background:rgba(122,59,20,.12)!important}
.foglalo .ea-bootstrap .ui-datepicker .busy a,
.foglalo .ea-bootstrap .ui-datepicker .busy span{color:rgba(122,59,20,.62)!important}

/* MA: arany gyűrű, nem tömör folt – így nem ütközik a kiválasztással.
   A korábbi „ma = tömör sárga" szabály erősebb volt a TD-s alapnál, ezért
   a gyűrűn BELÜL is maradt egy sárga folt: itt vesszük vissza. */
.foglalo .ui-datepicker td.ui-datepicker-today{box-shadow:inset 0 0 0 2px var(--sarga)!important}
.foglalo .ui-datepicker .ui-state-highlight,
.foglalo .ui-datepicker .ui-datepicker-today a,
.foglalo .ui-datepicker .ui-datepicker-today span{background:transparent!important;color:var(--barna)!important}

/* KIVÁLASZTOTT nap – volt: kék TD + türkiz folt rajta.
   Egy tömör felület, fehér számmal. A mélyebb türkiz kell hozzá: fehér felirat
   a világos #5CAFB5-ön csak 2,54:1, a #2C7C82-n viszont 4,87:1 (AA). */
.foglalo .ea-bootstrap .ui-datepicker td.ui-datepicker-current-day,
.foglalo .ea-bootstrap .ui-datepicker td.ui-datepicker-current-day:hover,
.foglalo .ui-datepicker .ui-datepicker-current-day,
.foglalo .ui-datepicker .ui-state-active{background:var(--turkiz-sotet)!important}
.foglalo .ea-bootstrap .ui-datepicker td.ui-datepicker-current-day a,
.foglalo .ea-bootstrap .ui-datepicker td.ui-datepicker-current-day:hover a,
.foglalo .ui-datepicker .ui-datepicker-current-day a,
.foglalo .ui-datepicker .ui-datepicker-current-day span{color:var(--feher)!important;font-weight:600!important}

/* időpont-pirulák: a szürke Bootstrap-„well" helyett márkás doboz */
.foglalo .ea-bootstrap .time.well{background:var(--krem)!important;border:1px solid var(--vonal)!important;
  border-radius:18px!important;box-shadow:none!important;padding:16px!important;margin-bottom:0!important}
.foglalo .ea-bootstrap a.time-value,
.foglalo .ea-bootstrap .time-disabled{display:inline-block;min-width:0!important;max-width:none!important;
  margin:5px!important;padding:.5em 1.05em!important;border-radius:999px!important;
  border:1px solid var(--vonal)!important;background:var(--feher)!important;color:var(--barna)!important;
  font-size:.92rem!important;font-weight:600!important;transition:background .25s,border-color .25s,color .25s}
.foglalo .ea-bootstrap a.time-value:hover{background:var(--turkiz)!important;
  border-color:var(--turkiz)!important;color:var(--feher)!important}
.foglalo .ea-bootstrap .time-disabled{background:var(--krem-2)!important;color:rgba(41,28,18,.36)!important;
  border-color:transparent!important}

/* kiválasztott időpont – volt: `green`.
   Ugyanaz a nyelv, mint a naptárban: kijelölés = mély türkiz + fehér. */
.foglalo .ea-bootstrap.ea-bootstrap a.selected-time,
.foglalo .ea-bootstrap.ea-bootstrap .selected-time,
.foglalo .ea-bootstrap.ea-bootstrap .selected-time:hover{background:var(--turkiz-sotet)!important;
  border-color:var(--turkiz-sotet)!important;color:var(--feher)!important}

/* hibaüzenet – volt: rikító piros */
.foglalo .ea-bootstrap label.error{color:#7A3B14!important;font-size:.84rem!important;font-weight:500!important}
.foglalo .ea-bootstrap input.error,
.foglalo .ea-bootstrap textarea.error,
.foglalo .ea-bootstrap select.error{border-color:#E3B79A!important}

/* ============================================================
   2026.07.27 – GABI VÉGLEGES ÁTNÉZÉSE (07.27-i levél)
   ============================================================ */

/* „Miért Cél Centrum?" – a rövidített szöveg középre zárt, szűk blokkban */
.miert-szoveg{max-width:60ch;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* „Merre tovább?" – halk kérdőjel-dekor a sarokban (Gabi: „a logó kérdőjelét betehetnénk") */
.qmark-ajandek{right:-4%;top:auto;bottom:-40%;width:min(40vw,340px);opacity:.12}

/* Hero: mobilon a portré fölé lógó madár „szárnya" értelmezhetetlen volt → elrejtve.
   (A qmark és a portré-folt marad, a márka így sem tűnik el.)
   2026.07.28: az elrejtés helyett ÁTHELYEZÉS – lásd lentebb a `csak-web`/`csak-mobil`
   madár-készleteket. Ez a szabály ezért kikerült. */

/* Hero: a „Görgess" jelző telefonon belecsúszott a „Hol tartok most?" gombba */
@media (max-width:720px){ .gorgetes{display:none} }

/* Érintésnél a sárga gomb egy pillanatra „kékes" villanást kapott → tap-highlight ki */
a,button,.btn{-webkit-tap-highlight-color:rgba(0,0,0,0)}

/* Menü: a hosszú „CélKalauz podcast" ne törjön meg, ne nyíljon rés a szomszédja előtt */
.menu a{white-space:nowrap}

/* „Válaszd ki az élethelyzeted!" szekció felül kevesebb levegővel indul (Gabi: nagy szünet) */
#hol-tartasz{padding-top:clamp(52px,6vw,88px)}

/* „Dolgoztunk együtt?" (ertekelo-sav) gépen: a szöveg vigye a helyet, a gomb kompakt jobbra */
#ertekeles .doboz-sor{grid-template-columns:1fr auto;align-items:center}
#ertekeles .doboz-sor>.btn{justify-self:end;white-space:nowrap}
@media (max-width:720px){
  #ertekeles .doboz-sor{grid-template-columns:1fr}
  #ertekeles .doboz-sor>.btn{justify-self:start}
}

/* Lábléc – Demján Sándor Program visszafogva (Gabi: „nem emelném ki ennyire… fehéren van
   a logó, ennyi épp elég"). A logó FEHÉR, ezért a sötét háttér marad (különben eltűnne a
   világos láblécen), de a panel, a logó és a szöveg kisebb: diszkrét támogatói jelzés. */
.lablec-alj .demjan{padding:10px 16px;gap:14px;border-radius:16px}
.demjan img{width:132px}
.demjan span{font-size:.78rem;opacity:.9}
@media (max-width:620px){ .lablec-alj .demjan img{width:132px} }

/* ============================================================
   2026.07.27 (2) – LÁBLÉC: a támogatói logók dark panel NÉLKÜL, egyszerűen
   fehéren, mint az éles celcentrum.hu láblécén (Lajos kérése). A fehér
   Demján Sándor Program + Neumann János Nonprofit Kft. logó a világos türkiz
   felületen tisztán olvasható, nem kell mögé sötét doboz. A jogi linkek
   ugyanabban a sávban, a kredit mellett.
   ============================================================ */
.lablec-alj{align-items:center;gap:16px 30px}
.lablec-alj .demjan{background:transparent;padding:0;border-radius:0;color:var(--krem);gap:16px}
.lablec-alj .demjan img{width:300px}
.lablec-alj .demjan span{color:var(--lablec-szoveg);opacity:1;font-size:.82rem}
.lablec-alj .jogi-linkek{flex:0 1 auto;justify-content:flex-end}
@media (max-width:620px){
  .lablec-alj .demjan{padding:0;gap:12px}
  .lablec-alj .demjan img{width:240px}
}

/* Gomb: érintésnél SEMMILYEN szín-villanás (sem tap-highlight, sem fókusz-gyűrű
   pointer-tapnél). A billentyűzetes fókusz-gyűrű megmarad (:focus-visible). */
.btn{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none}
.btn:focus:not(:focus-visible){outline:none}
.btn:active{transform:none}

/* ============================================================
   2026.07.27 (3) – MERRE TOVÁBB? blokk újraépítve (Lajos kérése)
   Balra a márka kérdőjele jól láthatóan, jobbra a tartalom, a
   „Díjmentes · 30 perc · online" pirula a cím FÖLÉ került.
   ============================================================ */
.ajandek-doboz{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3.4vw,52px);align-items:center}
.ajandek-jel{width:clamp(84px,10vw,128px);height:auto;flex:none;align-self:center}
.ajandek-be{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ajandek-be h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
@media (max-width:620px){
  .ajandek-doboz{grid-template-columns:1fr;justify-items:start;gap:16px}
  .ajandek-jel{width:72px}
}

/* ---------- kiemelt vélemény (teljes szélességű lezáró blokk) ---------- */
.kiemelt-velemeny{position:relative;z-index:3;background:var(--feher);
  border:1px solid rgba(92,175,181,.5);border-left:4px solid var(--turkiz);
  border-radius:var(--r-nagy);padding:clamp(28px,3.6vw,52px);box-shadow:var(--arnyek);
  display:flex;flex-direction:column;gap:18px}
.kiemelt-velemeny-fej{display:flex;align-items:center;gap:14px}
.kiemelt-velemeny blockquote{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.16rem,1.9vw,1.5rem);line-height:1.5;color:var(--barna);max-width:78ch}
.kiemelt-velemeny blockquote strong{font-style:normal;color:var(--turkiz-melyebb)}
.kiemelt-velemeny figcaption{display:flex;flex-direction:column;gap:2px}
.kiemelt-velemeny .szerzo{font-family:var(--serif);font-size:1.18rem;color:var(--barna)}
.kiemelt-velemeny .forras{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--turkiz-melyebb);font-weight:600}

/* Bemutatkozás: a „Amit a Google-ön írtak rólam" (velemenyek) és a „Dolgoztunk
   együtt?" (ertekeles) is türkiz, egymás alatt. A két szekció dupla belső margója
   nagy üres sávot adott közéjük → összehúzzuk. (#ertekeles csak itt fordul elő.) */
#ertekeles{padding-top:clamp(10px,1.4vw,22px)}
#velemenyek:has(+ #ertekeles){padding-bottom:clamp(18px,2vw,30px)}

/* ============================================================
   2026.07.27 (4) – Lábléc: a jogi linkek TÉNYLEG egy sávba a Demján-kredittel.
   Eddig a logó+mondat egy sorban kitöltötte a szélességet, ezért a jogi linkek
   a következő sorba törtek. Most a logó és a mondat EGYMÁS ALÁ kerül (kompakt bal
   blokk), így a jogi linkek elférnek jobbra, ugyanabban a sávban.
   ============================================================ */
.lablec-alj{align-items:center;gap:18px 40px}
.lablec-alj .demjan{flex-direction:column;align-items:flex-start;gap:9px;flex:0 1 auto;max-width:430px}
.lablec-alj .demjan img{width:255px}
.lablec-alj .demjan span{font-size:.76rem;line-height:1.5}
.lablec-alj .jogi-linkek{flex:0 1 auto;justify-content:flex-end;margin-left:auto}
@media (max-width:820px){
  .lablec-alj{flex-direction:column;align-items:flex-start}
  .lablec-alj .jogi-linkek{margin-left:0;justify-content:flex-start}
}

/* ============================================================
   2026.07.27 (2. kör) – Gabi „végleges" átnézésének második része
   ============================================================ */

/* ---------- Élethelyzet-választó: fülek helyett KÖZVETLEN navigáció ----------
   Gabi: „a CTA gomb és fotó után nem vinném őket tovább a fő oldalon, hanem
   egyből a menübe." A nyíló panel megszűnt, a négy élethelyzet mostantól link:
   kattintásra rögtön a hozzá tartozó aloldalra visz. A `.valaszto` doboz (flex,
   középre zárva) marad, csak `button` helyett `a` van benne. */
.valaszto-gomb{
  display:inline-flex;align-items:center;gap:.75em;text-decoration:none;
  font-family:var(--sans);color:var(--barna-lagy);
  background:var(--feher);border:1.5px solid var(--vonal);border-radius:30px;
  padding:.72em 1.35em .72em 1.15em;
  transition:border-color .34s cubic-bezier(.2,.9,.3,1),transform .34s cubic-bezier(.2,.9,.3,1),
    box-shadow .34s cubic-bezier(.2,.9,.3,1),color .34s;
}
.valaszto-gomb:hover,.valaszto-gomb:focus-visible{
  border-color:var(--turkiz);color:var(--barna);transform:translateY(-2px);
  box-shadow:0 16px 32px -22px rgba(44,124,130,.9)}
.valaszto-szoveg{display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.25;text-align:left}
.valaszto-szoveg b{font-size:.95rem;font-weight:600}
.valaszto-szoveg small{font-size:.73rem;letter-spacing:.03em;color:var(--turkiz-melyebb)}
.valaszto-gomb svg{width:16px;height:16px;flex:none;color:var(--turkiz-sotet);
  transition:transform .34s cubic-bezier(.2,.9,.3,1)}
.valaszto-gomb:hover svg{transform:translateX(3px)}
/* Telefonon egymás alatt, teljes szélességben – így hüvelykujjal is biztosan találhatók. */
@media (max-width:620px){
  .valaszto{flex-direction:column;gap:12px}
  .valaszto-gomb{width:100%}
  .valaszto-gomb svg{margin-left:auto}
}

/* ---------- Kiemelt vélemény: a dőlt szedés kikerült ----------
   Gabi: „ez a dőlt betűtípus elüt a többitől." A Playfair marad (az idézet
   így is elkülönül a törzsszövegtől, és az oldal minden címe Playfair), csak a
   dőlés kerül le, ami tényleg kilógott a többi blokk közül. */
.kiemelt-velemeny blockquote{font-style:normal}

/* ---------- Merre tovább? – a kérdőjel a madarakkal ----------
   Gabi: „a kérdőjelet a madárkákkal használnám, így olyan csupasz szegény.
   És lehet még kisebb esetleg, és mobilon középen."
   Az új jelkép FEKVŐ (228×175) a korábbi álló kérdőjel helyett, ezért a
   szélesebb doboz ellenére optikailag kisebb. Mobilon középre kerül. */
.ajandek-jel{width:clamp(104px,12vw,158px)}
@media (max-width:620px){
  .ajandek-doboz{justify-items:center}
  .ajandek-jel{width:132px}
  .ajandek-be{align-items:center;text-align:center}
  .ajandek-be .pill{align-self:center}
}

/* A `.valaszto` alsó margója még a nyíló panelnek tartott helyet. Panel már nincs,
   így ha a választó a szekció utolsó eleme, a margó felesleges üres sávot hagyna. */
.valaszto:last-child{margin-bottom:0}

/* Kiemelt vélemény: a teljes szélességű blokkban a Playfair ~24px-en „kiabált”
   egy 9 soros véleménynél (Lajos 2026.07.27). Kisebb betű + rövidebb sorhossz. */
.kiemelt-velemeny blockquote{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.62;max-width:68ch}
.kiemelt-velemeny .szerzo{font-size:1.06rem}

/* Álló (2:3) fotó az aloldal-heróban. A teljes kép látszik (Gabi feje nincs levágva),
   csak a doboz keskenyebb, így a magassága nagyjából a fekvő fotós aloldalakéval
   egyezik – gépen és telefonon is. (Lajos 2026.07.27) */
.aloldal-kep.allo{max-width:330px;margin-inline:auto}
@media (max-width:1080px){ .aloldal-kep.allo{max-width:228px} }

/* Kiemelt vélemény, végleges (Lajos 2026.07.27): a Playfair + korlátozott sorhossz
   miatt a szöveg balra szorult, jobbra nagy üres sáv maradt. Most a blokk TELJES
   szélességét kitölti, és pontosan akkora betűvel fut, mint az oldal törzsszövege
   (Montserrat, 17px, örökölve a body-tól). */
.kiemelt-velemeny blockquote{
  font-family:var(--sans);font-style:normal;font-size:inherit;line-height:1.72;
  max-width:none;width:100%}

/* Bemutatkozás – „Szeretettel, Gabi”: a kézjegy az .alairas alapméretén (3,6rem)
   nagyobb volt, mint maga az oldal főcímei. Most pontosan akkora, mint a „Bemutatkozás”
   / „Rólam” / „Ami számomra fontos” kézírásos címkék (.script). Csak ITT: a főoldali
   Rólam aláírás és a záró kártya „Szeretettel várlak!” marad a nagyobb méreten. */
.szoveg-kartya .alairas{font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;margin-top:14px}

/* ============================================================
   2026.07.28 – GABI 07.27 ESTI LEVELE (a záró kör)
   ============================================================ */

/* ---------- Madarak: külön készlet webre és telefonra ----------
   Gabi: „madárkáim teljesen elszálltak a HERO-ból mobilon :( Webon annyira szépek.
   Nem lehet valahova beszúrni 1-2 belőlük? :) Mobilon a RÓLAM fotó körül furán lóg
   ki a szárnya."
   A pozíciót és a méretet a `cc_raj()` inline stílusban adja (mert madaranként más),
   amit media query csak `!important`-tal írhatna felül. Ezért nem felülírunk, hanem
   KÉT KÉSZLET van: a webes elhelyezés és a telefonra tervezett, ritkább elhelyezés. */
@media (max-width:1080px){ .madar.csak-web{display:none} }
@media (min-width:1081px){ .madar.csak-mobil{display:none} }

/* ---------- Eredmény: a Cél Centrum fotófala ----------
   A montázs a saját arányában látszik (webes 1600×1014, mobil 1000×1000), ezért
   nem kell rá képarány-kényszer és `object-fit` sem – a teljes kép látszik,
   ahogy a falon is. A `<picture>` alapból inline, ettől a doboz alján 3-4 px
   fehér csík maradna, ezért `display:block`. */
.panel-kep.fotofal{aspect-ratio:auto;box-shadow:var(--arnyek)}
.panel-kep.fotofal picture{display:block}
.panel-kep.fotofal img{height:auto;object-fit:contain;object-position:center}

/* ---------- „Nem tudod, mi legyél?" – a diák útja a főoldalon ----------
   Gabi: „az előzőben a diák ment tovább a főoldalon – ami jó, mert neki szól a
   főoldal." A blokk a korábbi szegmens-panel tartalma, most állandó szekcióként.
   A kép 3:2 fekvő, ezért `.teljes` (nincs erőltetett kivágás): kitölti a hasábját.
   Telefonon a szöveg alá kerül, ott korlátozzuk, hogy ne nyúljon el a képernyőn. */
@media (max-width:620px){ #nem-tudod .panel-kep{max-width:460px;margin-inline:auto} }

/* ---------- Élethelyzet-választó: vissza a „szép kék gombok" ----------
   Gabi: „nagyon praktikus ez a verzió is, de nekem az előző is tetszett, a szép kék
   gombokkal. De nem a szín a lényeg." – a korábbi türkiz pirula-hatás visszatér, de
   most mind a négy gombra egyformán (nincs kiválasztott állapot, mind link).
   Halvány türkiz felület + barna felirat = 6,5:1 fölött, hoveren a márka türkize. */
.valaszto-gomb{background:var(--turkiz-halvany);border-color:var(--turkiz-vilagos);
  color:var(--barna)}
.valaszto-gomb .pont{background:var(--turkiz-sotet)}
.valaszto-gomb:hover,.valaszto-gomb:focus-visible{
  background:var(--turkiz);border-color:var(--turkiz);color:var(--barna)}
.valaszto-gomb:hover .valaszto-szoveg small,
.valaszto-gomb:focus-visible .valaszto-szoveg small{color:var(--barna-lagy)}
.valaszto-gomb:hover svg,.valaszto-gomb:focus-visible svg{color:var(--barna)}

/* ---------- Fejléc: ne mozogjon görgetéskor ----------
   Gabi: „gépen a menü mozog, mobilon a logó az elején."
   Az ok megvolt: a `.fejlec.tapad` állapot a LOGÓ SZÉLESSÉGÉT animálta
   (248px → 208px, .45s), a logó pedig egy flex-sor első eleme. Amíg az animáció
   futott, a sor újratördelt, tehát a menü és a CTA vízszintesen csúszkált –
   telefonon ugyanez a logón látszott „ugrásnak". A padding animálása (20px → 11px)
   ugyanezt tette függőlegesen.
   A tapadó állapot mostantól CSAK a hátteret, az elmosást és az árnyékot kapcsolja:
   a fejléc geometriája végig változatlan, így semmi nem mozdul. */
.fejlec,.fejlec.tapad{padding:16px 0}
.fejlec{transition:background-color .45s,box-shadow .45s,backdrop-filter .45s}
.marka img,.fejlec.tapad .marka img{width:clamp(168px,17vw,224px);transition:none}

/* ---------- Horgony-ugrás: ne csússzon a cím a fix fejléc alá ----------
   A „Diák vagyok" gomb mostantól a főoldalon belül ugrik (#nem-tudod), és a fejléc
   fix. A szekciók nagy felső paddingja eddig elrejtette a hibát; így viszont
   pontosan a szekció eleje áll meg a fejléc alatt. Minden horgonyra érvényes. */
section[id]{scroll-margin-top:96px}