/* Patron Mobile — inner pages, nav dropdown, product shell (theme-aware) */

/* --- Page hero (inner) --- */
.page-hero {
  padding-block: var(--space-20) var(--space-12);
  background: radial-gradient(120% 80% at 50% 0%, var(--color-accent-violet-muted) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border-bottom: 1px solid var(--color-border);
}

.page-hero .container {
  max-width: var(--container-max);
}

.page-hero__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-tertiary);
  margin-bottom: var(--space-3);
}

.page-hero__title {
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  max-width: 22ch;
}

.page-hero__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 40rem;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* —— Modüller (ürün ailesi) —— */
.page-hero--modules {
  padding-block: var(--space-24) var(--space-16);
  background:
    radial-gradient(100% 90% at 50% -10%, rgba(99, 102, 241, 0.14) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 20%, rgba(79, 70, 229, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
}

.page-hero__title--wide {
  max-width: 36rem;
}

.page-hero__lead--wide {
  max-width: 44rem;
}

.mod-hero-trust {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.chip--link {
  text-decoration: none;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.chip--link:hover,
.chip--link:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-border-accent);
  background: var(--color-accent-violet-muted);
}

.mod-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.section--surface {
  background: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

.mod-cat .section__title {
  margin-bottom: var(--space-3);
}

.module-family-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .module-family-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .module-family-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
  .module-family-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .module-family-grid:not(.module-family-grid--two):not(.module-family-grid--three) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.module-family-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--color-bg-elevated) 0%, var(--color-bg-card) 100%);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.module-family-card:hover,
.module-family-card:focus-within {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-3px);
}

.module-family-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  color: var(--color-accent-secondary);
}

.module-family-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.module-family-card__problem {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

.module-family-card__tags {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.module-family-card__tags .tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-violet-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.module-family-card__cta {
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-tertiary);
  text-decoration: none;
  margin-top: auto;
}

.module-family-card__cta:hover,
.module-family-card__cta:focus-visible {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mod-fit-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .mod-fit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 75rem) {
  .mod-fit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mod-fit-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.mod-fit-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.mod-fit-card__pick {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--lh-relaxed);
}

.mod-fit-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mod-fit-card__links a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent-tertiary);
  text-decoration: none;
}

.mod-fit-card__links a:hover,
.mod-fit-card__links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text-primary);
}

.mod-flow-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.mod-flow {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mod-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: min-content;
}

.mod-flow__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  white-space: nowrap;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.mod-flow__list a:hover,
.mod-flow__list a:focus-visible {
  border-color: var(--color-border-accent);
  background: var(--color-accent-violet-muted);
}

.mod-flow__sep {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  user-select: none;
}

.mod-closing {
  text-align: center;
}

.mod-closing .section__title,
.mod-closing .section__lead {
  margin-inline: auto;
}

.mod-closing .section__lead {
  max-width: 40rem;
}

.mod-closing .page-hero__actions {
  justify-content: center;
}

/* Nav dropdown: scroll + group labels */
.nav-dropdown__panel--scroll {
  max-height: min(75vh, 28rem);
}

.nav-dropdown__group-label {
  display: block;
  padding: var(--space-2) var(--space-3) 0;
  font-size: 0.65rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Product page: extended blocks */
.subcap-block {
  margin-top: var(--space-10);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.subcap-block h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.subcap-block > p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.subcap-block ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.subcap-block li + li {
  margin-top: var(--space-2);
}

.how-steps {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  counter-reset: howstep;
}

@media (min-width: 48rem) {
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.how-steps li {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-12);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  counter-increment: howstep;
}

.how-steps li::before {
  content: counter(howstep);
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  background: var(--color-accent-violet-muted);
  color: var(--color-accent-tertiary);
}

.fit-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .fit-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fit-list li {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.related-modules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.related-modules a,
.related-modules .chip--link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.related-modules a:hover,
.related-modules a:focus-visible,
.related-modules .chip--link:hover,
.related-modules .chip--link:focus-visible {
  border-color: var(--color-border-accent);
  background: var(--color-accent-violet-muted);
}

.cross-links--tight {
  margin-top: var(--space-6);
  gap: var(--space-3);
}

/* --- Nav dropdown (desktop) --- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  min-height: 2.25rem;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.nav-dropdown__trigger:hover,
.nav-dropdown__trigger:focus-visible,
.nav-dropdown.is-open .nav-dropdown__trigger,
.nav-dropdown__trigger.is-active {
  color: var(--color-text-primary);
  background: var(--nav-hover-bg);
}

.nav-dropdown__trigger::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: var(--space-1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav-dropdown.is-open .nav-dropdown__trigger::after {
  transform: rotate(225deg) translateY(-1px);
}

.nav-dropdown__panel--mega {
  min-width: min(36rem, 92vw);
  max-height: min(78vh, 32rem);
}

.nav-dropdown__group-label {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 0.65rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.nav-dropdown__group-label:first-child {
  margin-top: 0;
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 14rem;
  max-height: min(70vh, 24rem);
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--nav-dropdown-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: calc(var(--z-header) + 2);
}

.nav-dropdown__panel[hidden] {
  display: none !important;
}

.nav-dropdown__panel a {
  display: block;
  padding: var(--space-3) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible,
.nav-dropdown__panel a.is-active {
  color: var(--color-text-primary);
  background: var(--color-accent-violet-muted);
}

.nav-dropdown__panel a.is-active {
  box-shadow: inset 0 0 0 1px var(--color-accent-violet-muted);
}

.nav-dropdown__sep {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--color-border);
}

/* --- Product / content layout --- */
.content-block {
  max-width: 48rem;
}

.content-block p + p {
  margin-top: var(--space-4);
}

.benefit-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.benefit-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.benefit-card:hover {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-2px);
}

.benefit-card h3 {
  font-size: var(--fs-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.benefit-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.section--violet-edge {
  border-top: 1px solid var(--color-border);
  background: var(--gradient-violet-edge);
}

/* Module card CTA row */
.module-card__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.module-card__actions a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-tertiary);
  text-decoration: none;
}

.module-card__actions a:hover,
.module-card__actions a:focus-visible {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.module-card__actions--split {
  justify-content: flex-start;
  gap: var(--space-4);
}

.hero__chips--links {
  flex-wrap: wrap;
}

.hero__chips--links .chip {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.hero__chips--links .chip:hover,
.hero__chips--links .chip:focus-visible {
  border-color: var(--color-border-accent);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════
   DEMO PAGE — Hero, sidebar, form, trust
   ═══════════════════════════════════════════════════ */

/* --- Hero modifier --- */
.page-hero--demo {
  padding-block: var(--space-24) var(--space-16);
}

.page-hero--demo .page-hero__title {
  max-width: 24ch;
}

.page-hero__lead--sub {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.page-hero__trust {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent-secondary);
  letter-spacing: 0.02em;
}

.page-hero__link {
  margin-top: var(--space-4);
}

.page-hero__link a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.page-hero__link a:hover,
.page-hero__link a:focus-visible {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Demo sidebar --- */
.demo-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.demo-sidebar__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
}

.demo-sidebar__card {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.demo-sidebar__card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.demo-sidebar__card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.demo-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.demo-sidebar__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.demo-sidebar__list li svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  color: var(--color-accent-secondary);
}

/* Tag-style audience list */
.demo-sidebar__list--tags {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo-sidebar__list--tags li {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Process steps */
.demo-sidebar__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-sidebar__steps li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.demo-sidebar__step-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Direct contact block */
.demo-sidebar__contact {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.demo-sidebar__contact p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-loose);
}

.demo-sidebar__contact a {
  color: var(--color-accent-tertiary);
  text-decoration: none;
}

.demo-sidebar__contact a:hover,
.demo-sidebar__contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Form wrapper enhancements --- */
.demo-form-wrap__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.demo-form-wrap__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Fieldset groups */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.form-fieldset legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* Required asterisk */
.form-required {
  color: var(--color-accent-primary);
  font-weight: var(--fw-bold);
}

/* Two-column row inside form (stacks on small screens) */
.form-row--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 30rem) {
  .form-row--2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Select styling */
.form-group select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--input-bg);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
  padding-right: var(--space-10);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.form-group select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-group.has-error select {
  border-color: var(--color-error);
}

[data-theme="dark"] .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Form hint text */
.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Chip checkboxes */
.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form-chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.form-chip:hover {
  border-color: var(--color-border-accent);
  color: var(--color-text-primary);
}

.form-chip:has(input:focus-visible) {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.form-chip:has(input:checked) {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* Trust strip — text values */
.trust-stat__value--text {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
}

/* Demo form global error */
.form-banner-error {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--form-error-text);
  font-size: var(--fs-sm);
}

.form-banner-error.is-visible {
  display: block;
  animation: field-error-in var(--duration-base) var(--ease-out);
}

.form-success.is-error-state {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--form-error-text);
}

/* CTA strip (home → demo) */
.cta-strip {
  padding-block: var(--space-16);
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border-top: 1px solid var(--color-border);
}

.cta-strip h2 {
  font-size: var(--fs-3xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.cta-strip p {
  color: var(--color-text-secondary);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.cta-strip--motion {
  position: relative;
  overflow: hidden;
}

.cta-strip--motion::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background:
    var(--gradient-cta-rich),
    radial-gradient(ellipse at 30% 20%, var(--color-accent-glow), transparent 55%),
    radial-gradient(ellipse at 70% 80%, var(--color-accent-violet-muted), transparent 50%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

.cta-strip__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

.cta-strip__decor svg {
  position: absolute;
  width: min(28rem, 90vw);
  height: auto;
  right: -5%;
  bottom: -15%;
  color: var(--color-accent-primary);
}

.cta-strip--motion .container {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-strip--motion::before {
    animation: cta-strip-drift 18s ease-in-out infinite alternate;
  }
}

@keyframes cta-strip-drift {
  from {
    transform: translate3d(-2%, 0, 0) scale(1);
    opacity: 0.4;
  }
  to {
    transform: translate3d(2%, 1%, 0) scale(1.05);
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-strip--motion::before {
    animation: none;
    transform: none;
    opacity: 0.25;
  }

  .refs-quote-card:hover,
  .refs-sector-card:hover,
  .refs-role-card:hover,
  .refs-outcome-card:hover,
  .refs-case-card:hover,
  .neden-reason:hover,
  .neden-split__col:hover,
  .plans-logic-card:hover,
  .plans-fit-card:hover,
  .module-family-card:hover,
  .benefit-card:hover,
  .about-qual-card:hover {
    transform: none;
  }
}

/* Ana sayfa — yardımcı not */
.section__note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 48rem;
}

.section__lead--btnrow {
  margin-top: calc(-1 * var(--space-2));
}

/* Pricing — contact-first */
.pricing-card__note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.pricing-card__price--soft {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════
   HAKKIMIZDA — About page premium layout
   ═══════════════════════════════════════════════════ */

/* --- Hero (about variant) --- */
.page-hero--about {
  padding-block: var(--space-24) var(--space-16);
}

.page-hero--about__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.page-hero--about__visual {
  display: none;
}

@media (min-width: 64rem) {
  .page-hero--about__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .page-hero--about__visual {
    display: block;
  }
}

.device-desktop--about {
  max-width: 100%;
}

.page-hero--about .hero__chips {
  margin-top: var(--space-6);
}

/* --- Section background alternation --- */
.about-section--alt {
  background: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

/* --- Prose block (Biz kimiz) --- */
.about-prose {
  max-width: 52rem;
  position: relative;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-accent-primary);
}

.about-prose p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.about-prose p + p {
  margin-top: var(--space-5);
}

.about-prose a {
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-prose a:hover,
.about-prose a:focus-visible {
  color: var(--color-accent-tertiary);
}

/* --- VMY grid (3 cols on desktop) --- */
.about-vmy-grid {
  margin-top: var(--space-2);
}

/* --- Why grid (about variant) --- */
.about-why-grid {
  margin-top: var(--space-4);
}

/* --- Belief grid (2x3) --- */
.about-belief-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

@media (min-width: 37.5rem) {
  .about-belief-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .about-belief-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Discipline grid (4 cols) --- */
.about-discipline-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

@media (min-width: 37.5rem) {
  .about-discipline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .about-discipline-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Trust grid (2x3) --- */
.about-trust-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

@media (min-width: 37.5rem) {
  .about-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .about-trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Qualitative strip (section 8) --- */
.about-qual-strip {
  padding-block: var(--space-12);
  background: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

.about-qual-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 37.5rem) {
  .about-qual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .about-qual-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-qual-card {
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.about-qual-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.about-qual-card__value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.about-qual-card__label {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- CTA strip (about variant) --- */
.cta-strip--about {
  padding-block: var(--space-20);
  background:
    radial-gradient(80% 60% at 50% 100%, var(--color-accent-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: none;
}

.cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* --- Closing rhythm (before footer) --- */
.about-closing {
  padding-block: var(--space-12);
  text-align: center;
}

.about-closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.about-closing__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════
   REFERANSLAR — References page premium layout
   ═══════════════════════════════════════════════════ */

.page-hero--refs {
  padding-block: var(--space-24) var(--space-16);
}

/* --- Hero trust badges --- */
.refs-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.refs-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-accent-tertiary);
  background: var(--chip-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* --- Section alternation --- */
.refs-section--alt {
  background: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

/* --- Transparency band --- */
.refs-transparency-section {
  background: var(--trust-strip-bg);
  border-bottom: 1px solid var(--color-border);
}

.refs-transparency {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  max-width: 52rem;
}

.refs-transparency__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent-glow);
  color: var(--color-accent-tertiary);
}

.refs-transparency__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.refs-transparency__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* --- Quote grid (refs-specific, avoids global testimonial-grid last-child) --- */
.refs-quote-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.refs-quote-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.refs-quote-card:hover {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-3px);
}

.refs-quote-card--featured {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
  background: var(--pricing-featured-bg);
}

.refs-quote-card--featured:hover {
  box-shadow: var(--shadow-glow-lg);
}

.refs-quote-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-accent-tertiary);
  background: var(--color-accent-glow);
  border-radius: var(--radius-pill);
}

.refs-quote-card blockquote {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.refs-quote-card footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: auto;
}

.refs-quote-card__author {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.refs-quote-card__author strong {
  color: var(--color-text-primary);
}

.refs-quote-card__scale {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

/* --- Sector grid --- */
.refs-sector-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.refs-sector-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.refs-sector-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.refs-sector-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-glow);
  color: var(--color-accent-tertiary);
  margin-bottom: var(--space-4);
}

.refs-sector-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.refs-sector-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}

.refs-sector-card__modules {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-accent-tertiary);
  letter-spacing: 0.02em;
}

/* --- Role grid --- */
.refs-role-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.refs-role-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.refs-role-card:hover {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-2px);
}

.refs-role-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-violet-muted);
  color: var(--color-accent-tertiary);
}

.refs-role-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.refs-role-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Outcome grid --- */
.refs-outcome-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.refs-outcome-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.refs-outcome-card:hover {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-2px);
}

.refs-outcome-card__icon {
  flex-shrink: 0;
  color: var(--color-success);
  margin-top: 2px;
}

.refs-outcome-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.refs-outcome-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Case study grid --- */
.refs-case-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.refs-case-card {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.refs-case-card__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent-primary);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

.refs-case-card h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  line-height: var(--lh-snug);
}

.refs-case-card__details {
  display: grid;
  gap: var(--space-1);
}

.refs-case-card__details dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-tertiary);
  margin-top: var(--space-4);
}

.refs-case-card__details dt:first-of-type {
  margin-top: 0;
}

.refs-case-card__details dd {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Trust grid --- */
.refs-trust-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.refs-trust-item {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.refs-trust-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.refs-trust-item__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* --- Operations decision --- */
.refs-ops {
  max-width: 52rem;
  display: grid;
  gap: var(--space-8);
}

.refs-ops__content .section__eyebrow {
  margin-bottom: var(--space-3);
}

.refs-ops__content .section__title {
  margin-bottom: var(--space-4);
}

.refs-ops__content p:not(.section__eyebrow):not(.section__title) {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.refs-ops__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.refs-ops__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.refs-ops__list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent-primary);
}

/* --- Final CTA band --- */
.refs-cta-band {
  padding-block: var(--space-20);
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 100%, var(--color-accent-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  border-top: 1px solid var(--color-border);
}

.refs-cta-band__title {
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}

.refs-cta-band__desc {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: var(--lh-relaxed);
}

.refs-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   PLANLAR — Plans page premium layout
   ═══════════════════════════════════════════════════ */

.page-hero--plans {
  padding-block: var(--space-24) var(--space-16);
}

.page-hero--plans .page-hero__title {
  max-width: 26ch;
}

.page-hero--plans .hero__chips {
  margin-top: var(--space-8);
}

.plans-section--alt {
  background: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

/* --- Logic grid (section 2) --- */
.plans-logic-grid {
  display: grid;
  gap: var(--space-5);
}

.plans-logic-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.plans-logic-card:hover {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-3px);
}

.plans-logic-card__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-4);
  color: var(--color-accent-secondary);
}

.plans-logic-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.plans-logic-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* --- Enhanced pricing cards (section 3) --- */
.plans-page .pricing-card {
  gap: var(--space-4);
}

.pricing-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pricing-card__tagline {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-secondary);
}

.pricing-card__target {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.pricing-card__scenario {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* --- Comparison table (section 4) --- */
.plans-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
}

.plans-compare table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}

.plans-compare thead th {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.plans-compare thead th:first-child {
  text-align: left;
}

.plans-compare thead th:nth-child(3) {
  color: var(--color-accent-secondary);
}

.plans-compare tbody th {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
  color: var(--color-text-primary);
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--color-bg-card);
  z-index: 1;
}

.plans-compare tbody td {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--color-text-secondary);
  border-left: 1px solid var(--color-border);
}

.plans-compare tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.plans-compare tbody tr:last-child {
  border-bottom: none;
}

.plans-compare tbody tr:hover {
  background: var(--faq-bg);
}

.plans-compare__check {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success);
  vertical-align: middle;
}

.plans-compare__dash {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-muted);
  vertical-align: middle;
}

/* --- Business fit grid (section 5) --- */
.plans-fit-grid {
  display: grid;
  gap: var(--space-6);
}

.plans-fit-card {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.plans-fit-card:hover {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-3px);
}

.plans-fit-card--featured {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.plans-fit-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-accent-secondary);
}

.plans-fit-card__icon svg {
  width: 100%;
  height: 100%;
}

.plans-fit-card h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.plans-fit-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  flex: 1;
}

.plans-fit-card__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-tertiary);
  text-decoration: none;
}

.plans-fit-card__link:hover,
.plans-fit-card__link:focus-visible {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Quote pricing (section 6) --- */
.plans-quote-grid {
  display: grid;
  gap: var(--space-10);
}

.plans-quote-text p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 52rem;
}

.plans-quote-factors h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.plans-quote-factors ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plans-quote-factors li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.plans-quote-factors li svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-success);
  margin-top: 0.125rem;
}

/* --- Operations banner (section 7) --- */
.plans-ops-banner {
  padding: var(--space-10);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-strong);
  background: var(--pricing-banner-bg);
  display: grid;
  gap: var(--space-8);
}

.plans-ops-banner__content .section__eyebrow {
  margin-bottom: var(--space-3);
}

.plans-ops-banner__content h2 {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
}

.plans-ops-banner__content p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 52rem;
}

.plans-ops-banner__items {
  display: grid;
  gap: var(--space-4);
}

.plans-ops-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.plans-ops-item svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent-secondary);
}

/* --- Trust strip (section 8) --- */
.plans-trust-strip {
  padding-block: var(--space-16);
  border-block: 1px solid var(--color-border);
  background: var(--trust-strip-bg);
}

.plans-trust-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.plans-trust-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.plans-trust-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.plans-trust-card svg {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-4);
  color: var(--color-accent-secondary);
}

.plans-trust-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.plans-trust-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* --- Closing CTA (section 10) --- */
.plans-closing {
  padding-block: var(--space-20);
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 100%, var(--color-accent-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  border-top: 1px solid var(--color-border);
}

.plans-closing__title {
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  max-width: 28ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.plans-closing__lead {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.plans-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   NEDEN PATRON — Decision page
   ═══════════════════════════════════════════════════ */

/* --- Hero (decision variant) --- */
.page-hero--decision {
  padding-block: var(--space-24) var(--space-16);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--color-accent-violet-muted) 0%, transparent 55%),
    radial-gradient(80% 60% at 80% 20%, var(--color-accent-glow) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border-bottom: 1px solid var(--color-border);
}

.page-hero--decision .page-hero__lead--wide {
  max-width: 52rem;
}

.page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* --- Section alternating background --- */
.section--alt-bg {
  background: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

/* --- Reasons grid (8 cards, 2x4 → 3 cols desktop) --- */
.neden-reasons {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.neden-reason {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  transition:
    border var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.neden-reason:hover,
.neden-reason:focus-within {
  border: var(--border-card-hover);
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-2px);
}

.neden-reason__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-violet-muted);
  color: var(--color-accent-secondary);
}

.neden-reason__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.neden-reason h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.neden-reason p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Split section (problem vs solution) --- */
.neden-split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.neden-split__col {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: var(--border-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.neden-split__col:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.neden-split__col--problem {
  background: var(--color-bg-card);
}

.neden-split__col--solution {
  background: var(--color-bg-card);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.neden-split__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.neden-split__badge--problem {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}

.neden-split__badge--solution {
  background: var(--color-success-muted);
  border: 1px solid var(--chip-success-border);
  color: var(--color-success-text);
}

.neden-split__col h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.neden-split__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.neden-split__col li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.neden-split__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.neden-split__col--problem li::before {
  background: var(--color-error);
  opacity: 0.5;
}

.neden-split__col--solution li::before {
  background: var(--color-success);
  opacity: 0.7;
}

/* --- Architecture grid (4 cards) --- */
.neden-arch {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.neden-arch__item {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.neden-arch__icon {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-4);
  color: var(--color-accent-secondary);
}

.neden-arch__item h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.neden-arch__item p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Ops row (7 items, horizontal wrap) --- */
.neden-ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-10);
}

.neden-ops__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.neden-ops__item:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card-hover);
}

.neden-ops__item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-accent-secondary);
}

.neden-ops__item span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.neden-ops__cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* --- ICP grid (6 items) --- */
.neden-icp {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.neden-icp__item {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.neden-icp__item:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card-hover);
}

.neden-icp__item h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.neden-icp__item p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Craft section (icon + text rows) --- */
.neden-craft {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.neden-craft__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.neden-craft__item svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent-secondary);
  margin-top: 0.125rem;
}

.neden-craft__item h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.neden-craft__item p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Compare rows (old vs new) --- */
.neden-compare {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.neden-compare__row {
  display: grid;
  gap: var(--space-4);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.neden-compare__old,
.neden-compare__new {
  padding: var(--space-5) var(--space-6);
}

.neden-compare__old {
  background: var(--faq-bg);
}

.neden-compare__new {
  background: var(--color-bg-card);
}

.neden-compare__label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.neden-compare__label--old {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}

.neden-compare__label--new {
  background: var(--color-success-muted);
  border: 1px solid var(--chip-success-border);
  color: var(--color-success-text);
}

.neden-compare__old p,
.neden-compare__new p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.neden-compare__new p {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

/* --- Trust band --- */
.neden-trust-band {
  padding-block: var(--space-12);
  background: var(--trust-strip-bg);
  border-block: 1px solid var(--color-border);
}

.neden-trust-band__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
}

.neden-trust-band__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.neden-trust-band__item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-accent-secondary);
}

.neden-trust-band__item strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* --- Final CTA --- */
.neden-final-cta {
  padding-block: var(--space-20);
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 100%, var(--color-accent-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  border-top: 1px solid var(--color-border);
}

.neden-final-cta__title {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.neden-final-cta__lead {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: var(--lh-relaxed);
}

.neden-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   Visual upgrade — ürün sayfası zengin şablon + ürünler hub
   ═══════════════════════════════════════════════════════════ */

.page-hero--split {
  padding-block: var(--space-16) var(--space-12);
}

.page-hero--split .container {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 64rem) {
  .page-hero--split .container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-12);
  }
}

.page-hero__copy {
  max-width: 40rem;
}

.page-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 12rem;
}

.page-hero__visual-glow {
  position: absolute;
  inset: 10% 5% auto 5%;
  height: 70%;
  border-radius: var(--radius-3xl);
  background: radial-gradient(ellipse at 50% 30%, var(--color-accent-glow), transparent 70%);
  pointer-events: none;
}

.page-hero--urunler .page-hero__visual {
  min-height: 14rem;
}

.product-device-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.product-device-wrap--phone {
  max-width: 11rem;
}

.benefit-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  color: var(--color-accent-secondary);
}

.benefit-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.benefit-scene {
  margin-top: var(--space-10);
  text-align: center;
}

.benefit-scene img {
  max-width: min(100%, 44rem);
  height: auto;
  border-radius: var(--radius-xl);
  object-fit: contain;
}

.about-editorial-visual {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.about-editorial-visual img {
  max-width: min(100%, 48rem);
  height: auto;
  border-radius: var(--radius-xl);
  object-fit: contain;
}

.about-editorial-visual--centered {
  text-align: center;
}

.value-card__illust {
  width: 5rem;
  height: 5rem;
  margin-bottom: var(--space-4);
  object-fit: contain;
}

.section-visual {
  margin-top: var(--space-8);
  text-align: center;
}

.section-visual img {
  max-width: min(100%, 48rem);
  height: auto;
  border-radius: var(--radius-xl);
  object-fit: contain;
}

.section-visual--compact img {
  max-width: min(100%, 36rem);
}

.section-visual__device-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.section-visual__device-row .device-desktop--card {
  max-width: 16rem;
}

.section-visual__device-row .device-phone--thumb {
  max-width: 5.5rem;
}

@media (max-width: 47.99rem) {
  .section-visual__device-row {
    gap: var(--space-4);
  }
  .section-visual__device-row .device-desktop--card {
    max-width: 12rem;
  }
  .section-visual__device-row .device-phone--thumb {
    max-width: 4.5rem;
  }
}

.demo-sidebar__visual {
  margin-bottom: var(--space-6);
  text-align: center;
}

.demo-sidebar__visual img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  object-fit: contain;
}

.demo-sidebar__visual--svg {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--visual-mesh-a), var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.demo-sidebar__visual--svg svg {
  width: 100%;
  max-width: 14rem;
  height: auto;
  color: var(--color-accent-secondary);
}

.product-spec-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .product-spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .product-spec-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-spec-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.product-spec-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.product-spec-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  color: var(--color-accent-secondary);
}

.product-spec-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.product-spec-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.product-spec-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.product-flow {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .product-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.product-flow__step {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  text-align: center;
}

.product-flow__step::after {
  content: "";
  display: none;
}

@media (min-width: 48rem) {
  .product-flow__step:not(:last-child)::after {
    display: block;
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-2));
    width: var(--space-4);
    height: 2px;
    background: linear-gradient(90deg, var(--color-border-accent), transparent);
    transform: translateY(-50%);
    z-index: 0;
  }
}

.product-flow__num {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  color: #fff;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent-primary), var(--brand-violet));
}

.product-flow__step h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.product-flow__step p {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.product-screen-block {
  margin-top: var(--space-4);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: var(--visual-mesh-a), var(--color-bg-secondary);
}

.product-screen-block__inner {
  max-width: 36rem;
  margin-inline: auto;
}

.semantic-screen {
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  background: var(--semantic-screen-bg);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.semantic-screen svg {
  display: block;
  width: 100%;
  height: 100%;
}

.related-modules {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

@media (min-width: 37.5rem) {
  .related-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .related-modules {
    grid-template-columns: repeat(4, 1fr);
  }
}

.related-module-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.related-module-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.related-module-card__thumb {
  border-radius: var(--radius-md);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  color: var(--color-accent-secondary);
}

.related-module-card__thumb svg {
  width: 2rem;
  height: 2rem;
}

.related-module-card strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.related-module-card span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.product-cta-band {
  margin-top: var(--space-12);
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--gradient-cta-rich), var(--color-bg-secondary);
}

.product-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--visual-mesh-b);
  opacity: 0.8;
  pointer-events: none;
}

.product-cta-band > * {
  position: relative;
  z-index: 1;
}

.product-cta-band h2 {
  font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.product-cta-band p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--lh-relaxed);
}

.product-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Ürünler hub */
.urunler-trust {
  padding-block: var(--space-10);
  background: var(--trust-strip-bg);
  border-block: 1px solid var(--color-border);
}

.urunler-trust__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .urunler-trust__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.urunler-trust__item {
  text-align: center;
}

.urunler-trust__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  color: var(--color-accent-secondary);
}

.urunler-trust__item strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.urunler-trust__item span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.ecosystem-block {
  margin-top: var(--space-12);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
}

.ecosystem-block__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-align: center;
}

.ecosystem-block__lead {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: var(--lh-relaxed);
}

.ecosystem-diagram {
  max-width: 48rem;
  margin-inline: auto;
}

.urunler-hero-devices {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}

.urunler-hero-devices .device-desktop--product {
  max-width: min(22rem, 72vw);
}

.urunler-hero-devices .device-phone--product {
  width: min(9.5rem, 34vw);
}

.ecosystem-legend {
  justify-content: center;
  margin-top: var(--space-6);
}

.product-fit-list {
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
}

.product-fit-list li {
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.product-fit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236366f1' stroke-width='2'%3E%3Cpath d='M4 8l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.module-card--rich .module-card__thumb {
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  min-height: 5rem;
  display: grid;
  place-items: center;
  background: var(--visual-mesh-a), var(--color-bg-secondary);
  color: var(--color-accent-secondary);
}

.module-card--rich .module-card__thumb svg {
  width: 2.25rem;
  height: 2.25rem;
}

/* Demo / plan / referans yardımcıları */
.pill-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pill-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  background: var(--visual-icon-surface);
  border: 1px solid var(--color-border);
}

.pill-icon svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent-secondary);
}

.glass-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-card));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}

.metric-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
}

.metric-pill__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-accent-primary);
  font-variant-numeric: tabular-nums;
}

.metric-pill__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  max-width: 10rem;
  line-height: var(--lh-snug);
}

/* --- Planlar: productized pricing (v2) --- */
.pricing-v2__billing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.pricing-v2__billing-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.pricing-v2__toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  gap: 2px;
}

.pricing-v2__toggle-btn {
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.pricing-v2__toggle-btn:hover,
.pricing-v2__toggle-btn:focus-visible {
  color: var(--color-text-primary);
  outline: none;
}

.pricing-v2__toggle-btn.is-active {
  background: var(--color-bg-card);
  color: var(--color-accent-tertiary);
  box-shadow: var(--shadow-sm);
}

.pricing-v2__billing-hint {
  font-size: var(--fs-sm);
  color: var(--color-success-text);
  margin: 0;
  flex-basis: 100%;
}

.pricing-v2__billing-hint[hidden] {
  display: none !important;
}

.pricing-v2__muted {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}

.pricing-v2__bundle {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
  line-height: var(--lh-relaxed);
}

.pricing-grid--v2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pricing-grid--v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .pricing-grid--v2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1400px) {
  .pricing-grid--v2 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.pricing-v2__acc {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.pricing-v2__acc-item.is-open .pricing-v2__acc-trigger {
  color: var(--color-accent-tertiary);
}

.pricing-v2__acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: start;
}

.pricing-v2__acc-trigger::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.pricing-v2__acc-item.is-open .pricing-v2__acc-trigger::after {
  transform: rotate(-135deg);
}

.pricing-v2__acc-panel {
  padding-top: var(--space-2);
}

.pricing-v2__acc-panel[hidden] {
  display: none !important;
}

.pricing-v2__detail-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.pricing-v2__upgrade-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pricing-v2__upgrade-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .pricing-v2__upgrade-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pricing-v2__upgrade-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.pricing-v2__upgrade-card h3 {
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
}

.pricing-v2__upgrade-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--lh-relaxed);
}

.js-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.pricing-matrix {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.pricing-matrix caption {
  padding: var(--space-3);
}

.pricing-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg-secondary);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.pricing-matrix thead th:first-child {
  position: sticky;
  left: 0;
  text-align: start;
  z-index: 3;
  min-width: 12rem;
}

.pricing-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-bg-card);
  text-align: start;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  max-width: 16rem;
}

.pricing-matrix tbody td {
  padding: var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.pricing-matrix tbody tr:hover td:not(:first-child) {
  background: var(--faq-bg);
}

.pricing-matrix__yes {
  color: var(--color-success);
  font-weight: var(--fw-bold);
}

.pricing-matrix__no {
  color: var(--color-text-muted);
}

.pricing-matrix__opt {
  font-size: 0.65rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-secondary);
}

.pricing-v2__calc {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 960px) {
  .pricing-v2__calc {
    grid-template-columns: 1fr minmax(16rem, 22rem);
  }
}

.pricing-v2__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.pricing-v2__fieldset legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

.pricing-v2__branch-input {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pricing-v2__branch-input input {
  width: 5rem;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-base);
  text-align: center;
}

.pricing-v2__branch-input input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.pricing-v2__branch-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pricing-v2__pkg-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pricing-v2__pkg-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  cursor: pointer;
  background: var(--color-bg-card);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.pricing-v2__pkg-label:has(input:checked) {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.pricing-v2__pkg-label input {
  accent-color: var(--color-accent-tertiary);
}

.pricing-v2__modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pricing-calc__cat-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.pricing-calc__row {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  margin-bottom: var(--space-3);
}

.pricing-calc__row.is-included {
  opacity: 0.72;
  border-style: dashed;
}

.pricing-calc__row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pricing-calc__row-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.pricing-calc__row-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.pricing-calc__row.is-included .pricing-calc__row-badge {
  background: var(--color-success-muted);
  color: var(--color-success-text);
}

.pricing-calc__row.is-addon .pricing-calc__row-badge {
  background: var(--chip-info-bg, rgba(59, 130, 246, 0.12));
  color: var(--color-accent-tertiary);
}

.pricing-calc__row-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0;
  line-height: var(--lh-relaxed);
}

.pricing-calc__row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pricing-calc__qty-wrap {
  margin-top: var(--space-3);
}

.pricing-calc__qty-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.pricing-calc__qty {
  width: 5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--fs-sm);
}

.pricing-v2__summary {
  position: sticky;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
}

.pricing-v2__summary h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
}

.pricing-v2__dl {
  margin: 0;
}

.pricing-v2__dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.pricing-v2__dl > div:last-of-type {
  border-bottom: none;
}

.pricing-v2__dl dt {
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

.pricing-v2__dl dd {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-align: end;
}

.pricing-v2__dl-highlight {
  margin-top: var(--space-2);
  padding-top: var(--space-3) !important;
  border-top: 2px solid var(--color-border-accent) !important;
}

.pricing-v2__disclaimer {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: var(--space-4) 0;
  line-height: var(--lh-relaxed);
}

.pricing-v2__catalog {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pricing-v2__catalog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .pricing-v2__catalog {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-catalog-card {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100%;
}

.pricing-catalog-card__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.pricing-catalog-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
}

.pricing-catalog-card__promo {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.pricing-catalog-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.pricing-catalog-card__price {
  font-weight: var(--fw-bold);
  color: var(--color-accent-tertiary);
}

.pricing-catalog-card__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.plans-fit-grid--5 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .plans-fit-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .plans-fit-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .plans-fit-grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@supports not selector(:has(*)) {
  .pricing-v2__pkg-label input:checked + span {
    font-weight: var(--fw-bold);
  }
}

/* ── Plans page responsive ── */

@media (max-width: 639px) {
  .page-hero--plans .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-hero--plans .page-hero__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .pricing-v2__billing {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .pricing-v2__toggle {
    width: 100%;
    display: flex;
  }

  .pricing-v2__toggle-btn {
    flex: 1;
    text-align: center;
  }

  .pricing-v2__pkg-radios {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .pricing-v2__pkg-label {
    flex-shrink: 0;
    min-height: 2.75rem;
    scroll-snap-align: start;
  }

  .pricing-v2__summary {
    position: static;
    margin-top: var(--space-6);
  }
}

@media (max-width: 959px) {
  .pricing-v2__summary {
    position: static;
  }
}

.js-compare-table-wrap {
  overscroll-behavior-x: contain;
}

.pricing-v2__modules {
  max-height: 70vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

.pricing-calc__cat-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-primary);
  padding-block: var(--space-2);
}

/* Addon checkbox toggle row */
.pricing-calc__addon-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

.pricing-calc__addon-toggle input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-accent-tertiary);
  cursor: pointer;
}

.pricing-calc__row.is-addon-off {
  opacity: 0.5;
}

.pricing-calc__row.is-addon-off .pricing-calc__row-desc,
.pricing-calc__row.is-addon-off .pricing-calc__row-meta {
  display: none;
}

/* Billing comparison cards in calculator */
.pricing-v2__billing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (max-width: 479px) {
  .pricing-v2__billing-cards {
    grid-template-columns: 1fr;
  }
}

.pricing-v2__billing-card {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.pricing-v2__billing-card:hover {
  border-color: var(--color-border-accent);
}

.pricing-v2__billing-card.is-selected {
  border-color: var(--color-accent-tertiary);
  box-shadow: var(--shadow-glow);
}

.pricing-v2__billing-card__badge {
  position: absolute;
  top: calc(-0.625rem);
  right: var(--space-3);
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  background: var(--color-success-muted);
  color: var(--color-success-text);
}

.pricing-v2__billing-card__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-v2__billing-card__price {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.pricing-v2__billing-card__price small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.pricing-v2__billing-card__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: var(--lh-relaxed);
}

.pricing-v2__billing-card__savings {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  background: var(--color-success-muted);
  color: var(--color-success-text);
}

.pricing-v2__billing-card__check {
  display: none;
}

.pricing-v2__billing-card.is-selected .pricing-v2__billing-card__check {
  display: flex;
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-tertiary);
  color: #fff;
  align-items: center;
  justify-content: center;
}

.pricing-v2__billing-card__check svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* ═══════════════════════════════════════════════════
   PREMIUM ENTERPRISE PHASE — shared components
   ═══════════════════════════════════════════════════ */

/* --- Section ambient background --- */
.section--ambient {
  position: relative;
  overflow: hidden;
}

.section--ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ambient-glow-a), var(--ambient-glow-b);
  pointer-events: none;
}

/* --- Module Flow Map (ilişki haritası) --- */
.module-flow-map {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.module-flow-map__lane {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.module-flow-map__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-tertiary);
  margin-bottom: var(--space-4);
}

.module-flow-map__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: min-content;
}

.module-flow-map__nodes a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  white-space: nowrap;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.module-flow-map__nodes a:hover,
.module-flow-map__nodes a:focus-visible {
  border-color: var(--color-border-accent);
  background: var(--color-accent-violet-muted);
  box-shadow: var(--shadow-sm);
}

.module-flow-map__arrow {
  color: var(--color-accent-secondary);
  font-size: var(--fs-sm);
  user-select: none;
  flex-shrink: 0;
  opacity: 0.7;
}

/* --- Trust Architecture (güven mimarisi) --- */
.trust-arch {
  margin-top: var(--space-10);
}

.trust-arch__intro {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 52rem;
  margin-bottom: var(--space-8);
}

.trust-arch__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 37.5rem) {
  .trust-arch__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .trust-arch__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-arch__card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.trust-arch__card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.trust-arch__card-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  color: var(--color-accent-secondary);
}

.trust-arch__card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.trust-arch__card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.trust-arch__card p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Onboarding Band (işletme tipi) --- */
.onboarding-band {
  margin-top: var(--space-10);
}

.onboarding-band__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 37.5rem) {
  .onboarding-band__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .onboarding-band__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.onboarding-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.onboarding-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.onboarding-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--visual-icon-surface);
  border: 1px solid var(--visual-icon-border);
  color: var(--color-accent-secondary);
}

.onboarding-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.onboarding-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}

.onboarding-card__modules {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-accent-tertiary);
  letter-spacing: 0.02em;
}

.onboarding-card__plan {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  background: var(--color-accent-glow);
  color: var(--color-accent-tertiary);
}

.onboarding-card__cta {
  margin-top: auto;
}

/* --- Decision Aid (karar yardımcı) --- */
.decision-aid {
  margin-top: var(--space-10);
}

.decision-aid__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .decision-aid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.decision-aid__item {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.decision-aid__item h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.decision-aid__item p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Editorial blocks --- */
.editorial-block {
  max-width: 52rem;
}

.editorial-block__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-tertiary);
  margin-bottom: var(--space-3);
}

.editorial-block__title {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight: var(--fw-extrabold);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}

.editorial-block__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.editorial-block__body p + p {
  margin-top: var(--space-4);
}

.ps-block {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .ps-block {
    grid-template-columns: 1fr 1fr;
  }
}

.ps-block__col {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.ps-block__col--problem {
  background: var(--color-bg-card);
}

.ps-block__col--solution {
  background: var(--color-bg-card);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.ps-block__label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.ps-block__label--problem {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}

.ps-block__label--solution {
  background: var(--color-success-muted);
  border: 1px solid var(--chip-success-border);
  color: var(--color-success-text);
}

.ps-block__col h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.ps-block__col p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Demo process timeline --- */
.demo-timeline {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  counter-reset: timeline;
}

@media (min-width: 48rem) {
  .demo-timeline {
    grid-template-columns: repeat(4, 1fr);
  }
}

.demo-timeline__step {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  text-align: center;
  counter-increment: timeline;
}

.demo-timeline__num {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-3);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  color: #fff;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent-primary), var(--brand-violet));
}

.demo-timeline__step h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.demo-timeline__step p {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

/* --- Footer ecosystem --- */
.footer-modules {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--footer-border);
}

.footer-modules__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-heading);
  margin-bottom: var(--space-4);
}

.footer-modules__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 47.99rem) {
  .footer-modules__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.footer-modules__group h5 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--footer-text-secondary);
  margin-bottom: var(--space-2);
}

.footer-modules__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.footer-modules__group a {
  font-size: var(--fs-xs);
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-modules__group a:hover {
  color: var(--footer-link-hover);
}

.footer-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--footer-border);
}

.footer-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--footer-text-secondary);
}

.footer-trust-strip__item svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--color-accent-secondary);
  opacity: 0.8;
}

.footer-tagline {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--footer-text);
  opacity: 0.8;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: baseline;
}

/* ═══════════════════════════════════════════════════
   PRODUCT VITRINE
   ═══════════════════════════════════════════════════ */
.vitrine__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vitrine__tab {
  all: unset;
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.vitrine__tab:hover {
  color: var(--color-text);
}

.vitrine__tab.is-active,
.vitrine__tab[aria-selected="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.vitrine__panel {
  display: none;
  gap: var(--space-8);
  align-items: center;
}

.vitrine__panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  animation: vitrineFade 0.35s var(--ease-out);
}

@keyframes vitrineFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vitrine__text h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

.vitrine__text p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: var(--lh-relaxed);
}

.vitrine__link {
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-decoration: none;
}

.vitrine__link:hover {
  text-decoration: underline;
}

.vitrine__visual {
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   BUSINESS FIT SELECTOR
   ═══════════════════════════════════════════════════ */
.bizfit__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-8);
}

.bizfit__chip {
  all: unset;
  cursor: pointer;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}

.bizfit__chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.bizfit__chip.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.bizfit-result {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

.bizfit-result__modules h4,
.bizfit-result__package h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.bizfit-result__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bizfit-result__pkg-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

.bizfit-result__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: center;
}

/* ═══════════════════════════════════════════════════
   SECTOR CARDS — DEEP VARIANT
   ═══════════════════════════════════════════════════ */
.sector-grid--deep {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sector-card--deep {
  text-align: left;
  padding: var(--space-6);
}

.sector-card--deep .sector-card__details {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.sector-card--deep .sector-card__details dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-3);
}

.sector-card--deep .sector-card__details dd {
  margin: var(--space-1) 0 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ═══════════════════════════════════════════════════
   EDITORIAL COMPARISON
   ═══════════════════════════════════════════════════ */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.compare-col {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.compare-col--old {
  background: var(--color-surface);
}

.compare-col--new {
  background: var(--color-surface-raised);
  border-color: var(--color-accent);
}

.compare-col h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

.compare-col--new h3 {
  color: var(--color-accent);
}

.compare-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compare-col li {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-5);
  position: relative;
}

.compare-col--old li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
  opacity: 0.5;
}

.compare-col--new li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* ═══════════════════════════════════════════════════
   ROI ESTIMATOR
   ═══════════════════════════════════════════════════ */
.roi__form {
  max-width: 640px;
  margin: 0 auto;
}

.roi__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.roi__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.roi__field input,
.roi__field select {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.roi__field input:focus,
.roi__field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-faint, rgba(59,130,246,0.15));
}

.roi__result {
  margin-top: var(--space-8);
  text-align: center;
}

.roi-result__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.roi-result__number {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  line-height: 1;
}

.roi-result__number small {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.roi-result__level {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
}

.roi-result__msg {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto var(--space-4);
  line-height: var(--lh-relaxed);
}

.roi-result__disclaimer {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

/* ═══════════════════════════════════════════════════
   STICKY CONVERSION BAR
   ═══════════════════════════════════════════════════ */
.conversion-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 12px var(--conversion-bar-shadow);
  transform: translateY(100%);
  transition: transform var(--duration-normal, 0.3s) var(--ease-out);
  padding: var(--space-3) 0;
}

.conversion-bar.is-visible {
  transform: translateY(0);
}

.conversion-bar__inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.conversion-bar__link {
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  transition: all var(--duration-fast) var(--ease-out);
}

.conversion-bar__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.conversion-bar__link--primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.conversion-bar__link--primary:hover {
  opacity: 0.9;
  color: #fff;
}

/* ═══════════════════════════════════════════════════
   DEMO PAGE — B2B LEAD STRUCTURE
   ═══════════════════════════════════════════════════ */
.demo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.demo-step {
  text-align: center;
  padding: var(--space-5);
}

.demo-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

.demo-step h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.demo-step p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.demo-expect {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-10);
}

.demo-expect h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

.demo-expect ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-expect li {
  font-size: var(--fs-sm);
  padding-left: var(--space-5);
  position: relative;
  line-height: var(--lh-relaxed);
}

.demo-expect li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

.demo-booking-placeholder {
  text-align: center;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  margin-top: var(--space-6);
}

.demo-booking-placeholder h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

.demo-booking-placeholder p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════
   VITRINE STRIP (product pages)
   ═══════════════════════════════════════════════════ */
.vitrine-strip {
  padding: var(--space-5) 0;
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.vitrine-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════
   CHIP (reusable)
   ═══════════════════════════════════════════════════ */
.home-cases-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.home-cases-summary__card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

.home-cases-summary__card strong {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.home-cases-summary__card p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* ═══ REFERENCES PAGE — SECTOR CARD ILLUSTRATIONS ═══ */

.refs-sector-card__illust {
  width: 5rem;
  height: 5rem;
  margin-bottom: var(--space-4);
  object-fit: contain;
  border-radius: var(--radius-lg);
}

/* ═══ REFERENCES PAGE — CASE STUDY CARD VISUALS ═══ */

.refs-case-card__visual {
  margin: 0 0 var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.refs-case-card__visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* ═══ GENERATED VISUALS — RESPONSIVE ═══ */

@media (max-width: 48em) {
  .section-visual {
    margin-top: var(--space-6);
  }

  .section-visual img {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .section-visual--compact img {
    max-width: 100%;
  }

  .benefit-scene {
    margin-top: var(--space-6);
  }

  .benefit-scene img {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .about-editorial-visual img {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .refs-case-card__visual {
    margin-bottom: var(--space-4);
  }

  .refs-sector-card__illust {
    width: 4rem;
    height: 4rem;
  }

  .product-device-wrap img {
    border-radius: var(--radius-lg);
  }

  .demo-sidebar__visual img {
    border-radius: var(--radius-lg);
  }
}

/* ═══ GENERATED VISUALS — DARK MODE ═══ */

[data-theme="dark"] .product-device-wrap img,
[data-theme="dark"] .section-visual img,
[data-theme="dark"] .benefit-scene img,
[data-theme="dark"] .about-editorial-visual img,
[data-theme="dark"] .refs-case-card__visual img,
[data-theme="dark"] .refs-sector-card__illust,
[data-theme="dark"] .value-card__illust,
[data-theme="dark"] .demo-sidebar__visual img {
  opacity: 0.92;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .product-device-wrap img,
[data-theme="light"] .section-visual img,
[data-theme="light"] .benefit-scene img,
[data-theme="light"] .about-editorial-visual img,
[data-theme="light"] .refs-case-card__visual img,
[data-theme="light"] .refs-sector-card__illust,
[data-theme="light"] .value-card__illust,
[data-theme="light"] .demo-sidebar__visual img {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* ═══ GENERATED VISUALS — CLS PREVENTION ═══ */

.product-device-wrap img,
.section-visual img,
.benefit-scene img,
.about-editorial-visual img,
.refs-case-card__visual img,
.demo-sidebar__visual img {
  aspect-ratio: auto;
}

/* ═══ GENERATED VISUALS — SPACING HARMONY ═══ */

.section-visual + .how-tabs,
.section-visual + .sector-grid,
.section-visual + .why-grid,
.section-visual + .plans-logic-grid {
  margin-top: var(--space-8);
}

.page-hero .section-visual {
  margin-top: var(--space-6);
  margin-bottom: 0;
}