/**
 * Commerce Layout Preset — AWP PrintWise
 *
 * SIFIR RİSK KURALI: Bu dosyadaki her kural yalnızca
 *   #awp-printwise-root[data-layout-preset="commerce"]
 * altında çalışır. Varsayılan preset "classic" olduğu için, admin'den commerce
 * seçilmedikçe hiçbir kural uygulanmaz ve mevcut görünüm birebir korunur.
 *
 * Tema RENK ayarlarına dokunulmaz: fiyat paneli renkleri admin'deki
 * --awp-summary-panel-* değişkenlerinden gelmeye devam eder. Burada yalnızca
 * yapı, boşluk, kart estetiği ve düzen ayarlanır.
 */

/* =========================================================================
   0. Kök değişkenler (admin genişlik ayarları header-vars'tan inline gelir)
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"] {
  --awp-commerce-visual-col: 350px;
  --awp-commerce-summary-col: 320px;
  --awp-commerce-gap: 20px;
  --awp-commerce-card-radius: 14px;
  --awp-commerce-card-border: #e6e9f0;
  --awp-commerce-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.15);
  --awp-commerce-section-accent: var(--color-primary, #2563eb);
}

/* =========================================================================
   1. Breadcrumb
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb {
  margin: 0 0 14px 0;
  padding: 0 2px;
}
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb-item {
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb-link {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb-link:hover {
  color: var(--awp-commerce-section-accent);
}
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb-sep {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
}
#awp-printwise-root[data-layout-preset="commerce"] .awp-commerce-breadcrumb-current {
  color: #0f172a;
  font-weight: 600;
}

/* =========================================================================
   2. Modül grid — sol görsel | orta form | sağ özet (genişlikler admin'den)
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu,
#awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski,
#awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski,
#awp-printwise-root[data-layout-preset="commerce"] .module-katalog,
#awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-layout {
  gap: var(--awp-commerce-gap);
}

@media (min-width: 901px) {
  #awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu,
  #awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski,
  #awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski,
  #awp-printwise-root[data-layout-preset="commerce"] .module-katalog,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-layout {
    grid-template-columns: 1fr minmax(var(--awp-commerce-summary-col), calc(var(--awp-commerce-summary-col) + 40px));
  }

  /* Tüm formlar: görsel kartı 350px */
  #awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu-form-row,
  #awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski-form-row,
  #awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-form-row,
  #awp-printwise-root[data-layout-preset="commerce"] .module-katalog-form-row,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-layout__form-row {
    grid-template-columns: 350px minmax(0, 1fr);
    gap: 12px;
  }

  #awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu-form-row .module-ders-notu-image,
  #awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski-form-row .module-rulo-baski-image,
  #awp-printwise-root[data-layout-preset="commerce"] .module-katalog-form-row .module-katalog-image,
  #awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-form-row .module-dijital-baski-image-col,
  #awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-form-row .module-dijital-baski-image,
  #awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-form-row #dijital-product-image-wrap,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-layout__visual-column {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
  }

  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-product-visual-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  #awp-printwise-root[data-layout-preset="commerce"] .awp-product-image-fixed:has(.awp-product-gallery),
  #awp-printwise-root[data-layout-preset="commerce"] .awp-product-image-fixed.awp-has-product-gallery,
  #awp-printwise-root[data-layout-preset="commerce"] .awp-product-gallery-component {
    max-width: var(--awp-commerce-visual-col);
  }
}

/* =========================================================================
   3. Kart estetiği — görsel, form, özet (e-ticaret hissi)
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"] .awp-product-image-fixed:has(.awp-product-gallery),
#awp-printwise-root[data-layout-preset="commerce"] .awp-product-image-fixed.awp-has-product-gallery,
#awp-printwise-root[data-layout-preset="commerce"] .awp-product-gallery-component {
  border-radius: var(--awp-commerce-card-radius);
  border: 1px solid var(--awp-commerce-card-border);
  box-shadow: var(--awp-commerce-card-shadow);
}

/* Orta form kartı */
#awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-fields > .bg-white,
#awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski-fields > .bg-white,
#awp-printwise-root[data-layout-preset="commerce"] .module-katalog-fields > .bg-white,
#awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu-fields > .bg-white {
  border-radius: var(--awp-commerce-card-radius);
  border: 1px solid var(--awp-commerce-card-border);
  box-shadow: var(--awp-commerce-card-shadow);
}

/* Fiyat / sipariş özeti paneli — RENK admin'den; sadece köşe + gölge + hizalama */
#awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu-summary,
#awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski-summary,
#awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-summary,
#awp-printwise-root[data-layout-preset="commerce"] .module-katalog-summary {
  border-radius: var(--awp-commerce-card-radius) !important;
  box-shadow: var(--awp-commerce-card-shadow);
  align-self: start;
  position: sticky;
  top: 16px;
}

/* =========================================================================
   4. Alt-tür sekmeleri (data-commerce-pill="1")
   Rulo mercan stil (#ff8267) — 6 buton tek satır, daraltılmış
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #tab-content-dijital-baski .dijital-subtype-tabs,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs.calculator-tabs-grid[data-subtype-grid="true"],
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  overflow: visible !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-btn-grid,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-dijital-baski-default,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-kartvizit,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-brosur,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-etiket,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-poster,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-davetiye {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: #ff8267 !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28) !important;
  transform: none !important;
  overflow: visible !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-btn-grid:hover,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-dijital-baski-default:hover,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-kartvizit:hover,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-brosur:hover,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-etiket:hover,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-poster:hover,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-davetiye:hover {
  background: #f57117 !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.32) !important;
  transform: none !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-btn-grid.active,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-dijital-baski-default.active,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-kartvizit.active,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-brosur.active,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-etiket.active,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-poster.active,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-davetiye.active {
  background: #d82626 !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25) !important;
  transform: none !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-icon-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-dijital-baski-default .calculator-tab-icon-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-kartvizit .calculator-tab-icon-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-brosur .calculator-tab-icon-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-etiket .calculator-tab-icon-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-poster .calculator-tab-icon-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-davetiye .calculator-tab-icon-wrapper {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-icon,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-dijital-baski-default .calculator-tab-icon,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-kartvizit .calculator-tab-icon,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-brosur .calculator-tab-icon,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-etiket .calculator-tab-icon,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-poster .calculator-tab-icon,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-davetiye .calculator-tab-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  right: auto !important;
  position: static !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-text-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-kartvizit .calculator-tab-text-wrapper,
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] #btn-brosur .calculator-tab-text-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

#awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"] .dijital-subtype-tabs .calculator-tab-text-line {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  line-height: 1.15 !important;
  white-space: normal !important;
  color: #f8fafc !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* Yeni alt form placeholder (Etiket / Poster / Davetiye — alanlar sonra) */
#awp-printwise-root .awp-commerce-form-placeholder {
  padding: 20px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}

/* =========================================================================
   5. Numaralı bölüm başlıkları (data-commerce-numbered="1")
   Yalnızca .awp-commerce-section-title sınıfı taşıyan başlıklara sayaç ekler;
   mevcut başlıklara dokunmaz (opt-in). CSS counter root'ta sıfırlanır.
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-numbered="1"] .calculator-tab-content.active {
  counter-reset: awp-commerce-section;
}
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-numbered="1"] .awp-commerce-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #0f172a;
}
#awp-printwise-root[data-layout-preset="commerce"][data-commerce-numbered="1"] .awp-commerce-section-title::before {
  counter-increment: awp-commerce-section;
  content: counter(awp-commerce-section);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--awp-commerce-section-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

/* =========================================================================
   6. Özel form (Form Engine) — 2 sütun alan grid (data-commerce-twocol="1")
   auto-fit + minmax: taşma yapmaz, dar ekranda tek sütuna düşer (güvenli).
   ========================================================================= */
@media (min-width: 720px) {
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-twocol="1"].awp-form-engine-page .awp-fe-fields-mount {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 18px;
    align-items: start;
  }
  /* Tam genişlik isteyen alanlar (upload, textarea, açıklama) span 1/-1 */
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-twocol="1"].awp-form-engine-page .awp-fe-fields-mount > .awp-fe-field--full,
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-twocol="1"].awp-form-engine-page .awp-fe-fields-mount > [data-awp-fe-type="textarea"],
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-twocol="1"].awp-form-engine-page .awp-fe-fields-mount > [data-awp-fe-type="upload"] {
    grid-column: 1 / -1;
  }
}

/* =========================================================================
   7. Genel boşluk / arka plan cilası
   ========================================================================= */
#awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-top,
#awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski-top,
#awp-printwise-root[data-layout-preset="commerce"] .module-katalog-top,
#awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu-top {
  margin-bottom: 4px;
}

/* =========================================================================
   8. Mobil (≤900px): commerce grid tek sütuna, mevcut mobil davranış korunur
   ========================================================================= */
@media (max-width: 900px) {
  #awp-printwise-root[data-layout-preset="commerce"] .module-ders-notu-summary,
  #awp-printwise-root[data-layout-preset="commerce"] .module-rulo-baski-summary,
  #awp-printwise-root[data-layout-preset="commerce"] .module-dijital-baski-summary,
  #awp-printwise-root[data-layout-preset="commerce"] .module-katalog-summary {
    position: static;
    top: auto;
  }

  /* Hamburger menü varken ikon buton satırını gizle (commerce override) */
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    #tab-content-dijital-baski
    .dijital-subtype-nav
    .dijital-subtype-tabs,
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    #tab-content-dijital-baski
    .dijital-subtype-nav
    .dijital-subtype-tabs.calculator-tabs-grid[data-subtype-grid="true"],
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    .dijital-subtype-nav
    .dijital-subtype-tabs {
    display: none !important;
  }
}