/* pénzkalkulátor — stíluslap, 3. változat (2026-10-15): barátságos, „app-szerű”.
 * Minden eszköznek saját színe van (--akcent, a <body data-eszkoz> alapján); az eredménykártya ezzel a színnel telt.
 * Az eredménykártyán belül a --brand/--line/--ink/--lap változókat átdefiniáljuk, így a lapszkriptek színei (pl. a
 * bérkalkulátor sávja) maguktól igazodnak a színes háttérhez. Betű: Plus Jakarta Sans (OFL, saját szerverről). */
@font-face { font-family:"Jakarta"; src:url(betu/jakarta-latin-ext.woff2) format("woff2"); font-weight:400 800; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Jakarta"; src:url(betu/jakarta-latin.woff2) format("woff2"); font-weight:400 800; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg:#f7f5f0; --bg-2:#efece4; --lap:#ffffff; --ink:#1c1e2b; --soft:#5d6072; --halvany:#9a9cab; --line:#e9e5dc;
  --brand:#0e9f7b; --brand-ink:#0a7d61; --brand-soft:#dff5ee; --brand-2:#34c79f;
  --arany:#f0a52a; --jo:#14904a; --rossz:#d64545; --sarga:#fff3d6; --sarga-ink:#7a4b00;
  --akcent:#0e9f7b; --akcent-2:#13b98f; --akcent-soft:#dff5ee;
  --arnyek:0 1px 2px rgba(28,30,43,.04), 0 12px 32px -14px rgba(28,30,43,.18);
  --r:22px; --font:"Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#111219; --bg-2:#191b25; --lap:#1b1d28; --ink:#f1f1f6; --soft:#a6a8b8; --halvany:#71748a; --line:#2a2c3b;
  --brand:#36d3a8; --brand-ink:#5de2bd; --brand-soft:#123a31; --brand-2:#27b892;
  --arany:#f5b544; --jo:#4ade80; --rossz:#ff7b7b; --sarga:#3a2f12; --sarga-ink:#f3d58a;
  --arnyek:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.75);
} }
:root[data-theme="dark"] {
  --bg:#111219; --bg-2:#191b25; --lap:#1b1d28; --ink:#f1f1f6; --soft:#a6a8b8; --halvany:#71748a; --line:#2a2c3b;
  --brand:#36d3a8; --brand-ink:#5de2bd; --brand-soft:#123a31; --brand-2:#27b892;
  --arany:#f5b544; --jo:#4ade80; --rossz:#ff7b7b; --sarga:#3a2f12; --sarga-ink:#f3d58a;
  --arnyek:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.75);
}
/* eszközszínek: elég teltek a fehér szöveghez a nagy számokon */
[data-eszkoz="ber"]      { --akcent:#0e9f7b; --akcent-2:#16b98f; }
[data-eszkoz="forma"]    { --akcent:#7454f5; --akcent-2:#8f73ff; }
[data-eszkoz="hol"]      { --akcent:#2b72e0; --akcent-2:#4a8df0; }
[data-eszkoz="berek"]    { --akcent:#4f46e5; --akcent-2:#6d65f2; }
[data-eszkoz="lakas"]    { --akcent:#e2711d; --akcent-2:#f08a3c; }
[data-eszkoz="hitel"]    { --akcent:#d9475b; --akcent-2:#ea6476; }
[data-eszkoz="inflacio"] { --akcent:#c98a06; --akcent-2:#e0a21b; }
[data-eszkoz="arak"]     { --akcent:#1f9a55; --akcent-2:#33b56b; }
[data-eszkoz="csalad"]   { --akcent:#c2417f; --akcent-2:#d95c97; }
[data-eszkoz] { --akcent-soft:color-mix(in srgb, var(--akcent) 13%, var(--lap)); }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; word-spacing:.08em; }   /* a Jakarta szóköze keskeny */
a { color:var(--brand-ink); text-underline-offset:2px; }
[hidden] { display:none !important; }
.szam, table, .hos, .zseb, .m-ertek { font-variant-numeric:tabular-nums; }
a:focus-visible, button:focus-visible, summary:focus-visible, .grafikon svg:focus-visible { outline:2px solid var(--akcent); outline-offset:2px; border-radius:8px; }

/* ---------- fejléc ---------- */
.fejlec { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.5) blur(14px); }
.fejlec-belso { max-width:1140px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:18px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.01em; font-size:1.12rem; white-space:nowrap; }
.logo-jel { width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg, #0e9f7b, #34c79f 60%, #f0a52a); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800; box-shadow:0 6px 16px -6px rgba(14,159,123,.7); transform:rotate(-6deg); }
.logo b { color:var(--brand); font-weight:800; }
.menu { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; background:var(--lap); padding:4px; border-radius:16px; box-shadow:var(--arnyek); }
.menu::-webkit-scrollbar { display:none; }
.menu a { text-decoration:none; color:var(--soft); font-size:.88rem; font-weight:650; padding:7px 12px; border-radius:12px; white-space:nowrap; transition:background .15s, color .15s; }
.menu a:hover { color:var(--ink); background:var(--bg-2); }
.menu a[aria-current="page"] { color:#fff; background:var(--akcent); }
.fej-jobb { display:flex; align-items:center; gap:8px; }
.elonezet { font-size:.72rem; font-weight:700; background:var(--sarga); color:var(--sarga-ink); padding:4px 9px; border-radius:99px; white-space:nowrap; }
.temagomb { font:inherit; width:38px; height:38px; display:grid; place-items:center; background:var(--lap); color:var(--soft); border:0; border-radius:12px; cursor:pointer; box-shadow:var(--arnyek); }
.temagomb svg { width:18px; height:18px; }

/* mobil: alsó menüsor (app-szerű), a felső menü elrejtve */
.alsomenu { display:none; }
@media (max-width:760px) {
  .menu { display:none; }
  .fejlec-belso { padding:10px 16px; justify-content:space-between; }
  .alsomenu { display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; z-index:40; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--lap) 92%, transparent); backdrop-filter:blur(14px); border-radius:20px; box-shadow:0 10px 30px -8px rgba(0,0,0,.28); padding:6px; }
  .alsomenu a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:14px; text-decoration:none; color:var(--soft); font-size:.66rem; font-weight:700; }
  .alsomenu a svg { width:22px; height:22px; }
  .alsomenu a[aria-current="page"] { color:#fff; background:var(--akcent); }
  body { padding-bottom:86px; }
}

/* ---------- lap ---------- */
main { max-width:1140px; margin:0 auto; padding:10px 16px 64px; }
.morzsa { font-size:.8rem; color:var(--halvany); margin:6px 0 10px; }
.morzsa a { color:var(--soft); text-decoration:none; } .morzsa a:hover { text-decoration:underline; }
/* hős-panel: az eszköz színével lágyan tónusozva, ikonbuborékkal */
.hos-blokk { position:relative; margin:0 0 22px; padding:26px 28px; border-radius:28px; background:radial-gradient(120% 140% at 0% 0%, var(--akcent-soft), transparent 60%), var(--lap); box-shadow:var(--arnyek); overflow:hidden; }
.hos-blokk::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--akcent) 22%, transparent), transparent 70%); pointer-events:none; }
.hos-fej { display:flex; gap:16px; align-items:flex-start; position:relative; }
.hos-ikon { flex:none; width:54px; height:54px; border-radius:18px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--akcent), var(--akcent-2)); box-shadow:0 10px 22px -10px var(--akcent); }
.hos-ikon svg { width:28px; height:28px; }
h1 { font-size:clamp(1.6rem, 3.6vw, 2.5rem); line-height:1.15; margin:0 0 .3em; letter-spacing:-.015em; word-spacing:.12em; font-weight:800; }
.bev { color:var(--soft); margin:0; font-size:1.03rem; max-width:760px; }
.cimkek { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; position:relative; }
.cimke-p { font-size:.76rem; font-weight:700; color:var(--soft); background:var(--bg); padding:4px 11px; border-radius:99px; }
.cimke-p.zold { color:#fff; background:var(--akcent); }
@media (max-width:600px) { .hos-blokk { padding:20px 18px; border-radius:24px; } .hos-ikon { width:44px; height:44px; border-radius:14px; } .hos-ikon svg { width:23px; height:23px; } .hos-fej { gap:12px; } }
h2 { font-size:1.25rem; letter-spacing:-.02em; margin:2em 0 .6em; line-height:1.3; }
h3 { font-size:1.02rem; margin:0 0 .4em; }

.racs { display:grid; grid-template-columns:minmax(0, 400px) minmax(0, 1fr); gap:20px; align-items:start; }
.racs.racs-graf { grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width:880px) { .racs, .racs.racs-graf { grid-template-columns:1fr; } }
.racs-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.kartya { background:var(--lap); border-radius:var(--r); padding:22px; min-width:0; box-shadow:var(--arnyek); }
.kartya-cim { font-size:.76rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--halvany); margin:0 0 12px; }

/* ---------- az eredménykártya: telt eszközszín, fehér szöveg ---------- */
.kartya.eredmeny { position:relative; overflow:hidden; color:#fff; background:linear-gradient(140deg, var(--akcent) 0%, var(--akcent-2) 100%); box-shadow:0 22px 40px -22px var(--akcent);
  --brand:#ffffff; --brand-ink:#ffffff; --brand-soft:rgba(255,255,255,.28); --brand-2:#ffffff; --line:rgba(255,255,255,.22);
  --ink:#ffffff; --soft:rgba(255,255,255,.86); --halvany:rgba(255,255,255,.72); --lap:var(--akcent); --arany:#ffd27a; --jo:#ffffff; --rossz:#ffe1e1; }
.kartya.eredmeny::before { content:""; position:absolute; right:-80px; bottom:-90px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events:none; }
.kartya.eredmeny a { color:#fff; }
.kartya.eredmeny .fel, .kartya.eredmeny .le { font-weight:700; }
.kartya.eredmeny .szamsor div { background:rgba(255,255,255,.14); }
.kartya.eredmeny .osszeg-sav { background:rgba(255,255,255,.2); }
.kartya.eredmeny .osszeg-sav .t { background:#fff; color:var(--akcent); }
.kartya.eredmeny .osszeg-sav .k { background:#ffd27a; color:#4a2e00; }
.kartya.eredmeny .eloszl .sav { background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.75)); }
.kartya.eredmeny .eloszl .vonas { background:var(--akcent); }
.kartya.eredmeny .eloszl .te { background:#fff; box-shadow:0 0 0 3px var(--akcent), 0 4px 14px rgba(0,0,0,.25); }
.kartya.eredmeny .eloszl .te::after { color:var(--akcent); }
.kartya.eredmeny .tipp { background:#fff; color:#1c1e2b; }
.kartya.eredmeny table tr:not(.ossz):hover td { background:rgba(255,255,255,.08); }
.kartya.eredmeny .csik { background:rgba(255,255,255,.25); }

/* ---------- űrlap ---------- */
label { display:block; font-size:.88rem; font-weight:700; margin:18px 0 7px; }
label:first-child { margin-top:0; }
.seg { font-weight:500; color:var(--soft); font-size:.79rem; display:block; margin-top:1px; }
input[type=text], input[type=number], select {
  width:100%; font:inherit; font-size:1rem; font-weight:600; padding:12px 15px; border:2px solid transparent; border-radius:15px; background:var(--bg); color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color:var(--halvany); font-weight:500; }
input[type=text]:hover, select:hover { background:var(--bg-2); }
input:focus, select:focus { outline:none; background:var(--lap); border-color:var(--akcent); box-shadow:0 0 0 4px color-mix(in srgb, var(--akcent) 18%, transparent); }
select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9cab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
select:disabled { opacity:.5; cursor:default; }
.mezo { position:relative; }
.mezo input { padding-right:46px; font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
.mezo .egyseg { position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--halvany); font-weight:700; pointer-events:none; }
.sor { display:flex; gap:10px; } .sor > * { flex:1; min-width:0; }
.pipa { display:flex; gap:10px; align-items:flex-start; font-weight:550; font-size:.92rem; margin:10px 0; cursor:pointer; }
.pipa input { margin-top:3px; width:19px; height:19px; accent-color:var(--akcent); flex:none; }
.valto { display:inline-flex; background:var(--bg); border-radius:15px; padding:4px; gap:2px; max-width:100%; }
.valto button { font:inherit; font-size:.86rem; font-weight:700; background:none; color:var(--soft); border:0; padding:8px 14px; border-radius:11px; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.valto button[aria-pressed="true"] { background:var(--lap); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.gyors { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.gyors a, .gyors button { font:inherit; font-size:.78rem; font-weight:700; color:var(--akcent); background:var(--akcent-soft); border:0; border-radius:99px; padding:5px 12px; text-decoration:none; cursor:pointer; }
.gyors a:hover, .gyors button:hover { background:var(--akcent); color:#fff; }
details { margin-top:18px; border-top:2px dashed var(--line); padding-top:14px; }
summary { cursor:pointer; font-weight:700; font-size:.92rem; color:var(--ink); }
summary::marker { color:var(--akcent); }
/* csúszka */
.csuszka { -webkit-appearance:none; appearance:none; width:100%; height:26px; margin:10px 0 0; background:none; cursor:pointer; --tolt:50%; }
.csuszka::-webkit-slider-runnable-track { height:8px; border-radius:4px; background:linear-gradient(90deg, var(--akcent) var(--tolt), color-mix(in srgb, var(--ink) 13%, transparent) var(--tolt)); }
.csuszka::-moz-range-track { height:8px; border-radius:4px; background:color-mix(in srgb, var(--ink) 13%, transparent); }
.csuszka::-moz-range-progress { height:8px; border-radius:4px; background:var(--akcent); }
.csuszka::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; margin-top:-8px; border-radius:50%; background:#fff; border:3px solid var(--akcent); box-shadow:0 3px 10px rgba(0,0,0,.2); transition:transform .12s; }
.csuszka::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--akcent); box-shadow:0 3px 10px rgba(0,0,0,.2); }
.csuszka:active::-webkit-slider-thumb { transform:scale(1.18); }
.csuszka:focus-visible { outline:none; } .csuszka:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 5px color-mix(in srgb, var(--akcent) 30%, transparent); }
.csuszka-hatar { display:flex; justify-content:space-between; font-size:.72rem; font-weight:600; color:var(--halvany); margin-top:1px; }
/* ajánlat-blokkok (A/B) */
.ajanlat { border-radius:18px; padding:16px; background:var(--bg); margin-top:14px; }
.ajanlat:first-child { margin-top:0; }
.ajanlat-fej { display:flex; align-items:center; gap:9px; font-weight:800; font-size:.95rem; margin:0 0 4px; }
.ajanlat input[type=text], .ajanlat select { background:var(--lap); }
.betujel { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:.78rem; font-weight:800; color:#fff; background:var(--akcent); flex:none; }
.betujel.b { background:#f0a52a; }

/* ---------- eredmények ---------- */
.hos-cim { color:var(--soft); font-size:.9rem; font-weight:600; margin:0; position:relative; }
.hos { font-size:clamp(2.3rem, 7vw, 3.4rem); font-weight:800; letter-spacing:-.02em; word-spacing:.12em; margin:2px 0 0; line-height:1.08; position:relative; }
.hos small { font-size:.42em; font-weight:700; opacity:.85; letter-spacing:0; margin-left:4px; }
.csik { display:flex; height:14px; border-radius:7px; overflow:hidden; margin:18px 0 10px; gap:3px; background:var(--line); position:relative; }
.csik div { height:100%; border-radius:4px; }
.jel { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.82rem; color:var(--soft); position:relative; }
.jel i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
table { width:100%; border-collapse:collapse; font-size:.92rem; position:relative; }
td, th { padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; }
th { font-size:.74rem; font-weight:800; color:var(--halvany); text-transform:uppercase; letter-spacing:.05em; }
td:last-child, th:last-child { text-align:right; white-space:nowrap; padding-left:12px; }
tr.ossz td { font-weight:800; border-bottom:0; }
table tr:not(.ossz):hover td { background:color-mix(in srgb, var(--akcent) 5%, transparent); }
.kartya table tr:last-child td { border-bottom:0; }
@media (max-width:520px) { td:last-child { white-space:normal; min-width:5.5em; } }
.kicsi { font-size:.82rem; color:var(--soft); position:relative; }
.figy { background:var(--sarga); color:var(--sarga-ink); border-radius:15px; padding:12px 15px; font-size:.88rem; margin:0 0 12px; }
.mutatok { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin:0 0 18px; }
.mutato { position:relative; background:var(--lap); border-radius:20px; padding:18px 18px 16px; box-shadow:var(--arnyek); overflow:hidden; }
.mutato::before { content:""; position:absolute; left:0; top:0; right:0; height:4px; background:linear-gradient(90deg, var(--akcent), var(--akcent-2)); }
.mutato .m-cim { font-size:.8rem; font-weight:600; color:var(--soft); margin:0; }
.mutato .m-ertek { font-size:1.5rem; font-weight:800; letter-spacing:-.015em; margin:3px 0 0; }
.mutato .m-al { font-size:.76rem; color:var(--halvany); margin:2px 0 0; }
.fel { color:var(--jo); } .le { color:var(--rossz); }
.szamsor { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; margin-top:16px; position:relative; }
.szamsor div { background:var(--bg); border-radius:14px; padding:10px 13px; }
.szamsor span { display:block; font-size:.74rem; font-weight:600; color:var(--soft); }
.szamsor b { display:block; font-size:1.08rem; letter-spacing:-.01em; }
.osszeg-sav { display:flex; height:24px; border-radius:8px; overflow:hidden; gap:3px; background:var(--line); margin:5px 0 2px; position:relative; }
.osszeg-sav div { height:100%; display:flex; align-items:center; padding:0 9px; font-size:.72rem; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; border-radius:6px; }
.osszeg-sav .t { background:var(--brand); } .osszeg-sav .k { background:var(--arany); color:#3d2700; }
.mero { position:relative; height:14px; border-radius:7px; background:var(--bg-2); margin:10px 0 24px; }
.mero .tolt { position:absolute; inset:0 auto 0 0; border-radius:7px; background:linear-gradient(90deg, var(--akcent), var(--akcent-2)); }
.mero .tolt.tul { background:linear-gradient(90deg, #f0a52a, var(--rossz)); }
.mero .hatar { position:absolute; top:-6px; bottom:-6px; width:3px; border-radius:2px; background:var(--ink); }
.mero .hatar span { position:absolute; top:24px; left:50%; transform:translateX(-50%); font-size:.72rem; font-weight:700; color:var(--soft); white-space:nowrap; }

/* ---------- ajánlat- és formakártyák ---------- */
.formak { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.forma { border-radius:var(--r); padding:20px; background:var(--lap); min-width:0; position:relative; box-shadow:var(--arnyek); border:2px solid transparent; }
.forma.legjobb { border-color:var(--akcent); background:linear-gradient(180deg, var(--akcent-soft), var(--lap) 130px); }
.forma.ki { opacity:.55; box-shadow:none; }
.forma h3 { margin:0 0 4px; font-size:1.02rem; display:flex; align-items:center; gap:9px; }
.forma h3 .betujel { width:24px; height:24px; font-size:.7rem; border-radius:8px; }
.cimke { position:absolute; top:-12px; right:16px; background:var(--akcent); color:#fff; font-size:.72rem; font-weight:800; padding:4px 11px; border-radius:99px; box-shadow:0 6px 14px -6px var(--akcent); }
.zseb { font-size:1.7rem; font-weight:800; letter-spacing:-.015em; margin:6px 0 0; }
.teher { font-size:.84rem; color:var(--soft); margin:0 0 8px; }
.forma table { font-size:.82rem; }
.ok { font-size:.86rem; color:var(--rossz); margin:6px 0 0; }
.megj { font-size:.8rem; color:var(--soft); margin:8px 0 0; }

/* ---------- bér-eloszlás sáv (húzható jelölővel) ---------- */
.eloszl { position:relative; height:54px; margin:34px 0 34px; touch-action:none; cursor:ew-resize; user-select:none; -webkit-user-select:none; }
.eloszl .sav { position:absolute; left:0; right:0; top:16px; height:20px; border-radius:10px; background:linear-gradient(90deg, var(--akcent-soft), var(--akcent)); }
.eloszl .vonas { position:absolute; top:12px; height:28px; width:2px; background:var(--lap); }
.eloszl .vcim { position:absolute; top:44px; transform:translateX(-50%); font-size:.72rem; font-weight:600; color:var(--soft); white-space:nowrap; text-align:center; line-height:1.3; }
.eloszl .te { position:absolute; top:4px; width:18px; height:44px; margin-left:-9px; border-radius:9px; background:var(--ink); box-shadow:0 0 0 3px var(--lap), 0 4px 14px rgba(0,0,0,.25); cursor:grab; transition:transform .12s; }
.eloszl.huz .te { cursor:grabbing; transform:scale(1.12); }
.eloszl .te::after { content:""; position:absolute; left:5px; right:5px; top:15px; height:14px; border-left:2px solid currentColor; border-right:2px solid currentColor; opacity:.45; color:var(--lap); }
.eloszl .tecim { position:absolute; top:-26px; transform:translateX(-50%); font-size:.82rem; font-weight:800; white-space:nowrap; }
.tipp, .eloszl .tipp { position:absolute; background:var(--ink); color:var(--lap); font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:10px; white-space:nowrap; pointer-events:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.45); z-index:5; }
.eloszl .tipp { top:-58px; transform:translateX(-50%); }
.huzas-tipp { font-size:.76rem; color:var(--soft); margin:0 0 14px; position:relative; }
.talalat { border-radius:15px; margin-top:6px; max-height:250px; overflow:auto; background:var(--lap); box-shadow:var(--arnyek); }
.talalat button { display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left; font:inherit; font-size:.88rem; background:none; border:0; border-bottom:1px solid var(--line); padding:10px 14px; color:var(--ink); cursor:pointer; }
.talalat button:last-child { border-bottom:0; }
.talalat button:hover, .talalat button:focus { background:var(--akcent-soft); outline:none; }
td.oszl { width:44%; }

/* ---------- grafikon (grafikon.js) ---------- */
.grafikon { position:relative; width:100%; }
.grafikon svg { display:block; width:100%; height:auto; overflow:visible; }
.grafikon .racsvonal { stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; }
.grafikon .tengely { fill:var(--halvany); font-size:11px; font-weight:600; font-family:var(--font); }
.grafikon .vonal { fill:none; stroke:var(--akcent); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.grafikon .terulet { fill:url(#gr-szin); opacity:.9; }
.grafikon .kereszt { stroke:var(--halvany); stroke-width:1; stroke-dasharray:3 3; }
.grafikon .pont { fill:var(--akcent); stroke:var(--lap); stroke-width:2.5; }
.tabla-gorg { max-height:340px; overflow:auto; margin-top:10px; border-radius:15px; background:var(--bg); }
.tabla-gorg table { font-size:.84rem; }
.tabla-gorg th { position:sticky; top:0; background:var(--bg-2); z-index:1; padding:9px 10px; }
.tabla-gorg td { padding:7px 10px; }
@media (max-width:520px) { .tabla-gorg table { font-size:.74rem; } .tabla-gorg th, .tabla-gorg td { padding:6px; } .tabla-gorg th { font-size:.64rem; letter-spacing:0; } }

/* ---------- csempék (főoldal, „további”), listák ---------- */
.csempek { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.csempe { position:relative; display:block; text-decoration:none; color:var(--ink); background:var(--lap); border-radius:var(--r); padding:20px; box-shadow:var(--arnyek); transition:transform .18s, box-shadow .18s; }
.csempe:hover { transform:translateY(-3px); box-shadow:0 2px 4px rgba(0,0,0,.04), 0 20px 36px -16px color-mix(in srgb, var(--akcent) 55%, transparent); }
.csempe .ikon { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--akcent), var(--akcent-2)); margin-bottom:12px; box-shadow:0 8px 18px -10px var(--akcent); }
.csempe .ikon svg { width:25px; height:25px; }
.csempe h3 { margin:0 0 4px; font-size:1.06rem; font-weight:800; }
.csempe p { margin:0; color:var(--soft); font-size:.88rem; }
.csempe::after { content:"→"; position:absolute; right:20px; top:20px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--bg); color:var(--soft); font-weight:800; transition:transform .18s, background .18s, color .18s; }
.csempe:hover::after { transform:translateX(3px); background:var(--akcent); color:#fff; }
.tovabbi { margin-top:48px; }
.tovabbi h2 { font-size:1.1rem; margin:0 0 14px; }
.kicsi-csempek { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.kicsi-csempek .csempe { display:flex; gap:12px; align-items:center; padding:12px 46px 12px 12px; border-radius:18px; }
.kicsi-csempek .csempe .ikon { width:40px; height:40px; border-radius:13px; margin:0; flex:none; }
.kicsi-csempek .csempe .ikon svg { width:20px; height:20px; }
.kicsi-csempek .csempe h3 { font-size:.92rem; margin:0; }
.kicsi-csempek .csempe p { font-size:.78rem; }
.kicsi-csempek .csempe::after { top:50%; right:12px; width:26px; height:26px; transform:translateY(-50%); }
.kicsi-csempek .csempe:hover::after { transform:translate(3px, -50%); }
.lista { columns:3 260px; column-gap:28px; padding:0; margin:0; list-style:none; }
.lista li { break-inside:avoid; padding:7px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; font-size:.92rem; }
.lista li a { text-decoration:none; color:var(--ink); font-weight:550; } .lista li a:hover { color:var(--akcent); }
.lista li span { color:var(--soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.kereso-mezo { max-width:480px; margin:0 0 18px; }

/* ---------- módszer, lábléc ---------- */
.modszer { margin-top:36px; font-size:.9rem; color:var(--soft); max-width:840px; }
.modszer h2 { font-size:1.08rem; color:var(--ink); margin:1.5em 0 .4em; }
.lablec { margin-top:20px; background:var(--lap); border-radius:32px 32px 0 0; }
.lablec-belso { max-width:1140px; margin:0 auto; padding:30px 16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; font-size:.86rem; color:var(--soft); }
.lablec h4 { margin:0 0 8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color:var(--halvany); }
.lablec a { color:var(--soft); text-decoration:none; display:block; padding:2px 0; } .lablec a:hover { color:var(--brand-ink); }
.lablec-also { max-width:1140px; margin:0 auto; padding:14px 16px 26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:.8rem; color:var(--halvany); }
@media (prefers-reduced-motion: reduce) { .csempe, .csempe::after, .csuszka::-webkit-slider-thumb, .eloszl .te { transition:none; } }
/* hosszú, szóköz nélküli szórészek (pl. „zuhanyzós/fürdőszobás”) se lógjanak ki mobilon */
h1, h2, h3, .bev, .cimke-p, .lista li a, td { overflow-wrap:anywhere; }
.hos-fej > div { min-width:0; }

/* ---------- árfolyam (2026-10-21) ---------- */
[data-eszkoz="arfolyam"] { --akcent:#2563eb; --akcent-2:#3b82f6; }
.adatsav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; color:var(--soft); background:var(--lap); border-radius:14px; padding:9px 14px; margin:0 0 16px; box-shadow:var(--arnyek); }
.adatsav b { color:var(--ink); font-weight:700; }
.pont-elo { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px color-mix(in srgb, #22c55e 22%, transparent); flex:none; }
.arf-racs { align-items:start; }
.atvalto { display:grid; gap:10px; }
.atv-cim { font-size:.78rem; font-weight:700; color:var(--soft); margin:0 0 4px; display:block; }
.atv-mezo { display:flex; align-items:center; background:var(--bg); border-radius:16px; padding:4px 6px 4px 16px; gap:8px; border:2px solid transparent; transition:border-color .15s; }
.atv-mezo:focus-within { border-color:var(--akcent); }
.atv-mezo input, .atv-mezo output { flex:1; min-width:0; font:inherit; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; border:0; background:transparent; color:var(--ink); padding:10px 0; outline:none; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atv-ki { background:var(--akcent-soft); }
.atv-mezo select { width:auto; flex:none; font:inherit; font-weight:700; font-size:1rem; border:0; border-radius:12px; padding:10px 30px 10px 12px; background-color:var(--lap); margin:0; }
.atv-csere { justify-self:center; width:44px; height:44px; border-radius:50%; border:0; background:var(--akcent); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:var(--arnyek); transition:transform .2s; margin:-4px 0; }
.atv-csere:hover { transform:rotate(180deg); }
.atv-csere svg { width:22px; height:22px; }
.atv-arf { margin:2px 0 0; }
.arf-kartyak { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.arf-kartya { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:6px; padding:18px 20px 14px; border-radius:22px; color:#fff; text-decoration:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(140deg, var(--k1), var(--k2)); box-shadow:0 14px 30px -18px var(--k1), var(--arnyek); transition:transform .18s, box-shadow .18s; }
.arf-kartya:hover { transform:translateY(-3px); box-shadow:0 20px 38px -18px var(--k1), var(--arnyek); }
.arf-jel { position:absolute; right:-6px; bottom:-34px; z-index:-1; font-size:9rem; font-weight:800; line-height:1; color:rgba(255,255,255,.12); letter-spacing:-.06em; pointer-events:none; }
.arf-fej { display:flex; align-items:center; gap:8px; }
.arf-zaszlo { font-size:1.35rem; line-height:1; }
.arf-nev { font-weight:700; font-size:1rem; }
.arf-kod { margin-left:auto; font-size:.72rem; font-weight:800; letter-spacing:.08em; background:rgba(255,255,255,.18); padding:3px 8px; border-radius:99px; }
.arf-ertek { font-size:2.1rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.arf-ertek small { font-size:1rem; font-weight:700; opacity:.85; }
.arf-chipek { display:flex; gap:6px; flex-wrap:wrap; }
.arf-chip { font-size:.76rem; font-weight:700; background:rgba(255,255,255,.17); border-radius:99px; padding:3px 9px; font-variant-numeric:tabular-nums; }
.arf-chip small { font-weight:500; opacity:.8; }
.arf-mini { width:100%; height:44px; color:rgba(255,255,255,.9); margin:2px 0 0; }
.arf-also { font-size:.72rem; opacity:.85; } .arf-also b { font-weight:700; }
.graf-fej { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.graf-fej .kartya-cim { margin:0; }
.szegmens { display:inline-flex; background:var(--bg); border-radius:12px; padding:3px; gap:2px; flex-wrap:wrap; }
.szegmens button { font:inherit; font-size:.78rem; font-weight:700; border:0; background:transparent; color:var(--soft); padding:6px 10px; border-radius:9px; cursor:pointer; }
.szegmens button[aria-pressed="true"] { background:var(--lap); color:var(--akcent); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.lapozo { display:flex; justify-content:space-between; gap:10px; margin:18px 0; font-weight:700; }
.gyik h3 { font-size:1rem; margin:16px 0 4px; color:var(--ink); }
@media (max-width:560px) { .atv-mezo input, .atv-mezo output { font-size:1.35rem; } .arf-kartya { padding:14px; } }
.jogi-sav { display:flex; gap:12px; align-items:flex-start; margin:26px 0 8px; padding:14px 16px; border-radius:16px; background:var(--bg-2); border:1px solid var(--line); font-size:.8rem; line-height:1.55; color:var(--soft); }
.jogi-sav svg { width:20px; height:20px; flex:none; color:var(--halvany); margin-top:1px; }
.jogi-sav p { margin:0; } .jogi-sav b { color:var(--ink); font-weight:650; } .jogi-sav .halvany { color:var(--halvany); }

/* ---------- Digital Dynamics: sáv + ajánlókártya ---------- */
.dd-sav { display:flex; align-items:center; gap:10px; justify-content:center; padding:7px 16px; background:linear-gradient(90deg, #4f46e5, #0ea5e9); color:#fff; text-decoration:none; font-size:.8rem; line-height:1.3; }
.dd-sav-jel { flex:none; width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-weight:800; font-size:.72rem; }
.dd-sav-szoveg { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-sav-szoveg b { font-weight:700; }
.dd-sav-gomb { flex:none; font-weight:800; background:#fff; color:#4338ca; border-radius:99px; padding:3px 10px; font-size:.74rem; }
.dd-sav:hover .dd-sav-gomb { background:#eef2ff; }
@media (max-width:640px) { .dd-sav { justify-content:space-between; font-size:.74rem; } .dd-sav-szoveg b { display:none; } }
.dd-ajanlo { margin:34px 0 10px; }
.dd-kartya { display:grid; grid-template-columns:1.15fr .95fr; gap:28px; align-items:center; background:radial-gradient(110% 120% at 0% 0%, color-mix(in srgb, #6366f1 12%, var(--lap)), var(--lap) 60%); border:1px solid var(--line); border-radius:26px; padding:28px 30px; box-shadow:var(--arnyek); }
.dd-kicker { font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6366f1; margin:0 0 8px; }
.dd-ajanlo h2 { margin:0 0 10px; font-size:1.45rem; letter-spacing:-.02em; }
.dd-ajanlo p { color:var(--soft); margin:0 0 12px; font-size:.95rem; }
.dd-ajanlo ul { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:6px; }
.dd-ajanlo li { position:relative; padding-left:24px; font-size:.92rem; }
.dd-ajanlo li::before { content:""; position:absolute; left:2px; top:.45em; width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg, #6366f1, #0ea5e9); }
.dd-zaro b { color:var(--ink); }
.dd-cta { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:99px; background:linear-gradient(90deg, #4f46e5, #0ea5e9); color:#fff; font-weight:800; text-decoration:none; margin:4px 12px 8px 0; box-shadow:0 10px 24px -12px #4f46e5; }
.dd-mail { font-size:.85rem; color:var(--soft); }
.dd-elonezet { display:block; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2); text-decoration:none; box-shadow:0 18px 40px -24px rgba(0,0,0,.45); transition:transform .2s; }
.dd-elonezet:hover { transform:translateY(-3px); }
.dd-bsav { display:flex; align-items:center; gap:5px; padding:8px 12px; background:var(--bg-2); font-size:.72rem; font-weight:700; color:var(--halvany); }
.dd-bsav i { width:8px; height:8px; border-radius:99px; background:var(--line); display:block; }
.dd-bsav b { margin-left:8px; }
.dd-elonezet img { display:block; width:100%; height:auto; }
@media (max-width:860px) { .dd-kartya { grid-template-columns:1fr; padding:22px; } .dd-elonezet { order:-1; } }
.nyelvvalto { display:inline-flex; gap:2px; background:var(--bg); border-radius:12px; padding:3px; margin:0 0 12px; }
.nyelvvalto a, .nyelvvalto span { font-size:.8rem; font-weight:700; padding:6px 12px; border-radius:9px; text-decoration:none; color:var(--soft); }
.nyelvvalto span { background:var(--lap); color:var(--akcent); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.nyelvvalto a:hover { color:var(--ink); }
.jogi-felso { display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; font-size:.78rem; line-height:1.5; color:var(--soft); max-width:820px; }
.jogi-felso svg { width:16px; height:16px; flex:none; margin-top:2px; color:var(--halvany); }
.jogi-felso a { white-space:nowrap; }

/* ---------- Otthon Start vs Wekerle Plusz (2026-10-21) — sorozatszínek: dataviz-validátor, világos #fff / sötét #1b1d28 felületen ---------- */
:root { --s1:#2a78d6; --s2:#eb6834; --s0:#cfcbc0; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --s1:#3987e5; --s2:#d95926; --s0:#3b3e50; } }
:root[data-theme="dark"] { --s1:#3987e5; --s2:#d95926; --s0:#3b3e50; }
.ov-roviden { background:var(--lap); border-radius:22px; padding:18px 22px; box-shadow:var(--arnyek); margin:0 0 16px; border-left:5px solid var(--akcent); }
.ov-roviden h2 { margin:0 0 8px; font-size:1.05rem; }
.ov-roviden ul { margin:0; padding-left:18px; display:grid; gap:5px; font-size:.93rem; }
.ov-vezerlo { display:grid; gap:18px; }
.ov-mezok { display:grid; grid-template-columns:minmax(0, 1.4fr) auto auto; gap:18px; align-items:end; }
.ov-mezok label, .ov-cim { display:block; font-size:.82rem; font-weight:700; color:var(--soft); margin:0 0 8px; }
.ov-mezok label b { color:var(--ink); font-size:1rem; }
.ov-csuszka { width:100%; }
.ov-kpi { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.ov-k { background:var(--bg); border-radius:16px; padding:12px 14px; min-width:0; }
.ov-k > span { display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color:var(--soft); flex-wrap:wrap; }
.ov-k b { display:block; font-size:1.3rem; letter-spacing:-.015em; font-variant-numeric:tabular-nums; margin-top:2px; }
.ov-k small { color:var(--halvany); font-size:.74rem; }
.ov-kiemelt { background:var(--akcent-soft); } .ov-kiemelt b { color:var(--ink); }
.ov-jel { display:inline-block; width:11px; height:11px; border-radius:3px; flex:none; vertical-align:-1px; margin-right:2px; }
.ov-s1 { background:var(--s1); } .ov-s2 { background:var(--s2); } .ov-semleges { background:var(--s0); }
.ov-grafok { margin-top:16px; align-items:stretch; }
.ov-graf { position:relative; min-height:120px; }
.ov-graf svg { display:block; overflow:visible; }
.ov-graf .tipp { position:absolute; pointer-events:none; background:var(--ink); color:var(--lap); font-size:.78rem; line-height:1.45; padding:7px 10px; border-radius:10px; white-space:nowrap; z-index:3; box-shadow:var(--arnyek); }
.ov-graf .tipp .ov-jel { outline:1px solid var(--lap); }
.ov-sorcim { font-size:12.5px; font-weight:700; fill:var(--soft); }
.ov-sorcim .ov-osszeg { fill:var(--ink); }
.ov-belso { font-size:11.5px; font-weight:700; fill:#fff; pointer-events:none; }
.ov-s1-f { fill:var(--s1); } .ov-s2-f { fill:var(--s2); } .ov-semleges-f { fill:var(--s0); }
.ov-vonal { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ov-vonal.ov-s1-v { stroke:var(--s1); } .ov-vonal.ov-s2-v { stroke:var(--s2); }
.ov-pont { stroke:var(--lap); stroke-width:2; } .ov-pont.ov-s1-v { fill:var(--s1); } .ov-pont.ov-s2-v { fill:var(--s2); }
.ov-jelm { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.78rem; color:var(--soft); margin-top:8px; }
.ov-jelm span { display:inline-flex; align-items:center; gap:6px; }
.ov-hokep td[data-h] { background:color-mix(in srgb, var(--s2) calc(var(--h) * 55%), var(--lap)); font-variant-numeric:tabular-nums; transition:outline-color .15s; }
.ov-hokep td.ov-kijelolt { outline:3px solid var(--ink); outline-offset:-3px; font-weight:800; }
@media (max-width:860px) { .ov-mezok { grid-template-columns:1fr; } .ov-kpi { grid-template-columns:repeat(2, minmax(0, 1fr)); } }