.kh, .ksz, .kl {
  --kek: #0b5cd5;
  --tinta: #0d1b33;
  --halk: #5a6a85;
  --szurke: #e7e9ec;
  --vonal: rgba(13, 27, 51, 0.1);
  color: var(--tinta);
}
.ak-in { max-width: var(--tartalom); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

.kh {

  padding: calc(var(--fejlec-magas) + clamp(28px, 2.5vw, 36px)) 0 clamp(72px, 9vw, 132px);
  border-radius: 0 0 clamp(32px, 4vw, 72px) clamp(32px, 4vw, 72px);
  background: var(--kek); color: #fff; text-align: center;
}
.kh-szemold { margin: 0 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.kh-cim { margin: 0 auto 20px; max-width: var(--cim-hero-szeles);
  text-wrap: balance; font-size: var(--cim-hero); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
.kh-lead { margin: 0 auto; max-width: 56ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); }

.ksz { padding: clamp(40px, 4vw, 64px) 0 clamp(24px, 2.5vw, 36px); }
.ksz-sor { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ksz-csip {
  padding: 10px 18px; border: 1px solid var(--vonal); border-radius: 999px;
  background: #fff; color: var(--halk);
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ksz-csip:hover { border-color: var(--kek); color: var(--kek); }
.ksz-csip[aria-pressed='true'] { border-color: var(--kek); background: var(--kek); color: #fff; }

.kl { padding: 0 0 clamp(72px, 8vw, 120px); }
.kl-racs { display: grid; gap: 24px; grid-template-columns: 1fr; }

.kl-kartya {
  display: flex; flex-direction: column;
  border: 1px solid var(--vonal); border-radius: 24px;
  background: #fff; text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.kl-kartya:hover { border-color: var(--kek); transform: translateY(-2px); }

.kl-kartya[hidden] { display: none; }
.kl-kep { display: none; aspect-ratio: 16 / 10; background: #eef1f6; }
.kl-kep-helyorzo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; color: #93a2b8; text-align: center; padding: 16px;
}
.kl-kep-helyorzo b { font-size: 13px; font-weight: 600; }
.kl-kep-helyorzo span { font-size: 11.5px; }
.kl-sz { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(22px, 2.2vw, 30px); }
.kl-fej { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.kl-kat {
  padding: 5px 11px; border-radius: 999px; background: rgba(11, 92, 213, 0.1);
  font-size: 12px; font-weight: 600; color: var(--kek);
}
.kl-meta { font-size: 12.5px; color: var(--halk); }

.elv {
  display: inline-block;
  width: 1px;
  height: 9px;
  margin: 0 8px;
  background: currentColor;
  opacity: 0.4;
  vertical-align: -1px;
}
.kl-cim { margin: 0 0 10px; font-size: 21px; font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; }
.kl-leir { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--halk); }

.kl-lab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 4px;
}
.kl-szam { font-size: 12.5px; font-weight: 500; color: var(--halk); white-space: nowrap; }
.kl-tovabb {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--kek);
}
.kl-tovabb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.kl-kartya:hover .kl-tovabb svg { transform: translateX(3px); }

@media (min-width: 760px)  { .kl-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kl-racs { grid-template-columns: repeat(3, 1fr); } }
body.kepes .kl-kep { display: block; }