/* ════════════════════════════════════════════════════════════════════════════
   Zyron CRM — Duvar Kağıdı Hesaplayıcı
   - Admin (CRM) sayfası: .lb-page-grid, .lb-panel ortak class'larını kullanır
   - Modül-özel stiller: .dvk-* prefix
   - Duvar önizleme motoru (DvkPreview): .dvk-prev*
   - Vitrin sayfasında da AYNI .dvk-prev* class'ları çalışır (paylaşılan motor)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Pattern library grid ─────────────────────────────────────────────────── */

.dvk-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--color-surface-alt, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--color-border, #e5e7eb);
}

.dvk-pattern-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px;
  background: #fff; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.dvk-pattern-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.08); border-color: #cbd5e1; }
.dvk-pattern-card.is-active { border-color: var(--color-primary, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.dvk-pattern-card__img {
  display: block; width: 100%; aspect-ratio: 1/1;
  background-size: cover; background-position: center;
  background-color: #f1f5f9; border-radius: 6px;
}
.dvk-pattern-card__label {
  font-size: 11px; color: var(--color-text-secondary, #64748b);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dvk-pattern-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 16px; color: var(--color-text-muted, #94a3b8); text-align: center;
}
.dvk-pattern-empty i { font-size: 32px; }

/* ─── Upload area ──────────────────────────────────────────────────────────── */

.dvk-upload-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; border-radius: 8px; cursor: pointer;
  border: 2px dashed var(--color-border, #cbd5e1); background: var(--color-surface-alt, #f8fafc);
  text-align: center; transition: border-color .2s, background .2s;
}
.dvk-upload-drop input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dvk-upload-drop i { font-size: 28px; color: var(--color-primary, #3b82f6); }
.dvk-upload-drop:hover, .dvk-upload-drop.is-drag {
  border-color: var(--color-primary, #3b82f6); background: rgba(59,130,246,.04);
}
.dvk-upload-drop__title { font-weight: 600; font-size: 13px; }
.dvk-upload-drop__sub { font-size: 11px; color: var(--color-text-muted, #94a3b8); }

.dvk-upload-info {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
  font-size: 12px;
}
.dvk-upload-info i { color: #059669; }
.dvk-upload-info__remove {
  margin-left: auto; background: none; border: none; cursor: pointer; color: #64748b;
  padding: 2px 6px; border-radius: 4px;
}
.dvk-upload-info__remove:hover { background: rgba(0,0,0,.05); color: #dc2626; }

/* ─── Preview stage (CRM + storefront ortak) ──────────────────────────────── */

.dvk-preview-card {
  background: #fff; border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px;
  padding: 12px; margin-top: 8px;
}
.dvk-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.dvk-preview-head__title { display:flex; align-items:center; gap:6px; }
.dvk-preview-meta {
  display: flex; gap: 12px; font-size: 11px; color: var(--color-text-muted, #94a3b8);
  margin-top: 6px;
}

/* ─── Preview engine v2 — premium gerçekçi duvar ─────────────────────────── */

.dvk-prev {
  /* Sahne başına değişen değişkenler — wall/floor renkleri */
  --dvk-wall-1: #f7f1e3;
  --dvk-wall-2: #ede4d0;
  --dvk-wall-3: #ddd0b6;
  --dvk-floor-1: #b89968;
  --dvk-floor-2: #8a6a3f;
  --dvk-floor-3: #5d451e;
  --dvk-ceiling-1: #e8e3d8;
  --dvk-ceiling-2: #d6cfc1;
  --dvk-ambient: rgba(255,243,210,.18);

  position: relative;
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dvk-wall-1);
  box-shadow:
    0 14px 40px rgba(15,23,42,.16),
    0 2px 6px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(255,255,255,.6);
  isolation: isolate;
}

/* Sahne varyantları */
.dvk-prev--modern-loft {
  --dvk-wall-1: #f7f3ec; --dvk-wall-2: #ebe5d6; --dvk-wall-3: #d6cdb9;
  --dvk-floor-1: #c9a574; --dvk-floor-2: #966f43; --dvk-floor-3: #5b3f1d;
  --dvk-ambient: rgba(255,243,205,.20);
}
.dvk-prev--cozy-bedroom {
  --dvk-wall-1: #f5ede0; --dvk-wall-2: #e8dcc6; --dvk-wall-3: #d2c4a7;
  --dvk-floor-1: #6d4c2c; --dvk-floor-2: #4b3219; --dvk-floor-3: #2c1d0d;
  --dvk-ambient: rgba(254,215,170,.22);
}
.dvk-prev--kids-room {
  --dvk-wall-1: #fbf4f6; --dvk-wall-2: #f4e4ea; --dvk-wall-3: #e7c8d3;
  --dvk-floor-1: #f5d9c6; --dvk-floor-2: #d4a78a; --dvk-floor-3: #8a624a;
  --dvk-ambient: rgba(255,196,224,.22);
}
.dvk-prev--minimal-studio {
  --dvk-wall-1: #faf8f3; --dvk-wall-2: #efebe0; --dvk-wall-3: #d4cfbf;
  --dvk-floor-1: #d4cdbc; --dvk-floor-2: #9c9583; --dvk-floor-3: #5e5848;
  --dvk-ambient: rgba(255,250,232,.18);
}

.dvk-prev__room {
  position: absolute; inset: 0;
  /* Sahne ortam ışığı — yumuşak hot-spot üst-merkez */
  background:
    radial-gradient(ellipse 70% 30% at 50% 0%, var(--dvk-ambient), transparent 60%);
}

/* ── Tavan ──────────────────────────────────────────────────────────────── */

.dvk-prev__ceiling {
  position: absolute; top: 0; left: 0; right: 0; height: 6%;
  z-index: 2;
  background: linear-gradient(180deg, var(--dvk-ceiling-1) 0%, var(--dvk-ceiling-2) 100%);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.08);
}
.dvk-prev__crown {
  /* Crown molding — ince beyaz şerit */
  position: absolute; bottom: -2px; left: 0; right: 0; height: 4px;
  background: linear-gradient(180deg, #fefdfb 0%, #ddd5c5 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* ── Duvar (tüm preview'in ana karakteri) ───────────────────────────────── */

.dvk-prev__wall {
  position: absolute;
  top: 6%; left: 0; right: 0; height: 64%;
  z-index: 3;
}

/* 1. Boya — pattern olmadığında görünen ana yüzey */
.dvk-prev__paint {
  position: absolute; inset: 0;
  background:
    /* Hafif "tek yönden ışık" — sol üst aydınlık */
    radial-gradient(ellipse 80% 60% at 25% 10%, rgba(255,255,255,.18), transparent 60%),
    /* Üstten alta yumuşak gradient (boyalı duvar hissi) */
    linear-gradient(180deg, var(--dvk-wall-1) 0%, var(--dvk-wall-2) 70%, var(--dvk-wall-3) 100%),
    /* İnce dikey bant — kağıt ek yerleri (subtle) */
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 78px,
      rgba(0,0,0,.025) 78px,
      rgba(0,0,0,.025) 79px,
      transparent 79px,
      transparent 80px);
  z-index: 1;
}

/* 2. Pattern — kullanıcı görseli (cover, full-bleed) */
.dvk-prev__pattern {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Duvar üstüne basılmış hissi — kontrast hafif düşürülür, doygunluk korunur */
  filter: contrast(1.02) saturate(.97) brightness(.99);
  z-index: 2;
}
/* Geniş aspect oranlı kullanıcı duvarları için pattern center yerine üstten hizalanır,
   böylece floor/sofa gerisinde önemli detay kaybolmaz (subjektif estetik tercihi) */
.dvk-prev.is-wide .dvk-prev__pattern { background-position: center 30%; }
.dvk-prev.is-tall .dvk-prev__pattern { background-position: 50% 40%; }

/* 3. Lighting overlay — multiply blend, doğal aydınlanma */
.dvk-prev__lighting {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    /* Üst-orta sıcak ışık */
    radial-gradient(ellipse 60% 35% at 50% 0%, rgba(255,243,210,.22), transparent 65%),
    /* Soldan yumuşak ışık */
    linear-gradient(95deg, rgba(255,253,245,.10) 0%, transparent 40%, transparent 100%),
    /* Aşağı doğru hafif kararma (zemin yakını gölgeli) */
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0,0,0,.10) 100%);
  mix-blend-mode: multiply;
}

/* 4. Paper grain — SVG turbulence noise (kağıt yüzey hissi) */
.dvk-prev__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* 5. Edge AO — köşe ambient occlusion */
.dvk-prev__edge {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow:
    inset 10px 0 22px rgba(0,0,0,.10),
    inset -10px 0 22px rgba(0,0,0,.10),
    inset 0 6px 14px rgba(0,0,0,.10),
    inset 0 -16px 28px rgba(0,0,0,.16);
}

/* Süpürgelik — duvar/zemin geçişi */
.dvk-prev__skirting {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4%;
  z-index: 6;
  background:
    linear-gradient(180deg, #fefdfb 0%, #f3ede0 60%, #d8cfbe 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 -1px 2px rgba(0,0,0,.06);
}

/* ── Boş duvar (placeholder) — premium kart ─────────────────────────────── */

.dvk-prev__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 7;
  pointer-events: none;
}
.dvk-prev__empty-card {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 18px;
  padding: 26px 30px 22px;
  text-align: center;
  max-width: 76%;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 12px 32px rgba(15,23,42,.14),
    0 2px 6px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.dvk-prev__empty-icon {
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
  color: #78350f;
  font-size: 28px;
  margin-bottom: 14px;
  box-shadow:
    0 6px 16px rgba(251,191,36,.4),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.dvk-prev__empty-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.dvk-prev__empty-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
  max-width: 340px;
  margin: 0 auto 12px;
}
.dvk-prev__empty-strong {
  color: #1e293b; font-weight: 700;
}
.dvk-prev__empty-tags {
  display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.dvk-prev__empty-tags span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #475569;
}
.dvk-prev__empty-tags i { font-size: 13px; color: #64748b; }

/* ── Zemin (perspektifli) ────────────────────────────────────────────────── */

.dvk-prev__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  z-index: 4;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: 50% 0%;
}
.dvk-prev__floor-plane {
  position: absolute;
  top: -10%; left: -20%; right: -20%; height: 130%;
  background:
    /* Tahta panel çizgileri (yatay) — perspektifle birlikte uzaklara doğru kaybolur */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 1px,
      transparent 1px, transparent 32px),
    /* Tahta dikey damar — ince */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px,
      transparent 1px, transparent 90px),
    /* Renk gradyanı (uzakta açık, yakında koyu) */
    linear-gradient(180deg, var(--dvk-floor-1) 0%, var(--dvk-floor-2) 60%, var(--dvk-floor-3) 100%);
  transform: rotateX(58deg);
  transform-origin: top center;
}
/* Kids ve studio için zemin halı/beton — tahta yerine düz */
.dvk-prev--kids-room .dvk-prev__floor-plane {
  background:
    radial-gradient(ellipse 60% 60% at 50% 30%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(180deg, var(--dvk-floor-1) 0%, var(--dvk-floor-2) 65%, var(--dvk-floor-3) 100%);
}
.dvk-prev--minimal-studio .dvk-prev__floor-plane {
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.025) 0px, rgba(0,0,0,.025) 1px,
      transparent 1px, transparent 140px),
    linear-gradient(180deg, var(--dvk-floor-1) 0%, var(--dvk-floor-2) 70%, var(--dvk-floor-3) 100%);
}
/* Zemine düşen duvar gölgesi (üstten gelen) */
.dvk-prev__floor-shadow {
  position: absolute; top: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 100%);
  pointer-events: none;
}
/* Zemin sıcak ışık spotu (önde) */
.dvk-prev__floor-light {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: radial-gradient(ellipse 55% 80% at 50% 100%, var(--dvk-ambient), transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ── Sahne mobilyası (SVG) ──────────────────────────────────────────────── */

.dvk-prev__svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 60%;
  z-index: 5;
  pointer-events: none;
  display: block;
}
.dvk-prev__svg--bedroom { height: 56%; }
.dvk-prev__svg--kids    { height: 60%; }
.dvk-prev__svg--studio  { height: 50%; }

/* ── Üst overlay'ler ─────────────────────────────────────────────────────── */

.dvk-prev__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(15,23,42,.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fafafa;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.dvk-prev__badge i { font-size: 14px; color: #fbbf24; }
.dvk-prev__badge-dim { color: #fafafa; }
.dvk-prev__badge-dot {
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4);
}
.dvk-prev__badge-area { color: #fbbf24; font-weight: 700; }

.dvk-prev__scene-label {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.dvk-prev__scene-label i { color: #94a3b8; font-size: 13px; }

/* ─── CRM cart row thumb ──────────────────────────────────────────────────── */

.dvk-cart-thumb {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px;
  background: #f1f5f9 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 22px; border: 1px solid #e2e8f0;
}

/* ─── Quote print items ───────────────────────────────────────────────────── */

.dvk-quote-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin: 12px 0 16px;
}
.dvk-quote-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
}
.dvk-quote-item__img {
  width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center;
  background-color: #e2e8f0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; color: #94a3b8;
}
.dvk-quote-item__title { font-size: 12px; font-weight: 700; }
.dvk-quote-item__sub   { font-size: 10px; color: #64748b; }
.dvk-quote-item__price { font-size: 13px; font-weight: 700; color: #d90429; margin-top: 2px; }

/* ─── Storefront /duvar-kagidi-hesapla ────────────────────────────────────── */

.sf-dvk-page { padding: 32px 0 64px; }
.sf-dvk-header { text-align: center; margin: 24px 0 36px; }
.sf-dvk-header h1 {
  font-size: 38px; font-weight: 800; line-height: 1.15; margin: 8px 0 12px;
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 60%, #312e81 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-dvk-header p { font-size: 16px; color: #64748b; max-width: 720px; margin: 0 auto; }

.sf-dvk-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 24px; margin-top: 32px;
}
@media (max-width: 960px) { .sf-dvk-grid { grid-template-columns: 1fr; } }

.sf-dvk-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 22px 22px 18px; box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
.sf-dvk-card h3 {
  font-size: 14px; font-weight: 700; margin: 0 0 14px; color: #0f172a;
  display: flex; align-items: center; gap: 6px;
}
.sf-dvk-card h3 i { color: var(--sf-primary, #3b82f6); }

.sf-dvk-field { margin-bottom: 16px; }
.sf-dvk-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:#475569; margin-bottom:6px; }
.sf-dvk-label small { color: #94a3b8; font-weight: 500; }
.sf-dvk-number {
  width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.sf-dvk-number:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.sf-dvk-range {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  background: #e2e8f0; border-radius: 3px; outline: none; margin-top: 8px;
  background: linear-gradient(90deg, #3b82f6 0%, #3b82f6 var(--val, 50%), #e2e8f0 var(--val, 50%), #e2e8f0 100%);
}
.sf-dvk-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #3b82f6; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.sf-dvk-quality {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
}
.sf-dvk-quality-chip {
  padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; background: #fff;
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.sf-dvk-quality-chip strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.sf-dvk-quality-chip small { font-size: 11px; color: #64748b; }
.sf-dvk-quality-chip.is-active { border-color: #3b82f6; background: rgba(59,130,246,.05); }

.sf-dvk-patterns {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px;
  max-height: 220px; overflow-y: auto; padding: 4px;
}
.sf-dvk-patterns__chip {
  cursor: pointer; padding: 3px; border: 2px solid transparent; border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px; background: #f8fafc;
}
.sf-dvk-patterns__chip:hover { background: #fff; }
.sf-dvk-patterns__chip.is-active { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.sf-dvk-patterns__img {
  width: 100%; aspect-ratio: 1/1; background-size: cover; background-position: center;
  background-color: #e2e8f0; border-radius: 6px;
}
.sf-dvk-patterns__label {
  font-size: 10px; color: #64748b; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sf-dvk-upload-btn {
  width: 100%; padding: 12px; border: 1.5px dashed #cbd5e1; border-radius: 10px;
  background: #f8fafc; cursor: pointer; font-size: 12px; font-weight: 600; color: #64748b;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .15s, background .15s;
}
.sf-dvk-upload-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #fff; }
.sf-dvk-upload-btn i { font-size: 18px; }

.sf-dvk-scene-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.sf-dvk-scene-tab {
  padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: #64748b;
}
.sf-dvk-scene-tab.is-active { border-color: #3b82f6; background: #3b82f6; color: #fff; }

.sf-dvk-total {
  margin-top: 18px; padding: 16px; background: linear-gradient(135deg, #1e293b 0%, #312e81 100%);
  color: #fff; border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.sf-dvk-total__label { font-size: 13px; opacity: .8; }
.sf-dvk-total__value { font-size: 28px; font-weight: 800; }

.sf-dvk-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.sf-dvk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.sf-dvk-stat {
  padding: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  text-align: center;
}
.sf-dvk-stat small { display: block; font-size: 11px; color: #94a3b8; }
.sf-dvk-stat strong { font-size: 16px; font-weight: 800; color: #0f172a; }

.sf-dvk-error {
  padding: 10px 12px; background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca; border-radius: 8px; font-size: 13px; margin-top: 12px;
}

/* ─── Vitrin admin — Duvar Kağıdı tab ───────────────────────────────────── */

.dvk-pricing-formula {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 8px 12px; background: rgba(59,130,246,.08); border-left: 3px solid #3b82f6;
  border-radius: 6px; font-size: 12px; color: #1e40af;
}

.dvk-admin-patterns {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin-top: 12px;
}
.dvk-admin-pattern {
  position: relative; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 6px;
}
.dvk-admin-pattern__img {
  width: 100%; aspect-ratio: 1/1; border-radius: 6px;
  background-size: cover; background-position: center; background-color: #f1f5f9;
}
.dvk-admin-pattern__name {
  width: 100%; margin-top: 6px; padding: 4px 6px;
  border: 1px solid #e2e8f0; border-radius: 4px; font-size: 11px;
}
.dvk-admin-pattern__cat {
  width: 100%; margin-top: 4px; padding: 4px 6px;
  border: 1px solid #e2e8f0; border-radius: 4px; font-size: 11px;
}
.dvk-admin-pattern__rm {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.95); border: 1px solid #fecaca; color: #dc2626;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dvk-admin-pattern__rm:hover { background: #dc2626; color: #fff; }

.dvk-admin-kalite {
  display: grid; grid-template-columns: 1fr 100px 100px 1fr 36px; gap: 8px;
  align-items: center; padding: 8px; background: #f8fafc; border-radius: 6px;
  margin-bottom: 6px;
}
.dvk-admin-kalite input { padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 12px; }
@media (max-width: 720px) { .dvk-admin-kalite { grid-template-columns: 1fr 1fr; } }