/* Hero "Sayaçlı Rozet" (HeroCounter.razor): fotoğraf + dönen yazılı rozet + sayarak beliren sayılar. Öneki "hc-". Özel CSS gerekmez. */
.hc { --hc-a: var(--hc-a-set, var(--mud-palette-primary, #0f5c8c)); --hc-b: var(--hc-b-set, var(--mud-palette-secondary, #e8643b)); position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 70px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--hc-a) 7%, #fff), #fff); }
.hc-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.hc-top.hc-single { grid-template-columns: 1fr; }
.hc-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(--hc-a); }
.pv-hero .hc-title { margin: 0 0 18px; font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.pv-hero .hc-title span { color: var(--hc-b); }
.hc-lead { margin: 0 0 26px; 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); }
.hc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hc-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s; }
.hc-btn:hover { transform: translateY(-2px); }
.hc-btn-main { color: #fff; background: var(--hc-b); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--hc-b) 80%, transparent); } .hc-btn-line { color: var(--hc-a); border: 2px solid var(--hc-a); }
.hc-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 700; }
.hc-facts li::before { content: "✓"; margin-right: 7px; color: var(--hc-b); font-weight: 900; }
.hc-photo { position: relative; justify-self: center; width: min(430px, 90%); aspect-ratio: 1; transform: translate(calc(var(--hs-px, 0) * -16px), calc(var(--hs-py, 0) * -12px)); transition: transform .35s ease-out; }
.hc-photo img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 60px -26px rgba(20,30,60,.55); }
.hc-badge { position: absolute; inset: 0; width: 100%; height: 100%; animation: hc-spin 24s linear infinite; }
.hc-badge text { font-size: 15.5px; font-weight: 800; letter-spacing: .14em; fill: var(--hc-a); }
.hc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 60px); }
.hc-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border-radius: 22px; text-align: center; background: #fff; border: 1px solid color-mix(in srgb, var(--hc-a) 12%, #fff); box-shadow: 0 18px 36px -24px rgba(20,30,60,.35); }
.hc-stat strong { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.03em; font-weight: 900; color: var(--hc-a); font-variant-numeric: tabular-nums; }
.hc-stat span { font-size: .9rem; font-weight: 700; color: color-mix(in srgb, var(--pv-ink, #0b1020) 70%, transparent); }
.hc-stat-ico { width: 34px; height: 34px; fill: var(--hc-b); margin-bottom: 4px; } .hc-stat-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .hc-top { grid-template-columns: 1fr; } .hc-photo { order: -1; } }
@media (prefers-reduced-motion: reduce) { .hc-badge { animation: none; } }