/* Hero "Maske" (HeroMask.razor): harfler içinde akan görsel/renk. Öneki "hm-". Özel CSS gerekmez. */
.hm { --hm-a: var(--hm-a-set, var(--mud-palette-primary, #1d4ed8)); --hm-b: var(--hm-b-set, var(--mud-palette-secondary, #f97316)); position: relative; overflow: hidden; padding: clamp(64px, 9vw, 130px) 0; background: color-mix(in srgb, var(--hm-a) 4%, #fff); }
.hm-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(--hm-a); }
.hm .hm-title { margin: 0 0 clamp(20px, 3vw, 36px); font-size: clamp(3.4rem, 12.5vw, 11.5rem); line-height: .9; letter-spacing: -.06em; font-weight: 900; text-transform: uppercase;
    color: transparent; background: var(--hm-img, linear-gradient(100deg, var(--hm-a), var(--hm-b), var(--hm-a))) 0 50% / 200% auto; -webkit-background-clip: text; background-clip: text; animation: hm-pan 16s ease-in-out infinite alternate; }
.hm .hm-title span { color: transparent; filter: saturate(1.25); }
.hm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.hm-lead { margin: 0; max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: color-mix(in srgb, var(--pv-ink, #0b1020) 76%, transparent); }
.hm-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-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; }
.hm-btn:hover { transform: translateY(-2px); } .hm-btn-main { color: #fff; background: var(--hm-a); } .hm-btn-line { color: var(--hm-a); border: 2px solid var(--hm-a); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.hm-tags li { padding: 7px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--hm-a); border: 1.5px solid color-mix(in srgb, var(--hm-a) 35%, transparent); }
@keyframes hm-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .hm-title { animation: none; } }

/* şekil kipi ve video (HeroMask.razor) */
.hm-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.pv-hero .hm-title-solid { margin: 0 0 18px; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.05em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.pv-hero .hm-title-solid span { color: var(--hm-b); }
.hm-lead-block { margin: 0 0 24px; }
.hm-shape { position: relative; justify-self: center; width: min(460px, 92%); overflow: hidden; background: color-mix(in srgb, var(--hm-a) 12%, #fff); box-shadow: 0 30px 60px -30px rgba(20,30,60,.5);
    transform: translate(calc(var(--hs-px, 0) * -14px), calc(var(--hs-py, 0) * -10px)); transition: transform .35s ease-out; }
.hm-shape img, .hm-shape video, .hm-flow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-flow { background: linear-gradient(100deg, var(--hm-a), var(--hm-b), var(--hm-a)) 0 50% / 200% auto; animation: hm-pan 10s ease-in-out infinite alternate; }
.hm-sh-circle { aspect-ratio: 1; border-radius: 50%; } .hm-sh-oval { aspect-ratio: 3 / 4; border-radius: 50%; } .hm-sh-rounded { aspect-ratio: 4 / 5; border-radius: 36px; }
.hm-sh-arch { aspect-ratio: 3 / 4; border-radius: 999px 999px 28px 28px; }
.hm-sh-heart, .hm-sh-star, .hm-sh-hexagon, .hm-sh-blob { aspect-ratio: 1; background: none; box-shadow: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: drop-shadow(0 24px 30px rgba(20,30,60,.3)); }
.hm-sh-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 88 C-15 45 10 5 35 10 C45 12 50 22 50 22 C50 22 55 12 65 10 C90 5 115 45 50 88Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 88 C-15 45 10 5 35 10 C45 12 50 22 50 22 C50 22 55 12 65 10 C90 5 115 45 50 88Z'/%3E%3C/svg%3E"); }
.hm-sh-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 61,36 97,36 68,57 79,92 50,71 21,92 32,57 3,36 39,36'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 61,36 97,36 68,57 79,92 50,71 21,92 32,57 3,36 39,36'/%3E%3C/svg%3E"); }
.hm-sh-hexagon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,5 75,5 100,50 75,95 25,95 0,50'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='25,5 75,5 100,50 75,95 25,95 0,50'/%3E%3C/svg%3E"); }
.hm-sh-blob { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 C75 0 97 20 97 48 C97 78 72 98 46 96 C18 94 2 72 4 45 C6 20 25 6 50 3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 C75 0 97 20 97 48 C97 78 72 98 46 96 C18 94 2 72 4 45 C6 20 25 6 50 3Z'/%3E%3C/svg%3E"); }

/* harf maskesi + video: karıştırma kipi (light: beyaz zemin + siyah harf = screen; dark: siyah zemin + beyaz harf = multiply) */
.hm-vstage { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; margin: 0 0 clamp(20px, 3vw, 36px); background: #000; }
.hm-vid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-vcover { position: relative; z-index: 1; padding: clamp(14px, 3vw, 40px) clamp(14px, 3vw, 36px); }
.hm-tone-light .hm-vcover { background: #fff; mix-blend-mode: screen; }
.hm-tone-dark .hm-vcover { background: #000; mix-blend-mode: multiply; }
.pv-hero .hm-vtitle { margin: 0; font-size: clamp(3.2rem, 12vw, 11rem); line-height: .9; letter-spacing: -.06em; font-weight: 900; text-transform: uppercase; }
.hm-tone-light .hm-vtitle { color: #000; } .hm-tone-dark .hm-vtitle { color: #fff; }
.hm-tone-light .hm-vtitle span, .hm-tone-dark .hm-vtitle span { color: inherit; }
@media (max-width: 860px) { .hm-split { grid-template-columns: 1fr; } .hm-shape { order: -1; } }
@media (prefers-reduced-motion: reduce) { .hm-flow { animation: none; } }