/* ============================================================
   Komponensreteg - "Higgadt Tekintely". Osztalyelotag: kp-
   ============================================================ */

/* ============ GOMBOK ============ */
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font:var(--type-button);border-radius:var(--radius-full);padding:11px 24px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard),color var(--dur-state) var(--ease-standard);white-space:nowrap}
.kp-btn:hover{text-decoration:none}
.kp-btn--primary{background:var(--action-primary);color:var(--on-dark);border-color:var(--action-primary)}
.kp-btn--primary:hover{background:var(--brand-blue-mid);border-color:var(--brand-blue-mid);color:var(--on-dark)}
.kp-btn--primary:active{background:var(--action-primary-pressed);border-color:var(--action-primary-pressed)}
.kp-btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.kp-btn--secondary:hover{background:var(--surface-soft);color:var(--ink)}
.kp-btn--secondary:active{background:var(--hairline)}
.kp-btn--tertiary{background:var(--canvas);color:var(--ink);border-color:var(--hairline)}
.kp-btn--tertiary:hover{background:var(--surface-soft);border-color:var(--hairline);color:var(--ink)}
.kp-btn--link{background:transparent;color:var(--brand-blue-deep);border:0;border-radius:var(--radius-xs);font:var(--type-body-sm-medium);padding:8px 0}
.kp-btn--link:hover{color:var(--brand-blue-700);text-decoration:underline}
.kp-btn[disabled],.kp-btn[aria-disabled="true"]{background:var(--action-disabled-bg);border-color:var(--action-disabled-bg);color:var(--action-disabled-text);cursor:not-allowed}
.kp-btn--link[disabled]{background:transparent;color:var(--action-disabled-text)}
.kp-btn--sm{padding:7px 16px;font-size:var(--fs-caption)}
.kp-btn--lg{padding:14px 32px;font-size:var(--fs-body-md)}
.kp-btn--block{width:100%}
.kp-on-dark .kp-btn--secondary{color:var(--on-dark);border-color:var(--on-dark)}
.kp-on-dark .kp-btn--secondary:hover{background:rgba(244,241,234,.1)}
.kp-on-dark .kp-btn--tertiary{background:var(--canvas);color:var(--ink)}
.kp-on-dark .kp-btn--link{color:var(--brand-cyan)}
.kp-btn__swap{display:inline-grid;overflow:hidden;height:1.4em}
.kp-btn__swap>span{grid-area:1/1;transition:transform var(--dur-micro) var(--ease-standard)}
.kp-btn__swap>span:last-child{transform:translateY(100%)}
.kp-btn:hover .kp-btn__swap>span:first-child{transform:translateY(-100%)}
.kp-btn:hover .kp-btn__swap>span:last-child{transform:translateY(0)}
.kp-btn__arrow{transition:transform var(--dur-micro) var(--ease-standard)}
.kp-btn:hover .kp-btn__arrow{transform:translate(4px,-4px)}

/* ============ IKONGOMB / IKON ============ */
.kp-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--canvas);color:var(--ink);border:1px solid var(--hairline);cursor:pointer;transition:background-color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard)}
.kp-icon-btn:hover{background:var(--surface-soft)}
.kp-icon-btn--lg{width:44px;height:44px}
.kp-icon-btn--solid{background:var(--action-primary);border-color:var(--action-primary);color:var(--on-dark)}
.kp-icon-btn--solid:hover{background:var(--brand-blue-mid);border-color:var(--brand-blue-mid)}
.kp-icon{display:inline-block;flex:none;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* ============ KARTYAK ============ */
.kp-card{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--elev-0)}
.kp-card--feature{background:var(--surface-soft);border-color:transparent;padding:var(--space-xxl)}
.kp-card--interactive{transition:border-color var(--dur-state) var(--ease-standard),background-color var(--dur-state) var(--ease-standard);cursor:pointer}
.kp-card--interactive:hover{border-color:var(--brand-magenta);background:var(--surface)}
.kp-card__title{font:var(--type-card-title);letter-spacing:var(--ls-card-title);color:var(--text-heading);margin:0}
.kp-card__body{font:var(--type-body-sm);color:var(--text-secondary);margin:0}

.kp-tonal{border-radius:var(--radius-xl);padding:var(--space-xxl);display:flex;flex-direction:column;gap:var(--space-md)}
.kp-tonal--navy{background:var(--primary);color:var(--on-dark)}
.kp-tonal--cream{background:var(--surface-soft);color:var(--ink)}
.kp-tonal--blue{background:var(--brand-blue);color:var(--on-dark)}
.kp-tonal--violet{background:var(--brand-purple);color:var(--on-dark)}
.kp-tonal__title{font:var(--type-heading-sm);color:inherit;margin:0}
.kp-tonal__body{font:var(--type-body-md);color:inherit;opacity:.86;margin:0}
.kp-tonal--cream .kp-tonal__body{opacity:1;color:var(--text-secondary)}
.kp-tonal--violet .kp-tonal__body{opacity:1}

.kp-tile{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm)}
.kp-tile--interactive{transition:border-color var(--dur-state) var(--ease-standard)}
.kp-tile--interactive:hover{border-color:var(--brand-magenta)}

.kp-cta-panel{background:var(--primary);color:var(--on-dark);border-radius:var(--radius-xl);padding:var(--space-section)}
@media(max-width:767px){.kp-cta-panel{padding:var(--space-xxxl) var(--space-xl)}}

.kp-media-card{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;display:block;text-decoration:none;color:inherit}
.kp-media-card__frame{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--surface-soft)}
.kp-media-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-hover) var(--ease-standard)}
.kp-media-card__meta{padding:var(--space-lg) var(--space-xl) var(--space-xl)}

/* ============ URLAPOK ============ */
.kp-field{display:flex;flex-direction:column;gap:6px}
.kp-label{font:var(--type-body-sm-medium);color:var(--text-body)}
.kp-label__optional{font:var(--type-caption);color:var(--text-tertiary);font-weight:400}
.kp-input{background:var(--surface-card);color:var(--ink);font:var(--type-body-md);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);height:40px;box-sizing:border-box;width:100%;transition:border-color var(--dur-state) var(--ease-standard),box-shadow var(--dur-state) var(--ease-standard)}
.kp-input::placeholder{color:var(--stone)}
.kp-input:focus{outline:none;border:2px solid var(--brand-blue);padding:calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px)}
.kp-input--error{border-color:var(--error-border)}
.kp-field__hint{font:var(--type-caption);color:var(--text-tertiary)}
.kp-field__error{font:var(--type-caption);color:var(--error-text)}
@media(max-width:767px){.kp-input{height:44px}}

.kp-search{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--surface-soft);border:1px solid var(--hairline);border-radius:var(--radius-md);height:36px;padding:var(--space-xs) var(--space-md);color:var(--steel);box-sizing:border-box}
.kp-search input{border:0;background:transparent;font:var(--type-body-sm);color:var(--ink);outline:none;width:100%}
.kp-search:focus-within{border-color:var(--brand-blue)}

/* ============ FULEK ============ */
.kp-tabs{display:flex;gap:var(--space-xxs);border-bottom:1px solid var(--hairline)}
.kp-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--steel);font:var(--type-button);padding:var(--space-md) var(--space-lg);cursor:pointer;margin-bottom:-1px;transition:color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard)}
.kp-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand-blue)}
.kp-pill-tabs{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.kp-pill-tab{background:var(--surface-card);color:var(--steel);font:var(--type-body-sm-medium);border:1px solid var(--hairline);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-md);cursor:pointer;text-decoration:none;transition:background-color var(--dur-state) var(--ease-standard),color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard)}
.kp-pill-tab:hover{color:var(--ink);border-color:var(--stone);text-decoration:none}
.kp-pill-tab[aria-pressed="true"],.kp-pill-tab.is-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}

/* ============ JELZESEK ============ */
.kp-badge{display:inline-flex;align-items:center;gap:5px;font:var(--type-caption-bold);border-radius:var(--radius-full);padding:4px 10px;white-space:nowrap}
.kp-badge--neutral{background:var(--surface-soft);color:var(--slate)}
.kp-badge--beta{background:var(--brand-blue-200);color:var(--brand-blue-deep)}
.kp-badge__dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}

/* ============ TABLAK ============ */
.kp-table-wrap{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-md);overflow-x:auto}
.kp-table{width:100%;border-collapse:collapse;font:var(--type-body-sm);color:var(--ink)}
.kp-table thead th{background:var(--surface-soft);color:var(--steel);font:var(--type-caption-bold);text-align:left;padding:var(--space-sm) var(--space-md);white-space:nowrap}
.kp-table tbody td{padding:var(--space-md);border-bottom:1px solid var(--hairline-soft);vertical-align:top}
.kp-table tbody tr:last-child td{border-bottom:0}
.kp-table__caption{font:var(--type-caption);color:var(--text-fine);padding:var(--space-sm) var(--space-md);border-top:1px solid var(--hairline-soft)}

/* ============ NAVIGACIO ============ */
.kp-topnav{background:var(--canvas);border-bottom:1px solid var(--hairline)}
.kp-topnav__inner{max-width:var(--container-max);margin-inline:auto;padding:var(--space-md) var(--gutter);display:flex;align-items:center;gap:var(--space-xxl)}
.kp-logo{display:block;height:var(--logo-height);aspect-ratio:var(--logo-aspect);background:var(--logo-src) left center/contain no-repeat;text-decoration:none;flex:none}
.kp-logo--inverse{background-image:var(--logo-src-inverse)}
.kp-logo--sm{height:20px}
.kp-logo--lg{height:40px}
.kp-logo--xl{height:64px}
a.kp-logo:hover{opacity:.82;transition:opacity var(--dur-state) var(--ease-standard)}
.kp-wordmark{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:20px;letter-spacing:-0.2px;color:var(--ink-strong);text-decoration:none;display:inline-flex;align-items:baseline;gap:6px;line-height:1}
.kp-wordmark__dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--brand-blue);display:inline-block;transform:translateY(-1px)}
.kp-navlinks{display:flex;align-items:center;gap:var(--space-xl);margin-left:auto}
.kp-navlink{font:var(--type-body-sm);color:var(--charcoal);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color var(--dur-state) var(--ease-standard),border-color var(--dur-state) var(--ease-standard)}
.kp-navlink:hover{color:var(--ink);border-bottom-color:var(--brand-magenta);text-decoration:none}
.kp-navlink[aria-current="page"]{color:var(--ink);font-weight:var(--fw-semibold);border-bottom-color:var(--brand-blue)}

/* ============ SZEKCIO-BUTOROK ============ */
.kp-section-label{display:inline-flex;align-items:center;gap:var(--space-xs);font:var(--type-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.kp-section-label__dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--brand-blue);flex:none}
.kp-on-dark .kp-section-label{color:var(--brand-cyan)}
.kp-on-dark .kp-section-label__dot{background:var(--brand-cyan)}

.kp-hero__title{font:var(--type-hero);letter-spacing:var(--ls-hero);color:var(--text-heading);margin:0;max-width:16ch}
.kp-hero__lead{font:var(--type-subtitle);color:var(--text-secondary);max-width:var(--measure-lead);margin:0}
@media(max-width:1023px){.kp-hero__title{font-size:var(--fs-display-lg);letter-spacing:var(--ls-display-lg)}}
@media(max-width:767px){.kp-hero__title{font-size:var(--fs-heading-lg);letter-spacing:var(--ls-heading-lg);max-width:none}}

.kp-stat{display:flex;flex-direction:column;gap:var(--space-xs)}
.kp-stat__value{font:var(--type-display-lg);letter-spacing:var(--ls-display-lg);color:var(--text-heading);font-variant-numeric:tabular-nums}
.kp-stat__label{font:var(--type-body-sm);color:var(--text-secondary);max-width:34ch}
.kp-stat__source{font:var(--type-caption);color:var(--text-fine)}
.kp-on-dark .kp-stat__value{color:var(--on-dark)}
.kp-on-dark .kp-stat__label{color:var(--brand-blue-200)}
.kp-on-dark .kp-stat__source{color:var(--brand-cyan)}
@media(max-width:767px){.kp-stat__value{font-size:var(--fs-heading-lg)}}

.kp-on-dark{color:var(--on-dark)}
.kp-on-dark h1,.kp-on-dark h2,.kp-on-dark h3,.kp-on-dark h4{color:var(--on-dark)}
.kp-on-dark a{color:var(--brand-cyan)}
.kp-on-dark a:hover{color:var(--on-dark)}

/* ============ FOLYOSZOVEG ============ */
.kp-prose{max-width:var(--prose-max);color:var(--charcoal);font:var(--type-body-md)}
.kp-prose>*+*{margin-top:var(--space-md)}
.kp-prose h2{margin-top:var(--space-xxl);font-size:var(--fs-heading-md);letter-spacing:var(--ls-heading-md)}
.kp-prose h3{margin-top:var(--space-xl);font-size:var(--fs-heading-sm)}
.kp-prose ul,.kp-prose ol{margin:0;padding-left:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}
.kp-prose li::marker{color:var(--brand-magenta)}
.kp-prose blockquote{margin:0;padding-left:var(--space-lg);border-left:2px solid var(--brand-magenta);color:var(--slate);font:var(--type-subtitle)}
.kp-prose code{background:var(--surface-soft);border:1px solid var(--hairline-soft);border-radius:var(--radius-xs);padding:1px 5px;font-size:14px;color:var(--brand-blue-700)}

/* ============ LABLEC ============ */
.kp-footer{background:var(--footer-bg);color:var(--on-dark);padding:var(--space-section) 0 var(--space-xxl);overflow:hidden}
.kp-footer__link{display:block;font:var(--type-body-sm);color:var(--brand-cyan);text-decoration:none;padding:var(--space-xxs) 0;transition:color var(--dur-state) var(--ease-standard)}
.kp-footer__link:hover{color:var(--on-dark);text-decoration:none}
.kp-footer__heading{font:var(--type-caption-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-bottom:var(--space-sm)}
.kp-footer__rule{border-top:1px solid var(--border-on-dark);margin-top:var(--space-xxxl);padding-top:var(--space-lg);display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;font:var(--type-caption);color:var(--stone)}
.kp-marquee{overflow:hidden;user-select:none;pointer-events:none;margin-top:var(--space-xxxl)}
.kp-marquee__track{display:flex;width:max-content;animation:kp-marquee 34s linear infinite;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-hero);line-height:1;letter-spacing:var(--ls-hero);color:var(--on-dark);opacity:.09;white-space:nowrap;gap:.4em}
@keyframes kp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.kp-marquee__track{animation:none}}