/* ═══════════════════════════════════════════════════════════════
   Starter Product Card — no sale/sold-out/badge merchandising
   language; a quiet, editorial product presentation.
   "primary" is used by BOTH main routes at equal visual weight —
   there is deliberately no hero/secondary size distinction here.
   "text-link" is a single quiet line, not a card at all.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__media, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__media {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card--primary .starter-product-card__media, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card--primary .starter-product-card__media {
  aspect-ratio: 1 / 1;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__image, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms ease;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card:hover .starter-product-card__image, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card:hover .starter-product-card__image {
  transform: scale(1.03);
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__placeholder, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-surface-alt);
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__content, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-sm);
}

/* Optional small label above the title (e.g. "Tam Rutin") — only
   rendered where a call site passes eyebrowLabel; every other usage of
   this card is unaffected. Same quiet caps-label language as
   .starter-products__route-label, just scoped to one card. */
.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__eyebrow, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin-bottom: 4px;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__title, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Site-wide typography pass: "ürün kartı adı" target mobil 15px /
     masaüstü 20px, tutarlı olarak her kart implementasyonunda aynı.
     Serif/display font kept for brand identity; only the size
     changes. */
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__title, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__title {
    font-size: 20px;
  }
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__supporting, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__supporting {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ─── Price + CTA merged onto a single line ──────────────────── */

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__meta, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__price-group, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__price-group {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__price, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__price {
  /* Mobile/tablet: "fiyat" target 18px (was --text-body=16px).
     Restored to --text-body at desktop below. */
  font-size: 18px;
  color: var(--color-text-primary);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__price, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__price {
    font-size: var(--text-body);
  }
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__price-original, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__price-original {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__cta, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Real <button> variant (ctaAction="addToCart") — resets native button
   chrome so it reads identically to the plain <span> version above by
   default; per-placement emphasis (e.g. the Set's stronger CTA) is
   layered on top via StarterProducts' own CSS. */
.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__cta--button, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__cta--button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__cta--button:disabled, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__cta--button:disabled {
  opacity: 0.6;
  cursor: default;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__price-group + .starter-product-card__cta::before, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__price-group + .starter-product-card__cta::before {
  content: "·";
  color: var(--color-text-muted);
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__cta-icon, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__cta-icon {
  transition: transform 200ms ease;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card:hover .starter-product-card__cta-icon, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card:hover .starter-product-card__cta-icon {
  transform: translateX(3px);
}

/* ─── Text-link: quiet single-line alternative, no card anatomy ─ */

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card--text-link, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card--text-link {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__text-link-text, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__text-link-text {
  flex: 1 1 auto;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__text-link-microcopy, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__text-link-microcopy {
  color: var(--color-text-secondary);
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__text-link-title, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__text-link-title, .cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__text-link-price, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__text-link-price {
  color: var(--color-text-primary);
  font-weight: 500;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card--text-link .starter-product-card__cta-icon, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card--text-link .starter-product-card__cta-icon {
  flex-shrink: 0;
}

.cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card--text-link:hover .starter-product-card__text-link-title, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card--text-link:hover .starter-product-card__text-link-title {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__image, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__image, .cc_zRr7AL87AP_P6Dd5JOr3r .starter-product-card__cta-icon, .cc_zRr7AL87AP_OiA8vKCPUE .starter-product-card__cta-icon {
    transition: none;
  }
}