/* Hallmark · genre: editorial · macrostructure: Stat-Led · theme: Almanac · enrichment: none (Tier-A CSS dataviz) · nav: N6 · footer: Ft4
 * tokens: tokens.css — bu dosyada ham renk/font değeri yok */

/* ---------- Zemin ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  padding-inline: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left));
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
}
main { max-width: 68rem; margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; font-style: normal; line-height: 1.12; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
em { font-style: italic; }
a { color: var(--color-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.section-head { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.section-sub { color: var(--color-neutral); font-size: var(--text-sm); max-width: 55ch; margin-bottom: var(--space-md); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: clip; white-space: nowrap;
}

/* ---------- N6 · Masthead ---------- */
.masthead {
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-lg) var(--space-sm);
  border-bottom: var(--rule-double);
  margin-bottom: var(--space-2xl);
}
.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.masthead__issue {
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-2xs);
}
.masthead__nav { display: flex; justify-content: center; gap: var(--space-lg); margin-top: var(--space-sm); }
.masthead__link {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .masthead__link:hover { text-decoration-thickness: 2px; color: var(--color-accent); } }

/* ---------- Giriş + C2 form (sol yaslı) ---------- */
.intake { max-width: 44rem; margin-bottom: var(--space-3xl); }
.intake__title { font-size: var(--text-display); letter-spacing: -0.02em; }
.intake__lede { margin-top: var(--space-md); max-width: 52ch; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; }

.intake__form { margin-top: var(--space-xl); max-width: 34rem; }
.intake__label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2xs); }
.intake__row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.intake__input {
  flex: 1 1 14rem;
  min-width: 0;
  height: 46px;
  padding-inline: var(--space-sm) 24px;
  font: inherit;
  font-variant-numeric: normal;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: background-color var(--dur-short) var(--ease-out);
}
.intake__input::placeholder { color: var(--color-muted); }
@media (hover: hover) { .intake__input:hover { background: var(--color-paper-2); } }
.intake__input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.intake__input[aria-invalid="true"] { border-color: var(--color-error); }
.intake__input:disabled { opacity: 0.55; cursor: not-allowed; }

/* C1 · dış çizgili chip */
.chip {
  height: 46px;
  padding-inline: var(--space-lg);
  font: inherit;
  font-weight: 600;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .chip:hover { background: var(--color-ink); color: var(--color-paper); } }
.chip:active { transform: translateY(1px); }
.chip:disabled, .chip[data-state="loading"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.chip[data-state="loading"] .chip__label::after { content: "…"; }

.intake__help { min-height: 1lh; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-neutral); }
.intake__help[data-state="error"] { color: var(--color-error); }
.intake__demo-note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  border-inline-start: none;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-2);
  border-radius: var(--radius-sm);
  max-width: 34rem;
}

/* ---------- Yükleme ---------- */
.run { margin-bottom: var(--space-2xl); }
.loading { max-width: 34rem; padding-block: var(--space-xl); }
.loading__stage { font-size: var(--text-sm); color: var(--color-neutral); margin-bottom: var(--space-xs); min-height: 1lh; }
.loading__track { height: 4px; background: var(--color-paper-3); border-radius: var(--radius-sm); overflow: clip; }
.loading__bar {
  height: 100%; width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  /* dolum her karede JS ile scaleX üzerinden verilir — width animasyonu yok */
}

/* ---------- Rapor ---------- */
.report { border-top: var(--rule-hairline); padding-top: var(--space-xl); }
.report__subject { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral); }
.report__handle { font-size: var(--text-xl); margin-top: var(--space-2xs); }
.report__meta { color: var(--color-neutral); font-size: var(--text-sm); margin-top: var(--space-2xs); }

/* Skor kahramanı — sola yaslı, ölçer altında */
.score { margin-top: var(--space-xl); max-width: 34rem; }
.score__figure {
  font-family: var(--font-outlier);
  font-weight: 700;
  font-size: var(--text-score);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.score__unit { font-size: 0.35em; font-weight: 500; color: var(--color-neutral); margin-inline-start: var(--space-2xs); }
.score__meter { height: 8px; margin-top: var(--space-sm); background: var(--color-accent-soft); border-radius: var(--radius-sm); overflow: clip; }
.score__fill {
  height: 100%; width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 600ms var(--ease-out);
}
.score__qualifier { margin-top: var(--space-md); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.score__confidence { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-neutral); }

/* T4 · istatistik şeridi */
.statstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0 0;
  padding-block: var(--space-md);
  border-block: var(--rule-hairline);
}
.statstrip div { min-width: 0; display: flex; flex-direction: column; }
.statstrip dt { font-size: var(--text-xs); color: var(--color-neutral); order: 2; }
.statstrip dd { margin: 0; font-weight: 600; font-size: var(--text-lg); line-height: 1.2; order: 1; }

/* F3 · Pod tablosu */
.podsec { margin-top: var(--space-2xl); }
.pod { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pod th {
  text-align: start;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: 1px solid var(--color-rule-2);
}
.pod td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hairline); vertical-align: middle; }
.pod__num, td.pod__num { color: var(--color-muted); width: 2ch; }
.pod .tnum { font-variant-numeric: tabular-nums lining-nums; }
.pod__acct { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.pod__tile {
  flex: none;
  inline-size: 28px; block-size: 28px;
  display: grid; place-items: center;
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-weight: 600; font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}
.pod__handle { overflow-wrap: anywhere; }
.pod__dots { display: inline-flex; gap: 3px; margin-inline-end: var(--space-xs); vertical-align: middle; }
.pod__dot { inline-size: 6px; block-size: 6px; border-radius: 1px; background: var(--color-paper-3); }
.pod__dot--on { background: var(--color-ink-2); }
.pod__types { color: var(--color-neutral); font-size: var(--text-xs); white-space: nowrap; }
.pod__footnote { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); }

/* ---------- Grafikler ---------- */
.charts { margin-top: var(--space-2xl); }
.charts__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-xl); }
.chart { margin: 0; min-width: 0; }
.chart__cap { display: block; margin-bottom: var(--space-md); }
.chart__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.chart__sub { display: block; font-size: var(--text-sm); color: var(--color-neutral); max-width: 40ch; }

.chart__plot { position: relative; }
.bars { display: flex; align-items: flex-end; gap: 2px; block-size: 9.5rem; border-bottom: 1px solid var(--color-rule); }
.bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; block-size: 100%; position: relative; }
.bar {
  inline-size: 100%; max-inline-size: 24px;
  background: var(--color-mark-dim);
  border-radius: 4px 4px 0 0;   /* veri ucunda yuvarlak, tabanda köşeli */
  min-block-size: 2px;
}
.bar--hot { background: var(--color-accent); }
.bar-col__value {
  position: absolute;
  /* dikey konum satır içi stille verilir: bottom: calc(<yükseklik>% + 6px) */
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-ink-2);
  line-height: 1;
}
.bar-ticks { display: flex; gap: 2px; margin-top: var(--space-2xs); }
.bar-tick { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--text-xs); color: var(--color-muted); overflow-wrap: anywhere; line-height: 1.25; }

/* bar araç ipucu: hover 800ms gecikmeli, klavye odağı anında */
.bar-col[tabindex] { cursor: default; }
.bar-col .tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-xs);
  line-height: 1.35;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-micro) var(--ease-out) 0ms, visibility 0ms 800ms;
}
@media (hover: hover) {
  .bar-col:hover .tip { opacity: 1; visibility: visible; transition-delay: 800ms, 800ms; }
}
.bar-col:focus-visible .tip { opacity: 1; visibility: visible; transition-delay: 0ms, 0ms; }

/* ---------- Kanıtlar ---------- */
.evidence { margin-top: var(--space-2xl); max-width: 55rem; }
.evidence__list { list-style: none; margin: 0; padding: 0; }
.evidence__list li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-bottom: var(--rule-hairline);
}
.evidence__list li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--space-sm) + 0.45em);
  inline-size: 8px; block-size: 8px;
  background: var(--color-accent);
  border-radius: 1px;
}
.evidence__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); max-width: 60ch; }

/* ---------- Son analizler ---------- */
.recent { margin-block: var(--space-3xl) 0; }
.recent__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); }
.recent__card {
  inline-size: 100%;
  text-align: start;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  display: grid;
  gap: var(--space-2xs);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .recent__card:hover { background: var(--color-paper-2); } }
.recent__card:active { transform: translateY(1px); }
.recent__card:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.recent__handle { font-weight: 600; }
.recent__line { font-size: var(--text-sm); color: var(--color-neutral); }
.recent__scorebit { font-variant-numeric: tabular-nums lining-nums; font-size: var(--text-sm); color: var(--color-ink-2); }
.recent__scorebit strong { color: var(--color-ink); }

/* ---------- F4 · Yöntem ---------- */
.method { margin-top: var(--space-3xl); max-width: 44rem; }
.steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.steps__item { padding-block: var(--space-lg); border-bottom: var(--rule-hairline); }
.steps__item:last-child { border-bottom: 0; }
.steps__no {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-accent);
  font-size: var(--text-base);
  margin-inline-end: var(--space-sm);
}
.steps__title { font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.steps__item p { color: var(--color-ink-2); max-width: 55ch; }

/* ---------- Sınırlar ---------- */
.limits { margin-top: var(--space-xl); max-width: 44rem; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-md); }
.limits p { color: var(--color-ink-2); max-width: 60ch; margin-top: var(--space-xs); }

/* ---------- Ft4 · Kolofon ---------- */
.colophon {
  max-width: 68rem;
  margin: var(--space-3xl) auto 0;
  padding-top: var(--space-lg);
  border-top: var(--rule-double);
}
.colophon p {
  font-family: var(--font-outlier);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-neutral);
  max-width: 75ch;
}

/* ---------- Rapor girişi (tek orkestre edilmiş sahne) ---------- */
.report:not([hidden]) .reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 120ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .report:not([hidden]) .reveal { animation: reveal-reduced 120ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
}

/* ---------- Dar ekranlar ---------- */
@media (max-width: 40rem) {
  .statstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .charts__row { grid-template-columns: minmax(0, 1fr); }

  /* tablo -> kart görünümü */
  .pod thead { position: absolute; clip-path: inset(50%); }
  .pod, .pod tbody, .pod tr, .pod td { display: block; }
  .pod tr { border-bottom: 1px solid var(--color-rule-2); padding-block: var(--space-sm); }
  .pod td { border: 0; padding: var(--space-2xs) 0; }
  .pod td.pod__num { display: none; }
  .pod td.pod__types { white-space: normal; }
  .pod td[data-label]::before {
    content: attr(data-label) " · ";
    font-size: var(--text-xs);
    color: var(--color-neutral);
  }
  .bar-tick:nth-child(odd) { visibility: hidden; }
}