/* Hero "Zaman Akışı" (HeroStory.razor): yatay zaman çizgisi, sırayla beliren olaylar. Öneki "ht-". Özel CSS gerekmez. */
.ht { --ht-a: var(--ht-a-set, var(--mud-palette-primary, #2b4c7e)); --ht-b: var(--ht-b-set, var(--mud-palette-secondary, #d4572a)); position: relative; overflow: hidden; padding: clamp(56px, 8vw, 100px) 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ht-a) 6%, #fff), #fff); }
.ht-copy { max-width: 760px; margin-bottom: clamp(24px, 4vw, 46px); }
.ht-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(--ht-a); }
.pv-hero .ht-title { margin: 0 0 16px; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.pv-hero .ht-title span { color: var(--ht-b); }
.ht-lead { margin: 0 0 24px; 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); }
.ht-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ht-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 12px; font-weight: 800; text-decoration: none; transition: transform .2s; }
.ht-btn:hover { transform: translateY(-2px); } .ht-btn-main { color: #fff; background: var(--ht-a); } .ht-btn-line { color: var(--ht-a); border: 2px solid var(--ht-a); }
.ht-scroll { overflow-x: auto; padding: 8px 4px 22px; scroll-snap-type: x proximity; }
.ht-line { position: relative; display: flex; align-items: stretch; gap: 0; min-width: max(100%, calc(var(--n) * 230px)); margin: 0; padding: 0; list-style: none; min-height: 400px; }
.ht-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: linear-gradient(90deg, var(--ht-a), var(--ht-b)); transform-origin: left; animation: ht-draw 2.4s .2s ease-out both; }
.ht-ev { position: relative; flex: 1 1 0; min-width: 220px; scroll-snap-align: start; opacity: 0; animation: ht-in .6s ease forwards; animation-delay: calc(var(--i, 0) * .22s + .5s); }
.ht-pin { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 5px solid var(--ht-b); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ht-b) 20%, transparent); }
.ht-card { position: absolute; left: 8px; right: 8px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 18px 38px -22px rgba(20,30,60,.5); border: 1px solid color-mix(in srgb, var(--ht-a) 12%, #fff); }
.ht-up .ht-card { bottom: calc(50% + 26px); } .ht-down .ht-card { top: calc(50% + 26px); }
.ht-card img { display: block; width: 100%; height: 100px; margin-bottom: 8px; object-fit: cover; border-radius: 12px; }
.ht-card strong { display: block; margin-bottom: 4px; font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: var(--ht-a); }
.ht-card p { margin: 0; font-size: .88rem; line-height: 1.5; color: color-mix(in srgb, var(--pv-ink, #0b1020) 74%, transparent); }
@keyframes ht-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ht-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) {
    .ht-scroll { overflow: visible; } .ht-line { flex-direction: column; min-width: 0; min-height: 0; gap: 16px; padding-left: 28px; }
    .ht-line::before { left: 8px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0; transform-origin: top; animation-name: ht-drawv; }
    .ht-ev { min-width: 0; } .ht-card { position: static !important; } .ht-pin { left: -28px; top: 18px; margin: 0; }
}
@keyframes ht-drawv { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ht-line::before { animation: none; } .ht-ev { animation: none; opacity: 1; } }

/* Haber akışı (EntryTimeline.razor): aynı zaman çizgisi, ana sayfa bölümü ölçüsünde */
.ht-news { --pv-wrap: 1280px; --pv-gutter: 24px; padding: clamp(32px, 5vw, 64px) 0; background: transparent; }
.pv-hero .ht-news, .ht-news .ht-h2 { margin: 0; }
.ht-news .ht-h2 { margin-bottom: 12px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 900; color: var(--pv-ink, #0b1020); }
.ht-news .ht-line { min-height: 560px; }
.ht-news .ht-copy { margin-bottom: clamp(18px, 3vw, 32px); }
.ht-card-link { display: block; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ht-card-link:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(20,30,60,.55); }
.ht-news .ht-card strong { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.ht-news .ht-card h3 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; font-weight: 800; color: var(--pv-ink, #0b1020); }
.ht-new { padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--ht-b); }
.ht-all { margin-top: 18px; text-align: center; }