/* ==========================================================================
   TulNova — site.css
   Katmanlar: reset → base → layout → components → pages → utilities
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- base ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 0, "tnum" 0;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); line-height: var(--leading-snug); text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--color-brand); color: var(--color-brand-ink); }

.skip-link {
  position: absolute; left: var(--space-sm); top: -100px; z-index: 100;
  background: var(--color-brand); color: var(--color-brand-ink);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-sm); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section--deep { background: var(--color-bg-deep); }
.section--surface { background: var(--color-surface); }
.section--brand { background: var(--color-brand); color: var(--color-brand-ink); }
.section:not(.section--deep):not(.section--surface):not(.section--brand):not(.section--tight) + .section:not(.section--deep):not(.section--surface):not(.section--brand):not(.section--rule):not(.section--tight) { padding-top: 0; }
.rule { border: 0; border-top: 1px solid var(--color-border); margin: 0; }

.split { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--rev { grid-template-columns: 7fr 5fr; }
  .split__sticky { position: sticky; top: calc(var(--header-h) + var(--space-xl)); }
}

/* ---------- type primitives ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-muted);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent, var(--color-brand)); }
.eyebrow--plain::before { display: none; }

.display { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-weight: var(--weight-medium); }
.h2 { font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.03em; }
.h3 { font-size: var(--text-xl); line-height: 1.25; }
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-soft); max-width: 46ch; }
.body-soft { color: var(--color-text-soft); max-width: var(--measure); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }

.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-2xl); max-width: 820px; }
.section-head .lead { margin-top: var(--space-2xs); }

/* ---------- buttons & links ---------- */
.btn {
  --btn-bg: var(--color-brand); --btn-fg: var(--color-brand-ink); --btn-border: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: -0.005em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn:hover { --btn-bg: var(--color-brand-hover); --btn-border: var(--color-brand-hover); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-border: var(--color-border-strong); }
.btn--secondary:hover { --btn-bg: var(--color-surface); --btn-border: var(--color-text); }
.btn--sm { min-height: 40px; padding: 0 16px; }
.btn--on-brand { --btn-bg: var(--color-surface); --btn-fg: var(--color-brand); --btn-border: var(--color-surface); }
.btn--on-brand:hover { --btn-bg: var(--color-bg); --btn-border: var(--color-bg); }
.btn--ghost-on-brand { --btn-bg: transparent; --btn-fg: var(--color-brand-ink); --btn-border: rgba(255,255,255,.32); }
.btn--ghost-on-brand:hover { --btn-bg: rgba(255,255,255,.08); --btn-border: rgba(255,255,255,.7); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--weight-medium); text-decoration: none; color: var(--color-text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size var(--duration) var(--ease);
}
.text-link:hover { background-size: 100% 1px; }
.text-link .arrow { transition: transform var(--duration) var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }

.arrow { display: inline-block; width: 14px; height: 14px; flex: none; }

/* ---------- wordmark (tipografi öncelikli; gerçek logo gelince <img> ile değişir) ---------- */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--weight-semibold); font-size: 1.1875rem; letter-spacing: -0.03em; line-height: 1; text-decoration: none; color: var(--color-text); }
.wordmark span { color: var(--color-tech); }
.logo-img { display: block; width: auto; height: 30px; }
.wordmark--lg .logo-img { height: 40px; }
.system__core-name .logo-img { height: 26px; }
.footer__descriptor { margin-top: 6px; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-muted); }

.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup__sep { color: var(--color-faint); font-weight: var(--weight-regular); font-size: 1.125rem; transform: translateY(-1px); }
.lockup__product { display: inline-flex; align-items: center; gap: 0; min-height: 44px; font-weight: var(--weight-medium); font-size: 1.0625rem; letter-spacing: -0.015em; text-decoration: none; color: var(--color-text); }

.label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.label--faint { color: var(--color-faint); }
.product-code { font-size: var(--text-xs); color: var(--color-faint); letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(247, 247, 245, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(247, 247, 245, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--color-border);
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; font-size: var(--text-sm); color: var(--color-text-soft); text-decoration: none; padding-block: 6px; transition: color var(--duration-fast) var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration) var(--ease); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-text); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: none; align-items: center; gap: var(--space-md); }
.header-actions .nav__link { white-space: nowrap; }

@media (min-width: 1000px) {
  .nav { display: block; }
  .header-actions { display: flex; }
}

/* products dropdown */
.nav__item--has-menu { position: relative; }
.nav__trigger { background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav__trigger svg { width: 10px; height: 10px; transition: transform var(--duration) var(--ease); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: -20px; width: 360px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
}
.nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { display: grid; grid-template-columns: 10px 1fr; column-gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none; }
.nav-menu a:hover { background: var(--color-bg); }
.nav-menu a::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-top: 8px; grid-row: span 2; }
.nav-menu strong { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.nav-menu span { font-size: var(--text-xs); color: var(--color-muted); }

/* mobile menu */
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 14px; height: 8px; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--duration) var(--ease), top var(--duration) var(--ease); }
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 6.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 3.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 3.25px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--color-bg); overflow-y: auto;
  padding: var(--space-lg) var(--gutter) var(--space-2xl);
  opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease), visibility var(--duration);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__group { border-top: 1px solid var(--color-border); padding-block: var(--space-md); }
.mobile-menu__label { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-xs); }
.mobile-menu__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.mobile-menu__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: var(--text-xl); letter-spacing: -0.02em; text-decoration: none; }
.mobile-menu__list a small { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0; }
.mobile-menu__cta { display: grid; gap: var(--space-xs); padding-top: var(--space-md); }
.mobile-menu__cta .btn { width: 100%; }
body.menu-open { overflow: hidden; }
@media (min-width: 1000px) { .menu-toggle { display: none; } }
@media (min-width: 1000px) { .mobile-menu { display: none; } }

/* product sub-bar (ürün sayfalarında ürün içi gezinme) */
.product-bar { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.product-bar__inner { display: flex; gap: var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.product-bar__inner::-webkit-scrollbar { display: none; }
.product-bar a { flex: none; font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; padding: 14px 0; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast), border-color var(--duration-fast); }
.product-bar a:hover { color: var(--color-text); }
.product-bar a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-text); }

/* ---------- breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--color-faint); }
.breadcrumb a { text-decoration: none; display: inline-block; padding-block: 8px; }
.breadcrumb a:hover { color: var(--color-text); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(72px, 9vw, 136px); }
.hero__grid { display: grid; gap: var(--space-2xl); }
.hero__copy { display: grid; gap: var(--space-md); align-content: start; }
.hero__copy .display { max-width: 13ch; }
.hero__copy .lead { max-width: 44ch; }
.hero__copy .btn-row { margin-top: var(--space-xs); }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-3xl); }
}
@media (min-width: 1000px) and (max-width: 1179px) { .hero--grid .hero__grid { grid-template-columns: 1fr; } .hero--grid .hero__visual { max-width: 720px; } }

/* Ana sayfa hero: ürün dizini */
.directory { border-top: 1px solid var(--color-text); }
.directory__caption { font-size: var(--text-xs); color: var(--color-muted); padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.directory__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.directory__name { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xl); letter-spacing: -0.02em; font-weight: var(--weight-medium); }
.directory__name::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.directory__cat { grid-column: 1; font-size: var(--text-sm); color: var(--color-muted); padding-left: 18px; }
.directory__go { grid-row: 1 / span 2; grid-column: 2; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: grid; place-items: center; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease); }
.directory__item:hover .directory__go { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

/* Ürün hero'su */
.product-hero { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(64px, 8vw, 120px); --accent: var(--color-brand); }
.product-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: clamp(40px, 6vw, 88px); }
.product-hero .display { max-width: 16ch; }
.product-hero__lead { display: grid; gap: var(--space-md); }
@media (min-width: 1000px) {
  .product-hero__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
}
.product-hero__aside { margin-top: var(--space-xl); }
@media (min-width: 1000px) { .product-hero__aside { margin-top: 0; } }

/* ---------- brand statement ---------- */
.statement { display: grid; gap: var(--space-lg); }
.statement__text { font-size: var(--text-3xl); letter-spacing: -0.03em; line-height: 1.1; max-width: 18ch; }
.statement__products { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--text-lg); color: var(--color-muted); }
.statement__products a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: color var(--duration-fast); }
.statement__products a::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.statement__products a:hover { color: var(--color-text); }
@media (min-width: 900px) { .statement { grid-template-columns: 7fr 5fr; align-items: end; } .statement__products { justify-content: flex-end; } }

/* ---------- product showcase (editorial) ---------- */
.showcase { display: grid; }
.showcase__item { display: grid; gap: var(--space-xl); padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--color-border); }
.showcase__item:last-child { border-bottom: 1px solid var(--color-border); }
.showcase__label { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.showcase__label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.showcase__name { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); line-height: 1; margin-top: var(--space-md); }
.showcase__cat { font-size: var(--text-lg); color: var(--color-text-soft); margin-top: var(--space-xs); }
.showcase__desc { color: var(--color-text-soft); max-width: 46ch; margin-top: var(--space-md); }
.showcase__cta { margin-top: var(--space-lg); }
.showcase__right { display: grid; gap: var(--space-xl); align-content: start; }
@media (min-width: 1000px) {
  .showcase__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
  .showcase__item > div:first-child { position: sticky; top: calc(var(--header-h) + var(--space-xl)); align-self: start; }
}

/* feature list (iki sütun, ince çizgili) */
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; column-gap: var(--space-lg); }
.feature-list li { padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-soft); display: flex; gap: 12px; align-items: baseline; }
.feature-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-border-strong); flex: none; transform: translateY(-2px); }
@media (min-width: 560px) { .feature-list { grid-template-columns: 1fr 1fr; } }

/* ---------- process flow ---------- */
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: row; gap: 0; counter-reset: flow; }
.flow__step { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--color-border-strong); font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.flow__step::before { counter-increment: flow; content: counter(flow); width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums; border: 1px solid var(--color-border-strong); border-radius: 6px; color: var(--color-muted); background: var(--color-surface); }
.flow__step:last-child { border-bottom: 0; }
.flow__step:last-child::before { background: var(--accent-ink, var(--color-brand)); border-color: var(--accent-ink, var(--color-brand)); color: #fff; }
@media (min-width: 700px) {
  .flow--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .flow--row .flow__step { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 16px 0 0; border-bottom: 0; }
  .flow--row .flow__step::after { content: ""; position: absolute; top: 13px; left: 36px; right: 10px; height: 1px; background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 4px, transparent 4px 8px); }
  .flow--row .flow__step:last-child::after { display: none; }
}

/* ---------- panel / surface ---------- */
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(20px, 3vw, 36px); }
.panel__title { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-md); }

/* ---------- signature: Ölç → Anla → Yönet → Geliştir ---------- */
.signature { display: grid; gap: 0; border-top: 1px solid var(--color-text); }
.signature__step { display: grid; gap: var(--space-2xs); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); }
.signature__word { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-signature); line-height: 0.95; letter-spacing: -0.045em; font-weight: var(--weight-medium); }
.signature__word svg { width: 0.42em; height: 0.42em; color: var(--color-faint); flex: none; }
.signature__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 34ch; }
@media (min-width: 1000px) {
  .signature { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--color-border); }
  .signature__step { border-bottom: 0; padding: var(--space-xl) var(--space-md) var(--space-xl) 0; align-content: space-between; min-height: 280px; }
  .signature__step + .signature__step { border-left: 1px solid var(--color-border); padding-left: var(--space-md); }
  .signature__word { font-size: clamp(2.5rem, 4.6vw, 4.75rem); flex-direction: row; }
}

/* ---------- principles / grid lists ---------- */
.grid-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.grid-list__item { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); display: grid; gap: var(--space-2xs); }
.grid-list__title { font-size: var(--text-xl); letter-spacing: -0.02em; font-weight: var(--weight-medium); }
.grid-list__text { color: var(--color-text-soft); font-size: var(--text-sm); max-width: 38ch; }
@media (min-width: 700px) {
  .grid-list--2 { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
  .grid-list--4 { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
}
@media (min-width: 1100px) {
  .grid-list--4 { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .grid-list--4 .grid-list__item { padding-right: var(--space-lg); }
  .grid-list--4 .grid-list__item + .grid-list__item { border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.checklist li:first-child { border-top: 1px solid var(--color-border); }
.checklist svg { width: 16px; height: 16px; margin-top: 5px; color: var(--color-brand); }

/* audience */
.audience { display: grid; gap: var(--space-xs); }
@media (min-width: 700px) { .audience { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .audience { grid-template-columns: repeat(4, 1fr); } }
.audience__card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); padding: var(--space-lg) var(--space-md) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: 280px; }
.audience__title { font-size: var(--text-xl); letter-spacing: -0.02em; font-weight: var(--weight-medium); }
.audience__text { color: var(--color-text-soft); font-size: var(--text-sm); }
.audience__links { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; font-size: var(--text-xs); font-weight: var(--weight-medium); border: 1px solid var(--color-border); border-radius: 6px; text-decoration: none; color: var(--color-text-soft); background: var(--color-surface-muted); transition: border-color var(--duration-fast), color var(--duration-fast); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.chip:hover { border-color: var(--color-text); color: var(--color-text); }

/* ---------- feature rows (ürün sayfaları) ---------- */
.feature-rows { display: grid; border-top: 1px solid var(--color-border); }
.feature-row { display: grid; gap: var(--space-sm); padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); }
.feature-row__title { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.15; }
.feature-row__text { color: var(--color-text-soft); max-width: 58ch; }
.feature-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2xs); }
.tag { font-size: var(--text-xs); padding: 4px 9px; border-radius: 6px; background: var(--color-bg-deep); color: var(--color-text-soft); }
@media (min-width: 900px) { .feature-row { grid-template-columns: 4fr 7fr; gap: var(--space-3xl); } }

/* ---------- concept visuals (sahte veri içermeyen şemalar) ---------- */
.concept { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(20px, 3vw, 32px); }
.concept__caption { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-md); }
.concept svg { width: 100%; height: auto; }
.concept__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.concept__legend span { display: inline-flex; align-items: center; gap: 8px; }
.concept__legend i { width: 14px; height: 2px; background: currentColor; display: inline-block; }

.relation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.relation__node { padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.relation__arrow { color: var(--color-faint); width: 16px; height: 16px; }

/* ---------- screenshot frame ---------- */
.shot { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: 12px 16px; font-size: var(--text-xs); color: var(--color-muted); border-top: 1px solid var(--color-border); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 22px 0; font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.015em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 6.25px; left: 0; width: 14px; height: 1.5px; background: currentColor; transition: transform var(--duration) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 24px; color: var(--color-text-soft); max-width: 66ch; }
.faq__a p + p { margin-top: 12px; }

/* ---------- CTA section ---------- */
.cta { display: grid; gap: var(--space-lg); }
.cta__title { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); line-height: 1.02; max-width: 15ch; font-weight: var(--weight-medium); }
.cta__text { color: rgba(255,255,255,0.74); max-width: 46ch; font-size: var(--text-lg); }
.cta--light .cta__text { color: var(--color-text-soft); }
.cta__side { display: grid; gap: var(--space-lg); justify-items: start; }
@media (min-width: 1000px) { .cta { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ---------- brand signature (ürün → marka) ---------- */
.brand-sig { display: grid; gap: var(--space-xl); padding: var(--space-xl) 0; border-top: 1px solid var(--color-border); }
.brand-sig__lead { display: grid; gap: var(--space-sm); }
.brand-sig__line { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.2; max-width: 26ch; }
.brand-sig__others { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.brand-sig__other { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.brand-sig__other strong { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--weight-medium); }
.brand-sig__other strong::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.brand-sig__other span { font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 900px) { .brand-sig { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }

/* ---------- article ---------- */
.article-head { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--space-2xl); display: grid; gap: var(--space-md); }
.article-head h1 { font-size: var(--text-3xl); letter-spacing: -0.03em; line-height: 1.08; max-width: 22ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-xs); color: var(--color-muted); }
.article-layout { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-section); }
@media (min-width: 1100px) { .article-layout { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: var(--space-3xl); } }
.prose { max-width: 720px; font-size: 1.125rem; line-height: 1.72; color: var(--color-text-soft); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--text-2xl); color: var(--color-text); letter-spacing: -0.025em; line-height: 1.2; margin-top: 2.2em; }
.prose h3 { font-size: var(--text-xl); color: var(--color-text); margin-top: 1.8em; }
.prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.prose a { color: var(--color-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { border-left: 2px solid var(--color-brand); padding-left: var(--space-md); color: var(--color-text); }
.article-aside { display: grid; gap: var(--space-md); align-content: start; }
@media (min-width: 1100px) { .article-aside { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }
.toc { font-size: var(--text-sm); }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 1px solid var(--color-border); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--color-muted); }
.toc a:hover { color: var(--color-text); border-left-color: var(--color-text); }
.related { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.related a { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.related strong { font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.related span { font-size: var(--text-sm); color: var(--color-muted); }

/* rehber listesi */
.guide-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.guide-item { display: grid; gap: 6px; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.guide-item h3 { font-size: var(--text-xl); letter-spacing: -0.02em; transition: color var(--duration-fast); }
.guide-item p { color: var(--color-text-soft); font-size: var(--text-sm); max-width: 62ch; }
.guide-item:hover h3 { color: var(--color-brand); }
@media (min-width: 900px) { .guide-item { grid-template-columns: 200px 1fr; column-gap: var(--space-xl); } .guide-item .article-meta { grid-row: span 2; padding-top: 6px; } }

/* ---------- form ---------- */
.form { display: grid; gap: var(--space-md); }
.form__row { display: grid; gap: var(--space-md); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field .hint { font-size: var(--text-xs); color: var(--color-muted); font-weight: var(--weight-regular); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.textarea { min-height: 148px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23676B70' stroke-width='1.5'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: var(--text-sm); color: var(--color-text-soft); align-items: start; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-brand); }
.form-status { font-size: var(--text-sm); padding: 12px 14px; border-radius: var(--radius-sm); display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: #E8F1EC; color: var(--color-success); }
.form-status--err { background: #F6E9E6; color: var(--color-danger); }
.form-status--info { background: var(--color-bg-deep); color: var(--color-text-soft); border: 1px solid var(--color-border); }

.contact-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.contact-list > div { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.contact-list dt { font-size: var(--text-xs); color: var(--color-muted); }
.contact-list dd { font-size: var(--text-lg); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding-top: clamp(64px, 8vw, 112px); padding-bottom: var(--space-lg); }
.footer__top { display: grid; gap: var(--space-2xl); padding-bottom: clamp(48px, 6vw, 88px); }
.footer__brand { display: grid; gap: var(--space-sm); align-content: start; }
.footer__tagline { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.15; max-width: 14ch; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }
.footer__col h2 { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-sm); }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer__col li a { display: inline-block; padding-block: 6px; }
.footer__col a { text-decoration: none; font-size: var(--text-sm); color: var(--color-text-soft); }
.footer__col a:hover { color: var(--color-text); }
.footer__col small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 404 ---------- */
.notfound { min-height: 64vh; display: grid; align-content: center; gap: var(--space-md); padding-block: var(--space-3xl); }
.notfound__code { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: var(--tracking-label); }

/* ==========================================================================
   V3 BİLEŞENLERİ
   ========================================================================== */

.section--rule { border-top: 1px solid var(--color-border); }
.subhead { font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.2; color: var(--color-text); max-width: 22ch; }
.display--landing { max-width: 13ch; }

/* ---------- hero arka planı: çok düşük kontrastlı koordinat ızgarası ---------- */
.hero--grid { position: relative; isolation: isolate; }
.hero--grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10, 23, 48, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 23, 48, 0.05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 72% 45%, #000 20%, transparent 75%);
}
.hero__visual { min-width: 0; }
@media (min-width: 1000px) { .hero--grid .hero__grid { align-items: center; } }

/* ---------- ürün sistemi görseli ---------- */
.system { position: relative; margin: 0; padding: 40px 0 0; }
.system__coord { position: absolute; top: 8px; left: 0; font-size: 11px; letter-spacing: var(--tracking-label); color: var(--color-faint); }
.system__modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.module {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 16px 14px 18px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  text-decoration: none; min-height: 150px;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.module:hover { border-color: var(--color-text); transform: translateY(-2px); }
.module::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
/* modülden çekirdeğe inen bağlantı + veri düğümü */
.module::after { content: ""; position: absolute; left: 50%; bottom: -41px; width: 1px; height: 40px; background: var(--color-border-strong); }
.module__code { font-size: 10.5px; letter-spacing: var(--tracking-label); color: var(--color-faint); text-transform: uppercase; }
.module__name { font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.module__cat { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; }

.system__core {
  position: relative; margin-top: 40px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 16px;
  padding: 18px 20px; background: var(--color-brand); color: var(--color-brand-ink); border-radius: var(--radius-sm);
}
.system__core::before { /* üç bağlantı noktası */
  content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 7px;
  background:
    radial-gradient(circle at calc(100% / 6) 50%, var(--color-brand) 3.5px, transparent 4px),
    radial-gradient(circle at 50% 50%, var(--color-brand) 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% * 5 / 6) 50%, var(--color-brand) 3.5px, transparent 4px);
}
.system__core-name { font-weight: var(--weight-semibold); font-size: 1.25rem; letter-spacing: -0.03em; }
.system__core-name span { color: #7FA6FF; }
.system__core-role { font-size: var(--text-xs); color: rgba(255,255,255,.62); justify-self: end; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.system__ticks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.16); font-size: var(--text-sm); color: rgba(255,255,255,.86); }
.system__ticks li { position: relative; padding-left: 12px; }
.system__ticks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 1px; background: rgba(255,255,255,.5); }
.system__caption { margin-top: 18px; font-size: var(--text-sm); color: var(--color-muted); }
.system__caption span { color: var(--color-text); font-weight: var(--weight-medium); }
@media (max-width: 559px) {
  .system__modules { grid-template-columns: 1fr; gap: 8px; }
  .module { min-height: 0; padding: 14px; }
  .module::after { display: none; }
  .system__core { margin-top: 12px; }
  .system__core::before { display: none; }
  .system__ticks { grid-template-columns: repeat(2, 1fr); row-gap: 6px; }
}

/* ---------- showcase (V3) ---------- */
.showcase__flow { display: grid; gap: var(--space-xs); padding-top: var(--space-sm); }
.flow--mini .flow__step { font-size: var(--text-sm); }
@media (min-width: 700px) {
  .flow--mini.flow--row .flow__step { gap: 10px; }
  .flow--mini.flow--row .flow__step::before { width: 20px; height: 20px; font-size: 10.5px; border-radius: 5px; }
  .flow--mini.flow--row .flow__step::after { top: 10px; left: 28px; }
}

/* ---------- gerçek ürün ekranı ---------- */
.screen { margin: 0; min-width: 0; }
.screen__frame { position: relative; overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-screen); }
.screen__frame img { display: block; width: 100%; height: auto; }
.screen__cap { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: var(--text-xs); color: var(--color-muted); }
.screen__id { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--weight-medium); color: var(--color-text); }
.screen__id::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.screen--dark .screen__frame { background: var(--color-brand-raised); border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 60px 120px -40px rgba(0, 0, 0, 0.5); }
.screen--dark .screen__cap { color: rgba(255, 255, 255, 0.58); }
.screen--dark .screen__id { color: #fff; }
.screen-slot { min-width: 0; }

/* ---------- ürün sahnesi: TulOku gerçek ekranları ---------- */
.showcase__item--featured { grid-template-columns: 1fr !important; gap: var(--space-xl); }
.showcase__item--featured > div:first-child { position: static !important; }
.showcase__head { display: grid; gap: var(--space-md); }
.showcase__aside { display: grid; gap: var(--space-md); align-content: end; }
.showcase__aside .showcase__desc { margin-top: 0; }
@media (min-width: 1000px) { .showcase__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: end; } }

.stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 64px) clamp(24px, 3vw, 48px);
  background: var(--color-brand); border-radius: var(--radius-lg); color: #fff;
}
.stage::before { /* çok soluk koordinat ızgarası — TulNova hero ile aynı dil */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 80%);
}
.stage__scene { position: relative; }
.stage__front { position: relative; z-index: 2; }
.stage__strip { margin-top: clamp(32px, 4vw, 56px); padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,.12); }
.stage__label { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: var(--space-sm); }
.stage__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-sm);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.stage__thumbs::-webkit-scrollbar { display: none; }
.stage__thumbs li { scroll-snap-align: start; min-width: 0; }
.screen--thumb .screen__frame { border-radius: 8px; box-shadow: 0 16px 32px -16px rgba(0,0,0,.6); }
@media (min-width: 760px) { .stage__thumbs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

@media (min-width: 1100px) {
  .stage__scene { padding: 8px 0 0; perspective: 2600px; perspective-origin: 20% 30%; }
  .stage__front { width: 94%; transform: rotateX(3deg) rotateY(-6deg); transform-origin: 0 50%; transition: transform var(--duration-slow) var(--ease); }
  .stage__scene:hover .stage__front { transform: rotateX(1.5deg) rotateY(-3deg); }
}

/* ---------- sahadan: problem → ürün ---------- */
.field-head { margin-bottom: var(--space-2xl); }
.field-rows { border-top: 1px solid var(--color-text); }
.field-row { display: grid; gap: var(--space-sm); padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border-strong); }
.field-row__area { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); display: flex; align-items: center; gap: 10px; }
.field-row__area::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.field-row__problem { margin: 0; font-size: var(--text-2xl); line-height: 1.22; letter-spacing: -0.025em; max-width: 26ch; }
.field-row__product { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; text-decoration: none; align-self: end; }
.field-row__arrow { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.field-row__arrow svg { width: 18px; height: 18px; transition: transform var(--duration) var(--ease); }
.field-row__product strong { font-weight: var(--weight-medium); font-size: var(--text-lg); letter-spacing: -0.015em; }
.field-row__product span:last-child { font-size: var(--text-sm); color: var(--color-text-soft); }
.field-row__product:hover .field-row__arrow { background: var(--accent-ink, var(--accent)); border-color: var(--accent-ink, var(--accent)); color: #fff; }
.field-row__product:hover .field-row__arrow svg { transform: translateX(2px); }
@media (min-width: 1000px) { .field-row { grid-template-columns: 140px 1fr 320px; gap: var(--space-xl); align-items: start; } }

/* ---------- ilkeler (ürün örnekli) ---------- */
.principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.principle { display: grid; gap: 6px; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); }
.principle__title { font-size: var(--text-xl); letter-spacing: -0.02em; }
.principle__text { color: var(--color-text-soft); }
.principle__example { margin-top: 8px; display: grid; gap: 4px; padding: 12px 14px; border-left: 2px solid var(--accent, var(--color-brand)); background: var(--color-surface-muted); font-size: var(--text-sm); color: var(--color-text-soft); }
.principle__where { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ---------- hedef kitle satırları ---------- */
.aud { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.aud-row { display: grid; gap: 8px; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.aud-row__who { font-size: var(--text-xl); letter-spacing: -0.02em; }
.aud-row__what { color: var(--color-text-soft); max-width: 52ch; }
.aud-row__with { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) { .aud-row { grid-template-columns: 220px 1fr auto; gap: var(--space-xl); align-items: center; } }

/* ---------- ürün hikâyesi bölümleri ---------- */
.chapter { padding-block: clamp(72px, 4rem + 4vw, 128px); border-top: 1px solid var(--color-border); }
.chapter--deep { background: var(--color-bg-deep); border-top-color: transparent; }
.chapter--surface { background: var(--color-surface); }
.chapter__grid { display: grid; gap: var(--space-md); }
.chapter__label { display: flex; align-items: baseline; gap: 12px; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.chapter__label span { font-variant-numeric: tabular-nums; color: var(--accent-ink, var(--color-brand)); font-weight: var(--weight-semibold); }
.chapter__body { display: grid; gap: var(--space-lg); min-width: 0; }
.chapter__body .h2 { max-width: 20ch; }
.chapter__cols { display: grid; gap: var(--space-md); }
@media (min-width: 900px) {
  .chapter__cols { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .chapter__cols--wide { grid-template-columns: 5fr 7fr; align-items: start; }
}
@media (min-width: 1100px) {
  .chapter__grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-2xl); }
  .chapter__label { position: sticky; top: calc(var(--header-h) + 60px); align-self: start; padding-top: 14px; }
}
.grid-list--3 { grid-template-columns: 1fr; }
@media (min-width: 800px) { .grid-list--3 { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-xl); } }

/* ---------- ölçüm modeli ---------- */
.model { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(18px, 2.6vw, 28px); }
.model__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: var(--space-md); }
.model__stages { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); font-size: var(--text-xs); color: var(--color-text-soft); }
.model__stages li { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.model__stages b { width: 20px; height: 20px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: var(--weight-medium); border: 1px solid var(--color-border-strong); border-radius: 5px; }
.model__svg { width: 100%; height: auto; overflow: visible; }
.svg-label { font-family: var(--font-sans); font-size: 11px; fill: var(--color-faint); letter-spacing: .02em; }
.svg-label--warn { fill: #9B3B2F; }
.model__legend { display: flex; gap: 20px; margin-top: 14px; font-size: var(--text-xs); color: var(--color-muted); }
.model__legend span { display: inline-flex; align-items: center; gap: 8px; }
.model__legend i { width: 16px; height: 2px; display: inline-block; }
.model__legend i.solid { background: var(--color-brand); }
.model__legend i.dash { background: repeating-linear-gradient(90deg, var(--color-faint) 0 3px, transparent 3px 6px); }
@media (prefers-reduced-motion: no-preference) {
  .js .model__speed { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.6s var(--ease); }
  .js .model.is-in .model__speed { stroke-dashoffset: 0; }
}
@media (max-width: 559px) { .model__stages { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- hızlı okuma: güven satırı + başlangıç kartı ---------- */
.trust { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; max-width: 520px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.trust svg { width: 16px; height: 16px; flex: none; color: var(--accent-ink, var(--accent)); }
.start-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--accent); border-radius: var(--radius-md); padding: clamp(22px, 3vw, 32px); display: grid; gap: var(--space-sm); box-shadow: var(--shadow-subtle); }
.start-card__title { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.start-card__text { color: var(--color-text-soft); }
.start-card__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.start-card__list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.start-card__list li span:first-child { font-weight: var(--weight-medium); }
.start-card__list li span:last-child { color: var(--color-muted); text-align: right; }
.start-card .btn-row { margin-top: var(--space-2xs); }
.cta__note { font-size: var(--text-sm); color: rgba(255,255,255,.6); max-width: 44ch; }
.cta--light .cta__note { color: var(--color-muted); }

/* adımlar */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-border-strong); }
.steps__item { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.steps__n { grid-row: span 2; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--accent-ink, var(--color-brand)); font-weight: var(--weight-semibold); padding-top: 3px; }
.steps__t { font-size: var(--text-lg); letter-spacing: -0.015em; }
.steps__d { color: var(--color-text-soft); font-size: var(--text-sm); max-width: 58ch; }
@media (min-width: 900px) { .steps { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.note-row { padding: var(--space-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text-soft); }
.note-row a { color: var(--color-brand); text-underline-offset: 3px; }

/* mobil küçük CTA (banner değil) */
.float-cta {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: var(--color-brand); color: var(--color-brand-ink); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
  box-shadow: 0 6px 20px rgba(18,20,22,.14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
}
.float-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .float-cta { display: none; } }

/* ---------- TulPanel: bir gün ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 86px; top: 12px; bottom: 12px; width: 1px; background: var(--color-border-strong); }
.timeline__item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 28px; padding: 16px 0; }
.timeline__item::before { content: ""; position: absolute; left: 82px; top: 23px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-surface); border: 1.5px solid var(--accent); }
.timeline__item--auto::before { background: var(--accent); }
.timeline__time { font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); text-align: right; padding-top: 1px; }
.timeline__item--auto .timeline__time { font-size: 11px; color: var(--color-faint); letter-spacing: var(--tracking-label); text-transform: uppercase; padding-top: 4px; font-weight: var(--weight-regular); }
.timeline__event { font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.015em; }
.timeline__note { font-size: var(--text-sm); color: var(--color-text-soft); }

/* ---------- TulTakip ---------- */
.example-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(22px, 3vw, 32px); display: grid; gap: var(--space-sm); }
.example-card__score { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--color-text); }
.example-card__text { color: var(--color-text-soft); }
.example-card__qs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.example-card__qs li { padding: 10px 0 10px 18px; border-bottom: 1px solid var(--color-border); position: relative; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.example-card__qs li::before { content: "?"; position: absolute; left: 0; color: var(--accent-ink, var(--accent)); font-weight: var(--weight-semibold); }

.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.chain__node { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 2px 14px; padding: 14px 0; }
.chain__node::before { content: ""; position: absolute; left: 15.5px; top: 44px; bottom: -14px; width: 1px; background: var(--color-border-strong); }
.chain__node:last-child::before { display: none; }
.chain__n { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.chain__node:last-child .chain__n { background: var(--accent-ink, var(--accent)); border-color: var(--accent-ink, var(--accent)); color: #fff; }
.chain__node strong { font-weight: var(--weight-medium); font-size: var(--text-lg); letter-spacing: -0.015em; }
.chain__q { font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 900px) {
  .chain { grid-template-columns: repeat(7, 1fr); }
  .chain__node { grid-template-columns: 1fr; gap: 10px; padding: 0 12px 0 0; }
  .chain__n { grid-row: auto; }
  .chain__node::before { left: 40px; right: 8px; top: 16px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- form hataları ---------- */
.field__error { font-size: var(--text-xs); color: var(--color-danger); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.form__context { font-size: var(--text-sm); padding: 10px 14px; background: var(--color-brand-soft); border-radius: var(--radius-sm); color: var(--color-brand); }

/* ---------- motion: tek orkestra — hero giriş + imza ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- utilities ---------- */
.mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-sm > * + * { margin-top: var(--space-sm); }

/* rehber grupları */
.guide-group { padding-top: var(--space-xl); }
.guide-group + .guide-group { margin-top: var(--space-2xl); }
.guide-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--space-md); }

.only-narrow { margin-top: var(--space-2xs); }
@media (min-width: 1000px) { .only-narrow { display: none; } }
@media (max-width: 559px) { .svg-label { font-size: 19px; } }

/* hızlı okuma: gerçek ekranlar */
.landing-progress { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border-strong); display: grid; gap: var(--space-lg); }
@media (max-width: 599px) {
  .stage { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding: 24px var(--gutter) 24px; }
}

/* ---------- TulPanel ürün sahnesi: açık zemin, düz ekranlar, kontrollü bindirme ---------- */
.stage--light { background: linear-gradient(180deg, #F3F8F6 0%, #EDF4F1 100%); color: var(--color-text); border: 1px solid #DCE9E3; }
.stage--light::before { background-image: linear-gradient(to right, rgba(4,120,87,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(4,120,87,.05) 1px, transparent 1px); }
.stage-l { position: relative; display: grid; gap: var(--space-lg); }
.screen--support .screen__frame { border-color: #CFE3DA; }
.stage__privacy { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 1100px) {
  .stage-l { display: block; padding-bottom: 15%; }
  .stage-l__main { width: 82%; }
  .stage-l__support { position: absolute; right: 0; bottom: 0; width: 44%; }
  .stage-l__support .screen__frame { box-shadow: 0 2px 4px rgba(10,23,48,.06), 0 24px 56px -14px rgba(10,23,48,.34); }
}
@media (max-width: 599px) {
  .stage--light { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; padding: 24px var(--gutter); }
}
.product-hero__screen { margin-top: clamp(40px, 6vw, 72px); }