/* TACT Grow public surface (queue #42) — single stylesheet, design tokens from
   docs/design/design-system-v1.md (CANONICAL; founder Variant A, 2026-09-03).
   Direction: Notion-like calm + Stripe-like precision. Flat surfaces, hairline
   borders, one focus ring; shadows on overlay surfaces only. */

@font-face {
  font-family: Grow;
  src: url('/static/fonts/Grow-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Ink / text */
  --ink: #1A1A1A;
  --ink-strong: #111111;
  --ink-2: #4A4A4A;
  --ink-3: #767676;

  /* Neutral surfaces */
  --paper: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F2F1EC;
  --line: #E4E2DA;
  --line-strong: #CFCCC0;

  /* Brand — TACT Fuar yellow */
  --brand: #F1C400;
  --brand-deep: #D4AB00;
  --brand-ink: #1A1A1A;

  /* Fresh accent — success/state, focus rings */
  --fresh-tint: #DCEFE3;
  --fresh: #4E9973;
  --fresh-deep: #2F7D5B;
  --fresh-line: #B9DFC9;

  /* Warm-muted — "needs attention", not an error */
  --amber-muted-tint: #F3E8D6;
  --amber-muted: #8A6D3B;

  /* Validation errors — kept separate from the lead-state palette */
  --error: #B3261E;
  --error-tint: #FBEAE9;

  /* Type scale */
  --text-xs: 12px;    /* line 16px — badges, micro-labels */
  --text-sm: 14px;    /* line 20px — captions, form hints */
  --text-base: 16px;  /* line 24px — body, inputs */
  --text-table: 15px; /* line 22px — table body floor */
  --text-md: 18px;    /* line 26px — card titles */
  --text-lg: 22px;    /* line 30px — section headings */
  --text-xl: 28px;    /* line 36px — page title */
  --text-3xl: 48px;   /* line 54px — landing hero (desktop) */

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius: 6px controls, 10px cards/drawers/modals — no third value */
  --radius-control: 6px;
  --radius-card: 10px;

  --font-sans: Grow, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
}

/* Single consistent focus treatment for every interactive control. */
:focus-visible { outline: 2px solid var(--fresh-deep); outline-offset: 2px; }

a { color: var(--fresh-deep); text-decoration: none; }
a:hover { color: var(--fresh); text-decoration: underline; text-underline-offset: 3px; }

/* --- Header / nav ------------------------------------------------------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-6);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.wordmark { font-size: var(--text-md); font-weight: 600; letter-spacing: -.01em; color: var(--ink-strong); }
.wordmark:hover { color: var(--ink-strong); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a.cta {
  border: 1px solid var(--ink); border-radius: var(--radius-control);
  padding: 8px 14px; color: var(--ink);
}
.site-nav a.cta:hover { background: var(--surface-2); color: var(--ink); }

.draft-banner {
  background: var(--amber-muted-tint); color: var(--amber-muted);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--space-6); font-size: var(--text-sm); font-weight: 500;
}

main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: var(--space-8) 0 var(--space-8); }

/* --- Type --------------------------------------------------------------- */

h1 { margin: var(--space-2) 0 var(--space-3); font-size: clamp(36px, 5vw, var(--text-3xl));
     line-height: 1.12; font-weight: 600; letter-spacing: -.02em; color: var(--ink-strong); }
h2 { font-size: var(--text-lg); line-height: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-strong); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 16px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.lede { max-width: 46rem; margin: 0; color: var(--ink-2); font-size: var(--text-md); line-height: 26px; }

/* --- Buttons ------------------------------------------------------------ */

.button {
  display: inline-block; border: 1px solid var(--ink); border-radius: var(--radius-control);
  padding: 10px 20px; font: 600 var(--text-base)/24px var(--font-sans);
  color: var(--ink); background: transparent; cursor: pointer;
}
.button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.button.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--brand-ink); }
.button.on-dark { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.button.on-dark:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--brand-ink); }
.button:disabled, .button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.button:disabled:hover { background: var(--brand); }


/* --- Landing ------------------------------------------------------------ */

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
                margin-top: var(--space-5); }

/* --- Pricing: one comparison table, not card stacks ---------------------- */

.pricing-head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-5); }
.pricing-head .head-copy { max-width: 44rem; }
.pricing-badges { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius-control); padding: 8px 14px;
  font-size: var(--text-sm); line-height: 20px; color: var(--ink-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.chip b { color: var(--ink); font-weight: 500; }
.chip.quiet { border: 0; background: none; padding: 0 var(--space-1); }

.plan-table {
  width: 100%; margin-top: var(--space-6); border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface);
  border-collapse: separate; border-spacing: 0; table-layout: fixed; overflow: hidden;
}
.plan-table th, .plan-table td {
  vertical-align: top; text-align: left; padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.plan-table tr:last-child > th, .plan-table tr:last-child > td { border-bottom: 0; }
.plan-table th + th, .plan-table td + td { border-left: 1px solid var(--line); }

.plan-col { background: var(--surface-2); font-weight: 600; }
.plan-col.featured { border-top: 2px solid var(--brand); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan-col h3 { margin: 0; font-size: var(--text-md); line-height: 26px; font-weight: 500; color: var(--ink-strong); }
.pill {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 16px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-ink); background: var(--brand);
  border-radius: var(--radius-control); padding: 4px 10px; white-space: nowrap;
}
.tagline { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 20px; }

.price-row { display: flex; align-items: baseline; gap: var(--space-2); }
.amount { font-family: var(--font-mono); font-size: 34px; line-height: 40px;
          font-weight: 500; letter-spacing: -.02em; color: var(--ink-strong); }
.currency { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
.per { font-size: var(--text-sm); color: var(--ink-3); }
.try-line { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-3); }
.try-line b { font-weight: 500; color: var(--ink-2); }

.features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-3); }
.features li { display: flex; gap: 10px; font-size: var(--text-table); line-height: 22px; color: var(--ink-2); }
.features li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232F7D5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10.5l4 4 8-9'/></svg>"); }
.plan-cta .button { width: 100%; text-align: center; }

.pricing-notes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
  border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-5);
  font-size: var(--text-sm); line-height: 20px; color: var(--ink-3);
}
.pricing-notes p { margin: 0 0 var(--space-2); }

/* --- Legal / contact ----------------------------------------------------- */

.legal-page { max-width: 46rem; }
.legal-page h1 { font-size: clamp(26px, 3.5vw, var(--text-xl)); line-height: 36px; }
.legal-section { margin-top: var(--space-6); }
.legal-section h2 { margin: 0 0 var(--space-2); }
.legal-section p { margin: 0; color: var(--ink-2); }
.legal-back { display: inline-block; margin-top: var(--space-6); font-size: var(--text-sm); font-weight: 500; }

/* --- Footer (light, consistent across every public page) ----------------- */

.site-footer {
  border-top: 1px solid var(--line); padding: var(--space-6);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6);
  background: var(--surface-2);
}
.company-title { font-weight: 600; color: var(--ink-strong); margin-bottom: var(--space-2); }
.company-fields { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); line-height: 20px; color: var(--ink-2); }
.company-fields .ph { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.footer-legal-title { font-weight: 600; color: var(--ink-strong); margin-bottom: var(--space-2); }
.footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); line-height: 20px; }
.footer-legal a { color: var(--ink-2); }
.footer-legal a:hover { color: var(--ink); }
.footer-notes { font-size: var(--text-sm); line-height: 20px; color: var(--ink-3); display: flex;
  flex-direction: column; gap: var(--space-2); justify-content: flex-end; }
.footer-notes p { margin: 0; }
/* Queue #60b-1: the footer help-center link. */
.footer-notes a { color: var(--ink-2); font-weight: 500; text-decoration: none; }
.footer-notes a:hover { color: var(--ink); }

/* --- Narrow viewports ----------------------------------------------------- */

@media (max-width: 1020px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .pricing-notes { grid-template-columns: 1fr; gap: var(--space-4); }
  .plan-table { display: block; overflow-x: auto; }
  .plan-table th, .plan-table td { min-width: 180px; }
}
@media (max-width: 640px) {
  main { width: calc(100% - 32px); padding: var(--space-6) 0 var(--space-7); }
  .site-header { padding: var(--space-3) var(--space-4); flex-wrap: wrap; row-gap: var(--space-2); }
  .site-nav { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: var(--space-2);
              gap: var(--space-2) var(--space-4); }
  .site-nav a.cta { margin-left: auto; white-space: nowrap; padding: 7px 12px; }
  .pillars { grid-template-columns: 1fr; }
  .pricing-badges { align-items: flex-start; }
  .draft-banner { padding: 10px var(--space-4); }
  .site-footer { padding: var(--space-5) var(--space-4); }
}

/* Pricing: feature matrix + credits (queue #44, messaging-v1.md section 2) */
.matrix-section { margin: var(--space-6) 0 0; }
.matrix-table { width: 100%; border-collapse: collapse; }
.matrix-table th, .matrix-table td { border: 1px solid var(--line); padding: var(--space-3);
                                     text-align: left; font-size: var(--text-table);
                                     line-height: 22px; }
.matrix-table thead th { background: var(--surface-2); font-weight: 600; }
.matrix-table .matrix-feature { width: 40%; }
.matrix-note { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: var(--text-sm);
               line-height: 20px; }

.credits { margin: var(--space-6) 0 0; }
.credits > h2 { margin: var(--space-2) 0 var(--space-2); }
.credits .lede { margin: 0 0 var(--space-4); }
.credits-caption { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: var(--text-sm);
                   line-height: 20px; }
.credits-addon { margin: var(--space-4) 0 0; border: 1px solid var(--line);
                 border-radius: var(--radius-card); padding: var(--space-4);
                 background: var(--surface); }
.credits-addon p { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--text-sm);
                   line-height: 20px; }
.addon-rows { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.addon-rows li { margin: 0 0 var(--space-1); color: var(--ink); font-size: var(--text-base);
                 line-height: 24px; font-family: var(--font-mono); font-weight: 500; }
.credits-footline { margin: var(--space-4) 0 0; color: var(--ink-2); font-size: var(--text-sm);
                    line-height: 20px; }

/* --- Queue #51: landing v4 — "temiz ve net" ------------------------------- */
/* Canonical copy: docs/gtm/messaging-v6.md (founder-approved). One idea per
   section, no repetition; yellow only on CTAs and small accents. Motion is
   visible and purposeful: a staggered load sequence in the hero, one 30px
   rise per section on scroll, a slow pausable logo marquee, and a looping
   wordless ad->demand line drawing. prefers-reduced-motion visitors get the
   static final frame of every animation (queue #51 founder decision). */

:root {
  --radius-v3: 16px;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

::selection { background: var(--brand); color: var(--ink-strong); }
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px;
    border: 3px solid var(--paper); }
  ::-webkit-scrollbar-track { background: var(--paper); }
}

/* Buttons: v3 radius everywhere (pricing included); hover lifts 2px with a
   transient shadow — flat surfaces rest without shadows, the lift is
   interaction feedback only (queue #51). */
.button {
  border-radius: 12px; padding: 13px 26px;
  transition: transform 160ms ease-out, background-color 160ms ease-out,
              border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.button.primary, .button.on-dark { font-weight: 700; }
.button.inverse { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--paper); }
.button.inverse:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 17, 17, 0.12); }
}
.button:active { transform: translateY(0); box-shadow: none; }

/* Hero: one promise, two actions, one real photograph, one explanatory
   drawing. Purpose of the load sequence: hierarchy — the headline lands
   first, sub/body/actions follow at 120ms intervals so the eye reads the
   page in its argument order. */
.hero { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center;
        gap: var(--space-8); padding: var(--space-6) 0 0; }
.hero h1 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(36px, 5.4vw, 64px);
           line-height: 1.06; font-weight: 700; letter-spacing: -.03em; color: var(--ink-strong); }
.hero .lede { font-size: var(--text-lg); line-height: 30px; max-width: 34rem; }
.hero-body { margin: var(--space-4) 0 0; max-width: 36rem; color: var(--ink-2);
             font-size: var(--text-base); line-height: 26px; }
.hero-actions { margin-top: var(--space-6); align-items: center; }
/* Height ceiling (queue #56a): the drawing renders 84px tall today; the clamp
   keeps any future viewBox/content change from reopening a tall void under
   the hero. */
.hero-flow { display: block; margin: var(--space-6) 0 0; width: min(280px, 72%); height: auto;
             max-height: 96px; color: var(--ink-strong); }
.hero-flow path { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
                  stroke-linejoin: round; fill: none; }
.hero-flow .flow-step-2 { stroke: var(--brand-deep); }

.hero-media { margin: 0; position: relative; }
/* Solid brand panel behind the photograph — flat color layering, not a shadow. */
.hero-media::before { content: ""; position: absolute; inset: 24px -20px -24px 24px;
                      background: var(--brand); border-radius: var(--radius-v3); }
.hero-media img { position: relative; display: block; width: 100%; height: auto;
                  border-radius: var(--radius-v3); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise 640ms var(--ease-out-strong) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: 120ms; }
  .hero-copy > :nth-child(3) { animation-delay: 240ms; }
  .hero-copy > :nth-child(4) { animation-delay: 360ms; }
  .hero-copy > :nth-child(5) { animation-delay: 480ms; }
  .hero-media { animation: hero-rise 640ms var(--ease-out-strong) 240ms backwards; }
  /* Wordless ad->demand drawing: strokes draw in sequence (megaphone, flow,
     lead inbox), hold, fade, loop every 6s. Purpose: explanation — it shows
     what the product does without adding a single word. */
  .hero-flow { animation: flow-cycle 6s linear infinite; }
  .hero-flow path { stroke-dasharray: 1; }
  .hero-flow .flow-step-1 { animation: flow-draw-1 6s linear infinite; }
  .hero-flow .flow-step-2 { animation: flow-draw-2 6s linear infinite; }
  .hero-flow .flow-step-3 { animation: flow-draw-3 6s linear infinite; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes flow-cycle { 0% { opacity: 0; } 5%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes flow-draw-1 { 0%, 6% { stroke-dashoffset: 1; } 18%, 100% { stroke-dashoffset: 0; } }
@keyframes flow-draw-2 { 0%, 24% { stroke-dashoffset: 1; } 46%, 100% { stroke-dashoffset: 0; } }
@keyframes flow-draw-3 { 0%, 52% { stroke-dashoffset: 1; } 74%, 100% { stroke-dashoffset: 0; } }

/* Sections: one idea each; reveal is a single 30px rise (~500ms) per section;
   list items follow in a 120ms stagger (queue #51). Vertical rhythm tightened
   96 -> 64px (queue #56a — founder: 96px read as "meaningless whitespace"
   between the hero drawing and the first section, and between sections). */
.what, .who, .how, .testimonial, .pricing-line, .platforms { margin: var(--space-8) 0 0; }
.what h2, .who h2, .how h2 { margin: 0 0 var(--space-5); font-size: var(--text-lg);
                             line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.plain-list { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.plain-list li { padding: var(--space-3) 0; color: var(--ink); font-size: var(--text-md);
                 line-height: 26px; }
.plain-list li + li { border-top: 1px solid var(--line); }
.who-lead { margin: 0; max-width: 46rem; color: var(--ink-strong); font-size: var(--text-xl);
            line-height: 36px; font-weight: 500; letter-spacing: -.01em; }
.who .plain-list { margin-top: var(--space-5); }
.how-list { list-style: none; margin: 0; padding: 0; max-width: 40rem; counter-reset: how; }
.how-list li { counter-increment: how; display: flex; align-items: baseline;
               gap: var(--space-4); padding: var(--space-3) 0; color: var(--ink);
               font-size: var(--text-md); line-height: 26px; }
.how-list li::before { content: counter(how); flex: none; font-weight: 600; color: var(--ink-3); }

/* Wide viewports (queue #56a — founder: sections read as a 640px left rail
   with the right half of the page empty). From 1280px the section heading
   moves beside its list, so the 1180px content column is used edge to edge
   (Stripe/Notion section pattern). DOM order, roles and the reveal/stagger
   hooks are untouched — placement only. Below 1280px the stacked flow above
   applies unchanged. */
@media (min-width: 1280px) {
  .what, .who, .how { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
                      column-gap: var(--space-8); align-items: start; }
  .what > h2, .who > h2, .how > h2 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .what > .plain-list, .how > .how-list { grid-column: 2; grid-row: 1; max-width: none; }
  .who > .who-lead { grid-column: 2; grid-row: 1; }
  .who > .plain-list { grid-column: 2; grid-row: 2; max-width: none; }
}

/* Taniklik: the single proof element — a quote and a name, no invented faces. */
.testimonial { margin: var(--space-8) auto 0; max-width: 44rem; }
.testimonial-quote { margin: 0; padding: var(--space-5) 0 0; border-top: 2px solid var(--brand); }
.testimonial-quote blockquote { margin: 0; color: var(--ink); font-size: var(--text-xl);
                                line-height: 36px; font-weight: 500; letter-spacing: -.01em; }
.testimonial-quote figcaption { margin: var(--space-4) 0 0; color: var(--ink-2);
                                font-size: var(--text-sm); line-height: 20px; }

/* Fiyat: one line, one button — the table lives on /pricing only. */
.pricing-line { display: flex; flex-wrap: wrap; align-items: center;
                justify-content: space-between; gap: var(--space-5); }
.pricing-teaser { margin: 0; color: var(--ink); font-size: var(--text-md); line-height: 26px; }

/* Bagli platformlar: official marks where the brand rules allow a logo, plain
   text where they do not (report lists the per-brand decision). A slow
   linear marquee (~40s/loop) that pauses on hover and on keyboard focus. */
.platforms-label { margin: 0; color: var(--ink-2); font-size: var(--text-xs);
                   line-height: 16px; font-weight: 600; letter-spacing: .12em;
                   text-transform: uppercase; }
.marquee { display: flex; margin: var(--space-6) 0 0; overflow: hidden; }
.marquee:focus-visible { outline-offset: 6px; }
.platforms-track { flex: none; display: flex; align-items: center; margin: 0; padding: 0;
                   list-style: none; }
.platform { display: flex; align-items: center; margin-right: var(--space-8); }
.platform-logo-svg { display: block; height: 26px; width: auto; }
.platform-logo-svg.platform-logo-meta { height: 21px; }
.platform-text { color: var(--ink-2); font-weight: 600; font-size: var(--text-md);
                 line-height: 24px; letter-spacing: -.01em; white-space: nowrap; }
.platforms-note { margin: var(--space-5) 0 0; color: var(--ink-2);
                  font-size: var(--text-base); line-height: 1.5;
                  white-space: normal; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .platforms-track { animation: marquee-scroll 40s linear infinite; }
  .marquee:hover .platforms-track, .marquee:focus .platforms-track,
  .marquee:focus-within .platforms-track { animation-play-state: paused; }
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .platforms-track { flex-wrap: wrap; justify-content: center; }
  .platforms-track[aria-hidden="true"] { display: none; }
}

/* Scroll reveal: sections rise once on intersection. The hidden state applies
   only after the template's inline script opts the document in via
   html.has-reveal — no-JS and reduced-motion visitors get the full page. */
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(30px); }
  html.has-reveal [data-reveal].is-revealed { opacity: 1; transform: none;
    transition: opacity 500ms var(--ease-out-strong), transform 500ms var(--ease-out-strong); }
  html.has-reveal .stagger [data-reveal-item] { opacity: 0;
    transition: opacity 420ms var(--ease-out-strong); }
  html.has-reveal [data-reveal].is-revealed .stagger [data-reveal-item] { opacity: 1; }
  html.has-reveal [data-reveal].is-revealed .stagger [data-reveal-item]:nth-child(2) { transition-delay: 120ms; }
  html.has-reveal [data-reveal].is-revealed .stagger [data-reveal-item]:nth-child(3) { transition-delay: 240ms; }
  html.has-reveal [data-reveal].is-revealed .stagger [data-reveal-item]:nth-child(4) { transition-delay: 360ms; }
}


/* --- Queue #56c: orta bolge hareket + gorsel (founder 2026-09-05) --- */
/* Purpose: explanation. Icons/dots/line/cards play once on reveal; only the
   panel's live dot + demand counter loop (6.8s). Hidden states live only in
   no-preference + html.has-reveal (reduced-motion and no-JS visitors get the
   finished frame). transform/opacity/stroke only — CLS 0. */

.what-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.row-icon { flex: none; width: 26px; height: 26px; color: var(--ink-2); }
.row-icon path, .wp-icon path, .how-card-icon path { fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Panel mock: flat card, hairline border, wordless; yellow = live dot only. */
.what-panel { margin: var(--space-5) 0 0; width: min(320px, 100%);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); padding: var(--space-4); }
.wp-line { display: inline-block; height: 6px; border-radius: 3px; background: var(--surface-2); }
.wp-w36 { width: 36px; } .wp-w56 { width: 56px; }
.wp-ad { display: flex; align-items: center; gap: var(--space-3); }
.wp-icon { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.wp-adlines { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; }
.wp-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.wp-demand { display: flex; align-items: flex-end; justify-content: space-between;
             gap: var(--space-4); margin: var(--space-4) 0 0; padding-top: var(--space-4);
             border-top: 1px solid var(--line); }
.wp-count { font-family: var(--font-mono); font-size: var(--text-xl); line-height: 32px;
            font-weight: 500; letter-spacing: -.02em; color: var(--ink-strong); min-width: 3ch; }
.wp-bars { display: flex; align-items: flex-end; gap: 5px; }
.wp-bars i { width: 7px; border-radius: 3px; background: var(--fresh); }

 
 

/* 1 -> 10 -> 100 dots settling into one aligned grid ("ayni ozen");
   the single-brand dot is the only yellow. */
.who-dots { display: block; width: min(240px, 100%); height: auto; margin: var(--space-6) 0 0; }
.who-dots circle { fill: var(--ink-2); }
.who-dots .wd-a { fill: var(--brand); }

/* Hairline track + sage fill through the three steps; a wordless card docks
   under each step as the fill reaches it. */
.how-list { position: relative; }
.how-list li { flex-wrap: wrap; }
.how-text { flex: 1 1 auto; }
.how-list::before, .how-list::after { content: ""; position: absolute; left: 9px;
  top: 20px; bottom: 20px; width: 2px; border-radius: 1px; }
.how-list::before { background: var(--line); }
.how-list::after { background: var(--fresh); }
.how-card { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 100%;
  margin: var(--space-2) 0 var(--space-1) 26px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface); padding: 10px var(--space-4); }
.how-card-icon { flex: none; width: 22px; height: 22px; color: var(--fresh-deep); }
.hc-line { display: inline-block; height: 6px; border-radius: 3px; background: var(--surface-2); }
.hc-long { width: 96px; } .hc-short { width: 56px; }

@media (min-width: 1280px) {
  .what > .what-panel { grid-column: 2; grid-row: 2; justify-self: start; }
  .who > .who-dots { grid-column: 1; grid-row: 2; }
}

@media (prefers-reduced-motion: no-preference) {
  .wp-live { animation: wp-pulse 2800ms ease-in-out infinite; }
  .wp-count { transition: opacity 400ms ease; }
  .what-panel.wp-idle .wp-count { opacity: .25; }
  html.has-reveal .row-icon path, html.has-reveal .wp-icon path,
  html.has-reveal .how-card-icon path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.has-reveal .what.is-revealed .row-icon path,
  html.has-reveal .what.is-revealed .wp-icon path,
  html.has-reveal .how.is-revealed .how-card-icon path { stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--ease-out-strong) 350ms; }
  html.has-reveal .what.is-revealed .what-list li:nth-child(2) .row-icon path { transition-delay: 120ms; }
  html.has-reveal .what.is-revealed .what-list li:nth-child(3) .row-icon path { transition-delay: 240ms; }
  html.has-reveal .what.is-revealed .what-list li:nth-child(4) .row-icon path { transition-delay: 360ms; }
  html.has-reveal .what.is-revealed .wp-ad .wp-icon path { transition-delay: 500ms; }
  html.has-reveal .who-dots circle { opacity: 0; transform: scale(.55);
    transform-box: fill-box; transform-origin: center; }
  html.has-reveal .who.is-revealed .who-dots circle { opacity: 1; transform: none;
    transition: opacity 420ms var(--ease-out-strong), transform 420ms var(--ease-out-strong); }
  html.has-reveal .who.is-revealed .who-dots circle:nth-child(n+2):nth-child(-n+10) { transition-delay: 650ms; }
  html.has-reveal .who.is-revealed .who-dots circle:nth-child(n+11) { transition-delay: 1300ms; }
  html.has-reveal .how-list::after { transform: scaleY(0); transform-origin: top; }
  html.has-reveal .how.is-revealed .how-list::after { transform: scaleY(1);
    transition: transform 1100ms var(--ease-out-strong) 150ms; }
  html.has-reveal .how-card { opacity: 0; transform: translateY(10px); }
  html.has-reveal .how.is-revealed .how-card { opacity: 1; transform: none;
    transition: opacity 420ms var(--ease-out-strong), transform 420ms var(--ease-out-strong);
    transition-delay: 350ms; }
  html.has-reveal .how.is-revealed .how-list li:nth-child(2) .how-card { transition-delay: 730ms; }
  html.has-reveal .how.is-revealed .how-list li:nth-child(3) .how-card { transition-delay: 1110ms; }
  html.has-reveal .wp-bars i { transform: scaleY(.2); transform-origin: bottom; }
  html.has-reveal .what.is-revealed .wp-bars i { transform: scaleY(1);
    transition: transform 600ms var(--ease-out-strong) 500ms; }
}
@keyframes wp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Altyapi satiri (landing): production stack, stated plainly; tagline above. */
.infra { margin: var(--space-8) 0 0; text-align: center; }
.footer-tagline { margin: 0 0 var(--space-6); color: var(--ink-strong); font-size: var(--text-md);
                  line-height: 26px; font-weight: 600; }
.infra .platforms-label { margin: 0 0 var(--space-1); }
.infra-row { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 20px;
             font-weight: 500; }

/* Pricing: heading, free First Check banner, rounder tables (queue #44/#48 —
   this slice does not touch /pricing). */
.pricing-head .head-copy h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08;
                              font-weight: 700; letter-spacing: -.025em; margin: 0 0 var(--space-3); }
.fc-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
             gap: var(--space-5); margin: var(--space-6) 0 0; background: var(--brand);
             color: var(--ink-strong); border-radius: var(--radius-v3);
             padding: var(--space-6); }
.fc-banner h2 { margin: 0 0 var(--space-2); color: var(--ink-strong); font-size: var(--text-lg);
                line-height: 30px; font-weight: 700; }
.fc-banner p { margin: 0; color: var(--ink-strong); opacity: .85; font-size: var(--text-sm);
               line-height: 22px; max-width: 42rem; }
.fc-banner .button { flex: none; }
.plan-table { border-radius: var(--radius-v3); }
.matrix-table { border-radius: var(--radius-card); }

/* --- Queue #51 narrow viewports ------------------------------------------- */

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-4); }
  .hero-media { max-width: 640px; }
  .hero-media::before { inset: 18px -14px -18px 18px; }
}
@media (max-width: 640px) {
  .hero { gap: var(--space-6); }
  .hero h1 { font-size: clamp(34px, 9.6vw, 44px); }
  .hero .lede { font-size: var(--text-base); line-height: 26px; }
  .hero-body { font-size: var(--text-sm); line-height: 22px; }
  .hero-media::before { inset: 12px -10px -12px 12px; }
  .hero-actions .button { width: 100%; text-align: center; }
  .what, .who, .how, .platforms { margin-top: var(--space-8); }
  .who-lead { font-size: var(--text-lg); line-height: 30px; }
  .plain-list li, .how-list li { font-size: var(--text-base); line-height: 24px; }
  .testimonial { margin-top: var(--space-8); }
  .testimonial-quote blockquote { font-size: var(--text-lg); line-height: 30px; }
  .pricing-line .button { width: 100%; text-align: center; }
  .platform { margin-right: var(--space-5); }
  .platform-logo-svg { height: 22px; }
  .platform-logo-svg.platform-logo-meta { height: 18px; }
  .platform-text { font-size: var(--text-sm); line-height: 20px; }
  .infra { margin-top: var(--space-7); }
}

/* #LEGAL-TEXT-WIRE: version line, legal tables and the KVKK rights list. */
.legal-version { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }
.legal-table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: var(--text-table); }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: var(--space-2); text-align: left; vertical-align: top; }
.legal-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.legal-list li { margin: 0 0 var(--space-2); color: var(--ink-2); }