/* ==========================================================================
   pages.css - shared page pieces (every route): reveal on scroll and the stat tiles ("facts") used by the home page and Hakkımızda.
   home.css = the home page sections (home route only), inner.css = inner pages + 404 (every other route).
   Reveal motion: `.is-pending` (set by main.js only for elements below the fold) fades / lifts; nothing is ever hidden without JavaScript.
   ========================================================================== */

/* ---------------------------------------------------------------- reveal on scroll */
.is-reveal-ready [data-reveal].is-pending { opacity: 0; transform: translateY(16px); }
[data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
[data-reveal].is-revealing { transition-delay: var(--reveal-delay, 0ms); }

/* ---------------------------------------------------------------- facts (stat tiles) */
.facts { grid-area: facts; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 20px 8px;
  border-radius: var(--radius-m);
  background: var(--color-surface);
  text-align: center;
}
.facts__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-fact); line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.facts__num .hl { font-size: var(--fs-fact-italic); letter-spacing: -0.03em; line-height: 1; }
.facts__label { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--color-ink-soft); }
.facts__label--full { display: none; }
@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-line); margin-top: 8px; }
  .facts__item { padding: 28px 8px 0; background: none; border-radius: 0; gap: 10px; }
  .facts__label { font-size: 15px; line-height: 1.4; }
  .facts__label--full { display: block; }
  .facts__label--short { display: none; }
}
@media (min-width: 1024px) {
  .facts { margin-top: 0; }
  .facts__num { letter-spacing: -0.04em; }
}