/* Proje makalesi: başlık → kapak figürü → numaralı bölümler → anlatımlı figürler → sonuçlar → sıradaki proje. */

/* ---------- Başlık ---------- */
.art-head { padding-top: calc(var(--nav-h) + 9vh); row-gap: 0; }
.art-head .idx { grid-column: 1 / 4; }
.art-head .kind { grid-column: 4 / 13; }
.art-head h1 { grid-column: 1 / -1; margin-top: 4vh; }
.art-head .abstract {
  grid-column: 7 / 13; margin-top: 6vh;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.28; letter-spacing: -0.022em;
  text-wrap: pretty;
}
.meta { grid-column: 1 / -1; margin-top: 7vh; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
.meta > div { padding-top: 12px; border-top: 1px solid var(--line); }
.meta dt { margin-bottom: 6px; }
.meta dd { margin: 0; font-size: 14px; color: var(--fg); }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--fg); vertical-align: 2px; }
.dot.wip { background: var(--accent); }

/* ---------- Kapak: tam genişlikte canlı sahne ---------- */
.cover { margin: 4vh var(--m) 0; }
.cover .frame { height: min(82svh, 62vw); }

/* ---------- Bölümler: solda numara + başlık (yapışık), sağda metin ---------- */
.sec { margin-top: 20vh; }
.sec-head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
.sec-head h2 { margin-top: 10px; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }
.sec-body { grid-column: 6 / 12; }
.prose p { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.62; color: var(--fg-2); max-width: 62ch; text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--fg); font-weight: 500; }
.prose code, .prose .m { font: 400 0.86em var(--mono); color: var(--fg); }
.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 28px; }

/* ---------- Figür blokları ---------- */
.fig { margin-top: 12vh; padding: 0 var(--m); }
.fig .frame { height: min(72svh, 56vw); }
.fig.half { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.fig.half > .frame, .fig.half > figcaption { grid-column: 6 / 13; }
.fig.half .frame { height: min(60svh, 40vw); }

/* ---------- Anlatımlı figür: figür sağda yapışık, adımlar solda akar ---------- */
.scrolly { margin-top: 14vh; align-items: start; }
.scrolly-fig {
  grid-column: 5 / 13; grid-row: 1;
  position: sticky; top: calc(var(--nav-h) + 8px);
  height: calc(100svh - var(--nav-h) - 24px);
}
.scrolly-fig .frame { height: 100%; }
.scrolly-steps { grid-column: 1 / 5; grid-row: 1; padding-bottom: 50svh; }
.step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-right: 8%; }
.js .step { opacity: .22; transition: opacity .5s var(--ease); }
.js .step.is-active { opacity: 1; }
.step h3 { margin-top: 12px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; line-height: 1.08; letter-spacing: -0.032em; text-wrap: balance; }
.step p:not(.label) { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.step strong { color: var(--fg); font-weight: 500; }
/* Adım sayacı figürün altında: 01 — 05 */
.steps-count { display: flex; gap: 6px; }
.steps-count i { width: 18px; height: 1px; background: var(--dim); transition: background .4s, width .4s var(--ease-out); }
.steps-count i.on { width: 36px; background: var(--accent); }

/* ---------- Sonuç sayıları ---------- */
.stats { margin-top: 20vh; row-gap: 48px; }
.stats-head { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.stat { grid-column: span 4; }
.stat b {
  display: block;
  font-size: clamp(56px, 7.4vw, 120px); font-weight: 400; line-height: .92; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.stat b small { font-size: .36em; letter-spacing: -0.02em; margin-left: .12em; color: var(--muted); }
.stat .label { display: block; margin-top: 14px; max-width: 28ch; }

/* ---------- Karşılaştırma çubukları ---------- */
.bars { margin-top: 28px; }
.bars li { display: grid; grid-template-columns: minmax(0, 13rem) 1fr 5rem; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.bars li:last-child { border-bottom: 1px solid var(--line); }
.bars .bar { height: 2px; background: var(--dim); transform-origin: left; transform: scaleX(calc(var(--v) / var(--max))); transition: transform 1.4s var(--ease-out); }
.js .bars:not(.in) .bar { transform: scaleX(0); }
.bars li:nth-child(2) .bar { transition-delay: .08s; }
.bars li:nth-child(3) .bar { transition-delay: .16s; }
.bars li:nth-child(4) .bar { transition-delay: .24s; }
.bars li.hl .bar { background: var(--accent); height: 3px; }
.bars li.hl .label { color: var(--fg); }
.bars b { font: 450 13px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Sınırlar listesi ---------- */
.limits li { padding: 14px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3rem 1fr; }
.limits li:last-child { border-bottom: 1px solid var(--line); }
.limits p { font-size: 16px; color: var(--fg-2); }

/* ---------- Sıradaki proje ---------- */
.next { display: block; margin-top: 24vh; padding-top: 18px; border-top: 1px solid var(--line); }
.next .label { display: flex; justify-content: space-between; }
.next-title { display: block; margin-top: 3vh; transition: color .4s var(--ease); }
.next-title .arrow { display: inline-block; font-weight: 300; transition: transform .6s var(--ease-out); }
.next:hover .next-title { color: var(--accent); }
.next:hover .arrow { transform: translateX(.18em); }

/* ---------- Dar ekran: figür üstte yapışık, adımlar altında ---------- */
@media (max-width: 900px) {
  .art-head .idx { grid-column: 1 / 5; }
  .art-head .kind { grid-column: 5 / 13; text-align: right; }
  .art-head .abstract { grid-column: 1 / -1; }
  .meta { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .cover .frame { height: 64svh; }
  .sec { margin-top: 14vh; row-gap: 22px; }
  .sec-head { position: static; grid-column: 1 / -1; }
  .sec-body { grid-column: 1 / -1; }
  .fig .frame, .fig.half .frame { height: 62svh; }
  .fig.half > .frame, .fig.half > figcaption { grid-column: 1 / -1; }

  .scrolly-fig {
    grid-column: 1 / -1; z-index: 3;
    top: var(--nav-h); height: 48svh;
    background: var(--bg); padding-bottom: 10px;
  }
  /* Aynı hücrede üst üste: yapışkan figür ancak kendi ızgara alanı içinde yapışabilir */
  .scrolly-steps { grid-column: 1 / -1; grid-row: 1; padding: calc(48svh + 10px) 0 30svh; }
  .step { min-height: 75svh; justify-content: flex-start; padding: 6svh 0 0; }
  .js .step { opacity: .14; }
  /* Dar figürde not sağ üste geçer, sayaç solda tek başına kalır */
  .scrolly .hud.tl { display: none; }
  .scrolly .hud.br { top: 14px; bottom: auto; }
  .stat { grid-column: 1 / -1; }
  .bars li { grid-template-columns: 1fr 4.5rem; row-gap: 10px; }
  .bars .bar { grid-column: 1 / -1; grid-row: 2; }
}