.hx-ft:not(#hx_) {
--f-accent: var( --hx-accent, var( --helix-plum, #764452 ) );
--f-dark:   var( --helix-dark, #2B211E );
--f-ink:    var( --helix-ink, #1C1C1C );
--f-soft:   rgba( 255, 255, 255, .62 );
--f-line:   rgba( 255, 255, 255, .1 );
--f-ease:   cubic-bezier( .2, .8, .2, 1 );
--f-pad:    clamp( 18px, 4vw, 64px );
position: relative;
width: 100%;
margin: 0;
padding: 0 0 0;
overflow: hidden;
background: var( --f-dark );
color: #fff;
font-family: inherit;
isolation: isolate;
}
.hx-ft:not(#hx_) *,
.hx-ft:not(#hx_) *::before,
.hx-ft:not(#hx_) *::after { box-sizing: border-box; }
.hx-ft:not(#hx_) a { text-decoration: none; }
.hx-ft-ico:not(#hx_) { width: 18px; height: 18px; flex: 0 0 auto; }
.hx-ft:not(#hx_) a:focus-visible,
.hx-ft:not(#hx_) button:focus-visible,
.hx-ft:not(#hx_) summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .hx-ft:not(#hx_)::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
z-index: -1;
width: 60%;
height: 80%;
background: radial-gradient( closest-side, rgba( 118, 68, 82, 0.4 ), transparent ); background: radial-gradient( closest-side, color-mix( in srgb, var( --f-accent ) 40%, transparent ), transparent );
opacity: .55;
pointer-events: none;
} .hx-ft:not(#hx_) .hx-ft-btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 54px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.hx-ft:not(#hx_) .hx-ft-btn--light { background: #fff; color: var( --f-ink ); }
.hx-ft:not(#hx_) .hx-ft-btn--light:hover { background: #fff; color: var( --f-accent ); transform: translateY( -2px ); }
.hx-ft-btn--light:not(#hx_) .hx-ft-ico { color: var( --f-accent ); }
.hx-ft:not(#hx_) .hx-ft-btn--ghost { border-color: rgba( 255, 255, 255, .28 ); color: #fff; }
.hx-ft:not(#hx_) .hx-ft-btn--ghost:hover { border-color: #fff; color: #fff; } .hx-ft-cta:not(#hx_) { padding: clamp( 40px, 5vw, 72px ) var( --f-pad ) 0; }
.hx-ft-cta__in:not(#hx_) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 22px 40px;
max-width: 1440px;
margin: 0 auto;
}
.hx-ft:not(#hx_) .hx-ft-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp( 28px, 3.4vw, 50px ); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.hx-ft:not(#hx_) .hx-ft-cta p { max-width: 54ch; margin: 0; color: var( --f-soft ); font-size: 16px; line-height: 1.6; }
.hx-ft-cta__btns:not(#hx_) { display: flex; flex-wrap: wrap; gap: 10px; } .hx-ft-wave:not(#hx_) {
position: relative;
height: clamp( 70px, 9vw, 120px );
margin: clamp( 30px, 4vw, 56px ) 0 0;
padding: 0 var( --f-pad );
}
.hx-ft-wave__bars:not(#hx_) {
display: flex;
align-items: center;
gap: clamp( 2px, .35vw, 5px );
height: 100%;
max-width: 1440px;
margin: 0 auto;
}
.hx-ft-wave__bars:not(#hx_) i {
flex: 1 1 0;
min-width: 2px;
height: var( --h, 20% );
border-radius: 4px;
background: linear-gradient( to top, #9F7C86, rgba( 255, 255, 255, .55 ) ); background: linear-gradient( to top, color-mix( in srgb, var( --f-accent ) 70%, #fff ), rgba( 255, 255, 255, .55 ) );
opacity: .55;
transform-origin: center;
}
.hx-ft.is-live:not(#hx_) .hx-ft-wave__bars i { animation: hx-ft-eq 1.6s ease-in-out var( --d, 0s ) infinite alternate; }
@keyframes hx-ft-eq {
from { transform: scaleY( .55 ); }
to   { transform: scaleY( 1 ); }
}
.hx-ft-wave__a:not(#hx_),
.hx-ft-wave__b:not(#hx_) {
position: absolute;
bottom: -22px;
color: rgba( 255, 255, 255, .4 );
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
}
.hx-ft-wave__a:not(#hx_) { left: var( --f-pad ); }
.hx-ft-wave__b:not(#hx_) { right: var( --f-pad ); color: rgba( 255, 255, 255, .7 ); } .hx-ft-main:not(#hx_) {
display: grid;
grid-template-columns: minmax( 260px, 1fr ) minmax( 0, 2fr );
gap: clamp( 28px, 5vw, 80px );
max-width: 1440px;
margin: 0 auto;
padding: clamp( 50px, 6vw, 80px ) var( --f-pad ) clamp( 30px, 4vw, 50px );
}
.hx-ft-logo:not(#hx_) { display: inline-block; margin-bottom: 18px; color: #fff; font-size: 28px; font-weight: 700; }
.hx-ft:not(#hx_) .hx-ft-logo img { display: block; width: auto; max-width: 220px; height: 64px; object-fit: contain; object-position: left center; }
.hx-ft:not(#hx_) .hx-ft-brand > p { max-width: 36ch; margin: 0 0 22px; color: var( --f-soft ); font-size: 15px; line-height: 1.6; }
.hx-ft-contact:not(#hx_) { display: grid; gap: 8px; margin-bottom: 18px; }
.hx-ft:not(#hx_) .hx-ft-contact a {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 12px;
color: #fff;
font-size: 17px;
font-weight: 600;
transition: color .2s;
}
.hx-ft-contact:not(#hx_) .hx-ft-ico { width: 38px; height: 38px; padding: 10px; border-radius: 12px; background: rgba( 255, 255, 255, .08 ); transition: background-color .2s, color .2s; }
.hx-ft:not(#hx_) .hx-ft-contact a:hover { color: #fff; }
.hx-ft-contact:not(#hx_) a:hover .hx-ft-ico { background: #fff; color: var( --f-accent ); }
.hx-ft-social:not(#hx_) { display: flex; gap: 8px; }
.hx-ft:not(#hx_) .hx-ft-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var( --f-line );
border-radius: 50%;
color: #fff;
transition: background-color .2s, color .2s, transform .2s, border-color .2s;
}
.hx-ft:not(#hx_) .hx-ft-social a:hover { border-color: #fff; background: #fff; color: var( --f-accent ); transform: translateY( -2px ); }
.hx-ft-social:not(#hx_) .hx-ft-ico { width: 19px; height: 19px; } .hx-ft-cols:not(#hx_) { display: grid; grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) ); gap: 28px; }
.hx-ft-col:not(#hx_) summary {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 16px;
color: #fff;
font-size: 15px;
font-weight: 700;
list-style: none;
cursor: default;
pointer-events: none;
}
.hx-ft-col:not(#hx_) summary::-webkit-details-marker { display: none; }
.hx-ft-col:not(#hx_) summary i { display: none; }
.hx-ft:not(#hx_) .hx-ft-col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.hx-ft:not(#hx_) .hx-ft-col li { margin: 0; padding: 0; }
.hx-ft:not(#hx_) .hx-ft-col a {
position: relative;
display: inline-block;
color: var( --f-soft );
font-size: 14.5px;
line-height: 1.4;
transition: color .2s, transform .25s var( --f-ease );
}
.hx-ft:not(#hx_) .hx-ft-col a::before {
content: "";
position: absolute;
left: -14px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
border-radius: 50%;
background: var( --f-accent );
opacity: 0;
transform: scale( 0 );
transition: opacity .2s, transform .25s var( --f-ease );
}
.hx-ft:not(#hx_) .hx-ft-col a:hover { color: #fff; transform: translateX( 4px ); }
.hx-ft:not(#hx_) .hx-ft-col a:hover::before { opacity: 1; transform: none; } .hx-ft-pay:not(#hx_) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 24px;
max-width: calc( 1440px - 2 * var( --f-pad ) );
margin: 0 auto;
padding: 18px 0;
border-top: 1px solid var( --f-line );
width: calc( 100% - 2 * var( --f-pad ) );
}
.hx-ft-pay:not(#hx_) > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var( --f-soft ); font-size: 13.5px; }
.hx-ft-pay:not(#hx_) > span:first-child .hx-ft-ico { width: 16px; height: 16px; color: #3DD68C; }
.hx-ft-pay__logos:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hx-ft:not(#hx_) .hx-ft-pay__logos img { width: auto; height: 22px; max-width: 110px; object-fit: contain; opacity: .85; transition: opacity .2s; }
.hx-ft:not(#hx_) .hx-ft-pay__logos img:hover { opacity: 1; }
.hx-ft-bottom:not(#hx_) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px var( --f-pad ) 22px;
background: rgba( 0, 0, 0, .18 );
}
.hx-ft:not(#hx_) .hx-ft-bottom p { display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: 1440px; margin: 0; color: rgba( 255, 255, 255, .5 ); font-size: 13px; }
.hx-ft-bottom:not(#hx_) p span::before { content: "·"; margin-right: 16px; }
.hx-ft:not(#hx_) .hx-ft-top {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba( 255, 255, 255, .06 );
box-shadow: none;
color: #fff;
cursor: pointer;
transition: background-color .2s, color .2s;
}
.hx-ft:not(#hx_) .hx-ft-top:hover { background: #fff; color: var( --f-accent ); }
.hx-ft-top:not(#hx_) .hx-ft-ico { transition: transform .25s var( --f-ease ); }
.hx-ft-top:hover:not(#hx_) .hx-ft-ico { transform: translateY( -3px ); }
.hx-ft-top__ring:not(#hx_) { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate( -90deg ); }
.hx-ft-top__ring:not(#hx_) circle { fill: none; stroke: rgba( 255, 255, 255, .15 ); stroke-width: 2; }
.hx-ft-top__ring:not(#hx_) circle + circle { stroke: #AD8F97; stroke: color-mix( in srgb, var( --f-accent ) 60%, #fff ); stroke-linecap: round; transition: stroke-dashoffset .1s linear; } @media ( max-width: 900px ) {
.hx-ft-main:not(#hx_) { grid-template-columns: 1fr; }
}
@media ( max-width: 767px ) {
.hx-ft-cta__btns:not(#hx_),
.hx-ft-cta__btns:not(#hx_) .hx-ft-btn { width: 100%; justify-content: center; }
.hx-ft-wave:not(#hx_) { height: 60px; }
.hx-ft-cols:not(#hx_) { grid-template-columns: 1fr; gap: 0; }
.hx-ft-col:not(#hx_) { border-bottom: 1px solid var( --f-line ); }
.hx-ft-col:not(#hx_) summary { margin: 0; padding: 16px 0; cursor: pointer; pointer-events: auto; }
.hx-ft-col:not(#hx_) summary i { position: relative; display: block; width: 12px; height: 12px; }
.hx-ft-col:not(#hx_) summary i::before,
.hx-ft-col:not(#hx_) summary i::after { content: ""; position: absolute; top: 5px; left: 0; width: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var( --f-ease ); }
.hx-ft-col:not(#hx_) summary i::after { transform: rotate( 90deg ); }
.hx-ft-col[open]:not(#hx_) summary i::after { transform: none; }
.hx-ft:not(#hx_) .hx-ft-col ul { padding: 0 0 16px; }
.hx-ft-bottom:not(#hx_) { align-items: flex-end; }
}
@media ( prefers-reduced-motion: reduce ) {
.hx-ft.is-live:not(#hx_) .hx-ft-wave__bars i { animation: none; }
.hx-ft:not(#hx_) * { transition-duration: .01ms !important; }
} .hx-ft-bottom__acts:not(#hx_) { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.hx-ft:not(#hx_) .hx-ft-theme { width: 44px; height: 44px; border: 1px solid rgba( 255, 255, 255, .18 ); } html.hx-view-kodu:not(#hx_) .hx-ft-cta--ari { display: none; }