/* Menu pages — Özellikler, ROI, Paketler, Ekosistem
   Figma: Menü (269:55396) · tablet: 358:61800
   Shared parts: components/page-header.php, components/quote-band.php */

/* =========================================================
   Özellikler — Figma 121:913 · mobile 124:957 · tablet 362:7128
   ========================================================= */
.features-modules__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  padding-block: var(--space-48) var(--space-64);
}

/* "Wiki'deki diğer modüller" */
.features-wiki { background: var(--color-surface-subtle); }
.features-wiki__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: var(--space-48);
}
.features-wiki__head { display: flex; flex-direction: column; gap: var(--space-12); }
.features-wiki__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.features-wiki__text { display: none; }

/* Mobile / tablet: one bordered list */
.features-wiki__list {
  overflow: hidden;
  border: 1px solid var(--color-border-divider);
  border-radius: 16px;
  background: var(--color-surface-page);
}
.features-wiki__list li:last-child .wiki-module-link { border-bottom: 0; }

@media (min-width: 1024px) {
  .features-modules__list { gap: 120px; padding-block: 120px; }

  .features-wiki__inner { gap: var(--space-32); padding-block: var(--space-96); }
  .features-wiki__title { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
  .features-wiki__text { display: block; font-size: 17px; line-height: 1.5; color: var(--color-text-secondary); }

  /* Desktop: two columns of rows with a bottom line, no frame */
  .features-wiki__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-48);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .features-wiki__list li:last-child .wiki-module-link { border-bottom: 1px solid var(--color-border-divider); }
}

/* =========================================================
   ROI — Figma 122:931 · mobile 124:1217 · tablet 362:7331
   ========================================================= */
.roi-scenarios .container { padding-block: var(--space-56) var(--space-64); }
.roi-scenarios__trio { display: none; }

.roi-calc { background: var(--color-surface-subtle); }
.roi-calc__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-block: var(--space-56) var(--space-64);
}
.roi-calc__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.roi-calc__text { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }

/* M size, full width on mobile (the component renders L) */
.roi-calc__button {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding-inline: var(--space-20);
  font-size: 15px;
  letter-spacing: -0.002em;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .roi-scenarios .metric--horizontal .metric__value { font-size: 44px; }
  .roi-calc__title { font-size: 34px; }
  .roi-calc__button { width: auto; }
}

@media (min-width: 1024px) {
  .roi-scenarios .container { padding-block: 112px 128px; }
  .roi-scenarios__rows { display: none; }
  .roi-scenarios__trio { display: flex; }
  .roi-scenarios__trio > * { flex: 1 1 0; min-width: 0; }
  .roi-scenarios__trio .metric { padding: 0 var(--space-40); }
  .roi-scenarios__trio > :first-child .metric { padding-left: 0; }
  .roi-scenarios__trio > * + * .metric { border-left: 1px solid var(--color-border-divider); }

  /* Text column (vertically centred) next to the calculator */
  .roi-calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 511fr) minmax(0, 593fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".      card"
      "title  card"
      "text   card"
      "action card"
      ".      card";
    column-gap: var(--space-48);
    row-gap: var(--space-16);
    padding-block: 112px 128px;
  }
  .roi-calc__title { grid-area: title; font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; }
  .roi-calc__text { grid-area: text; font-size: 18px; }
  .roi-calc__card { grid-area: card; }
  .roi-calc__action { grid-area: action; }
  .roi-calc__button { width: auto; height: 56px; min-height: 56px; padding-inline: var(--space-24); font-size: 17px; letter-spacing: -0.003em; }
}

@media (min-width: 1280px) {
  .roi-calc__grid { column-gap: var(--space-96); }
}

/* =========================================================
   Paketler — Figma 122:1040 · mobile 124:1279 · tablet 362:7450
   Mobile / tablet: the homepage plan + comparison sections without the plans heading.
   Desktop: plan cards in three equal-height columns.
   ========================================================= */
.pricing-plans { background: var(--color-surface-canvas); }
.pricing-plans__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-block: var(--space-40) 80px;
}
.pricing-plans__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.pricing-plans__note { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }

.pricing-compare__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-block: var(--space-72) 80px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pricing-plans__grid { width: 100%; max-width: 560px; margin-inline: auto; }
  .pricing-plans .plan-card__count { font-size: 44px; line-height: 1.1; }
}

@media (min-width: 1024px) {
  .pricing-plans__inner { padding-block: 112px 128px; }
  .pricing-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
  .pricing-plans__note { font-size: 14px; }

  .pricing-compare__inner { gap: var(--space-56); padding-block: 128px 136px; }
}

/* =========================================================
   Ekosistem — Figma 122:1254 · mobile 124:1492 · tablet 362:7688
   Mobile / tablet: blocks stacked, pictures keep their phone size.
   Desktop: text + 560 × 380 picture, the picture side alternates.
   Picture pieces (screen pair, flow rules, chart) come from components/ecosystem.php.
   ========================================================= */
.eco-products__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding-block: var(--space-56) var(--space-64);
}

.eco-block { display: flex; flex-direction: column; gap: var(--space-10); }
.eco-block__text { display: flex; flex-direction: column; gap: var(--space-10); }
.eco-block__index { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--color-brand-primary); }
.eco-block__name {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.eco-block__role { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--color-text-secondary); }
.eco-block__lead { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }

/* Picture panel */
.eco-block__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}
.eco-block--crm .eco-block__visual { background: var(--color-brand-tint); }
.eco-block--flow .eco-block__visual,
.eco-block--mr .eco-block__visual { padding: var(--space-24) var(--space-20); }

/* FinCo CRM: two browser windows, 313 × 200 (Figma Screen pair, size Mobile) */
.eco-block .screen-pair--browser { width: min(313px, 100%); aspect-ratio: 313 / 200; }
.eco-block .screen-pair--browser .screen-pair__frame { height: auto; aspect-ratio: 1746 / 901; }
.eco-block .screen-pair--browser .screen-pair__frame--1 { left: 4.72%; top: 8%; width: 74.91%; }
.eco-block .screen-pair--browser .screen-pair__frame--2 { left: 19.81%; top: 34.06%; width: 75.4%; }

/* FinCo Mobil: two phones on a full-width gradient, 260 tall */
.eco-block .screen-pair--phone { align-self: stretch; height: 260px; aspect-ratio: auto; }
.eco-block .screen-pair--phone .screen-pair__frame {
  right: auto;
  width: 100px;
  height: 217px;
  aspect-ratio: auto;
  border-width: 3px;
  border-color: #14212b;
  border-radius: 16px;
}
.eco-block .screen-pair--phone .screen-pair__frame--1 { left: 46px; top: 18px; }
.eco-block .screen-pair--phone .screen-pair__frame--2 { left: 166px; top: 34px; }

/* Flow rules / MR chart: white card, 170 tall */
.eco-block .product-panel { align-self: stretch; height: 170px; aspect-ratio: auto; justify-content: flex-start; }

/* Integrations strip: stacked, pill tags */
.eco-products .integrations-strip {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-16);
  border-color: var(--color-border-divider);
  background: none;
}
.eco-products .integrations-strip__title { line-height: 1.5; }
.eco-products .integrations-strip__tags { gap: var(--space-8); }
.eco-products .integrations-strip__tag { border-radius: var(--radius-pill); }
.eco-products .integrations-strip__note { margin-left: 0; font-size: 13px; line-height: 1.5; font-weight: 400; }

@media (min-width: 768px) and (max-width: 1023px) {
  .eco-block--flow .eco-block__visual,
  .eco-block--mr .eco-block__visual { padding-inline: var(--space-40); }
}

@media (min-width: 1024px) {
  .eco-products__list { gap: var(--space-96); padding-block: 112px 128px; }

  .eco-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: center;
    gap: var(--space-48);
  }
  .eco-block--image-first { grid-template-columns: 560px minmax(0, 1fr); }
  .eco-block--image-first .eco-block__visual { order: -1; }

  .eco-block__text { gap: var(--space-12); }
  .eco-block__index { font-size: 15px; }
  .eco-block__name { font-size: 48px; line-height: 1.05; letter-spacing: -0.03em; }
  .eco-block__role,
  .eco-block__lead { font-size: 18px; }

  .eco-block__visual { justify-content: center; height: 380px; border-radius: 28px; }
  .eco-block--flow .eco-block__visual,
  .eco-block--mr .eco-block__visual { padding: var(--space-48) var(--space-64); }

  /* Screen pair, size Page (560 × 380) */
  .eco-block .screen-pair--browser { width: 100%; height: 100%; aspect-ratio: auto; }
  .eco-block .screen-pair--browser .screen-pair__frame { border-radius: 8px; }
  .eco-block .screen-pair--browser .screen-pair__frame--1 { left: 6.58%; top: 8.95%; width: 76.48%; }
  .eco-block .screen-pair--browser .screen-pair__frame--2 { left: 16.79%; top: 34.22%; width: 76.79%; }

  .eco-block .screen-pair--phone { height: 100%; }
  .eco-block .screen-pair--phone .screen-pair__frame { width: 150px; height: 326px; border-width: 4px; border-color: rgba(20, 33, 43, 0.9); border-radius: 18px; }
  .eco-block .screen-pair--phone .screen-pair__frame--1 { left: 116px; top: 18px; }
  .eco-block .screen-pair--phone .screen-pair__frame--2 { left: 294px; top: 40px; }

  /* Integrations strip: one row */
  .eco-products .integrations-strip {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
    padding: 18px var(--space-24);
    border-color: var(--color-border-default);
    background: var(--color-surface-page);
  }
  .eco-products .integrations-strip__title { line-height: 1.3; }
  .eco-products .integrations-strip__tag { border-radius: var(--radius-sm); }
  .eco-products .integrations-strip__note { margin-left: auto; font-size: 12px; line-height: 1.4; font-weight: 500; }
}

@media (min-width: 1280px) {
  .eco-block { gap: var(--space-96); }
}