/* Hero "Rota Çizgisi" (HeroRoute.razor): kendini çizen yol + duraklar. Öneki "hr-". Özel CSS gerekmez. */
.hr { --hr-a: var(--hr-a-set, var(--mud-palette-primary, #14507a)); --hr-b: var(--hr-b-set, var(--mud-palette-secondary, #e07a1f)); position: relative; overflow: hidden; isolation: isolate; padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 6vw, 80px);
    background: color-mix(in srgb, var(--hr-a) 5%, #fff); }
.hr-has-bg { background: linear-gradient(var(--hr-veil), var(--hr-veil)), var(--hr-bg) center / cover no-repeat; }
.hr-copy { max-width: 760px; margin-bottom: clamp(28px, 5vw, 56px); }
.hr-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(--hr-a); }
.pv-hero .hr-title { margin: 0 0 18px; 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 .hr-title span { color: var(--hr-b); }
.hr-lead { margin: 0 0 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); }
.hr-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hr-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 12px; font-weight: 800; text-decoration: none; transition: transform .2s; }
.hr-btn:hover { transform: translateY(-2px); }
.hr-btn-main { color: #fff; background: var(--hr-a); } .hr-btn-line { color: var(--hr-a); border: 2px solid var(--hr-a); background: rgba(255,255,255,.6); }
.hr-route { position: relative; height: 340px; margin-top: 10px; }
.hr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hr-path-bg, .hr-path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hr-path-bg { stroke: color-mix(in srgb, var(--hr-a) 16%, transparent); stroke-width: 6; }
.hr-path { stroke: var(--hr-b); stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hr-draw 3.2s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.hr-stop { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; opacity: 0; animation: hr-pop .6s ease forwards; animation-delay: calc(var(--i, 0) * .35s + .5s); }
.hr-dot { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #fff; border: 4px solid var(--hr-b); box-shadow: 0 0 0 6px color-mix(in srgb, var(--hr-b) 22%, transparent), 0 14px 26px -12px rgba(20,30,60,.5); }
.hr-dot img { width: 100%; height: 100%; object-fit: cover; } .hr-dot svg { width: 26px; height: 26px; fill: var(--hr-a); }
.hr-card { position: absolute; width: 190px; padding: 12px 14px; border-radius: 16px; text-align: center; background: rgba(255,255,255,.92); box-shadow: 0 16px 34px -18px rgba(20,30,60,.5); backdrop-filter: blur(8px); }
.hr-down .hr-card { top: 70px; } .hr-up .hr-card { bottom: 70px; }
.hr-card h3 { margin: 0 0 3px; font-size: .98rem; font-weight: 800; color: var(--hr-a); } .hr-card p { margin: 0; font-size: .84rem; line-height: 1.45; color: color-mix(in srgb, var(--pv-ink, #0b1020) 72%, transparent); }
@keyframes hr-draw { to { stroke-dashoffset: 0; } }
@keyframes hr-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@media (max-width: 800px) {
    .hr-route { height: auto; display: flex; flex-direction: column; gap: 20px; padding-left: 34px; border-left: 4px solid color-mix(in srgb, var(--hr-b) 60%, transparent); margin-left: 12px; }
    .hr-svg { display: none; } .hr-stop { position: relative; left: auto !important; top: auto !important; transform: none; flex-direction: row; align-items: center; gap: 14px; }
    .hr-dot { margin-left: -64px; flex: none; } .hr-card { position: static !important; width: auto; text-align: left; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .hr-path { animation: none; stroke-dashoffset: 0; } .hr-stop { animation: none; opacity: 1; } }