/*
 * Motta — Showcase + Customizer v1 (S1 iskeleti)
 *
 * Tek viewport, scroll yok. Grid modu ↔ Customize modu state swap.
 * Premium = kısıtlama. Tek soluk altın aksan, odakta görünür.
 */

/* Default = LIGHT. body[data-theme="dark"] override'larıyla koyu temaya geçilir. */
:root {
  --bg: #f7f6f1;
  --bg-2: #ffffff;
  --bg-3: #efece4;
  --line: rgba(13, 12, 10, 0.08);
  --line-2: rgba(13, 12, 10, 0.16);
  --ink: #0d0c0a;
  --ink-mute: rgba(13, 12, 10, 0.62);
  --ink-faint: rgba(13, 12, 10, 0.36);
  --accent: #9a7a3e;
  --accent-bright: #b08c4a;
  --accent-rgb: 154, 122, 62;
  --accent-faint: rgba(154, 122, 62, 0.14);
  --accent-soft: rgba(154, 122, 62, 0.08);
  --danger: #b8412d;
  --shadow-card: 0 12px 28px rgba(13, 12, 10, 0.08);
  --shadow-soft: 0 6px 16px rgba(13, 12, 10, 0.05);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* v1295: Premium motion choreography easings */
  --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);        /* Material standard */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Crisp deceleration */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* Subtle overshoot */
  --pad-x: clamp(16px, 2.6vw, 40px);
  --pad-y: clamp(14px, 2.5vh, 30px);
}

/* v1295: Erişilebilirlik — kullanıcı animasyonları azalt diyorsa hepsini durdur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.motta-order-page[data-theme="dark"] {
  --bg: #0b0b0d;
  --bg-2: #131318;
  --bg-3: #1a1a20;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --ink: #f5f3ef;
  --ink-mute: rgba(245, 243, 239, 0.56);
  --ink-faint: rgba(245, 243, 239, 0.28);
  --accent: #caa05a;
  --accent-bright: #d6b475;
  --accent-rgb: 202, 160, 90;
  --accent-faint: rgba(202, 160, 90, 0.16);
  --accent-soft: rgba(202, 160, 90, 0.06);
  --danger: #c7553d;
  --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.motta-order-page {
  margin: 0;
  height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.motta-order {
  position: relative;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* ─── Top progress bar ─────────────────────────────── */

.mc-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line);
  z-index: 5;
}

.mc-progress__fill {
  height: 100%;
  width: 14%;
  background: var(--accent);
  transition: width 360ms var(--ease);
}

/* v10-B2: width inline style yerine mod class'ı */
.mc-progress.is-grid .mc-progress__fill      { width: 14%; }
.mc-progress.is-customize .mc-progress__fill { width: 34%; }

/* ─── Top bar ──────────────────────────────────────── */

.mc-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--pad-x) 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 4;
  position: relative; /* v2301: .mc-gc absolute centering icin anchor */
}

/* v2301: Ana Renklerim pill — topbar icinde absolute centered */
.mc-topbar > .mc-gc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* tabs-pill ve right controls'in uzerinde, gerekirse overlap'i koy */
}

@media (max-width: 980px) {
  /* Dar ekranlarda center'da yer kalmaz, normal akisa donsun */
  .mc-topbar > .mc-gc {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}

.mc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.mc-brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Tenant brand identity overrides */
.mc-brand__logo {
  height: 28px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}

.mc-brand__text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.motta-order-page.has-tenant-font {
  font-family: 'tenant-brand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Bayi marka swatch'ını sade altın ring ile vurgula */
.mc-swatch--brand {
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.mc-swatch--brand.is-active {
  box-shadow: 0 0 0 3px var(--accent-faint);
}

/* Bayi spor paletini ince halka ile yumuşak vurgula */
.mc-swatch--sport {
  box-shadow: 0 0 0 1px var(--line-2);
}
.mc-swatch--sport.is-active {
  box-shadow: 0 0 0 3px var(--accent-faint);
}

.mc-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* v2300: Topbar Tab Pill — Tasarla / Hazır Ürünler */
.mc-tabs-pill {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, .04);
  border-radius: 999px;
  margin-left: 16px;
  align-self: center;
}
body.motta-order-page[data-theme="dark"] .mc-tabs-pill {
  background: rgba(255, 255, 255, .06);
}
.mc-tabs-pill__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute, #6b7280);
  transition: background 220ms var(--ease, ease), color 220ms var(--ease, ease), box-shadow 220ms var(--ease, ease), transform 220ms var(--ease, ease);
  cursor: pointer;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.mc-tabs-pill__tab:hover {
  color: var(--ink, #0f172a);
}
.mc-tabs-pill__tab.is-active {
  background: linear-gradient(135deg, var(--accent, #c9a24d) 0%, var(--accent-bright, #a8862d) 100%);
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb, 154, 122, 62), .20);
}
.mc-tabs-pill__tab:focus-visible {
  outline: 2px solid var(--accent, #b45309);
  outline-offset: 2px;
}
.mc-tabs-pill__label {
  font-size: 13px;
  letter-spacing: .01em;
}
.mc-tabs-pill__count {
  margin-left: 2px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, .08);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-mute, #6b7280);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.mc-tabs-pill__tab.is-active .mc-tabs-pill__count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
@media (max-width: 720px) {
  .mc-tabs-pill {
    margin-left: 8px;
    padding: 2px;
  }
  .mc-tabs-pill__tab {
    padding: 5px 12px;
    font-size: 12px;
  }
}

.mc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms var(--ease);
}

.mc-back::before { content: '←'; color: var(--ink-faint); transition: color 200ms var(--ease); }
.mc-back:hover { color: var(--ink); }
.mc-back:hover::before { color: var(--accent); }

.mc-meta {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mc-close,
.mc-theme-toggle,
.mc-help-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  cursor: pointer;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
/* v1287→v1295: ? buton — italic serif + ripple hover */
.mc-help-btn {
  position: relative;
  font-family: 'Georgia', serif;
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  color: #b45309;
  overflow: hidden;
  transition: color 200ms var(--ease-premium), background 200ms var(--ease-premium);
}
.mc-help-btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(180,83,9,.10);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-premium),
    transform 320ms var(--ease-spring);
}
.mc-help-btn:hover {
  color: #92400e;
  background: transparent;
}
.mc-help-btn:hover::before {
  opacity: 1;
  transform: scale(1);
}
.mc-help-btn:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 2px;
}
.mc-close:hover,
.mc-theme-toggle:hover { color: var(--ink); background: var(--accent-soft); }

.mc-theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Stage (mode swap area) ───────────────────────── */

.mc-stage {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.mc-mode {
  display: none;
  flex: 1;
  min-height: 0;
  animation: mc-fade 280ms var(--ease) both;
}

.mc-mode.is-active { display: flex; }

@keyframes mc-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── GRID mode (v12.29: Hyper-Premium Vitrin) ─────── */

/* v12.29d: Hyper-Premium Grid — brief overlay + tam genişlik kartlar */
.mc-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

.mc-grid__brief {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px var(--pad-x) 14px;
  background: linear-gradient(180deg, rgba(var(--bg-2-rgb, 255,255,255), 0.82) 0%, rgba(var(--bg-rgb, 255,255,255), 0.65) 100%);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(var(--line-rgb, 0,0,0), 0.06);
  position: sticky;
  top: 0;
  z-index: 8;
  transition: padding 280ms var(--ease), background 280ms var(--ease);
}
/* v12.29d: Brief scrolled — ultra-kompakt sticky header */
.mc-grid__brief.is-scrolled {
  padding: 10px var(--pad-x) 8px;
  gap: 2px;
}
.mc-grid__brief.is-scrolled .mc-sub { display: none; }
.mc-grid__brief.is-scrolled .mc-title { font-size: 16px; }
/* v12.29d: Dark mode brief glass */
body.motta-order-page[data-theme="dark"] .mc-grid__brief {
  background: linear-gradient(180deg, rgba(18,18,24,0.88) 0%, rgba(18,18,24,0.72) 100%);
  border-bottom-color: rgba(255,255,255,0.04);
}

.mc-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mc-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.mc-sub {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.5;
}

/* v12.40: Brief sidebar yeni elemanlar */
.mc-brief__logo {
  width: auto;
  max-width: 100px;
  height: 32px;
  object-fit: contain;
  display: block;
  margin: 0 auto 2px;
  opacity: 0.85;
}
.mc-brief__stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-mute, rgba(13,12,10,0.45));
  margin-top: 2px;
}
.mc-brief__stat strong {
  font-weight: 700;
  color: var(--ink, #0d0c0a);
}
.mc-brief__stat-sep { opacity: 0.4; }
.mc-brief__features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.mc-brief__features li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2, #64748b);
}
.mc-brief__features li svg { flex-shrink: 0; }
/* Scrolled: hide stats+features */
.mc-grid__brief.is-scrolled .mc-brief__stats,
.mc-grid__brief.is-scrolled .mc-brief__features,
.mc-grid__brief.is-scrolled .mc-brief__logo { display: none; }
[data-theme="dark"] .mc-brief__logo { filter: brightness(1.2); }
[data-theme="dark"] .mc-brief__stat strong { color: #e2e8f0; }
[data-theme="dark"] .mc-brief__features li { color: #64748b; }

/* v12.29d: Grid main — flex-1 ile tam yükseklik, scroll kartlarda */
.mc-grid__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: var(--pad-y) var(--pad-x);
  gap: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.mc-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.mc-cat-chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}

.mc-cat-chip:hover { border-color: var(--line-2); color: var(--ink); }
.mc-cat-chip.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.mc-grid__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 32px 16px;
}
/* v12.28: Sonuç sayacı */
.mc-grid__count {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  opacity: 0.6;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

/* v12.25: Grid toolbar — category chips + view mode butonları yan yana */
.mc-grid__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mc-grid__toolbar .mc-cat-chips {
  flex: 1;
  min-width: 0;
}
/* v12.28: Toolbar sağ grup — arama + görünüm modları */
.mc-grid__toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* v12.28: Arama çubuğu */
.mc-search {
  position: relative;
  display: flex;
  align-items: center;
}
.mc-search__icon {
  position: absolute;
  left: 8px;
  pointer-events: none;
  color: var(--ink-faint);
  opacity: 0.6;
}
.mc-search__input {
  width: 160px;
  height: 30px;
  padding: 0 28px 0 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  outline: none;
  transition: border-color 200ms, width 300ms ease, box-shadow 200ms;
}
.mc-search__input:focus {
  width: 200px;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 162, 77, 0.12);
}
.mc-search__input::placeholder {
  color: var(--ink-faint);
  opacity: 0.55;
}
.mc-search__clear {
  position: absolute;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, color 150ms;
}
.mc-search__clear:hover {
  background: rgba(0,0,0,0.06);
  color: var(--ink);
}

/* v12.28: Sıralama dropdown */
.mc-sort-select {
  height: 30px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  transition: border-color 200ms;
  flex-shrink: 0;
}
.mc-sort-select:hover { border-color: var(--ink-faint); }
.mc-sort-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(201,162,77,0.12); }

.mc-grid__view-modes {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.mc-view-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.mc-view-mode:hover {
  border-color: var(--ink-mute);
  color: var(--ink-mute);
}
.mc-view-mode.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 162, 77, 0.08);
}

/* v12.25: Grid cards — data-cols attribute ile sütun sayısı */
/* v12.29d: Cards grid — scroll parent'ta, flex-1 korunur */
/* v1292: Auto-fill grid — az tasarım varsa kartlar tek boy kalır, sayfa boşluğu artmaz */
.mc-grid__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  flex: 1 0 auto;
  min-height: 0;
}
/* v12.33 (M-O6): Daha fazla tasarım yükle butonu ─────────────────── */
.mc-load-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 8px;
}
.mc-load-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  border: 2px solid var(--mc-border, #e2e8f0);
  background: transparent;
  color: var(--mc-text, #1e293b);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.mc-load-more__btn:hover {
  background: var(--mc-surface, #f8fafc);
  border-color: var(--mc-accent, #6366f1);
  color: var(--mc-accent, #6366f1);
  transform: translateY(-1px);
}
.mc-load-more__loading {
  font-size: 0.8rem;
  color: var(--mc-muted, #94a3b8);
  font-style: italic;
}
.mc-dark .mc-load-more__btn {
  border-color: #334155;
  color: #e2e8f0;
}
.mc-dark .mc-load-more__btn:hover {
  background: #1e293b;
  border-color: #818cf8;
  color: #818cf8;
}

/* v12.28: Grid transition — sütun değiştiğinde smooth */
.mc-grid__cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mc-grid__cards[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.mc-grid__cards[data-cols="7"] { grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mc-card { transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease; }
/* v12.28: Kart giriş animasyonu */
@keyframes mc-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-grid__cards .mc-card { animation: mc-card-in 0.35s ease both; }
.mc-grid__cards .mc-card:nth-child(1)  { animation-delay: 0s; }
.mc-grid__cards .mc-card:nth-child(2)  { animation-delay: 0.03s; }
.mc-grid__cards .mc-card:nth-child(3)  { animation-delay: 0.06s; }
.mc-grid__cards .mc-card:nth-child(4)  { animation-delay: 0.09s; }
.mc-grid__cards .mc-card:nth-child(5)  { animation-delay: 0.12s; }
.mc-grid__cards .mc-card:nth-child(n+6){ animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .mc-grid__cards .mc-card { animation: none; }
}

.mc-grid__cards::-webkit-scrollbar { width: 6px; }
.mc-grid__cards::-webkit-scrollbar-track { background: transparent; }
.mc-grid__cards::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* v12.29: Hyper-Premium kart — yumuşak kenarlar + zengin gölge */
.mc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* === D58-W8-GRID-NOBORDER === user "vitrinde border var, kaldır": base border + shadow temizle, hover'da accent border görsün */
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--bg-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 280ms var(--ease), transform 280ms var(--ease), background 280ms var(--ease), box-shadow 350ms var(--ease);
}

/* v12.29: Hyper-Premium hover — derin kaldırma + glow shadow */
.mc-card:hover,
.mc-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-6px);
  outline: none;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15), 0 0 0 1px var(--accent);
}

.mc-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.mc-card.is-disabled:hover {
  border-color: var(--line);
  background: var(--bg-2);
  transform: none;
}

/* v6-T5: license gate */
.mc-card--locked { opacity: 0.78; }
.mc-card--locked .mc-card__art img { filter: grayscale(0.55) brightness(0.92); }
.mc-card--locked:hover { transform: none; }
.mc-card__lock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
}
/* v12.27: Wishlist heart button */
.mc-card__heart {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  pointer-events: auto;
}
.mc-card:hover .mc-card__heart,
.mc-card__heart.is-wished { opacity: 1; }
.mc-card__heart:hover { background: rgba(0,0,0,0.55); transform: scale(1.15); }
.mc-card__heart.is-wished { background: rgba(239,68,68,0.18); }
.mc-card__heart.is-wished:hover { background: rgba(239,68,68,0.35); }
/* v12.27: Favoriler chip */
.mc-cat-chip--wish { color: #ef4444; }
.mc-cat-chip--wish.is-active { background: rgba(239,68,68,0.12); border-color: #ef4444; color: #ef4444; }
.mc-cat-chip--wish small { font-weight: 700; margin-left: 2px; }
.mc-card__hint {
  display: block;
  font-size: 11px;
  color: var(--ink-2, #9ca3af);
  margin-top: 2px;
}

/* v12.29: Hyper-Premium kart art — radial glow + büyük mockup */
/* v1292: padding azaltıldı (kullanıcı şikayeti: kenarlarda gereksiz boşluk) */
/* === D36-v4028 START === Mockup ustu sade: YENİ rozeti + kalp + kilit + premium rozeti
   hepsi gizlenir (kullanici karari: "temizledigin seylerin aynisi mockup ustunde de var...
   sadece svg ve mockuplar kalsin"). Bu overlay'ler kart art alaninin icinde duruyorlardi. */
.mc-card__art .mc-card__badge,
.mc-card__art .mc-card__heart,
.mc-card__art .mc-card__lock,
.mc-card__art .mc-card__surcharge,
.mc-card .mc-card__art > .mc-card__badge,
.mc-card .mc-card__art > .mc-card__heart {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Eger badge/heart direkt mc-card altinda (not in art) ise + art alaninda absolute positioned ise gizle */
.mc-card > .mc-card__badge,
.mc-card > .mc-card__heart,
.mc-card > .mc-card__lock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* === D36-v4028 END === */

.mc-card__art {
  /* === D36-v4027 START === Vitrin kart sade: arka plan BEYAZ, krem doku KALDIRILDI */
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px;
  background: #ffffff;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* === D36-v4027 END === */
}
/* === D36-v4027 START === Vitrin kart sade: ::before radial glow + ::after alt gradient KALDIRILDI
   (kullanici karari: "sadece svg ve mockuplar kalsin, kartin icinde solu renkler kaldirilsin") */
.mc-card__art::before,
.mc-card__art::after {
  content: none;
  display: none;
  background: none;
  opacity: 0;
  filter: none;
}
.mc-card:hover .mc-card__art::before,
.mc-card:hover .mc-card__art::after {
  content: none;
  display: none;
  background: none;
  opacity: 0;
  filter: none;
}
/* === D36-v4027 END === */

/* === D36-v4027 START === Mockup img sade: drop-shadow KALDIRILDI (vitrinde soluk gri golge kaynagi) */
.mc-card__art img {
  width: 88%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  display: block;
  filter: none;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mc-card:hover .mc-card__art img {
  transform: scale(1.06);
  filter: none;
}
/* === D36-v4027 END === */

/* v12.25: Küçük modda kart art daha kompakt */
.mc-grid__cards[data-cols="7"] .mc-card__art {
  padding: 10px 8px;
  aspect-ratio: 4 / 5;
}
/* Büyük modda daha geniş */
.mc-grid__cards[data-cols="3"] .mc-card__art {
  padding: 20px 16px;
}

/* v12.29: Dark mode — premium drop-shadow + glow rengi */
body.motta-order-page[data-theme="dark"] .mc-card__art img {
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}
body.motta-order-page[data-theme="dark"] .mc-card:hover .mc-card__art img {
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6));
}
body.motta-order-page[data-theme="dark"] .mc-card__art::before {
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb, 99,102,241), 0.1) 0%, transparent 70%);
}
body.motta-order-page[data-theme="dark"] .mc-card:hover {
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4), 0 0 0 1px var(--accent);
}

/* v9-T1 + v10-A1: Kart vitrin: mockup + zone renk tonu + tasarım composite (widget kalitesi)
   v10-A1: transparent — beyaz plaka kaldırıldı, mockup'ın kendi alpha kanalı kullanılır */
.mc-card__composite {
  position: relative;
  width: 88%;
  max-width: 88%;
  max-height: 92%;
  aspect-ratio: 823 / 1058;
  height: auto;
  display: grid;
  place-items: center;
  isolation: isolate;
  /* === D36-v4027 START === Vitrin kart sade: drop-shadow KALDIRILDI (kullanici karari: sadece svg+mockup) */
  filter: none;
  /* === D39-BUG-HUNT START === .mc-card__composite transform transition kaldirildi
     (D38-P5'te hover transform:none olarak set edildi; transition burada amaçsiz yaslayici).
     Sadece icerideki -mockup/-svg/-design element'lerinin transition'i kalir. */
  /* === D39-BUG-HUNT END === */
  /* === D36-v4027 END === */
}

.mc-card:hover .mc-card__composite {
  /* === D38-P5-HOVER-FIX START === Composite container scale KALDIRILDI (kart layout sabit kalsin)
     Onceden transform: scale(1.06) ile kart konteyneri kayiyor -> grid layout hareket ediyordu.
     Yeni davranis: sadece icerideki mockup/design IMG/SVG element'leri 1.06x scale (overflow:hidden ile clip).
     Hover'da kart sinirlari sabit, sadece ICERIK premium zoom hissi verir. */
  transform: none;
  filter: none;
  /* === D38-P5-HOVER-FIX END === */
}

/* === D38-P5-HOVER-FIX START === Iç element zoom + overflow clip */
.mc-card__composite {
  overflow: hidden;
}
.mc-card .mc-card__composite-mockup,
.mc-card .mc-card__composite-svg,
.mc-card .mc-card__composite-design {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mc-card:hover .mc-card__composite-mockup,
.mc-card:hover .mc-card__composite-svg,
.mc-card:hover .mc-card__composite-design {
  transform: scale(1.06);
}
/* === D38-P5-HOVER-FIX END === */

/* v3700-align-fix: object-fit: fill — kart container'ı zaten doğru AR'a (823/1058 ≈ 0.7779)
   sahip; mockup WebP ve tüm SVG layer viewBox'ları da aynı AR taşıyor. object-fit:contain
   her layer'ı bağımsız AR-fit ettiği için storage'daki farklı viewBox/width-height
   absolute değerleri (örn. front-body width="21.778cm" vs front-collar width="1321.42")
   sub-pixel rounding kayması üretiyordu. fill ile tüm katmanlar container kenarlarına
   sabitlenir → birebir hizalanır (mockup + zone SVG + design SVG aynı bounding box). */
.mc-card__composite-mockup,
.mc-card__composite-svg,
.mc-card__composite-zone,
.mc-card__composite-design {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.mc-card__art .mc-card__composite-svg,
.mc-card__art .mc-card__composite-zone,
.mc-card__art .mc-card__composite-design {
  width: 100%;
  height: 100%;
  max-height: none;
  filter: none;
}

.mc-card:hover .mc-card__art .mc-card__composite-svg,
.mc-card:hover .mc-card__art .mc-card__composite-zone,
.mc-card:hover .mc-card__art .mc-card__composite-design {
  transform: none;
  filter: none;
}

/* === D36-v4031 START === Recolor pipeline aktif — layer'lar visible, kullanici Ana Renklerim
   uygulayinca dogru renkler gelmeli. v4029/v4030 grayscale+hide GERI ALINDI cunku amac
   gercek renklendirmeyi calistirmakti, gizlemek degil. Yanlis renk gelirse pipeline'a bakilir. */
.mc-card .mc-card__art .mc-card__composite-mockup,
.mc-card .mc-card__art .mc-card__composite-zone,
.mc-card .mc-card__art .mc-card__composite-design {
  width: 100%;
  height: 100%;
  max-height: none;
  filter: none;
  display: block;
  opacity: 1;
  visibility: visible;
}
/* === D36-v4031 END === */

body.motta-order-page[data-theme="dark"] .mc-card__art .mc-card__composite-mockup,
body.motta-order-page[data-theme="dark"] .mc-card__art .mc-card__composite-svg,
body.motta-order-page[data-theme="dark"] .mc-card__art .mc-card__composite-zone,
body.motta-order-page[data-theme="dark"] .mc-card__art .mc-card__composite-design,
body.motta-order-page[data-theme="dark"] .mc-card:hover .mc-card__art .mc-card__composite-mockup,
body.motta-order-page[data-theme="dark"] .mc-card:hover .mc-card__art .mc-card__composite-svg,
body.motta-order-page[data-theme="dark"] .mc-card:hover .mc-card__art .mc-card__composite-zone,
body.motta-order-page[data-theme="dark"] .mc-card:hover .mc-card__art .mc-card__composite-design {
  filter: none;
}

.mc-card__composite-mockup {
  /* === D36-v4029 START === Vitrin mockup base NÖTR GRİ
     (kullanici karari: "f12 kesinlikle degistirilen renkleri gorene kadar kapatarak ilerle...
     kesinlikle burada farkli birsey var").
     Bulgu: i=0 mockup base IMG dosyasinda yesil kol + lacivert govde + kirmizi yaka renkleri
     GOMULU. Bu renkler CSS overlay degil, dosyanin native pixel'leri. Cozum: grayscale filter
     ile notr griye cek; sadece T-shirt SEKLİ + uzerinde DESEN SVG kalir.
     Editor'de (tasarla sonrasi) bu filter kalkar, gercek renklere geri doner. */
  z-index: 1;
  filter: grayscale(1) brightness(1.15) contrast(0.9);
  -webkit-filter: grayscale(1) brightness(1.15) contrast(0.9);
  /* === D36-v4029 END === */
}
/* === D36-v4029 START === Mockup base hover'da da gri kalir (vitrin sade) */
.mc-card:hover .mc-card__composite-mockup {
  filter: grayscale(1) brightness(1.15) contrast(0.9);
  -webkit-filter: grayscale(1) brightness(1.15) contrast(0.9);
}
/* === D36-v4029 END === */

.mc-card__composite-zone {
  z-index: 2;
  opacity: 1;  /* === D36-v4025 === Vitrinde SVG layer kapali (görüntü orijinal mockup) */
  display: none;  /* SVG inject pasif — sadece editor SVG kullanir */
  display: none;  /* Performans: render etme */
}

/* v12.1: Full-rect zone tint kaldırıldı (forma dışını da boyuyordu).
   Renk işareti küçük bir köşe chip'i ile gösterilir (formayı kapatmaz). */
.mc-card__color-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.mc-card__color-chip svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mc-card__composite-design {
  /* === D36-v4023 === Desen katmanı GÖRÜNMELI (mockup+wash üstünde, siyah zigzag desen) */
  z-index: 3;
  opacity: 1;
  display: block;
  mix-blend-mode: normal;
}

.mc-card__composite-design[data-layer-key="front-design-2"],
.mc-card__composite-design[data-layer-key="back-design-2"],
.mc-card__composite-design[data-card-svg-layer="front-design-2"],
.mc-card__composite-design[data-card-svg-layer="back-design-2"] {
  z-index: 4;
}

.mc-card--locked .mc-card__composite {
  filter: grayscale(0.55) brightness(0.92);
}

.mc-card__art-fallback {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border: 1px dashed var(--line-2);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: 26px;
  font-weight: 300;
}

.mc-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(10,13,18,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 200ms ease, opacity 200ms ease;
}
.mc-card:hover .mc-card__badge { transform: scale(0.95); }

/* v12.25: "Hazır" kaldırıldı → "Yeni" badge (yeşil accent, pulse animasyon) */
.mc-card__badge--new {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06));
  animation: mc-new-pulse 2.5s ease-in-out infinite;
}
@keyframes mc-new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.25); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
/* v12.27: Premium badge (altın accent) */
.mc-card__badge--premium {
  color: #c9a24d;
  border-color: rgba(201, 162, 77, 0.5);
  background: linear-gradient(135deg, rgba(201,162,77,0.12), rgba(201,162,77,0.06));
  letter-spacing: 0.1em;
}
/* v12.29: Surcharge text — premium indicator */
.mc-card__surcharge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #c9a24d;
  letter-spacing: 0.03em;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(201, 162, 77, 0.06);
  width: fit-content;
}
/* v12.29d: Premium kart — altın kenar + shimmer animasyon */
.mc-card--premium {
  border-color: rgba(201, 162, 77, 0.2);
  overflow: hidden;
}
.mc-card--premium::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(201, 162, 77, 0.06) 45%,
    rgba(201, 162, 77, 0.12) 50%,
    rgba(201, 162, 77, 0.06) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 6;
  transition: none;
}
.mc-card--premium:hover::after {
  animation: mc-shimmer 1.2s ease-out forwards;
}
@keyframes mc-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.mc-card--premium:hover {
  border-color: #c9a24d;
  box-shadow: 0 24px 48px -14px rgba(201,162,77,0.14), 0 0 0 1px rgba(201,162,77,0.6);
}
.mc-card--premium .mc-card__meta::before {
  background: linear-gradient(90deg, transparent 0%, rgba(201,162,77,0.3) 30%, rgba(201,162,77,0.3) 70%, transparent 100%);
}

/* v12.27: Motta Özel chip */
.mc-cat-chip--premium { color: #c9a24d; font-weight: 700; }
.mc-cat-chip--premium.is-active {
  background: linear-gradient(135deg, rgba(201,162,77,0.15), rgba(201,162,77,0.06));
  border-color: #c9a24d;
  color: #c9a24d;
}

/* v1292: Premium kompakt meta — 3 satır (title / chips / price+cta) */
.mc-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 11px;
  border-top: none;
  background: var(--bg-2);
  position: relative;
}
/* Gradient separator — art→meta soft fade */
.mc-card__meta::before {
  content: '';
  position: absolute;
  top: 0; left: 10px; right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line-2) 30%, var(--line-2) 70%, transparent 100%);
  opacity: 0.6;
}
/* v1292: Audience badge + signals tek satırda */
.mc-card__chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 14px;
}
.mc-card__chips-row .mc-card__signals {
  margin-top: 0;
  gap: 4px;
}
/* v1292: Fiyat + CTA aynı satırda yan yana */
.mc-card__action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.mc-card__action-row .mc-card__price {
  margin-top: 0;
}
.mc-card__action-row .mc-card__cta {
  margin-top: 0;
  flex-shrink: 0;
}

body.motta-order-page[data-theme="dark"] .mc-card__meta {
  background: rgba(0,0,0,0.18);
}

.mc-card__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  line-height: 1.25;
  transition: color 200ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-card:hover .mc-card__name { color: var(--accent-bright); }

.mc-card__type {
  color: var(--ink-mute);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* v12.29: Fiyat — premium hierarchy */
.mc-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 5px;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: text-shadow 300ms ease;
}
.mc-card:hover .mc-card__price {
  text-shadow: 0 0 12px rgba(var(--accent-rgb, 154,122,62), 0.25);
}
.mc-card__price small {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 2px;
  letter-spacing: 0;
}
/* v1309 (C3): Kart sinyalleri sadeleştir — hover'da öne çık, default'ta sade */
.mc-card__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  opacity: .68;                          /* default sönük */
  transition: opacity .2s ease;
}
.mc-card:hover .mc-card__signals { opacity: 1; }
.mc-card__signals span {
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-mute);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}
.mc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 5px;
  padding: 5px 9px;
  border: 1px solid rgba(178,157,103,.4);
  border-radius: 999px;
  background: rgba(178,157,103,.08);
  color: #8b6914;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.mc-card:hover .mc-card__cta {
  background: #8b6914;
  color: #fff;
  border-color: #8b6914;
}

/* v12.28: Kit composition ikonları — her zaman görünür */
.mc-card__kit-parts {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 5;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(10, 13, 18, 0.55);
  backdrop-filter: blur(4px);
}
.mc-kind-icon {
  width: 14px;
  height: 14px;
  fill: rgba(255, 255, 255, 0.8);
}
.mc-card__kit-icon {
  display: inline-flex;
  align-items: center;
  transition: transform 150ms ease;
}
.mc-card:hover .mc-card__kit-icon { transform: scale(1.1); }
.mc-card__kit-plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  line-height: 1;
  margin: 0 1px;
}

/* v12.25: Küçük görünümde meta küçültme */
.mc-grid__cards[data-cols="7"] .mc-card__meta {
  padding: 8px 10px 10px;
  gap: 1px;
}
.mc-grid__cards[data-cols="7"] .mc-card__name {
  font-size: 11px;
}
.mc-grid__cards[data-cols="7"] .mc-card__type {
  font-size: 9px;
}
.mc-grid__cards[data-cols="7"] .mc-card__price {
  font-size: 12px;
  margin-top: 2px;
}
.mc-grid__cards[data-cols="7"] .mc-card__price small {
  font-size: 8px;
}
.mc-grid__cards[data-cols="7"] .mc-kind-icon {
  width: 11px;
  height: 11px;
}
.mc-grid__cards[data-cols="7"] .mc-card__badge {
  font-size: 7px;
  padding: 3px 6px;
  top: 6px;
  right: 6px;
}

/* Büyük görünümde meta büyütme */
.mc-grid__cards[data-cols="3"] .mc-card__name {
  font-size: 15px;
}
.mc-grid__cards[data-cols="3"] .mc-card__type {
  font-size: 12px;
}
.mc-grid__cards[data-cols="3"] .mc-card__price {
  font-size: 16px;
  margin-top: 6px;
}

/* ─── CUSTOMIZE mode ───────────────────────────────── */

/* v12.11: Split layout — canvas sol (%55-60) + sepet sağ sidebar */
.mc-customize {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  gap: 0;
}

.mc-customize__canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px var(--pad-x) 0;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 55%;
  max-width: 60%;
}

.mc-canvas__viewport {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

/* v12.34 M-S5: Zoom wrap — stage'i scale eder, layout etkilenmez */
.mc-canvas__zoom-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform-origin: center center;
  transition: transform 0.15s ease;
  will-change: transform;
}
.mc-zoom--50 { transform: scale(0.5); }
.mc-zoom--75 { transform: scale(0.75); }
.mc-zoom--100 { transform: scale(1); }
.mc-zoom--125 { transform: scale(1.25); }
.mc-zoom--150 { transform: scale(1.5); }
.mc-zoom--175 { transform: scale(1.75); }
.mc-zoom--200 { transform: scale(2); }
.mc-canvas__viewport.is-zoomed {
  overflow: auto;
}
.mc-canvas__viewport.is-single-top .mc-canvas__stage {
  height: 75%;
}

.mc-canvas__stage {
  /* Yükseklik odaklı: viewport somut yüksekliğe sahip olduğu için
     height: 100% çalışır; width aspect-ratio'dan hesaplanır.
     Böylece stage daima piksel cinsinden boyutlanır ve
     marker'ların left/top yüzdesi doğru konuma denk gelir. */
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1581.89 / 2033.86;
  display: block;
  transition: aspect-ratio 0.35s cubic-bezier(.4,0,.2,1);
}

.mc-canvas__stage[data-view="back"] {
  aspect-ratio: 2240.18 / 2880.22;
}
/* v12.11: Kit zoom — item-kind'a göre aspect-ratio */
.mc-canvas__stage[data-active-kind="sort"] { aspect-ratio: 800 / 1000; }
.mc-canvas__stage[data-active-kind="sort"][data-view="back"] { aspect-ratio: 800 / 1000; }
.mc-canvas__stage[data-active-kind="corap"] { aspect-ratio: 400 / 800; }
.mc-canvas__stage[data-active-kind="corap"][data-view="back"] { aspect-ratio: 400 / 800; }
.mc-stage--zoom-in {
  animation: mc-kit-zoom 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes mc-kit-zoom {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.mc-canvas__layers {
  position: absolute;
  inset: 0;
  display: none;
  /* v3704: aspect-ratio lock — child layer'lar tutarlı bounding box kullansın
     CSS variable: JS syncStateFromItem() içinde --mc-layers-ar set edilir,
     fallback 823/1058 (standart forma AR). Variant değişiminde otomatik update. */
  aspect-ratio: var(--mc-layers-ar, 823 / 1058);
}

.mc-canvas__layers.is-active { display: block; }
/* Canvas composite — layer-upload.css ile aynı teknik */
.mc-canvas__layers {
  isolation: isolate;
  background: transparent;
}

.mc-canvas__mockup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* v3704: object-fit: contain → fill — SVG layer'larıyla aynı bounding box.
     Mockup ve SVG aynı container'ı kaplar, sub-pixel kayma yok.
     Container .mc-canvas__layers aspect-ratio lock ile aynı AR sağlandığı için
     fill stretch görsel etki yapmaz (AR eşleşir). v3700-B kart preview paritey. */
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Zone SVG'leri (body/collar/cuff) — solid renk, tıklanabilir */
.mc-canvas__zone-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.mc-canvas__color-svg-layer {
  /* v3704: defensive positioning — .mc-canvas__zone-layer'dan miras OK ama
     class kombinasyonu değişirse fallback. object-fit: fill kart preview paritey. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  /* v1302: multiply blend → mockup img'in fabric tonu/gölgeleri renkli body üzerinde görünsün.
     contrast(1.04) saturate(0.96) → fabric grain efekti güçlendirir */
  mix-blend-mode: multiply;
  opacity: 1;
  filter: contrast(1.04) saturate(0.96);
}

/* v1302: Luminance-aware CSS değişkenleri — body rengi seçildiğinde JS --mc-body-luma'yı 0..1 set eder.
   Design ve shadow opacity'leri body luminance'a göre otomatik ayarlanır:
   - Koyu gövde (luma yakın 0) → design daha opak, shadow daha hafif
   - Açık gövde (luma yakın 1) → design daha şeffaf, shadow daha güçlü
   :root scope — DOM'daki herhangi bir parent'ta JS setProperty ile override edilebilir */
:root {
  --mc-body-luma: 0.5;
  --mc-design-opacity: calc(0.62 + (1 - var(--mc-body-luma)) * 0.20);
  --mc-shadow-opacity: calc(0.42 + var(--mc-body-luma) * 0.25);
}

.mc-canvas__design-svg-layer {
  /* v3704: defensive positioning + object-fit fill */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 3;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
  filter: none;
}

.mc-canvas__mockup-img.is-missing,
.mc-canvas__shadow-layer.is-missing {
  display: none;
}

/* v12.24b: Design filter SVG — gizli, sadece feFlood referansı için */
.mc-canvas__design-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Desen SVG — filter ile renklendirilir (feFlood + feComposite SourceAlpha) */
.mc-canvas__design-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  z-index: 3;
  mix-blend-mode: normal;
  filter: none;
}

/* Shadow — mockup 2. kez, derinlik (widget: is-shadow z-4 opacity .24 multiply) */
/* v1302: opacity → var(--mc-shadow-opacity) — luminance-aware, açık gövdede güçlü/koyuda hafif.
   saturate(0.6) → shadow body rengini tintlemesin (gri kalır) */
.mc-canvas__shadow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  opacity: var(--mc-shadow-opacity);
  mix-blend-mode: multiply;
  filter: saturate(0.6);
}

/* Eski .mc-canvas__layer SVG elementi (fallback) */
.mc-canvas__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.mc-canvas__layer.mc-canvas__design-svg-layer {
  z-index: 3;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}

.mc-canvas__layer.mc-canvas__design-svg-layer[data-layer="front-design-2"],
.mc-canvas__layer.mc-canvas__design-svg-layer[data-layer="back-design-2"] {
  z-index: 4;
}

/* v10-B4: SVG fil path tıklanabilir göstergesi (cursor inline style yerine class) */
.mc-canvas__layer [data-zone-class],
.mc-canvas__layer .is-clickable {
  pointer-events: auto;
  cursor: pointer;
}


.mc-canvas__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-mute);
  font-size: 13px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.mc-view-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  align-self: center;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

.mc-view-toggle__btn {
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}

.mc-view-toggle__btn.is-active {
  background: var(--accent);
  color: var(--bg);
}

.mc-view-toggle__btn:hover:not(.is-active) {
  color: var(--ink);
}

/* (v12.9: Eski sağ panel .mc-controls kaldırıldı — artık sol kayar sepet kullanılıyor) */

.mc-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  /* v1303: 180 renge ölçeklenecek sabit yükseklikli kayar grid (docs/56 swatch grid kuralı) */
  max-height: 280px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
}
.mc-swatches::-webkit-scrollbar { width: 6px; }
.mc-swatches::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.25);
  border-radius: 3px;
}
.mc-swatches::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.45);
}
.mc-swatches::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.04);
  border-radius: 3px;
}

.mc-swatch {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  padding: 0;
  /* v11: arka plan inline SVG <rect fill> ile — CSS var + setProperty yok */
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms var(--ease);
}
.mc-swatch svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.mc-swatch:hover {
  transform: scale(1.12);
}

.mc-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}

.mc-swatch.is-active::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  pointer-events: none;
}

/* v6-T4: Beden matrisi grid (v12.9: 7 beden, has-value vurgusu) */
.mc-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.mc-size-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mc-size-cell.has-value {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.mc-size-cell input {
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}

.mc-size-cell input::-webkit-outer-spin-button,
.mc-size-cell input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mc-size-cell input:focus {
  color: var(--accent);
}

.mc-size-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.mc-size-total strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}

/* v12.9: Min adet ipucu + OK göstergesi + progress bar */
.mc-size-min-hint {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--danger);
  margin-left: auto;
}
.mc-size-min-hint strong { color: inherit; font-weight: 700; font-size: 10px; }
.mc-size-ok-hint {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #2d8a4e;
  margin-left: auto;
}
.mc-size-progress {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.mc-size-progress__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
  min-width: 2px;
}

/* v6-T4: Quote bar (sticky bottom) */
.mc-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}

.mc-quote__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mc-quote__amount {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.mc-quote__detail {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* v10-B7: error variant (inline style yerine class) */
.mc-quote__hint--error { color: var(--danger); }
.mc-section--error { color: var(--danger); font-size: 12px; line-height: 1.4; }
/* v12.32 (M-S1): soft warning for large files */
.mc-section--warning { color: var(--warning, #c57b00); font-size: 12px; line-height: 1.4; }

/* v12.32 (M-S8): Offline banner */
.mc-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  animation: mc-slide-in 0.3s ease;
}
@keyframes mc-slide-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* v12.33 (M-H10): Session TTL uyarı banner'ı */
.mc-ttl-warning {
  background: #f59e0b;
  color: #1c1917;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.01em;
  animation: mc-slide-in 0.3s ease;
}
.mc-dark .mc-ttl-warning {
  background: #d97706;
  color: #fef3c7;
}

.mc-quote__hint {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 500;
}

/* ─── Canvas overlay (logo + text) ──────────────────── */

.mc-canvas__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5; /* v12.24b: design-layer(3) ve shadow(4) üzerinde — marker'lar tıklanabilir */
  /* v10-B6: display class ile yönetilir (CSP-safe; inline style yerine) */
  display: none;
}
.mc-canvas__overlay.is-active { display: block; }

/* Zone hit-rect — transparent click target on mockup */
.mc-zone-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 4;
  stroke-dasharray: 8 6;
  pointer-events: all;
  cursor: pointer;
  transition: stroke 200ms var(--ease), fill 200ms var(--ease);
}

.mc-zone-hit:hover {
  fill: var(--accent-soft);
  stroke: var(--accent);
}

.mc-overlay-img,
.mc-overlay-text {
  pointer-events: none;
}

/* Flash highlight on canvas toolbar zone button when clicked from SVG zone */
[data-canvas-zone].is-just-focused {
  animation: mc-flash 1.1s var(--ease) 1;
}

@keyframes mc-flash {
  0%   { box-shadow: 0 0 0 0 var(--accent-faint); }
  30%  { box-shadow: 0 0 0 4px var(--accent-faint); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── Print view ────────────────────────────────────── */

.mc-canvas__stage.is-print {
  background: #fafaf6;
  border-radius: 12px;
  outline: 1px solid var(--line);
}

.mc-canvas__stage.is-print .mc-canvas__layer {
  filter: none;
}

/* ─── Section + subtle stack ─────────────────────────── */

.mc-section + .mc-section { margin-top: 4px; }

.mc-cta {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 220ms var(--ease), color 220ms var(--ease);
  text-align: center;
}

.mc-cta::after { content: '→'; }
.mc-cta:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.mc-cta:disabled { border-color: var(--line); color: var(--ink-faint); cursor: not-allowed; }
.mc-cta:disabled::after { color: var(--ink-faint); }

/* ─── Loading ──────────────────────────────────────── */

.mc-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-mute);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.mc-loading__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: mc-pulse 1.4s var(--ease) infinite;
}

@keyframes mc-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* v12.28: Skeleton loading grid — premium shimmer efekti */
/* v3101 SP-C: Apple/Linear/Stripe yaklaşımı — linear-gradient sweep + kart bazında grid/list/detail varyantları */
.mc-skeleton-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
}

/* === D38-P4-SKELETON-QUIET START === Sade placeholder (animasyon yok) */
.mc-prem-skeleton-quiet {
  background: var(--bg-2, #f9f9f7) !important;
  border: 1px solid var(--line, #e8e6e1) !important;
  border-radius: 16px !important;
  aspect-ratio: 3 / 4;
  animation: none !important;
  min-height: 280px;
}
.mc-prem-skeleton-quiet::before,
.mc-prem-skeleton-quiet::after {
  content: none !important;
  animation: none !important;
}
/* === D38-P4-SKELETON-QUIET END === */
.mc-skeleton-card__art {
  aspect-ratio: 3 / 4;
  background: var(--bg);
}
.mc-skeleton-card__meta {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-skeleton-line {
  border-radius: 4px;
  background: var(--line);
}
.mc-skeleton-line--title { height: 12px; width: 70%; }
.mc-skeleton-line--sub   { height: 10px; width: 50%; }
.mc-skeleton-line--eyebrow { height: 10px; width: 80px; margin-bottom: 8px; }
.mc-skeleton-line--heading { height: 22px; width: 220px; margin-bottom: 6px; }
.mc-skeleton-line--body    { height: 14px; width: 180px; }

/* === D39-BUG-HUNT START === D38-P4 ile uyumlu: skeleton anim KALDIRILDI
   Onceki: shimmer 1.5s infinite (kullanici "loading inconsistent" diye sikayet etti).
   Sade placeholder pattern .mc-prem-skeleton-quiet ile aynilastirildi. */
.mc-skeleton-pulse {
  position: relative;
  background: var(--line);
}
/* === D39-BUG-HUNT END === */

/* v3101 SP-C: Skeleton grid wrapper (renderLoadingSkeleton helper output) */
.mc-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 4px 0;
}
.mc-skeleton-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.mc-skeleton-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.mc-skeleton-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* v3101 SP-C: Skeleton list (sıra/satır bazlı yükleme) */
.mc-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.mc-skeleton-row__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.mc-skeleton-row__lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* v3101 SP-C: Skeleton detail (tek büyük detay alanı) */
.mc-skeleton-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
}
.mc-skeleton-detail__art {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
}
.mc-skeleton-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 720px) {
  .mc-skeleton-detail { grid-template-columns: 1fr; }
}

/* v3101 SP-C: prefers-reduced-motion — shimmer durur, statik renkte kalır */
@media (prefers-reduced-motion: reduce) {
  .mc-skeleton-pulse {
    animation: none;
    background: var(--line);
  }
}

/* v3101 SP-C: Screen-reader only — accessibility live-region label */
.mc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* v3101 SP-C: Premium empty state — icon + başlık + 1 satır + CTA */
.mc-empty--premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 24px;
  min-height: 280px;
  text-align: center;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: 16px;
}
.mc-empty--premium .mc-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--ink-faint);
  opacity: 0.55;
}
.mc-empty--premium .mc-empty__title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.mc-empty--premium .mc-empty__body {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  max-width: 44ch;
  line-height: 1.55;
}
.mc-empty--premium .mc-empty__cta {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}
.mc-empty--premium .mc-empty__cta:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.04);
}

/* ─── Focus + reduced motion ──────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── v12.29: Hero Section (Öne Çıkan Tasarım) ───── */

/* v12.29d: Hero — büyütülmüş, premium gradient border */
.mc-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-2);
  min-height: 220px;
  cursor: pointer;
  transition: border-color 280ms var(--ease), box-shadow 400ms var(--ease), transform 400ms var(--ease);
}
.mc-hero:hover {
  border-color: var(--accent);
  box-shadow: 0 28px 56px -18px rgba(0,0,0,0.14), 0 0 0 1px var(--accent), 0 0 48px -12px rgba(var(--accent-rgb, 99,102,241), 0.08);
  transform: translateY(-2px);
}

.mc-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow: hidden;
}
.mc-hero__art::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb, 99,102,241), 0.08) 0%, transparent 65%);
  filter: blur(32px);
  pointer-events: none;
}
/* v12.29d: Hero composite — daha büyük mockup, admin kalitesi */
.mc-hero__art .mc-card__composite {
  width: 72%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
}
.mc-hero__art .mc-card__composite-mockup,
.mc-hero__art .mc-card__composite-design {
  filter: drop-shadow(0 14px 28px rgba(13,12,10,0.18));
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mc-hero:hover .mc-card__composite-mockup,
.mc-hero:hover .mc-card__composite-design { transform: scale(1.04); }

.mc-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 32px;
}
.mc-hero__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mc-hero__badge--premium {
  color: #c9a24d;
  background: linear-gradient(135deg, rgba(201,162,77,0.14), rgba(201,162,77,0.06));
  border: 1px solid rgba(201,162,77,0.35);
}
.mc-hero__badge--new {
  color: #22c55e;
  background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.06));
  border: 1px solid rgba(34,197,94,0.35);
}
.mc-hero__name {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.mc-hero__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 30ch;
}
.mc-hero__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.mc-hero__cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mc-hero__cta svg { width: 14px; height: 14px; }
.mc-hero__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.mc-hero__price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 3px;
}

/* v12.29: Dark mode hero */
body.motta-order-page[data-theme="dark"] .mc-hero__art {
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 100%);
}
body.motta-order-page[data-theme="dark"] .mc-hero__art img {
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.45));
}

/* ─── Responsive ──────────────────────────────────── */

@media (max-width: 1180px) {
  .mc-grid__cards { grid-template-columns: repeat(4, 1fr); }
  .mc-grid__cards[data-cols="7"] { grid-template-columns: repeat(5, 1fr); }
  .mc-grid__cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  /* v12.29: Brief zaten flex-column, sadece padding düşür */
  .mc-grid__brief {
    padding: 16px var(--pad-x) 12px;
    gap: 4px;
  }
  .mc-title { font-size: clamp(18px, 4vw, 26px); }
  .mc-sub { font-size: 12px; }
  .mc-grid__cards { grid-template-columns: repeat(3, 1fr); }
  .mc-grid__cards[data-cols="7"] { grid-template-columns: repeat(4, 1fr); }
  .mc-grid__cards[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
  .mc-grid__main  { padding: 14px var(--pad-x); gap: 10px; }
  .mc-grid__toolbar { flex-wrap: wrap; }
  /* v12.29: Hero tek sütun */
  .mc-hero { grid-template-columns: 1fr; min-height: auto; }
  .mc-hero__art { padding: 20px; min-height: 160px; }
  .mc-hero__info { padding: 20px 24px 24px; }

  /* v12.12: 960px — sepet dar sidebar kalır */
  .mc-customize__canvas { padding: 12px var(--pad-x) 0; }
  .mc-swatches { grid-template-columns: repeat(10, 1fr); }
  .mc-canvas__bottom-bar { flex-wrap: wrap; gap: 8px; padding: 8px var(--pad-x); }
  .mc-cart-drawer { flex: 0 0 240px; }
}

@media (max-width: 600px) {
  :root { --pad-x: 20px; --pad-y: 18px; }
  .mc-topbar { padding: 14px 20px; }
  /* v12.29: Brief ultra-kompakt mobilde */
  .mc-grid__brief { padding: 12px 20px 8px; }
  .mc-sub { display: none; }
  .mc-grid__cards,
  .mc-grid__cards[data-cols="3"],
  .mc-grid__cards[data-cols="5"],
  .mc-grid__cards[data-cols="7"] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mc-cat-chip { padding: 6px 10px; font-size: 11px; }
  .mc-card__meta { padding: 10px 12px; }
  .mc-card__name { font-size: 12px; }
  .mc-card__type { font-size: 10px; }
  /* v12.29: Hero mobil — CTA küçült */
  .mc-hero__art { padding: 16px; min-height: 140px; }
  .mc-hero__info { padding: 16px 20px 20px; gap: 8px; }
  .mc-hero__name { font-size: 16px; }
  .mc-hero__cta { padding: 8px 18px; font-size: 12px; }
  .mc-hero__price { font-size: 15px; }
  .mc-customize__canvas { padding: 10px 20px 0; max-width: 100%; }
  .mc-swatches { grid-template-columns: repeat(8, 1fr); }
  /* v12.12: 600px altı — sağdan kayan drawer */
  .mc-cart-drawer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    left: auto; flex: none;
    width: 280px; z-index: 10;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .mc-cart-drawer.is-open { transform: translateX(0); pointer-events: auto; }
  .mc-cart-toggle { display: flex; }
  .mc-cart-drawer::before {
    display: block; content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.28s ease;
    pointer-events: none; z-index: -1;
  }
  .mc-cart-drawer.is-open::before { background: rgba(0,0,0,0.12); pointer-events: auto; }
  .mc-cart-drawer__body { border-left: none; }
  .mc-canvas__bottom-bar { padding: 6px 12px; gap: 6px; }
  .mc-kit-bar { gap: 4px; padding: 3px; }
  .mc-kit-tab { width: 30px; height: 30px; padding: 0; }
  .mc-kit-tab .mc-kind-icon { width: 16px; height: 16px; }
  .mc-view-toggle__btn { padding: 6px 14px; font-size: 11px; }
  /* v12.29: Mobilde saved cart modal tam genişlik */
  .mc-saved-cart-modal__content { width: 95%; max-width: none; }
  .mc-saved-cart__resume { padding: 5px 10px; font-size: 10px; }
  .mc-topbar-cart { width: 30px; height: 30px; }
  .mc-topbar-cart svg { width: 15px; height: 15px; }
}

/* v7-T2: Profesyonel auth chip + modal */
.mc-pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2, #64748b);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s ease;
}
.mc-pro-chip:hover { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }
.mc-pro-chip.is-on { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.mc-pro-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.18); }
.mc-pro-chip__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-pro-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-pro-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.mc-pro-gate__panel {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  background: var(--bg-1, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.mc-pro-gate__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mc-pro-gate__head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.mc-pro-gate__close { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.mc-pro-gate__sub { margin: 0 0 18px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.mc-pro-gate__form { display: flex; flex-direction: column; gap: 12px; }
.mc-pro-gate__field { display: flex; flex-direction: column; gap: 6px; }
.mc-pro-gate__field span { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.mc-pro-gate__field small { color: var(--ink-3, #94a3b8); font-weight: 400; }
.mc-pro-gate__field input { height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--ink); font-size: 13px; }
.mc-pro-gate__field input:focus { outline: none; border-color: var(--accent); }
.mc-pro-gate__error { padding: 8px 12px; background: rgba(239,68,68,0.08); color: #dc2626; border-radius: 8px; font-size: 12px; }
.mc-pro-gate__success { padding: 8px 12px; background: rgba(16,185,129,0.1); color: #059669; border-radius: 8px; font-size: 12px; }
.mc-pro-gate__submit { height: 40px; border: 0; border-radius: 10px; background: var(--accent, #151719); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; margin-top: 4px; }
.mc-pro-gate__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* v7-T4: defer to manufacturer toggle */
.mc-defer__row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; transition: 0.15s ease; }
.mc-defer__row:hover { border-color: var(--accent); background: var(--accent-soft); }
.mc-defer__row input[type="checkbox"] { margin-top: 3px; }
.mc-defer__text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.mc-defer__text strong { font-size: 12px; color: var(--ink); }
.mc-defer__text small { color: var(--ink-2); font-size: 11px; line-height: 1.4; }

/* Shared: cart chip + thumb (drawer ve popover'da kullanılır) */
.mc-cart-chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); overflow: hidden; }
.mc-cart-chip svg { display: block; width: 100%; height: 100%; }
.mc-cart-thumb { width: 28px; height: 28px; object-fit: contain; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px; }

.mc-customize__canvas { position: relative; }
/* v10-A2: canvas-toolbar (zone chips + action buttons) kaldırıldı.
   Tüm etkileşim: SVG fil path click + [data-zone-hit] rect + cart panel "Beden gir" */

/* Popover */
.mc-popover {
  position: absolute;
  top: 60px; right: 14px;
  z-index: 12;
  width: min(360px, calc(100% - 28px));
  max-height: calc(100% - 80px);
  background: var(--bg-1, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: mc-pop-in 0.16s ease-out;
}
@keyframes mc-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.mc-popover--swatch { right: auto; left: 14px; }
.mc-popover__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.mc-popover__head strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.mc-popover__close {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
  color: var(--ink-2); cursor: pointer; padding: 0 4px;
}
.mc-popover__body { padding: 14px; overflow: auto; }
.mc-pop-swatches { grid-template-columns: repeat(8, 1fr); gap: 6px; }
.mc-pop-hint { margin: 0 0 10px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.mc-pop-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; }
.mc-pop-thumb img { max-width: 100%; max-height: 120px; object-fit: contain; background: var(--bg-2); border-radius: 8px; padding: 8px; border: 1px solid var(--line); }
.mc-pop-thumb small { font-size: 11px; color: var(--ink-2); }
.mc-pop-upload { display: block; cursor: pointer; }
.mc-pop-upload__btn {
  display: block; text-align: center;
  padding: 10px; background: var(--ink, #0f172a); color: #fff;
  border-radius: 8px; font-size: 12px; font-weight: 600;
}
.mc-pop-remove {
  display: block; width: 100%; margin-top: 8px;
  padding: 8px; background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); border-radius: 8px; font-size: 12px; cursor: pointer;
}
.mc-pop-remove:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.mc-pop-input {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px; font-weight: 600; text-align: center;
  background: var(--bg-2); color: var(--ink);
}
.mc-pop-input:focus { outline: none; border-color: var(--accent); }
.mc-pop-total {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 4px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--bg-2); border-radius: 8px;
}
.mc-pop-total span { font-size: 11px; color: var(--ink-2); }
.mc-pop-total strong { font-size: 16px; color: var(--ink); }
/* v12.32 (M-H5): Hex color value text display */
.mc-pop-color-hex {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Mono', monospace;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  letter-spacing: 0.04em;
}
.mc-pop-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(15,23,42,.1);
  flex-shrink: 0;
}
.mc-pop-color-dot-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mc-pop-swatches + .mc-pop-total,
.mc-size-grid + .mc-pop-total { margin-top: 10px; }

/* v11: SVG <g class="mc-marker"> — admin placementZones'tan refreshOverlay()'de oluşturulur
   Konum: SVG transform="translate(x,y)" attribute (CSP-safe, setProperty yok) */
.mc-marker {
  cursor: pointer;
  pointer-events: bounding-box;
  touch-action: none;
  transition: opacity 0.15s ease;
}
.mc-marker.is-grabbing { cursor: grabbing; }
.mc-marker__outline {
  fill: rgba(255,255,255,0.07);
  stroke: rgba(255,255,255,0.72);
  stroke-width: 3;
  stroke-dasharray: 6 4;
  transition: fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
}

/* v1305: ULTRA-PREMIUM marker sistemi — Figma/Linear seviyesinde temiz, refined */
.mc-marker.is-circle .mc-marker__outline { display: none; }

/* HALO — gizli; sadece hover/active'de aktif */
.mc-marker__halo {
  fill: rgba(0, 0, 0, 0);
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 0;
  transition: all 260ms var(--ease-premium, cubic-bezier(0.4,0,0.2,1));
  pointer-events: none;
}

/* RING — daima görünür, beyaz cam efekt, soft elevation */
.mc-marker__ring {
  fill: rgba(255, 255, 255, 0.98);
  stroke: rgba(15, 23, 42, 0.18);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.12))
          drop-shadow(0 3px 6px rgba(15, 23, 42, 0.16));
  transition: all 220ms var(--ease-premium, cubic-bezier(0.4,0,0.2,1));
}

/* SWATCH — renk dolu iç daire, yumuşak kontur */
.mc-marker__swatch {
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 0.6;
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 220ms var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
  pointer-events: none;
}

/* Has-value (renk seçildi) — yeşil emerald accent ring */
.mc-marker--color.has-value .mc-marker__ring {
  fill: rgba(255, 255, 255, 1);
  stroke: rgba(5, 150, 105, 0.55);
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.22))
          drop-shadow(0 4px 12px rgba(15, 23, 42, 0.18));
}

/* HOVER — soft lift + altın ring + swatch hafif büyür */
.mc-marker--color:hover .mc-marker__ring {
  stroke: rgba(180, 83, 9, 0.85);
  stroke-width: 2;
  filter: drop-shadow(0 3px 6px rgba(180, 83, 9, 0.22))
          drop-shadow(0 6px 16px rgba(15, 23, 42, 0.22));
}
.mc-marker--color:hover .mc-marker__swatch {
  transform: scale(1.06);
}
.mc-marker--color:hover .mc-marker__halo {
  fill: rgba(180, 83, 9, 0.08);
  stroke: rgba(180, 83, 9, 0.32);
  stroke-width: 1.5;
}

/* ACTIVE / popover açık — solid amber accent + scale */
.mc-marker--color.is-open .mc-marker__ring {
  fill: rgba(255, 255, 255, 1);
  stroke: #b45309;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 1))
          drop-shadow(0 0 14px rgba(180, 83, 9, 0.45))
          drop-shadow(0 4px 12px rgba(15, 23, 42, 0.22));
  animation: mcMarkerActivePulse 1.8s ease-in-out infinite;
}
.mc-marker--color.is-open .mc-marker__swatch {
  transform: scale(1.10);
}

@keyframes mcMarkerActivePulse {
  0%, 100% { stroke-opacity: 1; }
  50%      { stroke-opacity: 0.65; }
}

/* v1305: SPONSOR / LOGO markerlar — subtle ghost outline, premium light feel */
.mc-marker--sponsor .mc-marker__outline,
.mc-marker--logo .mc-marker__outline,
.mc-marker--number .mc-marker__outline,
.mc-marker--name .mc-marker__outline {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  transition: all 220ms var(--ease-premium, cubic-bezier(0.4,0,0.2,1));
}
.mc-marker--sponsor:hover .mc-marker__outline,
.mc-marker--logo:hover .mc-marker__outline,
.mc-marker--number:hover .mc-marker__outline,
.mc-marker--name:hover .mc-marker__outline {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(255, 235, 180, 1);
  stroke-width: 2;
  stroke-dasharray: 6 3;
  filter: drop-shadow(0 2px 6px rgba(201, 162, 77, 0.42))
          drop-shadow(0 6px 18px rgba(15, 23, 42, 0.32));
}
.mc-marker--sponsor.has-value .mc-marker__outline,
.mc-marker--logo.has-value .mc-marker__outline {
  fill: rgba(5, 150, 105, 0.10);
  stroke: rgba(16, 185, 129, 0.85);
  stroke-width: 1.8;
  stroke-dasharray: none;
}

/* v1305: Corner tag (SPONSOR/LOGO label) — daha ince, premium kapsül stili */
.mc-marker__corner-tag {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(15, 23, 42, 0.85);
  stroke-width: 0.5;
  paint-order: stroke fill;
  font-family: 'Helvetica Neue', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}
.mc-marker--sponsor.has-value .mc-marker__corner-tag,
.mc-marker--logo.has-value .mc-marker__corner-tag {
  fill: rgba(16, 185, 129, 0.96);
}

/* v1305: İçeride iconografi — sponsor/logo türünü gösteren küçük SVG ikon merkeze yerleşir */
.mc-marker__icon-glyph {
  color: rgba(255, 255, 255, 0.90);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  transition: color 220ms var(--ease-premium, cubic-bezier(0.4,0,0.2,1)),
              transform 220ms var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
  transform-origin: center;
  transform-box: fill-box;
}
.mc-marker--sponsor:hover .mc-marker__icon-glyph,
.mc-marker--logo:hover .mc-marker__icon-glyph,
.mc-marker--number:hover .mc-marker__icon-glyph,
.mc-marker--name:hover .mc-marker__icon-glyph {
  color: rgba(255, 235, 180, 1);
  transform: scale(1.08);
}
.mc-marker--sponsor.has-value .mc-marker__icon-glyph,
.mc-marker--logo.has-value .mc-marker__icon-glyph {
  color: rgba(16, 185, 129, 0.95);
}

/* Idle pulse — markerlar yaşıyor */
@keyframes mcMarkerIdlePulse {
  0%, 100% { stroke-opacity: 0.42; }
  50%      { stroke-opacity: 0.72; }
}
@keyframes mcMarkerHaloPulse {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-marker__halo { animation: none; }
  .mc-marker--color:hover .mc-marker__halo { animation: none; }
}

/* v1298: HTML marker tooltip — Material dark, max-width 240px wrap, viewport guard */
/* v1309 (C2): Premium marker callout — büyük, kontrast, ok ile bağ */
.mc-marker-tooltip {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  max-width: 280px;                   /* 240→280: daha rahat okuma */
  padding: 11px 16px;                 /* 9/13 → 11/16: premium spacing */
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.94) 100%);
  color: #fff;
  font-family: -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-size: 13.5px;                  /* 12.5 → 13.5: okunabilirlik */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2px;
  border-radius: 10px;                /* 8 → 10: yumuşak */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 8px 24px rgba(15,23,42,.32),
    0 2px 6px rgba(15,23,42,.18),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06);  /* hairline highlight */
  word-break: break-word;
  white-space: normal;
  text-align: center;
  animation: mcTooltipIn 240ms var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) backwards;
}
/* Premium pointer — kalın ok + accent */
.mc-marker-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(15, 23, 42, 0.96);
  filter: drop-shadow(0 2px 2px rgba(15,23,42,.18));
}
.mc-marker-tooltip.is-below::after {
  bottom: auto;
  top: -7px;
  border-top: none;
  border-bottom: 7px solid rgba(15, 23, 42, 0.96);
}
.mc-marker-tooltip.is-leaving {
  animation: mcTooltipOut 180ms var(--ease-premium, cubic-bezier(0.4,0,0.2,1)) forwards;
}
@keyframes mcTooltipIn {
  from { opacity: 0; transform: translateY(4px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mcTooltipOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-marker-tooltip { animation: none !important; }
}

/* Eski SVG text callout (v1297 öncesi) gizle — v1298'de HTML tooltip kullanılıyor */
.mc-marker__callout { display: none; }

/* === D36-v4027 START === .mc-card--recolored overlay'leri TAMAMEN no-op
   (kullanici karari: vitrin kart sade, sadece SVG + mockup, hicbir wash/gradient yok).
   JS tarafi da artik bu class'i ATAMIYOR (D36-v4026). Defansif: class set olsa bile overlay olusmasin. */
.mc-card--recolored .mc-card__art {
  position: relative;
}
.mc-card--recolored .mc-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    var(--card-primary, transparent) 0%,
    var(--card-secondary, transparent) 60%,
    var(--card-accent, transparent) 100%);
  mix-blend-mode: hue;
  opacity: 0.75;
  pointer-events: none;
  z-index: 5;
  transition: opacity 320ms var(--ease-premium, cubic-bezier(0.4,0,0.2,1));
  border-radius: inherit;
}
.mc-card--recolored:hover .mc-card__art::after {
  opacity: 0.88;
}
/* === v4041 recolor overlay restored === */
/* Modern tarayıcılarda mix-blend-mode mevcut; fallback için ayrı blend yok */
@supports not (mix-blend-mode: hue) {
  .mc-card--recolored .mc-card__art::after {
    mix-blend-mode: multiply;
    opacity: 0.50;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-card--recolored .mc-card__art::after { transition: none; }
}
.mc-marker:hover .mc-marker__outline,
.mc-marker.is-open .mc-marker__outline {
  fill: rgba(255,255,255,0.17);
  stroke: rgba(255,255,255,0.95);
  stroke-width: 5;
}
.mc-marker.has-value .mc-marker__outline {
  fill: rgba(201, 162, 77, 0.08);
  stroke: rgba(201, 162, 77, 0.80);
  stroke-dasharray: none;
}
.mc-marker.has-value:hover .mc-marker__outline,
.mc-marker.has-value.is-open .mc-marker__outline {
  fill: rgba(201, 162, 77, 0.16);
  stroke: rgba(201, 162, 77, 1);
}
.mc-marker__icon {
  fill: rgba(255,255,255,0.85);
  font-size: 56px;
  font-weight: 300;
  font-family: ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}
.mc-marker__label {
  fill: rgba(255,255,255,0.92);
  font-size: 24px;
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.45);
  stroke-width: 4;
  pointer-events: none;
  user-select: none;
}
.mc-marker__image {
  /* logo/sponsor PNG/SVG resmi */
}
.mc-marker__number {
  /* admin number placement font/stroke setAttribute'la verilir */
  pointer-events: none;
  user-select: none;
}
/* v12.9: Locked marker — admin-tanımlı, sürüklenemez */
.mc-marker.is-locked { cursor: pointer; }
.mc-marker.is-locked .mc-marker__outline {
  stroke-dasharray: none;
  stroke-opacity: 0.6;
  stroke-width: 3;
}
.mc-marker.is-locked:hover .mc-marker__outline {
  stroke-opacity: 0.85;
  stroke-width: 4;
}
.mc-marker.is-locked.has-value .mc-marker__outline {
  stroke: rgba(201, 162, 77, 0.85);
  fill: rgba(201, 162, 77, 0.08);
}
.mc-marker.is-locked.has-value:hover .mc-marker__outline {
  stroke: rgba(201, 162, 77, 1);
  fill: rgba(201, 162, 77, 0.15);
}
.mc-marker__lock {
  font-size: 16px;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}
.mc-marker:hover .mc-marker__lock { opacity: 0.9; }
/* v12.9: Color zone hotpoint marker — küçük swatch daire */
.mc-marker--color .mc-marker__outline {
  stroke-dasharray: 5 3;
  stroke-width: 2;
  fill: rgba(255,255,255,0.04);
}
.mc-marker--color:hover .mc-marker__outline {
  stroke-width: 3;
  fill: rgba(255,255,255,0.12);
}
.mc-marker__swatch {
  pointer-events: none;
  transition: r 0.15s ease;
}
.mc-marker--color:hover .mc-marker__swatch {
  filter: brightness(1.1);
}
.mc-marker__label--color {
  font-size: 16px;
  fill: rgba(255,255,255,0.85);
  stroke-width: 3;
}
/* v12.27: Ölçü bilgisi — marker altında küçük boyut metni */
.mc-marker__hint {
  fill: rgba(201,162,77,0.92);
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: rgba(10,10,74,0.7);
  stroke-width: 3;
  pointer-events: none;
  user-select: none;
}

/* vNext: mockup uzerinde kompakt marker. Tam etiket hover/acik durumda gorunur. */
.mc-marker__icon {
  font-size: 34px;
  font-weight: 700;
}

/* v1309 (C2): Marker label premium — sürekli görünür (hover'da öne çıkar) */
.mc-marker__label {
  opacity: .82;                          /* 0 → .82: kullanıcı yönlendirme görsün */
  transition: opacity .2s ease, transform .2s ease;
}
.mc-marker__hint {
  opacity: 0;                            /* hint hâlâ hover'da */
  transition: opacity .15s ease;
}
.mc-marker:hover .mc-marker__label,
.mc-marker.is-open .mc-marker__label {
  opacity: 1;
  transform: translateY(-1px);           /* subtle lift */
}
.mc-marker:hover .mc-marker__hint,
.mc-marker.is-open .mc-marker__hint {
  opacity: .96;
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mc-marker__label, .mc-marker__hint { transition: none; }
  .mc-marker:hover .mc-marker__label { transform: none; }
}

/* v1295: ULTRA-PREMIUM marker rehberi — stagger + spring + gradient + glow + pointer + fade-out */
.mc-marker-guide__line {
  stroke: #b45309;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
  animation: mcGuideLine 400ms var(--ease-premium) backwards;
  animation-delay: calc(var(--mc-stagger-i, 0) * 120ms);
}
.mc-marker-guide__bubble {
  fill: url(#mc-bubble-grad);  /* SVG gradient — defs içinde */
  stroke: #b45309;
  stroke-width: 1.8;
  filter:
    drop-shadow(0 2px 4px rgba(180, 83, 9, .25))
    drop-shadow(0 0 10px rgba(245, 158, 11, .18));
  pointer-events: none;
  transform-origin: var(--bubble-origin, left center);
  animation: mcGuideBubbleIn 500ms var(--ease-spring) backwards;
  animation-delay: calc(var(--mc-stagger-i, 0) * 120ms);
}
.mc-marker-guide__pointer {
  fill: #fff;
  stroke: #b45309;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(180,83,9,.20));
  pointer-events: none;
  animation: mcGuideBubbleIn 500ms var(--ease-spring) backwards;
  animation-delay: calc(var(--mc-stagger-i, 0) * 120ms);
}
.mc-marker-guide__label {
  fill: #92400e;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 17px;        /* v1295: 16 → 17, serif premium */
  font-weight: 600;       /* serif'lerde 600 daha rafine */
  letter-spacing: 0.4px;
  font-feature-settings: "kern" 1, "liga" 1;
  pointer-events: none;
  animation: mcGuideLabel 600ms var(--ease-premium) backwards;
  animation-delay: calc(var(--mc-stagger-i, 0) * 120ms + 80ms);
}
.mc-marker-guide__tip { display: none; }
.mc-marker.is-guide-on .mc-marker__outline {
  stroke: #b45309 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 4 4 !important;
  animation: mcGuideOutline 1.6s ease-in-out infinite;
  animation-delay: calc(var(--mc-stagger-i, 0) * 120ms);
}

/* v1295: Smooth fade-out (4.5sn sonra) */
.mc-marker.is-guide-fading .mc-marker-guide__line,
.mc-marker.is-guide-fading .mc-marker-guide__bubble,
.mc-marker.is-guide-fading .mc-marker-guide__pointer,
.mc-marker.is-guide-fading .mc-marker-guide__label {
  animation: mcGuideFadeOut 350ms var(--ease-premium) forwards !important;
}

@keyframes mcGuideLine {
  from { opacity: 0; stroke-dashoffset: 40; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes mcGuideBubbleIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mcGuideLabel {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mcGuideOutline {
  0%, 100% { opacity: .8; stroke-width: 2 !important; }
  50%      { opacity: 1; stroke-width: 2.5 !important; }
}
@keyframes mcGuideFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(0.95); }
}

/* v1296: Premium 3-step stepper — sticky top, gradient gold, breath active dot */
.mc-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(254,252,247,.92));
  border-bottom: 1px solid rgba(15,23,42,.08);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background 200ms var(--ease-premium);
  font: inherit;
  color: inherit;
}
.mc-step:hover { background: rgba(15,23,42,.04); }
.mc-step__dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15,23,42,.06);
  color: var(--ink-mute, #64748b);
  font-size: 12px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  transition: all 280ms var(--ease-spring);
  flex-shrink: 0;
}
.mc-step.is-current .mc-step__dot {
  background: linear-gradient(135deg, #c9a24d 0%, #b45309 100%);
  color: #fff;
  transform: scale(1.18);
  box-shadow: 0 4px 12px rgba(180,83,9,.30);
}
.mc-step.is-done .mc-step__dot {
  background: #059669;
  color: #fff;
}
.mc-step.is-warning .mc-step__dot {
  background: #d97706;
  color: #fff;
}
.mc-step__label {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute, #64748b);
  transition: color 200ms var(--ease-premium);
  letter-spacing: .2px;
}
.mc-step.is-current .mc-step__label {
  color: #0a1628;
  font-weight: 600;
}
.mc-step.is-done .mc-step__label,
.mc-step.is-warning .mc-step__label {
  color: #475569;
}
.mc-step__connector {
  flex: 1;
  min-width: 16px;
  max-width: 60px;
  height: 1.5px;
  background: rgba(15,23,42,.12);
  margin: 0 4px;
  border-radius: 1px;
}
.mc-step-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-left: 4px;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}
.mc-step-badge.is-done {
  background: rgba(5,150,105,.12);
  color: #059669;
}
.mc-step-badge.is-warning {
  background: rgba(217,119,6,.14);
  color: #b45309;
}
.mc-step:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .mc-stepper { padding: 10px 12px; gap: 0; }
  .mc-step__label { display: none; }
  .mc-step.is-current .mc-step__label { display: inline; font-size: 12px; }
  .mc-step__connector { max-width: 24px; }
  .mc-step-badge { display: none; }
  .mc-step.is-current .mc-step-badge { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-step, .mc-step__dot { transition: none !important; }
}

/* v2000 Faz 1 — Renklendirme adımı bayi varlık rehberi */
.mc-brand-guide {
  margin: 18px 4px 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(254, 252, 247, .92), rgba(245, 240, 225, .8));
  border: 1px solid rgba(201, 162, 77, .25);
}
.mc-brand-guide__title {
  margin: 0 0 8px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 600;
  color: #0a1628;
  letter-spacing: .2px;
}
.mc-brand-guide__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-brand-guide__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mc-brand-guide__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9a24d 0%, #b45309 100%);
  box-shadow: 0 1px 4px rgba(180, 83, 9, .35);
}
.mc-brand-guide__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-brand-guide__txt strong {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #0a1628;
}
.mc-brand-guide__txt small {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.45;
}

/* v2000 Faz 1 — Ödeme adımı placeholder (Faz 2 iyzico) */
.mc-wiz-panel--payment {
  padding: 24px 20px;
}
.mc-payment-placeholder {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(254, 252, 247, .92));
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .05);
}
.mc-payment-placeholder h2 {
  margin: 0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: #0a1628;
  letter-spacing: .3px;
}
.mc-payment-placeholder p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}
.mc-payment-placeholder .mc-wiz-nav {
  margin-top: 12px;
}

/* v1296: Sticky CTA bar (Step 3 alt) — onay özeti + Siparişi Onayla buton */
.mc-preview-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), #fefcf7);
  border-top: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -4px 12px rgba(15,23,42,.06);
  margin-top: 20px;
}
.mc-preview-sticky-bar__status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.mc-preview-sticky-bar__status small {
  font-size: 12px;
  color: var(--ink-mute, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-preview-sticky-bar.is-ready {
  background: linear-gradient(180deg, rgba(220, 252, 231, .60), rgba(254,252,247,1));
  border-top-color: rgba(5, 150, 105, .25);
}
.mc-preview-sticky-bar .mc-cta--confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.3);
}
@media (max-width: 600px) {
  .mc-preview-sticky-bar { flex-direction: column; gap: 8px; align-items: stretch; padding: 12px 14px; }
  .mc-preview-sticky-bar .mc-cta--confirm { width: 100%; }
}

/* v1295: Thumbnail shimmer skeleton — yüklenirken pulse loading */
.mc-spec-card__thumb:not(.is-loaded):not(.mc-spec-card__thumb--svg) {
  background: linear-gradient(
    90deg,
    rgba(15,23,42,.04) 0%,
    rgba(180,83,9,.08) 50%,
    rgba(15,23,42,.04) 100%
  );
  background-size: 200% 100%;
  animation: mcShimmer 1.4s ease-in-out infinite;
}
.mc-spec-card__thumb.is-loaded {
  animation: mcThumbFadeIn 350ms var(--ease-premium) forwards;
}
@keyframes mcShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes mcThumbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mc-marker__label {
  font-size: 17px;
  letter-spacing: 0;
}

.mc-marker__label--color {
  font-size: 13px;
}

.mc-marker__hint {
  font-size: 10px;
}

.mc-marker__crest {
  fill: rgba(255,255,255,0.9);
  stroke: rgba(15,23,42,0.72);
  stroke-width: 4;
  pointer-events: none;
}

.mc-marker__callout {
  opacity: 0;
  fill: rgba(255,255,255,0.98);
  stroke: rgba(15,23,42,0.85);
  stroke-width: 3;
  paint-order: stroke;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.mc-marker:hover .mc-marker__callout,
.mc-marker.is-open .mc-marker__callout {
  opacity: .96;
}

/* ─── v12.9: Bottom bar (kit tabs + view toggle) ─── */
/* v1309 (C1): Alt toolbar premium — backdrop blur + subtle border + breathing space */
.mc-canvas__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;                                /* 10 → 12: rahat nefes */
  padding: 10px var(--pad-x) 12px;          /* 8/10 → 10/12 */
  border-top: 1px solid rgba(15,23,42,.06); /* hairline ayrım */
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 50%, rgba(255,255,255,0.74) 100%);
  backdrop-filter: blur(12px);              /* premium frosted glass */
  -webkit-backdrop-filter: blur(12px);
}
@media (prefers-reduced-motion: reduce) {
  .mc-canvas__bottom-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* v12.34 M-S5: Stage zoom controls */
.mc-stage-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
  margin-left: auto;
}
.mc-stage-zoom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background 0.12s;
}
.mc-stage-zoom__btn:hover {
  background: var(--line);
}
.mc-stage-zoom__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.mc-stage-zoom__btn--reset {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mc-stage-zoom__pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
@media (max-width: 600px) {
  .mc-stage-zoom { display: none; }
}

/* v12.39: Undo / Redo / Reset renk butonları */
.mc-undo-redo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}
.mc-undo-redo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background .12s, color .12s;
}
.mc-undo-redo__btn:hover:not(:disabled) {
  background: var(--line);
}
.mc-undo-redo__btn:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.mc-undo-redo__btn--reset {
  color: var(--ink-mute);
}
.mc-undo-redo__btn--reset:hover:not(:disabled) {
  color: var(--ink);
  background: var(--line);
}
[data-theme="dark"] .mc-undo-redo {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.74);
}
@media (max-width: 600px) {
  .mc-undo-redo { display: none; }
}

.mc-kit-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.09);
}
.mc-kit-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(30, 41, 59, 0.72);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mc-kit-tab:hover {
  color: #8a6a20;
  background: rgba(178, 134, 36, 0.10);
  border-color: rgba(178, 134, 36, 0.22);
  transform: translateY(-1px);
}
.mc-kit-tab.is-active {
  background: linear-gradient(135deg, #b68a2e, #8f6a23);
  color: #fff;
  border-color: rgba(143, 106, 35, 0.35);
  box-shadow: 0 10px 22px rgba(143, 106, 35, 0.22);
}
.mc-kit-tab--add {
  color: rgba(30, 41, 59, 0.54);
  border-color: rgba(148, 163, 184, 0.28);
  border-style: dashed;
}
.mc-kit-tab--add:hover { color: #8a6a20; opacity: 1; }
.mc-kit-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.mc-kit-tab .mc-kind-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.mc-kit-tab__add-mark {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(178, 134, 36, 0.28);
  color: #8a6a20;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}
.mc-kit-tab__remove {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  cursor: pointer;
}
.mc-kit-tab:focus-visible .mc-kit-tab__remove {
  display: inline-flex;
}
.mc-kit-tab__remove:hover { background: rgba(220,38,38,0.8); }
[data-theme="dark"] .mc-kit-bar,
[data-theme="dark"] .mc-stage-zoom,
[data-theme="dark"] .mc-view-toggle {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.74);
}
[data-theme="dark"] .mc-kit-tab {
  color: rgba(226, 232, 240, 0.72);
}
[data-theme="dark"] .mc-kit-tab--add {
  color: rgba(226, 232, 240, 0.54);
  border-color: rgba(148, 163, 184, 0.18);
}
[data-theme="dark"] .mc-kit-tab__add-mark {
  background: rgba(15, 23, 42, 0.96);
}

/* ─── v12.11: Cart — desktop: sağ sidebar, mobil: sağ drawer ─── */
/* v1300: Desktop kuralları @media (min-width: 601px) içine alındı —
   mobile drawer + cart toggle CSS source-order specificity ile ezilmesin. */
@media (min-width: 601px) {
.mc-cart-drawer {
  position: relative;
  flex: 0 0 240px;
  display: flex;
  z-index: 1;
  transform: none;
  transition: none;
  pointer-events: auto;
  order: 2;
}
.mc-cart-drawer::before { display: none; }
.mc-cart-toggle {
  display: none;          /* Desktop'ta toggle gereksiz */
  position: absolute;
  top: 50%;
  left: -36px;
  transform: translateY(-50%);
  width: 32px;
  height: 64px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(201,162,77,0.25);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--bg, #fff);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: -3px 0 12px rgba(0,0,0,0.08);
  z-index: 11;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.mc-cart-toggle:hover {
  background: rgba(201,162,77,0.06);
  box-shadow: -3px 0 16px rgba(201,162,77,0.15);
}
.mc-cart-toggle__arrow {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.mc-cart-toggle__badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #c9a24d);
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 1.3;
}
}  /* /v1300 @media (min-width: 601px) — desktop cart sidebar kapanışı */

.mc-cart-drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg, #fff);
  border-left: 1px solid rgba(201,162,77,0.18);
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.06);
}
.mc-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(201,162,77,0.12);
  background: linear-gradient(135deg, rgba(201,162,77,0.04) 0%, transparent 100%);
}
.mc-cart-drawer__head h3 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.mc-cart-drawer__head small { font-size: 11px; font-weight: 600; color: var(--accent, #c9a24d); }
.mc-cart-drawer__items {
  display: flex;
  flex-direction: column;
  /* === D36-Ajan5 START === Madde 47 boşluk fix (gap 4→8, padding 10/12→12/14) */
  gap: 8px;
  padding: 12px 14px;
  /* === D36-Ajan5 END === */
}
.mc-cart-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mc-cart-item:hover {
  border-color: rgba(201,162,77,0.35);
  box-shadow: 0 2px 8px rgba(201,162,77,0.1);
}
.mc-cart-item.is-active {
  border-color: var(--accent, #c9a24d);
  background: var(--accent-soft, rgba(201,162,77,.06));
  box-shadow: 0 0 0 2px rgba(201,162,77,0.12);
}
.mc-cart-item__preview {
  width: 36px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.mc-cart-item__preview--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-cart-item__preview--svg svg { width: 100%; height: 100%; }
.mc-cart-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mc-cart-item strong { font-size: 12px; font-weight: 700; }
.mc-cart-item__chips { display: flex; gap: 3px; }

/* Cart size grid */
.mc-cart-drawer__section {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.mc-cart-drawer__section-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.mc-cart-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.mc-cart-size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mc-cart-size-row.has-value {
  border-color: var(--accent, #c9a24d);
  background: rgba(201, 162, 77, 0.06);
}
.mc-cart-size-row span { font-weight: 600; color: var(--ink); min-width: 22px; font-size: 10px; letter-spacing: 0.04em; }
.mc-cart-size-row input {
  width: 36px;
  border: none;
  background: transparent;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}
.mc-cart-size-row input:focus { color: var(--accent, #c9a24d); }
.mc-cart-size-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 4px;
}
.mc-cart-size-total strong { font-size: 14px; color: var(--accent, #c9a24d); }

/* Label (name + number) */
.mc-cart-label {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.mc-cart-label__title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.mc-cart-label__row {
  display: flex;
  gap: 8px;
}
.mc-cart-label__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mc-cart-label__field span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mc-cart-label__field input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease;
}
.mc-cart-label__field input:focus { border-color: var(--accent, #c9a24d); }
.mc-cart-label__field input:not(:placeholder-shown) {
  border-color: rgba(201, 162, 77, 0.3);
  background: rgba(201, 162, 77, 0.03);
}
.mc-cart-label__field:last-child { max-width: 70px; }

/* Cart drawer footer */
.mc-cart-drawer__foot {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(201,162,77,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(to top, rgba(201,162,77,0.03) 0%, transparent 100%);
}
.mc-cart-drawer__foot .mc-cta {
  width: 100%;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* CTA button states */
.mc-cart-drawer__foot .mc-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--ink-faint, rgba(13,12,10,0.36));
}

/* Toggle button pulse when items exist but cart closed */
.mc-cart-toggle__badge:not(:empty) {
  animation: cart-pulse 2.4s ease-in-out infinite;
}
@keyframes cart-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Name marker */
.mc-marker__name {
  pointer-events: none;
  user-select: none;
}

/* === v4001-D28-W1 START === Premium isim/numara typography + default zone hint ===
   Bu fix sonucunda:
   - Admin tanımlı zone'lar (normal): keskin gölgesi, koyu kontur, beyaz dolgu.
   - Default fallback zone'lar (isDefault=true): hafif kesik kenarlık ipucu, "düzenlenebilir" hissi.
   Premium typography stiller — Shopify Dawn + .mc-prem-* tokens uyumlu.
*/
.mc-marker--number .mc-marker__number,
.mc-marker--name .mc-marker__name {
  /* Drop shadow simulasyonu — paint-order=stroke ile birlikte daha derin görüntü */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  font-feature-settings: "lnum", "tnum";  /* tabular numbers, lining nums */
}
.mc-marker--name .mc-marker__name {
  letter-spacing: 0.08em;  /* takım forması ismi premium aralık */
}
/* Default fallback zone: outline subtle (admin override değildir) */
.mc-marker[data-zone-key^="default-"] .mc-marker__outline {
  stroke-dasharray: 4 4;
  stroke-opacity: 0.55;
}
.mc-marker[data-zone-key^="default-"]:hover .mc-marker__outline {
  stroke-opacity: 0.95;
}
.mc-marker[data-zone-key^="default-"] .mc-marker__corner-tag {
  /* "varsayılan konum" göstergesi: italik küçük tag */
  font-style: italic;
  font-size: 9px;
  opacity: 0.75;
}
/* === v4001-D28-W1 END === */

/* Responsive: cart drawer on mobile */
@media (max-width: 600px) {
  .mc-cart-drawer { width: 280px; }
  .mc-cart-size-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── v12.11: FAB — floating add button ─── */
.mc-fab-container {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mc-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent, #c9a24d);
  background: var(--bg, #fff);
  color: var(--accent, #c9a24d);
  font-size: 24px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mc-fab:hover {
  transform: scale(1.08);
  background: var(--accent, #c9a24d);
  color: var(--bg, #fff);
  box-shadow: 0 6px 20px rgba(154,122,62,0.3);
}
.mc-fab__icon {
  line-height: 1;
  transition: transform 0.2s ease;
}
.mc-fab-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  animation: mc-pop-in 0.16s ease-out;
}
.mc-fab-menu.is-open { display: flex; }
.mc-fab-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  background: transparent;
  color: var(--ink, #0d0c0a);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mc-fab-menu__item:hover {
  background: rgba(201,162,77,0.08);
  border-color: var(--accent, #c9a24d);
}
.mc-fab-menu__icon {
  font-size: 16px;
  line-height: 1;
}

/* ─── v12.11: Premium polish ─── */

/* Swatch selection bounce */
.mc-swatch.is-active {
  animation: mc-swatch-select 0.25s ease-out;
}
@keyframes mc-swatch-select {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Popover giriş animasyonu */
@keyframes mc-pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cart item hover glow */
.mc-cart-item:hover {
  border-color: rgba(201,162,77,0.35);
  box-shadow: 0 0 0 1px rgba(201,162,77,0.1);
}

/* ─── v12.12: Cart Accordion Sections ─── */
.mc-cart-section {
  border-top: 1px solid rgba(201,162,77,0.10);
}
.mc-cart-section__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}
.mc-cart-section__toggle:hover {
  background: rgba(201,162,77,0.04);
}
.mc-cart-section__icon {
  font-size: 14px;
  line-height: 1;
}
.mc-cart-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink, #0d0c0a);
  flex: 1;
  text-align: left;
}
.mc-cart-section__arrow {
  font-size: 11px;
  color: var(--ink-mute, rgba(13,12,10,0.62));
  transition: transform 0.2s ease;
}
.mc-cart-section__badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.08);
  padding: 2px 8px;
  border-radius: 999px;
}
.mc-cart-section__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
}
.mc-cart-section__body {
  display: none;
  padding: 0 16px 12px;
}
.mc-cart-section__body.is-open {
  display: block;
  animation: mc-section-expand 0.2s ease-out;
}
@keyframes mc-section-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-cart-section__hint {
  font-size: 12px;
  color: var(--ink-mute, rgba(13,12,10,0.62));
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

/* ─── v12.12: Player List (İsim & Numara) ─── */
.mc-player-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,77,0.2) transparent;
}
.mc-player-list::-webkit-scrollbar { width: 4px; }
.mc-player-list::-webkit-scrollbar-track { background: transparent; }
.mc-player-list::-webkit-scrollbar-thumb { background: rgba(201,162,77,0.25); border-radius: 2px; }
.mc-player-list__head {
  display: grid;
  grid-template-columns: 2.5em 1fr 3em 26px;
  gap: 6px;
  padding: 4px 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint, rgba(13,12,10,0.36));
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.08));
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  background: var(--bg, #f7f6f1);
  z-index: 1;
}
.mc-player-row {
  display: grid;
  grid-template-columns: 2.5em 1fr 3em 26px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  transition: background 0.12s ease;
}
/* v12.13/v12.24/v12.26: Dynamic column modes — +GK column (26px) */
/* Non-numbered (wantName=true): Üst + İsim [+ Şort] [+ No] + GK */
.mc-player-list[data-col-mode="name"] .mc-player-list__head,
.mc-player-list[data-col-mode="name"] .mc-player-row { grid-template-columns: 2.5em 1fr 26px; }
.mc-player-list[data-col-mode="name-num"] .mc-player-list__head,
.mc-player-list[data-col-mode="name-num"] .mc-player-row { grid-template-columns: 2.5em 1fr 3em 26px; }
.mc-player-list[data-col-mode="name-short"] .mc-player-list__head,
.mc-player-list[data-col-mode="name-short"] .mc-player-row { grid-template-columns: 2.5em 4.5em 1fr 26px; }
.mc-player-list[data-col-mode="full"] .mc-player-list__head,
.mc-player-list[data-col-mode="full"] .mc-player-row { grid-template-columns: 2.5em 4.5em 1fr 3em 26px; }
/* Numbered (wantName=false): # + Üst [+ Şort] [+ No] + GK */
.mc-player-list[data-col-mode="minimal"] .mc-player-list__head,
.mc-player-list[data-col-mode="minimal"] .mc-player-row { grid-template-columns: 1.8em 1fr 26px; }
.mc-player-list[data-col-mode="num"] .mc-player-list__head,
.mc-player-list[data-col-mode="num"] .mc-player-row { grid-template-columns: 1.8em 1fr 3em 26px; }
.mc-player-list[data-col-mode="short"] .mc-player-list__head,
.mc-player-list[data-col-mode="short"] .mc-player-row { grid-template-columns: 1.8em 1fr 4.5em 26px; }
.mc-player-list[data-col-mode="short-num"] .mc-player-list__head,
.mc-player-list[data-col-mode="short-num"] .mc-player-row { grid-template-columns: 1.8em 1fr 4.5em 3em 26px; }
.mc-player-row:hover {
  background: rgba(201,162,77,0.03);
  border-radius: 4px;
}
/* v12.26: Kaleci satır vurgusu */
.mc-player-row--gk {
  background: rgba(34, 197, 94, 0.06);
  border-radius: 4px;
}
.mc-player-row--gk:hover {
  background: rgba(34, 197, 94, 0.1);
}
/* v12.26: Manuel eklenen satır — sol çizgi */
.mc-player-row--manual {
  border-left: 2px solid var(--accent, #c9a24d);
  padding-left: 4px;
}
/* v4017-D36 Madde 17: Aktif oyuncu satırı (Kadro arrow nav ile gezilir) */
.mc-player-row.is-active {
  border: 2px solid var(--mc-gold, #c39b3a);
  background: rgba(195, 155, 58, 0.06);
}
.mc-player-sparkle {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}
/* v12.26: Kaleci toggle butonu */
.mc-player-row__gk {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line, rgba(13,12,10,0.1));
  border-radius: 4px; cursor: pointer; color: var(--ink-3, #94a3b8);
  padding: 0; transition: all 0.15s ease;
}
.mc-player-row__gk:hover { border-color: rgba(34, 197, 94, 0.5); color: #22c55e; }
.mc-player-row__gk.is-active {
  background: rgba(34, 197, 94, 0.12); border-color: #22c55e; color: #22c55e;
}
.mc-player-list__gk-head {
  font-size: 8px; font-weight: 700; color: var(--ink-3, #94a3b8);
  text-align: center; letter-spacing: 0.04em;
}
/* v12.26: Oyuncu ekle butonu */
.mc-player-add {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; margin-top: 6px; padding: 7px 0;
  border: 1px dashed var(--line, rgba(13,12,10,0.12)); border-radius: 6px;
  background: transparent; color: var(--ink-2, #555); font-size: 11px;
  font-weight: 600; cursor: pointer; transition: all 0.15s ease;
  font-family: inherit;
}
.mc-player-add:hover {
  border-color: var(--accent, #c9a24d); color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.04);
}
/* v12.26: Oyuncu sil butonu */
.mc-player-row__del {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,0.1); border: 0; border-radius: 50%; cursor: pointer;
  color: #dc2626; font-size: 12px; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity 0.15s ease;
}
.mc-player-row:hover .mc-player-row__del { opacity: 1; }
.mc-player-row { position: relative; }
/* v12.26: GK sayısı + Preview GK badge + dark mode uyumlu */
.mc-gk-count { color: #22c55e; font-weight: 700; }
.mc-fill-count { color: var(--ink-3, #94a3b8); font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-fill-count--done { color: #22c55e; }
.mc-preview-player--gk { background: rgba(34,197,94,0.06); border-radius: 4px; }
.mc-preview-player__gk {
  font-size: 8px; font-weight: 800; color: #22c55e;
  background: rgba(34,197,94,0.12); padding: 1px 4px; border-radius: 3px;
  letter-spacing: 0.05em;
}
body.motta-order-page[data-theme="dark"] .mc-player-row__del { background: rgba(239,68,68,0.2); color: #ef4444; }
body.motta-order-page[data-theme="dark"] .mc-player-row__gk { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); }
body.motta-order-page[data-theme="dark"] .mc-player-row__gk.is-active { background: rgba(34,197,94,0.18); }
body.motta-order-page[data-theme="dark"] .mc-player-add { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
body.motta-order-page[data-theme="dark"] .mc-player-row__num--dup { border-color: #ef4444 !important; background: rgba(239,68,68,0.15) !important; }
body.motta-order-page[data-theme="dark"] .mc-preview-warn--dup { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: #fca5a5; }
body.motta-order-page[data-theme="dark"] .mc-preview-warn--missing { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); color: #fcd34d; }
.mc-player-row__size {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  text-align: center;
  background: rgba(201,162,77,0.08);
  padding: 3px 0;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.mc-player-row__name,
.mc-player-row__num {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line, rgba(13,12,10,0.08));
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #0d0c0a);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
/* v12.26: Forma ismi büyük harf olarak göster (production preview) */
.mc-player-row__name { text-transform: uppercase; letter-spacing: 0.02em; }
.mc-player-row__name::placeholder { text-transform: none; }
.mc-player-row__name:focus,
.mc-player-row__num:focus {
  border-color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.03);
}
.mc-player-row__name:not(:placeholder-shown),
.mc-player-row__num:not(:placeholder-shown) {
  border-color: rgba(201,162,77,0.25);
  background: rgba(201,162,77,0.02);
}
.mc-player-row__num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* v12.26: Tekrar eden numara uyarısı */
.mc-player-row__num--dup {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  animation: mc-dup-pulse 1.5s ease-in-out infinite;
}
@keyframes mc-dup-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
}

/* ─── v12.13: Şort beden select ─── */
.mc-player-row__short {
  width: 100%;
  padding: 4px 2px;
  border: 1px solid var(--line, rgba(13,12,10,0.08));
  border-radius: 5px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #0d0c0a);
  outline: none;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.mc-player-row__short:focus {
  border-color: var(--accent, #c9a24d);
}

/* v12.13: İsim toggle */
.mc-name-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0d0c0a);
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.08));
}
.mc-name-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #c9a24d);
  cursor: pointer;
}

/* v12.13: Kit items auto-collapse when label expanded */
.mc-cart-drawer__items {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: 400px;
  overflow: hidden;
}
.mc-cart-drawer__items.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

/* ─── v12.13: Mini item previews (multi-item canvas) ─── */
.mc-canvas__viewport.has-multi {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.mc-mini-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 0;
}
.mc-mini-item {
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.mc-mini-item:hover {
  border-color: var(--accent, #c9a24d);
  box-shadow: 0 16px 34px rgba(143, 106, 35, 0.16);
  transform: translateY(-1px);
}
.mc-mini-item__img {
  width: 46px;
  height: 58px;
  object-fit: contain;
  border-radius: 8px;
}
.mc-mini-item__svg {
  width: 46px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-mini-item__svg svg {
  width: 100%;
  height: 100%;
}
.mc-mini-item__label {
  display: none;
}
[data-theme="dark"] .mc-mini-item {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.74);
}

/* Multi-item: main stage adapts */
.mc-canvas__viewport.has-multi .mc-canvas__stage {
  flex: 1;
  min-width: 0;
}

.mc-canvas__viewport.is-kit-studio {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mc-canvas__viewport.is-kit-studio .mc-canvas__zoom-wrap {
  height: 100%;
  max-width: 100%;
}
.mc-kit-studio {
  position: relative;
  width: min(100%, 860px);
  height: min(100%, 720px);
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.44fr);
  grid-template-rows: minmax(0, 1fr) minmax(118px, 0.34fr);
  grid-template-areas:
    "forma side"
    "forma lower";
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 1.8vw, 20px);
  padding: clamp(8px, 1.4vw, 18px);
}
.mc-kit-studio::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 5vw, 54px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(201,162,77,0.14), rgba(255,255,255,0) 62%);
  pointer-events: none;
}
.mc-kit-studio[data-kit-count="4"],
.mc-kit-studio[data-kit-count="5"],
.mc-kit-studio[data-kit-count="6"] {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: none;
}
.mc-kit-studio[data-kit-count="4"] .mc-kit-studio__piece,
.mc-kit-studio[data-kit-count="5"] .mc-kit-studio__piece,
.mc-kit-studio[data-kit-count="6"] .mc-kit-studio__piece {
  grid-area: auto;
}
.mc-kit-studio__piece {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
.mc-kit-studio__piece::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.mc-kit-studio__piece--forma { grid-area: forma; }
.mc-kit-studio__piece--sort { grid-area: side; }
.mc-kit-studio__piece--corap { grid-area: lower; }
.mc-kit-studio__piece--esofman-ust { grid-area: side; }
.mc-kit-studio__piece--esofman-alt,
.mc-kit-studio__piece--esofman-takim { grid-area: lower; }
.mc-kit-studio__piece:not(.is-active) {
  opacity: 0.86;
}
.mc-kit-studio__piece:hover,
.mc-kit-studio__piece:focus-visible {
  border-color: rgba(178, 134, 36, 0.30);
  background: rgba(255,255,255,0.28);
  box-shadow: 0 18px 44px rgba(15,23,42,0.10);
}
.mc-kit-studio__piece.is-active {
  opacity: 1;
  border-color: rgba(178, 134, 36, 0.42);
  background: rgba(255,255,255,0.36);
  box-shadow: 0 22px 58px rgba(15,23,42,0.13);
}
.mc-kit-studio__piece.is-active::after,
.mc-kit-studio__piece.is-focused::after {
  opacity: 1;
}
.mc-kit-studio__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  background: rgba(23,32,51,0.86);
  color: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,0.16);
  pointer-events: none;
}
.mc-kit-studio__badge span {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201,162,77,0.22);
  color: #f7d982;
}
.mc-kit-studio__badge strong {
  overflow: hidden;
  max-width: 98px;
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-kit-studio__stage {
  height: 88%;
  width: auto;
  max-width: 96%;
}
.mc-kit-studio__piece--forma .mc-kit-studio__stage {
  height: 92%;
}
.mc-kit-studio__piece--sort .mc-kit-studio__stage {
  height: 76%;
}
.mc-kit-studio__piece--corap .mc-kit-studio__stage {
  height: 84%;
}
.mc-kit-studio__stage[data-kit-kind="sort"] {
  aspect-ratio: 800 / 1000;
}
.mc-kit-studio__stage[data-kit-kind="corap"] {
  aspect-ratio: 400 / 800;
}
.mc-kit-studio__label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 8px 22px rgba(15,23,42,0.08);
  color: rgba(15,23,42,0.72);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.mc-kit-studio__label strong,
.mc-kit-studio__label em {
  color: #8f6a23;
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* === D48-KIT-LAYOUT-PREVIEW START === */
.mc-kit-studio[data-kit-layout="d48"] {
  width: min(100%, 940px);
  min-height: 430px;
  grid-template-columns: minmax(118px, .46fr) minmax(164px, .68fr) minmax(154px, .64fr) minmax(154px, .64fr);
  grid-template-rows: minmax(255px, 1fr) minmax(145px, .46fr);
  grid-template-areas:
    "gk forma esofman esofman"
    "corap sort pantolon pantolon";
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(8px, 1.5vw, 18px);
}
.mc-kit-studio[data-kit-layout="d48"][data-kit-count="4"],
.mc-kit-studio[data-kit-layout="d48"][data-kit-count="5"],
.mc-kit-studio[data-kit-layout="d48"][data-kit-count="6"] {
  grid-template-columns: minmax(118px, .46fr) minmax(164px, .68fr) minmax(154px, .64fr) minmax(154px, .64fr);
  grid-template-rows: minmax(255px, 1fr) minmax(145px, .46fr);
  grid-template-areas:
    "gk forma esofman esofman"
    "corap sort pantolon pantolon";
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece { grid-area: extra; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-forma { grid-area: forma; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-sort { grid-area: sort; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-corap { grid-area: corap; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-esofman { grid-area: esofman; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-pantolon { grid-area: pantolon; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__quick--slot-gk { grid-area: gk; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__placeholder--slot-sort { grid-area: sort; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__placeholder--slot-corap { grid-area: corap; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__placeholder--slot-esofman { grid-area: esofman; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__placeholder--slot-pantolon { grid-area: pantolon; }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 12px 32px rgba(15,23,42,0.055);
}
.mc-kit-studio[data-kit-layout="d48"].mc-prem-focus-static {
  perspective: none;
  transform-style: flat;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece:hover,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(201,162,77,0.46);
  background: rgba(255,255,255,0.42);
  box-shadow: 0 16px 36px rgba(15,23,42,0.09);
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-active {
  box-shadow: 0 0 0 2px rgba(201,162,77,0.28), 0 18px 42px rgba(15,23,42,0.10);
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece:not(.is-active) .mc-kit-studio__label {
  background: rgba(255,255,255,0.9);
  color: rgba(15,23,42,0.82);
}
.mc-kit-studio__placeholder {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(201,162,77,0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(248,246,239,0.18));
  color: #7a5a1e;
  cursor: pointer;
  opacity: .72;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.mc-kit-studio__placeholder:hover,
.mc-kit-studio__placeholder:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(201,162,77,0.58);
  box-shadow: 0 14px 32px rgba(15,23,42,0.08);
  outline: none;
}
.mc-kit-studio__placeholder-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201,162,77,0.14);
  color: #8f6a23;
}
.mc-kit-studio__placeholder strong {
  color: #172033;
  font-size: 12px;
  font-weight: 950;
}
.mc-kit-studio__placeholder small {
  max-width: 116px;
  color: #667085;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed {
  opacity: .78;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-active {
  background: rgba(255,255,255,0.56);
  border-color: rgba(201,162,77,0.55);
}
.mc-kit-studio__inherit {
  position: absolute;
  top: 44px;
  left: 12px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(201,162,77,0.16);
  color: #7a5a1e;
  font-size: 9px;
  font-weight: 900;
  pointer-events: none;
}
.mc-kit-studio__quick {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}
.mc-kit-studio__quick button {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(201,162,77,0.30);
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
  color: #172033;
  padding: 8px 9px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06);
  cursor: pointer;
}
.mc-kit-studio__quick button:hover,
.mc-kit-studio__quick button:focus-visible {
  border-color: rgba(201,162,77,0.58);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 14px 32px rgba(15,23,42,0.10);
  outline: none;
}
.mc-kit-studio__quick span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201,162,77,0.16);
  color: #8f6a23;
  flex: 0 0 auto;
}
.mc-kit-studio__quick strong {
  min-width: 0;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
}
.mc-prem-focus-lux-3d .mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed {
  transform: scale(.92);
  opacity: .74;
  filter: saturate(.88);
}
.mc-prem-focus-lux-3d .mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused {
  transform: scale(1);
}
/* === D49-A1-FOCUS-GROW START === Seçilen parça belirgin büyür, diğerleri küçülüp soluklaşır (kullanıcı: "hangi parçayı seçersen o büyüyecek") */
.mc-kit-studio.mc-d49-focus-grow { overflow: visible; }
.mc-kit-studio.mc-d49-focus-grow .mc-kit-studio__piece {
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.45, 1), opacity 240ms ease, filter 240ms ease;
  transform-origin: center center;
}
/* === D58-W6-FOCUS-SCALE === active = focused her durumda eşit; her iki class ile tetiklensin (selector OR) */
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused,
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-active,
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused:hover,
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-active:hover {
  transform: scale(2.07) !important; /* D49 +15%: showroom hero — müşteri tasarladığını çok net görsün */
  z-index: 9 !important;
}
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed,
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed:hover {
  transform: scale(0.6) !important;
  opacity: 0.34 !important;
  filter: saturate(0.7) blur(0.7px) !important; /* dramatic "out of focus" pro hissi */
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mc-kit-studio.mc-d49-focus-grow .mc-kit-studio__piece { transition: none; }
}
/* === D49-A1-FOCUS-GROW END === */
/* === D49-A2-SWAP-BUTTON START === Parça üst köşe "tasarımı değiştir" pop-up tetikleyici */
.mc-kit-studio__swap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,77,0.55);
  background: rgba(255,255,255,0.92);
  color: #8f6a23;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.mc-kit-studio__piece:hover .mc-kit-studio__swap,
.mc-kit-studio__piece.is-focused .mc-kit-studio__swap,
.mc-kit-studio__piece:focus-within .mc-kit-studio__swap {
  opacity: 1;
}
.mc-kit-studio__swap:hover {
  background: #fff;
  transform: scale(1.08);
  border-color: rgba(201,162,77,0.95);
  color: #6f4f12;
}
/* === D49-A2-SWAP-BUTTON END === */
/* === D49-C-SPONSOR-TEXT START === Sponsor yazı/resim popover */
.mc-pop-textrow { margin-top: 8px; }
/* === D58-W7-SPONSOR-COMMIT-BTN === input + Ekle butonu yan yana flex */
.mc-pop-textrow.mc-pop-textrow--with-btn {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.mc-pop-textrow.mc-pop-textrow--with-btn .mc-pop-textinput { flex: 1; }
.mc-pop-textcommit {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--accent, #c9a24d);
  background: var(--accent, #c9a24d);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
  letter-spacing: 0.01em;
}
.mc-pop-textcommit:hover {
  background: #b58f3e;
  border-color: #b58f3e;
}
.mc-pop-textcommit:active { transform: scale(0.97); }
/* === D58-W7 END === */
.mc-pop-textinput {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(201,162,77,0.45);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #172033;
  background: #fff;
}
.mc-pop-textinput:focus {
  outline: none;
  border-color: rgba(201,162,77,0.9);
  box-shadow: 0 0 0 3px rgba(201,162,77,0.16);
}
.mc-pop-thumb--text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mc-pop-thumb--text strong { font-size: 16px; font-weight: 900; color: #172033; letter-spacing: .5px; }
/* === D49-C-SPONSOR-TEXT END === */
/* === D51-STAGE-STATIC-BACKFIX START === Stable 2D kit stage: no side drift, no duplicate underlay/shadow layer. */
.mc-kit-studio[data-kit-layout="d48"]::before,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece::after,
.mc-kit-studio[data-kit-layout="d48"] .mc-canvas__shadow-layer,
.mc-design-review__face .mc-card__composite-shadow {
  display: none;
}
/* === D51-STAGE-STATIC-BACKFIX END === */
/* === D54-ULTRA-KIT-STUDIO START === Tesla-like one-contour showroom and stable marker geometry. */
.mc-canvas__viewport.has-d54-summary {
  padding-left: 178px;
}
.mc-d54-work-summary {
  position: absolute;
  left: 10px;
  top: 50%;
  z-index: 8;
  width: 154px;
  transform: translateY(-50%);
  padding: 12px;
  border: 1px solid rgba(201,162,77,0.24);
  border-radius: 18px;
  background: rgba(255,255,255,0.74);
  box-shadow: 0 18px 44px rgba(15,23,42,0.10);
  backdrop-filter: blur(14px) saturate(1.12);
  color: #172033;
}
.mc-d54-summary__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #8f6a23;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mc-d54-work-summary h4 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
}
.mc-d54-work-summary dl {
  display: grid;
  gap: 6px;
  margin: 0;
}
.mc-d54-work-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 850;
}
.mc-d54-work-summary dt { color: #667085; }
.mc-d54-work-summary dd { margin: 0; color: #172033; text-align: right; }
.mc-d54-summary__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.mc-d54-summary__dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.92);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 6px 14px rgba(15,23,42,0.12);
}
.mc-d54-summary__pill {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  color: #166534;
  font-size: 9px;
  font-weight: 950;
}
.mc-kit-studio[data-kit-layout="d48"] {
  width: min(100%, 980px);
  height: min(100%, 650px);
  min-height: 400px;
  grid-template-columns: minmax(108px,.44fr) minmax(144px,.58fr) minmax(144px,.58fr) minmax(136px,.54fr);
  grid-template-rows: minmax(232px,1fr) minmax(142px,.44fr);
  grid-template-areas:
    "gk forma esofman esofman"
    "corap sort pantolon pantolon";
  gap: clamp(10px, 1.35vw, 16px);
  padding: clamp(10px, 1.4vw, 16px);
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1;
  overflow: visible;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed {
  opacity: .64;
  filter: saturate(.86) contrast(.96);
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece:hover,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.mc-kit-studio__frame {
  position: relative;
  z-index: 1;
  width: min(100%, 132px);
  aspect-ratio: var(--mc-piece-ar, 823 / 1058);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border: 1.5px solid rgba(148,163,184,0.34);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
  overflow: visible;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.mc-kit-studio__piece.is-active .mc-kit-studio__frame,
.mc-kit-studio__piece.is-focused .mc-kit-studio__frame {
  border-color: rgba(201,162,77,0.96);
  box-shadow: 0 0 0 3px rgba(201,162,77,0.18), 0 20px 46px rgba(143,106,35,0.16), inset 0 1px 0 rgba(255,255,255,0.86);
}
.mc-kit-studio__piece--slot-forma .mc-kit-studio__frame { width: min(86%, 150px); }
.mc-kit-studio__piece--slot-esofman .mc-kit-studio__frame { width: min(86%, 148px); }
.mc-kit-studio__piece--slot-pantolon .mc-kit-studio__frame { width: min(92%, 138px); }
.mc-kit-studio__piece--slot-sort .mc-kit-studio__frame { width: min(88%, 118px); }
.mc-kit-studio__piece--slot-corap .mc-kit-studio__frame { width: min(78%, 86px); }
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-forma .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-sort .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-corap .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-esofman .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-pantolon .mc-kit-studio__stage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058) !important;
  overflow: visible;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-canvas__layers,
.mc-kit-studio[data-kit-layout="d48"] .mc-canvas__overlay {
  inset: 0;
  width: 100%;
  height: 100%;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__badge {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17,24,39,0.84);
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__label {
  bottom: 0;
  background: rgba(255,255,255,0.88);
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__quick,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__placeholder {
  background: rgba(255,255,255,0.36);
  box-shadow: none;
}
.mc-prem-focus-lux-3d .mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed,
.mc-prem-focus-lux-3d .mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused {
  transform: none !important;
}
.mc-gk-model {
  width: min(94vw, 760px);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid rgba(201,162,77,0.30);
  border-radius: 24px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 30px 90px rgba(15,23,42,0.24);
}
.mc-gk-model__head,
.mc-gk-model__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}
.mc-gk-model__foot { border-top: 1px solid rgba(15,23,42,0.07); border-bottom: 0; }
.mc-gk-model__head span {
  color: #8f6a23;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mc-gk-model__head h3 { margin: 2px 0 0; font-size: 22px; font-weight: 950; }
.mc-gk-model__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  padding: 16px;
}
.mc-gk-model__card {
  min-height: 168px;
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: 18px;
  background: #fff;
  color: #172033;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.07);
}
.mc-gk-model__card img {
  width: 100%;
  height: 112px;
  object-fit: contain;
}
.mc-gk-model__card.is-selected {
  border-color: rgba(201,162,77,0.92);
  box-shadow: 0 0 0 3px rgba(201,162,77,0.16), 0 18px 42px rgba(143,106,35,0.12);
}
.mc-gk-model__card strong { font-size: 12px; font-weight: 950; text-align: center; }
.mc-gk-model__tools {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}
.mc-gk-model__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mc-gk-model__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-gk-model__toggles button {
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 999px;
  background: #fff;
  padding: 8px 11px;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.mc-gk-model__toggles button.is-active {
  border-color: rgba(201,162,77,0.86);
  background: rgba(201,162,77,0.14);
  color: #7a5a1e;
}
@media (max-width: 740px) {
  .mc-canvas__viewport.has-d54-summary {
    padding-left: 0;
    padding-top: 88px;
  }
  .mc-d54-work-summary {
    left: 10px;
    right: 10px;
    top: 8px;
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 9px 10px;
  }
  .mc-d54-work-summary dl,
  .mc-d54-summary__colors,
  .mc-d54-summary__pill { display: none; }
  .mc-kit-studio[data-kit-layout="d48"] {
    grid-template-columns: .72fr 1fr;
    grid-template-rows: minmax(58px,.20fr) minmax(168px,.88fr) minmax(112px,.46fr) minmax(92px,.34fr);
    grid-template-areas:
      "gk gk"
      "forma esofman"
      "corap sort"
      "pantolon pantolon";
    min-height: 390px;
  }
  .mc-kit-studio__piece--slot-forma .mc-kit-studio__frame,
  .mc-kit-studio__piece--slot-esofman .mc-kit-studio__frame { width: min(82%, 122px); }
}
/* === D54-ULTRA-KIT-STUDIO END === */
/* === D48-KIT-LAYOUT-PREVIEW END === */

/* === D47-A/B/C PREMIUM MULTI-ITEM START === */
.mc-kit-composer {
  display: flex;
  width: min(100%, 760px);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px;
  border: 1px solid rgba(201,162,77,0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 16px 44px rgba(15,23,42,0.10);
  backdrop-filter: blur(12px) saturate(1.1);
}
.mc-kit-composer__meta {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 4px;
  color: #172033;
  line-height: 1;
  white-space: nowrap;
}
.mc-kit-composer__mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #172033;
  color: #f7d982;
  box-shadow: 0 10px 26px rgba(15,23,42,0.18);
}
.mc-kit-composer__title {
  color: #9b7a2c;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mc-kit-composer__meta strong {
  overflow: hidden;
  max-width: 120px;
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
}
.mc-kit-composer__meta em {
  color: #667085;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}
.mc-add-item-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mc-kit-composer__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mc-add-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(178, 134, 36, 0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,247,240,0.94));
  color: #7a5a1e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.mc-kit-preview-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(23,32,51,0.12);
  border-radius: 999px;
  background: #172033;
  color: #f7d982;
  box-shadow: 0 12px 30px rgba(15,23,42,0.14);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.mc-kit-preview-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15,23,42,0.18);
}
.mc-add-item-btn:focus-visible {
  outline: 3px solid rgba(201,162,77,0.22);
  outline-offset: 2px;
}
.mc-add-item-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(178, 134, 36, 0.58);
  box-shadow: 0 16px 34px rgba(15,23,42,0.12);
}
.mc-add-item-btn__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.mc-esofman-picker {
  width: min(520px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(201,162,77,0.22);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 28px 90px rgba(15,23,42,0.22);
  padding: 16px;
}
.mc-esofman-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.mc-esofman-picker__head span,
.mc-gk-wizard__head span {
  display: block;
  color: #9b7a2c;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mc-esofman-picker__head h3,
.mc-gk-wizard__head h3 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}
.mc-esofman-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mc-esofman-picker__grid--usage {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc-esofman-picker__back {
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 999px;
  background: #fff;
  color: #7a5a1e;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.mc-esofman-option {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,246,239,0.9));
  color: #172033;
  text-align: left;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 180ms ease, box-shadow 180ms ease;
}
.mc-esofman-option:hover {
  transform: translateY(-2px);
  border-color: rgba(201,162,77,0.45);
  box-shadow: 0 18px 42px rgba(15,23,42,0.13);
}
.mc-esofman-option__icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201,162,77,0.12);
  color: #9b7a2c;
}
.mc-kit-picker__empty {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(201,162,77,0.35);
  background: rgba(201,162,77,0.08);
  color: #7a5a1e;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.mc-esofman-option strong { font-size: 14px; font-weight: 900; }
.mc-esofman-option small { color: #667085; font-size: 11px; line-height: 1.35; }
.mc-d47-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 9px 12px 9px 14px;
  border-radius: 14px;
  border: 1px solid rgba(201,162,77,0.25);
  background: rgba(23,32,51,0.94);
  color: #fff;
  box-shadow: 0 18px 48px rgba(15,23,42,0.28);
  font-size: 12px;
  font-weight: 800;
}
.mc-d47-toast button {
  border: 0;
  border-radius: 999px;
  background: #c9a24d;
  color: #172033;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.mc-prem-focus-stage {
  --mc-focus-rotate-x: 0deg;
  --mc-focus-rotate-y: 0deg;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.mc-prem-focus-lux-3d .mc-kit-studio__piece {
  will-change: transform, opacity, filter;
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 260ms ease, filter 260ms ease, box-shadow 260ms ease;
}
.mc-prem-focus-lux-3d .mc-kit-studio__piece.is-focused {
  transform: scale(1) rotateX(var(--mc-focus-rotate-x)) rotateY(var(--mc-focus-rotate-y)) translateZ(40px);
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 3px rgba(201,162,77,0.52), 0 28px 70px rgba(15,23,42,0.17);
}
.mc-prem-focus-lux-3d .mc-kit-studio__piece.is-dimmed {
  transform: scale(0.56) rotateY(-12deg) translateZ(-60px);
  opacity: 0.56;
  filter: blur(1.5px) grayscale(0.25);
}
.mc-kit-picker__loading {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 12px;
  background: rgba(201,162,77,0.08);
  color: #8f6a23;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.mc-gk-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,197,94,0.16);
  background: rgba(34,197,94,0.06);
}
.mc-gk-compact strong,
.mc-gk-compact span {
  display: block;
}
.mc-gk-compact strong { font-size: 12px; font-weight: 900; color: #17301f; }
.mc-gk-compact span { margin-top: 2px; color: #667085; font-size: 11px; line-height: 1.35; }
.mc-gk-compact__btn,
.mc-gk-wizard__nav,
.mc-gk-wizard__choice {
  border: 1px solid rgba(201,162,77,0.28);
  border-radius: 999px;
  background: #fff;
  color: #7a5a1e;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.mc-gk-wizard {
  width: min(560px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(201,162,77,0.22);
  background: rgba(255,255,255,0.97);
  box-shadow: 0 28px 90px rgba(15,23,42,0.22);
  padding: 16px;
}
.mc-gk-wizard__head,
.mc-gk-wizard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-gk-wizard__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.mc-gk-wizard__steps span {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}
.mc-gk-wizard__steps span.is-active,
.mc-gk-wizard__steps span.is-done {
  background: #c9a24d;
  color: #172033;
}
.mc-gk-wizard__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 14px;
  min-height: 196px;
  align-items: stretch;
}
.mc-gk-wizard__form {
  min-width: 0;
}
.mc-gk-wizard__visual {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}
.mc-gk-wizard__kit-card {
  position: relative;
  display: grid;
  min-height: 126px;
  place-items: center;
  border: 1px solid rgba(201,162,77,0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23,32,51,0.96), rgba(41,50,70,0.92));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 34px rgba(15,23,42,0.16);
}
.mc-gk-wizard__kit-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201,162,77,0.18);
  color: #f7d982;
}
.mc-gk-wizard__kit-card strong { font-size: 22px; font-weight: 950; letter-spacing: .08em; }
.mc-gk-wizard__kit-card small { color: rgba(255,255,255,0.72); font-size: 10px; font-weight: 850; }
.mc-gk-wizard__color-dot {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.mc-gk-wizard__color-dot.is-empty {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.82) 0 3px, rgba(201,162,77,0.35) 3px 6px);
}
.mc-gk-wizard__mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 999px;
  background: rgba(248,246,239,0.86);
  color: #667085;
  font-size: 10px;
  font-weight: 850;
}
.mc-gk-wizard__mini-row strong { color: #172033; font-weight: 950; }
.mc-gk-wizard__question h4 { margin: 0 0 6px; font-size: 17px; font-weight: 900; color: #172033; }
.mc-gk-wizard__question p { margin: 0 0 14px; color: #667085; font-size: 12px; line-height: 1.45; }
.mc-gk-wizard__actions,
.mc-gk-wizard__seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-gk-wizard__choice.is-primary,
.mc-gk-wizard__nav.is-primary,
.mc-gk-wizard__seg button.is-active {
  background: #c9a24d;
  border-color: #c9a24d;
  color: #172033;
}
.mc-gk-wizard__nav:disabled { opacity: .45; cursor: default; }
.mc-gk-wizard__seg button {
  min-height: 34px;
  border: 1px solid rgba(15,23,42,0.1);
  border-radius: 999px;
  background: #fff;
  padding: 0 12px;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.mc-gk-wizard__catalog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.mc-gk-wizard__catalog-card {
  min-width: 0;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
}
.mc-gk-wizard__catalog-card.is-selected { border-color: #c9a24d; box-shadow: 0 0 0 2px rgba(201,162,77,0.16); }
.mc-gk-wizard__catalog-card img,
.mc-gk-wizard__catalog-card span {
  display: flex;
  width: 100%;
  aspect-ratio: 3 / 4;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(15,23,42,0.04);
}
.mc-gk-wizard__catalog-card small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-gk-wizard__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* === D48-DESIGN-REVIEW-POPUP START === */
.mc-design-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 30px);
  background: rgba(15,23,42,0.34);
  backdrop-filter: blur(14px) saturate(1.08);
}
.mc-design-review {
  width: min(1120px, 96vw);
  max-height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(201,162,77,0.22);
  border-radius: 22px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 36px 110px rgba(15,23,42,0.28);
}
.mc-design-review__head,
.mc-design-review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,23,42,0.07);
}
.mc-design-review__foot {
  border-top: 1px solid rgba(15,23,42,0.07);
  border-bottom: 0;
}
.mc-design-review__head span {
  display: block;
  color: #9b7a2c;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mc-design-review__head h3 {
  margin: 3px 0 0;
  color: #172033;
  font-size: 22px;
  font-weight: 950;
}
.mc-design-review__body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 0;
  overflow: auto;
}
.mc-design-review__gallery {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.mc-design-review__item {
  min-width: 0;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(250,249,245,0.92), rgba(255,255,255,0.98));
  padding: 12px;
}
.mc-design-review__item header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #172033;
}
.mc-design-review__item header strong { font-size: 13px; font-weight: 950; }
.mc-design-review__item header em,
.mc-design-review__item header small {
  border-radius: 999px;
  background: rgba(201,162,77,0.13);
  color: #7a5a1e;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.mc-design-review__item header button {
  margin-left: auto;
  min-height: 26px;
  border: 1px solid rgba(201,162,77,0.26);
  border-radius: 999px;
  background: #fff;
  color: #7a5a1e;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}
.mc-design-review__item header button:hover {
  border-color: rgba(201,162,77,0.52);
  box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}
.mc-design-review__faces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mc-design-review__face {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.mc-design-review__face > span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
}
.mc-design-review__face .mc-card__composite {
  width: 100%;
  min-height: 190px;
  aspect-ratio: 823 / 1058;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(201,162,77,0.10), rgba(15,23,42,0.04) 70%);
}
.mc-design-review__empty-face {
  min-height: 190px;
  aspect-ratio: 823 / 1058;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(201,162,77,0.34);
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
  color: #7a5a1e;
  text-align: center;
}
.mc-design-review__empty-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(201,162,77,0.14);
}
.mc-design-review__empty-face strong {
  color: #172033;
  font-size: 11px;
  font-weight: 950;
}
.mc-design-review__summary {
  border-left: 1px solid rgba(15,23,42,0.07);
  background: rgba(248,246,239,0.72);
  padding: 18px;
}
.mc-design-review__summary h4 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 14px;
  font-weight: 950;
}
.mc-design-review__summary dl {
  display: grid;
  gap: 9px;
  margin: 0;
}
.mc-design-review__summary dl div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.mc-design-review__summary dt {
  color: #8f6a23;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}
.mc-design-review__summary dd {
  margin: 0;
  color: #172033;
  font-size: 12px;
  font-weight: 850;
}
.mc-design-review__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.mc-design-review__swatch {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.08), 0 7px 16px rgba(15,23,42,0.12);
}
/* === D48-DESIGN-REVIEW-POPUP END === */
@media (max-width: 640px) {
  .mc-kit-composer {
    align-items: stretch;
    border-radius: 18px;
    flex-direction: column;
  }
  .mc-kit-composer__meta {
    width: 100%;
    justify-content: flex-start;
  }
  .mc-add-item-bar { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .mc-add-item-btn { flex: 0 0 auto; }
  .mc-esofman-picker__grid,
  .mc-gk-wizard__catalog { grid-template-columns: 1fr; }
  .mc-esofman-picker__grid--usage { grid-template-columns: 1fr; }
  .mc-design-review__body { grid-template-columns: 1fr; }
  .mc-design-review__gallery { grid-template-columns: 1fr; padding: 12px; }
  .mc-design-review__faces { grid-template-columns: 1fr 1fr; }
  .mc-design-review__summary { border-left: 0; border-top: 1px solid rgba(15,23,42,0.07); }
  .mc-design-review__foot { flex-direction: column; align-items: stretch; }
  .mc-inherit-strip { flex-wrap: wrap; }
  .mc-inherit-strip span { flex-basis: 100%; }
  .mc-gk-wizard__body { grid-template-columns: 1fr; }
  .mc-gk-wizard__visual { display: none; }
  .mc-d47-toast { right: 16px; bottom: 16px; }
  .mc-prem-focus-lux-3d .mc-kit-studio__piece.is-focused { transform: scale(1); }
  .mc-prem-focus-lux-3d .mc-kit-studio__piece.is-dimmed { transform: scale(0.66); filter: none; opacity: .58; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-prem-focus-lux-3d .mc-kit-studio__piece { transition-duration: 180ms; }
  .mc-prem-focus-lux-3d .mc-kit-studio__piece.is-focused { transform: scale(1); }
  .mc-prem-focus-lux-3d .mc-kit-studio__piece.is-dimmed { transform: scale(0.7); filter: none; }
}
/* === D47-A/B/C PREMIUM MULTI-ITEM END === */

/* ─── v12.14: Preview / Order Summary Mode ─── */
.mc-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  animation: mc-preview-in 0.3s ease-out;
}
@keyframes mc-preview-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
  background: linear-gradient(135deg, rgba(201,162,77,0.08) 0%, rgba(201,162,77,0.02) 100%);
  border-bottom: 1px solid rgba(201,162,77,0.15);
}
.mc-preview__head h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}
.mc-preview__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #c9a24d);
}
.mc-preview__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.mc-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(13,12,10,0.08));
  border-radius: 10px;
  background: var(--bg-2, #fff);
}
.mc-preview-item__thumb {
  width: 48px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
}
.mc-preview-item__thumb--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-preview-item__thumb--svg svg { width: 100%; height: 100%; }
.mc-preview-item__info {
  flex: 1;
  min-width: 0;
}
.mc-preview-item__info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.mc-preview-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-preview-color {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mc-preview-color svg { width: 12px; height: 12px; flex-shrink: 0; }
.mc-preview-color span { font-size: 10px; font-weight: 500; color: var(--ink-mute); }
.mc-preview-section {
  padding: 0 16px;
}
.mc-preview-section h4 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint, rgba(13,12,10,0.36));
  margin: 0 0 8px;
}
.mc-preview-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-preview-size {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2, #fff);
}
.mc-preview-size strong { color: var(--accent, #c9a24d); font-weight: 700; }
.mc-preview-players {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mc-preview-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mc-preview-player:nth-child(odd) { background: rgba(201,162,77,0.03); }
.mc-preview-player__size {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.08);
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 24px;
  text-align: center;
}
.mc-preview-more {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--ink-faint);
  font-size: 11px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease;
}
.mc-preview-more:hover { color: var(--accent, #c9a24d); }
.mc-preview-player--hidden { display: none; }
/* v12.26: Sipariş önizleme uyarıları */
.mc-preview-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}
.mc-preview-warn--dup {
  background: rgba(239, 68, 68, 0.07);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.15);
}
.mc-preview-warn--missing {
  background: rgba(245, 158, 11, 0.07);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.15);
}
.mc-preview-warn svg { flex-shrink: 0; }
.mc-preview__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid rgba(201,162,77,0.12);
  margin-top: auto;
}
.mc-btn--ghost {
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mc-btn--ghost:hover {
  border-color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.04);
}
.mc-cta--confirm {
  background: linear-gradient(135deg, var(--accent, #c9a24d) 0%, #b08c4a 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(201,162,77,0.3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mc-cta--confirm:hover {
  box-shadow: 0 6px 24px rgba(201,162,77,0.4);
  transform: translateY(-1px);
}

/* ─── v12.15: Cart en sağa yapıştır ─── */
.mc-customize {
  justify-content: space-between;
}
.mc-cart-drawer {
  margin-left: auto;        /* canvas ile sepet arasındaki boşluğu iterek en sağa yapıştırır */
}

/* ─── v12.15: Player list satır numarası + bölücü çizgi (isimsiz mod) ─── */
.mc-player-row__idx {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-faint, rgba(13,12,10,0.28));
  text-align: center;
  min-width: 18px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.mc-player-row--numbered {
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.06));
  padding-bottom: 5px;
  margin-bottom: 1px;
}
.mc-player-row--numbered:last-child {
  border-bottom: none;
  padding-bottom: 3px;
  margin-bottom: 0;
}
/* v12.24: Numbered variants artık ana grid modes'a dahil (minimal, num, short, short-num) */

/* ─── v12.18: Cart item product name ─── */
.mc-cart-item__name {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  margin-top: 1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ─── v12.18: Mixed size sections ─── */
.mc-size-section {
  margin-bottom: 8px;
}
.mc-size-section:last-child {
  margin-bottom: 0;
}
.mc-size-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  border-bottom: 1px solid rgba(201,162,77,0.10);
  margin-bottom: 6px;
}
.mc-size-section__head strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent, #c9a24d);
  font-variant-numeric: tabular-nums;
}

/* ─── v12.27: Cinsiyet bazlı beden section ─── */
.mc-gender-size-section {
  margin-bottom: 10px;
  border: 1px solid rgba(201,162,77,0.10);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(201,162,77,0.02);
}
.mc-gender-size-section:last-child { margin-bottom: 0; }
.mc-gender-size-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2, #64748b);
}
.mc-gender-size-section__title strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent, #c9a24d);
  font-variant-numeric: tabular-nums;
}
/* Cinsiyet badge (player list satırlarında — absolute, grid'i bozmaz) */
.mc-gender-badge {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  z-index: 2;
  pointer-events: none;
}
.mc-gender-badge--m { background: #3b82f6; }
.mc-gender-badge--f { background: #ec4899; }
.mc-gender-badge--c { background: #22c55e; }
/* Player list cinsiyet grubu separator */
.mc-player-group-sep {
  grid-column: 1 / -1;
  padding: 6px 0 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, rgba(13,12,10,0.45));
  border-bottom: 1px dashed rgba(201,162,77,0.15);
  margin-top: 4px;
}
/* Dark mode */
body.motta-order-page[data-theme="dark"] .mc-gender-size-section {
  border-color: rgba(201,162,77,0.12);
  background: rgba(201,162,77,0.04);
}
body.motta-order-page[data-theme="dark"] .mc-gender-size-section__title { color: var(--ink-2, #94a3b8); }
body.motta-order-page[data-theme="dark"] .mc-player-group-sep { color: rgba(255,255,255,0.35); border-color: rgba(201,162,77,0.12); }

/* ─── v12.27: Kaleci config (GK design picker) ─── */
.mc-gk-catalog-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.mc-gk-catalog-mini__card {
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 4px;
  background: rgba(201,162,77,0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.mc-gk-catalog-mini__card:hover { border-color: rgba(201,162,77,0.25); }
.mc-gk-catalog-mini__card.is-selected { border-color: var(--accent, #c9a24d); box-shadow: 0 0 0 2px rgba(201,162,77,0.15); }
.mc-gk-catalog-mini__img { width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 4px; }
.mc-gk-catalog-mini__placeholder { width: 100%; aspect-ratio: 3/4; background: rgba(0,0,0,0.04); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--ink-mute); }
.mc-gk-catalog-mini__name { display: block; font-size: 9px; margin-top: 2px; color: var(--ink-2, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-gk-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.mc-gk-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.mc-gk-color-swatch:hover { transform: scale(1.1); border-color: rgba(0,0,0,0.15); }
.mc-gk-color-swatch.is-selected { border-color: var(--accent, #c9a24d); box-shadow: 0 0 0 2px rgba(201,162,77,0.2); }
.mc-gk-selected { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-2, #64748b); }
.mc-gk-empty { display: block; margin: 8px 0; font-size: 11px; color: var(--ink-mute); font-style: italic; }
/* Preview: GK section */
/* v12.28: Preview — baskı tercihleri */
.mc-preview-section--prefs { margin-top: 8px; }
.mc-preview-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-preview-pref {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-2, #64748b);
}
/* v12.28: Preview — Logo & Sponsor */
.mc-preview-section--brand { margin-top: 8px; }
.mc-preview-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--ink-2, #64748b);
}
.mc-preview-brand__img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.02);
}
/* v12.40: Teslimat Takvimi */
.mc-preview-timeline { margin-top: 10px; }
.mc-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 10px;
}
.mc-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 52px;
}
.mc-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  display: block;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.mc-timeline__step--done .mc-timeline__dot {
  border-color: #059669;
  background: #059669;
}
.mc-timeline__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.mc-timeline__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink, #0d0c0a);
  white-space: nowrap;
}
.mc-timeline__sub {
  font-size: 9px;
  color: var(--ink-mute, rgba(13,12,10,0.45));
  white-space: nowrap;
}
.mc-timeline__bar {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 20px;
}
.mc-timeline__fill {
  height: 100%;
  background: #059669;
  border-radius: 1px;
}
[data-theme="dark"] .mc-timeline__dot { border-color: #334155; background: #1e293b; }
[data-theme="dark"] .mc-timeline__step--done .mc-timeline__dot { border-color: #059669; background: #059669; }
[data-theme="dark"] .mc-timeline__label { color: #e2e8f0; }
[data-theme="dark"] .mc-timeline__bar { background: #1e293b; }

.mc-preview-section--gk { border-left: 3px solid #22c55e; padding-left: 10px; margin-top: 10px; }
.mc-preview-gk-design { font-size: 12px; color: var(--ink-2, #64748b); margin: 4px 0; }
.mc-preview-gk-players { font-size: 12px; margin: 2px 0; }
.mc-preview-gk-extras { font-size: 11px; color: var(--ink-mute); margin: 2px 0; }
/* Dark mode GK */
body.motta-order-page[data-theme="dark"] .mc-gk-catalog-mini__card { background: rgba(255,255,255,0.03); }
body.motta-order-page[data-theme="dark"] .mc-gk-catalog-mini__card:hover { border-color: rgba(201,162,77,0.3); }
body.motta-order-page[data-theme="dark"] .mc-gk-color-swatch:hover { border-color: rgba(255,255,255,0.2); }
/* Responsive GK */
@media (max-width: 600px) {
  .mc-gk-catalog-mini { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
  .mc-gk-color-swatch { width: 24px; height: 24px; }
}

/* ─── v12.27: Draft Save / Resume ─── */
.mc-wiz-save {
  padding: 6px 14px;
  border: 1px solid rgba(201,162,77,0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--accent, #c9a24d);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.mc-wiz-save:hover { background: rgba(201,162,77,0.08); border-color: var(--accent, #c9a24d); }
.mc-wiz-save:disabled { opacity: 0.5; cursor: not-allowed; }
.mc-wiz-save--preview { margin: 0 8px; }
/* Draft resume banner */
.mc-draft-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(201,162,77,0.08) 0%, rgba(201,162,77,0.02) 100%);
  border: 1px solid rgba(201,162,77,0.18);
}
.mc-draft-banner__icon { font-size: 22px; flex-shrink: 0; }
.mc-draft-banner__text { flex: 1; }
.mc-draft-banner__text strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink-1, #1e293b); }
.mc-draft-banner__text span { font-size: 11px; color: var(--ink-2, #64748b); }
.mc-draft-banner__actions { display: flex; gap: 6px; flex-shrink: 0; }
.mc-draft-banner__btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
}
.mc-draft-banner__btn--resume { background: var(--accent, #c9a24d); color: #fff; }
.mc-draft-banner__btn--resume:hover { background: #b8922f; }
.mc-draft-banner__btn--new { background: rgba(0,0,0,0.05); color: var(--ink-2, #64748b); }
.mc-draft-banner__btn--new:hover { background: rgba(0,0,0,0.08); }
/* Draft toast */
.mc-draft-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 20px;
  border-radius: 10px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  pointer-events: none;
}
.mc-draft-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Dark mode */
body.motta-order-page[data-theme="dark"] .mc-draft-banner { background: rgba(201,162,77,0.06); border-color: rgba(201,162,77,0.15); }
body.motta-order-page[data-theme="dark"] .mc-draft-banner__text strong { color: #f1f5f9; }
body.motta-order-page[data-theme="dark"] .mc-draft-banner__btn--new { background: rgba(255,255,255,0.06); color: #94a3b8; }
body.motta-order-page[data-theme="dark"] .mc-draft-toast { background: #334155; }
/* v12.27 dark mode: premium + wishlist + ölçü bilgisi */
body.motta-order-page[data-theme="dark"] .mc-card__heart { background: rgba(255,255,255,0.1); }
body.motta-order-page[data-theme="dark"] .mc-card__heart:hover { background: rgba(255,255,255,0.2); }
body.motta-order-page[data-theme="dark"] .mc-card__surcharge { color: #d4a94d; }
body.motta-order-page[data-theme="dark"] .mc-spec-premium-notice { background: rgba(201,162,77,0.06); border-color: rgba(201,162,77,0.1); }
body.motta-order-page[data-theme="dark"] .mc-preview-section--premium { background: rgba(201,162,77,0.06); border-color: rgba(201,162,77,0.15); }
body.motta-order-page[data-theme="dark"] .mc-spec-zone__hint { color: rgba(148,163,184,0.7); }
/* v12.28 dark mode: arama çubuğu */
body.motta-order-page[data-theme="dark"] .mc-search__input { border-color: var(--line-2); color: var(--ink); }
body.motta-order-page[data-theme="dark"] .mc-search__input:focus { border-color: var(--accent); }
body.motta-order-page[data-theme="dark"] .mc-search__clear:hover { background: rgba(255,255,255,0.08); }
body.motta-order-page[data-theme="dark"] .mc-sort-select { border-color: var(--line-2); color: var(--ink-mute); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23aaa' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.motta-order-page[data-theme="dark"] .mc-sort-select option { background: var(--bg-card); color: var(--ink); }
/* Responsive */
@media (max-width: 600px) {
  .mc-draft-banner { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .mc-draft-banner__actions { width: 100%; }
  .mc-draft-banner__btn { flex: 1; text-align: center; }
  .mc-wiz-save { padding: 5px 10px; font-size: 11px; }
  /* v12.28: Arama + toolbar responsive */
  .mc-grid__toolbar { flex-wrap: wrap; }
  .mc-grid__toolbar-right { width: 100%; justify-content: space-between; }
  .mc-search__input { width: 100%; flex: 1; }
  .mc-search__input:focus { width: 100%; }
  .mc-search { flex: 1; }
}

/* ─── v12.14: Premium polish extras ─── */

/* Cart header premium gradient */
.mc-cart-drawer__head {
  background: linear-gradient(135deg, rgba(201,162,77,0.06) 0%, rgba(201,162,77,0.01) 100%);
}
.mc-cart-drawer__head h3 {
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent, #c9a24d) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section toggle hover animation */
.mc-cart-section__toggle {
  position: relative;
  overflow: hidden;
}
.mc-cart-section__toggle::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,77,0.2), transparent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.mc-cart-section__toggle:hover::after {
  transform: scaleX(1);
}

/* CTA premium gradient */
.mc-cart-drawer__foot .mc-cta:not(:disabled) {
  background: linear-gradient(135deg, var(--accent, #c9a24d) 0%, #b08c4a 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(201,162,77,0.25);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mc-cart-drawer__foot .mc-cta:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(201,162,77,0.35);
  transform: translateY(-1px);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .mc-player-list { max-height: 180px; }
  /* v12.24: Responsive grid modes — tüm modlar daraltılmış */
  .mc-player-list[data-col-mode="name"] .mc-player-list__head,
  .mc-player-list[data-col-mode="name"] .mc-player-row { grid-template-columns: 2em 1fr 22px; }
  .mc-player-list[data-col-mode="name-num"] .mc-player-list__head,
  .mc-player-list[data-col-mode="name-num"] .mc-player-row { grid-template-columns: 2em 1fr 2.5em 22px; }
  .mc-player-list[data-col-mode="name-short"] .mc-player-list__head,
  .mc-player-list[data-col-mode="name-short"] .mc-player-row { grid-template-columns: 2em 3.8em 1fr 22px; }
  .mc-player-list[data-col-mode="full"] .mc-player-list__head,
  .mc-player-list[data-col-mode="full"] .mc-player-row { grid-template-columns: 2em 3.8em 1fr 2.5em 22px; }
  .mc-player-list[data-col-mode="minimal"] .mc-player-list__head,
  .mc-player-list[data-col-mode="minimal"] .mc-player-row { grid-template-columns: 1.5em 1fr 22px; }
  .mc-player-list[data-col-mode="num"] .mc-player-list__head,
  .mc-player-list[data-col-mode="num"] .mc-player-row { grid-template-columns: 1.5em 1fr 2.5em 22px; }
  .mc-player-list[data-col-mode="short"] .mc-player-list__head,
  .mc-player-list[data-col-mode="short"] .mc-player-row { grid-template-columns: 1.5em 1fr 3.8em 22px; }
  .mc-player-list[data-col-mode="short-num"] .mc-player-list__head,
  .mc-player-list[data-col-mode="short-num"] .mc-player-row { grid-template-columns: 1.5em 1fr 3.8em 2.5em 22px; }
  .mc-player-row__gk { width: 18px; height: 18px; }
  .mc-player-row__gk svg { width: 11px; height: 11px; }
  .mc-player-add { font-size: 10px; padding: 5px 0; }
  .mc-player-row__idx { font-size: 8px; min-width: 14px; }
  .mc-player-row__size { font-size: 9px; }
  .mc-player-row__name, .mc-player-row__num { font-size: 11px; padding: 4px 5px; }
  .mc-player-row__short { font-size: 10px; }
  .mc-mini-items { flex-direction: row; padding: 0; }
  .mc-mini-item { width: 56px; }
  .mc-mini-item__img, .mc-mini-item__svg { width: 42px; height: 52px; }
  .mc-canvas__viewport.has-multi { flex-direction: column; }
  .mc-kit-studio {
    width: 100%;
    height: 100%;
    min-height: 360px;
    grid-template-columns: 1fr 0.48fr;
    grid-template-rows: 1fr 0.34fr;
    grid-template-areas:
      "forma side"
      "forma lower";
    gap: 6px;
    padding: 4px;
  }
  .mc-kit-studio__piece { border-radius: 12px; }
  .mc-kit-studio[data-kit-layout="d48"] {
    grid-template-columns: 1fr 0.72fr;
    grid-template-rows: minmax(72px, .22fr) minmax(180px, 1fr) minmax(120px, .52fr) minmax(96px, .34fr);
    grid-template-areas:
      "gk gk"
      "forma esofman"
      "corap sort"
      "pantolon pantolon";
    gap: 7px;
  }
  .mc-kit-studio[data-kit-layout="d48"][data-kit-count="4"],
  .mc-kit-studio[data-kit-layout="d48"][data-kit-count="5"],
  .mc-kit-studio[data-kit-layout="d48"][data-kit-count="6"] {
    grid-template-columns: 1fr 0.72fr;
    grid-template-rows: minmax(72px, .22fr) minmax(180px, 1fr) minmax(120px, .52fr) minmax(96px, .34fr);
    grid-template-areas:
      "gk gk"
      "forma esofman"
      "corap sort"
      "pantolon pantolon";
  }
  .mc-kit-studio__quick { grid-template-columns: 1fr 1fr; align-content: stretch; }
  .mc-kit-studio__quick button { min-height: 42px; }
  .mc-kit-studio__placeholder strong { font-size: 11px; }
  .mc-kit-studio__placeholder small { display: none; }
  .mc-kit-studio__label { bottom: 5px; min-height: 22px; padding: 4px 7px; font-size: 9px; }
  .mc-preview-item__thumb { width: 40px; height: 50px; }
  .mc-size-mode-toggle { gap: 2px; }
  .mc-size-mode-btn { padding: 4px 10px; font-size: 10px; }
  .mc-kit-picker { width: 92vw; max-width: 340px; }
  .mc-kit-picker__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mc-kit-picker__img { height: 80px; }
}

/* v12.32 (M-H6): Ultra-narrow — player rows stack vertically on small phones */
@media (max-width: 420px) {
  .mc-player-list__head { display: none; }
  .mc-player-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(201,162,77,0.08);
  }
  .mc-player-row__size { font-size: 10px; font-weight: 700; min-width: 2.5em; }
  .mc-player-row__short { font-size: 10px; flex: 0 0 4em; }
  .mc-player-row__name { flex: 1 1 50%; min-width: 0; }
  .mc-player-row__num { flex: 0 0 3em; }
  .mc-player-row__gk { flex: 0 0 20px; }
  .mc-player-row__del { position: static; opacity: 1; flex: 0 0 20px; }
  .mc-player-row__idx { display: none; }
  .mc-player-group-sep { font-size: 9px; }
}

/* ─── v12.16: Size Mode Toggle (Yetişkin / Çocuk) ─── */
.mc-size-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  background: rgba(13,12,10,0.04);
  border-radius: 8px;
}
.mc-size-mode-btn {
  flex: 1;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.mc-size-mode-btn:hover {
  color: var(--ink, #0d0c0a);
  background: rgba(201,162,77,0.06);
}
.mc-size-mode-btn.is-active {
  background: var(--bg, #fff);
  color: var(--accent, #c9a24d);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  font-weight: 700;
}

/* ─── v12.16: Kit Picker (Şort/Çorap Catalog) ─── */
.mc-kit-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mc-picker-fade-in 0.2s ease-out;
}
@keyframes mc-picker-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mc-kit-picker {
  width: 90vw;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg, #fff);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mc-picker-slide-up 0.25s ease-out;
}
@keyframes mc-picker-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-kit-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.08));
}
.mc-kit-picker__head h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}
.mc-kit-picker__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(13,12,10,0.06);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.mc-kit-picker__close:hover {
  background: rgba(220,38,38,0.1);
  color: #dc2626;
}
.mc-kit-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
}
.mc-kit-picker__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 2px solid var(--line, rgba(13,12,10,0.08));
  border-radius: 12px;
  background: var(--bg-2, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mc-kit-picker__card:hover {
  border-color: var(--accent, #c9a24d);
  box-shadow: 0 4px 16px rgba(201,162,77,0.18);
  transform: translateY(-2px);
}
.mc-kit-picker__card--silhouette {
  border-style: dashed;
  opacity: 0.7;
}
.mc-kit-picker__card--silhouette:hover {
  opacity: 1;
}
.mc-kit-picker__img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  border-radius: 6px;
}
.mc-kit-picker__placeholder {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: rgba(201,162,77,0.04);
  border-radius: 6px;
}
.mc-kit-picker__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #0d0c0a);
  text-align: center;
  line-height: 1.3;
}

/* ─── v12.19: Audience Badge (Grid Cards) ─── */
.mc-card__audience {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.10);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.6;
}

/* ─── v12.19: Label Controls (İsim Toggle + Takım Adı) ─── */
.mc-label-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.06));
}
.mc-label-controls__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute, rgba(13,12,10,0.62));
  user-select: none;
}
.mc-label-controls__toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #c9a24d);
  cursor: pointer;
  flex-shrink: 0;
}
.mc-label-controls__toggle input[type="checkbox"]:checked + span {
  color: var(--accent, #c9a24d);
}
.mc-label-controls__team-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line, rgba(13,12,10,0.08));
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #0d0c0a);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.mc-label-controls__team-input:focus {
  border-color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.03);
}
.mc-label-controls__team-input:not(:placeholder-shown) {
  border-color: rgba(201,162,77,0.25);
  background: rgba(201,162,77,0.02);
}

/* ─── v12.19: Preview Enhancements ─── */
.mc-preview-team {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  letter-spacing: 0.02em;
}
.mc-preview-size-mode {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.10);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── v12.19: Mixed Section Refinement ─── */
.mc-size-section + .mc-size-section {
  margin-top: 8px;
}

/* ─── v12.20: Preview Size Group (Yetişkin/Çocuk ayrımı) ─── */
.mc-preview-size-group {
  margin-bottom: 8px;
}
.mc-preview-size-group:last-child {
  margin-bottom: 0;
}
.mc-preview-size-group__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(201,162,77,0.08);
}
.mc-preview-size-group__label strong {
  color: var(--accent, #c9a24d);
  font-weight: 800;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* ─── v12.21: Wizard Step Indicator ─── */
.mc-wiz-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.06));
}
.mc-wiz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.mc-wiz-step:disabled { cursor: default; opacity: 0.35; }
.mc-wiz-step__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: rgba(13,12,10,0.06);
  color: var(--ink-mute, rgba(13,12,10,0.4));
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  line-height: 1;
}
.mc-wiz-step.is-active .mc-wiz-step__dot {
  background: var(--accent, #c9a24d);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(201,162,77,0.35);
}
.mc-wiz-step.is-done .mc-wiz-step__dot {
  background: rgba(201,162,77,0.15);
  color: var(--accent, #c9a24d);
}
.mc-wiz-step__label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint, rgba(13,12,10,0.3));
  transition: color 0.2s ease;
}
.mc-wiz-step.is-active .mc-wiz-step__label { color: var(--accent, #c9a24d); }
.mc-wiz-step.is-done .mc-wiz-step__label { color: var(--ink-mute, rgba(13,12,10,0.5)); }
.mc-wiz-step__line {
  flex: 1;
  height: 2px;
  background: rgba(13,12,10,0.08);
  margin: 0 2px;
  border-radius: 1px;
  align-self: flex-start;
  margin-top: 14px;
}

/* ─── v12.21: Wizard Panel ─── */
.mc-wiz-panel {
  padding: 14px 16px;
  animation: mc-wiz-fade 0.25s ease-out;
}
.mc-order-panel {
  padding: 14px 16px 14px 0;
  animation: mc-wiz-fade 0.25s ease-out;
}
.mc-order-panel--summary {
  padding-top: 10px;
}
@keyframes mc-wiz-fade {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mc-wiz-panel__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #0d0c0a);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mc-wiz-panel__hint {
  font-size: 11px;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  margin: 0 0 12px;
  line-height: 1.4;
}

/* ─── v12.21: Wizard Navigation (prev/next) ─── */
.mc-wiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* === D36-Ajan5 START === Madde 49 boşluk fix (margin/padding kompakt, tek border-top) */
  margin-top: 12px;
  padding-top: 0;
  border-top: 1px solid var(--mc-line, #e5e7eb);
  /* === D36-Ajan5 END === */
}
.mc-wiz-prev,
.mc-wiz-next {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.mc-wiz-prev {
  background: rgba(13,12,10,0.04);
  color: var(--ink-mute, rgba(13,12,10,0.5));
}
.mc-wiz-prev:hover {
  background: rgba(13,12,10,0.08);
  color: var(--ink, #0d0c0a);
}
.mc-wiz-next {
  background: var(--accent, #c9a24d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(201,162,77,0.25);
}
.mc-wiz-next:hover {
  background: #b8922f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,162,77,0.35);
}
.mc-wiz-next:active {
  transform: translateY(0);
}
.mc-wiz-next.is-disabled,
.mc-wiz-next:disabled {
  background: rgba(13,12,10,0.08);
  color: var(--ink-faint, rgba(13,12,10,0.3));
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.mc-wiz-next span,
.mc-wiz-prev span {
  font-size: 14px;
  line-height: 1;
}

/* ─── v12.21: Audience Chips (Kime sipariş?) ─── */
.mc-audience-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.mc-audience-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px 8px;
  border: 2px solid var(--line, rgba(13,12,10,0.08));
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.mc-audience-chip:hover {
  border-color: rgba(201,162,77,0.35);
  background: rgba(201,162,77,0.04);
  transform: translateY(-1px);
}
.mc-audience-chip.is-active {
  border-color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.08);
  box-shadow: 0 2px 8px rgba(201,162,77,0.15);
}
.mc-audience-chip__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink, #0d0c0a);
}
.mc-audience-chip.is-active .mc-audience-chip__label {
  color: var(--accent, #c9a24d);
}
.mc-audience-chip small {
  font-size: 8px;
  font-weight: 600;
  color: var(--ink-faint, rgba(13,12,10,0.35));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── v12.22: Wizard Sections (birleşik kadro adımı) ─── */
.mc-wiz-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,162,77,0.08);
}
.mc-wiz-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.mc-wiz-section__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-wiz-section__title small {
  font-weight: 600;
  color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.08);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.02em;
}

/* ─── v12.22: Wizard Sizes ─── */
.mc-wiz-sizes {
  margin-top: 4px;
}

/* ─── v12.22: Wizard Players (kadro adımı içinde) ─── */
.mc-wiz-players {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,77,0.2) transparent;
}
.mc-wiz-players::-webkit-scrollbar { width: 4px; }
.mc-wiz-players::-webkit-scrollbar-track { background: transparent; }
.mc-wiz-players::-webkit-scrollbar-thumb { background: rgba(201,162,77,0.25); border-radius: 2px; }

/* ─── v12.22: Responsive wizard ─── */
@media (max-width: 600px) {
  .mc-wiz-steps { padding: 10px 12px 8px; }
  .mc-wiz-step__dot { width: 24px; height: 24px; font-size: 11px; }
  .mc-wiz-step__label { font-size: 8px; }
  .mc-wiz-panel, .mc-order-panel { padding: 10px 12px; }
  .mc-wiz-panel__title { font-size: 13px; }
  .mc-audience-chips { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .mc-audience-chip { padding: 8px 4px 6px; }
  .mc-wiz-nav { margin-top: 12px; }
  .mc-wiz-prev, .mc-wiz-next { padding: 7px 12px; font-size: 11px; }
  .mc-label-controls__team-input { font-size: 11px; padding: 5px 8px; }
  .mc-label-controls__toggle { font-size: 10px; }
  .mc-wiz-players { max-height: 180px; }
  .mc-wiz-section { margin-top: 8px; padding-top: 8px; }
  .mc-wiz-section__title { font-size: 9px; }
}

/* ─── v12.23: Spec Card (Step 1 — Tasarım Detay Kartları) ─── */
/* v1295: ULTRA-PREMIUM spec-card — Material elevation + warm gradient + breathing dot + ripple */
.mc-order-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line, rgba(13,12,10,0.06));
}
.mc-order-row {
  position: relative;
  border-bottom: 1px solid var(--line, rgba(13,12,10,0.06));
  background: transparent;
  transition: border-color 180ms var(--ease-premium), background 180ms var(--ease-premium);
  cursor: pointer;
}
.mc-order-row:hover {
  background: rgba(201,162,77,0.035);
}
.mc-order-row.is-active {
  border-left: 4px solid var(--accent, #c9a24d);
  background: rgba(201,162,77,0.055);
}
.mc-order-row.is-active::after {
  content: 'DUZENLENIYOR';
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(201,162,77,0.14);
  color: var(--accent, #c9a24d);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.mc-order-row .mc-spec-card__body {
  padding-bottom: 12px;
}
.mc-spec-card {
  position: relative;
  border: 1px solid var(--line, rgba(13,12,10,0.06));
  border-radius: 10px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fff 0%, #fefcf7 100%);
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 1px 1px rgba(15,23,42,.02);
  transition:
    transform 200ms var(--ease-premium),
    box-shadow 200ms var(--ease-premium),
    border-color 200ms var(--ease-premium),
    opacity 200ms var(--ease-premium),
    background 200ms var(--ease-premium);
  overflow: hidden;
  cursor: pointer;
}
/* Aktif olmayan card subtle */
.mc-spec-card:not(.is-active) { opacity: .82; }
.mc-spec-card:not(.is-active):hover {
  opacity: 1;
  transform: translateY(-1px);
  border-color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.04);
  box-shadow:
    0 4px 12px rgba(15,23,42,.06),
    0 2px 4px rgba(15,23,42,.04);
}
/* Aktif card */
/* v1309 (C4): Aktif kit parça SPOTLIGHT — premium "şu an düzenliyorsun" sinyali */
.mc-spec-card.is-active {
  border-color: rgba(201,162,77,0.42);
  border-left: 4px solid var(--accent, #c9a24d);   /* 3 → 4: daha güçlü sinyal */
  background: linear-gradient(180deg, #fffaef 0%, #fef7e3 100%);
  box-shadow:
    0 6px 20px rgba(180,83,9,.16),
    0 3px 8px rgba(180,83,9,.10),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 4px 0 0 var(--accent, #c9a24d);          /* aktif çizgi gradient'la birleşir */
  transform: translateY(-1px);
  position: relative;
  z-index: 2;
}
/* Aktif kart üst etiket: "Şu an düzenliyorsun" */
.mc-spec-card.is-active::after {
  content: 'DÜZENLENİYOR';
  position: absolute;
  top: -7px;
  left: 12px;
  padding: 2px 8px;
  background: var(--accent, #c9a24d);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
  box-shadow: 0 2px 6px rgba(180,83,9,.30);
  z-index: 3;
  pointer-events: none;
}
/* Aktif değil kartlar daha sönük (focus daha güçlü) */
.mc-spec-card:not(.is-active) {
  opacity: .68;                                     /* .82 → .68: daha güçlü focus */
}
.mc-spec-card.is-active:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(180,83,9,.16),
    0 4px 8px rgba(180,83,9,.10),
    inset 0 1px 0 rgba(255,255,255,.6);
}
/* Aktif card sağ üst dot — BREATHING animation */
.mc-spec-card.is-active::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #c9a24d);
  box-shadow: 0 0 0 3px rgba(201,162,77,0.18);
  z-index: 2;
  animation: mcSpecCardBreathe 2.4s ease-in-out infinite;
}
/* v1295: Tap ripple (mobile feedback) */
.mc-spec-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(180,83,9,.12) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out-expo);
}
.mc-spec-card:active::after {
  opacity: 1;
  transition-duration: 0ms;
}
/* Focus-visible keyboard accessibility */
.mc-spec-card:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 2px;
}
@keyframes mcSpecCardBreathe {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(201,162,77,0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(201,162,77,0.12);
    transform: scale(1.15);
  }
}
.mc-spec-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mc-spec-card__head:hover {
  background: rgba(201,162,77,0.03);
}
.mc-spec-card__thumb {
  width: 48px;
  height: 54px;
  object-fit: contain;
  border-radius: 7px;
  flex-shrink: 0;
  background: transparent;
  transition: filter .2s;
}
/* v12.40: Colorized SVG thumbs get a subtle glow when active */
.mc-spec-card.is-active .mc-spec-card__thumb[data-colorize-src] {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
.mc-spec-card__thumb--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-spec-card__thumb--svg svg {
  width: 32px;
  height: 32px;
}
.mc-spec-card__title {
  flex: 1;
  min-width: 0;
}
.mc-spec-card__title strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink, #0d0c0a);
  letter-spacing: -0.02em;
}
.mc-spec-card__product {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute, rgba(13,12,10,0.45));
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-spec-card__arrow {
  font-size: 12px;
  color: var(--ink-faint, rgba(13,12,10,0.3));
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mc-spec-card.is-active .mc-spec-card__arrow {
  color: var(--accent, #c9a24d);
}

/* v12.27: Premium notice in spec card */
.mc-spec-premium-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(201,162,77,0.08), rgba(201,162,77,0.03));
  border-top: 1px solid rgba(201,162,77,0.12);
  font-size: 11px;
  color: #c9a24d;
  font-weight: 600;
}
.mc-spec-premium-notice small {
  font-weight: 500;
  opacity: 0.75;
  margin-left: auto;
}
.mc-spec-premium-notice--draft {
  background: linear-gradient(135deg, rgba(29,78,216,0.08), rgba(29,78,216,0.03));
  border-top-color: rgba(29,78,216,0.14);
  color: #1d4ed8;
}
/* === D49-INHERIT-CONTROLS START === */
.mc-inherit-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(201,162,77,0.12);
  background: linear-gradient(135deg, rgba(201,162,77,0.08), rgba(255,255,255,0.7));
}
.mc-inherit-strip.is-detached {
  background: linear-gradient(135deg, rgba(29,78,216,0.07), rgba(255,255,255,0.72));
  border-top-color: rgba(29,78,216,0.12);
}
.mc-inherit-strip span {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #172033;
  font-size: 11px;
  font-weight: 900;
}
.mc-inherit-strip em {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.76);
  color: #7a5a1e;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}
.mc-inherit-strip button {
  flex: 0 0 auto;
  min-height: 26px;
  border: 1px solid rgba(201,162,77,0.28);
  border-radius: 999px;
  background: #fff;
  color: #7a5a1e;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}
.mc-inherit-strip button:hover {
  border-color: rgba(201,162,77,0.5);
  box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}
/* === D49-INHERIT-CONTROLS END === */
/* v12.27: Premium preview section */
.mc-preview-section--premium {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(201,162,77,0.1), rgba(201,162,77,0.04));
  border: 1px solid rgba(201,162,77,0.2);
  border-radius: 8px;
  font-size: 12px;
  color: #c9a24d;
  margin: 8px 0;
}
/* Spec card body (açık gövde) */
.mc-spec-card__body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(201,162,77,0.06);
  animation: mc-wiz-fade 0.2s ease-out;
}

/* Spec view (ön/arka yüz başlığı) */
.mc-spec-view {
  margin-top: 8px;
}
.mc-spec-view__label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint, rgba(13,12,10,0.35));
  margin-bottom: 4px;
  display: block;
}

/* Zone satırları */
.mc-spec-zones {
  display: flex;
  flex-direction: column;
  /* === D36-Ajan5 START === Madde 48 boşluk fix (3px → 6px) */
  gap: 6px;
  /* === D36-Ajan5 END === */
}
.mc-spec-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.mc-spec-zone__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--ink-mute, rgba(13,12,10,0.4));
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-spec-zone__icon svg {
  display: block;
}
.mc-spec-zone__label {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #0d0c0a);
  white-space: nowrap;
  overflow: hidden;
}
/* v12.27: Ölçü bilgisi — zone label altında */
.mc-spec-zone__hint {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-3, #94a3b8);
  font-family: ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.02em;
  margin-top: 1px;
  text-overflow: ellipsis;
  min-width: 0;
}
.mc-spec-zone__value {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute, rgba(13,12,10,0.45));
  flex-shrink: 0;
}
.mc-spec-zone__value--set {
  color: var(--accent, #c9a24d);
}
.mc-spec-zone__value--empty {
  color: var(--ink-faint, rgba(13,12,10,0.3));
  font-style: italic;
}

/* v12.40: Renk zone satırları (geniş swatch + hex + chevron) */
.mc-spec-colors {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(13,12,10,0.04);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mc-spec-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px 5px 2px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.1s;
}
.mc-spec-color-row:hover {
  background: rgba(13,12,10,0.03);
}
.mc-spec-color-row__swatch {
  width: 26px;
  height: 17px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(13,12,10,0.10);
  overflow: hidden;
  transition: border-color .12s, transform .1s;
}
.mc-spec-color-row__swatch-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mc-spec-color-row:hover .mc-spec-color-row__swatch {
  border-color: var(--accent, #c9a24d);
  transform: scale(1.08);
}
.mc-spec-color-row__label {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #0d0c0a);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-spec-color-row__hex {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-mute, rgba(13,12,10,0.42));
  font-family: ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
}
.mc-spec-color-row__chevron {
  flex-shrink: 0;
  color: var(--ink-faint, rgba(13,12,10,0.25));
  transition: color .12s;
}
.mc-spec-color-row:hover .mc-spec-color-row__chevron {
  color: var(--accent, #c9a24d);
}
[data-theme="dark"] .mc-spec-color-row:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .mc-spec-color-row__label { color: #e2e8f0; }
[data-theme="dark"] .mc-spec-color-row__swatch { border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .mc-spec-color-row__hex { color: #64748b; }

/* v12.39: Hızlı renk temaları */
.mc-color-presets {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(13,12,10,0.04);
}
.mc-color-presets__label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.mc-color-presets__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mc-color-preset {
  display: flex;
  align-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(13,12,10,0.10);
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  transition: border-color .15s, transform .12s;
  flex-shrink: 0;
}
.mc-color-preset:hover {
  border-color: var(--accent, #c9a24d);
  transform: scale(1.15);
}
.mc-color-preset__body {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
}
.mc-color-preset__trim {
  flex: 0 0 7px;
  height: 100%;
}
.mc-color-preset__svg {
  width: 100%;
  height: 100%;
  display: block;
}
[data-theme="dark"] .mc-color-presets { border-top-color: #1e293b; }
[data-theme="dark"] .mc-color-preset  { border-color: #334155; }
[data-theme="dark"] .mc-color-preset:hover { border-color: #059669; }

/* Bayi marka bilgisi */
.mc-spec-brand {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(13,12,10,0.04);
}
.mc-spec-brand__item {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  background: rgba(201,162,77,0.06);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ─── v12.23: Gender Counter (Cinsiyet Sayaçları) ─── */
.mc-gender-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.mc-gender-row + .mc-gender-row {
  border-top: 1px solid rgba(13,12,10,0.04);
}
.mc-gender-row__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #0d0c0a);
}
.mc-counter {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mc-counter__btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--line, rgba(13,12,10,0.1));
  background: transparent;
  color: var(--ink, #0d0c0a);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}
.mc-counter__btn:hover:not(:disabled) {
  background: rgba(201,162,77,0.08);
  border-color: rgba(201,162,77,0.3);
  color: var(--accent, #c9a24d);
}
.mc-counter__btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.mc-counter__val {
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #0d0c0a);
  font-variant-numeric: tabular-nums;
}
.mc-gender-total {
  display: block;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* v1293: Kompakt yatay kadro counter grid */
.mc-kadro-counters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff, #fafaf7);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  align-items: center;
}
.mc-counter-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mc-counter-cell__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-mute, #64748b);
}
.mc-kadro-counters__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-left: 1px solid rgba(15,23,42,.10);
  min-width: 70px;
}
.mc-kadro-counters__total strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mc-kadro-counters__total small {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-mute, #64748b);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .mc-kadro-counters {
    grid-template-columns: 1fr 1fr;
  }
  .mc-kadro-counters__total {
    grid-column: span 2;
    border-left: none;
    border-top: 1px solid rgba(15,23,42,.10);
    padding-top: 8px;
    margin-top: 4px;
  }
}

/* v1293: Roster head — başlık + sağda hızlı dağıt buton */
.mc-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mc-roster-head .mc-wiz-section__title {
  margin: 0;
}
.mc-size-autodist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(178,157,103,.32);
  border-radius: 999px;
  background: rgba(178,157,103,.08);
  color: #8b6914;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.mc-size-autodist:hover {
  background: #8b6914;
  color: #fff;
  border-color: #8b6914;
}
.mc-size-autodist svg { stroke: currentColor; }

/* v1293: Önizleme bedenler empty state */
.mc-preview-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15,23,42,.03);
  border: 1px dashed rgba(15,23,42,.14);
  border-radius: 12px;
  gap: 10px;
  text-align: center;
}
.mc-preview-empty-state svg {
  color: var(--ink-mute, #64748b);
  opacity: .5;
}
.mc-preview-empty-state p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute, #64748b);
  font-style: italic;
}
.mc-preview-empty-state .mc-btn {
  margin-top: 4px;
  font-size: 12px;
  padding: 6px 14px;
}

/* v1293: Kadro adım uyarı banner'ı */
.mc-kadro-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .28);
  border-radius: 10px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}
.mc-kadro-error svg { color: #b91c1c; flex-shrink: 0; }

/* v1293: GK/Libero ve preview renk noktası — inline style yerine CSS variable (CSP uyumu) */
.mc-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--dot, #999);
  vertical-align: middle;
  border: 1px solid rgba(15,23,42,.10);
}

/* v1293: Idle quote bar — beden 0 iken nazik ipucu */
.mc-quote--idle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(15,23,42,.04);
  border: 1px dashed rgba(15,23,42,.12);
  border-radius: 10px;
  color: var(--ink-mute, #64748b);
}
.mc-quote--idle small {
  font-size: 12px;
  font-style: italic;
}
.mc-quote--idle svg { color: var(--ink-mute, #64748b); flex-shrink: 0; }

/* v1293: Beden tutarsızlık uyarısı */
.mc-size-mismatch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, .10);
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  line-height: 1.4;
}
.mc-size-mismatch svg { color: #b45309; flex-shrink: 0; }

/* ─── v12.23: Smart Questions (Akıllı Sorular) ─── */
.mc-smart-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
}
.mc-smart-q + .mc-smart-q {
  border-top: 1px solid rgba(13,12,10,0.04);
}
.mc-smart-q__text {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #0d0c0a);
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.mc-smart-q__opts {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--line, rgba(13,12,10,0.1));
}
.mc-smart-q__opt {
  padding: 5px 14px;
  border: none;
  background: transparent;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.mc-smart-q__opt + .mc-smart-q__opt {
  border-left: 1.5px solid var(--line, rgba(13,12,10,0.1));
}
.mc-smart-q__opt:hover {
  background: rgba(201,162,77,0.06);
  color: var(--ink, #0d0c0a);
}
.mc-smart-q__opt.is-active {
  background: var(--accent, #c9a24d);
  color: #fff;
}

/* ─── v12.23: Kadro Progressive Reveal ─── */
.mc-kadro-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,162,77,0.08);
}
.mc-kadro-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.mc-kadro-section.is-hidden {
  display: none;
}
.mc-kadro-section.mc-section-reveal {
  animation: mc-section-reveal 0.3s ease-out;
}
@keyframes mc-section-reveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── v12.23: Wizard Players Wrap (kadro adımı içinde) ─── */
.mc-wiz-players-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,162,77,0.06);
}

/* v12.23: Player list kolon modları yukarıda v12.24 bloğuna taşındı */

/* ─── v12.24: Kadro Accordion ─── */
.mc-kadro-section__header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.mc-kadro-section__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute, rgba(13,12,10,0.5));
}
.mc-kadro-section__summary {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  color: var(--accent, #c9a24d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.mc-kadro-section__arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--ink-mute, rgba(13,12,10,0.5));
  flex-shrink: 0;
}
.mc-kadro-section.is-collapsed .mc-kadro-section__arrow {
  transform: rotate(-90deg);
}
.mc-kadro-section.is-collapsed .mc-kadro-section__body {
  display: none;
}
.mc-kadro-section__body {
  padding-bottom: 4px;
}

/* ─── v12.23/v12.24: Responsive spec card + kadro + accordion ─── */
@media (max-width: 600px) {
  .mc-spec-card__thumb { width: 36px; height: 40px; }
  .mc-spec-card__title strong { font-size: 11px; }
  .mc-spec-zone__label { font-size: 10px; }
  .mc-spec-zone__value { font-size: 9px; }
  .mc-spec-color-row__label { font-size: 10px; }
  .mc-spec-color-row__hex { font-size: 8px; min-width: 46px; }
  .mc-counter__btn { width: 24px; height: 24px; font-size: 14px; }
  .mc-counter__val { font-size: 12px; min-width: 26px; }
  .mc-gender-row__label { font-size: 11px; }
  .mc-smart-q { flex-direction: column; align-items: stretch; gap: 4px; }
  .mc-smart-q__opts { align-self: flex-end; }
  .mc-smart-q__opt { padding: 4px 12px; font-size: 10px; }
  .mc-kadro-section { margin-top: 8px; padding-top: 8px; }
  .mc-kadro-section__header { padding: 6px 0; }
  .mc-kadro-section__summary { font-size: 8px; max-width: 50%; }
}

/* ──────────────────────────────────────────────────────
   v12.29 — Profil Tamamlama Modal
   ────────────────────────────────────────────────────── */
.mc-profile-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: mcFadeIn 0.2s ease;
}
.mc-profile-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
}
.mc-profile-modal__content {
  position: relative; z-index: 1;
  background: var(--bg-card, #1a1a2e); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 0; width: 92vw; max-width: 540px;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.5);
}
.mc-profile-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.mc-profile-modal__head h3 {
  margin: 0; font-size: 17px; font-weight: 700;
  color: var(--text-primary, #eee); letter-spacing: 0.01em;
}
.mc-profile-modal__close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none;
  color: var(--text-muted, #999); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.mc-profile-modal__close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.mc-profile-modal__hint {
  padding: 8px 24px 0; margin: 0;
  font-size: 12px; color: var(--text-muted, #888); line-height: 1.5;
}

/* Profile Form */
.mc-profile-form { padding: 16px 24px 24px; }
.mc-profile-form__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.mc-profile-form__subtitle {
  margin: 16px 0 8px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent, #c9a24d);
}
.mc-profile-field {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px;
}
.mc-profile-field span {
  font-size: 11px; font-weight: 500; color: var(--text-muted, #aaa);
  letter-spacing: 0.03em;
}
.mc-profile-field span small { color: var(--text-muted, #666); font-weight: 400; }
.mc-profile-field input[type="text"],
.mc-profile-field input[type="tel"] {
  padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; background: rgba(255,255,255,0.04);
  color: var(--text-primary, #eee); font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.mc-profile-field input:focus { border-color: var(--accent, #c9a24d); }
.mc-profile-field--checkbox {
  flex-direction: row; align-items: center; gap: 8px; margin-bottom: 10px;
}
.mc-profile-field--checkbox input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent, #c9a24d);
}
.mc-profile-consent { margin-top: 12px; }
.mc-profile-consent span { font-size: 12px; color: var(--text-primary, #ccc); }
.mc-profile-form__actions { margin-top: 16px; text-align: right; }
.mc-profile-form__error {
  margin-bottom: 8px; padding: 8px 12px; border-radius: 8px;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
  color: #ef4444; font-size: 12px;
}

/* Light mode */
@media (prefers-color-scheme: light) {
  .mc-profile-modal__content {
    background: #fff; border-color: rgba(0,0,0,0.06);
    box-shadow: 0 24px 64px -16px rgba(0,0,0,0.12);
  }
  .mc-profile-modal__head h3 { color: #111; }
  .mc-profile-modal__close { background: rgba(0,0,0,0.04); color: #666; }
  .mc-profile-modal__hint { color: #888; }
  .mc-profile-field span { color: #666; }
  .mc-profile-field input[type="text"],
  .mc-profile-field input[type="tel"] {
    background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: #111;
  }
  .mc-profile-consent span { color: #333; }
}

/* ──────────────────────────────────────────────────────
   v12.29 — Beden Tablosu Buton + Modal
   ────────────────────────────────────────────────────── */
.mc-size-chart-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; margin-top: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: var(--text-muted, #aaa);
  font-size: 11px; cursor: pointer; transition: all 0.2s ease;
}
.mc-size-chart-btn:hover {
  background: rgba(255,255,255,0.08); border-color: var(--accent, #c9a24d);
  color: var(--accent, #c9a24d);
}
.mc-size-chart-btn svg { opacity: 0.7; }
.mc-size-chart-btn:hover svg { opacity: 1; }

/* Size Chart Modal */
.mc-size-chart-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: mcFadeIn 0.2s ease;
}
.mc-size-chart-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.mc-size-chart-modal__content {
  position: relative; z-index: 1;
  background: var(--bg-card, #1a1a2e); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 0; min-width: 340px; max-width: 560px;
  width: 90vw; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 60px -15px rgba(0,0,0,0.5);
}
.mc-size-chart-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 0; border-bottom: none;
}
.mc-size-chart-modal__head h3 {
  margin: 0; font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em; color: var(--text-primary, #eee);
}
.mc-size-chart-modal__close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none;
  color: var(--text-muted, #999); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.mc-size-chart-modal__close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.mc-size-chart-modal__unit {
  padding: 8px 22px 4px; font-size: 11px; color: var(--text-muted, #888);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Size Chart Table */
.mc-size-chart-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 18px;
  font-size: 13px; color: var(--text-primary, #ddd);
}
.mc-size-chart-table thead th {
  padding: 8px 14px; text-align: center; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #999);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mc-size-chart-table thead th:first-child { text-align: left; }
.mc-size-chart-table tbody td {
  padding: 9px 14px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mc-size-chart-table tbody tr:last-child td { border-bottom: none; }
.mc-size-chart-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.mc-size-chart-table__size {
  text-align: left !important; font-weight: 700;
  color: var(--accent, #c9a24d);
}

/* v3101 SP-C: sizeChart ARIA polish — sort header buttons + caption */
.mc-size-chart-table caption {
  caption-side: top;
  text-align: left;
  padding: 4px 22px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #888);
}
.mc-size-chart-table thead th[aria-sort] {
  cursor: default;
}
.mc-size-chart-table thead th[aria-sort="ascending"]::after {
  content: " ↑";
  font-size: 10px;
  opacity: 0.7;
}
.mc-size-chart-table thead th[aria-sort="descending"]::after {
  content: " ↓";
  font-size: 10px;
  opacity: 0.7;
}

/* Dark mode adjustments (already dark-first, this is for explicit light contexts) */
@media (prefers-color-scheme: light) {
  .mc-size-chart-modal__content {
    background: #fff; border-color: rgba(0,0,0,0.08);
    box-shadow: 0 20px 60px -15px rgba(0,0,0,0.15);
  }
  .mc-size-chart-modal__head h3 { color: #111; }
  .mc-size-chart-modal__close { background: rgba(0,0,0,0.04); color: #666; }
  .mc-size-chart-modal__close:hover { background: rgba(0,0,0,0.08); color: #111; }
  .mc-size-chart-modal__unit { color: #888; }
  .mc-size-chart-table { color: #333; }
  .mc-size-chart-table thead th { color: #888; border-color: rgba(0,0,0,0.08); }
  .mc-size-chart-table tbody td { border-color: rgba(0,0,0,0.04); }
  .mc-size-chart-table tbody tr:hover { background: rgba(0,0,0,0.02); }
  .mc-size-chart-table__size { color: #8b6914; }
  .mc-size-chart-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: #666; }
  .mc-size-chart-btn:hover { background: rgba(0,0,0,0.06); }
}

/* ─── v12.29: Topbar Cart Icon ───────────────────── */

.mc-topbar-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.mc-topbar-cart:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.mc-topbar-cart__badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ─── v12.29: Sepete Kaydet Button ───────────────── */

.mc-save-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 8px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
  justify-content: center;
}
.mc-save-cart-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.mc-save-cart-btn svg {
  flex-shrink: 0;
}

/* ─── v12.29: Saved Cart Modal ───────────────────── */

.mc-saved-cart-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-saved-cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mc-saved-cart-modal__content {
  position: relative;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  border-radius: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mc-saved-cart-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.mc-saved-cart-modal__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.mc-saved-cart-modal__head h3 small {
  font-weight: 500;
  color: var(--ink-mute);
  font-size: 13px;
  margin-left: 4px;
}
.mc-saved-cart-modal__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  border: none;
  color: var(--ink-mute);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.mc-saved-cart-modal__close:hover {
  background: rgba(0,0,0,0.08);
  color: var(--ink);
}

.mc-saved-cart__list {
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mc-saved-cart__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color 200ms, box-shadow 200ms;
}
.mc-saved-cart__item:hover {
  border-color: var(--accent-faint);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mc-saved-cart__thumb {
  flex-shrink: 0;
}
.mc-saved-cart__empty {
  margin: 0;
  padding: 32px 0;
  color: var(--ink-mute);
  font-size: 13px;
  text-align: center;
}
.mc-saved-cart__thumb-img,
.mc-saved-cart__thumb-empty {
  width: 48px;
  height: 60px;
  border-radius: 6px;
  background: var(--bg);
}
.mc-saved-cart__thumb-img {
  display: block;
  object-fit: contain;
}
.mc-saved-cart__thumb-empty {
  display: grid;
  place-items: center;
  background: var(--bg-3);
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.mc-saved-cart__info {
  flex: 1;
  min-width: 0;
}
.mc-saved-cart__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-saved-cart__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-mute);
}
.mc-saved-cart__color {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
}
.mc-saved-cart__color-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mc-saved-cart__mode {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v12.34 M-O9: Kayıtlı sepet TTL — eski öğe uyarıları */
.mc-saved-cart__age { color: var(--ink-mute); }
.mc-saved-cart__age.is-stale { color: #d97706; font-weight: 500; }
.mc-saved-cart__item.is-stale {
  border-color: rgba(217,119,6,.3);
  background: linear-gradient(135deg, var(--bg) 0%, rgba(255,251,235,.6) 100%);
}
.mc-saved-cart__item.is-stale:hover { border-color: #d97706; }
@media (prefers-color-scheme: dark) {
  .mc-saved-cart__item.is-stale { background: linear-gradient(135deg, var(--bg) 0%, rgba(92,60,0,.15) 100%); }
  .mc-saved-cart__age.is-stale { color: #fbbf24; }
}

.mc-saved-cart__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mc-saved-cart__resume {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 200ms;
  white-space: nowrap;
}
.mc-saved-cart__resume:hover { filter: brightness(1.1); }
.mc-saved-cart__delete {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms, border-color 200ms;
}
.mc-saved-cart__delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Dark mode saved cart */
body.motta-order-page[data-theme="dark"] .mc-saved-cart-modal__close {
  background: rgba(255,255,255,0.06);
}
body.motta-order-page[data-theme="dark"] .mc-saved-cart-modal__close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   v12.31 FAZ 6: Mode Selection Modal + Club Colors + Mockup
   ═══════════════════════════════════════════════════════════ */

/* Mode Selection Modal */
.mc-mode-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-mode-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  animation: mc-fade-in .25s ease both;
}
@keyframes mc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mc-mode-modal__content {
  position: relative;
  z-index: 1;
  width: min(560px, 92vw);
  padding: 32px 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
  animation: mc-modal-in .3s cubic-bezier(.22,1,.36,1) both;
  text-align: left;
}
@keyframes mc-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mc-mode-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.mc-mode-modal__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.mc-mode-modal__title {
  margin: 4px 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}
.mc-mode-modal__eyebrow {
  display: inline-flex;
  margin-bottom: 2px;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mc-mode-modal__subtitle {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}
.mc-mode-modal__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}
.mc-mode-modal__signals span {
  padding: 5px 8px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}
.mc-mode-modal__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mc-mode-modal__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 154px;
  padding: 22px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.mc-mode-modal__opt:hover {
  border-color: #b29d67;
  box-shadow: 0 8px 24px rgba(178,157,103,.15);
  transform: translateY(-2px);
}
.mc-mode-modal__opt:active {
  transform: scale(.97);
}
.mc-mode-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.mc-mode-modal__opt strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.mc-mode-modal__opt span:last-child {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.mc-mode-modal__note {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* Club Color Step */
.mc-club-color-content {
  max-width: 380px;
}
.mc-club-color-desc {
  margin: -8px 0 20px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}
.mc-club-color-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.mc-club-color-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-club-color-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.mc-club-color-label > span:first-child,
.mc-club-color-row > span:first-child {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: left;
}
/* v12.32 (M-S10): Quick palette swatches */
.mc-club-quick-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 2px;
}
.mc-club-quick-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(15,23,42,.08);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  padding: 0;
  overflow: hidden;
}
.mc-club-quick-swatch__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mc-club-quick-swatch:hover { border-color: var(--gold, #c9a24d); transform: scale(1.15); }
.mc-club-quick-swatch.is-active { border-color: var(--gold, #c9a24d); box-shadow: 0 0 0 2px rgba(201,162,77,.35); }
.mc-club-color-swatch {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid rgba(15,23,42,.1);
  flex-shrink: 0;
  transition: border-color .15s;
  overflow: hidden;
}
.mc-club-color-swatch__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mc-club-color-row:hover .mc-club-color-swatch {
  border-color: #b29d67;
}
.mc-club-color-input {
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  position: absolute;
}
.mc-club-color-continue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #b29d67, #c4ad6e);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(178,157,103,.28);
}
.mc-club-color-continue:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(178,157,103,.38);
}
.mc-club-color-continue:active {
  transform: scale(.97);
}

.mc-kit-recommend {
  position: fixed;
  left: 20px;
  bottom: 22px;
  z-index: 8900;
  width: min(360px, calc(100vw - 40px));
  padding: 18px;
  border: 1px solid rgba(178,157,103,.35);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 46px rgba(15,23,42,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #0f172a;
}
.mc-kit-recommend__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
}
.mc-kit-recommend__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mc-kit-recommend strong {
  display: block;
  padding-right: 24px;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.3;
}
.mc-kit-recommend p {
  margin: 8px 0 14px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
.mc-kit-recommend__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-kit-recommend__primary,
.mc-kit-recommend__ghost {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mc-kit-recommend__primary {
  border: 1px solid #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}
.mc-kit-recommend__ghost {
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #334155;
}
@media (max-width: 640px) {
  .mc-kit-recommend {
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: auto;
  }
}

/* Preview — Club color swatches */
.mc-preview-club-colors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mc-preview-club-swatch {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-preview-club-swatch svg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(15,23,42,.08);
}
.mc-preview-club-swatch span {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* Preview — Placement zone chips */
.mc-preview-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-preview-zone-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f0f4f8;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

/* Mockup Quality — larger, no white bg, gradient backdrop */
.mc-canvas {
  background: linear-gradient(160deg, #1a1f2e 0%, #0f1420 100%) !important;
  border-radius: 16px;
}
.mc-canvas__img,
.mc-canvas img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

/* Card thumbnails — contain not cover */
.mc-card__thumb img {
  object-fit: contain;
  aspect-ratio: 3 / 4;
  background: transparent;
}

/* Dark mode adjustments */
body.motta-order-page[data-theme="dark"] .mc-mode-modal__content {
  background: #1e293b;
  color: #e2e8f0;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__title {
  color: #f1f5f9;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__opt {
  border-color: #334155;
  background: #0f172a;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__opt:hover {
  border-color: #b29d67;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__opt strong {
  color: #f1f5f9;
}
body.motta-order-page[data-theme="dark"] .mc-club-color-desc {
  color: #94a3b8;
}
body.motta-order-page[data-theme="dark"] .mc-club-color-row > span:first-child,
body.motta-order-page[data-theme="dark"] .mc-club-color-label > span:first-child {
  color: #cbd5e1;
}
body.motta-order-page[data-theme="dark"] .mc-club-quick-swatch { border-color: rgba(255,255,255,.1); }
body.motta-order-page[data-theme="dark"] .mc-club-quick-swatch:hover { border-color: var(--gold, #c9a24d); }
/* v12.31 (S8): Dark mode gaps */
body.motta-order-page[data-theme="dark"] .mc-mode-modal__close {
  background: #334155;
  color: #94a3b8;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__close:hover {
  background: #475569;
  color: #f1f5f9;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__opt span:last-child {
  color: #94a3b8;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__backdrop {
  background: rgba(0,0,0,.65);
}
body.motta-order-page[data-theme="dark"] .mc-club-color-swatch {
  border-color: rgba(255,255,255,.12);
}
body.motta-order-page[data-theme="dark"] .mc-club-color-continue {
  background: linear-gradient(135deg, #a08c5a, #b29d67);
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__subtitle,
body.motta-order-page[data-theme="dark"] .mc-mode-modal__note {
  color: #94a3b8;
}
body.motta-order-page[data-theme="dark"] .mc-mode-modal__signals span {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #cbd5e1;
}
body.motta-order-page[data-theme="dark"] .mc-kit-recommend {
  background: rgba(15,23,42,.96);
  border-color: rgba(201,162,77,.42);
  color: #e5edf7;
}
body.motta-order-page[data-theme="dark"] .mc-kit-recommend strong {
  color: #fff;
}
body.motta-order-page[data-theme="dark"] .mc-kit-recommend p {
  color: #94a3b8;
}
body.motta-order-page[data-theme="dark"] .mc-kit-recommend__ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e5edf7;
}

/* ── H10: Mobile responsive — mode modal & club color ── */
@media (max-width: 480px) {
  .mc-mode-modal__content {
    width: calc(100vw - 24px) !important;
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }
  .mc-mode-modal__options {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .mc-mode-modal__opt {
    padding: 18px 14px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .mc-mode-modal__icon {
    font-size: 24px !important;
    margin-right: 12px !important;
  }
  .mc-mode-modal__title {
    font-size: 17px !important;
    margin-bottom: 16px !important;
  }
  .mc-club-color-content {
    max-width: 100% !important;
  }
  .mc-club-color-continue {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── S6: prefers-reduced-motion for customizer ── */
@media (prefers-reduced-motion: reduce) {
  .mc-mode-modal__backdrop {
    animation: none !important;
  }
  .mc-mode-modal__content {
    animation: none !important;
  }
  .mc-mode-modal__opt,
  .mc-mode-modal__opt:hover {
    transition: none !important;
    transform: none !important;
  }
  .mc-club-color-swatch {
    transition: none !important;
  }
  .mc-club-color-continue {
    transition: none !important;
  }
}

/* ── v12.35 Faz 1b: Çerez Consent Banner ──────────────────────────────── */
.mc-cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(480px, calc(100vw - 32px));
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.20);
  animation: mc-banner-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mc-cookie-banner.is-hiding {
  animation: mc-banner-out 0.28s ease both;
  pointer-events: none;
}
@keyframes mc-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
@keyframes mc-banner-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0);    }
  to   { opacity: 0; transform: translateX(-50%) translateY(14px); }
}
.mc-cookie-banner__inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-cookie-banner__inner p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.5;
}
.mc-cookie-banner__inner p a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mc-cookie-banner__inner p a:hover {
  color: #93c5fd;
}
.mc-cookie-banner__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.mc-cookie-banner__btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s, color 0.15s;
}
.mc-cookie-banner__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.mc-cookie-banner__btn--primary {
  background: #1e6fd9;
  border-color: #1e6fd9;
  color: #fff;
}
.mc-cookie-banner__btn--primary:hover {
  background: #1a5fb8;
  border-color: #1a5fb8;
}
@media (max-width: 400px) {
  .mc-cookie-banner__actions {
    flex-direction: column;
  }
  .mc-cookie-banner__btn {
    width: 100%;
    text-align: center;
  }
}
/* ── /v12.35 Faz 1b ──────────────────────────────────────────────────────── */

/* ── v12.35 Faz 2: Müşteri Onay Beyanı ─────────────────────────────────── */
.mc-approval-declaration {
  margin: 20px 0 16px;
  padding: 18px 20px;
  border: 1.5px solid #e3e7ef;
  border-radius: 12px;
  background: #fafbfe;
}
[data-theme="dark"] .mc-approval-declaration {
  background: rgba(30, 41, 59, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
}
.mc-approval-declaration__title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: .01em;
  text-transform: uppercase;
}
[data-theme="dark"] .mc-approval-declaration__title { color: #f1f5f9; }
.mc-approval-declaration__notice {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.55;
}
[data-theme="dark"] .mc-approval-declaration__notice { color: #94a3b8; }
.mc-approval-declaration__notice strong {
  color: #c84b00;
  font-weight: 600;
}
[data-theme="dark"] .mc-approval-declaration__notice strong { color: #fb923c; }
.mc-approval-declaration__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.12s;
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}
[data-theme="dark"] .mc-approval-declaration__item { color: #cbd5e1; }
.mc-approval-declaration__item:hover {
  background: rgba(30, 111, 217, 0.06);
}
[data-theme="dark"] .mc-approval-declaration__item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.mc-approval-declaration__item.is-checked {
  background: rgba(5, 150, 105, 0.06);
  color: #1e293b;
}
[data-theme="dark"] .mc-approval-declaration__item.is-checked {
  background: rgba(5, 150, 105, 0.12);
  color: #e2e8f0;
}
.mc-approval-declaration__item input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #059669;
  cursor: pointer;
}
.mc-approval-declaration__item span {
  flex: 1;
}
.mc-approval-declaration__item a {
  color: #1e6fd9;
  text-underline-offset: 2px;
}
[data-theme="dark"] .mc-approval-declaration__item a { color: #60a5fa; }
.mc-approval-declaration__ready {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 5px;
}
[data-theme="dark"] .mc-approval-declaration__ready { color: #34d399; }
/* ── /v12.35 Faz 2 ───────────────────────────────────────────────────────── */

/* ── v12.36: Auth Gate — Google + Magic Link ───────────────────────────── */
@keyframes mc-ag-enter {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mc-ag-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(0.97); }
}
.mc-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s;
}
.mc-auth-gate.is-open {
  visibility: visible;
  opacity: 1;
}
.mc-auth-gate.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.mc-ag__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,15,24,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mc-ag__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(94dvh, 94vh, 720px);
  animation: mc-ag-enter 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
[data-theme="dark"] .mc-ag__card { background: #1a1f2e; }
.mc-auth-gate.is-hiding .mc-ag__card { animation: mc-ag-leave 0.28s cubic-bezier(0.22,1,0.36,1) both; }

/* Header */
.mc-ag__header {
  background: linear-gradient(135deg, #0f1724 0%, #1e3a5f 60%, #1e6fd9 100%);
  padding: 28px 28px 24px;
  text-align: center;
  color: #fff;
  flex: 0 0 auto;
}
.mc-ag__logo {
  height: 36px;
  max-width: 140px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: brightness(0) invert(1);
}
.mc-ag__logo-text {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 10px;
}
.mc-ag__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.mc-ag__sub {
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.5;
}

/* Body */
.mc-ag__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-bottom: 28px;
}

/* Google button */
.mc-ag__google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: #fff;
  border: 1.5px solid #dadce0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #3c4043;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.mc-ag__google-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transform: translateY(-1px);
  border-color: #bcc0c4;
}
.mc-ag__google-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
[data-theme="dark"] .mc-ag__google-btn { background: #252d3d; border-color: #3a4255; color: #e2e8f0; }
.mc-ag__gicon { width: 20px; height: 20px; flex-shrink: 0; }

/* Divider */
.mc-ag__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 12px;
}
.mc-ag__divider::before,
.mc-ag__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
[data-theme="dark"] .mc-ag__divider::before,
[data-theme="dark"] .mc-ag__divider::after { background: #2a3347; }

/* Switch to email */
.mc-ag__switch-email {
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 16px;
  width: 100%;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mc-ag__switch-email:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e3a5f; }
[data-theme="dark"] .mc-ag__switch-email { border-color: #2a3347; color: #94a3b8; }
[data-theme="dark"] .mc-ag__switch-email:hover { background: #1e2538; color: #e2e8f0; }

/* Email form */
.mc-ag__email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-ag__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #172033;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.mc-ag__input:focus {
  outline: none;
  border-color: #1e6fd9;
  box-shadow: 0 0 0 3px rgba(30,111,217,0.12);
}
[data-theme="dark"] .mc-ag__input { background: #1e2538; border-color: #2a3347; color: #e2e8f0; }
[data-theme="dark"] .mc-ag__input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.15); }
.mc-ag__send-btn {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #1e3a5f 0%, #1e6fd9 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mc-ag__send-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.mc-ag__send-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.mc-ag__error {
  font-size: 13px;
  color: #dc2626;
  margin: 0;
  padding: 8px 10px;
  background: #fef2f2;
  border-radius: 6px;
  border: 1px solid #fecaca;
}
[data-theme="dark"] .mc-ag__error { background: #2d1515; border-color: #7f1d1d; color: #fca5a5; }

/* Back link */
.mc-ag__back-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s;
}
.mc-ag__back-link:hover { color: #1e6fd9; }

/* Sent state */
.mc-ag__sent {
  padding: 28px 28px 32px;
  text-align: center;
  color: #172033;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 0;
}
[data-theme="dark"] .mc-ag__sent { color: #e2e8f0; }
.mc-ag__envelope {
  width: 64px;
  height: 48px;
  color: #1e6fd9;
}
.mc-ag__sent h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.mc-ag__sent p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}
[data-theme="dark"] .mc-ag__sent p { color: #94a3b8; }
.mc-ag__back-btn {
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 4px;
}
.mc-ag__back-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="dark"] .mc-ag__back-btn { border-color: #2a3347; color: #94a3b8; }

/* Spinner */
.mc-ag__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mc-ag-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mc-ag-spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 480px) {
  .mc-ag__card { border-radius: 16px; }
  .mc-ag__header { padding: 22px 20px 18px; }
  .mc-ag__body { padding: 18px 20px 22px; }
  .mc-ag__sent { padding: 20px 20px 24px; }
}

/* ── v12.55: 3-tab auth gate — Tab bar ─────────────────────────────────── */
.mc-ag__card { max-width: 440px; }

.mc-ag__tabs {
  display: flex;
  background: #f0f4f9;
  padding: 4px;
  gap: 2px;
  border-bottom: 1px solid #e2e8f0;
  flex: 0 0 auto;
}
[data-theme="dark"] .mc-ag__tabs { background: #101620; border-color: #1e2538; }

.mc-ag__tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.mc-ag__tab.is-active {
  background: #fff;
  color: #172033;
  font-weight: 650;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0.5px 1.5px rgba(0,0,0,0.07);
}
[data-theme="dark"] .mc-ag__tab { color: #475569; }
[data-theme="dark"] .mc-ag__tab.is-active { background: #1e2538; color: #e2e8f0; box-shadow: 0 1px 5px rgba(0,0,0,0.35); }

/* ── Form layout ────────────────────────────────────────────────────────── */
.mc-ag__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 8px;
}

.mc-ag__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 16px 0 5px;
}
.mc-ag__form > .mc-ag__label:first-child,
.mc-ag__row2 .mc-ag__label { margin-top: 0; }
[data-theme="dark"] .mc-ag__label { color: #475569; }

.mc-ag__hint {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
[data-theme="dark"] .mc-ag__hint { color: #3d4d65; }

/* ── Submit button ───────────────────────────────────────────────────────── */
.mc-ag__submit {
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1a3560 0%, #1e6fd9 100%);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(30,111,217,0.30);
}
.mc-ag__submit:hover:not(:disabled) {
  opacity: 0.93;
  transform: translateY(-1px);
  box-shadow: 0 7px 22px rgba(30,111,217,0.38);
}
.mc-ag__submit:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(30,111,217,0.22); }
.mc-ag__submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── 2-column row (ad + soyad) ───────────────────────────────────────────── */
.mc-ag__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

/* ── KVKK checkbox ────────────────────────────────────────────────────────── */
.mc-ag__kvkk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
}
.mc-ag__kvkk input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: #1e6fd9;
  cursor: pointer;
}
.mc-ag__kvkk span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
[data-theme="dark"] .mc-ag__kvkk span { color: #3d4d65; }

/* ── Success message ─────────────────────────────────────────────────────── */
.mc-ag__message {
  font-size: 13px;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  padding: 10px 13px;
  line-height: 1.4;
  margin-bottom: 6px;
}
[data-theme="dark"] .mc-ag__message { background: #052e16; border-color: #14532d; color: #4ade80; }

/* ── Body gap tweak for form layout ─────────────────────────────────────── */
.mc-ag__body { gap: 6px; }
.mc-ag__body .mc-ag__form + .mc-ag__divider { margin-top: 10px; }

/* ── Input refinement ─────────────────────────────────────────────────────── */
.mc-ag__input {
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .mc-ag__tab { font-size: 11.5px; padding: 8px 2px; }
  .mc-ag__row2 { grid-template-columns: 1fr; gap: 0; }
}

/* ── v12.39: Varyant Seçici (thumbnail chip) ────────────────────────────── */

.mc-variant-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.mc-variant-picker__label {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.mc-variant-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 5px 5px 6px;
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  background: #fff;
  color: #475569;
  transition: border-color .15s, background .15s, color .15s;
  width: 72px;
  white-space: nowrap;
}

.mc-variant-chip:hover {
  border-color: #059669;
  color: #059669;
}

.mc-variant-chip--active {
  border-color: #065f46;
  background: #f0fdf4;
  color: #065f46;
}

.mc-variant-chip__thumb {
  width: 60px;
  height: 66px;
  object-fit: contain;
  border-radius: 5px;
  background: #f8fafc;
  display: block;
}

.mc-variant-chip__thumb--empty {
  background: #f1f5f9;
}

.mc-variant-chip__name {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

[data-theme="dark"] .mc-variant-picker { border-bottom-color: #1e293b; }

[data-theme="dark"] .mc-variant-chip {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

[data-theme="dark"] .mc-variant-chip:hover {
  border-color: #059669;
  color: #34d399;
}

[data-theme="dark"] .mc-variant-chip--active {
  background: #064e3b;
  border-color: #059669;
  color: #34d399;
}

[data-theme="dark"] .mc-variant-chip__thumb { background: #0f172a; }

/* Katalog kartı üzerindeki varyant rozeti */
.mc-card__variant-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(6, 95, 70, .88);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
  letter-spacing: .02em;
  transition: opacity .2s;
}
/* v1283: Variant hover strip kaldırıldı (boş alan kaplıyordu, badge yeterli) */
.mc-card__variant-strip,
.mc-card__variant-strip-thumb { display: none !important; }

/* v1283 → v2300: Ana Renklerim — kompakt yatay pill (Apple-style) */
.mc-gc {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 6px 14px;
  background: var(--bg-2, rgba(255,255,255,.6));
  border: 1px solid var(--line, rgba(15,23,42,.08));
  border-radius: 999px;
  font-size: 12px;
  height: 40px;
  box-sizing: border-box;
  transition: border-color 200ms var(--ease, ease), background 200ms var(--ease, ease);
}
.mc-gc.is-active {
  border-color: rgba(217, 119, 6, .35);
  background: linear-gradient(135deg, rgba(252, 248, 235, .92), rgba(254, 243, 199, .55));
}
.mc-gc__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: .2px;
  white-space: nowrap;
}
.mc-gc__cells {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.mc-gc__cell {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.mc-gc__cell-input {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.08);
  appearance: none;
  -webkit-appearance: none;
  background: none;
  transition: transform 160ms var(--ease, ease);
}
.mc-gc__cell-input:hover { transform: scale(1.08); }
.mc-gc__cell-input::-webkit-color-swatch-wrapper { padding: 0; border: none; border-radius: 50%; }
.mc-gc__cell-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.mc-gc__cell-input::-moz-color-swatch { border: none; border-radius: 50%; }
.mc-gc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-mute, #6b7280);
  cursor: pointer;
  user-select: none;
}
.mc-gc.is-active .mc-gc__toggle {
  color: var(--ink, #0f172a);
  font-weight: 600;
}
.mc-gc__toggle input[type="checkbox"] {
  accent-color: #b45309;
  cursor: pointer;
  width: 13px;
  height: 13px;
  margin: 0;
}
.mc-gc__toggle input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .4;
}
@media (max-width: 720px) {
  .mc-gc { gap: 10px; padding: 5px 12px; height: 38px; }
  .mc-gc__toggle { margin-left: 0; }
}

/* v1283: Premium 3 kolon özet kartları — sipariş önizleme adımı */
.mc-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin: 4px 0 22px;
}
.mc-sum-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
  transition: border-color .15s, box-shadow .15s;
}
.mc-sum-card:hover {
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.mc-sum-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mc-sum-card__head h4 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.mc-sum-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.mc-sum-card__badge.is-done {
  background: rgba(5, 150, 105, .10);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, .25);
}
.mc-sum-card__badge.is-pending {
  background: rgba(217, 119, 6, .08);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, .22);
}
.mc-sum-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-sum-empty {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}
.mc-sum-stat {
  margin: 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}
.mc-sum-stat strong {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-right: 4px;
}
.mc-sum-stat--muted {
  font-size: 12px;
  color: #64748b;
}
.mc-sum-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-sum-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.18);
  display: inline-block;
  background: var(--swatch, #999);  /* v1293: inline style yerine CSS variable */
}
/* v1293: Overflow rozeti (+N renk) */
.mc-sum-swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.12);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-mute, #64748b);
  line-height: 1;
}
@media (max-width: 760px) {
  .mc-summary-grid { grid-template-columns: 1fr; gap: 10px; }
  .mc-sum-card { padding: 14px 16px; gap: 10px; }
}

/* v1287: Kompakt tek satır brief — vitrin üst bölgesi (eski aside büyük yer kaplıyordu) */
.mc-grid__brief.is-compact {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
}
.mc-grid__brief.is-compact .mc-brief__logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.mc-grid__brief.is-compact .mc-brief__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.mc-grid__brief.is-compact .mc-eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b45309;
  font-weight: 700;
  line-height: 1.2;
}
.mc-grid__brief.is-compact .mc-title {
  font-size: 15px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.25;
  color: #0f172a;
}
.mc-grid__brief.is-compact .mc-sub {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-grid__brief.is-compact .mc-brief__stat-inline {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  padding: 5px 12px;
  background: rgba(15,23,42,.04);
  border-radius: 999px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .mc-grid__brief.is-compact {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }
  .mc-grid__brief.is-compact .mc-brief__stat-inline { margin-left: 0; }
  .mc-grid__brief.is-compact .mc-sub { white-space: normal; }
}

@media (max-width: 600px) {
  .mc-variant-picker {
    gap: 6px;
    padding: 10px 0 8px;
  }
  .mc-variant-chip { width: 64px; }
  .mc-variant-chip__thumb { width: 52px; height: 58px; }
  .mc-variant-chip__name { font-size: 9px; }
}
/* ── /v12.39 ─────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   v12.48 — Ultra Premium UI: Customizer Modal Animasyonları + Focus
   ══════════════════════════════════════════════════════════════════════════ */

/* ── B1: Modal entrance/exit keyframes ── */
@keyframes mc-modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mc-modal-slide-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Apply animations — override previous static display rules */
.mc-mode-modal__backdrop {
  animation: mc-modal-backdrop-in 220ms ease both;
}
.mc-mode-modal__content {
  animation: mc-modal-slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mc-saved-cart-modal {
  animation: mc-modal-backdrop-in 200ms ease both;
}
.mc-saved-cart-modal__content {
  animation: mc-modal-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── B1: Step panel entrance ── */
.mc-step-panel {
  animation: mc-modal-slide-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── B1: Focus ring upgrade ── */
:focus-visible {
  outline: 2.5px solid rgba(17, 109, 255, .80);
  outline-offset: 2px;
  border-radius: 4px;
}
.mc-card:focus-visible {
  outline: 2.5px solid rgba(17, 109, 255, .80);
  box-shadow: 0 0 0 5px rgba(17, 109, 255, .12), 0 20px 40px -12px rgba(0, 0, 0, .15);
}

/* ── v12.55: Auth gate — close btn, forgot link, scroll ────────────────── */

/* Keep header/tabs fixed; only the form body scrolls when the register form is tall. */
.mc-ag__card {
  max-height: min(94dvh, 94vh, 720px);
  overflow: hidden;
  overflow-x: hidden;
}

/* Close button — top-right, on top of gradient header */
.mc-ag__close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.14);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
  flex-shrink: 0;
}
.mc-ag__close-btn:hover { background: rgba(255,255,255,0.26); transform: scale(1.08); }
.mc-ag__close-btn:active { transform: scale(0.96); }

/* Row for "Şifremi unuttum?" link */
.mc-ag__row-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
.mc-ag__forgot-link {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: color 0.12s;
  line-height: 1;
}
.mc-ag__forgot-link:hover { color: #1e6fd9; text-decoration: underline; }
[data-theme="dark"] .mc-ag__forgot-link { color: #475569; }
[data-theme="dark"] .mc-ag__forgot-link:hover { color: #60a5fa; }

/* Scrollbar refinement inside the scrollable auth body */
.mc-ag__body::-webkit-scrollbar { width: 5px; }
.mc-ag__body::-webkit-scrollbar-track { background: transparent; }
.mc-ag__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 99px; }
[data-theme="dark"] .mc-ag__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* ── /v12.48 Customizer ─────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   mc-preview-premium v2000 faz1 — Magazine-level Ultra Premium Önizleme
   Tüm sınıflar `.mc-preview-premium__...` namespace'i altında.
   Yalnız `--swatch` ve `--stagger` CSS variable'ları inline geçer.
   ══════════════════════════════════════════════════════════════════════════ */

.mc-preview-premium {
  --mcpp-ink: #0a1628;
  --mcpp-ink-mute: #475569;
  --mcpp-ink-faint: #94a3b8;
  --mcpp-bg: #f8fafc;
  --mcpp-bg-card: #ffffff;
  --mcpp-line: #e2e8f0;
  --mcpp-line-strong: #cbd5e1;
  --mcpp-gold: #c9a24d;
  --mcpp-gold-deep: #b45309;
  --mcpp-gold-soft: rgba(201, 162, 77, 0.12);
  --mcpp-amber-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  --mcpp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --mcpp-shadow-hover: 0 12px 24px rgba(15, 23, 42, 0.08);
  --mcpp-shadow-elev: 0 16px 40px rgba(15, 23, 42, 0.10);
  --mcpp-shadow-hero: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --mcpp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mcpp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mcpp-serif: Georgia, 'Times New Roman', serif;
  --mcpp-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px 32px 20px;
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--mcpp-sans);
  color: var(--mcpp-ink);
  animation: mcpp-fade-in 400ms var(--mcpp-ease) both;
}

@keyframes mcpp-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] .mc-preview-premium {
  --mcpp-ink: #f5f3ef;
  --mcpp-ink-mute: #cbd5e1;
  --mcpp-ink-faint: #64748b;
  --mcpp-bg: #131318;
  --mcpp-bg-card: #1a1a20;
  --mcpp-line: rgba(255, 255, 255, 0.08);
  --mcpp-line-strong: rgba(255, 255, 255, 0.16);
  --mcpp-gold: #d6b475;
  --mcpp-gold-deep: #caa05a;
  --mcpp-gold-soft: rgba(214, 180, 117, 0.14);
  --mcpp-amber-bg: linear-gradient(135deg, rgba(202, 160, 90, 0.18) 0%, rgba(180, 83, 9, 0.22) 100%);
  --mcpp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --mcpp-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.4);
  --mcpp-shadow-elev: 0 16px 40px rgba(0, 0, 0, 0.5);
  --mcpp-shadow-hero: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* ── Header ────────────────────────────────────────────────────────────── */
.mc-preview-premium__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mc-preview-premium__header-title h2 {
  margin: 0;
  font-family: var(--mcpp-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--mcpp-ink);
}
.mc-preview-premium__header-title p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mcpp-ink-faint);
}
.mc-preview-premium__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mcpp-ink-mute);
  background: transparent;
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms var(--mcpp-ease);
}
.mc-preview-premium__back:hover {
  border-color: var(--mcpp-gold);
  color: var(--mcpp-gold-deep);
  background: var(--mcpp-gold-soft);
}

/* ── 1. Hero Mockup Canvas ─────────────────────────────────────────────── */
.mc-preview-premium__hero {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #fafaf5 0%, #f4f1ea 100%);
  box-shadow: var(--mcpp-shadow-hero);
  transition: transform 400ms var(--mcpp-ease);
}
[data-theme="dark"] .mc-preview-premium__hero {
  background: radial-gradient(circle at 30% 20%, #1f1f26 0%, #15151a 100%);
}
.mc-preview-premium__hero:hover {
  transform: scale(1.02) rotate(0.5deg);
}
.mc-preview-premium__hero-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.mc-preview-premium__hero-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.15));
  animation: mcpp-hero-in 600ms var(--mcpp-spring) both;
}
@keyframes mcpp-hero-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mc-preview-premium__hero-placeholder {
  color: var(--mcpp-ink-faint);
  opacity: 0.4;
}

.mc-preview-premium__capture-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--mcpp-line);
  border-bottom: 1px solid var(--mcpp-line);
}

.mc-preview-premium__capture-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mc-preview-premium__capture-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--mcpp-ink);
}

.mc-preview-premium__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mcpp-ink-mute);
}

.mc-preview-premium__capture-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  background: var(--mcpp-bg);
}

.mc-preview-premium__capture-actions .mc-view-toggle__btn {
  min-width: 56px;
  min-height: 34px;
}

.mc-preview-premium__capture-stage {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* === D36-Ajan5 START === Tooltip anchor (absolute child) */
  position: relative;
  /* === D36-Ajan5 END === */
  background: linear-gradient(180deg, rgba(248,250,252,0.72), rgba(255,255,255,0.94));
  border: 1px solid var(--mcpp-line);
  border-radius: 10px;
  overflow: hidden;
}

/* === D36-Ajan4 START === Mockup gerçek aspect-ratio 823/1058 + contain (kırpma yok) */
.mc-preview-premium__capture-stage .mc-card__composite {
  width: min(360px, 68vw);
  max-height: 420px;
  aspect-ratio: 823 / 1058;
}

.mc-preview-premium__capture-stage .mc-card__composite img,
.mc-preview-premium__capture-stage .mc-card__composite svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* === D36-Ajan4 END === */

.mc-preview-premium__capture-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mc-preview-premium__capture-zones span,
.mc-preview-premium__capture-note {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  color: var(--mcpp-ink-mute);
  background: var(--mcpp-bg);
  font-size: 12px;
  font-weight: 700;
}

/* ── 2. KPI Row ─────────────────────────────────────────────────────────── */
.mc-preview-premium__kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* === D36-Ajan5 START === Madde 46 boşluk fix (1px → 8px) */
  gap: 8px;
  /* === D36-Ajan5 END === */
  background: var(--mcpp-line);
  border: 1px solid var(--mcpp-line);
  border-radius: 12px;
  overflow: hidden;
}
.mc-preview-premium__kpi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--mcpp-bg-card);
  text-align: center;
}
.mc-preview-premium__kpi-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mcpp-ink-faint);
  font-weight: 600;
}
.mc-preview-premium__kpi-value {
  font-family: var(--mcpp-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--mcpp-ink);
  letter-spacing: -0.02em;
}
.mc-preview-premium__kpi-value--sm {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Team Meta ──────────────────────────────────────────────────────────── */
.mc-preview-premium__team {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  align-self: center;
}
.mc-preview-premium__team-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcpp-ink-faint);
  font-weight: 600;
}
.mc-preview-premium__team-name {
  font-family: var(--mcpp-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--mcpp-ink);
}
.mc-preview-premium__team-mode {
  font-size: 12px;
  color: var(--mcpp-ink-mute);
  padding-left: 12px;
  border-left: 1px solid var(--mcpp-line-strong);
}

/* ── Section ────────────────────────────────────────────────────────────── */
.mc-preview-premium__section {
  display: flex;
  flex-direction: column;
  /* === D36-Ajan5 START === Madde 50 boşluk fix (gap 16→8, margin compact) */
  gap: 8px;
  margin: 16px 0 8px;
  /* === D36-Ajan5 END === */
}
.mc-preview-premium__section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--mcpp-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--mcpp-ink);
  letter-spacing: -0.01em;
}
.mc-preview-premium__section-meta {
  font-family: var(--mcpp-sans);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mcpp-ink-faint);
  font-weight: 600;
}

/* ── 3. Item Breakdown Grid ─────────────────────────────────────────────── */
.mc-preview-premium__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.mc-preview-premium__breakdown-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 12px;
  box-shadow: var(--mcpp-shadow-card);
  transition: transform 240ms var(--mcpp-ease), box-shadow 240ms var(--mcpp-ease), border-color 240ms var(--mcpp-ease);
  animation: mcpp-card-in 500ms var(--mcpp-ease) both;
  animation-delay: var(--stagger, 0ms);
}
@keyframes mcpp-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-preview-premium__breakdown-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mcpp-shadow-hover);
  border-color: var(--mcpp-gold);
}
.mc-preview-premium__breakdown-row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  background: transparent;
  border-bottom: 1px solid var(--mcpp-line);
  border-radius: 0;
  box-shadow: none;
  animation: mcpp-card-in 500ms var(--mcpp-ease) both;
  animation-delay: var(--stagger, 0ms);
}
.mc-preview-premium__breakdown-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--mcpp-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-preview-premium__breakdown-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mc-preview-premium__breakdown-thumb-svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-preview-premium__breakdown-thumb-svg svg {
  width: 100%;
  height: 100%;
}
.mc-preview-premium__breakdown-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mc-preview-premium__breakdown-name {
  margin: 0;
  font-family: var(--mcpp-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--mcpp-ink);
}
.mc-preview-premium__breakdown-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mc-preview-premium__breakdown-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--swatch, #ccc);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.mc-preview-premium__breakdown-swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  height: 18px;
  border-radius: 999px;
  background: var(--mcpp-bg);
  color: var(--mcpp-ink-mute);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--mcpp-line);
}
.mc-preview-premium__breakdown-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mc-preview-premium__breakdown-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mcpp-ink-mute);
  background: var(--mcpp-bg);
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  letter-spacing: 0.2px;
}

/* ── 4. Roster Compact ──────────────────────────────────────────────────── */
.mc-preview-premium__roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-preview-premium__roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--mcpp-ink);
  transition: border-color 200ms var(--mcpp-ease), box-shadow 200ms var(--mcpp-ease);
  animation: mcpp-chip-in 400ms var(--mcpp-spring) both;
  animation-delay: var(--stagger, 0ms);
}
@keyframes mcpp-chip-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mc-preview-premium__roster-chip:hover {
  border-color: var(--mcpp-gold);
  box-shadow: 0 2px 6px rgba(201, 162, 77, 0.18);
}
.mc-preview-premium__roster-chip.is-hidden {
  display: none;
}
.mc-preview-premium__roster-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-family: var(--mcpp-serif);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--mcpp-gold) 0%, var(--mcpp-gold-deep) 100%);
  border-radius: 999px;
  letter-spacing: -0.5px;
}
.mc-preview-premium__roster-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.mc-preview-premium__roster-name--muted {
  color: var(--mcpp-ink-faint);
  font-style: italic;
}
.mc-preview-premium__roster-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: var(--mcpp-ink-mute);
  background: var(--mcpp-bg);
  border-radius: 4px;
  border: 1px solid var(--mcpp-line);
}
.mc-preview-premium__roster-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--mcpp-gold-deep);
  background: var(--mcpp-gold-soft);
  border-radius: 4px;
}
.mc-preview-premium__roster-expand {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mcpp-gold-deep);
  background: transparent;
  border: 1px dashed var(--mcpp-gold);
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms var(--mcpp-ease);
}
.mc-preview-premium__roster-expand:hover {
  background: var(--mcpp-gold-soft);
  border-style: solid;
}
.mc-preview-premium__roster-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}
[data-theme="dark"] .mc-preview-premium__roster-warn {
  color: #fdba74;
  background: rgba(180, 83, 9, 0.12);
  border-color: rgba(253, 186, 116, 0.3);
}

/* Size chips (oyuncu yok, beden var) */
.mc-preview-premium__size-group {
  margin-bottom: 12px;
}
.mc-preview-premium__size-group-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcpp-ink-faint);
  font-weight: 600;
  margin-bottom: 8px;
}
.mc-preview-premium__size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-preview-premium__size-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--mcpp-ink);
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 8px;
}
.mc-preview-premium__size-chip b {
  font-weight: 600;
  color: var(--mcpp-ink-mute);
}
.mc-preview-premium__size-chip em {
  font-style: normal;
  font-family: var(--mcpp-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--mcpp-ink);
}

/* Empty state */
.mc-preview-premium__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background: var(--mcpp-bg-card);
  border: 1px dashed var(--mcpp-line-strong);
  border-radius: 12px;
  text-align: center;
  color: var(--mcpp-ink-faint);
}
.mc-preview-premium__empty p {
  margin: 0;
  font-size: 14px;
}
.mc-preview-premium__empty-btn {
  padding: 8px 16px;
  font-size: 13px;
}

/* Role brief (GK/Libero) */
.mc-preview-premium__section--roles {
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 12px;
  padding: 20px;
}
.mc-preview-premium__roles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-preview-premium__role-brief {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--mcpp-bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--mcpp-ink);
}
.mc-preview-premium__role-brief-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcpp-ink-faint);
  font-weight: 600;
  min-width: 64px;
}

/* ── 5. Bayi Marka İletişim Banner (warm gold gradient) ─────────────────── */
.mc-preview-premium__dealer-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--mcpp-amber-bg);
  border: 1px solid #fbbf24;
  border-radius: 12px;
  box-shadow: var(--mcpp-shadow-card);
}
[data-theme="dark"] .mc-preview-premium__dealer-banner {
  border-color: rgba(214, 180, 117, 0.4);
}
.mc-preview-premium__dealer-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mcpp-gold) 0%, var(--mcpp-gold-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(180, 83, 9, 0.25);
}
.mc-preview-premium__dealer-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-preview-premium__dealer-avatar-initials {
  font-family: var(--mcpp-serif);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.mc-preview-premium__dealer-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mc-preview-premium__dealer-title {
  font-family: var(--mcpp-serif);
  font-size: 15px;
  font-weight: 500;
  color: #78350f;
}
[data-theme="dark"] .mc-preview-premium__dealer-title {
  color: #fde68a;
}
.mc-preview-premium__dealer-title em {
  font-style: italic;
  font-weight: 600;
}
.mc-preview-premium__dealer-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #92400e;
}
[data-theme="dark"] .mc-preview-premium__dealer-contacts {
  color: #fcd34d;
}
.mc-preview-premium__dealer-contact {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: opacity 160ms;
}
.mc-preview-premium__dealer-contact:hover { opacity: 0.7; }
.mc-preview-premium__dealer-note {
  font-size: 12px;
  color: #92400e;
}
[data-theme="dark"] .mc-preview-premium__dealer-note {
  color: #fcd34d;
}

/* ── 6. Price Breakdown Expandable ──────────────────────────────────────── */
.mc-preview-premium__price {
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 12px;
  overflow: hidden;
}
.mc-preview-premium__price-details {
  cursor: default;
}
.mc-preview-premium__price-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  list-style: none;
  transition: background 160ms var(--mcpp-ease);
}
.mc-preview-premium__price-summary::-webkit-details-marker { display: none; }
.mc-preview-premium__price-summary:hover { background: var(--mcpp-bg); }
.mc-preview-premium__price-summary-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-preview-premium__price-summary-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mcpp-ink-faint);
  font-weight: 600;
}
.mc-preview-premium__price-summary-meta {
  font-size: 12px;
  color: var(--mcpp-ink-mute);
}
.mc-preview-premium__total {
  font-family: var(--mcpp-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--mcpp-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.mc-preview-premium__price-chevron {
  color: var(--mcpp-ink-faint);
  transition: transform 220ms var(--mcpp-ease);
}
.mc-preview-premium__price-details[open] .mc-preview-premium__price-chevron {
  transform: rotate(180deg);
}
.mc-preview-premium__price-detail {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--mcpp-line);
  padding-top: 16px;
  animation: mcpp-price-expand 280ms var(--mcpp-ease);
}
@keyframes mcpp-price-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-preview-premium__price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--mcpp-ink-mute);
}
.mc-preview-premium__price-line.is-negative {
  color: #059669;
}
[data-theme="dark"] .mc-preview-premium__price-line.is-negative {
  color: #34d399;
}
.mc-preview-premium__price-line-label { flex: 1; }
.mc-preview-premium__price-line-amount {
  font-family: var(--mcpp-serif);
  font-weight: 500;
  color: var(--mcpp-ink);
}
.mc-preview-premium__price--loading,
.mc-preview-premium__price--error {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--mcpp-ink-mute);
}
.mc-preview-premium__price--error { color: #b91c1c; }
[data-theme="dark"] .mc-preview-premium__price--error { color: #fca5a5; }

/* Premium custom design notice */
.mc-preview-premium__premium-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--mcpp-gold-soft);
  border: 1px solid var(--mcpp-gold);
  border-radius: 999px;
  font-size: 12px;
  color: var(--mcpp-gold-deep);
  align-self: flex-start;
}
.mc-preview-premium__premium-notice strong {
  font-weight: 600;
  font-family: var(--mcpp-serif);
}

.mc-preview-premium__order-status,
.mc-preview-premium__order-details {
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 12px;
  padding: 18px 20px;
}

.mc-preview-premium__order-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.mc-preview-premium__order-status--success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.32);
  color: #047857;
}

.mc-preview-premium__order-status strong {
  font-family: var(--mcpp-serif);
  font-size: 16px;
  font-weight: 600;
}

.mc-preview-premium__order-status a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mc-preview-premium__order-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mc-preview-premium__order-details-head h3 {
  margin: 0;
  font-family: var(--mcpp-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--mcpp-ink);
}

.mc-preview-premium__order-details-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mcpp-ink-mute);
}

.mc-preview-premium__order-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1fr);
  gap: 12px;
}

.mc-preview-premium__order-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-preview-premium__order-field--wide {
  grid-column: span 1;
}

.mc-preview-premium__order-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mcpp-ink-mute);
}

.mc-preview-premium__order-field input,
.mc-preview-premium__order-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--mcpp-line);
  border-radius: 10px;
  background: var(--mcpp-bg);
  color: var(--mcpp-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 12px;
}

.mc-preview-premium__order-field textarea {
  resize: vertical;
}

.mc-preview-premium__order-field input:focus,
.mc-preview-premium__order-field textarea:focus {
  outline: none;
  border-color: var(--mcpp-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.14);
}

/* Quote slot (legacy refresh hook) — display only when not empty */
.mc-preview-premium__quote-slot:empty,
.mc-preview-premium__quote-slot > div:empty {
  display: none;
}
.mc-preview-premium__quote-slot > .mc-quote {
  margin: 0;
}

/* ── 7. Approval Checklist ──────────────────────────────────────────────── */
.mc-preview-premium__approval {
  padding: 24px;
  background: var(--mcpp-bg-card);
  border: 1px solid var(--mcpp-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-preview-premium__approval-title {
  margin: 0;
  font-family: var(--mcpp-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--mcpp-ink);
}
.mc-preview-premium__approval-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mc-preview-premium__quick-action,
.mc-consent-gate__quick {
  appearance: none;
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--mcpp-ink);
  min-height: 34px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.mc-preview-premium__quick-action:hover,
.mc-consent-gate__quick:hover {
  border-color: var(--mcpp-gold);
  color: var(--mcpp-gold-deep);
}
.mc-preview-premium__approval-notice {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--mcpp-ink-mute);
  line-height: 1.5;
}
.mc-preview-premium__approval-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mcpp-bg);
  border: 1px solid var(--mcpp-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 200ms var(--mcpp-ease), background 200ms var(--mcpp-ease);
  animation: mcpp-approval-in 360ms var(--mcpp-ease) both;
  animation-delay: var(--stagger, 0ms);
}
@keyframes mcpp-approval-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mc-preview-premium__approval-row:hover {
  border-color: var(--mcpp-gold);
}
.mc-preview-premium__approval-row.is-checked {
  background: var(--mcpp-gold-soft);
  border-color: var(--mcpp-gold);
}
.mc-preview-premium__approval-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mc-preview-premium__approval-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--mcpp-line-strong);
  border-radius: 5px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 200ms var(--mcpp-spring);
}
[data-theme="dark"] .mc-preview-premium__approval-box {
  background: var(--mcpp-bg);
}
.mc-preview-premium__approval-row.is-checked .mc-preview-premium__approval-box {
  background: linear-gradient(135deg, var(--mcpp-gold) 0%, var(--mcpp-gold-deep) 100%);
  border-color: var(--mcpp-gold-deep);
  color: #fff;
  transform: scale(1.04);
}
.mc-preview-premium__approval-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mcpp-ink);
}
.mc-preview-premium__approval-text a {
  color: var(--mcpp-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mc-preview-premium__approval-text a:hover { color: var(--mcpp-gold); }
.mc-preview-premium__approval-ready {
  margin: 4px 0 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  text-align: center;
  animation: mcpp-ready-pulse 480ms var(--mcpp-spring);
}
@keyframes mcpp-ready-pulse {
  0%   { transform: scale(0.96); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── 8. CTA Hint (yönlendirme ipucu — gerçek CTA Agent B'nin sticky bar'ı) ── */
.mc-preview-premium__cta-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--mcpp-bg-card);
  border: 1px dashed var(--mcpp-line-strong);
  border-radius: 12px;
  font-size: 13px;
  color: var(--mcpp-ink-mute);
  animation: mcpp-fade-in 320ms var(--mcpp-ease) both;
}
.mc-preview-premium__cta-hint svg {
  flex-shrink: 0;
  color: var(--mcpp-ink-faint);
}
.mc-preview-premium__cta-hint strong {
  color: var(--mcpp-ink);
  font-weight: 600;
}
.mc-preview-premium__cta-hint--ready {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  border-style: solid;
  color: #047857;
}
[data-theme="dark"] .mc-preview-premium__cta-hint--ready {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
}
.mc-preview-premium__cta-hint--ready svg {
  color: #059669;
}
.mc-preview-premium__cta-hint--ready strong {
  color: inherit;
}

/* Removed sticky CTA bar — Agent B's renderPreviewStickyBar() handles step-level CTA */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mc-preview-premium {
    padding: 16px 16px 24px;
    gap: 20px;
  }
  .mc-preview-premium__header-title h2 { font-size: 22px; }
  .mc-preview-premium__hero { aspect-ratio: 1 / 1; }
  .mc-preview-premium__kpi {
    grid-template-columns: 1fr;
  }
  .mc-preview-premium__kpi-cell {
    padding: 16px;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .mc-preview-premium__kpi-value { font-size: 22px; }
  .mc-preview-premium__kpi-value--sm { font-size: 14px; }
  .mc-preview-premium__breakdown {
    grid-template-columns: 1fr;
  }
  .mc-preview-premium__order-fields {
    grid-template-columns: 1fr;
  }
  .mc-preview-premium__total { font-size: 24px; }
  .mc-preview-premium__header {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .mc-preview-premium__breakdown {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .mc-preview-premium__breakdown {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mc-preview-premium,
  .mc-preview-premium *,
  .mc-preview-premium *::before,
  .mc-preview-premium *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .mc-preview-premium__hero:hover { transform: none; }
  .mc-preview-premium__breakdown-card:hover { transform: none; }
  .mc-preview-premium__cta-button:hover:not(:disabled) { transform: none; }
}
/* ── /mc-preview-premium v2000 faz1 ─────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
 * v2000 Faz 2 — Agent #6: Storefront mağaza header + tab sistemi + hazır ürünler
 * ─ Bayi-branded premium header (gradient, logo, iletişim, rozet)
 * ─ Tasarla / Hazır Ürünler tab sistemi (ARIA tablist)
 * ─ Hazır ürün kartı (no zone markers, no customize)
 * ─ Hazır ürün sepet modal'ı ve cart drawer merge bölümü
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── Mağaza Header (bayi-branded) ───────────────────────────────────────── */

.mc-store-header {
  position: relative;
  margin: 0 0 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-card);
  animation: mc-store-header-in 0.55s var(--ease-out-expo) both;
}

@keyframes mc-store-header-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mc-store-header__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 0% 0%, color-mix(in srgb, var(--store-c1, var(--accent)) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, color-mix(in srgb, var(--store-c2, var(--accent-bright)) 18%, transparent), transparent 65%);
  opacity: 0.95;
}

body.motta-order-page[data-theme="dark"] .mc-store-header__bg {
  background:
    radial-gradient(ellipse 90% 60% at 0% 0%, color-mix(in srgb, var(--store-c1, var(--accent)) 28%, transparent), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, color-mix(in srgb, var(--store-c2, var(--accent-bright)) 22%, transparent), transparent 65%);
}

.mc-store-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.mc-store-header__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}

.mc-store-header__logo-wrap {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.mc-store-header__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.mc-store-header__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}

.mc-store-header__copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}

.mc-store-header__name {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.mc-store-header__desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.45;
  max-width: 64ch;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mc-store-header__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mc-store-header__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  background: var(--bg-3);
  border: 1px solid var(--line);
}

.mc-store-header__chip--premium {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-faint);
}

.mc-store-header__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.mc-store-header__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}

.mc-store-header__contact-link:hover {
  color: var(--accent);
  border-color: var(--accent-faint);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .mc-store-header {
    padding: 16px 16px;
    border-radius: 14px;
  }
  .mc-store-header__logo-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .mc-store-header__name {
    font-size: 18px;
  }
  .mc-store-header__contact {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ── Storefront Tab Sistemi ─────────────────────────────────────────────── */

.mc-store-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
}

.mc-store-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
  font-family: inherit;
}

.mc-store-tab:hover {
  color: var(--ink);
  background: var(--bg-3);
}

.mc-store-tab.is-active {
  color: var(--ink);
  background: var(--bg);
  border-color: var(--line);
  font-weight: 600;
  box-shadow: 0 1px 0 var(--accent-faint) inset, var(--shadow-soft);
}

.mc-store-tab.is-active .mc-store-tab__label {
  font-family: Georgia, 'Times New Roman', serif;
}

.mc-store-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mc-store-tab__label {
  font-size: 13px;
  letter-spacing: 0.01em;
}

.mc-store-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-3);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.mc-store-tab.is-active .mc-store-tab__count {
  background: var(--accent-soft);
  color: var(--accent);
}

.mc-store-tabs__spacer {
  flex: 1 1 auto;
}

.mc-store-tabs__cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  box-shadow: 0 2px 6px rgba(var(--accent-rgb, 154, 122, 62), 0.25);
}

.mc-store-tabs__cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb, 154, 122, 62), 0.35);
}

.mc-store-tabs__cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .mc-store-tabs {
    padding: 4px;
    overflow-x: auto;
  }
  .mc-store-tab {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

.mc-store-panel {
  display: block;
  animation: mc-panel-in 0.35s var(--ease-out-expo) both;
}

@keyframes mc-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hazır Ürün Kartı (Generic Product Card) ────────────────────────────── */

.mc-prod-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.mc-prod-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mc-prod-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.mc-prod-grid[data-cols="7"] { grid-template-columns: repeat(7, 1fr); gap: 10px; }

@media (max-width: 900px) {
  .mc-prod-grid,
  .mc-prod-grid[data-cols="5"],
  .mc-prod-grid[data-cols="7"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .mc-prod-grid,
  .mc-prod-grid[data-cols="3"],
  .mc-prod-grid[data-cols="5"],
  .mc-prod-grid[data-cols="7"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.mc-prod-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
  animation: mc-card-in 0.35s ease both;
}

.mc-prod-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--accent-faint);
}

.mc-prod-card.is-out-of-stock {
  opacity: 0.7;
}

.mc-prod-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-3);
  overflow: hidden;
}

.mc-prod-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--ease);
}

.mc-prod-card:hover .mc-prod-card__img {
  transform: scale(1.05);
}

.mc-prod-card__img-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}

.mc-prod-card__chips {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mc-prod-card__stock {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  letter-spacing: 0.01em;
}

.mc-prod-card__stock--low {
  color: #b8412d;
  background: #fff4f0;
  border-color: rgba(184, 65, 45, 0.18);
}

body.motta-order-page[data-theme="dark"] .mc-prod-card__stock--low {
  color: #ff8b6e;
  background: rgba(199, 85, 61, 0.16);
  border-color: rgba(255, 139, 110, 0.2);
}

.mc-prod-card__stock--out {
  color: var(--ink-mute);
  background: var(--bg-3);
  text-decoration: line-through;
}

.mc-prod-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
}

.mc-prod-card__cat-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.mc-prod-card__category {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-mute);
  background: var(--bg-3);
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mc-prod-card__name {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mc-prod-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.mc-prod-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mc-prod-card__compare {
  font-size: 12px;
  color: var(--ink-faint);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.mc-prod-card__variant {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.mc-prod-card__variant-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mc-prod-card__variant-select {
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.mc-prod-card__variant-select:hover {
  border-color: var(--accent-faint);
}

.mc-prod-card__variant-select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
}

.mc-prod-card__variant-select.is-required {
  border-color: #b8412d;
  animation: mc-shake 0.4s var(--ease);
}

@keyframes mc-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.mc-prod-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease);
  box-shadow: 0 2px 6px rgba(var(--accent-rgb, 154, 122, 62), 0.25);
}

.mc-prod-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb, 154, 122, 62), 0.35);
}

.mc-prod-card__cta:active {
  transform: translateY(0);
}

.mc-prod-card__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mc-prod-card__cta.is-disabled,
.mc-prod-card__cta:disabled {
  background: var(--bg-3);
  color: var(--ink-faint);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

/* ── Boş & Yüklenme Durumları ───────────────────────────────────────────── */

.mc-prod-loading,
.mc-prod-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 280px;
  padding: 40px 24px;
  color: var(--ink-mute);
  text-align: center;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: 14px;
}

.mc-prod-loading {
  font-size: 13px;
  color: var(--ink-faint);
}

.mc-prod-empty svg {
  color: var(--ink-faint);
  opacity: 0.5;
}

.mc-prod-empty h3 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

.mc-prod-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  max-width: 42ch;
  line-height: 1.5;
}

.mc-prod-empty__cta {
  display: inline;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.mc-prod-empty__cta:hover { color: var(--accent-bright); }

/* ── Generic Cart Modal ─────────────────────────────────────────────────── */

.mc-generic-cart-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mc-fade 0.2s var(--ease) both;
}

.mc-generic-cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 10, 0.5);
  backdrop-filter: blur(3px);
}

.mc-generic-cart-modal__content {
  position: relative;
  width: min(94vw, 480px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  animation: mc-gc-modal-in 0.32s var(--ease-spring) both;
}

@keyframes mc-gc-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mc-generic-cart-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.mc-generic-cart-modal__head h3 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.mc-generic-cart-modal__head small {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-left: 4px;
}

.mc-generic-cart-modal__close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.mc-generic-cart-modal__close:hover {
  background: var(--bg-3);
  color: var(--ink);
}

.mc-generic-cart-modal__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mc-generic-cart-modal__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mc-generic-cart-modal__thumb,
.mc-generic-cart-modal__thumb-empty {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--bg-3);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  flex: 0 0 auto;
}

.mc-generic-cart-modal__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-generic-cart-modal__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-generic-cart-modal__variant {
  font-size: 11px;
  color: var(--ink-mute);
}

.mc-generic-cart-modal__line-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.mc-generic-cart-modal__qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mc-generic-cart-modal__qty-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mc-generic-cart-modal__qty-label input {
  width: 50px;
  padding: 5px 7px;
  font-size: 13px;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.mc-generic-cart-modal__remove {
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.mc-generic-cart-modal__remove:hover {
  background: rgba(184, 65, 45, 0.1);
  color: var(--danger);
}

.mc-generic-cart-modal__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}

.mc-generic-cart-modal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.mc-generic-cart-modal__total span {
  font-size: 12px;
  color: var(--ink-mute);
}

.mc-generic-cart-modal__total strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mc-generic-cart-modal__actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  background: var(--bg-2);
}

.mc-generic-cart-modal__continue,
.mc-generic-cart-modal__checkout {
  flex: 1 1 0;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  border: 1px solid var(--line);
}

.mc-generic-cart-modal__continue {
  background: transparent;
  color: var(--ink);
}

.mc-generic-cart-modal__continue:hover {
  background: var(--bg-3);
}

.mc-generic-cart-modal__checkout {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--accent-rgb, 154, 122, 62), 0.25);
}

.mc-generic-cart-modal__checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb, 154, 122, 62), 0.35);
}

/* ── Merged Cart Section (Step 4 — Önizleme'de kit altında hazır ürün listesi) */

.mc-merged-cart {
  margin: 18px 0 0;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.mc-merged-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mc-merged-cart__title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.mc-merged-cart__count {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  padding: 3px 8px;
  background: var(--bg-3);
  border-radius: 999px;
}

.mc-merged-cart__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mc-merged-cart__row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.mc-merged-cart__thumb,
.mc-merged-cart__thumb-empty {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--bg-3);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}

.mc-merged-cart__info {
  min-width: 0;
}

.mc-merged-cart__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-merged-cart__variant {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.mc-merged-cart__qty {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  background: var(--bg-3);
  border-radius: 999px;
}

.mc-merged-cart__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mc-merged-cart__remove {
  background: transparent;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.mc-merged-cart__remove:hover {
  background: rgba(184, 65, 45, 0.1);
  color: var(--danger);
}

.mc-merged-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.mc-merged-cart__total span {
  font-size: 12px;
  color: var(--ink-mute);
}

.mc-merged-cart__total strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mc-order-workbench .mc-cart-toggle {
  display: none;
}

.mc-order-workbench .mc-merged-cart {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 0 0;
}

.mc-order-workbench .mc-merged-cart__row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
}

.mc-merged-cart__harmony {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mc-merged-cart__harmony.is-ok {
  color: #047857;
}
.mc-merged-cart__harmony.is-warn {
  color: #b45309;
}
.mc-merged-cart__harmony.is-unknown {
  color: var(--ink-mute);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mc-store-header,
  .mc-store-panel,
  .mc-prod-card,
  .mc-generic-cart-modal,
  .mc-generic-cart-modal__content {
    animation: none !important;
  }
  .mc-prod-card:hover,
  .mc-prod-card__cta:hover,
  .mc-store-tabs__cart:hover,
  .mc-generic-cart-modal__checkout:hover {
    transform: none !important;
  }
  .mc-prod-card:hover .mc-prod-card__img {
    transform: none !important;
  }
}
/* ── /v2000 Faz 2 Agent #6 ──────────────────────────────────────────────── */

/* ── v2400 (Agent #3): Font popover (numara/isim font seçici) ─────────── */
.mc-pop-font-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 150ms, border-color 150ms;
}
.mc-pop-font-trigger:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(201, 162, 77, 0.4);
}
.mc-pop-font-trigger:focus-visible {
  outline: 2px solid #c9a24d;
  outline-offset: 2px;
}
.mc-pop-font-trigger__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
}
.mc-pop-font-trigger__value {
  flex: 1;
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}
.mc-pop-font-trigger__chevron {
  font-size: 18px;
  color: #9ca3af;
  font-weight: 600;
  line-height: 1;
}

.mc-font-popover {
  position: fixed;
  z-index: 1100;
  width: 280px;
  max-height: 320px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: inherit;
}
.mc-font-popover__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(15, 23, 42, 0.02);
}
.mc-font-popover__head h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
}
.mc-font-popover__close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: #6b7280;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.mc-font-popover__close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
.mc-font-popover__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
}
.mc-font-popover__group {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 8px 8px 4px;
  margin: 0;
  font-weight: 600;
}
.mc-font-popover__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
  text-align: left;
  font: inherit;
  margin-bottom: 2px;
}
.mc-font-popover__item:hover {
  background: rgba(15, 23, 42, 0.04);
}
.mc-font-popover__item.is-active {
  background: rgba(201, 162, 77, 0.12);
}
.mc-font-popover__item:focus-visible {
  outline: 2px solid #c9a24d;
  outline-offset: 1px;
}
.mc-font-popover__preview {
  font-size: 20px;
  width: 44px;
  text-align: center;
  margin-right: 12px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1;
}
.mc-font-popover__name {
  flex: 1;
  font-size: 13px;
  color: #1f2937;
  font-weight: 500;
}
.mc-font-popover__check {
  color: #c9a24d;
  font-weight: 700;
  font-size: 16px;
  margin-left: 8px;
}
.mc-font-popover__foot {
  padding: 10px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(15, 23, 42, 0.02);
}
.mc-font-popover__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
}
.mc-font-popover__toggle input[type="checkbox"] {
  accent-color: #c9a24d;
}
.mc-font-popover__empty {
  padding: 24px 16px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}
/* ── /v2400 (Agent #3) ──────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   v2500 — Storefront Auth Gate POLISH (Sprint A · Agent #1)
   - Google one-tap önceliklendirme (.mc-auth-top + .mc-auth-google-primary + .mc-auth-divider)
   - KVKK inline legal modal (.mc-legal-modal)
   - Dark theme variable'ları
   - Mobile responsive (iOS keyboard friendly: 44px input / 16px font)
   - Apple-style title (.mc-ag__title)
   ───────────────────────────────────────────────────────────────────────── */

/* Theme tokens — auth gate scoped */
.mc-auth-gate {
  --mc-auth-bg-input: #fff;
  --mc-auth-border-input: rgba(15, 23, 42, 0.10);
  --mc-auth-border-input-focus: #1e6fd9;
  --mc-auth-text-input: #0f172a;
  --mc-auth-text-muted: #64748b;
  --mc-auth-bg-modal: #fff;
  --mc-auth-bg-divider: #e2e8f0;
  --mc-auth-link: #1e6fd9;
  --mc-auth-link-hover: #1e3a5f;
  --mc-auth-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .mc-auth-gate {
  --mc-auth-bg-input: #1a1f2e;
  --mc-auth-border-input: rgba(255, 255, 255, 0.10);
  --mc-auth-border-input-focus: #60a5fa;
  --mc-auth-text-input: #f1f5f9;
  --mc-auth-text-muted: rgba(241, 245, 249, 0.65);
  --mc-auth-bg-modal: #0f1419;
  --mc-auth-bg-divider: #2a3347;
  --mc-auth-link: #60a5fa;
  --mc-auth-link-hover: #93c5fd;
  --mc-auth-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.30);
}

/* v2500: Google one-tap önceliklendirme — modal'ın üstünde, header altında */
.mc-auth-top {
  padding: 18px 28px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
}
.mc-auth-google-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  background: #fff;
  color: #0f172a;
  border: 1.5px solid #dadce0;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s, border-color 0.18s, background 0.18s;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 0.5px 1.5px rgba(15, 23, 42, 0.05);
}
.mc-auth-google-primary:hover:not(:disabled) {
  border-color: #c4c8cf;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.mc-auth-google-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.mc-auth-google-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
[data-theme="dark"] .mc-auth-google-primary {
  background: #1a1f2e;
  border-color: rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}
[data-theme="dark"] .mc-auth-google-primary:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.22);
  background: #232938;
}
.mc-auth-google-primary__icon,
.mc-auth-google-primary .mc-ag__gicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mc-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mc-auth-text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.mc-auth-divider::before,
.mc-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mc-auth-bg-divider);
}

/* v2500: KVKK checkbox — yeni inline legal modal link'leri */
.mc-auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  cursor: pointer;
  user-select: none;
}
.mc-auth-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--mc-auth-link);
  cursor: pointer;
}
.mc-auth-checkbox__text {
  font-size: 12.5px;
  color: var(--mc-auth-text-muted);
  line-height: 1.55;
}
.mc-auth-legal-link {
  color: var(--mc-auth-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.mc-auth-legal-link:hover,
.mc-auth-legal-link:focus-visible {
  color: var(--mc-auth-link-hover);
  text-decoration-thickness: 1.5px;
}

/* v2500: Dark-theme'i auth input'larına bağla (theme variable üzerinden) */
.mc-auth-gate .mc-ag__input {
  background: var(--mc-auth-bg-input);
  border: 1.5px solid var(--mc-auth-border-input);
  color: var(--mc-auth-text-input);
}
.mc-auth-gate .mc-ag__input:focus {
  border-color: var(--mc-auth-border-input-focus);
  box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.15);
}
[data-theme="dark"] .mc-auth-gate .mc-ag__input:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

/* v2500: Apple-style modal title */
.mc-auth-gate .mc-ag__title {
  margin: 8px 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: #fff;
}

/* v2500: Mobile responsive — iOS-keyboard friendly */
@media (max-width: 600px) {
  .mc-auth-gate {
    padding: 0;
    align-items: flex-end;
  }
  .mc-auth-gate .mc-ag__card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: calc(100dvh - 8px);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mc-auth-top {
    padding: 16px 20px 4px;
  }
  .mc-auth-google-primary {
    padding: 13px 18px;
    font-size: 15px;
    border-radius: 11px;
  }
  .mc-auth-gate .mc-ag__input {
    min-height: 44px;     /* iOS touch target */
    font-size: 16px;      /* iOS auto-zoom önle (>= 16px) */
    padding: 11px 14px;
  }
  .mc-auth-gate .mc-ag__submit {
    min-height: 48px;
    font-size: 16px;
  }
  .mc-auth-gate .mc-ag__title {
    font-size: 19px;
  }
  .mc-auth-checkbox__text { font-size: 13px; }
}
@media (max-width: 360px) {
  .mc-auth-top { padding: 14px 16px 2px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   v2500 — Inline legal modal (KVKK / Kullanım Koşulları)
   Auth gate'in üzerine açılır; yeni sekme açmaz.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes mc-legal-modal-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mc-legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9300;                       /* auth gate (9100) > legal modal > diğer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
}
.mc-legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 24, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mc-legal-modal__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mc-legal-modal-enter 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-theme="dark"] .mc-legal-modal__card {
  background: #1a1f2e;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
}
.mc-legal-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
}
[data-theme="dark"] .mc-legal-modal__head {
  border-bottom-color: #2a3347;
  background: #1a1f2e;
}
.mc-legal-modal__head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .mc-legal-modal__head h3 { color: #f1f5f9; }
.mc-legal-modal__close {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
}
.mc-legal-modal__close:hover { background: #f1f5f9; color: #0f172a; }
[data-theme="dark"] .mc-legal-modal__close:hover { background: #1e293b; color: #f1f5f9; }
.mc-legal-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 26px 18px;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.65;
}
[data-theme="dark"] .mc-legal-modal__body { color: #cbd5e1; }
.mc-legal-modal__body p {
  margin: 0 0 14px;
}
.mc-legal-modal__body p:last-child { margin-bottom: 0; }
.mc-legal-modal__loading,
.mc-legal-modal__error {
  text-align: center;
  color: #64748b;
  padding: 32px 16px;
}
.mc-legal-modal__error { color: #b91c1c; }
[data-theme="dark"] .mc-legal-modal__error { color: #fca5a5; }
.mc-legal-modal__foot {
  display: flex;
  justify-content: center;
  padding: 16px 26px 22px;
  border-top: 1px solid #eef2f7;
  background: #fafbfd;
}
[data-theme="dark"] .mc-legal-modal__foot {
  border-top-color: #2a3347;
  background: #141926;
}
.mc-legal-modal__back {
  /* .mc-ag__submit'i base alır; sadece tam genişliği kısıtla */
  width: auto;
  min-width: 160px;
  margin-top: 0;
  padding: 12px 28px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .mc-legal-modal { padding: 0; align-items: flex-end; }
  .mc-legal-modal__card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .mc-legal-modal__head { padding: 18px 20px 14px; }
  .mc-legal-modal__body { padding: 18px 20px 16px; font-size: 14px; }
  .mc-legal-modal__foot { padding: 14px 20px 20px; }
  .mc-legal-modal__back { width: 100%; min-width: 0; }
}
/* ── /v2500 (Agent #1) ──────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   v2500 Sprint B (Agent #2): Sağ Profil Drawer
   ───────────────────────────────────────────────────────────────────────── */

/* Topbar pro chip — avatar */
.mc-pro-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
  flex-shrink: 0;
}
.mc-pro-chip__initial {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mc-accent, #c9a24d);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  margin-right: 6px;
  flex-shrink: 0;
  line-height: 1;
}

/* Drawer container */
.mc-profile-drawer-root { position: relative; z-index: 99; }

.mc-profile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 100vh;
  height: 100dvh;
  background: var(--mc-paper, #fff);
  box-shadow: -16px 0 48px rgba(0, 0, 0, .12);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  color: var(--mc-ink, #1d1d1f);
}
.mc-profile-drawer.is-open { transform: translateX(0); }

.mc-profile-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms;
  z-index: 99;
}
.mc-profile-drawer__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Header */
.mc-profile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  flex-shrink: 0;
}
.mc-profile-drawer__user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mc-profile-drawer__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mc-accent, #c9a24d);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  flex-shrink: 0;
}
.mc-profile-drawer__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-profile-drawer__initial {
  line-height: 1;
}
.mc-profile-drawer__user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mc-profile-drawer__user-info strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.mc-profile-drawer__user-info small {
  font-size: 12px;
  color: var(--mc-ink-soft, #6e6e73);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.mc-profile-drawer__verified {
  color: #10b981;
  font-weight: 700;
  display: inline-block;
  margin-left: 2px;
}
.mc-profile-drawer__close {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--mc-ink-soft, #6e6e73);
  transition: background 150ms;
  flex-shrink: 0;
}
.mc-profile-drawer__close:hover { background: rgba(0, 0, 0, .05); }

/* Tabs */
.mc-profile-drawer__tabs {
  display: flex;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  overflow-x: auto;
  flex-shrink: 0;
}
.mc-profile-drawer__tab {
  flex: 1;
  min-width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--mc-ink-soft, #6e6e73);
  border-bottom: 2px solid transparent;
  transition: all 150ms;
  font-family: inherit;
}
.mc-profile-drawer__tab svg {
  width: 18px;
  height: 18px;
}
.mc-profile-drawer__tab:hover {
  color: var(--mc-ink, #1d1d1f);
}
.mc-profile-drawer__tab.is-active {
  color: var(--mc-accent, #c9a24d);
  border-bottom-color: var(--mc-accent, #c9a24d);
}

/* Body */
.mc-profile-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Footer */
.mc-profile-drawer__foot {
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  flex-shrink: 0;
}
.mc-profile-drawer__logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, .20);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms;
  font-family: inherit;
}
.mc-profile-drawer__logout:hover { background: rgba(239, 68, 68, .12); }

/* Form fields */
.mc-drawer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.mc-drawer-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-ink-soft, #6e6e73);
}
.mc-drawer-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 8px;
  font-size: 14px;
  color: var(--mc-ink, #1d1d1f);
  background: var(--mc-paper, #fff);
  font-family: inherit;
  box-sizing: border-box;
}
.mc-drawer-input:focus {
  outline: 2px solid rgba(201, 162, 77, .40);
  border-color: #c9a24d;
}
.mc-drawer-form__msg {
  font-size: 13px;
  color: #10b981;
  margin: 10px 0 0;
  text-align: center;
}

/* Drawer buttons */
.mc-drawer-btn {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 8px;
  background: #fff;
  color: var(--mc-ink, #1d1d1f);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: inherit;
  transition: all 150ms;
}
.mc-drawer-btn:hover { background: rgba(0, 0, 0, .03); }
.mc-drawer-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mc-drawer-btn--primary {
  background: linear-gradient(135deg, #c9a24d, #a8862d);
  color: #fff;
  border: none;
}
.mc-drawer-btn--primary:hover {
  filter: brightness(1.05);
  background: linear-gradient(135deg, #c9a24d, #a8862d);
}
.mc-drawer-btn--danger {
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, .20);
}
.mc-drawer-btn--danger:hover { background: rgba(239, 68, 68, .12); }

/* Empty state */
.mc-drawer-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mc-ink-soft, #6e6e73);
}
.mc-drawer-empty p {
  margin: 0;
  font-size: 14px;
}
.mc-drawer-empty__sub {
  font-size: 13px !important;
  opacity: 0.7;
  margin-top: 4px !important;
}

/* Orders */
.mc-drawer-orders {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mc-drawer-orders__item {
  background: rgba(0, 0, 0, .02);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mc-drawer-orders__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.mc-drawer-orders__head strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
}
.mc-drawer-orders__date {
  font-size: 12px;
  color: var(--mc-ink-soft, #6e6e73);
}
.mc-drawer-orders__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mc-drawer-orders__status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  color: var(--mc-ink-soft, #6e6e73);
  font-weight: 600;
}
.mc-drawer-orders__status--new,
.mc-drawer-orders__status--pending { background: rgba(59, 130, 246, .15); color: #2563eb; }
.mc-drawer-orders__status--confirmed { background: rgba(99, 102, 241, .15); color: #4f46e5; }
.mc-drawer-orders__status--in_production,
.mc-drawer-orders__status--production { background: rgba(245, 158, 11, .15); color: #d97706; }
.mc-drawer-orders__status--ready { background: rgba(168, 85, 247, .15); color: #9333ea; }
.mc-drawer-orders__status--shipped { background: rgba(16, 185, 129, .15); color: #059669; }
.mc-drawer-orders__status--delivered { background: rgba(34, 197, 94, .15); color: #16a34a; }
.mc-drawer-orders__status--cancelled,
.mc-drawer-orders__status--canceled { background: rgba(239, 68, 68, .15); color: #dc2626; }
.mc-drawer-orders__total {
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
}

/* Favorites grid */
.mc-drawer-fav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mc-drawer-fav-card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  cursor: pointer;
  transition: transform 150ms, box-shadow 150ms;
  font-family: inherit;
  text-align: left;
}
.mc-drawer-fav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
.mc-drawer-fav-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.mc-drawer-fav-card span {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  color: var(--mc-ink, #1d1d1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KVKK tab */
.mc-drawer-kvkk section {
  margin-bottom: 24px;
}
.mc-drawer-kvkk h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--mc-ink, #1d1d1f);
}
.mc-drawer-kvkk__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.mc-drawer-kvkk__list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mc-drawer-kvkk__list li span {
  color: var(--mc-ink-soft, #6e6e73);
}
.mc-drawer-kvkk__list li strong {
  font-weight: 600;
  color: var(--mc-ink, #1d1d1f);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.mc-drawer-kvkk__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-drawer-kvkk__links a {
  font-size: 13px;
  color: var(--mc-accent, #c9a24d);
  text-decoration: none;
  font-weight: 500;
}
.mc-drawer-kvkk__links a:hover {
  text-decoration: underline;
}

/* Logout confirm modal */
.mc-logout-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .40);
  z-index: 110;
  display: grid;
  place-items: center;
  animation: mc-logout-confirm-fade 200ms ease;
}
@keyframes mc-logout-confirm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mc-logout-confirm__card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  max-width: 360px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .20);
}
.mc-logout-confirm__card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--mc-ink, #1d1d1f);
}
.mc-logout-confirm__card p {
  font-size: 14px;
  color: var(--mc-ink-soft, #6e6e73);
  margin: 0 0 20px;
  line-height: 1.5;
}
.mc-logout-confirm__actions {
  display: flex;
  gap: 10px;
}
.mc-logout-confirm__actions .mc-drawer-btn {
  margin-bottom: 0;
}

/* Dark theme */
[data-theme="dark"] .mc-profile-drawer {
  background: #0f1419;
  color: #fff;
}
[data-theme="dark"] .mc-profile-drawer__head,
[data-theme="dark"] .mc-profile-drawer__tabs,
[data-theme="dark"] .mc-profile-drawer__foot {
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .mc-profile-drawer__close:hover {
  background: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .mc-profile-drawer__user-info small,
[data-theme="dark"] .mc-profile-drawer__tab,
[data-theme="dark"] .mc-drawer-field__label {
  color: rgba(255, 255, 255, .65);
}
[data-theme="dark"] .mc-drawer-input,
[data-theme="dark"] .mc-drawer-btn {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .10);
  color: #fff;
}
[data-theme="dark"] .mc-drawer-btn:hover {
  background: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .mc-drawer-orders__item {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .mc-drawer-orders__date {
  color: rgba(255, 255, 255, .55);
}
[data-theme="dark"] .mc-drawer-fav-card {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .mc-drawer-fav-card span {
  color: #fff;
}
[data-theme="dark"] .mc-drawer-kvkk h4 {
  color: #fff;
}
[data-theme="dark"] .mc-drawer-kvkk__list li {
  border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .mc-drawer-kvkk__list li span {
  color: rgba(255, 255, 255, .55);
}
[data-theme="dark"] .mc-drawer-kvkk__list li strong {
  color: #fff;
}
[data-theme="dark"] .mc-logout-confirm__card {
  background: #1a1f2e;
  color: #fff;
}
[data-theme="dark"] .mc-logout-confirm__card h3 {
  color: #fff;
}
[data-theme="dark"] .mc-logout-confirm__card p {
  color: rgba(255, 255, 255, .65);
}

/* Mobile */
@media (max-width: 600px) {
  .mc-profile-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .mc-profile-drawer__head {
    padding: 14px 16px;
  }
  .mc-profile-drawer__body {
    padding: 16px;
  }
  .mc-profile-drawer__foot {
    padding: 10px 16px;
  }
  .mc-profile-drawer__tab {
    padding: 10px 8px;
    font-size: 10px;
  }
  .mc-profile-drawer__user-info strong,
  .mc-profile-drawer__user-info small {
    max-width: 180px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mc-profile-drawer,
  .mc-profile-drawer__backdrop {
    transition: none;
  }
  .mc-logout-confirm {
    animation: none;
  }
}
/* ── /v2500 Sprint B (Agent #2) ─────────────────────────────────────── */

/* ── v3300 Agent Z: Color picker premium focus + smooth UX ──────────── */
/* Surgical color update (no re-render) — picker DOM persistent, premium feedback */
input[type="color"][data-global-color] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="color"][data-global-color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"][data-global-color]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
input[type="color"][data-global-color]::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}
input[type="color"][data-global-color]:hover {
  border-color: rgba(15, 23, 42, 0.3);
  transform: scale(1.05);
}
input[type="color"][data-global-color]:focus,
input[type="color"][data-global-color]:focus-visible {
  outline: none;
  border-color: #c9a24d;
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.25);
}
input[type="color"][data-global-color]:active {
  transform: scale(0.95);
}

/* Composite SVG/mockup recolorize smooth transition */
.mc-card .mc-card__composite-svg,
.mc-card .mc-card__composite-mockup {
  transition: opacity 280ms ease, filter 280ms ease;
}

/* Premium pulse — kart recolorize edildiğinde nazik feedback */
.mc-card[data-recoloring] {
  animation: mc-card-recolor-pulse 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes mc-card-recolor-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--mc-card-shadow, 0 6px 16px rgba(13, 12, 10, 0.08));
  }
  50% {
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
}

/* Accessibility: reduced motion guard */
@media (prefers-reduced-motion: reduce) {
  .mc-card[data-recoloring],
  input[type="color"][data-global-color],
  .mc-card .mc-card__composite-svg,
  .mc-card .mc-card__composite-mockup {
    animation: none !important;
    transition: none !important;
  }
  input[type="color"][data-global-color]:hover,
  input[type="color"][data-global-color]:active {
    transform: none !important;
  }
}
/* ── /v3300 Agent Z ─────────────────────────────────────────────────── */

/* v3702 Kural 15: License blocked badge */
.mc-card__license-blocked {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(127, 29, 29, 0.32);
  text-transform: uppercase;
}
.mc-card--license-blocked {
  position: relative;
  opacity: 0.85;
}
.mc-card--license-blocked .mc-card__cta,
.mc-card--license-blocked button[data-add-to-cart] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* === D20-Ajan4 START === */
/* v3970 D20-Ajan4 — Müşteri Storefront Premium Discovery tokenları.
   Toast, modal, empty state, swatch grid, zoom, quick-view, skeleton, bottom-sheet
   ve recently-viewed bileşenleri için ortak görsel dil. Storefront context'inde
   (.mc-prem-* prefix) tüketilir; tenant-admin .ta-prem-* paraleli ile token-eşdeğer. */
:root {
  --mc-prem-gold-1: #c9a24d;
  --mc-prem-gold-2: #b08c4a;
  --mc-prem-gold-3: #9a7a3e;
  --mc-prem-ink: #111827;
  --mc-prem-ink-soft: #4b5563;
  --mc-prem-bg: #fff;
  --mc-prem-bg-soft: #f8f7f4;
  --mc-prem-border: rgba(17, 24, 39, 0.08);
  --mc-prem-border-strong: rgba(17, 24, 39, 0.16);
  --mc-prem-shadow-1: 0 4px 16px rgba(17, 24, 39, 0.08);
  --mc-prem-shadow-2: 0 12px 36px rgba(17, 24, 39, 0.14);
  --mc-prem-shadow-3: 0 24px 64px rgba(17, 24, 39, 0.22);
  --mc-prem-radius-sm: 8px;
  --mc-prem-radius-md: 14px;
  --mc-prem-radius-lg: 20px;
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.mc-prem-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10080;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.mc-prem-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--mc-prem-radius-md);
  background: var(--mc-prem-bg);
  color: var(--mc-prem-ink);
  border: 1px solid var(--mc-prem-border-strong);
  box-shadow: var(--mc-prem-shadow-2);
  font-size: 13.5px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .24s ease, transform .24s ease;
}
.mc-prem-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.mc-prem-toast__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 8px;
  background: var(--mc-prem-gold-1);
}
.mc-prem-toast--success .mc-prem-toast__dot { background: #15803d; }
.mc-prem-toast--warning .mc-prem-toast__dot { background: #d97706; }
.mc-prem-toast--error   .mc-prem-toast__dot { background: #b91c1c; }
.mc-prem-toast--info    .mc-prem-toast__dot { background: #2563eb; }
.mc-prem-toast__body { flex: 1; min-width: 0; }
.mc-prem-toast__close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mc-prem-ink-soft);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
}
.mc-prem-toast__close:hover { background: var(--mc-prem-bg-soft); }

/* ── Modal ─────────────────────────────────────────────────────────── */
.mc-prem-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .22s ease;
}
.mc-prem-modal-backdrop.is-visible { opacity: 1; }
.mc-prem-modal {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  background: var(--mc-prem-bg);
  border-radius: var(--mc-prem-radius-lg);
  box-shadow: var(--mc-prem-shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform .24s ease;
}
.mc-prem-modal-backdrop.is-visible .mc-prem-modal {
  transform: translateY(0) scale(1);
}
.mc-prem-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mc-prem-border);
}
.mc-prem-modal__title {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  margin: 0;
  color: var(--mc-prem-ink);
}
.mc-prem-modal__close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mc-prem-ink-soft);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
}
.mc-prem-modal__close:hover { background: var(--mc-prem-bg-soft); }
.mc-prem-modal__body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.mc-prem-modal__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--mc-prem-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Empty state ───────────────────────────────────────────────────── */
.mc-prem-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  color: var(--mc-prem-ink-soft);
}
.mc-prem-empty__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  color: var(--mc-prem-gold-2);
  opacity: .85;
}
.mc-prem-empty__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--mc-prem-ink);
}
.mc-prem-empty__body {
  font-size: 13.5px;
  max-width: 380px;
  margin: 0;
}

/* ── Swatch grid (inline on card) ──────────────────────────────────── */
.mc-prem-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 8px 0;
  align-items: center;
}
.mc-prem-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(17,24,39,0.18);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.mc-prem-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--mc-prem-gold-2);
}
.mc-prem-swatch.is-active {
  box-shadow: 0 0 0 2px var(--mc-prem-gold-1), 0 0 0 4px rgba(201, 162, 77, 0.22);
}
.mc-prem-swatch-overflow {
  height: 20px;
  min-width: 30px;
  padding: 0 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: var(--mc-prem-bg-soft);
  color: var(--mc-prem-ink-soft);
  border: 1px solid var(--mc-prem-border);
}
.mc-prem-swatch-overflow:hover {
  background: var(--mc-prem-gold-1);
  color: #fff;
  border-color: var(--mc-prem-gold-1);
}

/* Card image swap animation hook (240ms crossfade) */
.mc-prod-card__img.is-swapping {
  opacity: 0;
  transition: opacity .24s ease;
}

/* Quick-view overlay on prod-card */
.mc-prem-quick-trigger {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  background: rgba(255,255,255,0.92);
  color: var(--mc-prem-ink);
  border: 1px solid var(--mc-prem-border-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.mc-prod-card:hover .mc-prem-quick-trigger,
.mc-prod-card:focus-within .mc-prem-quick-trigger {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 720px) {
  .mc-prem-quick-trigger { opacity: 1; transform: none; }
}

/* ── Quick view layout ─────────────────────────────────────────────── */
.mc-prem-quick-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .mc-prem-quick-view { grid-template-columns: 1fr; }
}
.mc-prem-quick-view__gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-prem-quick-view__main {
  width: 100%;
  border-radius: var(--mc-prem-radius-md);
  background: var(--mc-prem-bg-soft);
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.mc-prem-quick-view__thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mc-prem-quick-view__thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--mc-prem-bg-soft);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.mc-prem-quick-view__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-prem-quick-view__thumb.is-active {
  border-color: var(--mc-prem-gold-1);
}
.mc-prem-quick-view__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-prem-quick-view__name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--mc-prem-ink);
}
.mc-prem-quick-view__price {
  font-size: 17px;
  font-weight: 700;
  color: var(--mc-prem-gold-3);
}
.mc-prem-quick-view__cta {
  margin-top: auto;
  background: linear-gradient(135deg, var(--mc-prem-gold-1) 0%, var(--mc-prem-gold-3) 100%);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.mc-prem-quick-view__cta:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Zoom magnifier (desktop hover) ────────────────────────────────── */
.mc-prem-zoom-magnifier {
  position: fixed;
  pointer-events: none;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 2px solid var(--mc-prem-gold-1);
  box-shadow: var(--mc-prem-shadow-3);
  background-repeat: no-repeat;
  background-size: 200%;
  z-index: 10070;
  display: none;
}
.mc-prem-zoom-magnifier.is-active {
  display: block;
}
.mc-prem-zoom-img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
  touch-action: pinch-zoom;
}

/* ── Recently viewed aside ─────────────────────────────────────────── */
.mc-prem-aside {
  position: fixed;
  top: 96px;
  right: 16px;
  width: 220px;
  z-index: 60;
  background: var(--mc-prem-bg);
  border: 1px solid var(--mc-prem-border);
  border-radius: var(--mc-prem-radius-md);
  box-shadow: var(--mc-prem-shadow-1);
  padding: 12px;
}
.mc-prem-aside__head {
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-prem-ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mc-prem-aside__close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--mc-prem-ink-soft);
  line-height: 1;
}
.mc-prem-aside__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.mc-prem-aside__item {
  background: var(--mc-prem-bg-soft);
  border-radius: 8px;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.mc-prem-aside__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-prem-aside__item:hover {
  outline: 2px solid var(--mc-prem-gold-1);
}
@media (max-width: 720px) {
  .mc-prem-aside {
    top: auto;
    bottom: 80px;
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* ── Complementary modal hero ──────────────────────────────────────── */
.mc-prem-complementary__hero {
  background: linear-gradient(135deg, var(--mc-prem-gold-1) 0%, var(--mc-prem-gold-3) 100%);
  color: #fff;
  padding: 18px;
  border-radius: var(--mc-prem-radius-md);
  margin-bottom: 14px;
}
.mc-prem-complementary__hero h3 {
  margin: 0 0 4px 0;
  font-size: 17px;
}
.mc-prem-complementary__hero p {
  margin: 0;
  opacity: .9;
  font-size: 13px;
}
.mc-prem-complementary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .mc-prem-complementary__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.mc-prem-complementary__card {
  border: 1px solid var(--mc-prem-border);
  border-radius: var(--mc-prem-radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--mc-prem-bg);
}
.mc-prem-complementary__card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--mc-prem-bg-soft);
}
.mc-prem-complementary__card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mc-prem-ink);
  margin: 0;
  line-height: 1.3;
}
.mc-prem-complementary__card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--mc-prem-gold-3);
}
.mc-prem-complementary__add {
  background: var(--mc-prem-bg-soft);
  border: 1px solid var(--mc-prem-border);
  color: var(--mc-prem-ink);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.mc-prem-complementary__add:hover {
  background: var(--mc-prem-gold-1);
  color: #fff;
  border-color: var(--mc-prem-gold-1);
}
.mc-prem-complementary__add.is-added {
  background: #15803d;
  color: #fff;
  border-color: #15803d;
}
.mc-prem-complementary__bulk {
  margin-top: 14px;
  width: 100%;
  background: linear-gradient(135deg, var(--mc-prem-gold-1) 0%, var(--mc-prem-gold-3) 100%);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}

/* ── Wishlist panel ────────────────────────────────────────────────── */
.mc-prem-wishlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 0;
}
.mc-prem-wishlist__card {
  border: 1px solid var(--mc-prem-border);
  border-radius: var(--mc-prem-radius-md);
  overflow: hidden;
  background: var(--mc-prem-bg);
  display: flex;
  flex-direction: column;
}
.mc-prem-wishlist__art {
  aspect-ratio: 1/1;
  background: var(--mc-prem-bg-soft);
  position: relative;
}
.mc-prem-wishlist__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-prem-wishlist__body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-prem-wishlist__actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.mc-prem-wishlist__btn {
  flex: 1;
  border: 1px solid var(--mc-prem-border);
  background: var(--mc-prem-bg);
  color: var(--mc-prem-ink);
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  cursor: pointer;
}
.mc-prem-wishlist__btn:hover { background: var(--mc-prem-bg-soft); }
.mc-prem-wishlist__btn--danger { color: #b91c1c; }
.mc-prem-wishlist__btn--primary {
  background: var(--mc-prem-gold-1);
  color: #fff;
  border-color: var(--mc-prem-gold-1);
}

/* ── Skeleton shimmer ──────────────────────────────────────────────── */
.mc-prem-skeleton {
  background: linear-gradient(90deg, #efeeea 0%, #f7f6f3 50%, #efeeea 100%);
  background-size: 200% 100%;
  animation: mcPremShimmer 1.2s linear infinite;
  border-radius: var(--mc-prem-radius-sm);
}
@keyframes mcPremShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.mc-prem-skeleton--card  { height: 220px; }
.mc-prem-skeleton--row   { height: 16px; margin: 6px 0; }
.mc-prem-skeleton--thumb { height: 64px; width: 64px; border-radius: 50%; }

/* ── Mobile bottom sheet ───────────────────────────────────────────── */
.mc-prem-bottomsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10060;
  background: var(--mc-prem-bg);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--mc-prem-shadow-3);
  height: 80vh;
  max-height: 88vh;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
}
.mc-prem-bottomsheet.is-open {
  transform: translateY(0);
}
.mc-prem-bottomsheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--mc-prem-border-strong);
  margin: 8px auto;
  cursor: grab;
}
.mc-prem-bottomsheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px 16px;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .mc-prem-toast,
  .mc-prem-modal-backdrop,
  .mc-prem-modal,
  .mc-prem-bottomsheet,
  .mc-prod-card__img.is-swapping,
  .mc-prem-skeleton {
    transition: none !important;
    animation: none !important;
  }
}
/* === D20-Ajan4 END === */

/* === D20-Ajan1 STOREFRONT START === */
/* D20 Storefront premium token mirror — toast/modal/skeleton/empty/segment/select/badge/sparkline
   tenant-admin.css aynası, .mc-prem-* öneki ile storefront widget'a uyarlanmıştır. */

/* --- Toast --- */
.mc-prem-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
.mc-prem-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  line-height: 1.45;
  color: #0f172a;
  pointer-events: auto;
  touch-action: pan-y;
  animation: mc-prem-toast-in 0.32s cubic-bezier(.2, .8, .2, 1);
}
.mc-prem-toast--success { border-left-color: #16a34a; }
.mc-prem-toast--info    { border-left-color: #3b82f6; }
.mc-prem-toast--warn    { border-left-color: #f59e0b; }
.mc-prem-toast--error   { border-left-color: #dc2626; }
.mc-prem-toast__msg { flex: 1 1 auto; word-break: break-word; }
.mc-prem-toast__close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  border-radius: 4px;
}
.mc-prem-toast__close:hover { background: #f1f5f9; color: #0f172a; }
.mc-prem-toast__close:focus-visible {
  outline: 2px solid #c39b3a;
  outline-offset: 2px;
}
@keyframes mc-prem-toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* --- Modal --- */
.mc-prem-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: mc-prem-modal-fade 0.18s ease-out;
}
@keyframes mc-prem-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mc-prem-modal {
  background: #fff;
  border-radius: 14px;
  max-width: 720px;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
  animation: mc-prem-modal-up 0.28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes mc-prem-modal-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.mc-prem-modal__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.mc-prem-modal__hero h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.mc-prem-modal__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  border-radius: 8px;
}
.mc-prem-modal__close:hover { background: #f1f5f9; color: #0f172a; }
.mc-prem-modal__body {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  color: #1a1d27;
  font-size: 14px;
  line-height: 1.55;
}
.mc-prem-modal__footer {
  padding: 16px 28px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fafbfc;
}
.mc-prem-btn--gold {
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #c39b3a 0%, #a87f2a 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mc-prem-btn--gold:hover { filter: brightness(1.05); }
.mc-prem-btn--ghost {
  padding: 9px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mc-prem-btn--ghost:hover { background: #f8fafc; color: #0f172a; }

/* --- Skeleton --- */
.mc-prem-skeleton {
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: mc-prem-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.mc-prem-skeleton--line   { height: 14px; }
.mc-prem-skeleton--circle { border-radius: 50%; width: 36px; height: 36px; }
.mc-prem-skeleton--block  { height: 80px; }
@keyframes mc-prem-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Empty state --- */
.mc-prem-empty-state {
  text-align: center;
  padding: 60px 24px;
  max-width: 420px;
  margin: 0 auto;
}
.mc-prem-empty-state__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #94a3b8;
}
.mc-prem-empty-state__title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1d27;
  margin: 0;
}
.mc-prem-empty-state__desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 8px 0 20px;
}

/* --- Segment chip --- */
.mc-prem-segment-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
}
.mc-prem-segment-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, #c39b3a 0%, #a87f2a 100%);
  color: #fff;
}

/* --- Dropdown / Select --- */
.mc-prem-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px 36px 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #0f172a;
  cursor: pointer;
}
.mc-prem-select:focus {
  outline: none;
  border-color: #c39b3a;
  box-shadow: 0 0 0 3px rgba(195, 155, 58, 0.18);
}

/* --- Badges --- */
.mc-prem-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.mc-prem-badge--success { background: #dcfce7; color: #166534; }
.mc-prem-badge--info    { background: #dbeafe; color: #1e40af; }
.mc-prem-badge--warn    { background: #fef3c7; color: #92400e; }
.mc-prem-badge--error   { background: #fee2e2; color: #991b1b; }
.mc-prem-badge--neutral { background: #f1f5f9; color: #475569; }
.mc-prem-badge--premium {
  background: linear-gradient(135deg, #c39b3a 0%, #a87f2a 100%);
  color: #fff;
}

/* --- Sparkline --- */
.mc-prem-sparkline {
  display: inline-block;
  width: 60px;
  height: 18px;
  vertical-align: middle;
}
.mc-prem-sparkline svg { display: block; width: 100%; height: 100%; }

/* --- Photo gallery --- */
.mc-prem-photo-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-prem-photo-gallery__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
}
.mc-prem-photo-gallery__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: #f1f5f9 center/cover no-repeat;
  padding: 0;
}
.mc-prem-photo-gallery__thumb.is-active { border-color: #c39b3a; }

/* --- Pulse animation --- */
.mc-prem-pulse {
  animation: mc-prem-pulse 1.5s ease-in-out infinite;
}
@keyframes mc-prem-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
/* === D20-Ajan1 STOREFRONT END === */

/* === D21-AjanE START === */
/* KVKK consent gate — sipariş öncesi 3 zorunlu + 2 opsiyonel onay */
.mc-consent-gate {
  margin: 16px 0 8px;
  padding: 18px 20px 16px;
  border: 1px solid #d4d4d8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fafaf9 0%, #f4f4f5 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-consent-gate > legend {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  width: calc(100% - 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-consent-gate__hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: #52525b;
  line-height: 1.55;
}
.mc-consent-gate__hint strong { color: #18181b; }

.mc-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 140ms ease, background 140ms ease;
}
.mc-consent-row:hover { border-color: #d4d4d8; }
.mc-consent-row input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #c39b3a;
}
.mc-consent-row label {
  flex: 1;
  font-size: 13px;
  line-height: 1.55;
  color: #27272a;
  cursor: pointer;
  user-select: none;
}
.mc-consent-row label a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mc-consent-row label a:hover { color: #1e40af; }
.mc-consent-row input[type="checkbox"]:checked + label { color: #18181b; }
.mc-consent-row:has(input[type="checkbox"]:checked) {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* Opsiyonel onaylar (details/summary disclosure) */
.mc-consent-optional {
  margin-top: 4px;
  padding: 6px 4px 4px;
  border-top: 1px dashed #d4d4d8;
}
.mc-consent-optional > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #52525b;
  padding: 6px 10px;
  border-radius: 8px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-consent-optional > summary::before {
  content: "+";
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  width: 14px;
  color: #71717a;
  transition: transform 140ms ease;
}
.mc-consent-optional[open] > summary::before { content: "−"; }
.mc-consent-optional > summary:hover { background: #fafaf9; color: #18181b; }
.mc-consent-optional > summary::-webkit-details-marker { display: none; }
.mc-consent-optional .mc-consent-row { background: #fafaf9; }

.mc-consent-gate__status {
  margin: 6px 4px 0;
  font-size: 12px;
  color: #b45309;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.mc-consent-gate__status.is-ready { color: #15803d; }
.mc-consent-gate__status.is-pending { color: #b45309; }

/* Disabled gate buton görseli — D21 blocked */
[data-action="confirm-order"][data-d21-blocked="1"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

@media (max-width: 540px) {
  .mc-consent-gate { padding: 14px 14px 12px; }
  .mc-consent-row { padding: 8px; }
  .mc-consent-row label { font-size: 12.5px; }
}
/* === D21-AjanE END === */

/* === D22-AJAN4 BEGIN === Storefront orphan design badge + dim treatment */
.mc-prod-card.is-orphan,
.mc-card.is-orphan {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
  cursor: not-allowed;
}
/* Diagonal striped overlay — kart tiklanamaz oldugu kullaniciya gorsel bildirim */
.mc-prod-card.is-orphan::after,
.mc-card.is-orphan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0px,
    rgba(255, 255, 255, 0.4) 6px,
    transparent 6px,
    transparent 12px
  );
  pointer-events: none;
  z-index: 4;
}
/* Diagonal red badge — sag ust kose */
.mc-prem-orphan-badge {
  position: absolute;
  top: 12px;
  right: -8px;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: rotate(8deg);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.32);
  z-index: 5;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}
.mc-prem-orphan-badge span {
  display: inline-block;
}
/* Heart/wish button orphan kartlarda gizlensin */
.mc-prod-card.is-orphan .mc-card__heart,
.mc-card.is-orphan .mc-card__heart {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mc-prem-orphan-badge {
    transform: none;
  }
}
@media (max-width: 540px) {
  .mc-prem-orphan-badge {
    font-size: 10px;
    padding: 3px 10px;
    top: 8px;
    right: -6px;
  }
}
/* === D22-AJAN4 END === */


/* === v4007-D34-P1 PAIR-TOGGLE START === Symmetric pair lock 🔗/🔓 */
.mc-popover__head { display: flex; align-items: center; gap: 6px; }
.mc-popover__head strong { flex: 1; }
.mc-pair-toggle {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms ease;
}
.mc-pair-toggle:hover {
  border-color: #6366f1;
  background: #eef2ff;
  transform: scale(1.05);
}
.mc-pair-toggle.is-locked {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
  color: #92400e;
}
.mc-pair-toggle:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
/* === v4007-D34-P1 PAIR-TOGGLE END === */

/* === v4015 Premium siparis is istasyonu === */
/* === D49-B === Cart drawer 140→320px (kullanıcı: sepet büyüsün + 2-kolon premium önizleme) */
/* === D54-W3-PANEL-WIDEN START === Sağ Kadro paneli (D58-W3 revize: 480 → 340 user "kırmızı çizgiye kadar küçült") */
.mc-cart-drawer.mc-order-workbench,
.mc-order-workbench.mc-cart-drawer {
  flex: 0 0 340px !important;
  flex-basis: 340px !important;
  max-width: 340px !important;
}
@media (max-width: 1023px) and (min-width: 601px) {
  .mc-cart-drawer.mc-order-workbench,
  .mc-order-workbench.mc-cart-drawer {
    flex: 0 0 320px !important;
    flex-basis: 320px !important;
    max-width: 320px !important;
  }
}
@media (max-width: 600px) {
  .mc-cart-drawer.mc-order-workbench,
  .mc-order-workbench.mc-cart-drawer {
    flex: none !important;
    max-width: none !important;
  }
}
/* === D54-W3-PANEL-WIDEN END === */

.mc-order-workbench .mc-cart-drawer__head,
.mc-order-workbench .mc-cart-drawer__section,
.mc-order-workbench .mc-cart-drawer__foot {
  padding-left: 12px;
  padding-right: 12px;
}

.mc-order-workbench .mc-cart-drawer__items {
  padding-left: 10px;
  padding-right: 10px;
}

.mc-order-workbench .mc-order-panel {
  padding: 12px;
}

.mc-order-workbench .mc-wiz-panel__title {
  font-size: 16px;
}

.mc-order-workbench .mc-wiz-panel__hint {
  font-size: 12px;
  line-height: 1.45;
}

.mc-preview-premium__capture-section {
  gap: 12px;
  padding: 14px 0 16px;
}

.mc-preview-premium__capture-stage {
  min-height: 300px;
  max-height: 480px;
}

.mc-preview-premium__capture-stage .mc-card__composite {
  width: min(440px, 64vw);
  max-height: 460px;
}

.mc-preview-premium__piece-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.mc-preview-premium__piece-tab {
  appearance: none;
  border: 1px solid var(--mcpp-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mcpp-ink-mute);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mc-preview-premium__piece-tab.is-active {
  border-color: var(--mcpp-gold);
  color: var(--mcpp-gold-deep);
  background: var(--mcpp-gold-soft);
}

@media (max-width: 600px) {
  /* === D49-B === Mobil cart drawer 130→geniş (kullanıcı: sepet büyüsün) */
  .mc-order-workbench .mc-cart-drawer {
    width: min(320px, 88vw);
    max-width: 88vw;
  }

  .mc-preview-premium__capture-stage {
    min-height: 180px;
  }

  /* === D36-Ajan4 START === Mobil mockup aspect-ratio + max-height */
  .mc-preview-premium__capture-stage .mc-card__composite {
    width: min(240px, 72vw);
    max-height: 300px;
    aspect-ratio: 823 / 1058;
  }
  /* === D36-Ajan4 END === */
}

/* === D36-Ajan5 START === Premium sticky summary (Madde 41-45) */
.mc-preview-sticky-summary {
  padding: 20px;
  border-left: 1px solid var(--mc-line, #e5e7eb);
  background: var(--mc-surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mc-summary-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  background: var(--mc-bg-soft, #f8fafc);
  border-radius: 12px;
}
.mc-summary-kpi > div { text-align: center; }
.mc-summary-kpi b { display: block; font-size: 18px; font-weight: 800; color: var(--mc-gold, #c39b3a); }
.mc-summary-kpi small { font-size: 11px; color: var(--mc-text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; }

.mc-summary-zones { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-summary-zone-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--mc-line, #e5e7eb);
}

/* Madde 43: zone hover tooltip */
.mc-zone-hover-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .15s ease;
}
.mc-zone-hover-tooltip.is-visible { opacity: 1; }

/* Madde 44: onay checkbox + CTA pulse */
.mc-onay-checkbox {
  display: flex; align-items: center; gap: 8px;
  padding: 10px;
  background: rgba(195, 155, 58, .08);
  border: 1px solid rgba(195, 155, 58, .25);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.mc-summary-cta {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #c39b3a 0%, #b08628 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease;
}
.mc-summary-cta:hover { transform: translateY(-2px); }
.mc-summary-cta:disabled { opacity: .4; cursor: not-allowed; transform: none; }
@keyframes mcPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(195, 155, 58, .4); } 50% { box-shadow: 0 0 0 12px rgba(195, 155, 58, 0); } }
.mc-summary-cta:not(:disabled) { animation: mcPulse 2s infinite; }

/* Madde 45: skeleton shimmer */
.mc-skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: mcShimmer 1.2s infinite;
  border-radius: 8px;
}
@keyframes mcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Madde 42: mobil 1-col */
@media (max-width: 600px) {
  .mc-preview-sticky-summary {
    border-left: none;
    border-top: 1px solid var(--mc-line, #e5e7eb);
    padding: 16px 12px;
  }
}
/* === D36-Ajan5 END === */

/* === D36-Ajan4 START === Premium 2-col grid + sticky position + player counter overlay (Madde 39-40) */
@media (min-width: 601px) {
  .mc-order-panel--summary[data-premium-grid] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    padding: 0;
    align-items: start;
  }
  .mc-preview-premium__main-col {
    min-width: 0;
  }
  .mc-preview-sticky-summary {
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
}
@media (max-width: 600px) {
  .mc-order-panel--summary[data-premium-grid] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mc-preview-sticky-summary {
    position: static;
  }
}

/* Mockup üzerinde overlay: oyuncu sayacı + tooltip container için relative parent */
.mc-preview-premium__capture-stage {
  position: relative;
}
.mc-player-counter-preview {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 25, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
/* === D36-Ajan4 END === */

/* === D36-Ajan3 START === Cascading above/below + per-zone Yükle CTA (Madde 21+22+30) */
.mc-cascading-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--mc-line, #e2e8f0);
}
.mc-cascading-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--mc-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-cascading-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-cascade-chip {
  padding: 6px 12px;
  border: 1px solid var(--mc-line, #e2e8f0);
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-text, #1f2937);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease;
}
.mc-cascade-chip:hover {
  border-color: var(--mc-gold, #c39b3a);
  transform: translateY(-1px);
}
.mc-cascade-chip:focus-visible {
  outline: 2px solid var(--mc-gold, #c39b3a);
  outline-offset: 2px;
}
.mc-cascade-chip.is-selected {
  background: var(--mc-gold, #c39b3a);
  color: #fff;
  border-color: var(--mc-gold, #c39b3a);
}

/* Per-zone Yükle CTA — spec zone satırı sağ tarafında */
.mc-zone-upload-cta {
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--mc-gold, #c39b3a);
  background: rgba(195, 155, 58, 0.08);
  color: var(--mc-gold, #c39b3a);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.mc-zone-upload-cta:hover {
  background: rgba(195, 155, 58, 0.18);
  transform: translateY(-1px);
}
.mc-zone-upload-cta:focus-visible {
  outline: 2px solid var(--mc-gold, #c39b3a);
  outline-offset: 2px;
}
.mc-zone-upload-cta.mc-zone-upload-cta--set {
  background: rgba(34, 197, 94, 0.08);
  border-color: #22c55e;
  color: #15803d;
}
.mc-zone-upload-cta.mc-zone-upload-cta--set:hover {
  background: rgba(34, 197, 94, 0.18);
}
/* === D36-Ajan3 END === */



/* === v4017-D36 Madde 18: Kadro arrow nav — oyuncu counter pill (stage overlay) === */
.mc-player-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  z-index: 5;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mc-player-counter__btn {
  background: none;
  border: 0;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  font-family: inherit;
  font-weight: 800;
  transition: color 0.15s ease;
}
.mc-player-counter__btn:hover {
  color: var(--mc-gold, #c39b3a);
}
.mc-player-counter__btn:focus-visible {
  outline: 2px solid var(--mc-gold, #c39b3a);
  outline-offset: 2px;
  border-radius: 4px;
}
.mc-player-counter__text {
  min-width: 30px;
  text-align: center;
  user-select: none;
}
/* === v4017-D36 Madde 18 END === */

/* === D36-v4025 === Vitrin grid kartında multiply wash KALDIRILDI (kullanici karari).
   Vitrin kartı = orijinal mockup, kullanıcı "Tasarla" butonuyla editöre girince
   orada gerçek SVG recolor pipeline çalışır. Wash ::before pseudo'su artık render edilmez. */
.mc-card__composite {
  position: relative;
}

/* === D39-PREMIUM-STOREFRONT START ===
   Premium UX katmanı — typography hierarchy + breathing room + hover elevation
   + filter chip polish + search ring + sort chevron + empty state + CTA refine.
   Sadece typography / spacing / shadow / border refine — recolor pipeline, hover
   scale 1.06 (D38-P5), skeleton sade (D38-P4), beyaz BG (D36-v4027) KORUNUR.
   Tüm tokenlar mevcut --accent / --bg-2 / --ink / --line üzerinden çalışır.
   Stripe / Linear / Apple kalite hedefi: kart sabit, içerik nefes alır. */

/* 1. Typography hierarchy — premium ad/tip/fiyat */
.mc-card__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}
.mc-card__type {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.mc-card__price {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--accent);
}
.mc-card__price small {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

/* 2. Card breathing room — daha geniş grid gap + hover gold ring + premium shadow.
   D38-P5 iç element scale 1.06 KORUNUR — kart layout sabit kalır. */
.mc-grid__cards {
  gap: 18px;
}
.mc-grid__cards[data-cols="3"] { gap: 24px; }
.mc-grid__cards[data-cols="5"] { gap: 16px; }
.mc-grid__cards[data-cols="7"] { gap: 12px; }
.mc-card {
  box-shadow: 0 1px 3px rgba(13, 12, 10, 0.04), 0 1px 2px rgba(13, 12, 10, 0.03);
  transition: border-color 280ms var(--ease), transform 280ms var(--ease),
              background 280ms var(--ease), box-shadow 350ms var(--ease);
}
.mc-card:hover,
.mc-card:focus-visible {
  border-color: rgba(201, 162, 77, 0.42);
  box-shadow: 0 12px 32px -8px rgba(13, 12, 10, 0.10),
              0 4px 12px -2px rgba(13, 12, 10, 0.06),
              0 0 0 1px rgba(201, 162, 77, 0.18);
}

/* 3. Filter chips polish — aktif gold gradient + hover translateY(-1px) */
.mc-cat-chip {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.012em;
  transition: border-color 200ms var(--ease), color 200ms var(--ease),
              background 200ms var(--ease), transform 180ms var(--ease),
              box-shadow 200ms var(--ease);
}
.mc-cat-chip:hover {
  transform: translateY(-1px);
  border-color: var(--ink-faint);
  color: var(--ink);
}
.mc-cat-chip.is-active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(var(--accent-rgb), 0.36),
              0 0 0 1px rgba(var(--accent-rgb), 0.08);
}
.mc-cat-chip.is-active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(var(--accent-rgb), 0.42),
              0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

/* 4. Search bar premium — gold focus ring (3px) + italic placeholder */
.mc-search__input {
  height: 34px;
  padding: 0 32px 0 30px;
  border-radius: 8px;
  font-size: 12.5px;
  transition: border-color 200ms var(--ease), width 280ms var(--ease),
              box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.mc-search__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.mc-search__input::placeholder {
  font-style: italic;
  color: var(--ink-faint);
  opacity: 0.62;
  letter-spacing: 0.012em;
}
.mc-search__icon {
  left: 10px;
  opacity: 0.55;
}

/* 5. Sort dropdown premium — gold chevron on focus + custom appearance */
.mc-sort-select {
  height: 34px;
  padding: 0 28px 0 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.018em;
  text-transform: uppercase;
  background-position: right 8px center;
  transition: border-color 200ms var(--ease), color 200ms var(--ease),
              box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.mc-sort-select:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.mc-sort-select:focus {
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23c9a24d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 6. Card meta footer premium — CTA gold gradient + tabular-nums + scale hover */
.mc-card__meta {
  gap: 8px;
  padding: 12px 14px 13px;
}
.mc-card__cta {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.04) 100%);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 180ms var(--ease),
              box-shadow 200ms var(--ease);
}
.mc-card:hover .mc-card__cta {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -2px rgba(var(--accent-rgb), 0.36);
}

/* 7. Pagination polish — load-more buton gold tone + retry refine */
.mc-load-more__btn {
  padding: 11px 32px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--ink-mute);
  transition: border-color 200ms var(--ease), color 200ms var(--ease),
              background 200ms var(--ease), transform 180ms var(--ease),
              box-shadow 200ms var(--ease);
}
.mc-load-more__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(var(--accent-rgb), 0.18);
}

/* 8. Empty state premium — icon glow + title weight refine + CTA gradient */
.mc-empty--premium {
  padding: 64px 28px;
  gap: 16px;
  border: 1px dashed var(--line-2);
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(var(--accent-rgb), 0.015) 100%);
}
.mc-empty--premium .mc-empty__icon {
  width: 56px;
  height: 56px;
  opacity: 0.42;
  filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.18));
}
.mc-empty--premium .mc-empty__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.mc-empty--premium .mc-empty__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 46ch;
}
.mc-empty--premium .mc-empty__cta {
  padding: 10px 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(var(--accent-rgb), 0.36);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease),
              filter 200ms var(--ease);
}
.mc-empty--premium .mc-empty__cta:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -3px rgba(var(--accent-rgb), 0.48);
  filter: brightness(1.04);
}

/* 9. Count badge refine + toolbar spacing */
.mc-grid__count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.7;
}
.mc-grid__toolbar { gap: 14px; margin-bottom: 14px; }

/* === D39-PREMIUM-STOREFRONT END === */

/* === D39-P7-NUMBER-CASCADE START === Numara popover cascading dropdown stilleri */
.mc-pop-cascade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,253,247,0.96) 0%, rgba(255,250,235,0.78) 100%);
  border: 1px solid rgba(201, 162, 77, 0.32);
  border-radius: 10px;
}
.mc-pop-cascade__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(23, 21, 18, 0.78);
}
.mc-pop-cascade__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-pop-cascade__chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(23, 21, 18, 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: #171512;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.mc-pop-cascade__chip:hover {
  border-color: rgba(201, 162, 77, 0.78);
  background: rgba(255, 246, 217, 0.62);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -3px rgba(201, 162, 77, 0.32);
}
.mc-pop-cascade__chip.is-selected {
  background: linear-gradient(135deg, #171512 0%, #2a261f 100%);
  border-color: #171512;
  color: #fffdf7;
  box-shadow: 0 4px 12px -2px rgba(23, 21, 18, 0.42);
}
/* === D39-P7-NUMBER-CASCADE END === */

/* === D39-P8-PREMIUM-OVERLAY START === Editor mockup overlay premium dot tokens (admin'den port)
   Kaynak: modules/platform-admin/assets/layer-upload.css :1849-1852 .is-shadow + :1914-2008 .motta-layer-zone
   Hedef: editor placement marker'a gold dashed border + soft halo + tooltip on hover
   Mevcut .mc-marker tokens'i ile uyumlu; .mc-prem-overlay-zone sadece OVERLAY scope. */
.mc-marker-overlay--premium {
  pointer-events: none;
}
.mc-marker--sponsor.is-prem-overlay .mc-marker__outline,
.mc-marker--logo.is-prem-overlay .mc-marker__outline,
.mc-marker--number.is-prem-overlay .mc-marker__outline,
.mc-marker--name.is-prem-overlay .mc-marker__outline {
  stroke-dasharray: 6 4;
  stroke: rgba(201, 162, 77, 0.78);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.32)) drop-shadow(0 0 8px rgba(201, 162, 77, 0.16));
}
.mc-marker--sponsor.is-prem-overlay:hover .mc-marker__outline,
.mc-marker--logo.is-prem-overlay:hover .mc-marker__outline,
.mc-marker--number.is-prem-overlay:hover .mc-marker__outline,
.mc-marker--name.is-prem-overlay:hover .mc-marker__outline {
  stroke: #c9a24d;
  stroke-width: 2.4;
  filter: drop-shadow(0 2px 6px rgba(201, 162, 77, 0.46)) drop-shadow(0 8px 22px rgba(15, 23, 42, 0.32));
}
/* Premium "soft shadow" SVG group beneath marker for elevation (admin .is-shadow analog) */
.mc-marker.is-prem-overlay {
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22));
}
.mc-marker--color.is-prem-overlay .mc-marker__ring {
  stroke: rgba(201, 162, 77, 0.65);
  stroke-width: 1.6;
  filter: drop-shadow(0 2px 4px rgba(180, 83, 9, 0.18))
          drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22));
}
.mc-marker--color.is-prem-overlay:hover .mc-marker__ring {
  stroke: #b45309;
  stroke-width: 2.2;
}
/* Tooltip pattern (admin uses CSS ::after; here we use SVG <title> + visual hint class) */
.mc-marker.is-prem-overlay .mc-marker__corner-tag {
  font-weight: 800;
  letter-spacing: 0.22em;
  fill: rgba(255, 253, 247, 0.98);
  stroke: rgba(23, 21, 18, 0.92);
  stroke-width: 0.6;
  paint-order: stroke fill;
}
/* === D39-P8-PREMIUM-OVERLAY END === */

/* === D40-A-EDITOR-PREMIUM START === Tasarla butonu sonrası gelen editör ekranı (kit studio + kadro + preview)
   premium polish. CSS-only token paketi — mevcut .mc-step / .mc-swatch / .mc-player-row /
   .mc-preview-sticky-bar / .mc-view-toggle / .mc-stage-zoom / .mc-canvas / .mc-modal sınıflarını
   override eder. Hiçbir mevcut layout/CSS değiştirilmedi; yalnızca son söz sahibi olarak EOF'a eklendi.
   Tüm tokenlar mevcut var(--accent), var(--accent-rgb), var(--bg-2), var(--ink), var(--line) ile uyumlu.
   Fence sınırı: aşağıdaki tüm seçiciler bu blok dışında tanımlı; refactor sırasında bu bloğu komple
   kaldırmak güvenlidir (eski "iyi yeter" stiller restore edilir). */

/* 1. Step Indicator — 4-step pill premium */
.mc-stepper {
  padding: 18px 24px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(254,250,242,0.94) 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.05);
}
.mc-step {
  padding: 7px 14px;
  border-radius: 999px;
  gap: 9px;
  position: relative;
}
.mc-step:hover {
  background: rgba(var(--accent-rgb), 0.06);
}
.mc-step__dot {
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(13, 12, 10, 0.44);
  font-size: 12.5px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.mc-step.is-current .mc-step__dot {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 6px 16px -2px rgba(var(--accent-rgb), 0.46),
              inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.mc-step.is-done .mc-step__dot {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #059669;
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(5, 150, 105, 0.36);
}
.mc-step.is-warning .mc-step__dot {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #d97706;
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(217, 119, 6, 0.36);
}
.mc-step__label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(13, 12, 10, 0.54);
}
.mc-step.is-current .mc-step__label {
  color: #0a1628;
  font-weight: 600;
}
.mc-step.is-done .mc-step__label {
  color: #047857;
  font-weight: 500;
}
.mc-step__connector {
  height: 2px;
  max-width: 48px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.18) 100%);
  border-radius: 2px;
}
.mc-step-badge {
  padding: 3px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.mc-step-badge.is-done {
  background: linear-gradient(135deg, rgba(16,185,129,0.16) 0%, rgba(5,150,105,0.12) 100%);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.22);
}
.mc-step-badge.is-warning {
  background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(217,119,6,0.14) 100%);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.24);
}

/* 2. Color picker swatch grid — 36px + gold ring + hover elevation */
.mc-swatches {
  gap: 8px;
  padding: 4px 6px 4px 2px;
}
.mc-swatch {
  border: 1.5px solid rgba(var(--accent-rgb), 0.16);
  box-shadow: 0 1px 2px rgba(13, 12, 10, 0.04);
  transition: transform 180ms var(--ease), box-shadow 200ms var(--ease),
              border-color 200ms var(--ease);
}
.mc-swatch:hover {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 6px 14px -2px rgba(var(--accent-rgb), 0.22),
              0 2px 4px rgba(13, 12, 10, 0.06);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.mc-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22),
              0 4px 12px -2px rgba(var(--accent-rgb), 0.34);
  transform: scale(1.06);
}
.mc-swatch.is-active::after {
  inset: 5px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px rgba(13, 12, 10, 0.12);
}

/* 3. Player row (Kadro) — premium hover + gold accent */
.mc-player-list {
  padding: 4px 2px;
}
.mc-player-list__head {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(13, 12, 10, 0.42);
  padding: 6px 6px 5px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(254,250,242,0.86) 100%);
}
.mc-player-row {
  padding: 5px 6px;
  border-radius: 6px;
  transition: background 160ms var(--ease), box-shadow 200ms var(--ease),
              border-color 200ms var(--ease);
  position: relative;
}
.mc-player-row:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.045) 0%, rgba(var(--accent-rgb), 0.025) 100%);
  box-shadow: 0 1px 3px rgba(13, 12, 10, 0.04);
}
.mc-player-row.is-active {
  border: none;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.04) 100%);
  box-shadow: inset 4px 0 0 var(--accent),
              0 2px 8px -2px rgba(var(--accent-rgb), 0.22);
  padding-left: 10px;
}
.mc-player-row--gk {
  background: linear-gradient(180deg, rgba(34,197,94,0.07) 0%, rgba(34,197,94,0.03) 100%);
}
.mc-player-row--gk:hover {
  background: linear-gradient(180deg, rgba(34,197,94,0.12) 0%, rgba(34,197,94,0.06) 100%);
}
.mc-player-row__gk {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: all 180ms var(--ease);
}
.mc-player-row__gk.is-active {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(22, 163, 74, 0.42);
}
/* Number badge premium tabular-nums */
.mc-player-row input[type="number"],
.mc-player-row__num,
.mc-player-row .mc-player-row__num-input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: 'SF Mono', 'Cascadia Mono', 'Menlo', Consolas, monospace;
  font-weight: 600;
  color: var(--accent);
}
.mc-player-row__del {
  opacity: 0;
  transition: opacity 180ms var(--ease), background 180ms var(--ease),
              transform 180ms var(--ease);
}
.mc-player-row:hover .mc-player-row__del {
  opacity: 0.42;
}
.mc-player-row .mc-player-row__del:hover {
  opacity: 1;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

/* 4. Sticky preview drawer (Step 3+) — KPI cards + gold gradient CTA */
.mc-preview-sticky-bar {
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(254,250,242,0.94) 100%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 -6px 18px rgba(13, 12, 10, 0.06),
              0 -1px 0 rgba(var(--accent-rgb), 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mc-preview-sticky-bar.is-ready {
  background: linear-gradient(180deg, rgba(220,252,231,0.55) 0%, rgba(254,250,242,0.96) 100%);
  border-top-color: rgba(5, 150, 105, 0.32);
}
.mc-preview-sticky-bar__status {
  gap: 4px;
}
.mc-preview-sticky-bar__status strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.mc-preview-sticky-bar__status small {
  font-size: 11.5px;
  color: rgba(13, 12, 10, 0.56);
}
.mc-cta--confirm {
  padding: 13px 28px;
  min-height: 48px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px -4px rgba(var(--accent-rgb), 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 200ms var(--ease), box-shadow 220ms var(--ease),
              filter 200ms var(--ease);
  position: relative;
  overflow: hidden;
}
.mc-cta--confirm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -4px rgba(var(--accent-rgb), 0.54),
              inset 0 1px 0 rgba(255, 255, 255, 0.24);
  filter: brightness(1.04);
}
.mc-cta--confirm:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.96);
}
@keyframes mc-cta-pulse {
  0%, 92%, 100% { box-shadow: 0 8px 22px -4px rgba(var(--accent-rgb), 0.42),
                              inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  96% { box-shadow: 0 12px 32px -4px rgba(var(--accent-rgb), 0.62),
                    0 0 0 6px rgba(var(--accent-rgb), 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.24); }
}
.mc-preview-sticky-bar.is-ready .mc-cta--confirm:not(:disabled) {
  animation: mc-cta-pulse 5s var(--ease) infinite;
}

/* 5. Mockup canvas polish — 3-layer shadow + premium card frame */
.mc-canvas__viewport {
  position: relative;
}
.mc-canvas__stage {
  border-radius: 14px;
  background: linear-gradient(180deg, #fefdf9 0%, #f8f6ef 100%);
  box-shadow: 0 2px 6px rgba(13, 12, 10, 0.04),
              0 8px 24px -6px rgba(13, 12, 10, 0.08),
              0 24px 48px -12px rgba(13, 12, 10, 0.12),
              inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.mc-view-toggle {
  padding: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(254,250,242,0.86) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 6px 18px -4px rgba(13, 12, 10, 0.10),
              inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.mc-view-toggle__btn {
  padding: 8px 22px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  transition: all 220ms var(--ease);
}
.mc-view-toggle__btn.is-active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(var(--accent-rgb), 0.42);
}
.mc-stage-zoom {
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(254,250,242,0.86) 100%);
  box-shadow: 0 6px 18px -4px rgba(13, 12, 10, 0.10),
              inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.mc-stage-zoom__btn {
  font-weight: 700;
  color: rgba(13, 12, 10, 0.7);
}
.mc-stage-zoom__btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
}
.mc-stage-zoom__btn--reset {
  color: var(--accent);
  font-weight: 800;
}

/* 6. Save draft indicator (gold accent fade) */
.mc-save-indicator,
.mc-prem-save-indicator {
  position: sticky;
  top: 12px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0.06) 100%);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease), transform 240ms var(--ease);
  pointer-events: none;
  z-index: 11;
}
.mc-save-indicator.is-visible,
.mc-prem-save-indicator.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.mc-save-indicator.is-offline,
.mc-prem-save-indicator.is-offline {
  background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(217,119,6,0.08) 100%);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.28);
}

/* 7. Confirm modal (Step 4) — premium gradient CTA + summary card */
.mc-modal__content--confirm,
.mc-modal[data-variant="confirm"] .mc-modal__content {
  background: linear-gradient(180deg, #ffffff 0%, #fefcf7 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 24px 64px -12px rgba(13, 12, 10, 0.28),
              0 8px 24px -8px rgba(var(--accent-rgb), 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 18px;
}
.mc-modal__title--confirm,
.mc-modal[data-variant="confirm"] .mc-modal__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0a1628;
}
.mc-confirm-summary {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(var(--accent-rgb), 0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
}
.mc-confirm-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.16);
  font-size: 13px;
}
.mc-confirm-summary__row:last-child {
  border-bottom: 0;
  padding-top: 11px;
  font-weight: 700;
  color: var(--accent);
  font-size: 14.5px;
}
.mc-confirm-summary__row strong { font-weight: 600; }

/* 8. Reduced motion + dark theme safety */
@media (prefers-reduced-motion: reduce) {
  .mc-preview-sticky-bar.is-ready .mc-cta--confirm:not(:disabled) { animation: none; }
  .mc-swatch, .mc-step__dot, .mc-player-row, .mc-cta--confirm,
  .mc-save-indicator, .mc-prem-save-indicator {
    transition: none !important;
  }
}
[data-theme="dark"] .mc-stepper {
  background: linear-gradient(180deg, rgba(19,19,24,0.96) 0%, rgba(11,11,13,0.92) 100%);
  border-bottom-color: rgba(var(--accent-rgb), 0.20);
}
[data-theme="dark"] .mc-step__dot {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--accent-rgb), 0.28);
  color: rgba(255, 255, 255, 0.42);
}
[data-theme="dark"] .mc-canvas__stage {
  background: linear-gradient(180deg, #1a1a20 0%, #131318 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
              0 8px 24px -6px rgba(0, 0, 0, 0.42),
              0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

/* 9. Mobile responsive guards */
@media (max-width: 600px) {
  .mc-stepper { padding: 12px 14px; }
  .mc-step { padding: 5px 8px; gap: 6px; }
  .mc-step__dot { width: 26px; height: 26px; font-size: 11px; }
  .mc-cta--confirm { padding: 11px 18px; font-size: 12px; min-height: 44px; }
  .mc-preview-sticky-bar { padding: 12px 14px; }
}
/* === D40-A-EDITOR-PREMIUM END === */

/* === v4053 detail-grade showcase mockup + compact wizard === */
body.motta-order-page .mc-grid__cards .mc-card__art {
  padding: 0;
  aspect-ratio: 823 / 1058;
  background: #fff;
}

body.motta-order-page .mc-grid__cards .mc-card__composite {
  width: min(96%, 360px);
  max-width: 96%;
  max-height: 96%;
  aspect-ratio: 823 / 1058;
  overflow: visible;
}

body.motta-order-page .mc-grid__cards .mc-card__composite-mockup,
body.motta-order-page .mc-grid__cards .mc-card:hover .mc-card__composite-mockup {
  z-index: 1;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
}

body.motta-order-page .mc-grid__cards .mc-card__composite-zone {
  z-index: 2;
  display: block !important;
  opacity: 1;
  mix-blend-mode: multiply;
  filter: contrast(1.04) saturate(0.96);
}

body.motta-order-page .mc-grid__cards .mc-card__composite-design {
  z-index: 3;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

body.motta-order-page .mc-grid__cards .mc-card__composite-shadow {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  opacity: var(--mc-shadow-opacity, 0.46);
  mix-blend-mode: multiply;
  filter: saturate(0.6);
}

body.motta-order-page .mc-grid__cards .mc-card:hover .mc-card__composite-svg,
body.motta-order-page .mc-grid__cards .mc-card:hover .mc-card__composite-design,
body.motta-order-page .mc-grid__cards .mc-card:hover .mc-card__composite-zone,
body.motta-order-page .mc-grid__cards .mc-card:hover .mc-card__composite-shadow {
  transform: none !important;
}

body.motta-order-page .mc-customize__canvas {
  max-width: none;
  flex: 1 1 auto;
}

@media (min-width: 601px) {
  body.motta-order-page .mc-cart-drawer.mc-order-workbench {
    flex: 0 0 clamp(320px, 18.6vw, 360px);
    flex-basis: clamp(320px, 18.6vw, 360px);
    width: clamp(320px, 18.6vw, 360px);
    max-width: 360px;
    transition: flex-basis 220ms ease, width 220ms ease, max-width 220ms ease;
  }

  body.motta-order-page .mc-cart-drawer.mc-order-workbench:not(.is-open) {
    flex-basis: 44px;
    width: 44px;
    max-width: 44px;
  }

  body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-cart-toggle {
    display: inline-flex;
    left: -30px;
    width: 30px;
    height: 58px;
  }

  body.motta-order-page .mc-cart-drawer.mc-order-workbench:not(.is-open) .mc-cart-drawer__body {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-cart-drawer__body {
  transition: opacity 180ms ease;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-order-panel {
  padding: 10px 12px;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-stepper {
  padding: 8px;
  gap: 4px;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-step {
  padding: 4px 6px;
  gap: 4px;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-step__label,
body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-wiz-panel__hint {
  display: none;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-wiz-panel__title {
  font-size: 13px;
  margin-bottom: 6px;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-wiz-nav {
  gap: 6px;
}

body.motta-order-page .mc-cart-drawer.mc-order-workbench .mc-wiz-nav button {
  min-height: 34px;
  padding: 7px 8px;
  font-size: 11px;
}

@media (max-width: 600px) {
  body.motta-order-page .mc-cart-drawer.mc-order-workbench {
    width: min(340px, 86vw);
    max-width: 86vw;
  }
}

/* === D54-FINAL-CASCADE-GUARD START === Keep D54 showroom stable after legacy mobile/order overrides. */
@media (min-width: 601px) {
  body.motta-order-page .mc-cart-drawer.mc-order-workbench.is-multi-kit {
    flex: 0 0 clamp(218px, 13vw, 248px);
    flex-basis: clamp(218px, 13vw, 248px);
    width: clamp(218px, 13vw, 248px);
    max-width: 248px;
  }
  body.motta-order-page .mc-cart-drawer.mc-order-workbench.is-single-top {
    flex: 0 0 clamp(300px, 18vw, 340px);
    flex-basis: clamp(300px, 18vw, 340px);
    width: clamp(300px, 18vw, 340px);
    max-width: 340px;
  }
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--forma .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--sort .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--corap .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--esofman-ust .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--esofman-alt .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-forma .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-sort .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-corap .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-esofman .mc-kit-studio__stage,
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece--slot-pantolon .mc-kit-studio__stage {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058) !important;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece {
  transform: none !important;
}
.mc-kit-studio[data-kit-layout="d48"] .mc-kit-studio__piece.is-dimmed {
  transform: none !important;
}
@media (max-width: 600px) {
  .mc-kit-studio[data-kit-layout="d48"] {
    grid-template-columns: .72fr 1fr !important;
    grid-template-areas:
      "gk gk"
      "forma esofman"
      "corap sort"
      "pantolon pantolon" !important;
  }
  .mc-kit-studio__piece--slot-forma .mc-kit-studio__frame,
  .mc-kit-studio__piece--slot-esofman .mc-kit-studio__frame {
    width: min(82%, 122px);
  }
}
/* === D54-FINAL-CASCADE-GUARD END === */

/* === D49-STICKY-CTA START === Kalıcı alt bar: canlı fiyat + birincil CTA (Nike By You / owayo standardı)
   Masaüstünde editör paneline yapışık; mobilde viewport altına sabitlenir. Mevcut --accent token'ı kullanılır. */
.mc-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.97) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -6px 22px rgba(15, 23, 42, 0.08);
}
.mc-sticky-cta__price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mc-sticky-cta__price-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.mc-sticky-cta__total {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.mc-sticky-cta__calc,
.mc-sticky-cta__hint {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}
.mc-sticky-cta__block {
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  max-width: 52vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-sticky-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #c9a24d) 0%, #b45309 100%);
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.32);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.mc-sticky-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(180, 83, 9, 0.40);
}
.mc-sticky-cta__btn:active { transform: translateY(0); }
.mc-sticky-cta__btn-arrow { font-size: 17px; line-height: 1; }
.mc-sticky-cta.is-disabled .mc-sticky-cta__btn,
.mc-sticky-cta__btn:disabled {
  background: #d1d5db;
  color: #f9fafb;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .mc-sticky-cta { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mc-sticky-cta__btn { transition: none; }
  .mc-sticky-cta__btn:hover { transform: none; }
}
@media (max-width: 600px) {
  .mc-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .mc-sticky-cta__total { font-size: 19px; }
  .mc-sticky-cta__btn { padding: 12px 20px; font-size: 14px; }
  .mc-sticky-cta__block { max-width: 44vw; }
}
.mc-sticky-cta__save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 11px 16px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mc-sticky-cta__save:hover {
  background: #fff;
  border-color: rgba(201, 162, 77, 0.6);
  transform: translateY(-1px);
}
.mc-sticky-cta__save:active { transform: translateY(0); }
@media (max-width: 600px) {
  .mc-sticky-cta__save span { display: none; }
  .mc-sticky-cta__save { padding: 10px 12px; }
}
/* === D49-STICKY-CTA END === */

/* === D70-STOREFRONT-PREMIUM-REVIEW START ===
   Kullanıcı görselinde karalanan alt karmaşa kaldırıldı: kit showroom'da SET/zoom/undo barı JS'te
   render edilmiyor; CTA tam genişlik footer olmak yerine sağ sipariş panelinin alt aksiyon alanı gibi davranır. */
@media (min-width: 901px) {
  body.motta-order-page .mc-mode--kit-studio .mc-customize {
    height: calc(100dvh - 66px);
    min-height: 0;
    overflow: hidden;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-customize__canvas {
    padding-bottom: 0 !important;
    min-width: 0;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-canvas__viewport.is-kit-studio {
    padding-bottom: 10px !important;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-canvas__viewport.is-kit-studio .mc-canvas__zoom-wrap {
    min-height: 0;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta {
    left: auto;
    right: 0;
    bottom: 0;
    width: clamp(286px, 18vw, 340px);
    min-height: 68px;
    gap: 8px;
    padding: 10px 10px 10px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px 0 0 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.07);
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__price {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__price-label {
    font-size: 9px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__total {
    font-size: 17px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__calc,
  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__hint,
  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__block,
  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__saved {
    max-width: 138px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__save {
    min-height: 42px;
    margin-left: 0;
    padding: 0 12px;
    border-radius: 12px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__save span {
    display: none;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta__btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    font-size: 13px;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  body.motta-order-page .mc-mode--kit-studio .mc-customize {
    height: calc(100dvh - 56px);
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero {
    gap: 8px;
    padding-bottom: 8px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-strip--grouped {
    padding-bottom: 4px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-sticky-cta {
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* === D70-STOREFRONT-PREMIUM-REVIEW END === */

/* === D49-PREMIUM-50 START === Showroom sahne (radial gold-tint + frame glow + quick button cila) — Tesla/Nike By You hissi */
.mc-kit-studio[data-kit-layout="d48"] { position: relative; }
.mc-kit-studio[data-kit-layout="d48"]::after {
  content: '';
  position: absolute;
  inset: -10% -8% -4% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 48% at 50% 42%, rgba(201, 162, 77, 0.14) 0%, rgba(201, 162, 77, 0.06) 36%, transparent 72%),
    radial-gradient(ellipse 70% 28% at 50% 96%, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.04) 40%, transparent 70%);
  filter: blur(0.5px);
}
.mc-kit-studio[data-kit-layout="d48"] > * { position: relative; z-index: 1; }
/* Focused parça çerçevesine derin altın halo — hero hissi */
.mc-kit-studio.mc-d49-focus-grow[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused .mc-kit-studio__frame {
  box-shadow:
    0 0 0 3px rgba(201, 162, 77, 0.55),
    0 0 0 10px rgba(201, 162, 77, 0.12),
    0 28px 64px rgba(143, 106, 35, 0.28),
    0 8px 24px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}
body.motta-order-page[data-theme="dark"] .mc-kit-studio[data-kit-layout="d48"]::after {
  background:
    radial-gradient(ellipse 56% 48% at 50% 42%, rgba(201, 162, 77, 0.18) 0%, rgba(201, 162, 77, 0.07) 36%, transparent 72%),
    radial-gradient(ellipse 70% 28% at 50% 96%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.12) 40%, transparent 70%);
}
/* + Kaleci TK / + Eşofman TK premium gold-accent */
.mc-kit-studio__quick button {
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(252,247,234,0.62) 100%) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.92) !important;
  transition: transform 200ms cubic-bezier(0.34, 1.2, 0.45, 1), border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important;
}
.mc-kit-studio__quick button:hover,
.mc-kit-studio__quick button:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(201,162,77,0.78) !important;
  background: linear-gradient(180deg, #fff 0%, rgba(252,247,234,0.92) 100%) !important;
  box-shadow: 0 16px 36px rgba(143,106,35,0.18), 0 4px 12px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}
.mc-kit-studio__quick span {
  background: linear-gradient(135deg, rgba(201,162,77,0.20) 0%, rgba(201,162,77,0.10) 100%) !important;
  color: #7a5a1e !important;
}
/* === D49-PREMIUM-50 END === */

/* === D49-PREMIUM-PAGE START === Sipariş tasarım sayfası premium katman: stepper + sahne ambiyansı + AKTİF PARÇA + boş slot cila */

/* Canvas viewport ambient — showroom gradient'i tüm editör alanına genişlet */
.mc-canvas__viewport {
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, rgba(201, 162, 77, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 25% at 50% 100%, rgba(15, 23, 42, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, rgba(252, 248, 240, 0.55) 0%, rgba(248, 247, 244, 0.88) 100%);
}
body.motta-order-page[data-theme="dark"] .mc-canvas__viewport {
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, rgba(201, 162, 77, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 25% at 50% 100%, rgba(0, 0, 0, 0.30) 0%, transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%);
}

/* Premium stepper — etiketler hep görünür + altın connector + aktif pulse */
.mc-step__label {
  display: inline !important;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(15, 23, 42, 0.65);
  transition: color 200ms ease;
}
.mc-step.is-current .mc-step__label { color: #7a5a1e !important; font-weight: 950; }
.mc-step.is-done .mc-step__label { color: #15803d; }
.mc-step.is-warning .mc-step__label { color: #b45309; }
.mc-step__connector {
  flex: 0 0 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 162, 77, 0.28) 0%, rgba(201, 162, 77, 0.55) 50%, rgba(201, 162, 77, 0.28) 100%);
  margin: 0 4px;
  border-radius: 2px;
  align-self: center;
}
@keyframes d49-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 77, 0.40); }
  50% { box-shadow: 0 0 0 6px rgba(201, 162, 77, 0); }
}
.mc-step.is-current .mc-step__dot {
  animation: d49-pulse-gold 1800ms ease-out infinite;
  background: linear-gradient(135deg, #c9a24d 0%, #b45309 100%) !important;
  color: #fff !important;
  border: 0 !important;
}
@media (max-width: 600px) {
  .mc-step__label { display: none !important; }
  .mc-step.is-current .mc-step__label { display: inline !important; font-size: 11px; }
  .mc-step__connector { flex: 0 0 16px; }
}

/* AKTİF PARÇA work-summary kartı premium kenar */
.mc-d54-work-summary {
  border: 1px solid rgba(201, 162, 77, 0.30) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(252, 248, 240, 0.92) 100%) !important;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(143, 106, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  border-radius: 16px !important;
}
.mc-d54-work-summary h4 { letter-spacing: -0.01em; font-weight: 900; }
.mc-d54-summary__eyebrow { color: #7a5a1e !important; font-weight: 950; letter-spacing: 0.06em; }
.mc-d54-summary__pill.is-gk {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.10) 100%) !important;
  color: #166534 !important;
  border: 1px solid rgba(34, 197, 94, 0.30);
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Boş piece slot ("SEÇ") premium placeholder */
.mc-kit-studio__placeholder {
  border: 1px dashed rgba(201, 162, 77, 0.45) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(252, 248, 240, 0.32) 100%) !important;
  transition: transform 220ms cubic-bezier(0.34, 1.2, 0.45, 1), border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease !important;
}
.mc-kit-studio__placeholder:hover,
.mc-kit-studio__placeholder:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(201, 162, 77, 0.80) !important;
  background: linear-gradient(180deg, #fff 0%, rgba(252, 248, 240, 0.88) 100%) !important;
  box-shadow: 0 18px 38px rgba(143, 106, 35, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  opacity: 1 !important;
}
.mc-kit-studio__placeholder-icon {
  background: linear-gradient(135deg, rgba(201, 162, 77, 0.22) 0%, rgba(201, 162, 77, 0.12) 100%) !important;
  color: #8f6a23 !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 4px 10px rgba(143, 106, 35, 0.12) !important;
}
/* === D49-PREMIUM-PAGE END === */

/* === D49-A6-OVERLAY START === Mockup zone marker premium cila — altın halka + soft shadow
   CSS-only; marker geometrisi/konumu değişmez. Mevcut .mc-marker.is-prem-overlay ile uyumlu, gold accent #c9a24d. */
/* Aktif/açık marker (popover açık) — belirgin altın halka + yumuşak gölge */
.mc-marker--sponsor.is-prem-overlay.is-open .mc-marker__outline,
.mc-marker--logo.is-prem-overlay.is-open .mc-marker__outline,
.mc-marker--number.is-prem-overlay.is-open .mc-marker__outline,
.mc-marker--name.is-prem-overlay.is-open .mc-marker__outline {
  stroke: #c9a24d;
  stroke-width: 2.6;
  fill: rgba(201, 162, 77, 0.10);
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.92))
          drop-shadow(0 2px 10px rgba(201, 162, 77, 0.45))
          drop-shadow(0 8px 22px rgba(15, 23, 42, 0.28));
}
/* Değer girilmiş marker (isim/numara/logo dolu) — yumuşak altın onay halkası */
.mc-marker--sponsor.is-prem-overlay.has-value .mc-marker__outline,
.mc-marker--logo.is-prem-overlay.has-value .mc-marker__outline,
.mc-marker--number.is-prem-overlay.has-value .mc-marker__outline,
.mc-marker--name.is-prem-overlay.has-value .mc-marker__outline {
  stroke: rgba(201, 162, 77, 0.92);
  stroke-dasharray: none;
  fill: rgba(201, 162, 77, 0.06);
}
/* İçerik ikon glyph'i hover/aktifte altın tona kayar */
.mc-marker.is-prem-overlay.is-open .mc-marker__icon-glyph,
.mc-marker.is-prem-overlay:hover .mc-marker__icon-glyph {
  color: #c9a24d;
}
/* Köşe etiketi aktifte daha okunur + altın vurgulu */
.mc-marker.is-prem-overlay.is-open .mc-marker__corner-tag {
  fill: #c9a24d;
  stroke: rgba(23, 21, 18, 0.92);
}
@media (prefers-reduced-motion: reduce) {
  .mc-marker.is-prem-overlay .mc-marker__outline { transition: none; }
}
/* === D49-A6-OVERLAY END === */

/* === D49-UX-1 START === Disabled CTA hover ipucu + dikkat-çek pulse */
.mc-sticky-cta.is-disabled .mc-sticky-cta__btn { cursor: not-allowed; }
.mc-sticky-cta.is-disabled .mc-sticky-cta__btn[title]:hover {
  /* tarayıcı native title tooltip'i çıkar — ekstra stil yok */
  opacity: 0.95;
}
.mc-sticky-cta.is-disabled .mc-sticky-cta__block {
  animation: mc-ux1-attn 2.4s ease-in-out infinite;
}
@keyframes mc-ux1-attn {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-sticky-cta.is-disabled .mc-sticky-cta__block { animation: none; }
}
/* === D49-UX-1 END === */

/* === D49-UX-2 START === Otomatik kaydedildi indicator */
.mc-sticky-cta__saved {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #15803d;
  white-space: nowrap;
  max-width: 52vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .mc-sticky-cta__saved { max-width: 44vw; font-size: 10.5px; }
}
/* === D49-UX-2 END === */

/* === D49-UX-3 START === Sponsor popover VEYA divider */
.mc-pop-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
}
.mc-pop-divider::before,
.mc-pop-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 77, 0) 0%, rgba(201, 162, 77, 0.42) 50%, rgba(201, 162, 77, 0) 100%);
}
.mc-pop-divider > span {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #c9a24d;
  text-transform: uppercase;
}
/* === D49-UX-3 END === */

/* === D49-UX2-3 START === Kadro isim input genişliği — Türkçe isim (MEHMET YILDIZ ~13ch) sığsın
   Cart paneli dar (~195px) — name kolonuna en geniş payı veriyoruz, beden/no sabit küçük tutuluyor. */
.mc-player-row__name {
  min-width: 0;
  width: 100%;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 12px;
  letter-spacing: 0;
  text-overflow: ellipsis;
}
.mc-player-row__name::placeholder { font-size: 11px; }
/* AKTİF satırda font biraz daha küçülsün ki uzun isim de tam sığsın */
.mc-player-row.is-active .mc-player-row__name { font-size: 11.5px; }
/* Grid template: ÜST (beden) küçük, name geniş, NO küçük, GK toggle minimal */
.mc-player-list[data-col-mode="name"] .mc-player-row { grid-template-columns: 2.2em 1fr 22px; }
.mc-player-list[data-col-mode="name-num"] .mc-player-row { grid-template-columns: 2.2em 1fr 2.4em 22px; }
.mc-player-list[data-col-mode="name-short"] .mc-player-row { grid-template-columns: 2.2em 2.8em 1fr 22px; }
.mc-player-list[data-col-mode="full"] .mc-player-row { grid-template-columns: 2.2em 2.8em 1fr 2.4em 22px; }
.mc-player-list[data-col-mode="minimal"] .mc-player-row { grid-template-columns: 1.6em 1fr 22px; }
.mc-player-list[data-col-mode="num"] .mc-player-row { grid-template-columns: 1.6em 1fr 2.4em 22px; }
.mc-player-list[data-col-mode="short"] .mc-player-row { grid-template-columns: 1.6em 1fr 2.8em 22px; }
.mc-player-list[data-col-mode="short-num"] .mc-player-row { grid-template-columns: 1.6em 1fr 2.8em 2.4em 22px; }
/* === D49-UX2-3 END === */

/* === D49-UX2-4 START === Aktif Parça kart "Görünüm" satırı (eski "Yüz") — eye icon hizası */
.mc-d54-summary__view-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 4px;
  color: rgba(13, 12, 10, 0.55);
}
/* === D49-UX2-4 END === */

/* === D49-UX2-5 START === Cursor:pointer ipuçları — kullanıcı tıklanabilir satırları tanısın */
.mc-spec-zone {
  cursor: pointer;
}
.mc-spec-zone[data-d49-static="1"] {
  cursor: default;
}
.mc-spec-zone:hover {
  background: rgba(13, 12, 10, 0.025);
  border-radius: 7px;
}
.mc-spec-zone__label,
.mc-spec-zone__value,
.mc-spec-zone__icon {
  pointer-events: none;
}
.mc-zone-upload-cta {
  pointer-events: auto;
  cursor: pointer;
}
[data-font-popover],
[data-spec-zone],
[data-mc-zone-upload],
[data-action="open-sponsor-upload"],
[data-action="open-logo-upload"] {
  cursor: pointer;
}
/* === D49-UX2-5 END === */

/* === D50-B-PREVIEW-POLISH START === Premium polish on existing preview modal */
/* Showroom ambient — warm radial glow on preview backdrop */
.mc-preview-premium {
  position: relative;
  isolation: isolate;
  padding-top: 32px;
  padding-bottom: 56px;
}
.mc-preview-premium::before {
  content: '';
  position: absolute;
  inset: -24px -32px 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 162, 77, 0.12) 0%, rgba(201, 162, 77, 0) 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0) 70%);
  pointer-events: none;
}
[data-theme="dark"] .mc-preview-premium::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(214, 180, 117, 0.18) 0%, rgba(214, 180, 117, 0) 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Ready chip — Hazır rozet */
.mc-preview-premium__ready-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  margin: 0 0 10px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #15803d;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0.06) 100%);
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(34, 197, 94, 0.12);
  animation: mcppPolishFadeIn 480ms var(--mcpp-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
.mc-preview-premium__ready-chip--wait {
  color: var(--mcpp-gold-deep, #b45309);
  background: var(--mcpp-gold-soft, rgba(201, 162, 77, 0.12));
  border-color: rgba(201, 162, 77, 0.4);
  box-shadow: 0 1px 2px rgba(201, 162, 77, 0.12);
}
[data-theme="dark"] .mc-preview-premium__ready-chip {
  color: #4ade80;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%);
}
.mc-preview-premium__ready-chip svg {
  flex-shrink: 0;
}
@keyframes mcppPolishFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Premium KPI tiles — gold ring + bigger numbers */
.mc-preview-premium__kpi {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.7) 0%, rgba(255, 255, 255, 0.85) 100%);
  border: 1px solid var(--mcpp-line, #e2e8f0);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
[data-theme="dark"] .mc-preview-premium__kpi {
  background: linear-gradient(135deg, rgba(26, 26, 32, 0.6) 0%, rgba(20, 20, 26, 0.85) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.mc-preview-premium__kpi-cell {
  position: relative;
  padding: 28px 16px 26px;
  background: transparent;
}
.mc-preview-premium__kpi-cell + .mc-preview-premium__kpi-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--mcpp-line, #e2e8f0) 50%, transparent 100%);
}
.mc-preview-premium__kpi-label {
  font-size: 10px;
  letter-spacing: 2.2px;
  font-weight: 700;
  color: var(--mcpp-ink-faint, #94a3b8);
}
.mc-preview-premium__kpi-value {
  font-size: 38px;
  background: linear-gradient(180deg, var(--mcpp-ink, #0a1628) 0%, var(--mcpp-gold-deep, #b45309) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--mcpp-ink, #0a1628);
}
.mc-preview-premium__kpi-value--sm {
  font-size: 20px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--mcpp-ink, #0a1628);
}
[data-theme="dark"] .mc-preview-premium__kpi-value--sm {
  color: var(--mcpp-ink, #f5f3ef);
}

/* Hero card per piece — larger thumb, gold ring on hover */
.mc-preview-premium__breakdown-row--hero {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 18px;
  background: var(--mcpp-bg-card, #fff);
  border: 1px solid var(--mcpp-line, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 240ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 12px;
}
.mc-preview-premium__breakdown-row--hero:hover {
  transform: translateY(-2px);
  border-color: var(--mcpp-gold, #c9a24d);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.10),
    0 0 0 1px var(--mcpp-gold, #c9a24d) inset;
}
.mc-preview-premium__breakdown-thumb--hero {
  width: 120px;
  height: 152px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5) 0%, rgba(244, 241, 234, 0.7) 100%),
    var(--mcpp-bg, #f8fafc);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 77, 0.18),
    0 6px 14px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
[data-theme="dark"] .mc-preview-premium__breakdown-thumb--hero {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.04) 0%, rgba(31, 31, 38, 0.7) 100%),
    var(--mcpp-bg, #131318);
  box-shadow:
    inset 0 0 0 1px rgba(214, 180, 117, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.4);
}
.mc-preview-premium__breakdown-thumb--hero .mc-preview-premium__breakdown-thumb-img,
.mc-preview-premium__breakdown-thumb--hero .mc-preview-premium__breakdown-thumb-svg {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.10));
}

/* Skeleton shimmer + loading label */
.mc-preview-premium__skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(201, 162, 77, 0.14) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: mcppShimmer 1.6s linear infinite;
  pointer-events: none;
}
@keyframes mcppShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.mc-preview-premium__breakdown-loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: 0 8px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--mcpp-ink-mute, #475569);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .mc-preview-premium__breakdown-loading {
  color: var(--mcpp-ink, #f5f3ef);
  background: rgba(26, 26, 32, 0.85);
}

/* Premium title bar inside piece card */
.mc-preview-premium__breakdown-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mc-preview-premium__breakdown-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mc-preview-premium__breakdown-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mcpp-gold-deep, #b45309);
}
.mc-preview-premium__breakdown-row--hero .mc-preview-premium__breakdown-name {
  font-family: var(--mcpp-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mcpp-ink, #0a1628);
  margin: 0;
  line-height: 1.2;
}
.mc-preview-premium__breakdown-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--mcpp-gold-deep, #b45309);
  background: var(--mcpp-bg, #f8fafc);
  border: 1px solid var(--mcpp-gold, #c9a24d);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mc-preview-premium__breakdown-edit:hover {
  background: linear-gradient(135deg, var(--mcpp-gold, #c9a24d) 0%, var(--mcpp-gold-deep, #b45309) 100%);
  color: #fff;
  transform: translateY(-1px);
}
.mc-preview-premium__breakdown-edit:active {
  transform: translateY(0);
}
.mc-preview-premium__breakdown-edit svg {
  flex-shrink: 0;
}

/* Trust strip at footer */
.mc-preview-premium__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 16px 18px;
  margin: 8px auto 0;
  max-width: 640px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mcpp-ink-mute, #475569);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 250, 252, 0.7) 100%);
  border: 1px solid var(--mcpp-line, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
[data-theme="dark"] .mc-preview-premium__trust {
  background: linear-gradient(180deg, rgba(26, 26, 32, 0.4) 0%, rgba(20, 20, 26, 0.7) 100%);
  color: var(--mcpp-ink-mute, #cbd5e1);
}
.mc-preview-premium__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mc-preview-premium__trust-item svg {
  color: var(--mcpp-gold-deep, #b45309);
  flex-shrink: 0;
}
.mc-preview-premium__trust-sep {
  color: var(--mcpp-ink-faint, #94a3b8);
  user-select: none;
}

/* Premium sticky CTA bar — match D49 customizer style */
.mc-preview-sticky-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
  border-top: 1px solid rgba(201, 162, 77, 0.28);
  box-shadow:
    0 -8px 24px rgba(15, 23, 42, 0.06),
    0 -1px 0 rgba(255, 255, 255, 0.4) inset;
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .mc-preview-sticky-bar {
  background: linear-gradient(180deg, rgba(26, 26, 32, 0.94) 0%, rgba(19, 19, 24, 0.98) 100%);
  border-top-color: rgba(214, 180, 117, 0.3);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}
.mc-preview-sticky-bar.is-ready {
  background: linear-gradient(180deg, rgba(254, 252, 246, 0.98) 0%, rgba(254, 243, 199, 0.55) 100%);
  border-top-color: var(--mcpp-gold, #c9a24d);
}
.mc-preview-sticky-bar .mc-cta--confirm {
  background: linear-gradient(135deg, var(--mcpp-gold, #c9a24d) 0%, var(--mcpp-gold-deep, #b45309) 100%);
  color: #fff;
  border: 1px solid var(--mcpp-gold-deep, #b45309);
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px rgba(201, 162, 77, 0.32);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mc-preview-sticky-bar .mc-cta--confirm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 162, 77, 0.42);
}
.mc-preview-sticky-bar .mc-cta--confirm:disabled {
  background: var(--mcpp-line, #e2e8f0);
  color: var(--mcpp-ink-faint, #94a3b8);
  border-color: var(--mcpp-line, #e2e8f0);
  box-shadow: none;
}

/* Responsive: mobile collapse hero cards to vertical */
@media (max-width: 600px) {
  .mc-preview-premium__breakdown-row--hero {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }
  .mc-preview-premium__breakdown-thumb--hero {
    width: 88px;
    height: 116px;
  }
  .mc-preview-premium__breakdown-row--hero .mc-preview-premium__breakdown-name {
    font-size: 15px;
  }
  .mc-preview-premium__kpi-value {
    font-size: 28px;
  }
  .mc-preview-premium__trust {
    padding: 12px 14px;
    font-size: 11px;
    gap: 6px 10px;
  }
}
/* === D50-B-PREVIEW-POLISH END === */

/* === D50-A-GRID-2 START === Premium ambient warm radial gradient on grid surface
   Grid panel arka plani yumusak altin tonlu radial — customizer ile esitlenmis premium ambiance */
.mc-mode[data-mode="grid"] {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(201, 162, 77, 0.05) 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 100%, rgba(201, 162, 77, 0.035) 0%, transparent 55%);
}
body.motta-order-page[data-theme="dark"] .mc-mode[data-mode="grid"] {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(202, 160, 90, 0.08) 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 100%, rgba(202, 160, 90, 0.05) 0%, transparent 55%);
}
/* === D50-A-GRID-2 END === */

/* === D50-A-GRID-3 START === Premium card hover refinement
   D38-Dalga 5: kart sabit, ic mockup scale 1.06 korunur. D50-A: gold ring + derin golge premium hissi */
.mc-grid__cards .mc-card {
  transition:
    transform 320ms var(--ease-out-expo, var(--ease)),
    box-shadow 380ms var(--ease-out-expo, var(--ease)),
    border-color 280ms var(--ease);
}
.mc-grid__cards .mc-card:hover {
  box-shadow:
    0 22px 44px -14px rgba(154, 122, 62, 0.22),
    0 6px 14px -4px rgba(13, 12, 10, 0.10),
    0 0 0 1px var(--accent);
}
body.motta-order-page[data-theme="dark"] .mc-grid__cards .mc-card:hover {
  box-shadow:
    0 22px 44px -14px rgba(202, 160, 90, 0.35),
    0 6px 14px -4px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--accent);
}
/* === D50-A-GRID-3 END === */

/* === D50-A-GRID-4 START === Premium toolbar — category chips + count refinement
   Active chip aldigi solid arkaplan zaten guzel; biz soft halo + lift ekleyerek premium hissi veriyoruz */
.mc-cat-chips {
  padding-bottom: 10px;
}
.mc-cat-chip {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    border-color 200ms var(--ease),
    color 200ms var(--ease),
    background 200ms var(--ease),
    box-shadow 220ms var(--ease),
    transform 180ms var(--ease);
}
.mc-cat-chip:hover {
  transform: translateY(-1px);
}
.mc-cat-chip.is-active {
  box-shadow: 0 4px 12px -4px rgba(154, 122, 62, 0.45);
}
body.motta-order-page[data-theme="dark"] .mc-cat-chip.is-active {
  box-shadow: 0 4px 12px -4px rgba(202, 160, 90, 0.55);
}
/* Grid count label — premium quiet typography */
.mc-grid__count {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.55;
}
/* === D50-A-GRID-4 END === */

/* === D50-A-GRID-5 START === Skeleton card premium quiet polish
   D38-Dalga 4 skeleton anim'i kaldirdi — burada placeholder kartlari'na ince altin border + soft gradient
   ekleyerek "intentional" yuklenme gostergesi olarak konumlandiriyoruz (broken degil) */
.mc-skeleton-grid > * {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 245, 238, 0.92) 100%);
  border: 1px solid rgba(154, 122, 62, 0.08);
  box-shadow: 0 2px 8px -2px rgba(13, 12, 10, 0.04);
}
body.motta-order-page[data-theme="dark"] .mc-skeleton-grid > * {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(202, 160, 90, 0.10);
}
/* === D50-A-GRID-5 END === */

/* === D50-A-GRID-6 START === Card meta footer premium refinement
   Hover'da fiyat + cta arasi soft gold divider beliriyor — inceltilmis detay */
.mc-card__meta {
  position: relative;
}
.mc-card__meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(154, 122, 62, 0.18) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}
.mc-card:hover .mc-card__meta::before {
  opacity: 1;
}
.mc-card__name {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mc-card__price {
  font-weight: 700;
  color: var(--ink);
}
.mc-card__price small {
  font-weight: 500;
  color: var(--ink-faint);
  margin-left: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
/* === D50-A-GRID-6 END === */

/* === D50-A-GRID-7 START === Card "Tasarla →" CTA premium reveal — arrow micro-motion on hover */
.mc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--accent);
  transition: color 220ms var(--ease);
}
.mc-card__cta > [aria-hidden] {
  display: inline-block;
  transition: transform 280ms var(--ease-spring, var(--ease));
}
.mc-card:hover .mc-card__cta {
  color: var(--accent-bright, var(--accent));
}
.mc-card:hover .mc-card__cta > [aria-hidden] {
  transform: translateX(4px);
}
/* === D50-A-GRID-7 END === */

/* === D50-A-GRID-8 START === Premium grid toolbar layout
   D50-A: toolbar ust border + nefes alanli spacing; search/sort/view-mode focus halo standartlasiyor */
.mc-grid__toolbar {
  padding: 6px 0 14px;
  gap: 14px;
  border-bottom: 1px solid rgba(154, 122, 62, 0.10);
  margin-bottom: 14px;
}
body.motta-order-page[data-theme="dark"] .mc-grid__toolbar {
  border-bottom-color: rgba(202, 160, 90, 0.14);
}
.mc-search__input:focus {
  box-shadow: 0 0 0 3px var(--accent-faint, rgba(201, 162, 77, 0.14));
}
.mc-sort-select:focus {
  box-shadow: 0 0 0 3px var(--accent-faint, rgba(201, 162, 77, 0.14));
}
.mc-view-mode.is-active {
  box-shadow: 0 2px 6px -2px rgba(154, 122, 62, 0.28);
}
body.motta-order-page[data-theme="dark"] .mc-view-mode.is-active {
  box-shadow: 0 2px 6px -2px rgba(202, 160, 90, 0.38);
}
/* === D50-A-GRID-8 END === */

/* === D51-CHECKOUT-PAYMENT-STEP START === */
/* D51 — Premium ödeme adımı (Step 5): hero + 3-method picker + KPI summary + trust strip + sticky CTA.
   Reuse premium tokens (.mc-cta, --accent gold). Tüm card states aria-pressed driven. */

.mc-order-panel--payment {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 22px;
}

.mc-pay-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(15, 17, 25, 0.08);
}
.mc-pay-hero__eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a87f2a;
}
.mc-pay-hero__title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: #0f1119;
  letter-spacing: -0.005em;
}
.mc-pay-hero__desc {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.5;
  max-width: 480px;
}
.mc-pay-hero__status {
  margin-top: 4px;
}

/* KPI summary block */
.mc-pay-summary {
  background:
    radial-gradient(ellipse at top right, rgba(195, 155, 58, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fdfbf6 100%);
  border: 1px solid rgba(195, 155, 58, 0.20);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: 0 4px 14px rgba(15, 17, 25, 0.04);
}
.mc-pay-summary__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mc-pay-summary__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}
.mc-pay-summary__value {
  font-size: 22px;
  font-weight: 800;
  color: #0f1119;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mc-pay-summary__value--gold {
  color: #a87f2a;
  font-size: 26px;
}
.mc-pay-summary__value--sm {
  font-size: 14px;
  font-weight: 600;
  color: #1a1d27;
}
.mc-pay-summary__divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 17, 25, 0.10) 50%, transparent 100%);
}

/* 3-method picker cards */
.mc-pay-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mc-pay-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 22px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 2px solid rgba(15, 17, 25, 0.08);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.mc-pay-card:hover {
  border-color: rgba(195, 155, 58, 0.40);
  background: #fdfbf6;
}
.mc-pay-card:focus-visible {
  outline: 2px solid #0f1119;
  outline-offset: 2px;
}
.mc-pay-card.is-selected {
  border-color: #c39b3a;
  background: #fdfbf6;
  box-shadow:
    0 0 0 3px rgba(195, 155, 58, 0.16),
    0 6px 18px rgba(168, 127, 42, 0.10);
}
.mc-pay-card__icon {
  width: 56px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(195, 155, 58, 0.14) 0%, rgba(168, 127, 42, 0.08) 100%);
  color: #a87f2a;
  flex-shrink: 0;
}
.mc-pay-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mc-pay-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f1119;
  letter-spacing: -0.005em;
}
.mc-pay-card__desc {
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.005em;
}
.mc-pay-card__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(15, 17, 25, 0.14);
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.mc-pay-card.is-selected .mc-pay-card__check {
  border-color: #c39b3a;
  background: #c39b3a;
}
.mc-pay-card.is-selected .mc-pay-card__check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  color: #ffffff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 7 6 10 11 4'/></svg>") center/12px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 7 6 10 11 4'/></svg>") center/12px no-repeat;
}

/* Trust strip */
.mc-pay-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 12px 14px;
  font-size: 11px;
  color: #6b7280;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.mc-pay-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-pay-trust__dot {
  width: 12px;
  height: 12px;
  background: currentColor;
  color: #15803d;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 1.4l3.6 1.6v4c0 1.8-1.5 3.2-3.6 4-2.1-.8-3.6-2.2-3.6-4v-4L6 1.4z'/><path d='M4.2 6l1.4 1.4L8.4 4.6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 1.4l3.6 1.6v4c0 1.8-1.5 3.2-3.6 4-2.1-.8-3.6-2.2-3.6-4v-4L6 1.4z'/><path d='M4.2 6l1.4 1.4L8.4 4.6'/></svg>") center/contain no-repeat;
}

/* Sticky-ish action row */
.mc-pay-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 17, 25, 0.06);
}
.mc-pay-actions .mc-wiz-prev {
  flex-shrink: 0;
}
.mc-pay-actions .mc-cta--confirm {
  flex: 1;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c39b3a 0%, #a87f2a 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(168, 127, 42, 0.22);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.mc-pay-actions .mc-cta--confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(168, 127, 42, 0.38);
}
.mc-pay-actions .mc-cta--confirm:focus-visible {
  outline: 2px solid #0f1119;
  outline-offset: 2px;
}

/* Mobile */
@media (max-width: 640px) {
  .mc-pay-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .mc-pay-summary__divider {
    display: none;
  }
  .mc-pay-card {
    grid-template-columns: 44px 1fr 20px;
    padding: 14px 16px;
    gap: 12px;
  }
  .mc-pay-card__icon {
    width: 44px;
    height: 36px;
  }
  .mc-pay-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
/* === D51-CHECKOUT-PAYMENT-STEP END === */

/* === D52-MOBILE-POPOVERS START === Sponsor + font popover narrow-viewport polish (<=420px) */
@media (max-width: 420px) {
  /* Sponsor / logo / image popover: center it, fit the screen, allow internal scroll */
  .mc-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 64px);
    z-index: 1200;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  }
  /* Font picker: same centering treatment so it never clips off the right edge */
  .mc-font-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 64px);
  }
  /* Touch-target: close button at minimum 40x40 */
  .mc-popover__close,
  .mc-font-popover__close {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* === D52-MOBILE-POPOVERS END === */

/* === D52-MOBILE-FOOTBAR START === Floating Kaydet/Önizle/Devam row stacks + full-width on narrow viewport */
@media (max-width: 480px) {
  /* Bottom CTA pair (Kaydet + Önizle/Devam) — full-width touch targets */
  .mc-prem-bottom-bar,
  .mc-wiz-nav {
    gap: 8px;
  }
  .mc-prem-bottom-bar .mc-cta,
  .mc-prem-bottom-bar button,
  .mc-wiz-nav .mc-wiz-prev,
  .mc-wiz-nav .mc-wiz-next {
    min-height: 44px;
    font-size: 13px;
  }
  /* Save indicator below the bottom bar (avoids overlap with sticky CTA) */
  .mc-save-indicator,
  .mc-prem-save-indicator {
    font-size: 10.5px;
    padding: 4px 10px;
  }
}
/* === D52-MOBILE-FOOTBAR END === */

/* === D52-FIX-1 START === Per-row Üst beden select (amatör kullanıcı bulk grid yerine satırdan beden seçer) */
.mc-player-row__size--edit {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
  text-align: center;
  background: rgba(201, 162, 77, 0.08);
  border: 1px solid rgba(201, 162, 77, 0.25);
  border-radius: 6px;
  padding: 4px 4px;
  outline: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  min-width: 3.4em;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mc-player-row__size--edit:focus,
.mc-player-row__size--edit:hover {
  border-color: var(--accent, #c9a24d);
  background: rgba(201, 162, 77, 0.14);
}
.mc-player-row__size--edit option[value=""] {
  color: var(--ink-mute, rgba(13,12,10,0.5));
}
body.motta-order-page[data-theme="dark"] .mc-player-row__size--edit {
  background: rgba(201,162,77,0.10);
  border-color: rgba(201,162,77,0.30);
  color: var(--accent, #c9a24d);
}
/* === D52-FIX-1 END === */

/* === D52-FIX-2 START === İsim row inaktif sublabel — kadro adı yokken neden tıklanmıyor söylensin */
.mc-spec-zone__hint--inactive {
  display: block;
  color: rgba(13, 12, 10, 0.45);
  font-style: italic;
  font-size: 10px;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
body.motta-order-page[data-theme="dark"] .mc-spec-zone__hint--inactive {
  color: rgba(255, 255, 255, 0.35);
}
.mc-spec-zone[aria-disabled="true"] {
  opacity: 0.65;
}
.mc-spec-zone[aria-disabled="true"]:hover {
  background: transparent;
}
/* === D52-FIX-2 END === */

/* === D52-FIX-3 START === Grid modu nötr başlık — eski tasarım kodu kalıntısı yerine "Tasarım Vitrini" */
.mc-meta--neutral {
  color: var(--ink-mute, rgba(13, 12, 10, 0.5));
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.85;
}
body.motta-order-page[data-theme="dark"] .mc-meta--neutral {
  color: rgba(255, 255, 255, 0.45);
}
/* === D52-FIX-3 END === */

/* === D58-W1-LAYOUT-3COL START === Customize sayfası 3-kolon: sol vitrin + orta canvas + sağ kadro */
.mc-customize {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  width: 100%;
}
.mc-customize__left {
  flex: 0 0 240px;
  max-width: 240px;
  border-right: 1px solid var(--line, #e8e6e1);
  background: var(--bg-1, #fafaf7);
  overflow-y: auto;
  padding: 14px 12px;
}
/* === D59-B3 === Ürün yoksa sol panel boş kalır → tamamen gizle (ekranı kaplamasın) */
.mc-customize__left:empty {
  display: none !important;
}
.mc-customize__canvas {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .mc-customize__left { display: none; }
}
/* === D58-W1-LAYOUT-3COL END === */

/* === D58-W2-LEFT-RAIL START === Sol mağaza vitrini styling (kompakt + standart) */
.mc-left-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-left-rail__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--line, #e8e6e1);
  margin-bottom: 4px;
}
.mc-left-rail__icon { font-size: 16px; }
.mc-left-rail__title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.mc-left-rail__count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: rgba(201, 162, 77, 0.12);
  color: var(--accent, #c9a24d);
  padding: 2px 7px;
  border-radius: 999px;
}
.mc-left-rail__loading,
.mc-left-rail__empty {
  padding: 24px 8px;
  text-align: center;
  color: rgba(15, 23, 42, 0.5);
  font-size: 12px;
  font-style: italic;
}
.mc-left-rail__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-left-rail__card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 160ms ease, transform 100ms ease;
}
.mc-left-rail__card:hover {
  border-color: var(--accent, #c9a24d);
}
.mc-left-rail__art {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--bg-2, #f4f3ef);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 60px;
}
.mc-left-rail__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mc-left-rail__noimg {
  font-size: 24px;
  opacity: 0.4;
}
.mc-left-rail__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-left-rail__name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mc-left-rail__price {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #c9a24d);
}
.mc-left-rail__add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--accent, #c9a24d);
  background: #fff;
  color: var(--accent, #c9a24d);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 30px;
  transition: background 140ms ease, transform 100ms ease;
}
.mc-left-rail__add:hover {
  background: var(--accent, #c9a24d);
  color: #fff;
}
.mc-left-rail__add:active { transform: scale(0.94); }
/* === D58-W2-LEFT-RAIL END === */

/* === D59-A-VITRIN-SIDEBAR START === Tasarım vitrini: sol filtre paneli + sağ 4 kolon kompakt grid */
.mc-grid-shell {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
/* SOL filtre paneli — sticky */
.mc-grid__filter {
  flex: 0 0 210px;
  max-width: 210px;
  position: sticky;
  top: 12px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 16px;
}
.mc-grid__filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mc-grid__filter-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
}
.mc-grid__filter-close { display: none; }
.mc-grid__filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-grid__filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
}
/* Kategori chip'leri sol panelde DİKEY liste */
.mc-grid__filter .mc-cat-chips {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.mc-grid__filter .mc-cat-chip {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: 8px;
}
.mc-search--rail { width: 100%; }
.mc-search--rail .mc-search__input { width: 100%; }

/* SAĞ gövde — full width grid */
.mc-grid__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-grid__toolbar--body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mc-grid__toolbar--body .mc-grid__count { margin-right: auto; }
.mc-grid__toolbar--body .mc-grid__toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-grid__filter-toggle { display: none; }

/* 4 KOLON responsive kompakt grid (kullanıcı: dolu, full ekran) */
.mc-grid-shell .mc-grid__cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (min-width: 1600px) {
  .mc-grid-shell .mc-grid__cards { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 1280px) {
  .mc-grid-shell .mc-grid__cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 960px) {
  .mc-grid-shell .mc-grid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* MOBILE (<900px): sol filtre collapsible drawer */
@media (max-width: 900px) {
  .mc-grid__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line, #e8e6e1);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .mc-grid__filter {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 80vw;
    max-width: 320px;
    background: #fff;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
    padding: 18px 16px;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .mc-grid-shell.is-filter-open .mc-grid__filter {
    transform: translateX(0);
  }
  .mc-grid__filter-close {
    display: inline-flex;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: rgba(15,23,42,0.5);
  }
}
/* === D59-A-VITRIN-SIDEBAR END === */

/* === D59-B1 === Disabled "Önizle" CTA görsel-disabled ama tıklanabilir (guided feedback) */
.mc-sticky-cta__btn.is-disabled {
  opacity: 0.5;
  cursor: pointer; /* tıklayınca eksik alana yönlendirir, gerçekten kilitli değil */
}
.mc-sticky-cta__btn.is-disabled:hover {
  opacity: 0.62;
}
/* Eksik alan flash highlight (B1 scroll hedefi) */
.mc-d59-flash {
  animation: mc-d59-flash-anim 1.5s ease;
  border-radius: 10px;
}
@keyframes mc-d59-flash-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 77, 0); }
  25% { box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.35); }
  60% { box-shadow: 0 0 0 4px rgba(201, 162, 77, 0.22); }
}
/* === D59-B1 END === */

/* === D59-B2 === Amatör marker keşfi: ilk girişte mockup marker'ları nazikçe pulse eder */
.mc-d59-marker-hint .mc-marker__outline {
  animation: mc-d59-marker-pulse 1.4s ease-in-out 3;
  transform-origin: center;
}
@keyframes mc-d59-marker-pulse {
  0%, 100% { stroke-opacity: 0.55; }
  50% { stroke-opacity: 1; stroke-width: 3; }
}
.mc-d59-marker-hint .mc-marker--color .mc-marker__swatch {
  animation: mc-d59-swatch-pulse 1.4s ease-in-out 3;
}
@keyframes mc-d59-swatch-pulse {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 5px rgba(201, 162, 77, 0.8)); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-d59-marker-hint .mc-marker__outline,
  .mc-d59-marker-hint .mc-marker--color .mc-marker__swatch { animation: none; }
}
/* === D59-B2 END === */

/* === D60-W4-MARKER-LABEL === Boş zone marker'larında "LOGO / SPONSOR / İSİM / NO / RENK" kalıcı + okunaklı (amatör A4) */
.mc-marker__corner-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: #0f172a;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0.95;
  pointer-events: none;
  text-transform: uppercase;
}
.mc-marker__icon-glyph {
  opacity: 0.9;
}
/* Boş zone marker outline her zaman görünür dashed gold çerçeve (tıklanabilir hissi) */
.mc-marker--logo .mc-marker__outline,
.mc-marker--sponsor .mc-marker__outline,
.mc-marker--name .mc-marker__outline,
.mc-marker--number .mc-marker__outline {
  stroke: rgba(201, 162, 77, 0.7);
  stroke-dasharray: 5 3;
  stroke-width: 1.6;
}
.mc-marker:hover .mc-marker__corner-tag {
  fill: var(--accent, #c9a24d);
}
/* === D60-W4-MARKER-LABEL END === */

/* === D60-W3-FLOW-ORDER === Tasarım adımı rehber bandı (1→2 net sıra) */
.mc-flow-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 4px 0 10px;
  background: linear-gradient(135deg, rgba(201,162,77,0.08), rgba(201,162,77,0.03));
  border: 1px solid rgba(201, 162, 77, 0.25);
  border-radius: 12px;
  font-size: 12.5px;
  color: rgba(15, 23, 42, 0.78);
}
.mc-flow-guide__step strong { color: var(--accent, #c9a24d); margin-right: 3px; }
.mc-flow-guide__step--next { color: rgba(15, 23, 42, 0.55); }
.mc-flow-guide__step--next em { font-style: normal; font-weight: 700; color: #0f172a; }
.mc-flow-guide__arrow { color: rgba(201, 162, 77, 0.6); font-weight: 700; }
@media (max-width: 600px) {
  .mc-flow-guide { font-size: 11.5px; gap: 6px; }
  .mc-flow-guide__arrow { display: none; }
}
/* === D60-W3-FLOW-ORDER END === */

/* === D59-C1 === Toplu oyuncu/beden giriş paneli (profesyonel hız) */
.mc-roster__bulk-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--accent, #c9a24d);
  background: rgba(201, 162, 77, 0.08);
  color: var(--accent, #c9a24d);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.mc-roster__bulk-btn:hover {
  background: var(--accent, #c9a24d);
  color: #fff;
}
.mc-roster-bulk {
  margin: 10px 0 14px;
  padding: 14px;
  background: rgba(201, 162, 77, 0.06);
  border: 1px dashed rgba(201, 162, 77, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-roster-bulk__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.7);
}
.mc-roster-bulk__hint strong { color: #0f172a; }
.mc-roster-bulk__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  background: #fff;
  color: #0f172a;
}
.mc-roster-bulk__input:focus {
  outline: none;
  border-color: var(--accent, #c9a24d);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.15);
}
.mc-roster-bulk__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.mc-roster-bulk__apply {
  padding: 8px 18px;
  border: 0;
  background: var(--accent, #c9a24d);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
}
.mc-roster-bulk__apply:hover { background: #b58f3e; }
.mc-roster-bulk__cancel {
  padding: 8px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: transparent;
  color: rgba(15, 23, 42, 0.6);
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
}
.mc-roster-bulk__cancel:hover { background: rgba(15, 23, 42, 0.04); }
/* === D59-C1 END === */

/* === D61-KIT-STUDIO-PRO-FIX START === Professional showroom repair: no card-frame, no focus scaling, stable short-screen layout. */
body.motta-order-page .mc-customize__canvas {
  padding-bottom: 86px;
}

body.motta-order-page .mc-canvas__viewport.is-kit-studio {
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 18px 18px 14px;
  min-height: 0;
  background:
    radial-gradient(ellipse 58% 46% at 52% 42%, rgba(201, 162, 77, 0.055) 0%, transparent 68%),
    linear-gradient(180deg, rgba(252, 250, 244, 0.70) 0%, rgba(247, 246, 242, 0.92) 100%);
}

body.motta-order-page .mc-canvas__viewport.is-kit-studio .mc-canvas__zoom-wrap {
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible;
  transform: none !important;
}

.mc-view-toggle--floating {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 24;
  min-width: 126px;
  justify-content: center;
}

.mc-view-toggle--floating .mc-view-toggle__btn,
.mc-canvas__bottom-bar .mc-view-toggle__btn {
  min-width: 56px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] {
  width: min(100%, 920px);
  height: clamp(330px, calc(100dvh - 250px), 600px);
  min-height: 330px;
  max-height: 600px;
  grid-template-columns: minmax(116px, .48fr) minmax(112px, .44fr) minmax(170px, .62fr) minmax(180px, .68fr);
  grid-template-rows: minmax(205px, 1fr) minmax(92px, .34fr);
  grid-template-areas:
    "gk forma esofman esofman"
    "corap sort pantolon pantolon";
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  padding: 26px 18px 18px;
  overflow: visible;
  isolation: isolate;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"]::before,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"]::after,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece::after,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-canvas__shadow-layer {
  display: none !important;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece {
  position: relative;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .68;
  filter: saturate(.88) contrast(.96);
  transform: none !important;
  transition: opacity 180ms ease, filter 180ms ease;
  cursor: pointer;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece.is-active,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused {
  opacity: 1;
  filter: none;
  z-index: 5;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece:hover,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece:focus-visible {
  opacity: 1;
  filter: none;
  transform: none !important;
  outline: none;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece.is-active::before,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece.is-focused::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: min(88px, 58%);
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent, #c9a24d), transparent);
  box-shadow: 0 6px 18px rgba(201, 162, 77, 0.24);
  pointer-events: none;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__frame {
  width: min(100%, 146px);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  pointer-events: none;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-forma .mc-kit-studio__frame {
  width: min(90%, 166px);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-esofman .mc-kit-studio__frame {
  width: min(88%, 160px);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-pantolon .mc-kit-studio__frame {
  width: min(88%, 136px);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-sort .mc-kit-studio__frame {
  width: min(82%, 118px);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-corap .mc-kit-studio__frame {
  width: min(68%, 78px);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__stage,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-canvas__stage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  pointer-events: auto;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-canvas__layers {
  pointer-events: none;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-canvas__overlay {
  pointer-events: auto;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__badge {
  top: auto;
  bottom: 34px;
  left: 50%;
  z-index: 7;
  max-width: 132px;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.82);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__label {
  bottom: 2px;
  z-index: 7;
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__swap {
  top: 10px;
  right: 50%;
  z-index: 10;
  transform: translateX(50%);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__swap:hover {
  transform: translateX(50%) scale(1.06);
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__quick {
  width: 100%;
  justify-self: stretch;
  align-content: center;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__quick button,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__placeholder {
  min-height: 42px;
  border: 1px solid rgba(201, 162, 77, 0.26) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
  opacity: .92;
  transform: none !important;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__placeholder {
  width: min(100%, 168px);
  min-height: 70px;
  padding: 10px;
  border-style: solid !important;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__placeholder small {
  display: none;
}

.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__quick button:hover,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__quick button:focus-visible,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__placeholder:hover,
.mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__placeholder:focus-visible {
  opacity: 1;
  border-color: rgba(201, 162, 77, 0.58) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}

.mc-canvas__bottom-bar {
  position: relative;
  z-index: 22;
  min-height: 56px;
  flex-wrap: wrap;
}

.mc-kit-composer {
  max-width: min(100%, 780px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.mc-kit-composer__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-height: 720px) and (min-width: 701px) {
  body.motta-order-page .mc-canvas__viewport.is-kit-studio {
    padding-top: 12px;
    padding-bottom: 8px;
  }
  .mc-view-toggle--floating {
    top: 8px;
    right: 12px;
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] {
    height: clamp(300px, calc(100dvh - 235px), 420px);
    min-height: 300px;
    grid-template-rows: minmax(190px, 1fr) minmax(78px, .30fr);
    gap: 8px;
    padding-top: 22px;
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-forma .mc-kit-studio__frame {
    width: min(86%, 138px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-esofman .mc-kit-studio__frame {
    width: min(84%, 134px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-sort .mc-kit-studio__frame {
    width: min(78%, 94px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-corap .mc-kit-studio__frame {
    width: min(62%, 62px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__badge {
    transform: translateX(-50%) scale(.88);
  }
}

@media (max-width: 900px) {
  body.motta-order-page .mc-customize__canvas {
    max-width: 100%;
  }
  .mc-kit-composer {
    width: 100%;
    border-radius: 18px;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  body.motta-order-page .mc-customize__canvas {
    padding-bottom: 96px;
  }
  body.motta-order-page .mc-canvas__viewport.is-kit-studio {
    padding: 54px 10px 12px;
  }
  .mc-view-toggle--floating {
    top: 8px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] {
    width: 100%;
    height: auto;
    min-height: 520px;
    max-height: none;
    grid-template-columns: .72fr 1fr !important;
    grid-template-rows: 64px 210px 120px 94px;
    grid-template-areas:
      "gk gk"
      "forma esofman"
      "corap sort"
      "pantolon pantolon" !important;
    gap: 10px;
    padding: 8px 6px 10px;
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-forma .mc-kit-studio__frame,
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-esofman .mc-kit-studio__frame {
    width: min(82%, 116px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-sort .mc-kit-studio__frame {
    width: min(78%, 92px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__piece--slot-corap .mc-kit-studio__frame {
    width: min(60%, 58px);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__badge {
    bottom: 28px;
    transform: translateX(-50%) scale(.86);
  }
  .mc-kit-studio.mc-d61-showroom[data-kit-layout="d48"] .mc-kit-studio__label {
    min-height: 23px;
    padding: 4px 7px;
  }
  .mc-kit-composer {
    border-radius: 18px;
    flex-direction: column;
    align-items: stretch;
  }
  .mc-kit-composer__actions,
  .mc-add-item-bar {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .mc-add-item-btn,
  .mc-kit-preview-btn {
    flex: 0 0 auto;
  }
}
/* === D61-KIT-STUDIO-PRO-FIX END === */

/* === D62-W3-HERO-CSS START === Hero kit-studio: aktif parça büyük (gerçek zoom = büyük stage,
   scale transform DEĞİL → marker/overlay konumu bozulmaz), altında premium geçiş şeridi.
   D61 grid bloğu (mc-d61-showroom[data-kit-layout="d48"]) DOKUNULMADI — hero ayrı class/layout. */
.mc-kit-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 1.6vw, 22px);
  width: 100%;
  min-height: 0;
  padding: clamp(10px, 1.6vw, 20px) 12px 14px;
  isolation: isolate;
}
.mc-kit-hero__stage-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(320px, calc(100dvh - 320px), 560px);
  min-height: 300px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 62% 52% at 50% 42%, rgba(201, 162, 77, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(252, 250, 244, 0.55) 0%, rgba(247, 246, 242, 0.85) 100%);
  overflow: visible;
}
.mc-kit-hero .mc-kit-studio__piece {
  width: 100%;
  height: 100%;
  opacity: 1;
  border: 0;
  background: transparent;
  cursor: default;
  animation: mcHeroPieceIn 360ms cubic-bezier(0.34, 1.36, 0.5, 1) both;
}
.mc-kit-hero .mc-kit-studio__piece::after { display: none; }
@keyframes mcHeroPieceIn {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
.mc-kit-hero .mc-kit-studio__frame {
  width: auto;
  height: 92%;
  max-width: 86%;
  max-height: 100%;
  pointer-events: auto;
}
.mc-kit-hero .mc-kit-studio__stage,
.mc-kit-hero .mc-canvas__stage {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058);
  overflow: visible;
}
.mc-kit-hero .mc-kit-studio__label {
  bottom: -4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
  z-index: 6;
}
.mc-kit-hero .mc-kit-studio__label strong { color: var(--accent, #c9a24d); }
.mc-kit-hero .mc-kit-studio__badge { top: 6px; left: 6px; z-index: 6; }
.mc-kit-hero .mc-kit-studio__swap {
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  transition: transform 0.16s ease, background 0.16s ease;
}
.mc-kit-hero .mc-kit-studio__swap:hover { transform: scale(1.08); background: var(--accent, #c9a24d); }
.mc-kit-hero .mc-kit-studio__inherit {
  position: absolute;
  bottom: 4px;
  right: 10px;
  z-index: 6;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(201, 162, 77, 0.16);
  color: var(--accent, #b4862a);
}
/* ── Premium geçiş şeridi ── */
.mc-kit-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 6px 4px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: center;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mc-kit-strip::-webkit-scrollbar { height: 6px; }
.mc-kit-strip::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.16); border-radius: 999px; }
.mc-kit-strip__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 78px;
  min-height: 76px;
  padding: 8px 6px;
  border: 1.5px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink, #1f2937);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.5,1), border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mc-kit-strip__item:hover {
  border-color: rgba(201, 162, 77, 0.5);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.mc-kit-strip__item.is-active {
  border-color: var(--accent, #c9a24d);
  background: rgba(201, 162, 77, 0.10);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.22), 0 10px 24px rgba(201, 162, 77, 0.16);
  transform: scale(1.05);
}
.mc-kit-strip__img { width: 38px; height: 38px; object-fit: contain; }
.mc-kit-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--accent, #b4862a);
}
.mc-kit-strip__icon svg { width: 24px; height: 24px; }
.mc-kit-strip__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-kit-strip__item.is-active .mc-kit-strip__label { color: var(--accent, #b4862a); }
.mc-kit-strip__active-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent, #c9a24d);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.22);
}
.mc-kit-strip__adds {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px dashed rgba(15, 23, 42, 0.14);
}
.mc-kit-strip__add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #b4862a);
  border: 1.5px dashed rgba(201, 162, 77, 0.45);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.mc-kit-strip__add:hover { border-color: var(--accent, #c9a24d); background: rgba(201, 162, 77, 0.10); transform: translateY(-2px); }
/* Kit picker kural ipucu (D62-W4) */
.mc-kit-picker__rule {
  margin: 0 0 10px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  background: rgba(201, 162, 77, 0.08);
  border-radius: 8px;
  text-align: center;
}
.mc-kit-picker__rule strong { color: var(--accent, #b4862a); }
@media (max-height: 760px) and (min-width: 701px) {
  .mc-kit-hero__stage-wrap { height: clamp(280px, calc(100dvh - 300px), 420px); min-height: 260px; }
}
@media (max-width: 600px) {
  .mc-kit-hero { gap: 10px; padding: 6px 6px 10px; }
  .mc-kit-hero__stage-wrap { height: clamp(240px, 52vh, 380px); min-height: 240px; border-radius: 16px; }
  .mc-kit-strip { justify-content: flex-start; gap: 8px; }
  .mc-kit-strip__item { width: 66px; min-height: 68px; }
  .mc-kit-strip__add { min-width: 66px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-kit-hero .mc-kit-studio__piece { animation: none; }
  .mc-kit-strip__item { transition: border-color 0.18s ease, background 0.18s ease; }
}
/* === D62-W3-HERO-CSS END === */

/* === D64-W1-FLATTEN START === Kart-içi-kart kaldır (merkez hero) + pro "Değiştir" buton.
   Kullanıcı: "sayfada kart içinde kart var" + "bordür yanına güzel pro butonlar (tasarımı değiştir)".
   Hero'da jersey iki iç içe kutudaydı: dış = .mc-kit-hero__stage-wrap (radius+gradient), iç = .mc-kit-studio__frame
   (base 1.5px border + aktifte gold ring/shadow). İç frame kartını hero'da sıfırla → jersey tek stage içinde. */
.mc-kit-hero .mc-kit-studio__frame {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.mc-kit-hero .mc-kit-studio__piece.is-active .mc-kit-studio__frame,
.mc-kit-hero .mc-kit-studio__piece.is-focused .mc-kit-studio__frame {
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Pro "Tasarımı değiştir": hover gerekmez — her zaman görünür, etiketli pill */
.mc-kit-hero .mc-kit-studio__swap {
  opacity: 1;
  width: auto;
  min-width: 0;
  height: 30px;
  padding: 0 12px 0 9px;
  gap: 5px;
  border-radius: 999px;
  font-weight: 700;
}
.mc-kit-studio__swap-label { display: none; }
.mc-kit-hero .mc-kit-studio__swap-label {
  display: inline;
  font-size: 11px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* === D64-W1-FLATTEN END === */

/* === D64-W3-SWAP START === İsim↔sponsor tek-tık yer değiştir butonu (numara popover) */
.mc-pop-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(201, 162, 77, 0.45);
  border-radius: 10px;
  background: rgba(201, 162, 77, 0.06);
  color: var(--accent, #8f6a23);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.mc-pop-swap-btn:hover { background: rgba(201, 162, 77, 0.13); border-color: var(--accent, #c9a24d); transform: translateY(-1px); }
.mc-pop-swap-btn svg { flex: 0 0 auto; }
/* === D64-W3-SWAP END === */

/* === D64-W4-FONT-ARROWS START === Premium ← → font cycle satırı (numara/isim popover) */
.mc-pop-font-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
}
.mc-pop-font-row .mc-pop-font-trigger { flex: 1 1 auto; margin-top: 0; }
.mc-pop-font-arrow {
  flex: 0 0 auto;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 162, 77, 0.45);
  border-radius: 9px;
  background: rgba(201, 162, 77, 0.06);
  color: var(--accent, #8f6a23);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mc-pop-font-arrow:hover { background: rgba(201, 162, 77, 0.14); border-color: var(--accent, #c9a24d); transform: translateY(-1px); }
.mc-pop-font-arrow:active { transform: translateY(0) scale(0.96); }
/* === D64-W4-FONT-ARROWS END === */

/* === D64-W6-ARC START === İsim/takım Düz/Kavisli (yarı oval) toggle (isim popover) */
.mc-pop-arc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.mc-pop-arc-label {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-right: 2px;
}
.mc-pop-arc-btn {
  flex: 1 1 auto;
  padding: 7px 8px;
  border: 1px solid rgba(201, 162, 77, 0.4);
  border-radius: 9px;
  background: #fff;
  color: var(--ink, #0d0c0a);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mc-pop-arc-btn.is-active {
  background: var(--accent, #c9a24d);
  border-color: var(--accent, #c9a24d);
  color: #fff;
}
.mc-pop-arc-btn:not(.is-active):hover { background: rgba(201, 162, 77, 0.10); }
/* === D64-W6-ARC END === */

/* === D65-W3-VARIANT START === Yaka/kol seçili etiketi (Bisiklet/V/Hakim) başlıkta vurgulu */
.mc-variant-picker__sel {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(201, 162, 77, 0.14);
  color: var(--accent, #8f6a23);
  font-size: 11px;
  font-weight: 800;
}
/* === D65-W3-VARIANT END === */

/* === D65-W3-VARIANT START === Yaka/kol seçili etiketi (Bisiklet/V/Hakim) başlıkta vurgulu */
.mc-variant-picker__sel {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(201, 162, 77, 0.14);
  color: var(--accent, #8f6a23);
  font-size: 11px;
  font-weight: 800;
}
/* === D65-W3-VARIANT END === */

/* === D64-SETGROUP START === Set-gruplı şerit: Forma kiti / Eşofman / Kaleci (kullanıcı "1 set = 1 sayfa") */
.mc-kit-strip--grouped {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 18px;
  overflow-x: auto;
  padding: 2px 2px 6px;
}
.mc-kit-set {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 18px;
}
.mc-kit-set::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20px;
  bottom: 6px;
  width: 1px;
  background: rgba(15, 23, 42, 0.09);
}
.mc-kit-set:last-child::after { display: none; }
.mc-kit-set__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent, #b4862a);
  padding-left: 3px;
}
.mc-kit-set__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 600px) {
  .mc-kit-strip--grouped { flex-wrap: nowrap; gap: 10px 12px; }
  .mc-kit-set { padding-right: 12px; }
  .mc-kit-set::after { top: 18px; }
}
/* === D64-SETGROUP END === */

/* === D65-W7B-KIT-GRID START === Büyük tek hero KALDIRILDI. Tüm kit parçaları aynı anda canlı mockup
   kartı olarak grid'de (Forma kiti / Eşofman / Kaleci grupları). Her kart = renderKitStudioPiece
   (data-kit-layers canlı mockup ön+arka, data-kit-studio-item tıkla → switchActiveItem → .is-active zoom,
   data-kit-swap "tasarımı değiştir"). Kullanıcı: "alt hero kartı kaldır; hepsi aynı anda gözüksün;
   hangisini tasarlıyorsa ona tıklayınca o zoom olur". */
.mc-kit-hero--grid {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px clamp(8px, 1.4vw, 18px) 20px;
  overflow-y: auto;
  max-height: calc(100dvh - 230px);
}
/* Gruplar yan yana (Forma kiti · Eşofman · Kaleci), dar ekranda alt alta sarar */
.mc-kit-hero--grid .mc-kit-strip--grouped {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 28px;
  overflow: visible;
}
.mc-kit-hero--grid .mc-kit-set { flex-direction: column; padding-right: 20px; }
.mc-kit-hero--grid .mc-kit-set::after { top: 24px; }
.mc-kit-hero--grid .mc-kit-set__label { font-size: 11px; margin-bottom: 4px; }
/* Her set içindeki parçalar grid (Forma·Şört·Çorap yan yana sarar) */
.mc-kit-hero--grid .mc-kit-set__row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}
/* Her parça = orta-boy canlı mockup kart */
.mc-kit-hero--grid .mc-kit-studio__piece {
  width: 184px;
  height: auto;
  opacity: 1;
  cursor: pointer;
  animation: none;
  transition: width 0.22s cubic-bezier(0.34,1.36,0.5,1);
}
.mc-kit-hero--grid .mc-kit-studio__frame {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mc-kit-hero--grid .mc-kit-studio__stage,
.mc-kit-hero--grid .mc-canvas__stage {
  width: 100%;
  height: auto;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058);
}
/* Tıklanan (aktif) parça ZOOM olur — yerinde büyür */
.mc-kit-hero--grid .mc-kit-studio__piece.is-active {
  width: 340px;
}
.mc-kit-hero--grid .mc-kit-studio__piece.is-active .mc-kit-studio__frame {
  filter: drop-shadow(0 18px 40px rgba(15,23,42,0.16));
}
/* "+ ekle" girişleri orta-boy kutu */
.mc-kit-hero--grid .mc-kit-strip__add {
  width: 184px;
  min-height: 120px;
  flex-direction: column;
  border-style: dashed;
}
@media (max-width: 1099px) {
  .mc-kit-hero--grid .mc-kit-studio__piece { width: 150px; }
  .mc-kit-hero--grid .mc-kit-studio__piece.is-active { width: 240px; }
  .mc-kit-hero--grid .mc-kit-strip__add { width: 150px; min-height: 100px; }
}
/* === D65-W7B-KIT-GRID END === */

/* === D70-STOREFRONT-PREMIUM-REVIEW-FINAL START ===
   Siparis vitrini showroom fix: bottom clutter kalkar, aktif parca buyuyup digerlerini tiklanamaz hale getirmez. */
@media (min-width: 901px) {
  body.motta-order-page .mc-mode--kit-studio .mc-canvas__viewport.is-kit-studio {
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(10px, 1.1vw, 18px) clamp(12px, 1.4vw, 22px) 8px !important;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    padding: clamp(8px, 1vw, 14px) clamp(6px, 1vw, 12px) 8px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-strip--grouped {
    width: min(100%, 1040px);
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(220px, .92fr) minmax(170px, .66fr);
    gap: clamp(12px, 1.5vw, 24px);
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-set {
    min-width: 0;
    padding-right: 0;
    gap: 8px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-set::after {
    display: none;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-set__label {
    margin: 0 0 2px;
    padding: 0;
    color: rgba(143, 106, 35, .82);
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: .08em;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-set__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, .9vw, 14px);
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece,
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-active {
    width: clamp(112px, 7.5vw, 146px) !important;
    flex: 0 0 auto;
    opacity: .76;
    transform: none !important;
    transition: opacity 160ms ease, filter 160ms ease;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece--slot-forma,
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece--slot-esofman {
    width: clamp(132px, 8.8vw, 168px) !important;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-active,
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-focused {
    opacity: 1;
    filter: saturate(1.02) contrast(1.02);
    z-index: 3;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-active .mc-kit-studio__frame {
    filter: drop-shadow(0 18px 34px rgba(15, 23, 42, .13));
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-active::before,
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-focused::before {
    bottom: -8px;
    width: min(74px, 62%);
    height: 3px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-strip__add {
    width: clamp(96px, 6.8vw, 126px) !important;
    min-height: 74px !important;
    padding: 9px 10px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.15;
    background: rgba(255, 255, 255, .52);
    box-shadow: none;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-preview-btn {
    display: none !important;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-strip--grouped {
    width: min(100%, 880px);
    gap: 10px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece,
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-active {
    width: clamp(96px, 6.8vw, 124px) !important;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece--slot-forma,
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece--slot-esofman {
    width: clamp(112px, 7.8vw, 142px) !important;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-strip__add {
    width: clamp(84px, 6vw, 108px) !important;
    min-height: 62px !important;
    padding: 7px 8px;
  }
}

@media (max-width: 900px) {
  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid {
    max-height: none;
    padding-bottom: 12px;
  }

  body.motta-order-page .mc-mode--kit-studio .mc-kit-hero--grid .mc-kit-studio__piece.is-active {
    width: 150px !important;
  }
}
/* === D70-STOREFRONT-PREMIUM-REVIEW-FINAL END === */

/* === D72-COREL-KIT-WORKSPACE START === User wireframe is the source of truth. */
body.motta-order-page .mc-mode--corel-workspace {
  --d72-line: rgba(17, 24, 39, .88);
  --d72-soft: rgba(17, 24, 39, .08);
  --d72-paper: #fffefb;
  --d72-zoom: #10dce4;
}

body.motta-order-page .mc-mode--corel-workspace .mc-customize {
  display: grid;
  grid-template-columns: clamp(160px, 13vw, 238px) minmax(0, 1fr);
  height: calc(100dvh - 66px);
  min-height: 560px;
  overflow: hidden;
  background: #f6f4ef;
}

body.motta-order-page .mc-mode--corel-workspace .mc-customize__left {
  display: block;
  min-width: 0;
  border-right: 1.5px solid var(--d72-line);
  background: #fff;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail,
body.motta-order-page .mc-mode--corel-workspace .mc-left-rail--d72-empty {
  height: 100%;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: #fff;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__head {
  display: none;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__d72-title {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
  color: #0f172a;
  font-size: clamp(24px, 2.2vw, 40px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}

body.motta-order-page .mc-mode--corel-workspace .mc-customize__canvas {
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.motta-order-page .mc-mode--corel-workspace .mc-canvas__viewport.is-kit-studio {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: var(--d72-paper);
}

body.motta-order-page .mc-mode--corel-workspace .mc-canvas__zoom-wrap {
  width: 100%;
  height: 100%;
  transform: none !important;
}

body.motta-order-page .mc-mode--corel-workspace .mc-cart-drawer,
body.motta-order-page .mc-mode--corel-workspace .mc-sticky-cta,
body.motta-order-page .mc-mode--corel-workspace .mc-view-toggle--floating,
body.motta-order-page .mc-mode--corel-workspace .mc-canvas__bottom-bar {
  display: none !important;
}

.mc-d72-workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(560px, 1fr) clamp(156px, 12vw, 190px) clamp(146px, 11vw, 178px);
  gap: 0;
  background: var(--d72-paper);
  color: #0f172a;
}

.mc-d72-board {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-right: 1.5px solid var(--d72-line);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(201,162,77,.06), transparent 34%),
    #fffefb;
}

.mc-d72-gk-apply {
  position: absolute;
  top: clamp(14px, 4vh, 56px);
  left: clamp(54px, 5vw, 86px);
  z-index: 4;
  height: 32px;
  padding: 0 18px;
  border: 1.5px solid var(--d72-line);
  background: #fff;
  color: #111827;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

.mc-d72-kitboxes {
  height: calc(100% - 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(22px, 4vw, 62px);
  padding: clamp(38px, 7vh, 86px) clamp(26px, 4vw, 70px) 58px;
}

.mc-d72-kitbox {
  position: relative;
  width: min(100%, 334px);
  height: clamp(332px, 51vh, 444px);
  border: 1.8px solid var(--d72-line);
  border-radius: 34px;
  background: rgba(255,255,255,.42);
  padding: 58px 34px 34px;
}

.mc-d72-kitbox__title {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
}

.mc-d72-kitbox__grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.25fr 1fr;
  gap: 8px 14px;
  align-items: stretch;
}

.mc-d72-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  border: 1.5px solid var(--d72-line);
  background: rgba(255,255,255,.62);
  cursor: pointer;
}

.mc-d72-tile.is-active {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

.mc-d72-tile__change {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 3;
  min-height: 18px;
  padding: 1px 8px;
  border: 1.5px solid var(--d72-line);
  background: #fff;
  color: #111827;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.mc-d72-tile__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mc-d72-tile__stage .mc-canvas__layers,
.mc-d72-zoom__stage .mc-canvas__layers {
  position: absolute;
  inset: 0;
}

.mc-d72-tile__empty {
  display: grid;
  place-items: center;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.mc-d72-tile > strong {
  align-self: end;
  padding: 4px 3px 6px;
  text-align: center;
  color: #111827;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.mc-d72-zoom {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: clamp(190px, 17vw, 238px);
  height: clamp(304px, 53vh, 376px);
  transform: translate(-50%, -48%);
  border: 1.6px solid var(--d72-line);
  background: var(--d72-zoom);
  box-shadow: 0 0 0 6px rgba(0,0,0,.02);
}

.mc-d72-zoom::before,
.mc-d72-zoom::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #050505;
}
.mc-d72-zoom::before { left: -12px; top: 50%; }
.mc-d72-zoom::after { right: -12px; top: 50%; }

.mc-d72-zoom__tools {
  position: absolute;
  top: -21px;
  left: -1px;
  right: -1px;
  display: flex;
  justify-content: space-between;
  z-index: 4;
}

.mc-d72-zoom__tools button {
  min-height: 20px;
  padding: 2px 8px;
  border: 1.5px solid var(--d72-line);
  background: var(--d72-zoom);
  color: #0f172a;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.mc-d72-zoom__stage {
  /* === D66-W5 === Stage jersey-şekilli (viewBox aspect-ratio) + dikey ortalı → mockup img ile
     overlay svg AYNI kutu, marker offset'i biter. Önceki inset:0 letterbox kayması düzeltildi. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: var(--mc-piece-ar, 823 / 1058);
  overflow: visible;
}

.mc-d72-zoom .mc-canvas__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mc-d72-zoom__stage .mc-canvas__mockup-img,
.mc-d72-zoom__stage [data-kit-layers] > img,
.mc-d72-zoom__stage [data-kit-layers] > svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mc-d72-zoom > strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  pointer-events: none;
}

.mc-d72-kit-preview {
  position: absolute;
  right: clamp(150px, 15vw, 270px);
  bottom: 7px;
  min-height: 26px;
  padding: 2px 18px;
  border: 1.5px solid var(--d72-line);
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.mc-d72-pages {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  z-index: 5;
}

.mc-d72-pages button {
  min-height: 28px;
  padding: 2px 10px;
  border: 1.5px solid var(--d72-line);
  border-left: 0;
  border-bottom: 0;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.mc-d72-pages button.is-active { background: #f7f2e5; }

.mc-d72-side,
.mc-d72-preview {
  min-width: 0;
  min-height: 0;
  border-right: 1.5px solid var(--d72-line);
  background: #fff;
  overflow: auto;
}

.mc-d72-side header,
.mc-d72-preview header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--d72-line);
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.mc-d72-side section {
  padding: 12px 10px;
  border-bottom: 1px solid var(--d72-soft);
}

.mc-d72-side h4,
.mc-d72-preview h4 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 11px;
  line-height: 1.18;
  font-weight: 900;
}

.mc-d72-side p {
  margin: 0;
  color: #111827;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.mc-d72-side section button,
.mc-d72-side footer button,
.mc-d72-preview button {
  min-height: 32px;
  margin: 3px 0;
  padding: 2px 10px;
  border: 1.5px solid var(--d72-line);
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.mc-d72-side footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-top: 1.5px solid var(--d72-line);
  background: #fff;
}

.mc-d72-side footer span {
  align-self: center;
  font-size: 10px;
  font-weight: 800;
}

.mc-d72-preview {
  border-right: 0;
  padding-bottom: 10px;
}

.mc-d72-preview h4 {
  padding: 22px 10px 8px;
  text-align: center;
}

.mc-d72-preview__box {
  width: calc(100% - 28px);
  height: clamp(260px, 46vh, 420px);
  margin: 54px auto 14px;
  border: 1.5px solid var(--d72-line);
  background: #fff;
}

.mc-d72-preview button {
  display: block;
  margin: 0 auto;
}

@media (max-width: 1260px) {
  .mc-d72-workspace {
    grid-template-columns: minmax(500px, 1fr) 164px 150px;
  }
  .mc-d72-kitboxes {
    gap: 22px;
    padding-left: 26px;
    padding-right: 26px;
  }
  .mc-d72-kitbox {
    width: min(100%, 292px);
    height: clamp(304px, 50vh, 390px);
    padding: 52px 26px 30px;
  }
}

@media (max-width: 900px) {
  body.motta-order-page .mc-mode--corel-workspace .mc-customize {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
  body.motta-order-page .mc-mode--corel-workspace .mc-customize__left {
    min-height: 110px;
    border-right: 0;
    border-bottom: 1.5px solid var(--d72-line);
  }
  .mc-d72-workspace {
    min-height: 980px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(620px, auto) auto auto;
  }
  .mc-d72-kitboxes {
    grid-template-columns: 1fr;
    align-items: start;
    height: auto;
    padding: 58px 18px 72px;
  }
  .mc-d72-kitbox {
    height: 360px;
  }
  .mc-d72-side,
  .mc-d72-preview {
    border-top: 1.5px solid var(--d72-line);
    border-right: 0;
  }
  .mc-d72-zoom {
    position: fixed;
    width: min(240px, 72vw);
    height: min(370px, 62vh);
  }
}
/* === D72-COREL-KIT-WORKSPACE END === */

/* === D73-COREL-FIT-ENLARGE START === Grow every Corel page element while preserving full-page fit. */
@media (min-width: 901px) {
  body.motta-order-page .mc-mode--corel-workspace .mc-customize {
    grid-template-columns: clamp(170px, 12.6vw, 248px) minmax(0, 1fr);
  }

  .mc-d72-workspace {
    grid-template-columns: minmax(650px, 1fr) clamp(170px, 10.8vw, 210px) clamp(160px, 10vw, 196px);
  }

  .mc-d72-kitboxes {
    height: calc(100% - 38px);
    gap: clamp(28px, 4.5vw, 78px);
    padding: clamp(30px, 5.2vh, 68px) clamp(28px, 4.2vw, 82px) 48px;
  }

  .mc-d72-kitbox {
    width: min(100%, 426px);
    height: clamp(386px, 66vh, 548px);
    padding: clamp(54px, 8vh, 70px) clamp(30px, 2.5vw, 44px) clamp(30px, 5vh, 44px);
    border-radius: 38px;
  }

  .mc-d72-kitbox__title {
    top: clamp(42px, 7vh, 60px);
    font-size: 10px;
  }

  .mc-d72-kitbox__grid {
    gap: clamp(10px, 1.3vh, 15px) clamp(14px, 1.5vw, 22px);
  }

  .mc-d72-tile__change {
    min-height: 20px;
    padding: 2px 9px;
    font-size: 9px;
  }

  .mc-d72-tile > strong {
    padding: 5px 4px 7px;
    font-size: 11px;
  }

  .mc-d72-zoom {
    width: clamp(236px, 21vw, 326px);
    height: clamp(352px, 64vh, 486px);
  }

  .mc-d72-zoom > strong {
    font-size: clamp(18px, 1.35vw, 24px);
  }

  .mc-d72-gk-apply {
    top: clamp(18px, 4.6vh, 66px);
    left: clamp(58px, 5.5vw, 104px);
    height: 34px;
    font-size: 14px;
  }

  .mc-d72-kit-preview {
    right: clamp(170px, 16vw, 310px);
    min-height: 29px;
    font-size: 14px;
  }

  .mc-d72-pages button {
    min-height: 31px;
    padding: 3px 12px;
    font-size: 15px;
  }

  .mc-d72-side header,
  .mc-d72-preview header {
    font-size: 14px;
    padding: 7px 9px;
  }

  .mc-d72-side section {
    padding: 13px 11px;
  }

  .mc-d72-side h4,
  .mc-d72-preview h4 {
    font-size: 12px;
  }

  .mc-d72-side p {
    font-size: 11px;
  }

  .mc-d72-side section button,
  .mc-d72-side footer button,
  .mc-d72-preview button {
    min-height: 34px;
    font-size: 14px;
  }

  .mc-d72-preview__box {
    height: clamp(300px, 54vh, 500px);
  }
}

@media (min-width: 901px) and (max-width: 1380px) {
  .mc-d72-workspace {
    grid-template-columns: minmax(560px, 1fr) 166px 150px;
  }

  .mc-d72-kitboxes {
    gap: 24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .mc-d72-kitbox {
    width: min(100%, 348px);
    height: clamp(332px, 61vh, 430px);
    padding-left: 24px;
    padding-right: 24px;
  }

  .mc-d72-zoom {
    width: clamp(220px, 19vw, 274px);
    height: clamp(330px, 59vh, 410px);
  }

  .mc-d72-side header,
  .mc-d72-preview header {
    font-size: 12px;
  }

  .mc-d72-side p {
    font-size: 10px;
  }
}
/* === D73-COREL-FIT-ENLARGE END === */

/* === D74-COREL-TRAINING-CAMP-PAGES START === Page-specific Corel kit schema + compact live roster panel. */
body.motta-order-page .mc-mode--corel-workspace .mc-customize {
  height: 100%;
  min-height: 0;
}

body.motta-order-page .mc-mode--corel-workspace .mc-canvas__viewport.is-kit-studio {
  display: block;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}

body.motta-order-page .mc-mode--corel-workspace .mc-canvas__zoom-wrap {
  display: block;
  position: absolute !important;
  inset: 0;
  width: auto !important;
  height: auto !important;
  max-height: 100%;
  min-height: 0;
  overflow: hidden !important;
  transform: none !important;
}

.mc-d74-kadro-panel .mc-kadro-counters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.mc-d74-kadro-panel .mc-counter-cell {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 6px;
}

.mc-d74-kadro-panel .mc-counter-cell__label,
.mc-d72-side__muted {
  color: #697386;
  font-size: 10px;
  font-weight: 700;
}

.mc-d74-kadro-panel .mc-counter {
  min-height: 28px;
}

.mc-d74-kadro-panel .mc-counter__btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
}

.mc-d74-kadro-panel .mc-kadro-counters__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 7px;
}

.mc-d74-kadro-panel .mc-wiz-sizes,
.mc-d74-kadro-panel .mc-wiz-players {
  max-height: 168px;
  overflow: auto;
}

.mc-d74-kadro-panel .mc-cart-size-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-d74-kadro-panel .mc-smart-q {
  gap: 6px;
  padding: 6px 0;
}

.mc-d74-kadro-panel .mc-smart-q__text {
  font-size: 10.5px;
  line-height: 1.2;
}

.mc-d74-kadro-panel .mc-smart-q__opts {
  min-width: 92px;
}

.mc-d74-kadro-panel .mc-smart-q__opt {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 10px;
}

.mc-d74-kadro-panel .mc-label-controls__team-input {
  width: 100%;
  min-height: 30px;
  margin-top: 6px;
  font-size: 11px;
}

.mc-d74-side-roster .mc-player-list {
  max-height: 150px;
}

.mc-d74-side-roster .mc-player-row {
  min-height: 28px;
}

.mc-d74-player-preview {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-d74-player-preview li {
  display: grid;
  grid-template-columns: 18px 1fr 34px 34px;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  color: #111827;
  font-size: 10px;
}

.mc-d74-player-preview li.is-empty {
  display: block;
  padding: 18px 8px;
  color: #6b7280;
  text-align: center;
}

.mc-d74-player-preview span {
  color: #9a6a16;
  font-weight: 800;
}

.mc-d74-player-preview strong,
.mc-d74-player-preview em,
.mc-d74-player-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-d74-player-preview em,
.mc-d74-player-preview small {
  color: #6b7280;
  font-style: normal;
  text-align: right;
}

@media (min-width: 901px) and (max-height: 720px) {
  .mc-d74-kadro-panel .mc-wiz-sizes,
  .mc-d74-kadro-panel .mc-wiz-players,
  .mc-d74-side-roster .mc-player-list {
    max-height: 118px;
  }

  .mc-d74-kadro-panel .mc-cart-size-grid {
    gap: 4px;
  }
}
/* === D74-COREL-TRAINING-CAMP-PAGES END === */

/* === D75-GOOGLE-QUALITY-COREL-WORKSPACE START === Final premium SaaS skin for the Corel hierarchy. */
body.motta-order-page .mc-mode--corel-workspace {
  --d75-bg: #f8fafc;
  --d75-paper: #fffdf8;
  --d75-surface: rgba(255, 255, 255, 0.94);
  --d75-surface-soft: rgba(255, 255, 255, 0.72);
  --d75-line: #e5e7eb;
  --d75-line-strong: #cbd5e1;
  --d75-ink: #111827;
  --d75-muted: #667085;
  --d75-accent: #b9852f;
  --d75-accent-soft: #fff7e6;
  --d75-focus: #2563eb;
  --d75-zoom: #18d8df;
  --d72-line: var(--d75-line);
  --d72-soft: rgba(15, 23, 42, 0.08);
  --d72-paper: var(--d75-paper);
  --d72-zoom: var(--d75-zoom);
  color: var(--d75-ink);
}

body.motta-order-page .mc-mode--corel-workspace .mc-customize {
  grid-template-columns: clamp(132px, 10vw, 190px) minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  background:
    linear-gradient(180deg, #fbfaf7 0%, #f7f6f2 100%);
}

body.motta-order-page .mc-mode--corel-workspace .mc-customize__left {
  border-right: 1px solid var(--d75-line);
  background: rgba(255, 255, 255, 0.86);
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail,
body.motta-order-page .mc-mode--corel-workspace .mc-left-rail--d72-empty {
  background: transparent;
  overflow: hidden !important;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__d72-title {
  place-items: center start;
  padding: clamp(18px, 2.6vw, 34px);
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: clamp(20px, 1.45vw, 30px);
  line-height: 1.04;
  letter-spacing: 0;
}

body.motta-order-page .mc-mode--corel-workspace .mc-customize__canvas,
body.motta-order-page .mc-mode--corel-workspace .mc-canvas__viewport.is-kit-studio {
  background: transparent;
}

body.motta-order-page .mc-mode--corel-workspace .mc-canvas__zoom-wrap {
  position: absolute !important;
  inset: 0;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  transform: none !important;
}

.mc-d75-workspace {
  height: 100%;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 14vw, 270px) clamp(188px, 12vw, 232px) !important;
  background: transparent;
  border: 0;
}

.mc-d75-board {
  border-right: 1px solid var(--d75-line);
  background:
    radial-gradient(ellipse 56% 42% at 50% 54%, rgba(185, 133, 47, 0.075) 0%, transparent 70%),
    linear-gradient(180deg, #fffdf8 0%, #fbfaf6 100%);
}

.mc-d72-gk-apply {
  top: clamp(12px, 3.2vh, 34px) !important;
  left: clamp(38px, 4vw, 72px) !important;
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid var(--d75-line-strong) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
  color: var(--d75-ink) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

.mc-d72-kitboxes {
  height: calc(100% - 42px) !important;
  grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
  align-items: center;
  justify-items: center;
  gap: clamp(26px, 4vw, 72px) !important;
  padding: clamp(52px, 8vh, 78px) clamp(26px, 4vw, 74px) 52px !important;
}

.mc-d75-kitbox {
  width: min(100%, clamp(314px, 28vw, 430px)) !important;
  height: clamp(340px, 62vh, 520px) !important;
  padding: clamp(44px, 6.5vh, 58px) clamp(24px, 2.3vw, 36px) clamp(24px, 4vh, 38px) !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.06);
}

.mc-d72-kitbox__title {
  top: clamp(22px, 4vh, 38px) !important;
  max-width: calc(100% - 48px);
  overflow: hidden;
  color: var(--d75-muted);
  font-size: clamp(8px, 0.58vw, 10px) !important;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
}

.mc-d72-kitbox__grid {
  gap: clamp(8px, 1.1vh, 12px) clamp(10px, 1.2vw, 16px) !important;
}

.mc-d75-product-slot {
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 252, 246, 0.86));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
  overflow: hidden;
}

.mc-d75-product-slot:hover,
.mc-d75-product-slot:focus-visible {
  border-color: rgba(185, 133, 47, 0.55) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  outline: none;
}

.mc-d75-product-slot.is-active {
  border-color: rgba(185, 133, 47, 0.9) !important;
  outline: 0 !important;
  box-shadow:
    0 0 0 2px rgba(185, 133, 47, 0.16),
    0 18px 42px rgba(15, 23, 42, 0.09);
}

.mc-d75-product-slot.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, var(--d75-accent), transparent);
  pointer-events: none;
}

.mc-d72-tile__change {
  top: 8px !important;
  left: 8px !important;
  min-height: 22px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
  color: #344054 !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.mc-d72-tile__stage {
  padding: clamp(8px, 1vw, 12px);
}

.mc-d72-tile__empty {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 750;
}

.mc-d72-tile > strong {
  padding: 6px 6px 8px !important;
  color: #344054;
  font-size: clamp(9px, .72vw, 11px) !important;
  font-weight: 760;
}

.mc-d75-edit-layer {
  width: clamp(226px, 19vw, 304px) !important;
  height: clamp(328px, 59vh, 456px) !important;
  border: 1px solid rgba(12, 141, 148, 0.74) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(24, 216, 223, 0.96), rgba(22, 203, 210, 0.98)) !important;
  box-shadow:
    0 22px 70px rgba(8, 145, 178, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset !important;
}

.mc-d75-edit-layer::before,
.mc-d75-edit-layer::after {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
}

.mc-d72-zoom__tools {
  top: -30px !important;
  gap: 8px;
}

.mc-d72-zoom__tools button {
  min-height: 25px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(12, 141, 148, 0.72) !important;
  border-radius: 7px !important;
  background: rgba(236, 254, 255, 0.96) !important;
  color: #155e75 !important;
  font-size: 10px !important;
}

.mc-d72-zoom > strong {
  color: rgba(15, 23, 42, 0.92);
  font-size: clamp(17px, 1.25vw, 22px) !important;
  line-height: 1.08;
}

.mc-d72-kit-preview {
  right: clamp(180px, 17vw, 310px) !important;
  bottom: 10px !important;
  min-height: 30px !important;
  padding: 4px 16px !important;
  border: 1px solid rgba(185, 133, 47, 0.6) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  color: #7a4b08 !important;
  font-size: 13px !important;
}

.mc-d75-page-tabs {
  left: 0;
  bottom: 0;
  gap: 0;
}

.mc-d75-page-tabs button {
  min-height: 30px !important;
  padding: 3px 12px !important;
  border: 1px solid var(--d75-line-strong) !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #344054 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

.mc-d75-page-tabs button.is-active {
  background: var(--d75-accent-soft) !important;
  color: #7a4b08 !important;
  box-shadow: inset 0 2px 0 var(--d75-accent);
}

.mc-d75-roster-panel,
.mc-d75-preview-panel {
  border-right: 0 !important;
  border-left: 1px solid var(--d75-line) !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

.mc-d75-roster-panel header,
.mc-d75-preview-panel header {
  min-height: 42px;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--d75-line) !important;
  color: #0f172a;
  font-size: 12px !important;
  letter-spacing: 0;
}

.mc-d75-roster-panel section {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86) !important;
}

.mc-d75-roster-panel h4,
.mc-d75-preview-panel h4 {
  margin-bottom: 8px !important;
  color: #111827;
  font-size: 11px !important;
  line-height: 1.2;
  letter-spacing: 0;
}

.mc-d75-roster-panel p {
  color: var(--d75-muted);
  font-size: 10.5px !important;
  line-height: 1.35;
}

.mc-d75-roster-panel .mc-counter-cell {
  grid-template-columns: 56px 1fr;
}

.mc-d75-roster-panel .mc-counter,
.mc-d75-roster-panel .mc-kadro-counters__total,
.mc-d75-preview-panel .mc-d72-preview__box {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.8);
}

.mc-d75-roster-panel .mc-counter__btn,
.mc-d75-roster-panel .mc-smart-q__opt,
.mc-d75-roster-panel section button,
.mc-d75-roster-panel footer button,
.mc-d75-preview-panel button {
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.mc-d75-roster-panel .mc-smart-q__opt.is-active,
.mc-d75-roster-panel section button:hover,
.mc-d75-preview-panel button:hover {
  border-color: rgba(185, 133, 47, 0.7) !important;
  background: var(--d75-accent-soft) !important;
  color: #7a4b08 !important;
}

.mc-d75-roster-panel .mc-wiz-sizes,
.mc-d75-roster-panel .mc-wiz-players {
  max-height: clamp(96px, 18vh, 172px);
}

.mc-d75-roster-panel .mc-player-row {
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.mc-d75-roster-panel .mc-label-controls__team-input {
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: #fff;
}

.mc-d75-roster-panel footer {
  border-top: 1px solid var(--d75-line) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.mc-d75-preview-panel h4 {
  padding: 18px 12px 8px !important;
}

.mc-d75-preview-panel .mc-d72-preview__box {
  width: calc(100% - 24px);
  height: clamp(230px, 42vh, 382px) !important;
  margin: 28px auto 12px !important;
}

.mc-d75-player-preview li,
.mc-d74-player-preview li {
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  body.motta-order-page .mc-mode--corel-workspace .mc-customize {
    grid-template-columns: clamp(118px, 10vw, 146px) minmax(0, 1fr) !important;
  }

  .mc-d75-workspace {
    grid-template-columns: minmax(0, 1fr) 196px 164px !important;
  }

  .mc-d72-kitboxes {
    gap: clamp(18px, 2.6vw, 32px) !important;
    padding: 42px 22px 42px !important;
  }

  .mc-d75-kitbox {
    width: min(100%, 330px) !important;
    height: clamp(276px, 51vh, 350px) !important;
    padding: 40px 20px 22px !important;
    border-radius: 20px !important;
  }

  .mc-d72-kitbox__title {
    top: 24px !important;
    font-size: 8px !important;
  }

  .mc-d72-tile__change {
    top: 6px !important;
    left: 6px !important;
    min-height: 19px !important;
    padding: 2px 6px !important;
    font-size: 8px !important;
  }

  .mc-d72-tile > strong {
    padding: 4px 4px 6px !important;
    font-size: 9px !important;
  }

  .mc-d75-edit-layer {
    width: clamp(196px, 18vw, 236px) !important;
    height: clamp(286px, 50vh, 338px) !important;
  }

  .mc-d72-kit-preview {
    right: 168px !important;
    bottom: 8px !important;
    min-height: 27px !important;
    font-size: 12px !important;
  }

  .mc-d75-page-tabs button {
    min-height: 27px !important;
    padding: 2px 9px !important;
    font-size: 11px !important;
  }

  .mc-d75-roster-panel header,
  .mc-d75-preview-panel header {
    min-height: 36px;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  .mc-d75-roster-panel section {
    padding: 8px 10px !important;
  }

  .mc-d75-roster-panel .mc-wiz-sizes,
  .mc-d75-roster-panel .mc-wiz-players,
  .mc-d75-side-roster .mc-player-list {
    max-height: 108px !important;
  }

  .mc-d75-preview-panel .mc-d72-preview__box {
    height: clamp(210px, 38vh, 292px) !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 900px) {
  body.motta-order-page .mc-mode--corel-workspace .mc-customize {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: auto !important;
  }

  .mc-d75-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    min-height: 0 !important;
  }

  .mc-d75-board {
    min-height: 760px;
    border-right: 0;
    border-bottom: 1px solid var(--d75-line);
  }

  .mc-d72-kitboxes {
    height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 58px 16px 60px !important;
  }

  .mc-d75-kitbox {
    height: 348px !important;
    width: min(100%, 360px) !important;
  }

  .mc-d75-edit-layer {
    position: fixed !important;
    width: min(250px, 72vw) !important;
    height: min(370px, 58vh) !important;
  }

  .mc-d75-roster-panel,
  .mc-d75-preview-panel {
    border-left: 0 !important;
    border-top: 1px solid var(--d75-line) !important;
  }
}
/* === D75-GOOGLE-QUALITY-COREL-WORKSPACE END === */

/* === D76-COREL-SINGLE-FACE-WIZARD START === Tek yuz kartlar, gercek magazalar ve kompakt siparis sihirbazi. */
body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__head {
  display: flex !important;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail--d76-store {
  height: 100%;
  padding: 12px 10px;
  gap: 10px;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail--d76-store .mc-left-rail__d72-title {
  display: none !important;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__head {
  padding: 0 0 10px;
  margin: 0;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff7e6;
  color: #8a5a12;
  font-size: 13px;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__title {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__empty {
  padding: 14px 8px;
  border: 1px dashed rgba(185, 133, 47, .32);
  border-radius: 12px;
  background: rgba(255, 247, 230, .52);
  color: #667085;
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__list {
  overflow: auto;
  padding-right: 2px;
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__card {
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 7px;
  padding: 7px;
  border-color: rgba(226, 232, 240, .88);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

body.motta-order-page .mc-mode--corel-workspace .mc-left-rail__art {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.mc-d76-single-face-slot {
  min-height: 0;
}

.mc-d72-kitbox__grid {
  grid-template-columns: 1.22fr .9fr !important;
  grid-template-rows: 1fr 1fr !important;
}

.mc-d76-single-face-slot:first-child {
  grid-row: 1 / span 2;
}

.mc-d76-single-face-slot .mc-d72-tile__stage {
  padding: clamp(5px, .75vw, 10px) !important;
}

.mc-d76-single-face-slot:first-child .mc-d72-tile__stage {
  padding: clamp(4px, .65vw, 8px) !important;
}

.mc-d76-single-face-slot .mc-canvas__layers svg,
.mc-d76-single-face-slot .mc-canvas__layers img {
  max-width: 100%;
  max-height: 100%;
}

.mc-d76-view-chip {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  min-width: 30px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #475467;
  font-size: 9px;
  font-weight: 800;
}

.mc-d76-zoom-close {
  position: absolute;
  z-index: 7;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(12, 141, 148, .55);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #155e75;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.mc-d76-zoom-close:hover {
  background: #fff;
  color: #0f172a;
}

.mc-d76-order-wizard header {
  display: block;
  padding: 9px 10px !important;
}

.mc-d76-wizard-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mc-d76-wizard-step {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 6px;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 10px;
  background: rgba(248, 250, 252, .78);
  color: #475467;
  text-align: left;
  cursor: pointer;
}

.mc-d76-wizard-step strong {
  overflow: hidden;
  color: #111827;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mc-d76-wizard-step span {
  overflow: hidden;
  color: #667085;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mc-d76-wizard-step.is-active {
  border-color: rgba(185, 133, 47, .74);
  background: #fff7e6;
  box-shadow: inset 0 2px 0 #b9852f;
}

.mc-d76-wizard-body {
  min-height: 0;
  overflow: auto;
}

.mc-d76-wizard-panel {
  padding: 10px 12px !important;
}

.mc-d76-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mc-d76-panel-head h4 {
  margin: 0 !important;
  font-size: 12px !important;
}

.mc-d76-panel-head span {
  color: #667085;
  font-size: 10px;
  font-weight: 750;
}

.mc-d76-smart-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.mc-d76-gk-model-btn,
.mc-d76-final-actions button {
  width: 100%;
  min-height: 32px;
  margin-top: 8px;
}

.mc-d76-color-summary {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.mc-d76-color-summary span,
.mc-d76-sponsor-summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 10px;
  background: rgba(248, 250, 252, .72);
  color: #475467;
  font-size: 10px;
  font-weight: 750;
}

.mc-d76-color-summary i {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
}

.mc-d76-sponsor-summary {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-d76-sponsor-summary strong {
  color: #98a2b3;
  font-size: 9px;
}

.mc-d76-sponsor-summary li.is-ready strong {
  color: #079455;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d75-kitbox {
    width: min(100%, 360px) !important;
  }

  .mc-d72-kitbox__grid {
    gap: 8px !important;
  }

  .mc-d76-wizard-step {
    min-height: 38px;
    padding: 5px;
  }

  .mc-d76-wizard-step strong {
    font-size: 9px;
  }

  .mc-d76-wizard-step span {
    font-size: 8px;
  }
}

@media (max-width: 900px) {
  .mc-d72-kitbox__grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .mc-d76-single-face-slot:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}
/* === D76-COREL-SINGLE-FACE-WIZARD END === */

/* === D77-COREL-RESTORE-FRONT-BACK-GRID START === Front/back kartlari geri; sadece alt label karti temizlendi. */
.mc-d72-kitbox__grid {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: clamp(10px, 1.4vh, 14px) clamp(12px, 1.2vw, 16px) !important;
}

.mc-d76-single-face-slot:first-child,
.mc-d77-product-slot:first-child {
  grid-row: auto !important;
}

.mc-d77-product-slot {
  display: grid !important;
  grid-template-rows: 1fr !important;
  min-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .76) !important;
}

.mc-d77-product-slot .mc-d72-tile__stage {
  height: 100%;
  padding: clamp(5px, .7vw, 9px) clamp(5px, .7vw, 9px) 22px !important;
}

.mc-d77-product-slot .mc-d72-tile__empty {
  min-height: 0;
  padding-bottom: 22px;
}

.mc-d77-product-slot > strong {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 6px;
  max-width: calc(100% - 18px);
  padding: 3px 9px !important;
  transform: translateX(-50%);
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: none;
  color: #344054 !important;
  font-size: clamp(8px, .62vw, 10px) !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.mc-d77-product-slot .mc-d76-view-chip {
  top: 8px;
  right: 8px;
  min-width: 28px;
  min-height: 18px;
  padding: 1px 6px;
  font-size: 8px;
}

.mc-d77-product-slot .mc-canvas__layers svg,
.mc-d77-product-slot .mc-canvas__layers img {
  max-width: 100%;
  max-height: 100%;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d72-kitbox__grid {
    gap: 8px 10px !important;
  }

  .mc-d77-product-slot .mc-d72-tile__stage {
    padding: 4px 4px 20px !important;
  }

  .mc-d77-product-slot > strong {
    bottom: 5px;
    padding: 2px 7px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 900px) {
  .mc-d77-product-slot:first-child {
    grid-column: auto !important;
  }
}
/* === D77-COREL-RESTORE-FRONT-BACK-GRID END === */

/* === D78-GOOGLE-QUALITY-ICON-CARDS START === Icon-only, textless product cards. */
.mc-d78-sr-label,
.mc-d77-product-slot > strong.mc-d78-sr-label,
.mc-d77-product-slot .mc-d76-view-chip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mc-d77-product-slot {
  background: rgba(255, 255, 255, .68) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
}

.mc-d77-product-slot:hover,
.mc-d77-product-slot:focus-visible {
  border-color: rgba(185, 133, 47, .52) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .075) !important;
}

.mc-d77-product-slot.is-active {
  border-color: rgba(185, 133, 47, .86) !important;
  box-shadow:
    0 0 0 1px rgba(185, 133, 47, .28),
    0 18px 42px rgba(15, 23, 42, .08) !important;
}

.mc-d75-product-slot.is-active::after,
.mc-d77-product-slot::after {
  display: none !important;
  content: none !important;
}

.mc-d77-product-slot .mc-d72-tile__stage {
  padding: clamp(3px, .5vw, 7px) !important;
}

.mc-d77-product-slot .mc-d72-tile__empty {
  min-height: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(148, 163, 184, .08), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .14));
}

.mc-d77-product-slot .mc-d72-tile__empty span,
.mc-d77-product-slot > strong:not(.mc-d78-sr-label) {
  display: none !important;
}

.mc-d77-product-slot .mc-canvas__layers svg,
.mc-d77-product-slot .mc-canvas__layers img {
  max-width: 104%;
  max-height: 104%;
}

.mc-d78-icon-action,
.mc-d78-card-zoom {
  position: absolute;
  z-index: 6;
  width: clamp(26px, 1.85vw, 30px) !important;
  height: clamp(26px, 1.85vw, 30px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .34) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .9)) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .1) !important;
  color: #334155 !important;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, background .14s ease;
}

.mc-d78-icon-action {
  top: 7px !important;
  left: 7px !important;
}

.mc-d78-card-zoom {
  top: 7px;
  right: 7px;
}

.mc-d78-icon-action svg,
.mc-d78-card-zoom svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-d78-icon-action:hover,
.mc-d78-icon-action:focus-visible,
.mc-d78-card-zoom:hover,
.mc-d78-card-zoom:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(185, 133, 47, .55) !important;
  color: #9a6a16 !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .14) !important;
  outline: none;
}

.mc-d78-card-zoom.is-disabled,
.mc-d78-card-zoom:disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
  box-shadow: none !important;
}

.mc-d78-card-zoom.is-disabled svg,
.mc-d78-card-zoom:disabled svg {
  stroke-width: 1.8;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d77-product-slot .mc-d72-tile__stage {
    padding: 3px !important;
  }

  .mc-d78-icon-action,
  .mc-d78-card-zoom {
    width: 25px !important;
    height: 25px !important;
  }

  .mc-d78-icon-action svg,
  .mc-d78-card-zoom svg {
    width: 12px;
    height: 12px;
  }
}

/* === D78-GOOGLE-QUALITY-ICON-CARDS END === */

/* === D78B-BORDERLESS-COLOR-ZOOM START === Remove product borders and make zoom affordance vivid. */
.mc-d77-product-slot,
.mc-d77-product-slot:hover,
.mc-d77-product-slot:focus-visible,
.mc-d77-product-slot.is-active {
  border: 0 !important;
  outline: 0 !important;
}

.mc-d77-product-slot {
  background: rgba(255, 255, 255, .56) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .035) !important;
}

.mc-d77-product-slot:hover,
.mc-d77-product-slot:focus-visible {
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 24px 52px rgba(15, 23, 42, .095) !important;
}

.mc-d77-product-slot.is-active {
  background: rgba(255, 255, 255, .82) !important;
  box-shadow:
    0 20px 54px rgba(185, 133, 47, .16),
    0 10px 26px rgba(15, 23, 42, .06) !important;
}

.mc-d77-product-slot .mc-canvas__layers,
.mc-d77-product-slot .mc-canvas__layers svg,
.mc-d77-product-slot .mc-canvas__layers img {
  transform-origin: 50% 50%;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .18s ease;
  will-change: transform;
}

.mc-d77-product-slot:hover .mc-canvas__layers,
.mc-d77-product-slot:focus-visible .mc-canvas__layers {
  transform: scale(1.055);
  filter: saturate(1.04) contrast(1.02);
}

.mc-d78-card-zoom {
  border: 0 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .94), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #0ea5e9 0%, #14b8a6 46%, #c9972d 100%) !important;
  color: #fff !important;
  box-shadow:
    0 10px 20px rgba(14, 165, 233, .2),
    0 12px 26px rgba(185, 133, 47, .22) !important;
}

.mc-d78-card-zoom:hover,
.mc-d78-card-zoom:focus-visible {
  transform: translateY(-2px) scale(1.12);
  color: #fff !important;
  box-shadow:
    0 14px 30px rgba(14, 165, 233, .28),
    0 18px 36px rgba(185, 133, 47, .28) !important;
}

.mc-d78-card-zoom svg {
  stroke-width: 2.35;
}

.mc-d78-card-zoom.is-disabled,
.mc-d78-card-zoom:disabled {
  background: rgba(148, 163, 184, .18) !important;
  color: rgba(71, 85, 105, .55) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mc-d77-product-slot .mc-canvas__layers,
  .mc-d77-product-slot .mc-canvas__layers svg,
  .mc-d77-product-slot .mc-canvas__layers img,
  .mc-d78-card-zoom {
    transition: none !important;
  }

  .mc-d77-product-slot:hover .mc-canvas__layers,
  .mc-d77-product-slot:focus-visible .mc-canvas__layers,
  .mc-d78-card-zoom:hover,
  .mc-d78-card-zoom:focus-visible {
    transform: none !important;
  }
}

/* === D78B-BORDERLESS-COLOR-ZOOM END === */

/* === D78C-TRANSPARENT-KITBOX-GOOGLE-ZOOM START === Remove kitbox tint and refine zoom affordance. */
.mc-d72-kitbox,
.mc-d75-kitbox,
.mc-d72-kitbox.mc-d75-kitbox,
.mc-d72-kitbox.mc-d75-kitbox.mc-d72-kitbox--player,
.mc-d72-kitbox.mc-d75-kitbox.mc-d72-kitbox--gk {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.mc-d72-kitbox::before,
.mc-d72-kitbox::after,
.mc-d75-kitbox::before,
.mc-d75-kitbox::after {
  display: none !important;
  content: none !important;
}

.mc-d78-card-zoom {
  width: clamp(28px, 1.95vw, 32px) !important;
  height: clamp(28px, 1.95vw, 32px) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .96) 0 12%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #1a73e8 0%, #0ea5e9 48%, #34a853 100%) !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .64) inset,
    0 8px 18px rgba(26, 115, 232, .22),
    0 14px 30px rgba(15, 23, 42, .12) !important;
}

.mc-d78-card-zoom::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(26, 115, 232, .22), rgba(52, 168, 83, .18));
  opacity: 0;
  transform: scale(.86);
  transition: opacity .18s ease, transform .18s ease;
}

.mc-d78-card-zoom:hover,
.mc-d78-card-zoom:focus-visible {
  transform: translateY(-2px) scale(1.14);
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .72) inset,
    0 10px 24px rgba(26, 115, 232, .28),
    0 18px 38px rgba(15, 23, 42, .16) !important;
}

.mc-d78-card-zoom:hover::after,
.mc-d78-card-zoom:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.mc-d78-card-zoom svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .18));
}

.mc-d78-card-zoom.is-disabled,
.mc-d78-card-zoom:disabled {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(148, 163, 184, .14) !important;
  box-shadow: none !important;
}

.mc-d78-card-zoom.is-disabled::after,
.mc-d78-card-zoom:disabled::after {
  display: none !important;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d78-card-zoom {
    width: 27px !important;
    height: 27px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-d78-card-zoom::after {
    transition: none !important;
  }
}

/* === D78C-TRANSPARENT-KITBOX-GOOGLE-ZOOM END === */

/* === D78D-MATERIAL-ZOOM-AFFORDANCE START === Premium Google-style elevated zoom control. */
.mc-d78-card-zoom {
  width: clamp(30px, 2vw, 34px) !important;
  height: clamp(30px, 2vw, 34px) !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)) padding-box,
    conic-gradient(from 220deg, #1a73e8, #34a853, #fbbc04, #1a73e8) border-box !important;
  color: #1a73e8 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .08),
    0 10px 24px rgba(15, 23, 42, .13),
    0 0 0 1px rgba(255, 255, 255, .72) inset !important;
  backdrop-filter: blur(10px) saturate(1.18);
}

.mc-d78-card-zoom::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(26, 115, 232, .22) 0%, rgba(52, 168, 83, .12) 38%, transparent 68%);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

.mc-d78-card-zoom:hover,
.mc-d78-card-zoom:focus-visible {
  transform: translateY(-2px) scale(1.12);
  color: #1558d6 !important;
  background:
    linear-gradient(180deg, #ffffff, #f4f8ff) padding-box,
    conic-gradient(from 220deg, #1a73e8, #34a853, #fbbc04, #1a73e8) border-box !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .10),
    0 16px 34px rgba(26, 115, 232, .22),
    0 0 0 1px rgba(255, 255, 255, .84) inset !important;
}

.mc-d78-card-zoom:hover::after,
.mc-d78-card-zoom:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.mc-d78-card-zoom svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.45;
  filter: none;
}

.mc-d78-card-zoom.is-disabled,
.mc-d78-card-zoom:disabled {
  border-color: rgba(203, 213, 225, .5) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: rgba(100, 116, 139, .58) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
}

.mc-d78-card-zoom.is-disabled::after,
.mc-d78-card-zoom:disabled::after {
  display: none !important;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d78-card-zoom {
    width: 29px !important;
    height: 29px !important;
  }

  .mc-d78-card-zoom svg {
    width: 13px;
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-d78-card-zoom::after {
    transition: none !important;
  }
}

/* === D78D-MATERIAL-ZOOM-AFFORDANCE END === */

/* === D79-COREL-ACTION-DOCK-PLUS-SLOTS START === Central action dock and removable slot flow. */
.mc-d79-action-dock {
  position: absolute;
  z-index: 32;
  top: clamp(16px, 2.3vh, 26px);
  left: clamp(72px, 6.5vw, 126px);
  width: min(420px, 34vw);
  min-height: clamp(78px, 13vh, 126px);
  pointer-events: none;
}

.mc-d79-action-dock.is-empty {
  opacity: 0;
}

.mc-d79-action-dock.is-open {
  pointer-events: auto;
}

.mc-d79-action-dock .mc-popover {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: min(100%, 420px) !important;
  max-height: clamp(128px, 28vh, 240px) !important;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 18px 44px rgba(15, 23, 42, .12);
  backdrop-filter: blur(12px) saturate(1.12);
}

.mc-d79-action-dock .mc-popover__head {
  min-height: 44px;
  padding: 10px 13px;
}

.mc-d79-action-dock .mc-popover__body {
  padding: 12px 13px 14px;
}

.mc-d79-action-dock .mc-pop-upload__btn {
  border-radius: 10px;
  background: #111111;
  box-shadow: 0 8px 18px rgba(17, 17, 17, .12);
}

.mc-d79-action-dock .mc-pop-thumb img {
  max-height: 84px;
}

.mc-d79-slot-add {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 46%, rgba(26, 115, 232, .08), transparent 35%),
    rgba(255, 255, 255, .42);
  color: #1a73e8;
  cursor: pointer;
}

.mc-d79-slot-add svg {
  width: clamp(28px, 3vw, 42px);
  height: clamp(28px, 3vw, 42px);
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .08),
    0 10px 24px rgba(26, 115, 232, .12);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
}

.mc-d79-slot-add:hover svg,
.mc-d79-slot-add:focus-visible svg {
  transform: translateY(-1px) scale(1.08);
  color: #1558d6;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .08),
    0 14px 30px rgba(26, 115, 232, .18);
}

.mc-d79-slot-add:focus-visible {
  outline: none;
}

.mc-d79-slot-remove {
  position: absolute;
  z-index: 7;
  right: 7px;
  bottom: 7px;
  width: clamp(25px, 1.8vw, 29px);
  height: clamp(25px, 1.8vw, 29px);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(203, 213, 225, .68);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #64748b;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  cursor: pointer;
  opacity: .74;
  transition: opacity .14s ease, transform .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.mc-d79-slot-remove svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.mc-d79-slot-remove:hover,
.mc-d79-slot-remove:focus-visible {
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(239, 68, 68, .28);
  color: #dc2626;
  box-shadow: 0 12px 24px rgba(220, 38, 38, .12);
  outline: none;
}

.mc-d77-product-slot.is-empty {
  background: rgba(255, 255, 255, .34) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .025) !important;
}

.mc-d77-product-slot.is-empty .mc-d72-tile__empty {
  background: transparent !important;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d79-action-dock {
    top: 10px;
    left: clamp(48px, 5vw, 86px);
    width: min(360px, 32vw);
    min-height: 70px;
  }

  .mc-d79-action-dock .mc-popover {
    max-height: 190px !important;
  }
}

@media (max-width: 900px) {
  .mc-d79-action-dock {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 0;
    padding: 0 12px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-d79-slot-add svg,
  .mc-d79-slot-remove {
    transition: none !important;
  }
}

/* === D79-COREL-ACTION-DOCK-PLUS-SLOTS END === */

/* === D80-COREL-TOOLBAR-SET-COPIES START === Corel toolbar, larger cards, and forma set copies. */
.mc-d72-gk-apply {
  display: none !important;
}

.mc-d75-board {
  display: flex !important;
  flex-direction: column;
  gap: clamp(8px, 1.1vh, 12px);
  padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.4vw, 22px) 36px;
  overflow: hidden;
}

.mc-d80-set-menu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 2px;
}

.mc-d80-set-menu button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #334155;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  cursor: pointer;
}

.mc-d80-set-menu button.is-active {
  border-color: rgba(185, 133, 47, .62);
  background: #fff7e6;
  color: #7a4b08;
  box-shadow: 0 8px 18px rgba(185, 133, 47, .12);
}

.mc-d80-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(140px, .72fr) minmax(0, 2.2fr) minmax(260px, .95fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 16px 40px rgba(15, 23, 42, .055);
  backdrop-filter: blur(12px) saturate(1.12);
}

.mc-d80-toolbar__context {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mc-d80-toolbar__context span {
  color: #b9852f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.mc-d80-toolbar__context strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-d80-toolbar__tools {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mc-d80-tool {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(203, 213, 225, .76);
  border-radius: 12px;
  background: rgba(248, 250, 252, .86);
  color: #334155;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.mc-d80-tool:hover,
.mc-d80-tool:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(26, 115, 232, .42);
  background: #fff;
  color: #1558d6;
  box-shadow: 0 10px 20px rgba(26, 115, 232, .10);
  outline: none;
}

.mc-d80-tool:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.mc-d80-tool svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-d80-toolbar__inputs {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.mc-d80-team-input {
  flex: 1 1 110px;
  min-width: 90px;
  max-width: 170px;
  display: grid;
  gap: 2px;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.mc-d80-team-input input {
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 720;
  padding: 0 9px;
  outline: none;
}

.mc-d80-team-input input:focus {
  border-color: rgba(26, 115, 232, .52);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .10);
}

.mc-d80-mini-counter {
  flex: 0 0 auto;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto 26px 26px 26px;
  align-items: center;
  gap: 4px;
  padding: 3px 5px 3px 8px;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 12px;
  background: rgba(248, 250, 252, .84);
}

.mc-d80-mini-counter span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.mc-d80-mini-counter strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 860;
  text-align: center;
}

.mc-d80-mini-counter button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.mc-d80-mini-counter button:disabled {
  opacity: .42;
  cursor: default;
}

.mc-d72-kitboxes {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: clamp(20px, 3.1vw, 54px) !important;
  padding: clamp(6px, 1.2vh, 12px) clamp(14px, 2.4vw, 44px) 4px !important;
}

.mc-d75-kitbox {
  width: min(100%, clamp(390px, 35vw, 560px)) !important;
  height: clamp(420px, 70vh, 640px) !important;
  padding: clamp(30px, 4.6vh, 46px) clamp(16px, 1.8vw, 28px) clamp(16px, 2.2vh, 26px) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mc-d72-kitbox__title {
  top: clamp(8px, 1.6vh, 16px) !important;
  color: #667085 !important;
}

.mc-d72-kitbox__grid {
  gap: clamp(10px, 1.6vh, 18px) clamp(12px, 1.5vw, 22px) !important;
}

.mc-d77-product-slot {
  border: 0 !important;
  background: rgba(255, 255, 255, .66) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .05) !important;
  border-radius: 16px !important;
}

.mc-d77-product-slot:hover,
.mc-d77-product-slot:focus-visible {
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 24px 58px rgba(15, 23, 42, .09) !important;
}

.mc-d77-product-slot.is-active {
  background: rgba(255, 255, 255, .90) !important;
  box-shadow:
    0 0 0 1px rgba(185, 133, 47, .46),
    0 24px 62px rgba(185, 133, 47, .16),
    0 14px 34px rgba(15, 23, 42, .08) !important;
}

.mc-d77-product-slot::after,
.mc-d75-product-slot.is-active::after {
  display: none !important;
  content: none !important;
}

.mc-d77-product-slot .mc-d72-tile__stage {
  padding: 0 !important;
}

.mc-d77-product-slot .mc-canvas__layers svg,
.mc-d77-product-slot .mc-canvas__layers img {
  max-width: 100% !important;
  max-height: 100% !important;
}

.mc-d78-icon-action,
.mc-d78-card-zoom {
  z-index: 8;
}

.mc-d78-card-zoom {
  width: clamp(34px, 2.25vw, 40px) !important;
  height: clamp(34px, 2.25vw, 40px) !important;
}

.mc-d80-board-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 2px 0 0;
}

.mc-d80-footer-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(203, 213, 225, .84);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: #334155;
  font-size: 12px;
  font-weight: 820;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  cursor: pointer;
}

.mc-d80-footer-btn--preview {
  border-color: rgba(185, 133, 47, .58);
  background: linear-gradient(180deg, #fff9ed, #fff);
  color: #7a4b08;
}

.mc-d80-footer-btn:hover,
.mc-d80-footer-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
  outline: none;
}

.mc-d80-footer-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-d75-page-tabs {
  position: absolute !important;
  left: 10px !important;
  bottom: 4px !important;
}

.mc-d79-action-dock {
  top: clamp(96px, 15vh, 138px) !important;
  left: clamp(64px, 5.2vw, 108px) !important;
  width: min(420px, 32vw) !important;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d75-board {
    gap: 6px;
    padding: 8px 10px 31px;
  }

  .mc-d80-set-menu {
    min-height: 26px;
  }

  .mc-d80-set-menu button {
    min-height: 25px;
    padding: 0 9px;
    font-size: 11px;
  }

  .mc-d80-toolbar {
    grid-template-columns: minmax(104px, .58fr) minmax(0, 2fr) minmax(226px, .9fr);
    gap: 6px;
    padding: 6px 7px;
    border-radius: 14px;
  }

  .mc-d80-toolbar__context span {
    font-size: 8px;
  }

  .mc-d80-toolbar__context strong {
    font-size: 11px;
  }

  .mc-d80-tool {
    min-height: 28px;
    padding: 0 7px;
    gap: 4px;
    font-size: 10px;
  }

  .mc-d80-tool svg {
    width: 13px;
    height: 13px;
  }

  .mc-d80-team-input {
    max-width: 132px;
  }

  .mc-d80-team-input input,
  .mc-d80-mini-counter {
    min-height: 28px;
  }

  .mc-d80-mini-counter {
    grid-template-columns: auto 22px 22px 22px;
    gap: 3px;
    padding: 2px 4px 2px 6px;
  }

  .mc-d80-mini-counter button {
    width: 21px;
    height: 21px;
  }

  .mc-d72-kitboxes {
    grid-template-columns: repeat(2, minmax(270px, 1fr)) !important;
    gap: clamp(14px, 2vw, 24px) !important;
    padding: 4px 10px 0 !important;
  }

  .mc-d75-kitbox {
    width: min(100%, 392px) !important;
    height: clamp(350px, 58vh, 402px) !important;
    padding: 24px 10px 12px !important;
  }

  .mc-d72-kitbox__grid {
    gap: 8px 10px !important;
  }

  .mc-d80-board-footer {
    min-height: 34px;
    gap: 8px;
  }

  .mc-d80-footer-btn {
    min-height: 30px;
    padding: 0 12px;
    font-size: 11px;
  }

  .mc-d75-page-tabs button {
    min-height: 25px !important;
  }

  .mc-d79-action-dock {
    top: 72px !important;
    left: 40px !important;
    width: min(360px, 34vw) !important;
  }
}

@media (max-width: 900px) {
  .mc-d75-board {
    padding: 10px 10px 40px;
    overflow: visible;
  }

  .mc-d80-set-menu {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mc-d80-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mc-d80-toolbar__tools {
    padding-bottom: 2px;
  }

  .mc-d80-toolbar__inputs {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .mc-d72-kitboxes {
    grid-template-columns: 1fr !important;
    padding: 8px 8px 6px !important;
  }

  .mc-d75-kitbox {
    width: min(100%, 520px) !important;
    height: clamp(410px, 62vh, 560px) !important;
  }

  .mc-d80-board-footer {
    justify-content: flex-start;
    padding-left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-d80-tool,
  .mc-d80-footer-btn {
    transition: none !important;
  }

  .mc-d80-tool:hover,
  .mc-d80-tool:focus-visible,
  .mc-d80-footer-btn:hover,
  .mc-d80-footer-btn:focus-visible {
    transform: none !important;
  }
}
/* === D80-COREL-TOOLBAR-SET-COPIES END === */

/* === D81-GOOGLE-PREMIUM-TOOLBAR-SETS START === */
.mc-d81-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(226, 232, 240, .88) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)),
    rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .07) !important;
  backdrop-filter: blur(14px) saturate(1.12);
}

.mc-d81-toolbar .mc-d80-toolbar__context {
  flex: 0 0 auto !important;
  min-width: 112px !important;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.mc-d81-toolbar .mc-d80-toolbar__context span {
  color: #a16207 !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.mc-d81-toolbar .mc-d80-toolbar__context strong {
  max-width: 132px !important;
  color: #111827 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mc-d81-toolbar .mc-d80-toolbar__tools {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding: 2px 2px 3px !important;
  scrollbar-width: thin;
}

.mc-d81-toolbar .mc-d80-toolbar__inputs {
  display: none !important;
}

.mc-d81-toolbar .mc-d80-tool {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .90) !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.mc-d81-toolbar .mc-d80-tool svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.1 !important;
}

.mc-d81-toolbar .mc-d80-tool:hover,
.mc-d81-toolbar .mc-d80-tool:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .38) !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
  outline: none !important;
}

.mc-d81-toolbar .mc-d80-tool.is-ready {
  border-color: rgba(13, 148, 136, .40) !important;
  background: linear-gradient(180deg, #f0fdfa, #fff) !important;
  color: #0f766e !important;
}

.mc-d81-toolbar .mc-d80-tool.is-ready::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}

.mc-d81-set-palette {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 6px 10px;
  border: 1px solid rgba(226, 232, 240, .75);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.mc-d81-set-palette__head {
  display: grid;
  gap: 2px;
  min-width: 112px;
}

.mc-d81-set-palette__head strong {
  color: #111827;
  font-size: 12px;
  font-weight: 820;
}

.mc-d81-set-palette__head span {
  color: #a16207;
  font-size: 10px;
  font-weight: 760;
}

.mc-d81-set-palette__colors {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.mc-d81-set-color {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 128px;
  padding: 5px 8px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 999px;
  background: #fff;
}

.mc-d81-set-color input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.mc-d81-set-color span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.mc-d81-set-color strong {
  color: #111827;
  font-size: 11px;
  font-weight: 820;
}

.mc-d81-set-color small {
  color: #64748b;
  font-size: 9px;
  white-space: nowrap;
}

.mc-d81-sponsor-zone-grid,
.mc-d81-player-count-popover {
  display: grid;
  gap: 8px;
}

.mc-d81-sponsor-zone-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-d81-sponsor-zone-grid button {
  min-height: 54px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.mc-d81-sponsor-zone-grid button.is-ready {
  border-color: rgba(13, 148, 136, .42);
  background: #f0fdfa;
}

.mc-d81-sponsor-zone-grid span,
.mc-d81-player-count-row > span {
  display: block;
  font-size: 12px;
  font-weight: 820;
}

.mc-d81-sponsor-zone-grid small {
  color: #64748b;
  font-size: 10px;
  font-weight: 720;
}

.mc-d81-player-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.mc-left-rail__toggle {
  margin-left: auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}

.mc-left-rail--collapsed {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 7px;
  border-right: 1px solid rgba(226, 232, 240, .82);
  background: rgba(255, 255, 255, .72);
}

.mc-left-rail--collapsed .mc-left-rail__toggle {
  writing-mode: vertical-rl;
  min-height: 92px;
  margin: 0;
}

.mc-left-rail--collapsed span {
  writing-mode: vertical-rl;
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
}

.mc-mode--store-collapsed .mc-customize {
  grid-template-columns: 54px minmax(0, 1fr) !important;
}

.mc-mode--store-collapsed .mc-customize__left {
  min-width: 54px !important;
  width: 54px !important;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d81-toolbar {
    min-height: 42px !important;
    gap: 6px !important;
    padding: 4px 6px !important;
  }

  .mc-d81-toolbar .mc-d80-toolbar__context {
    min-width: 86px !important;
    padding: 0 6px !important;
  }

  .mc-d81-toolbar .mc-d80-tool {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  .mc-d81-set-palette {
    min-height: 42px;
    padding: 4px 7px;
    gap: 8px;
  }

  .mc-d81-set-color {
    min-width: 104px;
    padding: 4px 6px;
  }

  .mc-d81-set-color small {
    display: none;
  }
}

@media (max-width: 900px) {
  .mc-d81-toolbar {
    align-items: stretch !important;
  }

  .mc-d81-toolbar .mc-d80-toolbar__context {
    display: none !important;
  }

  .mc-d81-set-palette {
    align-items: flex-start;
    flex-direction: column;
  }

  .mc-d81-set-palette__colors {
    width: 100%;
  }

  .mc-mode--store-collapsed .mc-customize {
    grid-template-columns: 1fr !important;
  }
}
/* === D81-GOOGLE-PREMIUM-TOOLBAR-SETS END === */

/* === D82-SALES-UPSELL-TOOLBAR-UNDO START === */
.mc-d82-toolbar {
  max-width: min(760px, 100%) !important;
  margin-inline: auto !important;
  border-radius: 20px !important;
  border-color: rgba(203, 213, 225, .82) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08) !important;
}

.mc-d82-toolbar .mc-d80-toolbar__context {
  min-width: 104px !important;
}

.mc-d82-toolbar .mc-d80-toolbar__tools {
  justify-content: center !important;
}

.mc-d82-toolbar .mc-d80-tool {
  min-width: 94px !important;
  justify-content: center !important;
}

.mc-d82-toolbar .mc-d80-tool.is-ready {
  border-color: rgba(14, 165, 150, .52) !important;
  background:
    linear-gradient(180deg, rgba(240, 253, 250, .98), rgba(255, 255, 255, .96)) !important;
  color: #0f766e !important;
}

.mc-d82-kit-upsell {
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
}

.mc-d82-kit-upsell button {
  display: grid !important;
  gap: 2px !important;
  min-width: 132px !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(203, 213, 225, .84) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #334155 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
  text-align: left !important;
}

.mc-d82-kit-upsell button strong,
.mc-d82-set-upsell button strong {
  font-size: 12px !important;
  font-weight: 840 !important;
  line-height: 1.05 !important;
  color: #111827 !important;
}

.mc-d82-kit-upsell button small,
.mc-d82-set-upsell button small {
  display: block !important;
  color: #a16207 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.mc-d82-kit-upsell button:not(.is-active) {
  border-color: rgba(201, 162, 77, .42) !important;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, .96), rgba(255, 255, 255, .94)) !important;
}

.mc-d82-kit-upsell button:not(.is-active):hover,
.mc-d82-kit-upsell button:not(.is-active):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(180, 83, 9, .45) !important;
  box-shadow: 0 14px 28px rgba(180, 83, 9, .10) !important;
  outline: none !important;
}

.mc-d82-kit-upsell button.is-active {
  border-color: rgba(14, 165, 150, .38) !important;
  background:
    linear-gradient(180deg, rgba(240, 253, 250, .95), rgba(255, 255, 255, .98)) !important;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 150, .10), 0 8px 18px rgba(15, 23, 42, .04) !important;
}

.mc-d82-set-upsell {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(620px, 100%) !important;
  margin: 0 auto !important;
}

.mc-d82-set-upsell button {
  display: grid !important;
  gap: 2px !important;
  flex: 1 1 0 !important;
  min-width: 128px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(226, 232, 240, .86) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .94) !important;
  text-align: left !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
}

.mc-d82-set-upsell button:not(.is-active) {
  border-color: rgba(37, 99, 235, .22) !important;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .96)) !important;
}

.mc-d82-set-upsell button:nth-child(n+2):not(.is-active) {
  border-color: rgba(201, 162, 77, .52) !important;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, .98), rgba(255, 255, 255, .96)) !important;
}

.mc-d82-set-upsell button.is-active {
  border-color: rgba(14, 165, 150, .50) !important;
  background:
    linear-gradient(180deg, rgba(240, 253, 250, .98), rgba(255, 255, 255, .96)) !important;
  box-shadow: 0 10px 24px rgba(14, 165, 150, .10) !important;
}

.mc-d82-history-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(226, 232, 240, .80);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
}

.mc-d82-history-btn {
  min-width: 88px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
}

.mc-d82-history-btn:not(:disabled):hover,
.mc-d82-history-btn:not(:disabled):focus-visible {
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

.mc-d82-history-btn:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}

.mc-d82-history-btn svg {
  width: 15px !important;
  height: 15px !important;
}

@media (min-width: 901px) and (max-width: 1380px), (min-width: 901px) and (max-height: 720px) {
  .mc-d82-toolbar {
    max-width: min(650px, 100%) !important;
  }

  .mc-d82-toolbar .mc-d80-tool {
    min-width: 76px !important;
    padding-inline: 8px !important;
  }

  .mc-d82-kit-upsell button,
  .mc-d82-set-upsell button {
    min-width: 112px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
  }

  .mc-d82-kit-upsell button small,
  .mc-d82-set-upsell button small {
    font-size: 9px !important;
  }

  .mc-d82-history-btn {
    min-width: 72px !important;
  }
}

@media (max-width: 900px) {
  .mc-d82-toolbar {
    max-width: 100% !important;
  }

  .mc-d82-toolbar .mc-d80-toolbar__tools,
  .mc-d82-kit-upsell,
  .mc-d82-set-upsell {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  .mc-d82-set-upsell {
    width: 100% !important;
  }

  .mc-d82-history-actions {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-d82-kit-upsell button:hover,
  .mc-d82-kit-upsell button:focus-visible {
    transform: none !important;
  }
}

/* === D66-W1-RAIL START === Sol dikey kit rayı (Forma/Antrenman/Kamp + set chip + Yeni set).
   Workspace [ray | board | sidePanel] 3 sütun. Üst/alt eski tab şeritleri kaldırıldı (rayda). */
.mc-d66-workspace {
  grid-template-columns: clamp(176px, 13vw, 208px) minmax(0, 1fr) clamp(220px, 15vw, 280px) !important;
}
.mc-d66-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 1.8vh, 20px) 12px;
  border-right: 1px solid var(--d75-line, rgba(148,163,184,0.32));
  background: linear-gradient(180deg, #fffdf8 0%, #fbf9f4 100%);
  overflow-y: auto;
}
.mc-d66-rail__head {
  color: #b9852f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
  padding: 0 4px;
}
.mc-d66-rail__kits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-d66-rail__kit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mc-d66-rail__kit:hover { border-color: rgba(185, 133, 47, 0.5); }
.mc-d66-rail__kit.is-active {
  border-color: rgba(185, 133, 47, 0.66);
  background: #fff7e6;
  box-shadow: 0 10px 24px rgba(185, 133, 47, 0.14);
}
.mc-d66-rail__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.7);
  background: transparent;
}
.mc-d66-rail__kit.is-active .mc-d66-rail__dot {
  border-color: #b9852f;
  background: #b9852f;
}
.mc-d66-rail__kit-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mc-d66-rail__kit-txt strong { color: #0f172a; font-size: 13px; font-weight: 800; line-height: 1.15; }
.mc-d66-rail__kit-txt small { color: #94a3b8; font-size: 10.5px; }
.mc-d66-rail__kit.is-active .mc-d66-rail__kit-txt small { color: #b9852f; }
.mc-d66-rail__check {
  margin-left: auto;
  color: #059669;
  font-size: 13px;
  font-weight: 900;
}
/* Set chip bloğu (sadece Forma kiti aktifken) */
.mc-d66-rail__sets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px;
  border: 1px dashed rgba(185, 133, 47, 0.34);
  border-radius: 14px;
  background: rgba(255, 251, 240, 0.55);
}
.mc-d66-rail__sets-lbl {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mc-d66-rail__set-chips { display: flex; gap: 7px; }
.mc-d66-rail__set {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 11px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 820;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mc-d66-rail__set:hover { border-color: rgba(185, 133, 47, 0.55); transform: translateY(-1px); }
.mc-d66-rail__set.is-active {
  border-color: rgba(185, 133, 47, 0.7);
  background: #fff7e6;
  color: #7a4b08;
  box-shadow: 0 8px 18px rgba(185, 133, 47, 0.16);
}
.mc-d66-rail__set.is-filled::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
}
.mc-d66-rail__set-add {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(185, 133, 47, 0.45);
  border-radius: 11px;
  background: linear-gradient(180deg, #fff7e6 0%, #fef3da 100%);
  color: #7a4b08;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.mc-d66-rail__set-add:hover { box-shadow: 0 10px 22px rgba(185, 133, 47, 0.18); transform: translateY(-1px); }
/* Mobil: ray yatay şeride döner (üstte) */
@media (max-width: 900px) {
  .mc-d66-workspace { grid-template-columns: 1fr !important; }
  .mc-d66-rail {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--d75-line, rgba(148,163,184,0.32));
    padding: 10px 12px;
  }
  .mc-d66-rail__head { display: none; }
  .mc-d66-rail__kits { flex-direction: row; gap: 8px; }
  .mc-d66-rail__kit { min-width: 150px; }
  .mc-d66-rail__sets { flex-direction: row; align-items: center; padding: 8px 10px; }
  .mc-d66-rail__sets-lbl { display: none; }
}
/* === D66-W1-RAIL END === */

/* === D83-W1-TOOLBAR-RAIL START === Toolbar sol rayın altında, dikey/kompakt. Kullanıcı:
   "toolbarı sol kit menülerin altına al". Geniş board grid'i (context|tools|inputs) rayda
   tek sütuna iner; butonlar tam-genişlik dikey liste. */
.mc-d66-rail__toolbar {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(148, 163, 184, 0.3);
}
.mc-d66-rail__toolbar .mc-d80-toolbar {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.mc-d66-rail__toolbar .mc-d80-toolbar__context {
  padding: 0 4px 2px;
}
.mc-d66-rail__toolbar .mc-d80-toolbar__context span { font-size: 9.5px; }
.mc-d66-rail__toolbar .mc-d80-toolbar__context strong { font-size: 12px; }
.mc-d66-rail__toolbar .mc-d80-toolbar__tools {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  justify-content: flex-start !important;
}
.mc-d66-rail__toolbar .mc-d80-tool {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  gap: 8px;
  padding: 8px 10px !important;
  font-size: 12px !important;
}
.mc-d66-rail__toolbar .mc-d80-toolbar__inputs { display: none; }
/* === D83-W1-TOOLBAR-RAIL END === */

/* === D83-W10-TOOLBAR-PREMIUM START === Kullanıcı: "toolbarı daha premium yap".
   Sol ray toolbar butonları: yumuşak gradient zemin, ince altın hover ring, premium
   ready-dot (dikey ortalı), ikon hizası, sabit (zıplamayan) hover. Yalnız rail
   kapsamında — board toolbar etkilenmez. */
.mc-d66-rail__toolbar .mc-d80-toolbar__context strong {
  letter-spacing: .2px;
  color: #0f172a;
}
.mc-d66-rail__toolbar .mc-d80-tool {
  position: relative;
  align-items: center;
  border: 1px solid rgba(203, 213, 225, .7);
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
  color: #1f2937;
  font-weight: 700;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.mc-d66-rail__toolbar .mc-d80-tool svg {
  width: 16px;
  height: 16px;
  opacity: .82;
  transition: opacity .16s ease;
}
.mc-d66-rail__toolbar .mc-d80-tool > span {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-d66-rail__toolbar .mc-d80-tool:hover,
.mc-d66-rail__toolbar .mc-d80-tool:focus-visible {
  transform: none;
  border-color: rgba(201, 162, 77, .55);
  background: linear-gradient(180deg, #fffdf6, #ffffff);
  color: #7a5c12;
  box-shadow: 0 0 0 3px rgba(201, 162, 77, .14), 0 6px 14px rgba(201, 162, 77, .10);
  outline: none;
}
.mc-d66-rail__toolbar .mc-d80-tool:hover svg,
.mc-d66-rail__toolbar .mc-d80-tool:focus-visible svg {
  opacity: 1;
}
.mc-d66-rail__toolbar .mc-d80-tool.is-ready {
  border-color: rgba(13, 148, 136, .42);
  background: linear-gradient(180deg, #f0fdfa, #ffffff);
  color: #0f766e;
}
.mc-d66-rail__toolbar .mc-d80-tool.is-ready::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .16);
}
.mc-d66-rail__toolbar .mc-d80-tool:disabled {
  opacity: .5;
  box-shadow: none;
}
/* === D83-W10-TOOLBAR-PREMIUM END === */

/* === D83-W2-TILE-VALUES START === Küçük kutuda canlı değer overlay'i — mounted layers ile aynı
   kutuyu kaplar (inset:0 + svg preserveAspectRatio meet) → değerler mockup üstünde hizalı. Tıklama
   geçişli (pointer-events:none) → zoom/swap/remove butonları çalışır. Renk dairesi/marker yok. */
.mc-d72-tile__stage .mc-d83-tile-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.mc-d83-tileval { pointer-events: none; }
/* === D83-W2-TILE-VALUES END === */

/* === D83-W6-MARKER-PREMIUM START === Zoom panelinde nokta cilası (kullanıcı: "noktalar premium
   durmuyor"). Konum D66-W5 ile zaten doğru; bu blok YALNIZ zoom kapsamında premium altın halo +
   ince ring + has-value (dolu) altın onay tonu verir. Vitrin grid / küçük tile etkilenmez. */
.mc-d72-zoom .mc-marker--color .mc-marker__halo {
  fill: rgba(201, 162, 77, 0.05);
  stroke: rgba(201, 162, 77, 0.18);
  stroke-width: 1;
}
.mc-d72-zoom .mc-marker--color .mc-marker__ring {
  stroke: rgba(15, 23, 42, 0.14);
  stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.10))
          drop-shadow(0 4px 10px rgba(143, 106, 35, 0.10));
}
.mc-d72-zoom .mc-marker--color.has-value .mc-marker__ring {
  stroke: rgba(201, 162, 77, 0.85);
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 5px rgba(201, 162, 77, 0.28))
          drop-shadow(0 5px 14px rgba(15, 23, 42, 0.16));
}
.mc-d72-zoom .mc-marker--color.has-value .mc-marker__halo {
  fill: rgba(201, 162, 77, 0.10);
  stroke: rgba(201, 162, 77, 0.30);
  stroke-width: 1.2;
}
.mc-d72-zoom .mc-marker--color:hover .mc-marker__ring,
.mc-d72-zoom .mc-marker--color.is-open .mc-marker__ring {
  stroke: #c9a24d;
  stroke-width: 2.2;
}
.mc-d72-zoom .mc-marker--color:hover .mc-marker__halo {
  fill: rgba(201, 162, 77, 0.14);
  stroke: rgba(201, 162, 77, 0.42);
  stroke-width: 1.6;
}
/* Değer markerları (logo/sponsor) has-value → ince altın çerçeve (dolu = premium tamam) */
.mc-d72-zoom .mc-marker--sponsor.has-value .mc-marker__outline,
.mc-d72-zoom .mc-marker--logo.has-value .mc-marker__outline {
  stroke: rgba(201, 162, 77, 0.70);
  stroke-dasharray: none;
  stroke-width: 2;
  fill: rgba(255, 255, 255, 0.02);
}
/* === D83-W6-MARKER-PREMIUM END === */

/* === D83-W5-WIZARD-2STEP START === Final adım kategori durum kartları + toolbar popover toggle. */
.mc-d83-pop-toggle {
  margin-bottom: 8px;
}
.mc-d83-cat-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 2px 0 10px;
}
.mc-d83-cat-status__head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
.mc-d83-cat-status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(203, 213, 225, .7);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
}
.mc-d83-cat-status__name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1f2937;
}
.mc-d83-cat-status__badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.mc-d83-cat-status__row.is-ready {
  border-color: rgba(13, 148, 136, .38);
  background: linear-gradient(180deg, #f0fdfa, #ffffff);
}
.mc-d83-cat-status__row.is-ready .mc-d83-cat-status__badge {
  color: #0f766e;
  border-color: rgba(13, 148, 136, .3);
  background: rgba(13, 148, 136, .08);
}
.mc-d83-cat-status__row.is-pending .mc-d83-cat-status__badge {
  color: #92660f;
  border-color: rgba(201, 162, 77, .35);
  background: rgba(201, 162, 77, .1);
}
.mc-d83-cat-status__row.is-empty {
  opacity: .65;
}
.mc-d83-cat-status__row.is-empty .mc-d83-cat-status__badge {
  color: #64748b;
  background: rgba(100, 116, 139, .08);
}
/* === D83-W5-WIZARD-2STEP END === */

/* === D83-W3-WIZARD-COMPACT START === Sipariş Sihirbazı paneli daha dar/kompakt (kullanıcı).
   3. grid sütunu daraltılır; başlık + kompakt iç boşluk. 1366px'te kesilmez. */
.mc-d66-workspace {
  grid-template-columns: clamp(176px, 13vw, 208px) minmax(0, 1fr) clamp(248px, 17vw, 300px) !important;
}
.mc-d83-wizard__title {
  padding: 10px 12px 6px;
  color: #b9852f;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mc-d83-wizard .mc-d76-wizard-body { padding-left: 10px; padding-right: 10px; }
.mc-d83-wizard .mc-d76-panel-head h4 { font-size: 13px; }
.mc-d83-wizard .mc-cart-size-grid { gap: 5px; }
.mc-d83-wizard .mc-cart-size-row { padding: 4px 6px; }
/* === D83-W3-WIZARD-COMPACT END === */

/* === D83-W4-TR-FLAG START === Logo popover Türkiye bayrağı seçimi (kulüp logosu / sol kol). */
.mc-tr-flag {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.3);
}
.mc-tr-flag__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(227, 10, 23, 0.4);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  color: #b91020;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.mc-tr-flag__btn:hover { box-shadow: 0 8px 20px rgba(227, 10, 23, 0.14); transform: translateY(-1px); }
.mc-tr-flag__icon { font-size: 16px; line-height: 1; }
.mc-tr-flag__choices { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.mc-tr-flag__choice {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.mc-tr-flag__choice:hover { border-color: rgba(227, 10, 23, 0.55); background: #fff7f7; }
.mc-tr-flag__cancel {
  width: 100%;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 11.5px;
  cursor: pointer;
}
.mc-tr-flag__cancel:hover { color: #64748b; text-decoration: underline; }
/* === D83-W4-TR-FLAG END === */

/* === D66-W6-COLORBAR START === Kulüp renkleri barı: forma (Oyuncu) kolonu altında hizalı,
   kaleci bölümüne taşmaz + premium. Kullanıcı: "Kulüp renkleri formanın altında gözükür,
   kalecinin altına kadar gitmez ve premium görünür olur." Board flex-column; kitboxes 2 kol
   (Oyuncu|Kaleci) → palette sola hizalı, ~60% genişlik (forma kolonu ölçüsü). */
.mc-d66-workspace .mc-d81-set-palette {
  align-self: flex-start;
  justify-content: flex-start;
  width: min(100%, 58%);
  margin-left: clamp(8px, 2vw, 40px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(251,249,244,0.92) 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}
@media (max-width: 1099px) {
  .mc-d66-workspace .mc-d81-set-palette {
    width: 100%;
    margin-left: 0;
  }
}
/* === D66-W6-COLORBAR END === */
/* === D82-SALES-UPSELL-TOOLBAR-UNDO END === */

/* === D88-W1-DENSITY START === kucuk=12 / orta=9 / buyuk=6 sutun (varsayilan kucuk); eski 3/5/7 kurallari olu kalir */
.mc-grid__cards[data-cols="6"],  .mc-prod-grid[data-cols="6"]  { grid-template-columns: repeat(6, minmax(0, 1fr));  gap: 16px; }
.mc-grid__cards[data-cols="9"],  .mc-prod-grid[data-cols="9"]  { grid-template-columns: repeat(9, minmax(0, 1fr));  gap: 11px; }
.mc-grid__cards[data-cols="12"], .mc-prod-grid[data-cols="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }

/* Buyuk (6) - kart meta/art genis */
.mc-grid__cards[data-cols="6"] .mc-card__art { padding: 20px 16px; }
.mc-grid__cards[data-cols="6"] .mc-card__name { font-size: 15px; }
.mc-grid__cards[data-cols="6"] .mc-card__type { font-size: 12px; }
.mc-grid__cards[data-cols="6"] .mc-card__price { font-size: 16px; margin-top: 6px; }

/* Orta (9) - hafif kompakt */
.mc-grid__cards[data-cols="9"] .mc-card__name { font-size: 12px; }
.mc-grid__cards[data-cols="9"] .mc-card__type { font-size: 10px; }
.mc-grid__cards[data-cols="9"] .mc-card__price { font-size: 13px; }

/* Kucuk (12) - yogun/kompakt kart */
.mc-grid__cards[data-cols="12"] .mc-card__art { padding: 10px 8px; aspect-ratio: 4 / 5; }
.mc-grid__cards[data-cols="12"] .mc-card__meta { padding: 8px 10px 10px; gap: 1px; }
.mc-grid__cards[data-cols="12"] .mc-card__name { font-size: 11px; }
.mc-grid__cards[data-cols="12"] .mc-card__type { font-size: 9px; }
.mc-grid__cards[data-cols="12"] .mc-card__price { font-size: 12px; margin-top: 2px; }
.mc-grid__cards[data-cols="12"] .mc-card__price small { font-size: 8px; }
.mc-grid__cards[data-cols="12"] .mc-kind-icon { width: 11px; height: 11px; }
.mc-grid__cards[data-cols="12"] .mc-card__badge { font-size: 7px; padding: 3px 6px; top: 6px; right: 6px; }

/* Responsive - yogunluk korunur, dar ekranda kademeli iner */
@media (max-width: 1180px) {
  .mc-grid__cards[data-cols="6"],  .mc-prod-grid[data-cols="6"]  { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .mc-grid__cards[data-cols="9"],  .mc-prod-grid[data-cols="9"]  { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .mc-grid__cards[data-cols="12"], .mc-prod-grid[data-cols="12"] { grid-template-columns: repeat(8, minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .mc-grid__cards[data-cols="6"],  .mc-prod-grid[data-cols="6"]  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mc-grid__cards[data-cols="9"],  .mc-prod-grid[data-cols="9"]  { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .mc-grid__cards[data-cols="12"], .mc-prod-grid[data-cols="12"] { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .mc-grid__cards[data-cols="6"],  .mc-prod-grid[data-cols="6"]  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .mc-grid__cards[data-cols="9"],  .mc-prod-grid[data-cols="9"]  { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .mc-grid__cards[data-cols="12"], .mc-prod-grid[data-cols="12"] { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
}
/* === D88-W1-DENSITY END === */

/* === D88-W5-GENDER-PREMIUM START === "Forma kimler icin?" cinsiyet modali premium cila.
   Tema-guvenli: arka plan rengi EZILMEZ (dark-mode korunur); yalniz radius/golge/altin
   vurgu/sayac/CTA premium yukseltilir. Class adlari JS hook icin korunur. */
.mc-mode-modal__content {
  border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: 0 32px 64px rgba(15,23,42,.24), 0 8px 20px rgba(15,23,42,.12);
  border-top: 3px solid var(--accent, #c9a24d);
}
.mc-mode-modal__eyebrow {
  color: var(--accent, #c9a24d);
  letter-spacing: .2em;
  font-size: 11px;
}
.mc-mode-modal__title { font-size: 24px; letter-spacing: -.01em; }
.mc-mode-modal__subtitle { font-size: 13px; margin-bottom: 18px; }
.mc-mode-gender {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid rgba(201,162,77,.20);
  border-radius: 14px;
  background: rgba(201,162,77,.06);
  margin-bottom: 18px;
}
.mc-mode-gender__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
}
.mc-mode-gender__row + .mc-mode-gender__row { border-top: 1px solid rgba(120,120,120,.12); }
.mc-mode-gender__row > span { font-size: 14px; font-weight: 600; }
.mc-mode-gender .mc-counter { display: inline-flex; align-items: center; gap: 10px; }
.mc-mode-gender .mc-counter__btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(201,162,77,.45);
  background: transparent; color: var(--accent, #c9a24d);
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.mc-mode-gender .mc-counter__btn:hover:not(:disabled) {
  background: var(--accent, #c9a24d); color: #fff;
  box-shadow: 0 4px 12px rgba(201,162,77,.32); transform: translateY(-1px);
}
.mc-mode-gender .mc-counter__btn:disabled { opacity: .35; cursor: not-allowed; }
.mc-mode-gender .mc-counter__val { min-width: 28px; text-align: center; font-size: 17px; font-weight: 800; }
.mc-mode-modal__continue {
  display: block; width: 100%;
  padding: 14px 20px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #c9a24d), #a9803a);
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(201,162,77,.30);
  transition: transform .14s ease, box-shadow .18s ease, filter .15s ease;
}
.mc-mode-modal__continue:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201,162,77,.40); filter: brightness(1.04); }
.mc-mode-modal__continue:active { transform: scale(.98); }
.mc-mode-modal__note { text-align: center; margin-top: 12px; font-size: 12px; opacity: .85; }
@media (max-width: 600px) {
  .mc-mode-modal__content { padding: 26px 20px 22px; border-radius: 16px; }
  .mc-mode-modal__title { font-size: 21px; }
}
/* === D88-W5-GENDER-PREMIUM END === */