/* ==========================================================================
   STMACH Robotics - production.css
   Uretim hatti - 5 adim (Hammadde Isleme -> Kalite Kontrol)
   Adimlar arasi baglanti cizgisi logical property ile kurulur (RTL guvenli).
   ========================================================================== */

.production__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) {
  .production__grid { grid-template-columns: .85fr 1.15fr; gap: var(--space-9); }
}

.production__media { border-radius: var(--radius-lg); overflow: hidden; }

.steps { counter-reset: step; display: grid; gap: 0; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

/* dikey baglanti cizgisi */
.step::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--space-4) + 40px);
  inset-block-end: 0;
  inset-inline-start: 19px;
  inline-size: 2px;
  background: var(--st-line-ink);
}
.step:last-child::before { display: none; }

.step__no {
  counter-increment: step;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 2px solid var(--st-orange);
  border-radius: var(--radius-pill);
  background: var(--bg-ink);
  color: var(--st-orange-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step__no::before { content: counter(step, decimal-leading-zero); }

.step__body { min-inline-size: 0; padding-block-start: var(--space-1); }

.step__title { margin-block-end: var(--space-1); font-size: var(--fs-h4); }

.step__text {
  margin: 0;
  color: var(--text-muted-ink);
  font-size: var(--fs-sm);
}

.step__link { margin-block-start: var(--space-2); }

/* ------------------------------------------------------- HAT OZELLIK KARTI
   uretim.html'deki "ortak ozellikler" bloklari. Numarasiz, gorselsiz -
   .service (numarali) ve .cap-card (gorselli) yerine sade bir kart.
   Vurgu ust kenardaki turuncu seritte. */
.feature {
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-block-start: 3px solid var(--st-orange);
  border-radius: var(--radius-lg);
}
.feature__title { margin-block-end: var(--space-2); font-size: var(--fs-h4); }
.feature__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------- ADIM KARTI
   uretim.html'deki fotografli imalat adimlari. Once about.css icinde
   .cap-card adiyla kurumsal.html'de duruyordu; fotografli anlatim uretim
   sayfasina tasininca buraya, sira numarasi eklenerek gecti.
   Kart tiklanabilir degil - bilgi kartidir, hover'da "gidilecek" hissi
   verilmez. */
.step-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step-card__media { border-radius: 0; }
.step-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.step-card__no {
  color: var(--st-orange-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.step-card__title { margin: 0; font-size: var(--fs-h4); }
.step-card__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}