/* ───────────────────────────────────────────────────────────
   AI fejlesztő cég — a főoldal stílusa

   A tervezési nyelv ugyanaz, mint a Website Audit lapé: lebegő lap a
   háttéren, talpas díszbetű, mért méret- és térközlépcső.

   KÉT TÉMA, EGY JELÖLÉS. Alapértelmezés a VILÁGOS, és a nyitó
   (fejléc + nyitókép) azon belül is sötét marad — ezt a
   .nyito-sotet zóna adja. A teljesen sötét lap a
   <html data-tema="sotet">-tel jön elő. Ezért nincs a jelölésben
   egyetlen beégetett színkód sem — minden szín jelzőn keresztül jön,
   és a két téma ugyanazokat a jelzőket írja felül.

   MÉRÉS, AMI ELDÖNTÖTTE AZ IRÁNYT: a megadott #4F4F51 a #2C2B30
   háttéren 1,72:1 — szövegnek olvashatatlan, a szabvány 4,5-öt kér.
   Világos lapon ugyanez 7,43:1. A sötét változatban tehát ki kellett
   találni egy hatodik árnyalatot (#B4B4B8); a világosban a megadott
   öt szín elég.

   A korall (2,1:1) és a rózsa (1,41:1) világos lapon NEM lehet
   szöveg — ott felület marad, a szöveghez a sötétebb testvérük megy
   (#A8431E, 5,48:1 és #8E3A54, 6,63:1).
   ─────────────────────────────────────────────────────────── */

@font-face{font-family:"Caprasimo";font-style:normal;font-weight:400;font-display:swap;
  src:url("betuk/caprasimo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Caprasimo";font-style:normal;font-weight:400;font-display:swap;
  src:url("betuk/caprasimo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alfa Slab One";font-style:normal;font-weight:400;font-display:swap;
  src:url("betuk/alfa-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("betuk/figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("betuk/figtree-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* A megadott öt szín — nyersen, hogy látszódjon, honnan jön minden */
  --p-sotet:#2C2B30; --p-szurke:#4F4F51; --p-vilagos:#D6D6D6;
  --p-rozsa:#F2C4CE; --p-korall:#F58F7C;

  /* ── VILÁGOS TÉMA (alapértelmezés) ──
     A tulajdonos döntése: a lap világos legyen, és csak a NYITÓ
     (fejléc + nyitókép) maradjon sötét. Azt nem a téma adja, hanem
     a .nyito-sotet zóna — így egy lapon belül fordul meg a paletta,
     és nem kell hozzá másik jelölés.

     A korall (2,1:1) és a rózsa (1,41:1) világos lapon NEM lehet
     szöveg: ott felület marad, a szöveghez a sötétebb testvérük megy
     (#A8431E → 5,48:1 és #8E3A54 → 6,63:1 a #F4F4F5 lapon). */
  --hatter:#C9C9CC;        /* a lap MÖGÖTT */
  --lap:#F4F4F5;           /* maga a lap */
  --szoveg:#2C2B30;        /* fő szöveg — 13,8:1 */
  --halvany:#4F4F51;       /* halvány szöveg — 7,43:1 */
  --felulet:#FFFFFF;       /* kártyák — a lap fölé emelve */
  --vonal:#2C2B3024;       /* keret, elválasztó */
  --sav:#2C2B3018;         /* szakaszsáv — 1,189:1 a laphoz képest */
  /* MÉRVE: a mélyebb sávon (#E1E1E2) a korallos pasztillán a régi
     #A8431E csak 4,15:1-et adott a 12 pixeles cimkének. A pasztilla
     halkítása nem elég (4,42 a legjobb eset), ezért maga a szöveg lett
     egy árnyalattal sötétebb: így mindenhol 4,58 fölött van. */
  --kiemel:#9E3E1B;        /* korall SZÖVEGVÁLTOZATA — 6,04:1 a lapon */
  --kiemel-f:#F58F7C;      /* a nyers korall — csak felületnek */
  --kiemel-halk:#F58F7C2e;
  --masodik:#8E3A54;       /* rózsa SZÖVEGVÁLTOZATA — 6,63:1 */
  --masodik-f:#F2C4CE;     /* a nyers rózsa — csak felületnek */
  --masodik-halk:#F2C4CE59;
  --gomb-felirat:#2C2B30;

  --cim:"Caprasimo","Alfa Slab One",Rockwell,Georgia,serif;
  --betu:"Figtree",system-ui,-apple-system,sans-serif;
  --irogep:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --sz-1:12px; --sz-2:14px; --sz-3:16px; --sz-4:18px; --sz-5:21px;
  --sz-6:26px; --sz-7:34px; --sz-8:42px; --sz-9:58px;
  --ter-1:4px; --ter-2:8px; --ter-3:12px; --ter-4:16px;
  --ter-5:24px; --ter-6:32px; --ter-7:48px; --ter-8:64px;
}

/* ── SÖTÉT TÉMA ──
   A <html data-tema="sotet">-tel jön elő, az egész lapra. MEGEMELVE:
   a #2C2B30 lapként túl komor volt, mert a szakaszsávok is LEFELÉ
   sötétedtek. Így a lap #3A3940, a megadott #2C2B30 pedig a keret és
   a hangsúlyos dobozok színe.

   A #3A3940 a legmagasabb tónus, ahol mind a négy szövegszín tartja
   a 4,5:1-et: #D6D6D6 → 7,86 · #B4B4B8 → 5,52 · korall → 4,95 ·
   rózsa → 7,37. Egy lépéssel feljebb (#424149) a korall 4,37-re
   esik, az már bukta. */
[data-tema="sotet"]{
  /* MÉRVE: a #B4B4B8 a LAPON 5,52:1, de a sávra tett kártyán
     (#4D4C53) már csak 4,11 — a kis szöveg ott megbukott. A #C2C2C6
     a legvilágosabb felületen is 4,78. */
  --hatter:#211F24; --lap:#3A3940; --szoveg:#D6D6D6; --halvany:#C2C2C6;
  /* A sáv itt MARAD 8%-on. Mélyebbre véve (10%) a sávra tett kártya
     #535259 lesz, és azon a halvány szöveg 3,74:1-re esik — bukta.
     A sötét témán az elválasztást a .halk-sav vonala adja. */
  --felulet:#FFFFFF12; --vonal:#FFFFFF24; --sav:#FFFFFF08;
  --kiemel:#F58F7C; --kiemel-f:#F58F7C; --kiemel-halk:#F58F7C24;
  --masodik:#F2C4CE; --masodik-f:#F2C4CE; --masodik-halk:#F2C4CE1f;
}

/* ── ELLENTÉTES SÁV ──
   Ugyanaz a jelölés, de a szakasz a téma ELLENKEZŐJÉBEN jelenik meg:
   világos lapon sötét sáv, sötét lapon világos. Ez adja a lap
   függőleges ritmusát, és nem kell hozzá másik jelölés. */
.ellentet-sav{
  --lap:#2C2B30; --szoveg:#D6D6D6; --halvany:#B4B4B8;
  --felulet:#FFFFFF12; --vonal:#FFFFFF24; --sav:#FFFFFF08;
  --kiemel:#F58F7C; --kiemel-halk:#F58F7C1f;
  --masodik:#F2C4CE; --masodik-halk:#F2C4CE1f;
  background:var(--lap); color:var(--szoveg);
}
[data-tema="sotet"] .ellentet-sav{
  --lap:#E2E2E4; --szoveg:#2C2B30; --halvany:#4F4F51;
  --felulet:#2C2B300a; --vonal:#2C2B3026; --sav:#2C2B3008;
  --kiemel:#8A3A28; --kiemel-halk:#F58F7C33;
  --masodik:#8E3A54; --masodik-halk:#F2C4CE59;
}

/* ── A NYITÓ SÖTÉT ZÓNÁJA ───────────────────────────────
   A lap világos, de a fejléc és a nyitókép sötét marad. A KETTŐ EGY
   ZÓNA: a fejléc ugyanezt az osztályt kapja, különben a navigáció
   világos csíkként ülne a sötét nyitókép fölött.

   Itt a MEGEMELT #3A3940 megy, nem a #2C2B30. Azért, mert a
   nyitóképben ül egy .sotet-doboz (az üzenetmockup), ami #2C2B30 —
   a #2C2B30-as sávon egybeolvadt volna vele. Így a doboz
   bemélyedésként válik el a sávtól. */
.nyito-sotet{
  --lap:#3A3940; --szoveg:#D6D6D6; --halvany:#B4B4B8;
  --felulet:#FFFFFF12; --vonal:#FFFFFF24; --sav:#FFFFFF08;
  --kiemel:#F58F7C; --kiemel-f:#F58F7C; --kiemel-halk:#F58F7C24;
  --masodik:#F2C4CE; --masodik-f:#F2C4CE; --masodik-halk:#F2C4CE1f;
  background:var(--lap); color:var(--szoveg);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hatter);color:var(--szoveg);
  font:400 var(--sz-3)/1.55 var(--betu);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--kiemel);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--kiemel);outline-offset:2px}

h1,h2,h3{font-family:var(--cim);font-weight:400;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 var(--ter-3);color:var(--szoveg)}
h1{font-size:var(--sz-9);line-height:1.02}
h2{font-size:var(--sz-7);text-wrap:balance}
h3{font-size:var(--sz-5);text-wrap:balance}
p,li{text-wrap:pretty;margin:0 0 var(--ter-3)}

/* A lap egy ív, ami a háttéren fekszik — mint a Website Auditnál. */
.lap{max-width:1320px;min-height:100vh;margin:0 auto;background:var(--lap);
  box-shadow:0 0 0 1px #0000001a, 0 18px 60px #00000026}
.sav{padding-inline:44px}
.szakasz{padding-block:var(--ter-8)}
.halk-sav{background:var(--sav);
  /* A szín önmagában halk marad — ezért a sávnak ÉLE is van. Ez az
     egyetlen elválasztó forma a lapon: a szakirodalom egybehangzó
     tanácsa, hogy váltakozó háttér + EGYFÉLE vonal legyen, mert a
     többféle vonaltól zsúfolt lesz a lap. */
  border-top:1px solid var(--vonal); border-bottom:1px solid var(--vonal)}

.cimke{display:inline-flex;align-items:center;font-size:var(--sz-1);
  letter-spacing:.02em;padding:4px 11px;border-radius:999px;
  background:var(--kiemel-halk);color:var(--kiemel);margin-bottom:var(--ter-4)}
.cimke-rozsa{background:var(--masodik-halk);color:var(--masodik)}
/* MÉRVE: a nyitó sötét zónájában a korall a saját pasztilláján
   (#544548) csak 3,92:1 — a 12 pixeles feliratnak 4,5 kell. Egy
   árnyalattal világosabb korall 4,67-et ad. */
/* Ugyanez a baj a végig sötét lapon is, csak rosszabbul: ott a
   cimke a kártyára tett pasztillán (#594A4E) 3,62-re esett.

   KIVÉTELEK. Az ellentét-sáv a sötét témán VILÁGOS, a záró doboz
   pedig mindkét témán korall — ott a világosabb korall pont fordítva
   sülne el (1,2:1 és 1,6:1). Azok maradnak a saját színüknél.
   A kiemelt árkártya pasztillája ugyanígy világosít, ezért a rajta
   ülő mono felirat is kap egy fokot. */
.nyito-sotet .cimke,
[data-tema="sotet"] :is(.cimke:not(.cimke-rozsa), .kartya-kiemelt .mono-kiemel){color:#FBB0A1}
[data-tema="sotet"] .ellentet-sav .cimke{color:var(--kiemel)}
/* A záró doboz cimkéje SÖTÉT a korall dobozon — ahogy a .zaro saját
   szabálya mondja. Azt csak visszaállítani kell, nem felülírni. */
[data-tema="sotet"] .zaro .cimke{color:#2C2B30}
.kartya-kiemelt .mono-kiemel{color:var(--kiemel)}

.szakaszfej{display:grid;grid-template-columns:1fr 1fr;gap:var(--ter-7);
  align-items:end;max-width:1000px;margin-bottom:var(--ter-7)}
.szakaszfej h2{max-width:22ch;margin:0}
.szakaszfej p{max-width:46ch;margin:0;color:var(--halvany)}

.gomb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  text-decoration:none;font-family:var(--cim);font-size:var(--sz-3);
  padding:16px 26px;border-radius:999px;border:1px solid transparent;
  transition:background .15s,color .15s}
.gomb-fo{background:var(--kiemel-f);color:var(--gomb-felirat)}
.gomb-fo:hover{background:var(--masodik-f)}
.gomb-mas{border-color:var(--vonal);color:var(--szoveg)}
.gomb-mas:hover{background:var(--sav)}

.racs{display:grid;gap:var(--ter-5)}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}

.kartya{background:var(--felulet);border:1px solid var(--vonal);
  border-radius:24px;padding:26px 24px}
.kartya h3{margin-bottom:var(--ter-2)}
.kartya p{margin:0;color:var(--halvany);font-size:var(--sz-2);line-height:1.65}
.kartya p+p{margin-top:var(--ter-3)}
.kartya-kiemelt{border-color:var(--kiemel-f);background:var(--kiemel-halk)}

/* MINDIG SÖTÉT DOBOZ. A nyitókép üzenetmockupja és az adatsáv világos
   lapon is sötét marad: ez adja a nyitókép súlypontját. */
.sotet-doboz{
  --szoveg:#D6D6D6; --halvany:#B4B4B8; --vonal:#4F4F51;
  --kiemel:#F58F7C; --masodik:#F2C4CE;
  background:#2C2B30;color:var(--szoveg);border:1px solid #55545C;
  border-radius:28px}
.sotet-doboz h2,.sotet-doboz h3{color:var(--szoveg)}

.mono{font-family:var(--irogep);font-size:var(--sz-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--halvany)}
.mono-kiemel{color:var(--kiemel)}

.fejlec{display:flex;align-items:center;gap:var(--ter-5);padding-block:20px}
.marka{display:flex;align-items:center;gap:12px;margin-right:auto;
  text-decoration:none;color:var(--szoveg)}
.marka-jel{width:34px;height:34px;border-radius:10px;background:var(--kiemel-f);
  display:grid;place-items:center;color:#2C2B30;font-family:var(--cim);
  font-size:var(--sz-4);flex:none}
.marka-nev{display:block;font-family:var(--cim);font-size:var(--sz-4);line-height:1}
.menu{display:flex;gap:var(--ter-5);font-size:var(--sz-2)}
.menu a{color:var(--szoveg);text-decoration:none}
.menu a:hover{color:var(--kiemel)}

.nyelvvalto{display:inline-flex;border:1px solid var(--vonal);border-radius:999px;
  overflow:hidden;font-size:var(--sz-1);flex:none}
.nyelvvalto>*{padding:6px 12px;text-decoration:none;color:var(--szoveg);
  letter-spacing:.06em}
.nyelvvalto .aktiv{background:var(--szoveg);color:var(--lap)}

/* A lábléc mindig sötét — ez zárja le a lapot. */
.lablec{
  --szoveg:#D6D6D6; --halvany:#B4B4B8; --vonal:#55545C; --kiemel:#F58F7C;
  background:#2C2B30;color:var(--szoveg);
  padding-block:var(--ter-7) var(--ter-5)}
.lablec a{color:var(--szoveg);text-decoration:none}
.lablec a:hover{color:var(--kiemel)}
.lablec-racs{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--ter-7)}
.lablec-racs>*{min-width:0}

/* HOSSZABB SZÖVEGBLOKKOK — a folyó bekezdésnek saját mértéke kell,
   különben 1232 pixel széles sorokat kapnánk. 62 karakter a határ. */
.proza{max-width:62ch}
.proza p{color:var(--halvany);line-height:1.75;margin-bottom:var(--ter-4)}
.proza p:last-child{margin-bottom:0}
.proza strong{color:var(--szoveg);font-weight:600}

.lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--ter-3)}
.lista li{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0;
  font-size:var(--sz-2);line-height:1.6;color:var(--halvany)}
.lista li::before{content:"✓";color:var(--kiemel);font-weight:700;line-height:1.6}
.lista-nem li::before{content:"✕";color:var(--masodik)}

/* RÁCSOK OSZTÁLYBÓL, NEM BEÁGYAZOTT STÍLUSBÓL
   A beágyazott `style` erősebb a stíluslapnál, ezért a töréspontnál nem
   lehetett felülírni — mérve 181 pixel túlnyúlás egy 390 pixeles
   telefonon. Osztályból viszont rendesen összecsukódik. */
.ketto{display:grid;grid-template-columns:1fr 1fr;gap:var(--ter-7);align-items:center}
.ketto-hero{grid-template-columns:1.05fr .95fr}
.ketto-gyik{grid-template-columns:330px 1fr;align-items:start}
.ketto>*{min-width:0}

.zaro{background:var(--kiemel-f);color:#2C2B30;border-radius:28px;padding:48px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ter-7);align-items:center}
.zaro h2{color:#2C2B30}
.zaro p{color:#2C2B30}
.zaro .cimke{background:#2C2B3021;color:#2C2B30}
.zaro .mono{color:#4A2B22}
.zaro .gomb{background:#2C2B30;color:#F58F7C}

/* ── A NYITÓKÉP ÜZENETMOCKUPJA ── */
.uzenet-fej{background:#00000040;padding:14px 22px;display:flex;
  justify-content:space-between;gap:12px}
.uzenet-test{padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.uzenet{background:#D6D6D60d;border-radius:16px;padding:14px 16px;font-size:var(--sz-2)}
.uzenet .mono{margin-top:8px}
.uzenet-zaras{border-top:1px solid var(--vonal);padding-top:16px;
  display:flex;align-items:center;gap:12px;font-size:var(--sz-2)}
.pont{width:9px;height:9px;border-radius:50%;background:var(--kiemel);flex:none}

/* ── ADATSÁV ── */
.adatsav{padding:34px 40px;gap:var(--ter-6)}
.adat-nagy{font-family:var(--cim);font-size:var(--sz-6)}
.adat-kicsi{margin-top:6px}

/* ── LÉPÉSEK ── */
.lepes{border-top:2px solid var(--kiemel-f);padding-top:18px}
.lepes h3{margin:8px 0}
.lepes p{color:var(--halvany);font-size:var(--sz-2);margin:0}

/* ── PASZTILLÁK A NYITÓKÉP ALJÁN ── */
.pipak{display:flex;gap:var(--ter-3);flex-wrap:wrap}
.pipak span{background:var(--felulet);border:1px solid var(--vonal);
  padding:9px 16px;font-size:var(--sz-2);border-radius:999px}

/* ── GYIK ── */
.gyik details{background:var(--felulet);border:1px solid var(--vonal);
  border-radius:20px;padding:18px 22px;margin-bottom:10px}
.gyik summary{cursor:pointer;font-family:var(--cim);font-size:var(--sz-4);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  list-style:none}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary::after{content:"+";font-family:var(--betu);font-size:22px;
  color:var(--kiemel);flex:none}
.gyik details[open] summary::after{content:"–"}
.gyik details>div{margin-top:12px;color:var(--halvany);font-size:var(--sz-2);
  line-height:1.75}
.gyik details>div p{margin:0 0 10px}
.gyik details>div p:last-child{margin:0}

.valaszto{border:0;border-top:1px solid var(--vonal);margin:var(--ter-6) 0 var(--ter-5)}

@media (max-width:900px){
  .sav{padding-inline:24px}
  .szakaszfej,.r2,.r3,.r4{grid-template-columns:1fr}
  .szakaszfej{gap:var(--ter-4)}
  .szakaszfej>*,.racs>*{min-width:0}
  h1{font-size:clamp(32px,7vw,46px)}
  h2{font-size:clamp(26px,5vw,32px)}
  .menu{display:none}
  /* MÉRVE: 390 pixeles telefonon a fejléc 411 pixel széles volt — az
     embléma, a nyelvváltó és a gomb együtt nem fér ki, és az egész lap
     oldalra csúszott. A gomb megy, a nyelvváltó marad: a nyitókép
     ugyanazt a gombot kínálja 300 pixellel lejjebb. */
  .fejlec .gomb-fo{display:none}
  .ketto,.ketto-hero,.ketto-gyik,.zaro,.lablec-racs{grid-template-columns:1fr}
  .zaro{padding:32px 24px}
  .zaro>div:last-child{align-items:flex-start}
  .adatsav{padding:26px 24px}
}

/* ── LOGÓSÁV ────────────────────────────────────────────
   Halk, nem hivalkodó: a logók egyszínű sziluettek, mert a sötét lapon
   az eredeti, szürke-fehér hátterű változatok pacniknak látszanának. */
.logosav{display:flex;align-items:center;justify-content:center;gap:var(--ter-8);
  flex-wrap:wrap;padding-block:var(--ter-6)}
/* NEM EGYFORMA MAGASSÁG, hanem egyforma OPTIKAI SÚLY. A három logó
   aránya nagyon más: a Zincenco majdnem négyzet, a Pocket Parking
   viszont ötször olyan széles, mint amilyen magas. Közös magassággal
   az egyik eltörpülne, a másik átvágná a sávot — ezért mindkét irányt
   korlátozzuk, és a kép a saját arányában áll be a dobozba. */
.logosav img{max-height:52px;max-width:168px;height:auto;width:auto;
  object-fit:contain;opacity:.55;filter:grayscale(1);
  transition:opacity .2s}
.logosav img:hover{opacity:.9}
.logosav-fej{text-align:center;margin-bottom:var(--ter-3)}

/* ── BÖNGÉSZŐKERET ──────────────────────────────────────
   Ez a lap egyetlen „IT-s” díszítőeleme, ami nem szöveg: egy ablak,
   amiben a weboldal ül. Ettől lesz nyilvánvaló, hogy weboldalakról
   beszélünk, kép nélkül is. */
.ablak{border:1px solid var(--vonal);border-radius:14px;overflow:hidden;
  background:#26252A}
.ablak-fej{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:#2C2B30;border-bottom:1px solid var(--vonal)}
.ablak-pont{width:9px;height:9px;border-radius:50%;background:#4F4F51;flex:none}
.ablak-cim{flex:1;background:#211F24;border-radius:999px;padding:4px 12px;
  font-family:var(--irogep);font-size:11px;letter-spacing:.04em;
  color:var(--halvany);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ablak img{width:100%;height:auto;display:block}
.ablak-cimke{position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--irogep);font-size:11px;letter-spacing:.12em;
  padding:4px 10px;border-radius:999px;background:#211F24cc;color:var(--halvany)}

.elotte-utana{display:grid;grid-template-columns:1fr 1fr;gap:var(--ter-5)}
.elotte-utana>div{position:relative;min-width:0}
.eu-regi .ablak-cimke{color:var(--masodik)}
.eu-uj   .ablak-cimke{color:var(--kiemel)}
.eu-uj   .ablak{border-color:#F58F7C66}

/* ── TERMINÁL-NAPLÓ ─────────────────────────────────────
   Ugyanaz a gondolat, mint az ablaknál: mérnöki, nem dekoratív.
   A benne álló SZÁMOK VALÓDIAK — egy tényleges átépítés mérései. */
.naplo{background:#211F24;border:1px solid var(--vonal);border-radius:14px;
  padding:18px 20px;font-family:var(--irogep);font-size:13px;line-height:1.85;
  overflow-x:auto}
.naplo-sor{display:block;white-space:pre;color:var(--halvany)}
.naplo-parancs{color:var(--kiemel)}
.naplo-parancs::before{content:"$ ";opacity:.6}
.naplo-ok{color:#9BC77F}
.naplo-rossz{color:var(--masodik)}
.naplo-kiemel{color:var(--szoveg)}

@media (max-width:900px){
  .elotte-utana{grid-template-columns:1fr}
  .logosav{gap:var(--ter-5)}
  /* Telefonon is a doboz szűkül, nem a magasság fixálódik — különben
     a széles Pocket Parking betöltené a sort, az álló logók meg
     eltörpülnének mellette. */
  .logosav img{max-height:34px;max-width:112px}
  .naplo{font-size:11.5px;padding:14px}
}

/* MÉRVE: 390 pixelen az „OK” 48–69 pixerrel lógott ki a sorából, mert
   a sorok szóközökkel vannak oszlopba igazítva (`white-space:pre`), és
   a doboz vízszintesen görgethető. Vagyis pont a lényeg — hogy minden
   rendben van — csak oldalra húzva látszott. Keskeny kijelzőn ezért
   elengedjük a szóközös igazítást, és az „OK”-t a sor VÉGÉRE tesszük. */
@media (max-width:620px){
  .naplo{overflow-x:visible}
  /* Csak a szóközös oszlopigazítást engedjük el — az „OK” a mondat
     VÉGÉRE kerül, nem a sor jobb szélére. Rugalmas elrendezéssel
     (flex) próbáltuk előbb, de ott a soron belüli kiemelt szavak
     (`24 aloldal`) külön elemmé váltak, és szétesett a mondat. */
  .naplo-sor{white-space:normal}
  .naplo-sor:not(.naplo-parancs){padding-left:1.1em;text-indent:-1.1em}
  .naplo-ok,.naplo-rossz{margin-left:.7em}
}

/* ── A RÉGI/ÚJ CIMKE HELYE ──────────────────────────────
   MÉRVE: a böngészőkeret fejléce 46 px magas, az abszolút helyzetű
   cimke (top:14px) pedig pont rátakart a három pontra — ráadásul a
   rövid „ÚJ” csak kettőt takart ki, a hosszabb „RÉGI” mind a hármat,
   így a két ablak nem nézett ki egyformán. A fejlécbe ültetve a
   pontok és a webcím közé kerül, és minden nyelven ugyanúgy áll. */
.ablak-fej .ablak-cimke{position:static;flex:none}

/* ── A SÖTÉT BLOKKOK SAJÁT JELZŐI ───────────────────────
   A böngészőkeret és a napló világos lapon is sötét marad — a
   szövegszíneik viszont a témából jöttek, és ott bedőltek. MÉRVE a
   világos változatban: a kiemelt szám (#2C2B30) a napló #211F24
   hátterén 1,07:1, a webcím (#4F4F51) 1,81:1, a „RÉGI” felirat
   (#8E3A54) 2,02:1 — mind olvashatatlan. Ezért ez a két doboz saját
   jelzőket kap, ugyanúgy, ahogy a .sotet-doboz és a .lablec. */
.ablak,.naplo{
  --szoveg:#D6D6D6; --halvany:#B4B4B8; --kiemel:#F58F7C; --masodik:#F2C4CE}

/* ── A LOGÓK ───────────────────────────────────────────
   A logófájlok világos szürke sziluettek: sötét lapon pont jók,
   a világoson viszont eltűnnének (a #D9D9D9 a #F4F4F5 lapon 1,1:1).
   Mivel a lap most világos, ALAPBÓL megfordítjuk őket — sötét
   sziluettként maradnak halkak —, és a sötét témán vesszük vissza. */
.logosav img{filter:grayscale(1) invert(1);opacity:.6}
/* Sötét alapon viszont NEM fordítjuk meg — se a sötét témán, se a
   világos lap sötét sávjain (logósáv, ellentét-sáv). Ott az eredeti,
   világos sziluett a jó; megfordítva beleolvadna a háttérbe. */
[data-tema="sotet"] .logosav img,
.ellentet-sav .logosav img,
.nyito-sotet .logosav img{filter:grayscale(1);opacity:.72}

/* ── A ZÁRÓ ŰRLAP ──────────────────────────────────────
   A `mailto:` link helyére került. A korall dobozon ül, ezért a mezők
   világos hátteret kapnak, a címkék és a gomb pedig a doboz sötét
   szövegszínét — a lap általános `--halvany` címkéje ezen a háttéren
   nem olvasható. */
.zaro .zaro-urlap { margin: 0; }
.zaro .mezo { display: block; margin-bottom: 12px; }
.zaro .mezo > span { display: block; font-size: var(--sz-2); line-height: 1.4;
	color: #4A2B22; margin-bottom: 6px; }
.zaro .mezo input { display: block; width: 100%; font: 400 var(--sz-3)/1.5 var(--betu);
	color: var(--p-sotet); background: #FFF3EF; border: 1px solid #2C2B3026;
	border-radius: 12px; padding: 12px 14px;
	transition: border-color .15s, background .15s; }
.zaro .mezo input:hover { border-color: #2C2B3059; }
.zaro .mezo input:focus { background: #fff; border-color: var(--p-sotet); outline: none; }
.zaro .mezo input::placeholder { color: #6A5A55; opacity: 1; }
.zaro .jelolo { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
	margin: 14px 0 16px; font-size: 13px; line-height: 1.6; color: #4A2B22; }
.zaro .jelolo input[type=checkbox] { accent-color: var(--p-sotet); margin-top: 2px; flex: none; }
.zaro .zaro-gomb { display: block; width: 100%; cursor: pointer; border: 0;
	border-radius: 999px; padding: 15px 26px; font-family: var(--cim); font-size: 16px;
	line-height: 1.2; background: var(--p-sotet); color: var(--kiemel-f); }
.zaro .zaro-gomb:hover { background: #1C1B1F; }
.zaro .zaro-jegyzet { display: block; text-align: center; margin-top: 12px; color: #4A2B22; }

/* A záró rács jobb hasábja az űrlaptól szélesebb lett, mint egy gomb. */
.zaro { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }

.lablec-mail { word-break: break-all; }
.lablec-halk { color: var(--halvany); }

@media (max-width: 900px) {
	.zaro { grid-template-columns: 1fr; }
}

/* ── KIEMELT IDÉZET ─────────────────────────────────────────────
   Ritmustörés két kártyarács között. Szándékosan NEM kártya és nem
   doboz — a lapon már minden az; itt csak egy nagy mondat áll, hogy
   a szem megálljon rajta. */
/* A KIEMELT IDÉZET SAJÁT BLOKK.
   Korábban csak középre zárt szöveg volt keret és háttér nélkül, ezért
   beleolvadt a körülötte lévő prózába. Most doboz: a szakasz teljes
   szélességében ül (tehát kijjebb ér, mint a bekezdések), és rózsaszínbe
   hajló tónust kap — ez a lap egyetlen helye, ahol a rózsa nagy
   felületen megjelenik.

   Mérve a sötét témán: a 12%-os rózsakeverék #504A51, azon a #D6D6D6
   szöveg 5,92:1 — bőven a 4,5-ös határ fölött —, és 1,33-as
   világossági különbséggel elválik a laptól, tehát látszik, hogy külön
   blokk. A SZÖVEG viszont továbbra is 42 karakternél tördel, különben
   a doboz szélességében széthúzódna és elveszne a mondat íve. */
.idezet { max-width: none; margin: var(--ter-8) 0 0; text-align: center;
	padding: var(--ter-7) var(--ter-6) calc(var(--ter-7) + 4px);
	background: color-mix(in srgb, var(--masodik-f) 12%, var(--lap));
	border: 1px solid color-mix(in srgb, var(--masodik-f) 22%, transparent);
	border-radius: 28px; }
/* MACSKAKÖRÖM ELÉ-MÖGÉ, nem dísz fölé. A `quotes` a lap nyelvéhez
   igazodik: magyarul „ és ”, angolul “ és ”. A jelek a szöveg
   SORÁBAN ülnek, mint egy rendes idézetnél, csak nagyobbak és
   rózsaszínek — így látszik, hogy idézet, és nem kell hozzá külön
   grafikai elem. */
.idezet p { max-width: 42ch; margin: 0 auto; font-family: var(--cim);
	font-size: var(--sz-7); line-height: 1.3; color: var(--szoveg);
	quotes: "\201E" "\201D"; }
.idezet p::before { content: open-quote; }
.idezet p::after  { content: close-quote; }
.idezet p::before, .idezet p::after {
	color: var(--masodik-f); font-size: 1.25em; line-height: 0;
	vertical-align: -.08em; }
html[lang="en"] .idezet p { quotes: "\201C" "\201D"; }

/* A világos lapon a 12% nem látszana; ott 45% kell, hogy a doboz
   elváljon a laptól. A sötét témán viszont 45% már rózsa tábla. */
.idezet {
	background: color-mix(in srgb, var(--masodik-f) 45%, var(--lap));
	border-color: color-mix(in srgb, #8E3A54 18%, transparent); }
.idezet-jel { color: var(--masodik); }
[data-tema="sotet"] .idezet {
	background: color-mix(in srgb, var(--masodik-f) 12%, var(--lap));
	border-color: color-mix(in srgb, var(--masodik-f) 22%, transparent); }
[data-tema="sotet"] .idezet-jel { color: var(--masodik-f); }

@media (max-width: 900px) {
	.idezet { margin-top: var(--ter-7); padding: var(--ter-6) var(--ter-5); }
	.idezet p { font-size: var(--sz-6); }
}

/* ── KÖSZÖNŐOLDAL ──────────────────────────────────────
   Ide érkezik az ajánlatkérő űrlap. Nem kell neki több, mint egy
   visszaigazolás és egy konkrét várakozási idő — a hosszú szöveg itt
   csak elbizonytalanít. */
.koszono { min-height: 52vh; display: flex; flex-direction: column;
	justify-content: center; }
.koszono-cim { max-width: 18ch; margin-bottom: var(--ter-5); }
.koszono-proza { margin-bottom: var(--ter-6); }
.koszono-gombok { display: flex; gap: var(--ter-3); flex-wrap: wrap; }

/* ── NYOMTATÁS ÉS PDF ──────────────────────────────────
   A lapot véleményezésre PDF-ben is kiküldjük. Alapból a böngésző
   elhagyja a háttérszíneket (ettől a sötét lap fehér lesz, az olvasható
   világos szöveggel — vagyis olvashatatlan), és bárhol kettévág egy
   kártyát. Ez a blokk mindkettőt megfogja. */
@media print {
	body { background: var(--lap); }
	.lap { box-shadow: none; max-width: none; }
	/* Ne vágjon ketté olyat, aminek a két fele külön semmit nem ér. */
	.kartya, .ablak, .naplo, .zaro, .lepes, .uzenet, .sotet-doboz,
	.gyik details, .elotte-utana > div, figure {
		break-inside: avoid; page-break-inside: avoid;
	}
	.szakasz { break-inside: auto; }
	h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
	/* A fejléc gombja és a nyelvváltó papíron nem kattintható. */
	.fejlec .gomb-fo, .nyelvvalto { display: none; }
	/* A hivatkozás célja legyen látható, ha valaki papíron olvassa. */
	.lablec a[href^="mailto"]::after { content: ""; }
}

/* Öt kártya egy sorban — az „Egyedi fejlesztésű a lapod" eset
   hozzáadása után. A négyes rácsnál az ötödik magára maradt volna egy
   második sorban; így mind az öt egy sorban fér el, és a töréspontnál
   ugyanúgy egy oszlopba csukódik. */
.r5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .r5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .r5 { grid-template-columns: 1fr; } }

/* ── JEL A KÁRTYÁKON ───────────────────────────────────
   Az „Előnyök" négy kártyája csak címből és szövegből állt: a szakasz
   szöveg → szöveg → doboz → szöveg → kártyák sorrendben futott, végig
   ugyanabban a tónusban, és nem volt rajta semmi, amin a szem
   megpihen. A négy jel ezt töri meg — nem stock kép, hanem a lap saját
   vonalvastagságával rajzolva, tehát a tipográfiával egy nyelvet
   beszél. */
.kartya-jel { display: grid; place-items: center; width: 42px; height: 42px;
	border-radius: 12px; margin-bottom: var(--ter-4);
	background: var(--kiemel-halk); color: var(--kiemel); }
.kartya-jel svg { width: 22px; height: 22px; }

/* ── JEL A LÉPÉSEKEN ───────────────────────────────────
   A négy lépéskártya eddig sorszámból és szövegből állt. A jel a felső
   vonal ALATT ül, nem fölötte: a vonal a szakasz ritmusát adja, azt nem
   szabad megtörni. Ugyanaz a vonalvastagság, mint az előnykártyákon. */
.lepes-jel { display: grid; place-items: center; width: 38px; height: 38px;
	border-radius: 10px; margin: 0 0 var(--ter-3);
	background: var(--kiemel-halk); color: var(--kiemel); }
.lepes-jel svg { width: 20px; height: 20px; }

/* ── ARC A ZÁRÓ ŰRLAP MELLETT ──────────────────────────
   A lap legkockázatosabb pontja: itt dönti el a látogató, ad-e magáról
   adatot. Egy arc ott többet ér, mint bárhol máshol a lapon. */
.zaro-arc { display: flex; align-items: center; gap: 14px;
	margin-bottom: var(--ter-4); }
.zaro-arc img { width: 54px; height: 54px; border-radius: 50%; flex: none;
	object-fit: cover; border: 2px solid #2C2B3026; }
.zaro-arc span { font-size: var(--sz-2); line-height: 1.45; color: #4A2B22; }
.zaro-arc strong { display: block; color: var(--p-sotet);
	font-family: var(--cim); font-weight: 400; font-size: var(--sz-3); }