
.kh,
.ku,
.ke {
   --kek: #0b5cd5;
   --kek-sotet: #0a51bd;
   --tinta: #0d1b33;
   --halk: #5b6676;
   --szurke: #e7e9ec;
   --vonal: rgba(13, 27, 51, 0.1);
}

.kh,
.ku,
.ke {
   color: var(--tinta);
}

.kp-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(56px, 6vw, 88px);
   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 14px;
   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 16px;
   max-width: var(--cim-szeles);
   font-size: var(--cim-szekcio);
   font-weight: 600;
   line-height: 1.12;
   letter-spacing: -0.03em;
   text-wrap: balance;
}

.kh-lead {
   margin: 0 auto;
   max-width: 52ch;
   font-size: 16.5px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.86);
}

.kh-jelek {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-top: clamp(20px, 2.4vw, 30px);
}

.kh-jelek span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 15px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.14);
   font-size: 13.5px;
   color: #fff;
}

.kh-jelek svg {
   width: 15px;
   height: 15px;
   fill: none;
   stroke: #fff;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ku {
   padding: clamp(44px, 5vw, 72px) 0 0;
}

.ku-urlap,
.ku-kesz {
   max-width: 680px;
   margin: 0 auto;
   padding: clamp(26px, 2.8vw, 40px);
   border-radius: 24px;
   background: #fff;

   box-shadow: inset 0 0 0 1px var(--kek);
}

.ku-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

.ku-par {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

@media (max-width: 560px) {
   .ku-par {
      grid-template-columns: 1fr;
      gap: 0;
   }
}

.ku-mezo {
   margin-bottom: 16px;
}

.ku-mezo label {
   display: block;
   margin-bottom: 7px;
   font-size: 13.5px;
   font-weight: 500;
}

.ku-mezo label i,
.ku-gdpr i {
   font-style: normal;
   color: var(--kek);
}

.ku-mezo input,
.ku-mezo textarea,
.ku-mezo select {
   width: 100%;
   min-height: 46px;
   padding: 12px 14px;
   border: 1px solid var(--vonal);
   border-radius: 10px;
   background: #fff;
   color: var(--tinta);
   font-family: inherit;
   font-size: 15px;
}

.ku-mezo textarea {
   min-height: 120px;
   resize: vertical;
}

.ku-mezo select {
   appearance: none;
   -webkit-appearance: none;
   height: 46px;
   padding: 0 40px 0 14px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 13px center;
   background-size: 17px 17px;
   cursor: pointer;
}

@media (hover: hover) {
   .ku-mezo input:hover,
   .ku-mezo textarea:hover,
   .ku-mezo select:hover {
      border-color: var(--kek);
   }
}

.ku-mezo input:focus,
.ku-mezo textarea:focus,
.ku-mezo select:focus {
   outline: none;
   border-color: var(--kek);
}

.ku-gdpr {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   margin: 6px 0 20px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--halk);
}

.ku-gdpr input {
   flex: none;
   width: 17px;
   height: 17px;
   margin-top: 1px;
   accent-color: var(--kek);
}

.ku-gdpr a {
   color: var(--kek);
}

.ku-kuld {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: var(--gomb-m, 48px);
   padding: 0 var(--gomb-par, 24px);
   border: 0;
   border-radius: var(--gomb-sugar, 10px);
   background: var(--kek);
   color: #fff;
   font-family: inherit;
   font-size: var(--gomb-betu, 15px);
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
}

@media (hover: hover) {
   .ku-kuld:hover {
      background: var(--kek-sotet);
   }
}

.ku-alatt {
   margin: 12px 0 0;
   font-size: 13px;
   color: var(--halk);
   text-align: center;
}

.ku-kesz {
   text-align: center;
}

.ku-kesz-jel {
   display: inline-grid;
   place-items: center;
   width: 52px;
   height: 52px;
   margin-bottom: 18px;
   border-radius: 999px;
   background: var(--kek);
}

.ku-kesz-jel svg {
   width: 26px;
   height: 26px;
   fill: none;
   stroke: #fff;
   stroke-width: 2.6;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ku-kesz h2 {
   margin: 0 0 10px;
   font-size: var(--cim-szekcio-kis);
   font-weight: 600;
   letter-spacing: -0.028em;
}

.ku-kesz p {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: var(--halk);
}

.ke {
   padding: clamp(44px, 5vw, 72px) 0 clamp(72px, 8vw, 120px);
}

.ke-racs {
   display: grid;
   grid-template-columns: 1fr;
   gap: clamp(32px, 4vw, 64px);
   max-width: 900px;
   margin: 0 auto;
   padding-top: clamp(32px, 3.4vw, 48px);
   border-top: 1px solid var(--vonal);
}

@media (min-width: 820px) {
   .ke-racs {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
   }
}

.ke-cimke {
   margin: 0 0 16px;
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--halk);
}

.ke-lista {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.ke-sor {
   display: grid;
   grid-template-columns: 40px minmax(0, 1fr);
   gap: 14px;
   align-items: start;
}

.ke-ikon {
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: rgba(11, 92, 213, 0.08);
}

.ke-ikon svg {
   width: 18px;
   height: 18px;
   fill: none;
   stroke: var(--kek);
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ke-sor b {
   display: block;
   font-size: 15px;
   letter-spacing: -0.01em;

   font-weight: 600;
}

.ke-sor a {
   display: block;
   margin-top: 2px;
   color: var(--kek);
   font-weight: 500;
   text-decoration: none;
}

@media (hover: hover) {
   .ke-sor a:hover {
      text-decoration: underline;
   }
}

.ke-varakozo {
   display: block;
   margin-top: 2px;
   font-size: 14.5px;
   color: var(--halk);
   font-style: italic;
}

.ke-ido {
   display: block;
   margin-top: 3px;
   font-size: 13.5px;
   color: var(--halk);
}

.ke-mire {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin: 0 0 22px;
   padding: 0;
   list-style: none;
}

.ke-mire li {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   font-size: 14.5px;
   line-height: 1.5;
   color: var(--halk);
}

.ke-mire svg {
   flex: none;
   width: 17px;
   height: 17px;
   margin-top: 2px;
   fill: none;
   stroke: var(--kek);
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ke-tovabb {
   margin: 0;
   padding-top: 18px;
   border-top: 1px solid var(--vonal);
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--halk);
}

.ke-tovabb a {
   color: var(--kek);
   font-weight: 500;
   text-decoration: none;
   border-bottom: 1px solid rgba(11, 92, 213, 0.3);
}

@media (hover: hover) {
   .ke-tovabb a:hover {
      border-bottom-color: var(--kek);
   }
}
