/* Hero "Sahne" düzeni (HomeSectionHeroLayout.Scene, Components/ProductBlocks/HeroScene.razor): sağda hareketli sahne.
   Sol sütun urun-vitrini.css'teki pv-* sınıflarını kullanır; burada yalnızca sahne ("hs-" öneki) vardır. Renkler tema paletinden gelir. */
.hs { position: relative; overflow: hidden; }
.hs-visual { position: relative; z-index: 2; min-height: 540px; --hs-sun: #f3bd55; --hs-a: var(--hs-a-set, var(--mud-palette-primary, #43264c)); --hs-b: var(--hs-b-set, var(--mud-palette-secondary, #2e7d32)); }

/* başlıkta *vurgu*: tema rengi + altında çizilen çizgi */
.hs-title span { position: relative; color: var(--hs-a-set, var(--mud-palette-primary)); }
.hs-title span::after { content: ""; position: absolute; left: 4px; right: 2px; bottom: -4px; height: 10px; border-top: 3px solid #f3bd55;
    border-radius: 50%; transform: rotate(-1deg); transform-origin: left center; animation: hs-line-draw 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
.hs-eyebrow { animation: hs-breathe 5.4s ease-in-out infinite; }

/* süs halkaları */
.hs-doodle { position: absolute; border: 2px solid color-mix(in srgb, var(--mud-palette-primary, #43264c) 14%, transparent); border-radius: 50%; pointer-events: none; }
.hs-doodle-1 { top: 12%; left: -60px; width: 120px; height: 70px; transform: rotate(22deg); animation: hs-drift 8.5s ease-in-out infinite; }
.hs-doodle-2 { right: 4%; bottom: 5%; width: 36px; height: 36px; border-color: #ef9aa6; animation: hs-drift 7s ease-in-out -3.2s infinite reverse; }

/* güneş ve bulutlar */
.hs-sun { position: absolute; top: -10px; left: -6px; width: 66px; height: 66px; border-radius: 50%; background: var(--hs-sun);
    box-shadow: 0 0 0 13px rgba(243,189,85,.16); animation: hs-sun 5.5s ease-in-out infinite; }
.hs-sun::before { content: ""; position: absolute; inset: -26px; border: 2px dashed rgba(243,189,85,.7); border-radius: 50%; animation: hs-spin 26s linear infinite; }
.hs-cloud { position: absolute; z-index: -1; width: 130px; height: 48px; border-radius: 999px; background: color-mix(in srgb, var(--hs-b) 14%, #fff); animation: hs-cloud 8s ease-in-out infinite; }
.hs-cloud::before, .hs-cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.hs-cloud::before { left: 24px; width: 62px; height: 62px; }
.hs-cloud::after { right: 18px; width: 44px; height: 44px; }
.hs-cloud-1 { top: 110px; right: -40px; opacity: .75; }
.hs-cloud-2 { bottom: 70px; left: -30px; transform: scale(.72); background: color-mix(in srgb, var(--hs-a) 12%, #fff); animation-delay: -4s; }

/* tarayıcı penceresi: yan menü, kartlar ve büyüyen çubuklar */
.hs-browser { position: absolute; top: 70px; right: 20px; width: 92%; background: #fff; border: 1px solid rgba(20,20,40,.1); border-radius: 18px;
    box-shadow: 0 30px 60px -28px rgba(30,20,50,.45); overflow: hidden; transform: rotate(1.5deg); animation: hs-browser 7s ease-in-out infinite; }
.hs-browser-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f6f4f2; border-bottom: 1px solid rgba(20,20,40,.07); }
.hs-dots { display: flex; gap: 6px; }
.hs-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e8b4b4; }
.hs-dots i:nth-child(2) { background: #f1d28a; } .hs-dots i:nth-child(3) { background: #a8d5b8; }
.hs-address { flex: 1; height: 10px; border-radius: 6px; background: rgba(20,20,40,.07); }
.hs-browser-body { display: grid; grid-template-columns: 26% 1fr; min-height: 300px; }
.hs-side { display: flex; flex-direction: column; gap: 11px; padding: 18px 14px; background: var(--hs-a); }
.hs-side i { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,.28); }
.hs-side i:nth-child(1) { width: 70%; background: rgba(255,255,255,.55); } .hs-side i:nth-child(3) { width: 55%; }
.hs-main { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fcfbfa; }
.hs-bar { width: 42%; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--hs-a) 18%, #fff); }
.hs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hs-cards span { display: block; height: 62px; border-radius: 12px; background: #fff; border: 1px solid rgba(20,20,40,.08); border-top: 3px solid var(--hs-b); }
.hs-cards span:nth-child(2) { border-top-color: #f3bd55; }
.hs-chart { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 22px 22px 14px; border: 1px solid rgba(20,20,40,.08); border-radius: 14px; background: #fff; }
.hs-chart i { flex: 1; display: block; height: 50%; border-radius: 7px 7px 3px 3px; background: var(--hs-b); transform-origin: bottom; animation: hs-grow 4.6s ease-in-out infinite; }
.hs-chart i:nth-child(2) { height: 76%; background: #f3bd55; animation-delay: -.8s; }
.hs-chart i:nth-child(3) { height: 58%; background: #ef9aa6; animation-delay: -1.6s; }
.hs-chart i:nth-child(4) { height: 90%; background: color-mix(in srgb, var(--hs-a) 30%, #fff); animation-delay: -2.4s; }
.hs-chart i:nth-child(5) { height: 66%; background: #8fc3e8; animation-delay: -3.2s; }

/* telefon */
.hs-phone { position: absolute; right: -6px; bottom: 12px; z-index: 4; width: 150px; padding: 12px 9px; border-radius: 28px; background: #1d1626;
    box-shadow: 0 28px 50px -20px rgba(30,20,50,.6); transform: rotate(-4deg); animation: hs-phone 6.2s ease-in-out infinite; }
.hs-speaker { display: block; width: 38px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: rgba(255,255,255,.22); }
.hs-phone-screen { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 12px; border-radius: 20px; background: #fff; min-height: 230px; }
.hs-avatar { width: 46px; height: 46px; border-radius: 50%; background: #fbe7b1; box-shadow: inset 0 0 0 6px #f3bd55; }
.hs-greet { width: 60%; height: 8px; border-radius: 5px; background: rgba(20,20,40,.1); }
.hs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 4px; }
.hs-tiles span { display: block; height: 46px; border-radius: 10px; border: 1px solid rgba(20,20,40,.08); border-top: 3px solid var(--hs-b); animation: hs-tile 4.6s ease-in-out infinite; }
.hs-tiles span:nth-child(2) { border-top-color: #ef9aa6; animation-delay: -1.1s; } .hs-tiles span:nth-child(3) { border-top-color: #f3bd55; animation-delay: -2.2s; }
.hs-tiles span:nth-child(4) { border-top-color: #8fc3e8; animation-delay: -3.3s; }

/* yüzen özellik etiketleri ve not kâğıdı */
.hs-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 13px; border-radius: 12px;
    background: var(--hs-chip, rgba(255,253,249,.96)); border: 1px solid rgba(40,20,60,.12); box-shadow: 0 10px 24px rgba(40,20,60,.13);
    font-size: .74rem; font-weight: 800; color: #2a1d33; white-space: nowrap; animation: hs-chip 4.8s ease-in-out infinite; }
.hs-chip svg { width: 17px; height: 17px; fill: var(--hs-a); flex: none; }
.hs-chip-1 { top: 18px; left: 12%; } .hs-chip-2 { top: 46%; left: -18px; animation-delay: -.9s; } .hs-chip-3 { right: 14%; bottom: 8px; animation-delay: -1.8s; }
.hs-chip-4 { top: 18%; right: -12px; animation-delay: -2.7s; } .hs-chip-5 { bottom: 18%; left: 12%; animation-delay: -3.5s; }
.hs-note { position: absolute; z-index: 6; top: 2px; right: 12%; display: flex; align-items: center; justify-content: center; gap: 9px; width: 124px; min-height: 88px;
    padding: 10px; border-radius: 16px 16px 38px; background: var(--hs-note, #fbe7b1); border: 1px solid rgba(40,20,60,.1); box-shadow: 0 12px 26px rgba(40,20,60,.14);
    font-size: .74rem; font-weight: 800; line-height: 1.3; color: #3a2a45; transform: rotate(5deg); animation: hs-note 6s ease-in-out infinite; }
.hs-note svg { width: 20px; height: 20px; fill: #ef7b8f; flex: none; }
.hs-note-custom svg { fill: var(--hs-a); }
.hs-chip-dark .hs-chip { color: #fff; border-color: rgba(255,255,255,.25); }
.hs-chip-dark .hs-chip svg { fill: #fff; }

/* hızlı iletişim düğmeleri (Hemen ara / WhatsApp) */
.hs-quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }
.hs-quick-link { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 16px 6px 7px; border-radius: 999px; text-decoration: none;
    color: var(--pv-ink, #0b1020); background: rgba(255,255,255,.78); border: 1px solid rgba(40,20,60,.1); box-shadow: 0 8px 22px rgba(40,20,60,.08);
    font-size: .8rem; transition: transform .2s, box-shadow .2s; }
.hs-quick-link:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(40,20,60,.14); }
.hs-quick-link span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--hs-a-set, var(--mud-palette-primary, #43264c)); }
.hs-quick-wa span { background: #1ea952; }
.hs-quick-link svg { width: 16px; height: 16px; fill: #fff; }

/* fareye göre derinlik kayması (siteEffects.js --hs-px / --hs-py değişkenlerini yazar) */
.hs-browser { transform: translate(calc(var(--hs-px, 0) * -14px), calc(var(--hs-py, 0) * -10px)) rotate(1.5deg); transition: transform .35s ease-out; }
.hs-phone { transform: translate(calc(var(--hs-px, 0) * -28px), calc(var(--hs-py, 0) * -20px)) rotate(-4deg); transition: transform .35s ease-out; }
.hs-chip, .hs-note { transition: transform .35s ease-out; transform: translate(calc(var(--hs-px, 0) * 18px), calc(var(--hs-py, 0) * 12px)); }
.hs-note { transform: translate(calc(var(--hs-px, 0) * 18px), calc(var(--hs-py, 0) * 12px)) rotate(5deg); }
.hs-sun { transform: translate(calc(var(--hs-px, 0) * 22px), calc(var(--hs-py, 0) * 16px)); transition: transform .35s ease-out; }

/* sahne nesneleri: gece / yaprak / yörünge (varsayılan güneş + bulut yukarıdadır) */
.hs-moon { position: absolute; top: -6px; left: 0; width: 62px; height: 62px; border-radius: 50%; box-shadow: inset -17px -5px 0 0 #f3e3a0, 0 0 26px 4px rgba(243,227,160,.35);
    transform: rotate(-18deg); animation: hs-sun 6s ease-in-out infinite; }
.hs-star { position: absolute; width: 11px; height: 11px; background: #f3e3a0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: hs-twinkle 3.4s ease-in-out infinite; }
.hs-star-1 { top: 8%; left: 26%; } .hs-star-2 { top: 3%; right: 30%; animation-delay: -.8s; } .hs-star-3 { top: 40%; left: -2%; animation-delay: -1.6s; width: 8px; height: 8px; }
.hs-star-4 { bottom: 14%; right: -2%; animation-delay: -2.2s; } .hs-star-5 { bottom: 4%; left: 30%; animation-delay: -.4s; width: 8px; height: 8px; }
.hs-star-6 { top: 24%; right: 6%; animation-delay: -1.2s; width: 9px; height: 9px; } .hs-star-7 { bottom: 34%; left: 6%; animation-delay: -2.8s; width: 9px; height: 9px; }
.hs-leaf { position: absolute; width: 30px; height: 19px; border-radius: 0 100% 0 100%; background: color-mix(in srgb, var(--hs-b) 55%, #fff); opacity: .85; animation: hs-leaf 7s ease-in-out infinite; }
.hs-leaf-1 { top: 2%; left: 4%; } .hs-leaf-2 { top: 20%; right: -2%; animation-delay: -1.4s; background: color-mix(in srgb, var(--hs-a) 35%, #fff); }
.hs-leaf-3 { top: 52%; left: -3%; animation-delay: -2.8s; width: 24px; height: 15px; } .hs-leaf-4 { bottom: 10%; right: 8%; animation-delay: -4.2s; background: #f3bd55; }
.hs-leaf-5 { bottom: 2%; left: 22%; animation-delay: -5.6s; width: 22px; height: 14px; } .hs-leaf-6 { top: 8%; right: 36%; animation-delay: -3.5s; width: 20px; height: 13px; background: #ef9aa6; }
.hs-orbit { position: absolute; border: 2px dashed color-mix(in srgb, var(--hs-a) 28%, transparent); border-radius: 50%; pointer-events: none; }
.hs-orbit::after { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--hs-b); box-shadow: 0 0 0 6px color-mix(in srgb, var(--hs-b) 20%, transparent); }
.hs-orbit-1 { top: -34px; left: -40px; width: 230px; height: 230px; animation: hs-spin 22s linear infinite; }
.hs-orbit-2 { bottom: -10px; right: -34px; width: 150px; height: 150px; animation: hs-spin 16s linear infinite reverse; }
.hs-orbit-2::after { background: #f3bd55; box-shadow: 0 0 0 6px rgba(243,189,85,.22); }
@keyframes hs-twinkle { 0%, 100% { opacity: .35; scale: .8; } 50% { opacity: 1; scale: 1.15; } }
@keyframes hs-leaf { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 8px 16px; rotate: 22deg; } }

/* arka plan görseli + okunabilirlik perdesi (HeroImageMediaId doluyken) */
.hs-has-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hs-bg) center / cover no-repeat; pointer-events: none; }
.hs-has-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hs-veil, rgba(255,255,255,.8)); pointer-events: none; }
.hs-has-bg > .pv-wrap, .hs-has-bg > .hs-doodle { position: relative; z-index: 1; }
.hs-has-bg > .hs-doodle { position: absolute; }
.hs-dark .hs-title, .hs-dark .pv-lead, .hs-dark .pv-hero-facts li { color: #fff; }
.hs-dark .hs-title span { color: #ffd98a; }
.hs-dark .pv-btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hs-dark .pv-hero-facts li::before { filter: brightness(1.6); }

/* kendi ekran görüntünüz: tarayıcı penceresi ve telefon içi */
.hs-browser-body.hs-has-shot { display: block; min-height: 0; background: #fff; }
.hs-phone-screen.hs-has-shot { display: block; padding: 0; min-height: 0; aspect-ratio: 9 / 18.5; overflow: hidden; background: #fff; }
.hs-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hs-browser-body.hs-has-shot .hs-shot { height: auto; max-height: 360px; }

/* sahne ortası: tek görsel (Centerpiece=photo) ve nabız noktaları (Motif=pulse) */
.hs-photo { position: absolute; top: 44px; left: 0; right: 0; margin-inline: auto; width: min(80%, 430px); aspect-ratio: 1 / 1.04; z-index: 2; overflow: hidden;
    background: color-mix(in srgb, var(--hs-b) 14%, #fff); box-shadow: 0 34px 60px -28px rgba(30,20,50,.5); animation: hs-browser 7s ease-in-out infinite;
    transform: translate(calc(var(--hs-px, 0) * -14px), calc(var(--hs-py, 0) * -10px)); transition: transform .35s ease-out; }
.hs-shape-rounded { border-radius: 34px; }
.hs-shape-circle { border-radius: 50%; width: min(74%, 400px); aspect-ratio: 1; }
.hs-shape-arch { border-radius: 999px 999px 30px 30px; aspect-ratio: 1 / 1.22; }
.hs-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-photo-empty { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--hs-a) 30%, #fff), transparent 55%), radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--hs-b) 35%, #fff), transparent 60%); }
.hs-ping { position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: var(--hs-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hs-b) 22%, transparent); }
.hs-ping::before, .hs-ping::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--hs-b); opacity: 0; animation: hs-ping 3s ease-out infinite; }
.hs-ping::after { animation-delay: 1.5s; }
.hs-ping-1 { top: 22%; left: 20%; } .hs-ping-2 { top: 14%; right: 22%; background: var(--hs-a); } .hs-ping-3 { top: 50%; right: 4%; }
.hs-ping-4 { bottom: 24%; left: 10%; background: #f3bd55; } .hs-ping-5 { bottom: 10%; right: 28%; background: var(--hs-a); } .hs-ping-6 { top: 42%; left: 3%; background: #ef9aa6; }
.hs-ping-2::before, .hs-ping-2::after, .hs-ping-5::before, .hs-ping-5::after { border-color: var(--hs-a); }
.hs-ping-4::before, .hs-ping-4::after { border-color: #f3bd55; } .hs-ping-6::before, .hs-ping-6::after { border-color: #ef9aa6; }
@keyframes hs-ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(6.5); opacity: 0; } }

@keyframes hs-browser { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hs-phone { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes hs-chip { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes hs-note { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: 2deg; } }
@keyframes hs-sun { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes hs-spin { to { rotate: 360deg; } }
@keyframes hs-cloud { 0%, 100% { translate: 0 0; } 50% { translate: 14px 10px; } }
@keyframes hs-drift { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 12px; scale: 1.08; } }
@keyframes hs-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@keyframes hs-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
@keyframes hs-tile { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@keyframes hs-line-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 900px) {
    .hs-visual { min-height: 460px; max-width: 560px; margin-inline: auto; width: 100%; }
    .hs-chip-2 { left: 0; } .hs-chip-4 { right: 0; }
}
@media (max-width: 520px) {
    .hs-visual { min-height: 420px; }
    .hs-browser { width: 100%; right: 0; } .hs-phone { width: 120px; right: 0; } .hs-note { right: 2%; width: 104px; }
    .hs-chip { font-size: .68rem; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .hs *, .hs *::before, .hs *::after { animation: none !important; }
}