/* Bubble Konfigüratör — VRC Ticaret
   Renk/tipografi vrcticaret.com ile uyumlu tutuldu (bordo #5E1224, krem zemin, Didot başlık). */

:root {
  --cfg-bg: #f6f3ee;
  --cfg-bg-2: #ece5db;
  --cfg-surface: #ffffff;
  --cfg-text: #1f1b17;
  --cfg-muted: #7a6d5f;
  --cfg-border: #e4dbcd;
  --cfg-accent: #5E1224;
  --cfg-accent-dark: #45010c;
  --cfg-radius: 18px;
  --cfg-shadow: 0 18px 40px rgba(60, 44, 30, 0.10);
  --cfg-shadow-sm: 0 6px 16px rgba(60, 44, 30, 0.09);
  --cfg-serif: 'GFS Didot', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cfg-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cfg-sans);
  color: var(--cfg-text);
  background: radial-gradient(1200px 600px at 20% -10%, #fffdfa 0%, var(--cfg-bg) 45%, var(--cfg-bg-2) 100%);
  min-height: 100vh;
  line-height: 1.5;
}

.cfg { max-width: 1180px; margin: 0 auto; padding: 48px 24px 80px; }

/* ---------- Başlık ---------- */
.cfg-head { text-align: center; margin-bottom: 36px; }
.cfg-eyebrow {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cfg-accent); font-weight: 700;
}
.cfg-title { font-family: var(--cfg-serif); font-size: clamp(28px, 4vw, 42px); margin: 0 0 8px; font-weight: 700; }
.cfg-lead { margin: 0; color: var(--cfg-muted); font-size: 15px; }

/* ---------- Yerleşim ---------- */
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .cfg-grid { grid-template-columns: 1fr; } }

/* ---------- Sahne / önizleme ---------- */
.cfg-stage {
  background: linear-gradient(160deg, #ffffff 0%, #f7f2ea 100%);
  border: 1px solid var(--cfg-border);
  border-radius: 24px;
  padding: 40px 32px 28px;
  box-shadow: var(--cfg-shadow);
  position: sticky; top: 24px;
}
@media (max-width: 900px) { .cfg-stage { position: static; padding: 28px 18px 20px; } }

.cfg-preview { display: flex; justify-content: center; align-items: center; min-height: 230px; }

/* Ürün: altta gerçek çerçeve render'ı, üzerinde yuva katmanı. Yuvalar yüzdeyle
   konumlandığı için görsel hangi boyutta gösterilirse gösterilsin hizalama bozulmaz. */
/* Genişlik gerçek mm ölçüsüyle orantılı (--oran): ikili ve üçlü AYNI ölçekte çizilsin,
   aksi halde ikili aynı kutuyu doldurduğu için ekranda daha büyük görünüyordu. */
.cfg-product {
  width: calc(100% * var(--oran, 1));
  max-width: calc(560px * var(--oran, 1));
  margin: 0 auto;
  animation: cfgSizeIn 420ms cubic-bezier(.34, 1.4, .64, 1);
}
/* ---------- Ürün: tek SVG ---------- */
/* viewBox milimetre cinsinden; tüm konum ve çaplar SVG içinde geometriden gelir.
   Buraya konum düzeltmesi (margin/top/left/translate) EKLENMEZ. */
.cfg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cfg-frame {
  pointer-events: none;
  filter: drop-shadow(0 1.2px 1.6px rgba(58, 42, 28, .22)) drop-shadow(0 .2px .3px rgba(58, 42, 28, .16));
}
.cfg-under image, .cfg-frame { user-select: none; }

/* Boş yuva göstergesi */
.cfg-marker { pointer-events: none; }
/* Gösterge açık renkte: açıklık her çerçeve renginde koyu bir oyuk olduğu için
   bordo aksan zeminde kayboluyordu. */
.cfg-marker-ring {
  fill: none; stroke: #f2ece2; stroke-width: .6; stroke-dasharray: 2.2 2.2;
  transform-box: fill-box; transform-origin: center;
  animation: cfgDashPulse 2.4s ease-in-out infinite;
}
.cfg-marker-plus {
  stroke: #f2ece2; stroke-width: 1.6; stroke-linecap: round; fill: none;
  transform-box: fill-box; transform-origin: center;
  animation: cfgPlusPulse 2.4s ease-in-out infinite;
}
@keyframes cfgDashPulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes cfgPlusPulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Tıklama hedefi ve vurgu — görsel boyutu etkilemez */
.cfg-slot { cursor: pointer; outline: none; }
.cfg-slot-hit { fill: transparent; }
.cfg-slot-ring {
  fill: none; stroke: var(--cfg-accent); stroke-width: .7; opacity: 0;
  transition: opacity .18s ease; pointer-events: none;
  transform-box: fill-box; transform-origin: center;
}
.cfg-slot.is-active .cfg-slot-ring, .cfg-slot:focus-visible .cfg-slot-ring { opacity: 1; }
.cfg-slot.is-active .cfg-slot-ring { animation: cfgActiveRing 1.8s ease-in-out infinite; }
@keyframes cfgActiveRing {
  0%, 100% { opacity: .9; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.03); }
}
.cfg-slot-pulse {
  fill: none; stroke: var(--cfg-accent); stroke-width: 1.2; opacity: 0; pointer-events: none;
  transform-box: fill-box; transform-origin: center;
}
.cfg-slot.is-snapping .cfg-slot-pulse { animation: cfgPulseRing 450ms ease-out; }
@keyframes cfgPulseRing {
  0%   { opacity: .55; transform: scale(.85); }
  100% { opacity: 0;   transform: scale(1.5); }
}
/* "Şak" oturma: modül görselinin KENDİ merkezinden ölçeklenir, konumu değişmez */
.cfg-module { transform-box: fill-box; transform-origin: center; }
.cfg-slot-snap { animation: cfgSnap 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cfgSnap {
  0%   { transform: scale(.72); }
  45%  { transform: scale(1.08); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* ?debug=1 hizalama katmanı */
.cfg-debug { display: none; pointer-events: none; }
.is-debug .cfg-debug { display: block; }
.cfg-dbg-mod  { fill: none; stroke: #e5006d; stroke-width: .35; }
.cfg-dbg-open { fill: none; stroke: #00a3ff; stroke-width: .35; stroke-dasharray: 2 2; }
.cfg-dbg-cross{ stroke: #e5006d; stroke-width: .35; }

/* Uçan kopya */
.cfg-ghost {
  position: fixed; z-index: 90; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 12px 18px rgba(48, 34, 22, .32));
}

/* ---------- Sağ kolon blokları ---------- */
.cfg-controls { display: flex; flex-direction: column; gap: 16px; }
.cfg-block {
  background: var(--cfg-surface); border: 1px solid var(--cfg-border);
  border-radius: var(--cfg-radius); padding: 18px 18px 20px; box-shadow: var(--cfg-shadow-sm);
}
.cfg-block-title {
  font-family: var(--cfg-serif); font-size: 17px; margin: 0 0 14px; font-weight: 700;
}

/* Çerçeve boyutu */
.cfg-sizes { display: flex; gap: 10px; margin-bottom: 16px; }
.cfg-size {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--cfg-border); background: #fdfbf8; font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.cfg-size:hover { transform: translateY(-1px); border-color: #cdbfa9; }
.cfg-size.is-active { border-color: var(--cfg-accent); background: #fff; box-shadow: 0 0 0 3px rgba(94, 18, 36, .10); }
.cfg-size-dots { display: flex; gap: 4px; }
.cfg-size-dots i {
  width: 14px; height: 14px; border-radius: 50%; background: #ded2c0; display: block;
  transition: background .18s ease;
}
.cfg-size.is-active .cfg-size-dots i { background: var(--cfg-accent); }
.cfg-size-label { font-size: 13px; font-weight: 700; }

/* Renk örnekleri */
.cfg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-swatch {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px;
  border-radius: 999px; border: 1.5px solid var(--cfg-border); background: #fdfbf8;
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--cfg-text);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cfg-swatch:hover { transform: translateY(-1px); border-color: #cdbfa9; }
.cfg-swatch.is-active { border-color: var(--cfg-accent); box-shadow: 0 0 0 3px rgba(94, 18, 36, .10); }
.cfg-swatch-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), inset 0 3px 6px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.08);
}

/* Panel */
.cfg-block-panel { min-height: 180px; }
.cfg-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cfg-panel-title { display: block; font-family: var(--cfg-serif); font-size: 17px; font-weight: 700; }
.cfg-panel-sub { display: block; font-size: 12.5px; color: var(--cfg-muted); }
.cfg-back, .cfg-clear {
  border: 1.5px solid var(--cfg-border); background: #fdfbf8; border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  color: var(--cfg-text); transition: border-color .18s ease, color .18s ease;
}
.cfg-clear { margin-left: auto; color: var(--cfg-accent); }
.cfg-back:hover, .cfg-clear:hover { border-color: var(--cfg-accent); }

.cfg-types { display: grid; gap: 8px; }
.cfg-type {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 10px; border-radius: 14px; cursor: pointer; font-family: inherit;
  border: 1.5px solid var(--cfg-border); background: #fdfbf8;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cfg-type:hover { transform: translateY(-1px); border-color: #cdbfa9; box-shadow: var(--cfg-shadow-sm); }
.cfg-type.is-current { border-color: var(--cfg-accent); box-shadow: 0 0 0 3px rgba(94, 18, 36, .10); }
.cfg-type-art { flex-shrink: 0; display: flex; }
.cfg-type-art .cfg-chip-img { display: block; border-radius: 50%; }
.cfg-type-text strong { display: block; font-size: 14px; }
.cfg-type-text small { display: block; font-size: 12px; color: var(--cfg-muted); margin-top: 2px; }

.cfg-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cfg-color {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border-radius: 14px; border: 1.5px solid transparent; background: transparent; cursor: pointer;
  font-family: inherit; transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.cfg-color:hover { transform: translateY(-2px); background: #fbf7f1; border-color: var(--cfg-border); }
.cfg-color:active { transform: scale(.94); }
.cfg-color-dot {
  width: 38px; height: 38px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 -5px 10px rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
}
.cfg-color-dot.is-pearl {
  background: conic-gradient(from 210deg, #fdf6ec, #e8dff0, #f6ece2, #dfe9f2, #fdf6ec);
}
.cfg-color-label { font-size: 11.5px; font-weight: 600; color: var(--cfg-muted); }

/* Özet */
.cfg-summary-title { font-family: var(--cfg-serif); font-size: 17px; margin: 0 0 12px; }
.cfg-summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cfg-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 11px; background: #fbf8f3; cursor: pointer;
  border: 1.5px solid transparent; transition: border-color .18s ease, background .18s ease;
}
.cfg-summary-row:hover { border-color: var(--cfg-border); }
.cfg-summary-row.is-active { border-color: var(--cfg-accent); background: #fff; }
.cfg-summary-label { font-size: 12.5px; color: var(--cfg-muted); font-weight: 600; }
.cfg-summary-value { font-size: 13.5px; font-weight: 700; }
.cfg-summary-row.is-empty .cfg-summary-value { color: var(--cfg-muted); font-weight: 600; font-style: italic; }

/* Fiyat + butonlar */
.cfg-checkout { order: 99; }
.cfg-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.cfg-price-label { font-size: 13px; color: var(--cfg-muted); font-weight: 600; }
.cfg-price { font-family: var(--cfg-serif); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cfg-price small { font-size: 16px; }
.cfg-warning { margin: 0 0 12px; font-size: 12.5px; color: var(--cfg-accent); font-weight: 600; }
.cfg-cta-row { display: grid; gap: 8px; }
.cfg-btn {
  padding: 13px 18px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .16s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cfg-btn-primary { background: var(--cfg-accent); color: #fff; }
.cfg-btn-primary:hover:not(:disabled) { background: var(--cfg-accent-dark); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(94,18,36,.22); }
.cfg-btn-ghost { background: #fff; color: var(--cfg-text); border-color: var(--cfg-border); }
.cfg-btn-ghost:hover:not(:disabled) { border-color: var(--cfg-accent); transform: translateY(-1px); }
.cfg-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Dialog */
.cfg-dialog { border: none; border-radius: 20px; padding: 0; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 30px 70px rgba(40,28,18,.35); }
.cfg-dialog::backdrop { background: rgba(31, 27, 23, .48); backdrop-filter: blur(2px); }
.cfg-dialog-inner { padding: 24px; }
.cfg-demo-badge {
  display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px;
  background: #fdf3d6; color: #7a5a10; font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.cfg-dialog-lead { margin: 0 0 14px; font-size: 13.5px; color: var(--cfg-muted); }
.cfg-dialog-list { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.cfg-dialog-json {
  background: #1f1b17; color: #f0e7da; padding: 14px; border-radius: 12px; font-size: 12px;
  overflow-x: auto; margin: 0 0 16px;
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .cfg-marker-ring, .cfg-marker-plus,
  .cfg-slot.is-active .cfg-slot-ring,
  .cfg-product { animation: none; }
  .cfg-slot-snap { animation: cfgSnapReduced 160ms ease-out; }
  .cfg-slot.is-snapping .cfg-slot-pulse { animation: none; }
  @keyframes cfgSnapReduced { from { opacity: .4; } to { opacity: 1; } }
  .cfg-size:hover, .cfg-swatch:hover, .cfg-type:hover, .cfg-color:hover, .cfg-btn:hover:not(:disabled) { transform: none; }
}