/* ==========================================================================
   Ana sayfa (tur 3 vitrin paketi, 11.11.2026). Yalnız ana sayfada yüklenir (ctx.duzen ekStil); site.css bütçesine girmez.
   Eski 40-ana.css içeriği (dizin, markalar, adımlar, servis, rehber) buraya taşındı.

   Palet "Sıcak beyaz + kobalt" (tema-ust paketi, 00-token.css): içerik ve tablolar sayfa zemininde (sıcak beyaz),
   büyük alanlar kobalt bant: açılış (vitrin), süreç anlatımı, teklif bandı. Bantlar tema-ust'un .band-kobalt sınıfını
   kullanır (bölgesel rol ataması: metin buz/beyaz, çizgi buz, dolgulu düğme beyaz). Vitrin sahnesi bant içinde sıcak
   beyaz bir "pencere"dir: .zemin-sayfa sınıfı sayfa rollerini geri getirir (mürekkep metin, logo mavisi çizgi).
   Süreç aşamalarının renkleri aynı kobalt rampasındadır; her durakta beyaz metin ≥ 6,1:1, buz ikincil ≥ 4,8:1.

   Aşağıdaki --ana-k* değişkenleri :root'ta hesaplanır ve kalıtımla değişmeden iner (bant içinde rol ataması değişse de).
   Hareket: yalnız transform ve opacity. Gizli başlangıç durumları yalnız betik sınıfı altında (.vt--canli, .surec--canli).
   ========================================================================== */

:root {
  --ana-k950: var(--color-bg-canvas); /* kobalt-950 */
  --ana-k900: var(--color-band-start); /* kobalt-900 */
  --ana-k850: var(--color-accent-solid-hover); /* kobalt-850 */
  --ana-k800: var(--color-band-mid); /* kobalt-800 */
  --ana-k700: var(--color-accent-solid); /* kobalt-700 */
  --ana-k650: var(--color-band-end); /* kobalt-650 */
  --ana-k600: var(--color-border-focus); /* kobalt-600 */
  --ana-beyaz: var(--color-text-inverse);
}

/* Bant içi yardımcı roller (bant elemanında hesaplanır: .band-kobalt atamasından sonra) */
.ana-bant {
  --ana-ince: color-mix(in srgb, var(--color-text-heading) 12%, transparent);
  --ana-cizgi-bant: color-mix(in srgb, var(--color-text-heading) 34%, transparent);
}
/* Vitrin sahnesi: sıcak beyaz pencere, logo mavisi çizgi (sıcak beyazda 4,03:1), mürekkep yazı */
.vt__sahne {
  --ana-sahne: var(--color-bg-page);
  --ana-cizgi: var(--color-accent-line);
  --ana-cizim-dolgu: var(--color-accent-subtle);
  --ana-murekkep: var(--color-text-heading);
  --ana-rozet-metin: var(--color-accent-text);
}

/* ==========================================================================
   0. Yükleme örtüsü (site/betik/yukleme.js kurar; betiksiz ve hareket azaltmada hiç yoktur)
   ========================================================================== */
.yukleme {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--color-band-mid) var(--gradyan-kobalt);
  transition: opacity 360ms var(--ease-out);
}
.yukleme--kalk {
  opacity: 0;
}
.yukleme__ic {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  animation: yukleme-gir 520ms var(--ease-out) both;
}
/* Logo beyaz çizilir (PNG mavi; kobalt zeminde okunsun) */
.yukleme__logo {
  width: min(300px, 64vw);
  height: auto;
  filter: brightness(0) invert(1);
}
.yukleme__cubuk {
  display: block;
  width: min(240px, 52vw);
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  /* Örtü .band-kobalt dışında (body'ye eklenir): ince beyaz iz semantic metin renginden türetilir, primitive kullanılmaz */
  background: color-mix(in srgb, var(--ana-beyaz) 18%, transparent);
}
.yukleme__dolgu {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ana-beyaz);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);
}
@keyframes yukleme-gir {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .yukleme {
    display: none;
  }
}

/* ==========================================================================
   1. Makine vitrini (açılış)
   ========================================================================== */
.vt {
  /* Başlığın altına uzanır: saydam başlıkta (html.ust-saydam) bant üstte görünür; opak başlıkta yalnız üst pay örtülür */
  margin-top: calc(-1 * var(--header-h) - 1px);
  padding: calc(var(--header-h) + clamp(16px, 2vw, 28px)) 0 clamp(36px, 4.5vw, 64px);
}
/* Başlık kısa tutulur: açılışın kahramanı makinedir. 1440×900'de başlık iki satır, makine sahnesi ilk ekranda tam. */
.vt__bas {
  display: grid;
  gap: var(--space-2) var(--gutter);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.vt__baslik {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1rem + 2vw, 2.375rem);
  font-stretch: 125%;
  font-weight: 750;
  letter-spacing: var(--tracking-hero);
  line-height: 1.08;
  text-wrap: balance;
}
.vt__alt {
  max-width: 72ch;
  color: var(--color-text-secondary);
}
@media (min-width: 1100px) {
  .vt__baslik {
    max-width: none;
  }
}

.vt__pencere {
  position: relative;
}
.vt__ray {
  display: grid;
  gap: var(--space-8);
}
.vt__slayt {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
}
@media (min-width: 900px) {
  .vt__slayt {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(28px, 3.4vw, 48px);
  }
}

/* --- Denetimler (yalnız betikle görünür: .js-var; vitrin.js kurulmadıysa da gizli) --- */
.vt:not(.vt--canli) .vt__denetim,
.vt:not(.vt--canli) .vt__evreler {
  display: none;
}
.vt__denetim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.vt__ok,
.vt__durdur,
.vt__nokta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  border: var(--border-frame) solid var(--ana-cizgi-bant);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-heading);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--sure-basma) var(--ease-out);
}
.vt__ok {
  width: 44px;
  padding: 0;
}
.vt__durdur {
  margin-left: auto;
  padding: 0 var(--space-4) 0 var(--space-3);
}
.vt__ok:active,
.vt__durdur:active,
.vt__nokta:active {
  transform: scale(0.97);
}
.vt__durdur-ikon--oynat,
.vt__durdur--oynat .vt__durdur-ikon--duraklat {
  display: none;
}
.vt__durdur--oynat .vt__durdur-ikon--oynat {
  display: block;
}
.vt__noktalar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.vt__nokta {
  position: relative;
  padding: 0 var(--space-4);
  border-color: transparent;
  color: var(--color-text-secondary);
}
.vt__nokta[aria-current='true'] {
  border-color: var(--color-text-heading);
  color: var(--color-text-heading);
}
/* Geçerli makinenin süresi: düğmenin altında ince çizgi (betik scaleX ile doldurur) */
.vt__sure {
  position: absolute;
  right: var(--space-4);
  bottom: 7px;
  left: var(--space-4);
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--ana-cizgi-bant);
  opacity: 0;
}
.vt__nokta[aria-current='true'] .vt__sure {
  opacity: 1;
}
.vt__sure-dolgu {
  display: block;
  height: 100%;
  background: var(--color-text-heading);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (hover: hover) and (pointer: fine) {
  .vt__ok:hover,
  .vt__durdur:hover,
  .vt__nokta:hover {
    border-color: var(--color-text-heading);
    color: var(--color-text-heading);
    background: var(--ana-ince);
  }
}
@media (max-width: 639px) {
  /* Dar ekran: oklar ve duraklat üstte, makine adları altta dört eşit sütun */
  .vt__noktalar {
    order: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  .vt__nokta {
    padding: 0 var(--space-1);
    font-size: 0.8125rem;
    font-stretch: var(--font-width-dense);
  }
  .vt__sure {
    right: var(--space-2);
    left: var(--space-2);
  }
}

/* --- Kayan ray (betikle) ---
   Pencere yalnız yatayda kırpar; 8 px taşırılır ve slayt aynı payı iç boşluk olarak alır: odak halkası kırpılmaz,
   sıradaki makinenin kenarı görünmez. */
.vt--canli .vt__pencere {
  overflow-x: clip;
  margin-inline: -8px;
}
.vt--canli .vt__denetim {
  padding-inline: 8px;
}
.vt--canli .vt__ray {
  display: flex;
  gap: 0;
  transition: transform 760ms var(--ease-in-out);
}
.vt--canli .vt__slayt {
  flex: 0 0 100%;
  padding-inline: 8px;
}
.vt--durgun .vt__ray,
.vt--sabit .vt__ray {
  transition: none;
}

/* --- Sahne: sıcak beyaz plaka; fotoğraf ve temsili çizim üst üste --- */
.vt__sahne {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-plate);
  background: var(--ana-sahne);
  color: var(--ana-cizgi);
  /* Dikey kaydırma tarayıcıda kalır; yatay sürükleme betiğe gelir (makine değiştirir) */
  touch-action: pan-y;
}
@media (min-width: 900px) {
  .vt__sahne {
    aspect-ratio: 3 / 2;
  }
}
/* Fotoğraf: varsayılan (betiksiz, hareket azaltma, "parca" görünümü) sol üst köşede küçük; foto/kullanım görünümünde tam */
.vt__sahne .vt__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  aspect-ratio: auto;
  border-radius: 12px;
  transform: translate(14px, 14px) scale(0.3);
  transform-origin: 0 0;
  transition: transform 900ms var(--ease-in-out);
}
.vt__foto--kucuk img {
  object-fit: scale-down;
}
/* Bulanık zemin kopyası (ana.mjs fotoZeminli): fotoğrafın arkasında kenardan kenara; asıl fotoğraf üstte */
.vt__sahne .vt__foto img.vt__foto-zemin {
  object-fit: cover;
  filter: blur(28px) saturate(1.05);
  transform: scale(1.18);
}
/* Beyaz ya da beyaza yakın fonlu fotoğraf (ana.mjs vt__foto--acik): bulanık kopya yok, zemin beyaz (fotoğrafın fonu) */
.vt__sahne .vt__foto.vt__foto--acik {
  background: var(--white);
}
.vt__sahne .vt__foto picture {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Küçük fotoğrafın sol alt köşesinde, fotoğrafın içinde (çizim etiketleriyle çakışmaz) */
.vt__foto-ad {
  position: absolute;
  top: calc(30% + 14px - 30px);
  left: 20px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--ana-sahne);
  color: var(--ana-murekkep);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.3;
  transition: opacity 300ms var(--ease-out);
}
.vt__medya {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}
.vt__cizim {
  position: absolute;
  inset: 0;
  transition: opacity 500ms var(--ease-out);
}
.vt-cizim__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.vt-cizim__svg .sg {
  fill: var(--ana-cizim-dolgu);
}
.vt-cizim__svg .sz {
  fill: var(--ana-sahne);
}
.vt-cizim__svg .sm {
  stroke: var(--ana-murekkep);
}
.vt-kesik {
  fill: none;
  stroke-dasharray: 4 6;
  opacity: 0.55;
}
.vtp,
.vtp-g,
.vtr {
  transition: opacity 320ms var(--ease-out);
}
.vtr__cizgi {
  stroke-width: 1.5;
}
.vtr__uc {
  fill: var(--ana-cizgi);
  stroke: none;
}
.vtr__daire {
  fill: var(--ana-sahne);
  stroke-width: 2;
}
.vtr__no {
  fill: var(--ana-rozet-metin);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}
.vtr__ad {
  fill: var(--ana-murekkep);
  stroke: var(--ana-sahne);
  stroke-width: 5px;
  paint-order: stroke;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}
.vtr.vt-etkin .vtr__daire {
  fill: var(--ana-rozet-metin);
}
.vtr.vt-etkin .vtr__no {
  fill: var(--ana-sahne);
}
/* Kesit kapağı: patlatılmış hâlde saydam (kesite açılmış) */
.vtp--kapak {
  opacity: 0;
}
/* Görünüm düğmeleri (sahnenin altında, kobalt bant üstünde bölmeli seçici) ve temsili çizim notu */
.vt__evreler {
  display: flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--ana-cizgi-bant);
}
.vt__evre {
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}
.vt__evre[aria-pressed='true'] {
  background: var(--color-text-heading);
  color: var(--ana-k800);
}
@media (pointer: coarse) {
  .vt__evre {
    min-height: 44px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .vt__evre:not([aria-pressed='true']):hover {
    background: var(--ana-ince);
    color: var(--color-text-heading);
  }
}
.vt__arac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.vt__not {
  flex: 1 1 18ch;
  max-width: 44ch;
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.35;
  text-align: right;
  transition: opacity 300ms var(--ease-out);
}
@media (max-width: 639px) {
  .vtr__ad {
    display: none;
  }
  /* Dar ekranda adlar gizli; numara rozeti okunacak boyda (görüş kutusu birimiyle; sahne ≈ 0,56 ölçekte) */
  .vtr__daire {
    r: 20px;
  }
  .vtr__no {
    font-size: 22px;
  }
  .vt__evreler {
    flex: 1 1 100%;
  }
  .vt__evre {
    flex: 1 1 0;
    padding: 0 var(--space-2);
  }
  .vt__not {
    flex-basis: 100%;
    max-width: none;
    text-align: left;
  }
}

/* --- Görünümler (betik data-evre yazar) --- */
.vt--canli .vtp {
  transform: translate(0, 0);
  transition:
    transform 900ms var(--ease-in-out),
    opacity 320ms var(--ease-out);
}
.vt--canli [data-evre='parca'] .vtp {
  transform: translate(var(--dx, 0), var(--dy, 0));
}
.vt--canli .vtp--kapak {
  opacity: 1;
}
.vt--canli [data-evre='parca'] .vtp--kapak {
  opacity: 0;
  transition-delay: 0s, 280ms;
}
.vt--canli .vtr {
  opacity: 0;
}
.vt--canli [data-evre='parca'] .vtr {
  opacity: 1;
  transition-delay: 650ms;
}
/* "Gerçek fotoğraf" etiketi fotoğraf küçülüp yerine oturunca gelir (önce büyük fotoğrafın ortasında beliriyordu) */
.vt--canli [data-evre='parca'] .vt__foto-ad {
  transition-delay: 700ms;
}
.vt--canli [data-evre='foto'] .vt__foto,
.vt--canli [data-evre='kullanim'] .vt__foto {
  transform: none;
}
.vt--canli [data-evre='foto'] .vt__cizim,
.vt--canli [data-evre='kullanim'] .vt__cizim,
.vt--canli [data-evre='foto'] .vt__foto-ad,
.vt--canli [data-evre='kullanim'] .vt__foto-ad,
.vt--canli [data-evre='foto'] .vt__not,
.vt--canli [data-evre='kullanim'] .vt__not {
  opacity: 0;
}
/* Parça vurgusu: seçili parça ve rozeti tam, diğerleri soluk */
.vt__cizim[data-odak] .vtp-g:not(.vt-etkin),
.vt__cizim[data-odak] .vtr:not(.vt-etkin) {
  opacity: 0.25;
}
/* Hareket azaltma: kayma ve parça hareketi yok; görünüm değişimi yalnız opaklıkla */
.vt--durgun .vtp,
.vt--durgun .vt__foto,
.vt--durgun .vt__ray {
  transition: none;
}
.vt--durgun [data-evre] .vtp {
  transform: translate(var(--dx, 0), var(--dy, 0));
}
@media (prefers-reduced-motion: reduce) {
  .vt *,
  .vt *::before {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* --- Bilgi sütunu --- */
.vt__bilgi {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}
.vt__marka {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vt__ad {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-stretch: 110%;
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  text-wrap: balance;
}
.vt__ad a {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .vt__ad a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.16em;
  }
}
.vt__ozet {
  max-width: 54ch;
  color: var(--color-text-secondary);
}
.vt__katlar {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-2);
}
.vt__ara {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: 0;
}
.vt__parcalar,
.vt__kullanim {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vt__parca {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-inline: calc(-1 * var(--space-2));
  padding: 6px var(--space-2);
  border-radius: var(--radius-plate);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.vt__no {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--border-frame) solid var(--ana-cizgi-bant);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1;
}
.vt__parca-metin {
  color: var(--color-text-secondary);
}
.vt__parca-ad {
  display: block;
  color: var(--color-text-heading);
  font-weight: 650;
}
.vt__parca-dugme {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.vt__parca--etkin {
  background: var(--ana-ince);
}
.vt__parca--etkin .vt__no {
  border-color: var(--color-text-heading);
  background: var(--color-text-heading);
  color: var(--ana-k800);
}
.vt__kullanim li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.vt__kullanim li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 10px;
  height: 2px;
  background: var(--color-text-heading);
}
/* Görünümlere göre işlevler ya da kullanım alanları: aynı hücrede üst üste, yalnız opaklıkla geçer */
.vt--canli .vt__katlar {
  grid-template-areas: 'kat';
}
.vt--canli .vt__kat {
  grid-area: kat;
  transition:
    opacity 320ms var(--ease-out),
    visibility 0s linear 0s;
}
.vt--canli .vt__kat--kullanim,
.vt--canli [data-evre='kullanim'] .vt__kat--parca {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 240ms var(--ease-out),
    visibility 0s linear 240ms;
}
.vt--canli [data-evre='kullanim'] .vt__kat--kullanim {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 320ms var(--ease-out) 120ms,
    visibility 0s linear 0s;
}
.vt__degerler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--ana-cizgi-bant);
}
.vt__degerler dt {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.3;
}
.vt__degerler dd {
  margin: 2px 0 0;
  font-size: var(--text-small);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vt__eylem {
  margin-top: var(--space-2);
}

/* ==========================================================================
   2. Asistan sorusu: belirgin, geniş girdi
   ========================================================================== */
.ana-soru {
  padding-block: clamp(40px, 5.5vw, 72px);
}
.soru {
  display: grid;
  gap: var(--space-4) var(--gutter);
}
.soru__baslik {
  font-size: var(--text-h2);
}
.soru__baslik label {
  cursor: pointer;
}
.soru__alan {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.soru__satir {
  display: grid;
  gap: var(--space-3);
}
.soru__girdi {
  position: relative;
  display: block;
  min-width: 0;
}
.soru__ikon {
  position: absolute;
  top: 50%;
  left: 20px;
  color: var(--color-accent-text);
  pointer-events: none;
  translate: 0 -50%;
}
.soru__satir .girdi {
  min-height: 60px;
  padding-left: 56px;
  border-width: var(--border-frame);
  border-color: var(--color-border-strong);
  font-size: 1.125rem;
}
.soru__satir .girdi:focus-visible {
  border-color: var(--color-border-focus);
}
.soru__satir .dugme {
  min-height: 60px;
  padding-inline: var(--space-6);
  white-space: nowrap;
}
.soru__not {
  max-width: 76ch;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-dense);
}
@media (min-width: 640px) {
  .soru__satir {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (min-width: 1100px) {
  .soru {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
  .soru__baslik {
    padding-top: 10px;
  }
}

/* ==========================================================================
   3. Süreç anlatımı: kobalt bant, aşamaya göre renk (site/sahne/istasyon-seridi.mjs → surecAnlatimi)
   ========================================================================== */
.ana-surec {
  padding-block: var(--band);
}
.ana-surec__bas {
  margin-bottom: var(--space-7);
}
.ana-surec__bas p {
  max-width: 60ch;
  color: var(--color-text-secondary);
}
/* Aşama renkleri: aynı mavi ailede yumuşak gradyanlar; geçiş yalnız opaklık. Her birinde beyaz metin ≥ 4,8:1 */
.surec__zemin {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.surec__renk {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
}
.surec__renk:first-child,
.surec--renkli .surec__renk.surec__renk--etkin {
  opacity: 1;
}
.surec--renkli .surec__renk:first-child:not(.surec__renk--etkin) {
  opacity: 0;
}
.surec__renk[data-renk='olcmek'] {
  background-image: linear-gradient(170deg, var(--ana-k800) 0%, var(--ana-k600) 100%);
}
.surec__renk[data-renk='elemek'] {
  background-image: linear-gradient(170deg, var(--ana-k900) 0%, var(--ana-k700) 100%);
}
.surec__renk[data-renk='kapatmak'] {
  background-image: linear-gradient(170deg, var(--ana-k850) 0%, var(--ana-k650) 100%);
}
.surec__renk[data-renk='dikmek'] {
  background-image: linear-gradient(170deg, var(--ana-k950) 0%, var(--ana-k800) 100%);
}
.surec__renk[data-renk='denetlemek'] {
  background-image: linear-gradient(170deg, var(--ana-k700) 0%, var(--ana-k900) 100%);
}
.surec__renk[data-renk='kaplamak'] {
  background-image: linear-gradient(170deg, var(--ana-k900) 0%, var(--ana-k650) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .surec__renk {
    transition-duration: 300ms;
  }
}

.surec__liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.surec__asama {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  padding-bottom: var(--space-8);
}
.surec__asama:last-child {
  padding-bottom: 0;
}
/* Dikey hat: düğüm + aşamanın altına uzanan çizgi; betik etkin aşamaya kadar doldurur */
.surec__hat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36px;
}
.surec__hat::before,
.surec__iz {
  content: '';
  position: absolute;
  top: 6px;
  bottom: -6px;
  left: 17px;
  width: 2px;
  background: var(--ana-cizgi-bant);
}
.surec__iz {
  background: var(--color-text-heading);
  transform-origin: 50% 0;
}
.surec__asama:last-child .surec__hat::before,
.surec__asama:last-child .surec__iz {
  display: none;
}
.surec__dugum {
  position: absolute;
  top: 0;
  left: 8px;
  width: 20px;
  height: 20px;
  border: var(--border-frame) solid var(--color-text-heading);
  border-radius: var(--radius-pill);
  background: var(--ana-k800);
}
.surec__dugum::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--color-text-heading);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.surec__asama--etkin .surec__dugum::after {
  opacity: 1;
}
.surec--canli .surec__iz {
  transform: scaleY(0);
  transition: transform 900ms var(--ease-out);
}
.surec--canli .surec__asama--gecti .surec__iz {
  transform: scaleY(1);
}
.surec__sema,
.surec__metin {
  grid-column: 2;
  min-width: 0;
}
/* Büyük şema: şeritteki çizimin aynısı, bant üstünde açık mavi çizgi, beyaz sonuç */
.surec .serit__sema {
  width: min(100%, 360px);
  height: auto;
  color: var(--color-accent-line);
}
.surec .serit__sema .sg {
  fill: var(--ana-ince);
}
.surec .serit__sema .sz {
  fill: var(--ana-k800);
}
.surec .serit__sema .sm {
  stroke: var(--color-text-heading);
}
.surec__sema {
  transition: opacity 500ms var(--ease-out);
}
.surec--renkli .surec__asama:not(.surec__asama--etkin) .surec__sema {
  opacity: 0.55;
}
.surec__metin {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.surec__ad {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-stretch: 120%;
}
.surec__tanim {
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.4;
}
.surec__aciklama {
  max-width: 58ch;
  color: var(--color-text-secondary);
}
.surec__ornek {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.surec__ornek span {
  font-weight: 600;
}
.surec__ornek a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.surec__eylem {
  margin-top: var(--space-1);
}
@media (min-width: 900px) {
  .surec__asama {
    grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: center;
    min-height: min(52vh, 440px);
    padding-block: var(--space-6);
  }
  .surec__asama:last-child {
    padding-bottom: var(--space-6);
  }
  .surec__hat {
    width: 56px;
  }
  .surec__hat::before,
  .surec__iz {
    top: calc(50% + 10px);
    bottom: calc(-50% + 10px);
    left: 27px;
  }
  .surec__dugum {
    top: calc(50% - 10px);
    left: 18px;
  }
  .surec__sema {
    grid-column: 2;
  }
  .surec__metin {
    grid-column: 3;
  }
}

/* ==========================================================================
   4. Kullanım örnekleri: büyük fotoğraf + sektör + örnek makine + kategoriler
   ========================================================================== */
.sektorler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sektor {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}
.sektor__gorsel {
  display: block;
  border-radius: var(--radius-plate);
}
.sektor__govde {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.sektor__ad {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  font-stretch: 120%;
}
.sektor__metin {
  max-width: 60ch;
  color: var(--color-text-secondary);
}
.sektor__etiket {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.sektor .vitrin__ad {
  font-weight: 650;
}
.sektor .vitrin__ad a {
  color: var(--color-text-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.sektor__kategoriler {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.sektor__kategoriler li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: var(--border-hair) solid var(--color-border-separator);
  font-size: 0.9375rem;
  font-stretch: var(--font-width-dense);
}
.sektor__kategoriler li:last-child {
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.sektor__kategoriler a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-primary);
  text-decoration: none;
}
.sektor__kategoriler a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.sektor__kategoriler .sayi {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
@media (hover: hover) and (pointer: fine) {
  .sektor:has(.sektor__gorsel:hover) .plaka {
    background: var(--color-bg-plate-hover);
  }
  .sektor__kategoriler a:hover,
  .sektor .vitrin__ad a:hover {
    color: var(--color-accent-text);
  }
}
@media (min-width: 900px) {
  .sektorler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   5. Ürün grupları: dört sütunlu dizin (40-ana.css'ten taşındı)
   ========================================================================== */
.dizin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dizin__grup {
  display: grid;
  align-content: start;
  padding-top: var(--space-4);
  border-top: var(--border-frame) solid var(--color-accent-line);
}
.dizin__grup h3 a {
  color: var(--color-text-heading);
  text-decoration: none;
}
.dizin__grup > p {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-dense);
}
.dizin__grup ul {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
/* Satırın tamamı dokunma alanı: bağlantı en az 44px, ::after satırı kaplar (T-12) */
.dizin__grup li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
  break-inside: avoid;
  border-top: var(--border-hair) solid var(--color-border-separator);
  font-size: 0.9375rem;
  font-stretch: var(--font-width-dense);
  line-height: 1.35;
}
.dizin__grup li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--color-text-primary);
  text-decoration: none;
}
.dizin__grup li a::after,
.sektor__kategoriler a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.dizin__grup li a:focus-visible,
.sektor__kategoriler a:focus-visible {
  outline: none;
}
.dizin__grup li a:focus-visible::after,
.sektor__kategoriler a:focus-visible::after {
  outline: var(--border-frame) solid var(--color-border-focus);
  outline-offset: -2px;
  border-radius: var(--radius-plate);
}
.dizin__grup .sayi {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
@media (hover: hover) and (pointer: fine) {
  .dizin__grup h3 a:hover,
  .dizin__grup li a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}
@media (min-width: 640px) {
  .dizin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .dizin {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--space-6);
  }
  @supports (grid-template-rows: subgrid) {
    .dizin__grup {
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}
@media (min-width: 1200px) {
  .dizin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .dizin__grup--genis ul {
    columns: 2;
    column-gap: var(--space-5);
  }
}

/* ==========================================================================
   6. Markalar: yazıyla marka dizini (40-ana.css'ten taşındı)
   ========================================================================== */
.marka-dizini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marka-dizini li {
  position: relative;
  display: grid;
  gap: var(--space-1);
  align-content: start;
  justify-items: start;
  padding-top: var(--space-3);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.marka-dizini__ad {
  color: var(--color-text-heading);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-stretch: var(--font-width-title);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.marka-dizini__ad::after {
  content: '';
  position: absolute;
  inset: 0;
}
.marka-dizini__ad:focus-visible {
  outline: none;
}
.marka-dizini__ad:focus-visible::after {
  outline: var(--border-frame) solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-plate);
}
.marka-dizini__bilgi {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-stretch: var(--font-width-dense);
  line-height: var(--leading-dense);
}
.marka-dizini .rozet {
  margin-top: var(--space-1);
}
@media (hover: hover) and (pointer: fine) {
  .marka-dizini__ad:hover {
    color: var(--color-accent-text);
  }
}
@media (max-width: 359px) {
  .marka-dizini {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 720px) {
  .marka-dizini {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}
@media (min-width: 1040px) {
  .marka-dizini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   7. Teklif nasıl işler: kobalt bant, üç adım bir hat üstünde
   ========================================================================== */
.ana-teklif {
  margin-top: var(--band);
  padding-block: var(--band);
}
.ana-teklif .bolum__bas p {
  color: var(--color-text-secondary);
}
.adimlar {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.adimlar li {
  position: relative;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  justify-items: start;
}
.adimlar__no {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 36px;
  margin-bottom: var(--space-3);
  border: var(--border-frame) solid var(--color-accent-line);
  border-radius: var(--radius-pill);
  background: var(--ana-k800);
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-stretch: var(--font-width-title);
  font-weight: 700;
  line-height: 1;
}
.adimlar p {
  max-width: 42ch;
  color: var(--color-text-secondary);
}
@media (min-width: 900px) {
  .adimlar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .adimlar li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 17px;
    right: calc(-1 * var(--space-6));
    left: 60px;
    height: var(--border-frame);
    background: var(--color-accent-line);
  }
}

/* ==========================================================================
   8. Servis ve yedek parça (40-ana.css'ten taşındı)
   ========================================================================== */
.ana-servis {
  align-items: start;
}
.ana-servis__metin {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.ana-servis__metin > p:not(.eylemler) {
  max-width: 56ch;
  color: var(--color-text-secondary);
}
.ana-servis__metin .eylemler {
  margin-top: var(--space-2);
}
.ana-servis__plaka dd a {
  color: var(--color-text-heading);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .ana-servis__plaka dd a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}

/* ==========================================================================
   9. Rehber (40-ana.css'ten taşındı)
   ========================================================================== */
.rehber-listesi {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.rehber-listesi li {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.rehber-listesi h3 a {
  color: var(--color-text-heading);
  text-decoration: none;
}
.rehber-listesi p {
  max-width: 62ch;
  color: var(--color-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .rehber-listesi h3 a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}
@media (min-width: 900px) {
  .rehber-listesi li {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    align-items: baseline;
  }
  .rehber-listesi h3 {
    grid-column: span 5;
  }
  .rehber-listesi p {
    grid-column: 7 / span 6;
  }
}