/* ==========================================================================
   STMACH Robotics - services.css
   7 hizmet kalemi - numarali kart deseni (.service__no)
   ========================================================================== */

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  block-size: 100%;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service:hover { border-color: var(--st-orange); box-shadow: var(--shadow-md); }

/* Sol kenarda vurgu seridi - hover'da acilir */
.service::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--st-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.service:hover::before { transform: scaleY(1); }

.service__no {
  color: var(--st-orange-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.service__title { margin: 0; font-size: var(--fs-h4); }

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

.service__foot { margin-block-start: auto; padding-block-start: var(--space-4); }

/* Koyu zeminde ayni kart */
.section--ink .service {
  background: color-mix(in srgb, var(--st-white) 5%, transparent);
  border-color: var(--st-line-ink);
}
.section--ink .service:hover { border-color: var(--st-orange); }
.section--ink .service__no { color: var(--st-orange-ink); }
.section--ink .service__text { color: var(--text-muted-ink); }

/* ------------------------------------------------------ KAPSAM MADDELERI
   Sadece hizmetler.html kartlarinda; services.json'daki "scope" alanindan
   uretilir. Ana sayfadaki kisa kartlarda bu blok yok. */
.service__scope {
  display: grid;
  gap: var(--space-2);
}
.service__scope-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.service__scope-item::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: .55em;
  border-radius: var(--radius-pill);
  background: var(--st-orange);
}
.section--ink .service__scope-item { color: var(--text-muted-ink); }