﻿/* Hero "Hareketli Yazı" (HeroKinetic.razor): kelime kelime beliren dev başlık + arkada sonsuz kayan kelime şeritleri. Öneki "hk-". */
.hk { --hk-a: var(--hk-a-set, var(--mud-palette-primary, #1d3a8a)); --hk-b: var(--hk-b-set, var(--mud-palette-secondary, #e0457b)); position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 9vw, 130px) 0; background: color-mix(in srgb, var(--hk-a) 4%, #fff); }
.hk-rows { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; }
.hk-row { overflow: hidden; white-space: nowrap; }
.hk-track { display: flex; width: max-content; animation: hk-run 46s linear infinite; }
.hk-row-rev .hk-track { animation-direction: reverse; animation-duration: 58s; }
.hk-set { display: flex; align-items: center; gap: .35em; padding-right: .35em; font-size: clamp(5rem, 13vw, 11rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--hk-a) 24%, transparent); }
.hk-set b { font-size: .45em; font-weight: 400; -webkit-text-stroke: 0; color: color-mix(in srgb, var(--hk-b) 40%, transparent); }
.hk-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hk-wrap.hk-has-img { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 60px); }
.hk-eyebrow { display: inline-block; margin: 0 0 22px; padding: 7px 15px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #fff; background: var(--hk-a); }
.pv-hero .hk-title { margin: 0 0 24px; font-size: clamp(2.8rem, 7.4vw, 6.6rem); line-height: .98; letter-spacing: -.055em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.hk-w { display: inline-block; margin-right: .22em; opacity: 0; transform: translateY(.55em) rotate(3deg); animation: hk-in .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .09s + .1s); }
.hk-em { color: var(--hk-b); font-style: italic; }
.hk-lead { margin: 0 0 30px; max-width: 36em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: color-mix(in srgb, var(--pv-ink, #0b1020) 72%, transparent); }
.hk-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hk-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 14px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.hk-btn:hover { transform: translate(-2px, -2px); }
.hk-btn-main { color: #fff; background: var(--hk-a); box-shadow: 5px 5px 0 var(--hk-b); }
.hk-btn-main:hover { box-shadow: 8px 8px 0 var(--hk-b); }
.hk-btn-line { color: var(--hk-a); border: 2px solid var(--hk-a); }
.hk-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 700; color: color-mix(in srgb, var(--pv-ink, #0b1020) 75%, transparent); }
.hk-facts li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 3px; background: var(--hk-b); transform: rotate(45deg); }
.hk-sticker { position: relative; transform: translate(calc(var(--hs-px, 0) * -22px), calc(var(--hs-py, 0) * -16px)) rotate(-5deg); transition: transform .35s ease-out; animation: hk-float 7s ease-in-out infinite; }
.hk-sticker img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 30px; border: 6px solid #fff; box-shadow: 14px 14px 0 var(--hk-b), 0 30px 60px -24px rgba(20,20,60,.5); }

@keyframes hk-run { to { transform: translateX(-50%); } }
@keyframes hk-in { to { opacity: 1; transform: none; } }
@keyframes hk-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 900px) { .hk-wrap.hk-has-img { grid-template-columns: 1fr; } .hk-sticker { max-width: 420px; margin: 8px auto 0; } }
@media (prefers-reduced-motion: reduce) { .hk-track, .hk-sticker { animation: none !important; } .hk-w { opacity: 1; transform: none; animation: none; } }
