/* =========================================================
   RITMA — ERP ÜRÜN SAYFASI (iç sayfa)
   Aynı tasarım dili / token'lar anasayfa ile paylaşılır,
   fakat yapı anasayfadan farklıdır: sticky alt-nav,
   modül grid'i, S&C kartları, dikey adım akışı, kapanış bandı.
   ========================================================= *//* =================== PAGE HEAD =================== */
    .page-head {
      background: var(--bg-soft);
      min-height: 760px;
      padding: 0;
      overflow: hidden;
      display: flex;
      align-items: center
    }

    .page-head-grid {
      display: grid;
      grid-template-columns: 1fr 500px;
      gap: 42px;
      align-items: center;
      position: relative;
      width: 100%;
      min-height: 760px;
      padding-top: 28px;
      padding-bottom: 28px
    }

    .page-head-copy {
      max-width: 620px
    }

    .page-head h1 {
      font-size: clamp(46px, 4.8vw, 64px);
      font-weight: 800;
      line-height: 1.05;
      margin-top: 16px
    }

    .page-head h1 .accent {
      color: var(--orange)
    }

    .page-head .lede {
      font-size: 18px;
      color: var(--gray);
      margin: 26px 0 0;
      max-width: 56ch
    }

    .page-head .lede b {
      color: var(--ink);
      font-weight: 700
    }

    .page-head-actions {
      display: flex;
      gap: 16px;
      margin-top: 32px;
      flex-wrap: wrap
    }

    /* hub-modül diyagramı */
    .head-visual {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 540px;
      overflow: visible
    }

    .head-person {
      position: absolute;
      left: -415px;
      bottom: -112px;
      width: 500px;
      height: 550px;
      z-index: 4;
      pointer-events: none
    }

    .head-person img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      display: block
    }

    .hv-blob {
      position: absolute;
      width: 460px;
      height: 460px;
      border-radius: 50%;
      filter: blur(40px);
      top: -20px;
      background: radial-gradient(circle at 45% 42%, rgba(244, 71, 11, .18), rgba(244, 71, 11, .04) 55%, transparent 72%);
      pointer-events: none
    }

    .hv-svg {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 500px;
      height: auto;
      overflow: visible;
      transform-origin: center
    }

    .hv-line {
      stroke: var(--border);
      stroke-width: 1.5;
      transition: stroke .4s, stroke-width .4s
    }

    .hv-line.active {
      stroke: var(--orange-border);
      stroke-width: 2.2
    }

    .hv-center {
      transform-box: fill-box;
      transform-origin: center;
      animation: hvPulse 5s ease-in-out infinite
    }

    .hv-symbol {
      filter: drop-shadow(0 16px 28px rgba(1, 104, 249, .24))
    }

    .hv-node {
      transform-box: fill-box;
      transform-origin: center;
      animation: hvFloat 5.6s ease-in-out infinite
    }

    .hv-node .hv-circle {
      transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), stroke .4s, filter .4s;
      transform-box: fill-box;
      transform-origin: center
    }

    .hv-node .hv-icon {
      transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
      transform-box: fill-box;
      transform-origin: center
    }

    .hv-node.active .hv-circle {
      transform: scale(1.24);
      stroke: var(--orange);
      filter: drop-shadow(0 6px 14px rgba(244, 71, 11, .28))
    }

    .hv-node.active .hv-icon {
      transform: scale(1.18)
    }

    .hv-caption {
      margin-top: 22px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 9px 18px 9px 14px;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      box-shadow: var(--sh-sm)
    }

    .hv-caption-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--orange);
      flex-shrink: 0;
      animation: hvDot 1.8s ease-in-out infinite
    }

    .hv-caption span {
      transition: opacity .25s
    }

    .hv-caption span.fade {
      opacity: 0
    }

    @keyframes hvFloat {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-7px)
      }
    }

    @keyframes hvPulse {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.035)
      }
    }

    @keyframes hvDot {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .35
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .hv-node,
      .hv-center,
      .hv-caption-dot {
        animation: none
      }
    }/* =================== STICKY SUB-NAV (sadece iç sayfada) =================== */

    /* =================== SECTION SHELL =================== */
    .sec-head {
      max-width: 770px
    }
    .sec-num {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px
    }

    .sec-num i {
      width: 30px;
      height: 1px;
      background: var(--orange)
    }

    .sec-num span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--orange)
    }

    /* =================== 01 · SORUN / PAIN LIST =================== */
    .pain {
      background: #fff
    }

    .trust-problems {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 50px;
      max-width: none;
      margin-top: 56px
    }

    .trust-problems--wide {
      grid-column: 1 / -1
    }

    .trust-problem {
      display: flex;
      align-items: center;
      gap: 20px;
      min-height: 84px;
      padding: 18px 24px;
      color: #11182d;
      border: 1px solid rgba(11, 18, 32, .085);
      border-radius: 16px;
      background: rgba(255, 255, 255, .76);
      box-shadow: 0 18px 44px -38px rgba(20, 24, 31, .45)
    }

    .trust-problem span {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      color: var(--orange);
      flex: 0 0 auto
    }

    .trust-problem span svg {
      width: 30px;
      height: 30px;
      stroke-width: 1.55
    }

    .trust-problem p {
      margin: 0;
      color: inherit;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.35;
      padding: 0
    }

    .pain-statement {
      margin-top: 70px;
      background: #fff;
      border-radius: 28px;
      padding: 52px 46px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 28px 80px -62px rgba(20, 24, 31, .34)
    }

    .pain-statement:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% -20%, rgba(244, 71, 11, .16), transparent 38%), linear-gradient(180deg, rgba(244, 71, 11, .055), transparent 58%);
      pointer-events: none
    }

    .pain-statement:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 220px;
      height: 2px;
      transform: translateX(-50%);
      border-radius: 99px 99px 0 0;
      background: linear-gradient(90deg, transparent, var(--orange), transparent)
    }

    .pain-statement-mark {
      position: relative;
      z-index: 1;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: grid;
      place-items: center;
      background: var(--orange-soft);
      color: var(--orange);
      box-shadow: var(--sh-sm)
    }

    .pain-statement-eyebrow {
      position: relative;
      z-index: 1;
      display: inline-flex;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px
    }

    .pain-statement p {
      position: relative;
      z-index: 1;
      color: var(--ink);
      font-size: clamp(20px, 2.75vw, 30px);
      font-weight: 760;
      line-height: 1.34;
      max-width: 1000px;
      margin: 0 auto;
      letter-spacing: 0
    }

    .pain-statement .accent {
      color: var(--orange)
    }

    .pain-statement-note {
      position: relative;
      z-index: 1;
      margin: 22px auto 0;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border-radius: 999px;
      background: var(--orange-soft);
      color: var(--orange);
      padding: 10px 15px;
      font-size: 13px;
      font-weight: 850
    }

    .pain-statement-note i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--orange);
      font-style: normal
    }

    /* =================== 02 · SÜREÇ ZİNCİRİ =================== */
    .chain-wrap {
      margin-top: 52px;
      overflow-x: auto;
      padding-bottom: 6px
    }

    .chain {
      display: flex;
      align-items: center;
      gap: 0;
      min-width: 900px
    }

    .chain-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 118px;
      flex-shrink: 0
    }

    .chain-node .cn-c {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--border);
      display: grid;
      place-items: center;
      color: var(--orange);
      box-shadow: var(--sh-sm)
    }

    .chain-node span {
      font-size: 14px;
      font-weight: 750;
      text-align: center;
      color: var(--ink)
    }

    .chain-arrow {
      flex: 1;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px);
      position: relative;
      top: -19px;
      min-width: 24px
    }

    .chain-note {
      margin-top: 24px;
      font-size: 16px;
      color: var(--gray);
      font-weight: 550;
      line-height: 1.6
    }

    .flow-dashboard-layout {
      display: grid;
      grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
      gap: 78px;
      align-items: center
    }

    .flow-dashboard-layout .sec-head {
      max-width: 480px
    }

    .flow-dashboard-copy .flow-points {
      display: grid;
      gap: 14px;
      margin-top: 32px
    }

    .flow-dashboard-copy .flow-point {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      color: var(--gray);
      font-size: 16px;
      font-weight: 600;
      line-height: 1.45
    }

    .flow-dashboard-copy .flow-point i {
      width: 24px;
      height: 24px;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 50%;
      background: var(--orange-soft);
      border: 1px solid var(--orange-border);
      color: var(--orange);
      display: grid;
      place-items: center;
      flex: 0 0 24px;
      margin-top: 1px;
      box-shadow: 0 10px 24px -18px rgba(244, 71, 11, .55);
    }

    .flow-dashboard-copy .flow-point i svg {
      width: 100%;
      height: 100%;
      display: block;
      stroke-width: 4;
    }

    .flow-dashboard-visual {
      position: relative;
      min-height: 520px;
      overflow: visible
    }

    .flow-dashboard-visual .trust-dashboard {
      position: relative;
      width: min(100%, 780px);
      margin-left: auto;
      overflow: visible
    }

    .flow-dashboard-visual .erp-dash-browser {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--sh-sm);
      overflow: hidden;
      font-size: 12px
    }

    .flow-dashboard-visual .dash-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      gap: 18px;
      background: #fff
    }

    .flow-dashboard-visual .dash-top .logo {
      display: flex;
      align-items: center;
      width: auto;
      height: auto;
      padding: 0;
      border: 0;
      background: transparent
    }

    .flow-dashboard-visual .dash-logo-img {
      height: 24px;
      width: auto;
      display: block
    }

    .flow-dashboard-visual .dash-top-r {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .flow-dashboard-visual .dash-date {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 500;
      color: var(--gray);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 6px 11px;
      background: #fff;
      white-space: nowrap
    }

    .flow-dashboard-visual .dash-bell {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      color: var(--gray);
      background: #fff
    }

    .flow-dashboard-visual .dash-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-gray);
      display: grid;
      place-items: center;
      overflow: hidden
    }

    .flow-dashboard-visual .dash-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .flow-dashboard-visual .dash-body {
      display: grid;
      grid-template-columns: 150px 1fr
    }

    .flow-dashboard-visual .dash-side {
      border-right: 1px solid var(--border);
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      background: #fff
    }

    .flow-dashboard-visual .side-i {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px;
      border-radius: 10px;
      color: var(--gray);
      font-weight: 500;
      font-size: 12px;
      background: transparent
    }

    .flow-dashboard-visual .side-i svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0
    }

    .flow-dashboard-visual .side-i.on {
      background: var(--orange-soft);
      color: var(--orange);
      font-weight: 700
    }

    .flow-dashboard-visual .erp-dash-main {
      padding: 18px 20px;
      background: #fff;
      min-width: 0
    }

    .flow-dashboard-visual .erp-dash-title {
      font-weight: 700;
      font-size: 16px;
      font-variation-settings: "opsz" 32;
      letter-spacing: 0;
      margin-bottom: 15px;
      color: var(--ink)
    }

    .flow-dashboard-visual .erp-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 9px;
      margin-bottom: 14px
    }

    .flow-dashboard-visual .erp-kpis .kpi {
      border: 1px solid var(--border);
      border-radius: 13px;
      padding: 11px 13px;
      min-height: auto;
      background: #fff;
      box-shadow: none
    }

    .flow-dashboard-visual .erp-kpis .kl {
      font-size: 12px;
      color: var(--gray);
      font-weight: 500
    }

    .flow-dashboard-visual .erp-kpis .kv {
      font-weight: 800;
      font-size: 18px;
      letter-spacing: 0;
      margin: 3px 0 2px;
      font-variation-settings: "opsz" 32;
      color: var(--ink)
    }

    .flow-dashboard-visual .erp-kpis .kd {
      font-size: 10px;
      font-weight: 600;
      color: var(--gray-light)
    }

    .flow-dashboard-visual .erp-kpis .kd b {
      color: var(--green);
      font-weight: 700
    }

    .flow-dashboard-visual .erp-kpis .kd.down {
      color: #ef2b16;
      font-weight: 700
    }

    .flow-dashboard-visual .erp-dash-grid {
      display: grid;
      grid-template-columns: 1.24fr .86fr;
      gap: 12px
    }

    .flow-dashboard-visual .erp-summary-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 12px
    }

    .flow-dashboard-visual .erp-summary-row .mini .kv {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0;
      color: var(--ink)
    }

    .flow-dashboard-visual .erp-summary-row small {
      display: block;
      margin-top: 8px;
      color: var(--gray);
      font-weight: 700
    }

    .flow-dashboard-visual .erp-donut {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: conic-gradient(#5CC986 0 52%, #FFBD54 52% 82%, #FF5A4F 82% 100%);
      display: grid;
      place-items: center;
      position: relative;
      flex: 0 0 auto
    }

    .flow-dashboard-visual .erp-donut:after {
      content: "";
      position: absolute;
      inset: 15px;
      border-radius: 50%;
      background: #fff
    }

    .flow-dashboard-visual .erp-donut span {
      position: relative;
      z-index: 1;
      text-align: center;
      font-size: 15px;
      font-weight: 850;
      line-height: 1;
      color: var(--ink)
    }

    .flow-dashboard-visual .erp-donut small {
      display: block;
      margin-top: 4px;
      font-size: 8px;
      font-weight: 650;
      color: var(--gray)
    }

    .flow-dashboard-visual .trust-dashboard>.dash-alerts {
      position: absolute;
      left: calc(100% - 100px);
      top: 90px;
      width: 180px;
      display: grid;
      gap: 12px;
      z-index: 5
    }

    .flow-dashboard-visual .dash-alert {
      position: relative;
      width: 176px;
      min-height: 108px;
      padding: 16px 17px 14px 70px;
      border: 1px solid rgba(16, 24, 45, .075);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 16px 36px -29px rgba(20, 24, 31, .32)
    }

    .flow-dashboard-visual .dash-alert-icon {
      position: absolute;
      top: 14px;
      left: 13px;
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border-radius: 13px;
      background: #fff2ed;
      color: #f45217
    }

    .flow-dashboard-visual .dash-alert-icon svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .flow-dashboard-visual .dash-alert--purchase .dash-alert-icon {
      background: #fff5eb;
      color: #ff6b1a
    }

    .flow-dashboard-visual .dash-alert--stock .dash-alert-icon {
      background: #fff7e9;
      color: #f8a31b
    }

    .flow-dashboard-visual .dash-alert--collection .dash-alert-icon {
      background: #ebfaf0;
      color: #20ad65
    }

    .flow-dashboard-visual .dash-alert small {
      display: block;
      color: #162039;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap
    }

    .flow-dashboard-visual .dash-alert b {
      display: block;
      margin-top: 7px;
      color: #0b1428;
      font-size: 20px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0
    }

    .flow-dashboard-visual .dash-alert em {
      display: block;
      margin-top: 9px;
      color: #747f96;
      font-size: 9px;
      line-height: 1.25;
      font-style: normal;
      font-weight: 650
    }

    .flow-dashboard-visual .dash-alert em strong {
      display: block;
      margin-top: 3px;
      color: #152036;
      font-size: 11px;
      font-weight: 800
    }

    .flow-dashboard-visual .dash-alert>i {
      position: absolute;
      right: 14px;
      bottom: 15px;
      color: #61708c;
      font-size: 16px;
      font-style: normal
    }

    .flow-dashboard-visual .dash-alert--collection>i {
      display: none
    }

    /* =================== 03 · MODÜL GRID =================== */
    .mod-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 56px
    }

    .mod-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: transform .2s, box-shadow .2s
    }

    .mod-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--sh-sm)
    }

    .mod-card .mi {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center
    }

    .mod-card h3 {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.25
    }

    .mod-card p {
      font-size: 15px;
      color: var(--gray);
      line-height: 1.58
    }

    /* =================== 04 · ÜRETİM SPLIT =================== */
    .mfg {
      background: var(--bg-soft)
    }

    .mfg-in {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 78px;
      align-items: center
    }

    .mfg-copy .sec-p {
      margin-top: 20px
    }

    .check-list {
      margin-top: 26px;
      display: flex;
      flex-direction: column;
      gap: 13px
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      font-size: 16px;
      font-weight: 550;
      line-height: 1.45
    }
    .check-list svg {
      width: 24px;
      height: 24px;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 50%;
      background: var(--green-soft);
      border: 1px solid rgba(22, 163, 74, .24);
      color: var(--green);
      flex: 0 0 24px;
      margin-top: 1px;
      box-shadow: 0 10px 24px -18px rgba(22, 163, 74, .55);
      display: block;
      stroke-width: 4;
    }

    .mfg-visual {
      position: relative
    }

    .mfg-visual .photo {
      border-radius: 22px;
      height: 420px;
      box-shadow: var(--sh-lg)
    }
    .mfg-photo img {
      object-position: center center;
      filter: saturate(1.02) contrast(1.02) brightness(1.03);
    }

    .mfg-photo::after {
      background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .16));
      pointer-events: none;
    }

    .mfg-float {
      position: absolute;
      left: -30px;
      bottom: -26px;
      z-index: 5;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px 18px;
      box-shadow: var(--sh-lg);
      width: 190px
    }

    .mfg-float .mf-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--green-soft);
      color: var(--green);
      display: grid;
      place-items: center;
      margin-bottom: 9px
    }

    .mfg-float b {
      font-size: 19px;
      font-weight: 800;
      display: block;
      letter-spacing: 0
    }

    .mfg-float span {
      font-size: 12px;
      color: var(--gray);
      display: block;
      margin-top: 2px
    }

    /* =================== 05 · Q&A GRID (Yönetim Görünürlüğü) =================== */
    .qa-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 48px
    }

    .qa-card {
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px
    }

    .qa-card .qi {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--blue-soft);
      color: var(--blue);
      display: grid;
      place-items: center;
      margin-bottom: 14px
    }

    .qa-card h4 {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.25
    }

    .qa-card p {
      font-size: 15px;
      color: var(--gray);
      margin-top: 10px;
      line-height: 1.58
    }

    /* =================== 06 · NEDEN RITMA (feature list) =================== */
    .why {
      background: var(--bg-soft)
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px 40px;
      margin-top: 100px
    }

    .why-item {
      display: flex;
      gap: 15px
    }

    .why-item .wi-ico {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: var(--orange-soft);
      display: grid;
      place-items: center;
      color: var(--orange);
      flex-shrink: 0
    }

    .why-item h4 {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.25
    }

    .why-item p {
      font-size: 15px;
      color: var(--gray);
      margin-top: 8px;
      line-height: 1.58
    }

    /* =================== 07 · SATIN ALMA SORULARI =================== */
    .buy-in {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 78px;
      align-items: start
    }

    .q-chips {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 6px
    }

    .q-chip {
      display: flex;
      align-items: center;
      gap: 13px;
      background: var(--bg-gray);
      border-radius: 12px;
      padding: 16px 18px;
      font-size: 16px;
      font-weight: 650
    }

    .q-chip i {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      color: var(--orange);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
      flex-shrink: 0
    }

    /* =================== 08 · DEMO SÜRECİ (dikey adım) =================== */
    .steps {
      max-width: 720px;
      margin: 52px auto 0;
      position: relative
    }

    .step {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 24px;
      padding-bottom: 44px;
      position: relative
    }

    .step:last-child {
      padding-bottom: 0
    }

    .step::before {
      content: "";
      position: absolute;
      left: 25px;
      top: 52px;
      bottom: 0;
      width: 2px;
      background: var(--border)
    }

    .step:last-child::before {
      display: none
    }

    .step-n {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 18px;
      flex-shrink: 0;
      font-variation-settings: "opsz" 32;
      position: relative;
      z-index: 1
    }

    .step-c h3 {
      font-size: 19px;
      font-weight: 800;
      letter-spacing: 0
    }

    .step-c p {
      font-size: 15px;
      color: var(--gray);
      margin-top: 8px;
      max-width: 52ch
    }

    /* =================== 09 · KAPANIŞ BANDI (navy) =================== */
    .close-band {
      background: var(--deep);
      position: relative;
      overflow: hidden
    }

    .close-band::before {
      content: "";
      position: absolute;
      top: -120px;
      right: -160px;
      width: 640px;
      height: 640px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(244, 71, 11, .22), transparent 68%)
    }

    .close-in {
      position: relative;
      max-width: 660px
    }

    .close-band .eyebrow {
      color: #FF9A66
    }

    .close-band h2 {
      color: #fff;
      font-size: clamp(30px, 3.6vw, 44px);
      font-weight: 800;
      line-height: 1.12;
      margin-top: 14px
    }

    .close-band p {
      color: var(--navy-text);
      font-size: 16px;
      margin-top: 16px;
      max-width: 54ch
    }

    .close-actions {
      display: flex;
      gap: 16px;
      margin-top: 32px;
      flex-wrap: wrap
    }

    .close-kvkk {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 28px;
      font-size: 14px;
      color: var(--navy-text)
    }

    .close-kvkk svg {
      color: #FF9A66;
      flex-shrink: 0
    }

    /* =================== EKRAN GÖRÜNTÜSÜ MOCKUP'LARI =================== */
    .screen {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--sh-lg);
      overflow: hidden;
      font-size: 12px
    }

    .screen-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 22px;
      border-bottom: 1px solid var(--border)
    }

    .screen-top .st-l {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 14px
    }

    .screen-top .st-l svg {
      width: 16px;
      height: 16px;
      color: var(--deep)
    }

    .screen-top .st-r {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .screen-tab {
      font-size: 11px;
      font-weight: 600;
      color: var(--gray);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px
    }

    .screen-tab.on {
      background: var(--orange-soft);
      color: var(--orange);
      border-color: transparent
    }

    .screen-body {
      padding: 22px
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 16px
    }

    .kpi {
      border: 1px solid var(--border);
      border-radius: 13px;
      padding: 14px 15px
    }

    .kpi .kl {
      font-size: 11px;
      color: var(--gray);
      font-weight: 500
    }

    .kpi .kv {
      font-weight: 800;
      font-size: 20px;
      letter-spacing: 0;
      margin: 4px 0 3px;
      font-variation-settings: "opsz" 32
    }

    .kpi .kd {
      font-size: 12px;
      font-weight: 600;
      color: var(--gray-light)
    }

    .kpi .kd b {
      font-weight: 700
    }

    .kpi .kd.up b {
      color: var(--green)
    }

    .kpi .kd.warn b {
      color: var(--orange)
    }

    .screen-row {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 14px
    }

    .chart-card {
      border: 1px solid var(--border);
      border-radius: 13px;
      padding: 15px 17px
    }

    .chart-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px
    }

    .chart-t {
      font-weight: 700;
      font-size: 13px
    }

    .chart-sel {
      font-size: 11px;
      color: var(--gray-light);
      font-weight: 500
    }

    .mini {
      border: 1px solid var(--border);
      border-radius: 13px;
      padding: 15px 16px
    }

    .mini-t {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 12px
    }

    .row-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid var(--bg-gray);
      font-size: 12px
    }

    .row-item:last-child {
      border-bottom: none
    }

    .row-item .ri-l {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: var(--ink)
    }

    .row-item .ri-l i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .chip {
      font-size: 10px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 7px;
      flex-shrink: 0
    }

    .chip.warn {
      background: var(--orange-soft);
      color: var(--orange)
    }

    .chip.ok {
      background: var(--green-soft);
      color: var(--green)
    }

    .chip.info {
      background: var(--blue-soft);
      color: var(--blue)
    }

    .insight-box {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .insight {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px;
      border: 1px solid var(--border);
      border-radius: 12px
    }

    .insight .ii {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex-shrink: 0
    }

    .insight span {
      display: block
    }

    .insight b {
      font-size: 12px;
      font-weight: 700;
      display: block
    }

    .insight small {
      font-size: 12px;
      color: var(--gray-light);
      font-weight: 500
    }

    .donut-w {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .legend {
      font-size: 11px;
      color: var(--gray);
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1
    }

    .legend span {
      display: flex;
      align-items: center;
      gap: 7px;
      justify-content: space-between
    }

    .legend .lg-l {
      display: flex;
      align-items: center;
      gap: 7px;
      font-weight: 500
    }

    .legend i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .legend b {
      font-weight: 700;
      color: var(--ink)
    }

    .mod-screen {
      margin: 44px 0 0
    }

    .mod-screen--suite {
      overflow: hidden
    }

    .mod-suite-top .st-l svg {
      width: 16px;
      height: 16px;
      color: var(--orange)
    }

    .mod-suite-brand {
      gap: 12px;
      font-weight: 800
    }

    .mod-suite-brand img {
      display: block;
      height: 22px;
      width: auto
    }

    .mod-suite-brand span {
      display: inline-flex;
      align-items: center;
      color: var(--ink);
      white-space: nowrap
    }

    .mod-suite-body {
      padding: 22px
    }

    .suite-tabs {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 16px
    }

    .suite-tabs span {
      display: grid;
      place-items: center;
      min-height: 36px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      color: var(--gray);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap
    }

    .suite-tabs span.on {
      background: var(--orange-soft);
      color: var(--orange);
      border-color: transparent
    }

    .suite-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 16px
    }

    .suite-kpi {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #fff;
      padding: 15px 16px;
      min-width: 0
    }

    .suite-kpi span {
      display: block;
      color: var(--gray);
      font-size: 11px;
      font-weight: 650;
      line-height: 1.2
    }

    .suite-kpi b {
      display: block;
      margin-top: 7px;
      color: var(--ink);
      font-size: 22px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: 0;
      font-variation-settings: "opsz" 32
    }

    .suite-kpi em {
      display: block;
      margin-top: 7px;
      color: var(--gray-light);
      font-size: 12px;
      font-style: normal;
      font-weight: 650;
      line-height: 1.25
    }

    .suite-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr);
      gap: 14px
    }

    .suite-flow-panel,
    .suite-side-panel {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #fff;
      padding: 17px
    }

    .suite-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px
    }

    .suite-panel-head b {
      font-size: 14px;
      font-weight: 850;
      color: var(--ink)
    }

    .suite-panel-head span {
      font-size: 11px;
      font-weight: 700;
      color: var(--gray-light)
    }

    .suite-flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      position: relative
    }

    .suite-step {
      position: relative;
      min-height: 116px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: linear-gradient(180deg, #fff, #FAF9F7);
      padding: 13px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .suite-step:after {
      content: "";
      position: absolute;
      top: 50%;
      right: -11px;
      width: 11px;
      height: 1px;
      background: var(--border)
    }

    .suite-step:last-child:after {
      display: none
    }

    .suite-step i {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--bg-gray);
      color: var(--gray);
      display: grid;
      place-items: center;
      font-size: 10px;
      font-style: normal;
      font-weight: 900
    }

    .suite-step b {
      font-size: 14px;
      font-weight: 850;
      line-height: 1.22;
      color: var(--ink)
    }

    .suite-step span {
      font-size: 12px;
      font-weight: 700;
      color: var(--gray)
    }

    .suite-step.is-active {
      border-color: var(--orange-border);
      background: linear-gradient(180deg, #fff, var(--orange-soft))
    }

    .suite-step.is-active i {
      background: var(--orange);
      color: #fff
    }

    .suite-impact-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border)
    }

    .suite-impact-row:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .suite-impact-row i {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-style: normal;
      font-weight: 900;
      flex: 0 0 auto
    }

    .suite-impact-row b {
      display: block;
      color: var(--ink);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.2
    }

    .suite-impact-row small {
      display: block;
      margin-top: 4px;
      color: var(--gray);
      font-size: 11px;
      font-weight: 650;
      line-height: 1.25
    }

    .module-connector {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      margin: 45px 0 -14px;
      color: var(--gray);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: center
    }

    .module-connector span {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent)
    }

    /* önce/sonra fotoğraf çifti */
    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      margin-top: 70px
    }

    .compare-card {
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      background: #fff;
      border: 1px solid var(--border)
    }

    .compare-card .photo {
      height: 290px
    }

    .compare-cap {
      font-size: 14px;
      color: var(--gray);
      font-weight: 500;
      padding: 16px 18px;
      line-height: 1.5
    }

    .compare-tag {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--ink);
      backdrop-filter: blur(4px);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: 100px;
      z-index: 2
    }

    .compare-card.after .compare-tag {
      background: var(--orange);
    }

    /* görünürlük bölümü split */
    .vis-in {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
      margin-top: 44px
    }

    #gorunurluk .sec-head {
      max-width: 840px;
      margin: 0 auto;
      text-align: center
    }

    #gorunurluk .sec-num {
      justify-content: center
    }

    #gorunurluk .sec-h {
      font-size: clamp(36px, 4.4vw, 46px)
    }

    #gorunurluk .vis-in {
      max-width: var(--content-w);
      margin: 64px auto 0;
      gap: 120px;
      align-items: center
    }

    #gorunurluk .qa-list {
      width: 100%;
      justify-self: end
    }

    #gorunurluk .screen {
      width: 100%;
      justify-self: start
    }

    .qa-list {
      display: flex;
      flex-direction: column
    }

    .qa-row {
      display: flex;
      gap: 14px;
      padding: 18px 0;
    }

    .qa-row:not(:last-child) {
      border-bottom: 1px solid var(--border)
    }

    .qa-row:first-child {
      padding-top: 0
    }

    .qa-row .qi {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: var(--blue-soft);
      color: var(--blue);
      display: grid;
      place-items: center;
      flex-shrink: 0
    }

    .qa-row h4 {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.25
    }

    .qa-row p {
      font-size: 15px;
      color: var(--gray);
      margin-top: 8px;
      line-height: 1.58
    }

    /* =================== 00 · NE KAZANDIRIR (fayda şeridi) =================== */
    .gain-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 56px
    }

    .gain-card {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px
    }

    .gain-card .gi {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: var(--deep-soft);
      color: var(--deep);
      display: grid;
      place-items: center;
      flex-shrink: 0
    }

    .gain-card p {
      font-size: 16px;
      font-weight: 650;
      color: var(--ink);
      line-height: 1.45;
      padding-top: 5px
    }

    /* =================== 10 · GÜVEN / REFERANS =================== */
    /* Section background rhythm: header hariç tüm ana bölümler */
    .hero-facts,
    #sorun,
    #moduller,
    #gorunurluk,
    #referans,
    #kazanim {
      background: #fff
    }

    #akis,
    #uretim,
    #neden,
    #soru {
      background: var(--bg-soft)
    }

    #moduller .wrap {
      background: transparent
    }

    #moduller .mod-screen--suite {
      background: #fff
    }
    #kazanim .sec-head {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    #kazanim .sec-num {
      justify-content: center;
    }

    #moduller .mod-suite-body {
      background: #fff
    }

    #referans .sec-head {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center
    }

    #referans .sec-num {
      justify-content: center
    }

    .sector-list {
      margin: 28px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px 12px;
      flex-wrap: wrap;
    }

    .sector-list span {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--bg-soft);
      padding: 9px 15px;
      color: var(--gray);
      font-size: 14px;
      font-weight: 760;
      line-height: 1;
      box-shadow: 0 14px 36px -32px rgba(20, 24, 31, .25)
    }

    /* müşteri logo şeridi — tam genişlik, sonsuz kayan */
    .logo-strip {
      margin-top: 40px;
      border-top: 1px solid var(--border);
      padding-top: 30px
    }

    .logo-strip-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray-light);
      margin-bottom: 24px
    }

    .logo-marquee {
      width: 100%;
      max-width: 100%;
      margin: 100px 0;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
    }

    .logo-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: none;
      will-change: transform
    }

    .logo-track:hover {
      animation-play-state: paused
    }

    /* min-width:100% kaldırıldı — set container'dan darsa esner, sonunda boşluk
       kalır ve JS o boşluğu set genişliği sanar; döngüde aralık olarak görünür.
       Genişliği içerik belirlesin, kopyalamayı JS yapsın. */
    .logo-set {
      display: flex;
      align-items: center;
      gap: 78px;
      flex: 0 0 auto;
      padding-right: 78px
    }

    .client-logo {
      flex-shrink: 0;
      opacity: .72;
      filter: grayscale(1);
      transition: opacity .2s, filter .2s
    }

    .client-logo:hover {
      opacity: 1;
      filter: grayscale(0)
    }

    .client-logo span {
      font-weight: 800;
      font-size: 16px;
      letter-spacing: .01em;
      color: var(--ink);
      font-variation-settings: "opsz" 32;
      white-space: nowrap
    }

    .client-logo img{display:block;max-height:46px;max-width:190px;width:auto;height:auto;object-fit:contain}
/* client-logo içine gerçek marka logosu koymak için: <img src="logo.svg" style="max-height:24px;width:auto"> kullanılabilir */
    @keyframes logoScroll {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    .trust-in {
      display: grid;
      grid-template-columns: 1fr;
      gap: 50px;
      align-items: stretch;
      margin-top: 52px
    }

    .testi {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #080E21 0%, #111B37 54%, #261f32 160%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 30px;
      padding: 48px;
      display: grid;
      gap: 34px;
      color: #fff
    }

    .testi:before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 29px;
      background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .16), transparent 34%), radial-gradient(circle at 88% 16%, rgba(244, 71, 11, .32), transparent 28%);
      pointer-events: none
    }

    .testi:after {
      content: "";
      position: absolute;
      left: 48px;
      right: 48px;
      bottom: 112px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08), transparent)
    }

    .testi-quote {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
      max-width: 980px
    }

    .testi .tq {
      width: 60px;
      height: 60px;
      color: rgba(255, 255, 255, .2);
      margin-top: 2px
    }

    .testi p {
      max-width: 820px;
      font-size: clamp(25px, 2.35vw, 34px);
      font-weight: 760;
      color: #fff;
      line-height: 1.3;
      letter-spacing: 0;
      font-variation-settings: "opsz" 32
    }

    .testi-foot {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding-top: 4px
    }

    .testi-person {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0
    }

    .testi-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      color: var(--orange);
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 14px;
      flex-shrink: 0;
      box-shadow: 0 18px 38px -24px rgba(0, 0, 0, .45);
      overflow: hidden;
    }

    .testi-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.testi-foot b {
      display: block;
      font-size: 16px;
      font-weight: 850;
      color: #fff;
      line-height: 1.2
    }

    .testi-foot span {
      font-size: 13px;
      color: rgba(255, 255, 255, .68);
      line-height: 1.35
    }

    .testi-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      padding: 13px 18px;
      box-shadow: 0 22px 46px -34px rgba(0, 0, 0, .55);
      font-variation-settings: "opsz" 32;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap
    }

    .testi-logo span {
      display: block;
      font-size: 19px;
      font-weight: 900;
      color: var(--orange)
    }

    .testi-logo b {
      display: block;
      font-size: 19px;
      font-weight: 900;
      color: var(--ink)
    }

    .testi-logo img{display:block;max-height:44px;max-width:172px;width:auto;height:auto;object-fit:contain;opacity:1;filter:none}
.trust-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px
    }

    .trust-stat {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      min-height: 150px;
      padding: 24px 26px;
      border: 0;
      border-radius: 18px;
      background: #fff;
      box-shadow: var(--sh-sm);
      transition: transform .18s, box-shadow .18s
    }

    .trust-stat:hover {
      transform: translateY(5px);
      box-shadow: var(--sh-lg)
    }

    .trust-stat:last-child {
      padding-bottom: 24px
    }

    .trust-stat .ti {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--orange-soft);
      color: var(--orange);
      display: grid;
      place-items: center;
      flex: 0 0 56px;
      border: 0;
      box-shadow: none
    }

    .trust-stat .ti svg {
      width: 23px;
      height: 23px;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .trust-stat h4 {
      font-size: 19px;
      font-weight: 850;
      letter-spacing: 0;
      line-height: 1.24;
      color: var(--ink)
    }

    .trust-stat p {
      font-size: 15px;
      color: var(--gray);
      margin-top: 10px;
      line-height: 1.62
    }
/* =================== RESPONSIVE =================== */
    @media (max-width:1080px) {
      .testi-quote {
        grid-template-columns: 1fr;
        gap: 14px
      }

      .testi-foot {
        align-items: flex-start;
        flex-direction: column
      }

      .testi-logo img{display:block;max-height:44px;max-width:172px;width:auto;height:auto;object-fit:contain;opacity:1;filter:none}
.trust-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      #gorunurluk .qa-list,
      #gorunurluk .screen {
        max-width: 640px;
        justify-self: center
      }

      .mod-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .qa-grid,
      .why-grid,
      .gain-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .mfg-in,
      .buy-in,
      .vis-in,
      .trust-in {
        grid-template-columns: 1fr;
        gap: 100px
      }

      .flow-dashboard-layout {
        grid-template-columns: 1fr;
        gap: 42px
      }

      .flow-dashboard-layout .sec-head {
        max-width: 760px
      }

      .flow-dashboard-visual {
        min-height: auto
      }

      .flow-dashboard-visual .trust-dashboard {
        margin: 0;
        width: 100%
      }

      .flow-dashboard-visual .trust-dashboard>.dash-alerts {
        position: static;
        width: auto;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 14px
      }

      .flow-dashboard-visual .dash-alert {
        width: auto
      }

      .mfg-visual {
        order: -1
      }

      .hero-facts .facts-in {
        grid-template-columns: repeat(2, 1fr)
      }

      .hero-fact:nth-child(3) {
        border-left: none
      }

      .kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .screen-row {
        grid-template-columns: 1fr
      }

      .suite-tabs {
        grid-template-columns: repeat(4, 1fr)
      }

      .suite-kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .suite-grid {
        grid-template-columns: 1fr
      }

      .suite-flow {
        grid-template-columns: 1fr
      }

      .suite-step:after {
        display: none
      }

      .compare {
        grid-template-columns: 1fr
      }

      .page-head {
        display: block;
        min-height: auto;
        padding: 52px 0
      }

      .page-head-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        min-height: auto;
        padding-top: 0;
        padding-bottom: 0
      }

      .head-visual {
        height: 420px;
        order: -1
      }

      .head-person {
        display: none
      }

      .hv-svg {
        transform: none
      }

      .hv-svg {
        max-width: 360px
      }
    }

    @media (max-width:760px) {
      .testi {
        padding: 30px 24px;
        border-radius: 22px
      }

      .testi p {
        font-size: clamp(21px, 6vw, 28px)
      }

      .testi-logo img{display:block;max-height:44px;max-width:172px;width:auto;height:auto;object-fit:contain;opacity:1;filter:none}
.trust-stats {
        grid-template-columns: 1fr
      }

      .trust-stat {
        min-height: 0;
        padding: 24px
      }

      #gorunurluk .sec-h {
        font-size: clamp(31px, 9vw, 38px)
      }
      .trust-problems {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .mod-grid,
      .qa-grid,
      .why-grid,
      .gain-grid {
        grid-template-columns: 1fr
      }

      .step {
        grid-template-columns: 44px 1fr;
        gap: 16px
      }

      .step-n {
        width: 44px;
        height: 44px;
        font-size: 16px
      }

      .step::before {
        left: 21px
      }

      .foot-in {
        flex-direction: column;
        align-items: flex-start
      }

      .close-band::before {
        width: 420px;
        height: 420px
      }

      .screen-body {
        padding: 16px
      }

      .mod-suite-body {
        padding: 16px
      }

      .suite-tabs {
        grid-template-columns: repeat(2, 1fr)
      }

      .suite-kpis {
        grid-template-columns: 1fr
      }

      .module-connector {
        grid-template-columns: 1fr;
        margin: 24px 0 -8px;
        gap: 10px
      }

      .module-connector span {
        display: none
      }

      .kpis {
        grid-template-columns: 1fr 1fr;
        gap: 8px
      }

      .testi {
        padding: 26px 24px
      }

      .head-visual {
        height: 320px
      }

      .head-person {
        display: none
      }

      .hv-svg {
        transform: none
      }

      .hv-svg {
        max-width: 260px
      }

      .logo-row {
        justify-content: space-between;
        gap: 20px 28px
      }

      .flow-dashboard-visual .dash-body {
        grid-template-columns: 1fr
      }

      .flow-dashboard-visual .dash-side {
        display: none
      }

      .flow-dashboard-visual .erp-kpis,
      .flow-dashboard-visual .erp-dash-grid,
      .flow-dashboard-visual .erp-summary-row {
        grid-template-columns: 1fr
      }

      .flow-dashboard-visual .trust-dashboard>.dash-alerts {
        grid-template-columns: 1fr
      }

      .flow-dashboard-visual .dash-top {
        align-items: flex-start;
        flex-direction: column
      }

      .flow-dashboard-copy .flow-point {
        font-size: 15px
      }
    }

/* =========================================================
   REFERANS DÖNGÜSÜ
   Üstte logo şeridi kayıyor; burada ikinci bir kaydırma yok.
   Sözler tek grid hücresinde üst üste durur, yalnızca opacity
   değişir. Yükseklik en uzun söze göre sabit — zıplama olmaz.
   ========================================================= */
/* --- yorum kutusu: diğer beş çözüm sayfasıyla birebir aynı ---
   ERP'deki koyu gradient kutu, 34px'lik yazı ve pill logo yalnızca bu
   sayfada duruyordu. Aşağıdaki kurallar o eski görünümü ezer; blok
   dosyanın sonunda olduğu için media query içindekiler de dahil.
   Altındaki .trust-stats üçlüsüne dokunulmuyor. */
.testi{max-width:none;border:1px solid var(--border);border-radius:26px;background:var(--bg-soft);padding:34px 36px;display:block;color:var(--ink);overflow:visible}
.testi::before,.testi::after{content:none}
.testi .tq{width:30px;height:30px;color:var(--deep);margin:0 0 16px;display:block}
.testi p{max-width:none;font-size:20px;line-height:1.55;font-weight:650;color:var(--ink);letter-spacing:-.008em;font-variation-settings:normal}
.testi-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding-top:22px;border-top:1px solid var(--border);flex-wrap:wrap}
.testi-person{display:flex;align-items:center;gap:13px}
.testi-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-gray);border:0;box-shadow:none}
.testi-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.testi-foot b{display:block;font-size:15.5px;font-weight:850;color:var(--ink);line-height:1.2}
.testi-foot span span{display:block;font-size:13px;color:var(--gray);margin-top:3px}
.testi-logo{display:block;background:none;border-radius:0;padding:0;box-shadow:none}
.testi-logo img{display:block;max-height:44px;max-width:172px;width:auto;height:auto;object-fit:contain;opacity:1;filter:none}

.testi-wrap{max-width:820px;margin:0 auto}
.testi-stage{display:grid}
.testi{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
.testi.is-on{opacity:1;visibility:visible}
.testi-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.testi-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--border);cursor:pointer;transition:background .2s,width .2s}
.testi-dot:hover{background-color: var(--gray-light)}
.testi-dot.is-on{width:24px;border-radius:999px;background:var(--deep)}
.testi-dot:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .testi{transition:none}
}


/* =================== RAKAM HIZASI ===================
   Alt alta dizilen sayilar sutunda kaysin diye tabular.
   Akan metin orantili rakamda kaliyor.
   ================================================== */
/* oran ve degisim */
.up {
  font-variant-numeric: tabular-nums
}

/* adet ve miktar */
.kv {
  font-variant-numeric: tabular-nums
}

/* kare rozetin icindeki isaret kutuya gore olculur */
.suite-impact-row i > svg {
  width: 18px;
  height: 18px
}

/* Yorum yüksekliği içeriğinden geliyor: gizli yorumlar akıştan çıkıyor,
   görünen yorum kendi boyunu alıyor. Üst üste bindirmede kutu en uzun
   yoruma göre boyutlanıyor, kısa yorumun altında boşluk kalıyordu. */
.testi-stage {
  display: block
}

.testi-stage .testi {
  display: none;
  opacity: 1;
  visibility: visible
}

.testi-stage .testi.is-on {
  display: block;
  animation: testiGir .4s ease both
}

@keyframes testiGir {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion: reduce) {
  .testi-stage .testi.is-on {
    animation: none
  }
}

/* Sekmeye tıklandığında bölüm sabit menünün altında kalmasın:
   menü 80 piksel, üstüne biraz nefes payı. */
section[id] {
  scroll-margin-top: 104px
}