/* Tema 11 AO — kaydırdıkça akan gerçek görüntülü hikâye (anasayfa “Hikâye” bloğu).
   hikaye.js ilerlemeyi --p (0–1, yumuşatılmış) olarak yazar; videoların zamanı, adım metinleri, bölüm çubukları ve
   gösterge kartları buna bağlıdır. <html class="hk-on"> yoksa (hareketi azalt, Stüdyo, betik yok) sahne sabit durur. */

.hs {
  --p: 0;
  --hs-hot: color-mix(in srgb, var(--primary) 70%, #fff);
  --hs-ink: #f3f5f7;
  --hs-muted: rgb(243 245 247 / .7);
  --hs-bg: #07090b;
  position: relative;
  background: var(--hs-bg);
  color: var(--hs-ink);
}
.hs [style*="--a"] { --k: clamp(0, calc((var(--p) - var(--a)) / (var(--b) - var(--a))), 1); }

/* ------------------------------------------------------------------ Sahne */
.hs__stage { position: relative; min-height: clamp(560px, 92vh, 900px); overflow: hidden; }
.hs__media { position: absolute; inset: 0; background: var(--hs-bg); }
.hs-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(var(--z, 1.03)); transition: opacity .7s ease; will-change: opacity, transform; }
.hs-clip:first-child { opacity: 1; }
.hk-on .hs-clip:first-child { opacity: 0; }
.hk-on .hs-clip.is-on { opacity: 1; }
.hs__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(7 9 11 / .86) 0%, rgb(7 9 11 / .55) 34%, rgb(7 9 11 / .08) 62%, rgb(7 9 11 / 0) 100%),
    linear-gradient(0deg, rgb(7 9 11 / .7) 0%, rgb(7 9 11 / 0) 42%),
    linear-gradient(180deg, rgb(7 9 11 / .55) 0%, rgb(7 9 11 / 0) 22%); }

.hs__ui { position: relative; z-index: 2; min-height: inherit; display: grid; grid-template-rows: auto 1fr; padding-block: clamp(22px, 3vw, 36px) clamp(36px, 5vw, 64px); }

/* Bölüm gezinmesi */
.hs__nav { display: flex; gap: clamp(14px, 2.4vw, 34px); flex-wrap: wrap; }
.hs-ch { display: grid; gap: .5rem; min-width: 120px; color: var(--hs-muted) !important; text-decoration: none; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.hs-ch:hover, .hs-ch.is-on { color: #fff !important; }
.hs-ch i { display: block; height: 2px; background: rgb(255 255 255 / .2); overflow: hidden; }
.hs-ch b { display: block; height: 100%; background: var(--hs-hot); transform-origin: left; transform: scaleX(var(--k)); }

/* Metin */
.hs__copy { align-self: end; max-width: 600px; display: grid; }
.hs-text { grid-area: 1 / 1; align-self: end; }
.hs__eb { display: inline-flex; align-items: center; gap: .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hs-hot); }
.hs__eb::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.hs__title { color: #fff !important; font-size: clamp(2.4rem, 5vw, 4.4rem) !important; line-height: 1.02; margin: .9rem 0 1rem; letter-spacing: -.005em; }
.hs__lead { color: var(--hs-muted); font-size: clamp(1.02rem, 1.4vw, 1.16rem); max-width: 52ch; margin: 0; }
.hs__stitle { color: #fff !important; font-size: clamp(1.7rem, 3.2vw, 2.7rem) !important; line-height: 1.08; margin: .8rem 0 .8rem; }
.hs__stext { color: var(--hs-muted); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; max-width: 50ch; margin: 0; }
.hs__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; grid-row: 2; }

/* Gösterge kartları */
.hs__cards { display: none; }
.hs-card { grid-area: 1 / 1; align-self: end; width: 300px; padding: 16px 18px 14px; border-radius: 6px; background: rgb(12 16 20 / .58); border: 1px solid rgb(255 255 255 / .13); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 20px 50px -30px rgb(0 0 0 / .8); }
.hs-card--wide { width: 340px; }
.hs-card > small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-muted); }
.hs-card > b { display: block; margin-top: .3rem; font: 600 1.05rem "IBM Plex Mono", ui-monospace, monospace; color: #fff; }
.hs-card > b em, .hs-row em, .hs-temps em { font-style: normal; color: var(--hs-muted); font-size: .8em; }
.hs-card .hs-note { display: block; margin-top: .6rem; font-size: .76rem; color: rgb(243 245 247 / .55); letter-spacing: 0; text-transform: none; font-weight: 500; }
.hs-gauge { display: block; width: 150px; margin: .6rem 0 0; overflow: visible; }
.hs-gauge circle { fill: #fff; }
.g-arc { fill: none; stroke: rgb(255 255 255 / .18); stroke-width: 6; stroke-linecap: round; }
.g-fill { fill: none; stroke: var(--hs-hot); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1px 1px; stroke-dashoffset: calc((1 - var(--k)) * 1px); }
.hs-card:has(.hs-gauge) > b { font-size: 1.9rem; margin-top: -.4rem; }
.hs-chart { display: block; width: 100%; margin: .7rem 0 .2rem; }
.hs-chart text { fill: var(--hs-muted); font: 500 8px "IBM Plex Mono", monospace; }
.hs-chart .g-arc { stroke-width: 1; }
.act { fill: rgb(255 255 255 / .22); }
.act--drive { fill: var(--hs-hot); }
.hs-wipe { transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); }
.hs-row { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: .55rem 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
.hs-row:last-of-type { border: 0; }
.hs-row i { grid-row: span 2; font: 600 1.3rem "IBM Plex Mono", monospace; color: var(--hs-hot); font-style: normal; line-height: 1.1; }
.hs-row > span { font: 600 1.05rem "IBM Plex Mono", monospace; color: #fff; }
.hs-row small { font-size: .74rem; color: var(--hs-muted); }
.hs-ev { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: .5rem 0; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: .84rem; opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 6px)); }
.hs-ev i { width: 8px; height: 8px; border-radius: 1px; background: var(--hs-hot); }
.hs-ev em { font: 500 .78rem "IBM Plex Mono", monospace; color: var(--hs-muted); font-style: normal; }
.hs-ev--ok i { border-radius: 50%; background: #3fb27f; }
.hs-level { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: .6rem 0 .2rem; font-size: .78rem; color: var(--hs-muted); }
.hs-level i { height: 8px; border-radius: 4px; background: rgb(255 255 255 / .12); overflow: hidden; }
.hs-level i b { display: block; height: 100%; width: 68%; background: #3a8dde; transform-origin: left; transform: scaleX(var(--k)); }
.hs-level em { font: 600 .95rem "IBM Plex Mono", monospace; color: #fff; font-style: normal; }
.hs-temps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.hs-temps > div small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-muted); }
.hs-temps > div b { display: block; font: 500 2.4rem/1.1 "IBM Plex Mono", monospace; color: #fff; }
.hs-temps .hs-note { grid-column: 1 / -1; }

.hs__bar, .hs__hint { display: none; }

/* ------------------------------------------------------------------ Sabit görünüm (hareketi azalt, Stüdyo): adımlar alt alta */
html:not(.hk-on) .hs__copy { gap: 1.6rem; }
html:not(.hk-on) .hs-text { grid-area: auto; }
html:not(.hk-on) .hs-step { padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / .16); }
html:not(.hk-on) .hs-step .hs__stitle { font-size: 1.4rem !important; }
html:not(.hk-on) .hs__actions { grid-row: auto; }
html:not(.hk-on) .hs__shade { background: rgb(7 9 11 / .74); }

/* ------------------------------------------------------------------ Sabitlenen, kaydırmaya bağlı görünüm */
:root { --hs-top: 0px; --hs-h: calc(100svh - var(--hs-top)); --hs-step: .9; }
.hk-on .hs { height: calc((var(--len) * var(--hs-step) + 1.3) * var(--hs-h)); }
.hk-on .hs__stage { position: sticky; top: var(--hs-top); height: var(--hs-h); min-height: 0; }
.hk-on .hs__ui { height: 100%; min-height: 0; }
.hk-on .hs-text { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.hk-on .hs-text.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hk-on .hs__actions { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s, transform .5s; }
.hk-on .hs--cta .hs__actions { opacity: 1; transform: none; pointer-events: auto; }
.hk-on .hs__cards { display: grid; position: absolute; z-index: 2; right: max(var(--gutter, 24px), calc((100% - var(--container, 1240px)) / 2 + 24px)); bottom: clamp(36px, 5vw, 64px); }
.hk-on .hs-card { --w: clamp(0, min(calc((var(--p) - var(--a)) * 60), calc((var(--b) - var(--p)) * 60)), 1); opacity: var(--w); transform: translateY(calc((1 - var(--w)) * 14px)); }
.hk-on .hs__bar { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .1); }
.hk-on .hs__bar i { display: block; height: 100%; background: var(--hs-hot); transform-origin: left; transform: scaleX(var(--p)); }
.hk-on .hs__hint { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--hs-muted); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: calc(1 - clamp(0, calc(var(--p) * 30), 1)); }
.hs__hint i { width: 1px; height: 34px; background: linear-gradient(var(--hs-muted), transparent); }

/* ------------------------------------------------------------------ Mobil */
@media (max-width: 900px) {
  .hs__shade { background: linear-gradient(0deg, rgb(7 9 11 / .92) 0%, rgb(7 9 11 / .72) 34%, rgb(7 9 11 / 0) 62%), linear-gradient(180deg, rgb(7 9 11 / .6) 0%, rgb(7 9 11 / 0) 20%); }
  .hs__ui { padding-block: 14px 26px; }
  .hs__nav { position: relative; flex-wrap: nowrap; gap: 8px; padding-top: 1.35rem; }
  .hs-ch { min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr); font-size: .62rem; letter-spacing: .08em; }
  /* Mobilde çubuklar ince; yalnız etkin bölümün adı çubukların üstünde, soldan yazılır (bölüm sayısı ne olursa olsun sığar) */
  .hs-ch span { position: absolute; top: 0; left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; }
  .hs-ch.is-on span { visibility: visible; }
  .hs-ch:not(.is-on) { flex: .6; }
  .hk-on .hs__hint { display: none; }
  .hs__title { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  .hs__stitle { font-size: clamp(1.4rem, 6.4vw, 1.8rem) !important; margin: .5rem 0 .5rem; }
  .hs__stext { font-size: .95rem; }
  .hs__actions .rt-btn { flex: 1 1 auto; }
  .hk-on .hs__cards { right: 16px; left: auto; top: 64px; bottom: auto; }
  .hs-card, .hs-card--wide { width: min(230px, 62vw); padding: 11px 13px 10px; }
  .hs-card > b { font-size: .9rem; }
  .hs-card:has(.hs-gauge) > b { font-size: 1.4rem; }
  .hs-gauge { width: 110px; }
  .hs-temps > div b { font-size: 1.7rem; }
  .hs-row { padding: .35rem 0; }
  .hs-row > span { font-size: .9rem; }
  .hs-ev { font-size: .74rem; padding: .35rem 0; }
  .hs-card .hs-note { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .hk-on .hs__cards { display: none; }
}