/* Hero "Katmanlı Derinlik" (HeroParallax.razor): ortada başlık, çevrede süzülen görsel katmanları. Öneki "hl-". Özel CSS gerekmez. */
.hl { --hl-a: var(--hl-a-set, var(--mud-palette-primary, #1f3a5f)); --hl-b: var(--hl-b-set, var(--mud-palette-secondary, #d9822b)); position: relative; overflow: hidden; isolation: isolate; min-height: min(86vh, 760px); display: grid; place-items: center; padding: clamp(80px, 10vw, 140px) 0;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hl-b) 12%, #fff), color-mix(in srgb, var(--hl-a) 7%, #fff)); }
.hl-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hl-layer { position: absolute; transform: translate(calc(var(--hs-px, 0) * var(--d, 20px) * -1), calc(var(--hs-py, 0) * var(--d, 20px) * -1)); transition: transform .35s ease-out; animation: hl-float 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
.hl-l0 { left: 3%; top: 9%; width: min(22vw, 270px); } .hl-l1 { right: 4%; top: 5%; width: min(26vw, 310px); } .hl-l2 { left: 11%; bottom: 5%; width: min(18vw, 220px); }
.hl-l3 { right: 9%; bottom: 7%; width: min(20vw, 250px); } .hl-l4 { left: 40%; top: 1%; width: min(11vw, 140px); } .hl-l5 { right: 33%; bottom: 1%; width: min(13vw, 170px); }
.hl-lap1 { margin: 34px 0 0 38px; } .hl-lap2 { margin: -30px 0 0 -26px; }
.hl-img, .hl-blob { display: block; width: 100%; object-fit: cover; box-shadow: 0 30px 60px -28px rgba(20,30,60,.55); }
.hl-shape0 { aspect-ratio: 4 / 5; border-radius: 28px; } .hl-shape1 { aspect-ratio: 1; border-radius: 50%; } .hl-shape2 { aspect-ratio: 3 / 4; border-radius: 999px 999px 24px 24px; }
.hl-blob { background: linear-gradient(135deg, color-mix(in srgb, var(--hl-a) 60%, #fff), color-mix(in srgb, var(--hl-b) 65%, #fff)); opacity: .8; }
.hl-tag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: .78rem; background: #fff; color: var(--hl-a); box-shadow: 0 10px 22px rgba(20,30,60,.18); }
.hl-copy { position: relative; z-index: 1; max-width: 800px !important; text-align: center; }
.hl-eyebrow { display: inline-block; margin: 0 0 18px; padding: 7px 15px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #fff; background: var(--hl-a); }
.pv-hero .hl-title { margin: 0 0 20px; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -.05em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.pv-hero .hl-title span { color: var(--hl-b); }
.hl-lead { margin: 0 auto 28px; max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: color-mix(in srgb, var(--pv-ink, #0b1020) 75%, transparent); }
.hl-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.hl-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s; }
.hl-btn:hover { transform: translateY(-2px); }
.hl-btn-main { color: #fff; background: var(--hl-a); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--hl-a) 70%, transparent); }
.hl-btn-line { color: var(--hl-a); background: rgba(255,255,255,.7); border: 2px solid var(--hl-a); }
.hl-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 700; }
.hl-facts li::before { content: "✓"; margin-right: 7px; color: var(--hl-b); font-weight: 900; }
@keyframes hl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (max-width: 800px) { .hl-l4, .hl-l5 { display: none; } .hl-layer { opacity: .5; } .hl-l0 { width: 34vw; } .hl-l1 { width: 38vw; } .hl-l2 { width: 30vw; } .hl-l3 { width: 32vw; } }
@media (prefers-reduced-motion: reduce) { .hl *, .hl-layer { animation: none !important; } }