/* Hero "Kart Yelpazesi" (HeroFan.razor): görselli kartlar yelpaze gibi açılır. Öneki "hf-". Özel CSS gerekmez. */
.hf { --hf-a: var(--hf-a-set, var(--mud-palette-primary, #7a1f4b)); --hf-b: var(--hf-b-set, var(--mud-palette-secondary, #e3a31b)); position: relative; overflow: hidden; padding: clamp(56px, 8vw, 100px) 0 clamp(70px, 9vw, 120px);
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--hf-b) 18%, #fff), color-mix(in srgb, var(--hf-a) 6%, #fff) 70%); }
.hf-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hf-eyebrow { display: inline-block; margin: 0 0 16px; padding: 7px 15px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #fff; background: var(--hf-a); }
.pv-hero .hf-title { margin: 0 0 16px; font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.pv-hero .hf-title span { color: var(--hf-b); }
.hf-lead { margin: 0 auto 24px; max-width: 34em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; color: color-mix(in srgb, var(--pv-ink, #0b1020) 74%, transparent); }
.hf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hf-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s; }
.hf-btn:hover { transform: translateY(-2px); }
.hf-btn-main { color: #fff; background: var(--hf-a); } .hf-btn-line { color: var(--hf-a); border: 2px solid var(--hf-a); background: rgba(255,255,255,.6); }
.hf-fan { position: relative; display: flex; justify-content: center; height: 380px; margin-top: clamp(30px, 5vw, 60px); }
.hf-card { --k: calc(var(--i) - (var(--n) - 1) / 2); --lift: 0px; --sc: 1; position: absolute; bottom: 0; left: 50%; width: 220px; aspect-ratio: 3 / 4; margin-left: -110px; overflow: hidden; border-radius: 22px; background: color-mix(in srgb, var(--hf-a) 20%, #fff);
    box-shadow: 0 26px 50px -22px rgba(30,20,50,.6); border: 5px solid #fff; transform-origin: 50% 120%; z-index: calc(var(--i) + 1); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    transform: translate(calc(var(--k) * var(--hf-step)), calc(var(--k) * var(--k) * var(--hf-arc) + var(--lift))) rotate(calc(var(--k) * var(--hf-rot))) scale(var(--sc)); }
.hf-card:hover, .hf-card:focus-within { --lift: -34px; --sc: 1.1; z-index: 99; transform: translate(calc(var(--k) * var(--hf-step)), calc(var(--lift))) rotate(0deg) scale(var(--sc)); }
.hf-card img, .hf-noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.hf-noimg { background: linear-gradient(135deg, color-mix(in srgb, var(--hf-a) 55%, #fff), color-mix(in srgb, var(--hf-b) 60%, #fff)); }
.hf-cap { position: absolute; inset: auto 0 0 0; padding: 40px 14px 14px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.hf-cap h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 800; } .hf-cap p { margin: 0; font-size: .8rem; line-height: 1.4; opacity: .9; }
@media (max-width: 760px) { .hf-fan { height: 320px; } .hf-card { width: 150px; margin-left: -75px; } }
@media (prefers-reduced-motion: reduce) { .hf-card { transition: none; } }