/* Hero "Spot Işığı" (HeroSpotlight.razor): koyu zemin, imleci izleyen ışık, görsel yalnızca ışıkta görünür. Öneki "hz-". Özel CSS gerekmez. */
@property --hz-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --hz-y { syntax: "<percentage>"; inherits: true; initial-value: 45%; }
.hz { --hz-a: var(--hz-a-set, var(--mud-palette-primary, #7c3aed)); --hz-b: var(--hz-b-set, var(--mud-palette-secondary, #f59e0b)); --hz-bg: var(--hz-bg-set, #0b0e1a); position: relative; overflow: hidden; isolation: isolate; min-height: min(84vh, 720px); display: grid; align-items: center; padding: clamp(70px, 9vw, 130px) 0; color: #fff; background: var(--hz-bg);
    animation: hz-drift 14s ease-in-out infinite alternate; }
.hz.hz-live { animation: none; }
.hz-base { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--hz-a) 22%, transparent), transparent 55%), radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--hz-b) 16%, transparent), transparent 50%); }
.hz-reveal { position: absolute; inset: 0; z-index: -1; background: var(--hz-img, linear-gradient(135deg, var(--hz-a), var(--hz-b))) center / cover no-repeat; opacity: .95;
    -webkit-mask-image: radial-gradient(circle 280px at var(--hz-x) var(--hz-y), #000 0, rgba(0,0,0,.55) 55%, transparent 100%); mask-image: radial-gradient(circle 280px at var(--hz-x) var(--hz-y), #000 0, rgba(0,0,0,.55) 55%, transparent 100%); }
.hz-wrap { position: relative; }
.hz-eyebrow { display: inline-block; margin: 0 0 18px; padding: 7px 15px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.hz .hz-title { margin: 0 0 20px; max-width: 14em; font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: .98; letter-spacing: -.05em; font-weight: 900; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.hz .hz-title span { color: var(--hz-b); }
.hz .hz-lead { margin: 0 0 28px; max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,.82); }
.hz-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hz-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, box-shadow .2s; }
.hz-btn:hover { transform: translateY(-2px); }
.hz-btn-main { color: #0b0e1a; background: var(--hz-b); box-shadow: 0 0 40px -6px var(--hz-b); } .hz-btn-line { color: #fff; border: 2px solid rgba(255,255,255,.55); }
.hz-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hz-tags li { padding: 7px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
@keyframes hz-drift { 0% { --hz-x: 18%; --hz-y: 30%; } 50% { --hz-x: 70%; --hz-y: 65%; } 100% { --hz-x: 38%; --hz-y: 40%; } }
@media (prefers-reduced-motion: reduce) { .hz { animation: none; } }