/* Hero "Cam Katman" (HeroGlass.razor): hareketli mesh zemin + buzlu cam kartlar. Öneki "hg-"; renkler tema paletinden ya da bölümün AccentColor/Accent2Color değerinden gelir. */
.hg { --hg-a: var(--hg-a-set, var(--mud-palette-primary, #4b3a8f)); --hg-b: var(--hg-b-set, var(--mud-palette-secondary, #1aa6a6)); position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 8vw, 110px) 0; }
.hg-mesh { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--hg-a) 6%, #fff); }
.hg-has-bg .hg-mesh { background: var(--hg-bg) center / cover no-repeat; }
.hg-has-bg .hg-mesh::after { content: ""; position: absolute; inset: 0; background: var(--hg-veil); }
.hg-mesh i { position: absolute; z-index: 1; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: .55; animation: hg-drift 22s ease-in-out infinite alternate; }
.hg-mesh i:nth-child(1) { background: var(--hg-a); left: -12%; top: -30%; }
.hg-mesh i:nth-child(2) { background: var(--hg-b); right: -14%; top: -8%; animation-duration: 28s; animation-delay: -6s; }
.hg-mesh i:nth-child(3) { background: #f3bd55; left: 30%; bottom: -42%; width: 38vmax; height: 38vmax; opacity: .38; animation-duration: 34s; animation-delay: -12s; }
.hg-mesh i:nth-child(4) { background: color-mix(in srgb, var(--hg-a) 55%, var(--hg-b)); right: 20%; bottom: -30%; width: 30vmax; height: 30vmax; opacity: .35; animation-duration: 26s; animation-delay: -3s; }
.hg-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hg-solo { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
.hg-solo .hg-cta, .hg-solo .hg-facts { justify-content: center; }

.hg-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 8px 15px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pv-ink, #0b1020); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(10px); }
.hg-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--hg-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hg-b) 25%, transparent); }
.hg .hg-title { margin: 0 0 22px; font-size: clamp(2.5rem, 5.4vw, 4.9rem); line-height: 1.02; letter-spacing: -.04em; color: var(--pv-ink, #0b1020); }
.hg .hg-title span { background: linear-gradient(95deg, var(--hg-a), var(--hg-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hg-lead { margin: 0 0 28px; 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) 72%, transparent); }
.hg-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hg-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.hg-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hg-btn:hover { transform: translateY(-2px); }
.hg-btn-main { color: #fff; background: linear-gradient(95deg, var(--hg-a), var(--hg-b)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--hg-a) 70%, transparent); }
.hg-btn-glass { color: var(--pv-ink, #0b1020); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.85); backdrop-filter: blur(12px); }
.hg-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 600; color: color-mix(in srgb, var(--pv-ink, #0b1020) 75%, transparent); }
.hg-facts li::before { content: "✓"; margin-right: 7px; color: var(--hg-b); font-weight: 900; }

/* buzlu cam kartlar */
.hg-stack { display: flex; flex-direction: column; gap: 18px; max-width: 440px; margin-left: auto; width: 100%; }
.hg-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 24px; background: color-mix(in srgb, #fff 52%, transparent); border: 1px solid rgba(255,255,255,.78);
    backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 24px 50px -26px rgba(30,20,60,.45), inset 0 1px 0 rgba(255,255,255,.9);
    animation: hg-float 6.4s ease-in-out infinite; animation-delay: calc(var(--hg-i, 0) * -1.3s);
    transform: translate(calc(var(--hs-px, 0) * var(--hg-depth, 18px)), calc(var(--hs-py, 0) * var(--hg-depth, 18px))); transition: transform .35s ease-out; }
.hg-card-1 { --hg-depth: 26px; margin-right: 28px; } .hg-card-2 { --hg-depth: -20px; margin-left: 30px; } .hg-card-3 { --hg-depth: 34px; margin-right: 14px; } .hg-card-4 { --hg-depth: -28px; margin-left: 12px; }
.hg-card-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--hg-a), var(--hg-b)); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--hg-a) 80%, transparent); }
.hg-card-icon svg { width: 26px; height: 26px; fill: #fff; }
.hg-card-img { flex: none; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.hg-card-body h3 { margin: 0 0 3px; font-size: 1.05rem; font-weight: 800; color: var(--pv-ink, #0b1020); }
.hg-card-body p { margin: 0; font-size: .9rem; line-height: 1.5; color: color-mix(in srgb, var(--pv-ink, #0b1020) 70%, transparent); }

@keyframes hg-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8vw, 5vh) scale(1.18); } }
@keyframes hg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 900px) { .hg-grid { grid-template-columns: 1fr; } .hg-stack { margin: 0 auto; } .hg-card { margin-inline: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .hg *, .hg *::before, .hg *::after { animation: none !important; } }