/* Hitelkalkulátor.net — ledger theme. Light only. See DESIGN.md. */
:root {
  --papir: #fdfdfb;
  --lap: #ffffff;
  --tinta: #16212b;
  --tinta-2: #4a5661;
  --tinta-3: #6d7882;
  --zold: #2f6b4f;
  --zold-mely: #24553e;
  --zold-halvany: #eef4ef;
  --tegla: #b4583a;
  --tegla-halvany: #f8eee9;
  --vonal: #e6e9e4;
  --vonal-2: #d3d9d1;
  --ki-hatter: #f6f8f4;
  --display: "PT Serif Caption", Georgia, "Times New Roman", serif;
  --body: "Afacad Flux", "Segoe UI", system-ui, sans-serif;
  --szel: 1180px;
  --olvas: 720px;
  --kor: 8px;
  --arnyek: 0 1px 2px rgba(22, 33, 43, .04), 0 12px 32px -18px rgba(22, 33, 43, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-feature-settings: "kern";
}
img { max-width: 100%; height: auto; }
a { color: var(--zold-mely); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tinta); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.2; letter-spacing: -.005em; margin: 0 0 .5em; }
output, .fokonyv, table, .ki-ertek, .naplo time, .szamoljunk-test, .mini-ki, .regi-hitelek { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 2px solid var(--zold); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.fejlec { border-bottom: 1px solid var(--vonal); background: var(--papir); }
.fejlec-in {
  max-width: var(--szel); margin: 0 auto; padding: 1rem 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.szo-jel {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: 1.4rem; color: var(--tinta); text-decoration: none; line-height: 1;
}
.szo-jel-tld { color: var(--tinta-3); }
.glyph { flex: none; display: block; }
.fomenu { display: flex; gap: 1.75rem; font-size: 1.02rem; }
.fomenu a { color: var(--tinta-2); text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; }
.fomenu a:hover, .fomenu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }

main { display: block; }

/* ---------- homepage opening ---------- */
.nyito { max-width: var(--szel); margin: 0 auto; padding: 2.75rem 24px 1rem; }
.nyito-fej { max-width: 56rem; margin-bottom: 1.75rem; }
.nyito-fej h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.85rem); max-width: 24ch; margin-bottom: .45em; }
.nyito-fej p { color: var(--tinta-2); margin: 0; max-width: 62ch; }

/* ---------- calculator sheet ---------- */
.lap { background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--kor); box-shadow: var(--arnyek); }
.kalk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); overflow: hidden; }
.kalk-be { border: 0; margin: 0; padding: 1.75rem 1.75rem 1.5rem; min-width: 0; }
.kalk-be legend { font-family: var(--display); font-size: 1.15rem; padding: 0; margin-bottom: .75rem; float: left; width: 100%; }
.kalk-be legend + * { clear: left; }
.mezo { display: block; margin-bottom: 1rem; }
.mezo-nev { display: block; font-size: .98rem; color: var(--tinta-2); margin-bottom: .3rem; }
.mezo-sor { display: flex; align-items: stretch; border: 1px solid var(--vonal-2); border-radius: 6px; background: var(--papir); transition: border-color .15s; }
.mezo-sor:focus-within { border-color: var(--zold); box-shadow: 0 0 0 3px rgba(47, 107, 79, .14); }
.mezo-sor input, .regi-sor input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: inherit; font-size: 1.2rem; color: var(--tinta);
  padding: .55rem .75rem; font-variant-numeric: tabular-nums; text-align: right;
}
.mezo-sor input:focus, .regi-sor input:focus { outline: none; }
.mezo-egys { display: flex; align-items: center; padding: 0 .8rem 0 .2rem; color: var(--tinta-3); font-size: 1rem; white-space: nowrap; }
.mezo-tipp { display: block; font-size: .88rem; color: var(--tinta-3); margin-top: .25rem; line-height: 1.4; }

.kalk-ki { background: var(--ki-hatter); border-left: 1px solid var(--vonal); padding: 1.75rem 2rem 1.5rem; display: flex; flex-direction: column; min-width: 0; }
.ki-fo { margin: 0 0 1.25rem; display: flex; flex-direction: column; }
.ki-nev { font-size: 1rem; color: var(--tinta-2); }
.ki-ertek { font-family: var(--display); font-size: clamp(2.6rem, 1.6rem + 3vw, 3.9rem); line-height: 1.05; color: var(--tinta); letter-spacing: -.01em; }
.ki-ertek small { font-family: var(--body); font-size: 1.15rem; color: var(--tinta-3); letter-spacing: 0; }
.ki-ertek.kicsi { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem); }
.ki-sorok { margin: 0; border-top: 1px solid var(--vonal-2); }
.ki-sorok > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--vonal); }
.ki-sorok dt { color: var(--tinta-2); }
.ki-sorok dd { margin: 0; font-size: 1.22rem; font-weight: 500; white-space: nowrap; text-align: right; }
.ki-meg { display: block; font-size: .85rem; color: var(--tinta-3); }
.kamat-szin { color: var(--tegla); }
.toke-szin { color: var(--zold); }
.ki-megj { font-size: .92rem; color: var(--tinta-3); line-height: 1.5; margin: 1rem 0 0; }
.ki-megj:empty { display: none; }
.hibas output { opacity: .35; }
.nojs { font-size: .95rem; color: var(--tinta-2); background: var(--tegla-halvany); border: 1px solid #ecd6cb; border-radius: 6px; padding: .6rem .8rem; margin: 1rem 0 0; }

/* ---------- ledger ---------- */
.fokonyv { margin-top: 1.75rem; }
.fokonyv-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.fokonyv-fej h2 { font-size: 1.45rem; margin: 0; }
.jelmagyarazat { margin: 0; font-size: .95rem; color: var(--tinta-2); display: flex; align-items: center; gap: .4rem; }
.j { display: inline-block; width: .85rem; height: .85rem; border-radius: 2px; margin-left: .6rem; }
.j-toke { background: var(--zold); }
.j-kamat { background: var(--tegla); }
.fokonyv-sorok { border-top: 1px solid var(--tinta); }
.fk-sor {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) 8.5rem 8.5rem 9.5rem; gap: 1rem; align-items: center;
  padding: .38rem 0; border-bottom: 1px solid var(--vonal); font-size: 1rem;
}
.fk-sor > span:nth-child(n+3) { text-align: right; white-space: nowrap; }
.fk-sor > span:nth-child(3) { color: var(--zold); }
.fk-sor > span:nth-child(4) { color: var(--tegla); }
.fk-fejsor { font-size: .88rem; color: var(--tinta-3); padding: .45rem 0; }
.fk-fejsor > span:nth-child(3), .fk-fejsor > span:nth-child(4) { color: var(--tinta-3); }
.fk-ev { color: var(--tinta-3); }
.fk-sav { display: block; height: 14px; }
.sav { display: block; height: 100%; background: var(--tegla); border-radius: 2px; overflow: hidden; }
.sav-toke { display: block; height: 100%; background: var(--zold); }
.fk-sor:hover { background: #fafbf8; }

.havi-tabla { margin-top: 1rem; }
.havi-tabla summary { cursor: pointer; color: var(--zold-mely); font-size: 1.02rem; padding: .4rem 0; }
.havi-tabla summary:hover { color: var(--tinta); }
.havi-tabla .tabla-gorgeto { max-height: 30rem; overflow: auto; border: 1px solid var(--vonal); border-radius: 6px; margin-top: .5rem; }
.havi-tabla table { margin: 0; }
.havi-tabla thead th { position: sticky; top: 0; background: var(--lap); }
.havi-tabla tr.evvege td { border-bottom-color: var(--vonal-2); }

/* ---------- tables (general) ---------- */
.tabla-gorgeto { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th { font-weight: 500; color: var(--tinta-2); text-align: right; padding: .5rem .75rem; border-bottom: 1px solid var(--tinta); white-space: nowrap; }
td { text-align: right; padding: .45rem .75rem; border-bottom: 1px solid var(--vonal); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
.cikk-test td { white-space: normal; }
.a-left { text-align: left; }

/* ---------- other calculators ---------- */
.tovabbi, .utmutatok { max-width: var(--szel); margin: 0 auto; padding: 3.25rem 24px 0; }
.tovabbi h2, .utmutatok h2 { font-size: 1.6rem; margin-bottom: .9rem; }
.kalk-linkek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--tinta); }
.kalk-linkek li { padding: 1rem 0; }
.kalk-linkek a { font-family: var(--display); font-size: 1.28rem; color: var(--tinta); text-decoration: none; display: inline-block; border-bottom: 1px solid var(--vonal-2); line-height: 1.25; }
.kalk-linkek a::after { content: " →"; color: var(--zold); }
.kalk-linkek a:hover { border-bottom-color: var(--tinta); }
.kalk-linkek span { display: block; color: var(--tinta-2); font-size: 1rem; margin-top: .45rem; line-height: 1.45; }

.utmutatok-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.utmutatok-fej p { margin: 0; color: var(--tinta-3); }
.ut-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; border-top: 1px solid var(--tinta); counter-reset: ut; }
.ut-lista li { padding: .9rem 0 .95rem 2.4rem; border-bottom: 1px solid var(--vonal); position: relative; counter-increment: ut; }
.ut-lista li::before { content: counter(ut, decimal-leading-zero); position: absolute; left: 0; top: 1.02rem; color: var(--tinta-3); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ut-lista a { font-family: var(--display); font-size: 1.15rem; color: var(--tinta); text-decoration: none; line-height: 1.3; }
.ut-lista a:hover { text-decoration: underline; }
.ut-lista span { display: block; color: var(--tinta-2); font-size: .98rem; margin-top: .2rem; line-height: 1.45; }

.modszer { max-width: var(--szel); margin: 0 auto; padding: 3.25rem 24px 3.5rem; }
.modszer-in { max-width: 46rem; color: var(--tinta-2); font-size: 1.05rem; }
.modszer-in h2 { font-size: 1.35rem; color: var(--tinta); }

/* ---------- article ---------- */
.cikk, .kalk-oldal, .lista { padding: 2.75rem 24px 4rem; }
.cikk-fej, .cikk-test, .lista-fej, .lista-bev, .naplo { max-width: var(--olvas); margin-left: auto; margin-right: auto; }
.cikk-rovat { margin: 0 0 .6rem; font-size: 1rem; }
.cikk-rovat a { color: var(--zold-mely); text-decoration: none; }
.cikk-rovat a:hover { text-decoration: underline; }
.cikk-fej h1, .kalk-oldal-fej h1, .lista-fej h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); margin-bottom: .4em; }
.cikk-datum { color: var(--tinta-3); font-size: 1rem; margin: 0 0 2rem; }
.cikk-test { font-size: 1.15rem; }
.cikk-test h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.cikk-test h3 { font-size: 1.28rem; margin-top: 1.8rem; }
.cikk-test h4 { font-size: 1.1rem; }
.cikk-test p, .cikk-test ul, .cikk-test ol { margin: 0 0 1.1rem; }
.cikk-test li { margin-bottom: .35rem; }
.cikk-test strong { font-weight: 600; }
.megjegyzes { background: var(--tegla-halvany); border: 1px solid #ecd6cb; border-radius: var(--kor); padding: 1.1rem 1.3rem; margin: 1.75rem 0; }
.megjegyzes h4 { margin: 0 0 .4rem; }
.megjegyzes p { margin: 0; }

.szamoljunk { background: var(--zold-halvany); border: 1px solid #d5e3d8; border-radius: var(--kor); padding: 1.25rem 1.4rem .6rem; margin: 2rem 0; }
.szamoljunk-cim { font-family: var(--display); font-size: 1.3rem; margin: 0 0 .75rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.szamoljunk-cim span:not(.szamoljunk-jel) { font-family: var(--body); font-size: 1.02rem; color: var(--tinta-2); }
.szamoljunk-jel { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--zold); color: #fff; font-family: var(--body); font-size: 1.1rem; line-height: 1; transform: translateY(-.1rem); flex: none; }
.szamoljunk-test ol { list-style: none; counter-reset: lepes; padding: 0; margin: 0; }
.szamoljunk-test li { counter-increment: lepes; position: relative; padding: .5rem 0 .55rem 2.1rem; border-top: 1px solid #d5e3d8; margin: 0; font-size: 1.06rem; }
.szamoljunk-test li:first-child { border-top: 0; }
.szamoljunk-test li::before { content: counter(lepes) "."; position: absolute; left: 0; color: var(--zold); font-weight: 600; }

.mini { padding: 1.2rem 1.3rem .4rem; margin: 2rem 0; }
.mini-cim { font-family: var(--display); font-size: 1.15rem; margin: 0 0 .7rem; }
.mini-sor { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .9rem; }
.mini-sor .mezo { margin-bottom: .8rem; }
.mini-sor .mezo-sor input { font-size: 1.08rem; }
.mini-ki { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; border-top: 1px solid var(--vonal); padding: .8rem 0; }
.mini-ki dt { font-size: .92rem; color: var(--tinta-3); }
.mini-ki dd { margin: 0; font-size: 1.25rem; font-weight: 500; white-space: nowrap; }

/* ---------- calculator page ---------- */
.kalk-oldal-fej { max-width: var(--szel); margin: 0 auto 1.75rem; }
.kalk-lead { color: var(--tinta-2); max-width: 64ch; margin: 0; }
.kalk-oldal .kalk-blokk { max-width: var(--szel); margin: 0 auto; }
.kalk-szoveg { margin-top: 3rem; }
.kalk-szoveg .cikk-datum { margin-bottom: 1rem; }

.kalk-szeles { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.kalk-szeles > .kalk-be:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--vonal); }
.kalk-szeles > .kalk-ki { grid-column: 2; grid-row: 2; }
.regi-fej, .regi-sor { display: grid; grid-template-columns: 2rem repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: center; }
.regi-fej { font-size: .92rem; color: var(--tinta-2); margin-bottom: .3rem; }
.regi-sor { margin-bottom: .6rem; }
.regi-szam { color: var(--tinta-3); }
.regi-sor label { display: flex; border: 1px solid var(--vonal-2); border-radius: 6px; background: var(--papir); }
.regi-sor label:focus-within { border-color: var(--zold); box-shadow: 0 0 0 3px rgba(47, 107, 79, .14); }
.regi-sor input { font-size: 1.1rem; }
.osszevet { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
.osszevet p { margin: 0; display: flex; flex-direction: column; }

.ket-ut { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.ket-ut > div { background: var(--lap); border: 1px solid var(--vonal); border-radius: 6px; padding: .9rem 1rem; }
.ket-ut h3 { font-size: 1.08rem; margin: 0 0 .3rem; }
.ket-ut p { margin: 0 0 .3rem; font-size: 1rem; color: var(--tinta-2); }
.ut-fo { font-family: var(--display); font-size: 1.6rem !important; color: var(--tinta) !important; line-height: 1.2; }
.ut-fo span { display: block; font-family: var(--body); font-size: .9rem; color: var(--tinta-3); }
.kamat-osszevet { margin-top: 1.1rem; font-size: .95rem; }
.kamat-osszevet p { margin: 0 0 .4rem; color: var(--tinta-2); }
.ko-sor { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 8rem; gap: .7rem; align-items: center; padding: .2rem 0; }
.ko-sor > span:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ko-sav { display: block; height: 10px; }
.ko-sav span { display: block; height: 100%; background: var(--tegla); border-radius: 2px; }

/* ---------- lists ---------- */
.lista-fej p { color: var(--tinta-2); margin: 0 0 1.5rem; }
.lista-bev { color: var(--tinta-2); }
.naplo { list-style: none; padding: 0; margin-top: 1rem; border-top: 1px solid var(--tinta); }
.naplo li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--vonal); }
.naplo time { color: var(--tinta-3); font-size: .98rem; padding-top: .2rem; }
.naplo a { font-family: var(--display); font-size: 1.22rem; color: var(--tinta); text-decoration: none; line-height: 1.3; }
.naplo a:hover { text-decoration: underline; }
.naplo p { margin: .25rem 0 0; color: var(--tinta-2); font-size: 1rem; }

/* ---------- footer ---------- */
.lab { border-top: 1px solid var(--vonal); background: #f6f7f3; }
.lab-in { max-width: var(--szel); margin: 0 auto; padding: 1.75rem 24px 2.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 2.5rem; align-items: start; font-size: .95rem; color: var(--tinta-2); }
.lab-jel { margin: 0; display: flex; align-items: center; gap: .45rem; font-family: var(--display); color: var(--tinta); font-size: 1.05rem; white-space: nowrap; }
.lab-szoveg { margin: 0; max-width: 60ch; line-height: 1.5; }
.lab-linkek { display: flex; flex-direction: column; gap: .3rem; }
.lab-linkek a { color: var(--tinta-2); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .kalk, .kalk-szeles { grid-template-columns: minmax(0, 1fr); }
  .kalk-ki { border-left: 0; border-top: 1px solid var(--vonal); }
  .kalk-szeles > .kalk-ki { grid-column: 1; grid-row: auto; }
  .kalk-linkek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-in { grid-template-columns: minmax(0, 1fr); }
  .lab-linkek { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.25rem; }
}
@media (max-width: 680px) {
  body { font-size: 1.06rem; }
  .fejlec-in { padding: .85rem 16px; gap: .6rem; }
  .fomenu { gap: 1.1rem; font-size: .98rem; }
  .nyito, .tovabbi, .utmutatok, .modszer, .lab-in { padding-left: 16px; padding-right: 16px; }
  .cikk, .kalk-oldal, .lista { padding: 2rem 16px 3rem; }
  .nyito { padding-top: 1.75rem; }
  .kalk-be, .kalk-ki { padding: 1.2rem 1.1rem; }
  .kalk-linkek, .ut-lista { grid-template-columns: minmax(0, 1fr); }
  .fk-sor { grid-template-columns: 2rem repeat(3, minmax(0, 1fr)); gap: .15rem .6rem; font-size: .92rem; }
  .fk-sav { grid-column: 2 / -1; grid-row: 1; }
  .fk-ev { grid-row: 1 / span 2; align-self: start; }
  .fk-fejsor .fk-savfej { display: none; }
  .fk-fejsor > span:first-child { grid-row: auto; }
  .fk-fejsor { font-size: .8rem; }
  .regi-fej { grid-template-columns: 1.4rem repeat(3, minmax(0, 1fr)); gap: .4rem; font-size: .8rem; }
  .regi-sor { grid-template-columns: 1.4rem repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .regi-sor input { font-size: 1rem; padding: .5rem .4rem; }
  .regi-sor .mezo-egys { padding: 0 .4rem 0 0; font-size: .85rem; }
  .ket-ut, .osszevet { grid-template-columns: minmax(0, 1fr); }
  .ko-sor { grid-template-columns: 7rem minmax(0, 1fr) 6.5rem; font-size: .88rem; }
  .mini-sor { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mini-ki { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .mini-ki > div { display: flex; justify-content: space-between; align-items: baseline; }
  .naplo li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .ki-sorok dd { font-size: 1.1rem; }
}

/* compact two-up inputs on the main calculator */
.kalk-blokk[data-kalk="annuitas"] .kalk-be,
.kalk-blokk[data-kalk="lakas"] .kalk-be,
.kalk-blokk[data-kalk="szabad"] .kalk-be { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; align-content: start; }
.kalk-be > legend { grid-column: 1 / -1; }
.kalk-blokk[data-kalk="annuitas"] .mezo:first-of-type { grid-column: 1 / -1; }
.kalk-linkek a { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--vonal-2); text-underline-offset: .22em; }
.kalk-linkek a:hover { text-decoration-color: var(--tinta); }
@media (max-width: 420px) {
  .kalk-blokk .kalk-be { grid-template-columns: minmax(0, 1fr) !important; }
}
.mezo { min-width: 0; }