/**
 * AWP Form States - Tab-specific & calculator UI overrides
 * Genel form stilleri styles/form-system.css içinde (@layer components).
 * Bu dosya: Ders Notu sekmesi format/renk butonları, primary/secondary buton görünümü,
 * özel ölçü kartı detayları. JS-linked: .active, .selected, .awp-error, .awp-has-files.
 */

#awp-printwise-root,
#awp-printwise-root .calculator-tab-content {
  --awp-form-radius: 8px;
  --awp-form-transition: 150ms ease-out;
  --awp-form-placeholder: #737373;
}

/* ===== DERS NOTU - Input/placeholder rengi (tab özel) ===== */
#tab-content-ders-notu .module-ders-notu-left-col input,
#tab-content-ders-notu .module-ders-notu-fields input,
#tab-content-ders-notu .module-ders-notu-left-col select,
#tab-content-ders-notu .module-ders-notu-fields select,
#tab-content-ders-notu .module-ders-notu-fields .modern-select,
#tab-content-ders-notu .module-ders-notu-instructions {
  color: #111827 !important;
}
#tab-content-ders-notu .module-ders-notu-left-col input::placeholder,
#tab-content-ders-notu .module-ders-notu-fields input::placeholder,
#tab-content-ders-notu .module-ders-notu-instructions::placeholder {
  color: var(--awp-form-placeholder) !important;
}

/* ===== DERS NOTU - Format (A4/A3) & Renk (B&W / Renkli) - sb/renkli ile birebir aynı ===== */
#tab-content-ders-notu .dn-format-btn {
  border-radius: 6px !important;
  border: 2px solid #e2e8f0 !important;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease !important;
  box-shadow: none !important;
}
/* A4/A3 – unselected: sb/renkli ile aynı base */
#tab-content-ders-notu .dn-format-btn:not(.active):not(.awp-color-btn) {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}
/* A4/A3 – hover: sb/renkli ile aynı */
#tab-content-ders-notu .dn-format-btn:not(.active):not(.awp-color-btn):hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}
/* A4/A3 – active (tıklama anı) */
#tab-content-ders-notu .dn-format-btn:not(.awp-color-btn):active {
  transform: translateY(0) !important;
}
/* A4/A3 – focus: sb/renkli ile aynı */
#tab-content-ders-notu .dn-format-btn:not(.awp-color-btn):focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}
/* A4/A3 – selected (.active): renkli buton ile aynı indigo, etiket beyaz */
#tab-content-ders-notu .dn-format-btn.active:not(.awp-color-btn) {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
}
#tab-content-ders-notu .dn-format-btn.active:not(.awp-color-btn) .awp-color-btn-label {
  color: #ffffff !important;
}
/* A4/A3 – selected hover */
#tab-content-ders-notu .dn-format-btn.active:not(.awp-color-btn):hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
}
#tab-content-ders-notu .dn-format-btn.active:not(.awp-color-btn):hover .awp-color-btn-label {
  color: #ffffff !important;
}
/* Renk seçici butonları tek blokta - aşağıda awp-color-btn ile birleşik */

/* ===== Primary / Secondary butonlar - Calculator context (fintech, outline-offset) ===== */
#awp-printwise-root .module-ders-notu-btn-primary,
#awp-printwise-root .module-ders-notu-btn-secondary {
  transition:
    background 140ms cubic-bezier(0.4, 0, 0.2, 1),
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease !important;
  outline: none;
}
#awp-printwise-root .module-ders-notu-btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
#awp-printwise-root
  .module-ders-notu-btn-primary:hover:not(:disabled) {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25) !important;
  transform: translateY(-1px) !important;
}
#awp-printwise-root .module-ders-notu-btn-primary:focus,
#awp-printwise-root .module-ders-notu-btn-primary:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5) !important;
  outline-offset: 2px !important;
}
#awp-printwise-root
  .module-ders-notu-btn-primary:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
#awp-printwise-root .module-ders-notu-btn-secondary {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}
#awp-printwise-root
  .module-ders-notu-btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
#awp-printwise-root .module-ders-notu-btn-secondary:focus,
#awp-printwise-root .module-ders-notu-btn-secondary:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.5) !important;
  outline-offset: 2px !important;
}
#awp-printwise-root
  .module-ders-notu-btn-secondary:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ===== Özel ölçü kartı - Rulo/Dijital (iç yapı) ===== */
#awp-printwise-root .awp-custom-size-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
#awp-printwise-root .awp-custom-size-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0957f;
  border-radius: 50%;
}
#awp-printwise-root .awp-custom-size-icon img,
#awp-printwise-root .awp-custom-size-icon .rulo-tooltip-icon-img,
#awp-printwise-root .awp-custom-size-icon .rulo-tooltip-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}
#awp-printwise-root .awp-custom-size-icon .rulo-tooltip-icon-svg {
  color: #fff;
}
/* Özel Ölçü tooltip butonu - coral daire, diğer tooltip'lerden farklı */
#awp-printwise-root .rulo-tooltip-btn.awp-custom-size-tooltip-btn {
  background: #f0957f !important;
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  color: #fff;
}
#awp-printwise-root .rulo-tooltip-btn.awp-custom-size-tooltip-btn:hover {
  background: #e0856f !important;
  color: #fff;
}
#awp-printwise-root .awp-custom-size-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Form etiket başlıkları — tüm modüllerde kalın */
#awp-printwise-root .awp-info-title,
#awp-printwise-root label.awp-info-title,
#awp-printwise-root .awp-custom-size-title {
  font-weight: 700 !important;
}

#awp-printwise-root .awp-custom-size-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  line-height: 1.3;
}
#awp-printwise-root .awp-custom-size-desc {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.4;
  margin: 0;
}

/* ===== Renkli / Siyah-Beyaz seçici butonları - TÜM formlarda aynı davranış (hover, active, selected) ===== */
.awp-color-selector-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: end;
  overflow: visible;
  /* İkon margin-top:-36px taşması; üstteki Baskı Rengi etiketi/açıklama ile çakışmasın */
  padding-top: 36px;
}

/* Üstte awp-info-block varken etiketlerin buton ikonlarının altında kalmaması */
.rulo-form-field > .awp-info-block + .awp-color-selector-buttons,
.awp-info-block + .awp-color-selector-buttons {
  padding-top: 36px;
}

.rulo-form-field > .awp-info-block:has(+ .awp-color-selector-buttons),
.awp-info-block:has(+ .awp-color-selector-buttons) {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}
.awp-color-btn,
#awp-printwise-root .awp-color-btn,
#awp-printwise-root .dn-format-btn.awp-print-type-option.awp-color-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 12px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease;
  min-height: 88px;
  overflow: visible;
  position: relative;
  z-index: 1;
}
/* Hover - seçili olmayanlar (seçili mavi kalsın) */
.awp-color-btn:hover:not(.selected),
#awp-printwise-root .awp-color-btn:hover:not(.selected),
#awp-printwise-root .dn-format-btn.awp-print-type-option.awp-color-btn:hover:not(.selected) {
  border-color: #94a3b8;
  background: #f1f5f9;
  transform: translateY(-1px);
}
.awp-color-btn:hover:not(.selected) .awp-color-btn-label {
  color: #1e293b;
}
/* Active - tıklama anı (tüm modüllerde aynı hareket: Ders Notu, Rulo, Dijital) */
.awp-color-btn:active,
#awp-printwise-root .awp-color-btn:active,
.awp-color-selector-rulo .awp-color-btn:active,
.awp-color-selector-dijital .awp-color-btn:active,
.dn-format-buttons .awp-color-btn:active,
/* Ders Notu Renk/SB: scale titremeden kaçınmak için sadece hafif basılma (translateY) */
#tab-content-ders-notu .awp-color-selector-buttons .awp-color-btn.awp-print-type-option,
#tab-content-ders-notu .awp-color-selector-buttons .awp-color-btn.ders-notu-print-option {
  transition: transform 0.2s ease-out, border-color 0.2s ease, background 0.2s ease;
}
#tab-content-ders-notu .awp-color-selector-buttons .awp-color-btn.awp-print-type-option:active,
#tab-content-ders-notu .awp-color-selector-buttons .awp-color-btn.ders-notu-print-option:active {
  transform: translateY(0);
}
/* Rulo / Dijital: kitap baskısı ile aynı tıklama anı (scale titremeden) */
#tab-content-rulo-baski .awp-color-selector-buttons .awp-color-btn.awp-print-type-option,
#tab-content-dijital-baski .awp-color-selector-buttons .awp-color-btn.awp-print-type-option {
  transition: transform 0.2s ease-out, border-color 0.2s ease, background 0.2s ease;
}
#tab-content-rulo-baski .awp-color-selector-buttons .awp-color-btn.awp-print-type-option:active,
#tab-content-dijital-baski .awp-color-selector-buttons .awp-color-btn.awp-print-type-option:active {
  transform: translateY(0);
}
/* Focus - klavye erişilebilirliği */
.awp-color-btn:focus-visible,
#awp-printwise-root .awp-color-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
/* calculator.css .awp-print-type-option.selected gölgesini Renk/SB butonlarında kaldır – Dijital ile aynı (gölgesiz) */
.awp-color-btn.selected,
#awp-printwise-root .awp-color-btn.selected,
#awp-printwise-root .dn-format-btn.awp-print-type-option.awp-color-btn.selected,
.awp-print-type-option.awp-color-btn.selected {
  box-shadow: none !important;
}

/* Selected - Renkli ve Siyah-Beyaz aynı mavi (tüm formlar) */
.awp-color-btn.selected,
.awp-color-btn.selected.awp-color-btn-sb,
.awp-color-btn.selected.awp-color-btn-renkli,
.awp-color-btn.selected[data-value="sb"],
.awp-color-btn.selected[data-value="renkli"],
.awp-color-btn.selected[data-print-type="bw"],
.awp-color-btn.selected[data-print-type="colored"],
#awp-printwise-root .awp-color-btn.selected,
#awp-printwise-root .awp-color-btn.selected[data-print-type="bw"],
#awp-printwise-root .awp-color-btn.selected[data-print-type="colored"],
#awp-printwise-root .awp-color-btn.selected[data-value="sb"],
#awp-printwise-root .awp-color-btn.selected[data-value="renkli"] {
  border-color: #4f46e5 !important;
  background: #4f46e5 !important;
  color: #fff !important;
}
.awp-color-btn.selected .awp-color-btn-label,
.awp-color-btn.selected.awp-color-btn-sb .awp-color-btn-label,
.awp-color-btn.selected.awp-color-btn-renkli .awp-color-btn-label,
.awp-color-btn.selected[data-value="sb"] .awp-color-btn-label,
.awp-color-btn.selected[data-value="renkli"] .awp-color-btn-label,
.awp-color-btn.selected[data-print-type="bw"] .awp-color-btn-label,
.awp-color-btn.selected[data-print-type="colored"] .awp-color-btn-label {
  color: #fff !important;
}
.awp-color-btn.selected:hover,
.awp-color-btn.selected.awp-color-btn-sb:hover,
.awp-color-btn.selected.awp-color-btn-renkli:hover,
.awp-color-btn.selected[data-value="sb"]:hover,
.awp-color-btn.selected[data-value="renkli"]:hover,
.awp-color-btn.selected[data-print-type="bw"]:hover,
.awp-color-btn.selected[data-print-type="colored"]:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
}
.awp-color-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  margin-top: -36px;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.awp-color-btn-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.12);
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
}
/* Kitap baskısı / Rulo / Dijital — aynı ikon kutusu (taşan görsel) */
.awp-color-selector-buttons.awp-color-selector-rulo .awp-color-btn-icon,
.awp-color-selector-buttons.awp-color-selector-dijital .awp-color-btn-icon,
#tab-content-ders-notu .awp-color-selector-buttons .awp-color-btn-icon,
#tab-content-ders-notu .dn-format-buttons .awp-color-btn-icon,
#tab-content-dijital-baski .awp-color-selector-buttons .awp-color-btn-icon,
#tab-content-rulo-baski .awp-color-selector-buttons .awp-color-btn-icon {
  width: 104px !important;
  height: 104px !important;
  margin-top: -36px !important;
}

/* Rulo / Dijital: tema button{} stillerini ezip kitap baskısı ile birebir (module-ders-notu-enterprise ile aynı palet) */
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:not(.selected),
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:not(.selected) {
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
  text-align: center !important;
  box-shadow: none !important;
  background: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  color: #334155 !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option {
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
  text-align: center !important;
  box-shadow: none !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:hover:not(.selected),
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:hover:not(.selected) {
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
  box-shadow: none !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:focus-visible,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:active,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option:active {
  transform: translateY(0) !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="sb"],
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="sb"],
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="renkli"],
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="renkli"] {
  border-color: #4f46e5 !important;
  background: #4f46e5 !important;
  color: #fff !important;
  box-shadow: none !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="sb"] .awp-color-btn-label,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="sb"] .awp-color-btn-label {
  color: #fff !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="sb"]:hover,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="sb"]:hover,
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="renkli"]:hover,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="renkli"]:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
}
#awp-printwise-root #tab-content-rulo-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="renkli"] .awp-color-btn-label,
#awp-printwise-root #tab-content-dijital-baski .awp-color-selector-buttons button.awp-color-btn.awp-print-type-option.selected[data-value="renkli"] .awp-color-btn-label {
  color: #fff !important;
}
.awp-color-btn-label {
  font-family: var(--font-family-base, inherit);
  font-size: var(--font-size-sm, 14px);
  font-weight: 900;
  color: #334155;
  text-align: center;
}
@media (max-width: 768px) {
  .awp-color-btn,
  #awp-printwise-root .awp-color-btn,
  #awp-printwise-root .dn-format-btn.awp-print-type-option.awp-color-btn {
    min-height: 76px;
    padding: 0 10px 10px;
  }
  .awp-color-selector-buttons,
  .rulo-form-field > .awp-info-block + .awp-color-selector-buttons,
  .awp-info-block + .awp-color-selector-buttons {
    padding-top: 32px;
  }
  .awp-color-btn-icon,
  .awp-color-selector-buttons.awp-color-selector-rulo .awp-color-btn-icon,
  .awp-color-selector-buttons.awp-color-selector-dijital .awp-color-btn-icon,
  #tab-content-ders-notu .awp-color-selector-buttons .awp-color-btn-icon,
  #tab-content-ders-notu .dn-format-buttons .awp-color-btn-icon,
  #tab-content-dijital-baski .awp-color-selector-buttons .awp-color-btn-icon,
  #tab-content-rulo-baski .awp-color-selector-buttons .awp-color-btn-icon {
    width: 88px !important;
    height: 88px !important;
    margin-top: -32px !important;
  }
}

/* Tasarım Kontrolü — Dosya Yükle ile aynı kesik çizgili kutu.
   Boşluk: yükleme satırı ile aynı gap (wrapper .awp-form-bottom-stack) */
.awp-form-bottom-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.module-ders-notu-left-col > .awp-form-bottom-stack,
.module-dijital-baski-left-col > .awp-form-bottom-stack,
.module-katalog-left-col > .awp-form-bottom-stack,
.rulo-subtype-content > .awp-form-bottom-stack {
  grid-area: bottom;
}
.awp-form-bottom-stack .module-ders-notu-bottom,
.awp-form-bottom-stack .module-dijital-baski-bottom,
.awp-form-bottom-stack .module-katalog-bottom,
.awp-form-bottom-stack .module-rulo-baski-bottom {
  grid-area: auto;
  width: 100%;
}
#tab-content-dijital-baski .awp-form-bottom-stack,
#tab-content-katalog .awp-form-bottom-stack {
  gap: 20px; /* bu modüllerde yan yana kutular arası 20px */
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.awp-design-control-field {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}
.awp-design-control-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .awp-design-control-options {
    grid-template-columns: 1fr;
  }
}
.awp-design-control-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.awp-design-control-option:hover {
  border-color: #93c5fd;
}
.awp-design-control-option:has(.awp-design-control-input:checked) {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}
.awp-design-control-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.awp-design-control-check {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
  border: 2px solid #9ca3af;
  border-radius: 0.25rem;
  background: #fff;
  box-sizing: border-box;
  position: relative;
}
.awp-design-control-input:checked + .awp-design-control-check {
  background: #3b82f6;
  border-color: #3b82f6;
}
.awp-design-control-input:checked + .awp-design-control-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.awp-design-control-input:focus-visible + .awp-design-control-check {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.awp-design-control-texts {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.awp-design-control-option-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}
.awp-design-control-option-desc {
  font-size: 0.8125rem;
  color: #9ca3af;
  line-height: 1.35;
}
.awp-design-control-price-suffix {
  font-weight: 500;
  color: #6b7280;
}

/* Tahmini Teslimat rozeti — renkler Ana İçerik CSS değişkenlerinden */
.awp-estimated-delivery {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--awp-ed-bg, #eff6ff);
  border: 1px solid var(--awp-ed-border, #bfdbfe);
  color: var(--awp-ed-range, #1e40af);
  box-sizing: border-box;
}
.awp-estimated-delivery-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--awp-ed-icon-bg, #ffffff);
  color: var(--awp-ed-icon, #2563eb);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
}
.awp-estimated-delivery-icon-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  display: block;
}
.awp-estimated-delivery-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.awp-estimated-delivery-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--awp-ed-title, #3b82f6);
  line-height: 1.2;
}
.awp-estimated-delivery-range {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--awp-ed-range, #1e40af);
  line-height: 1.25;
}
.awp-estimated-delivery--same-day {
  background: var(--awp-ed-same-bg, #fef2f2);
  border-color: var(--awp-ed-same-border, #fecaca);
  color: var(--awp-ed-same-range, #991b1b);
}
.awp-estimated-delivery--same-day .awp-estimated-delivery-icon {
  color: var(--awp-ed-same-icon, #dc2626);
}
.awp-estimated-delivery--same-day .awp-estimated-delivery-title {
  color: var(--awp-ed-same-title, #ef4444);
}
.awp-estimated-delivery--same-day .awp-estimated-delivery-range {
  color: var(--awp-ed-same-range, #991b1b);
}

/* Yön (Dikey / Yatay) — select yüksekliği (48px) + renk butonu aktif/hover renkleri */
.awp-orientation-btns,
#awp-printwise-root .awp-orientation-btns,
#tab-content-dijital-baski .awp-orientation-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.awp-orientation-btn,
#awp-printwise-root .awp-orientation-btn,
#tab-content-dijital-baski .awp-orientation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 12px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
  box-sizing: border-box;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.awp-orientation-btn:hover:not(.selected),
#awp-printwise-root .awp-orientation-btn:hover:not(.selected),
#tab-content-dijital-baski .awp-orientation-btn:hover:not(.selected) {
  border-color: #94a3b8;
  background: #f1f5f9;
  color: #1e293b;
  transform: translateY(-1px);
}
.awp-orientation-btn:active,
#awp-printwise-root .awp-orientation-btn:active,
#tab-content-dijital-baski .awp-orientation-btn:active {
  transform: translateY(0);
}
.awp-orientation-btn:focus-visible,
#awp-printwise-root .awp-orientation-btn:focus-visible,
#tab-content-dijital-baski .awp-orientation-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.awp-orientation-btn-icon,
#awp-printwise-root .awp-orientation-btn-icon,
#tab-content-dijital-baski .awp-orientation-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.awp-orientation-btn.selected,
#awp-printwise-root .awp-orientation-btn.selected,
#tab-content-dijital-baski .awp-orientation-btn.selected {
  border-color: #4f46e5 !important;
  background: #4f46e5 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.awp-orientation-btn.selected .awp-orientation-btn-label,
#awp-printwise-root .awp-orientation-btn.selected .awp-orientation-btn-label,
#tab-content-dijital-baski .awp-orientation-btn.selected .awp-orientation-btn-label {
  color: #fff !important;
}
.awp-orientation-btn.selected .awp-orientation-btn-icon,
#awp-printwise-root .awp-orientation-btn.selected .awp-orientation-btn-icon,
#tab-content-dijital-baski .awp-orientation-btn.selected .awp-orientation-btn-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.awp-orientation-btn.selected:hover,
#awp-printwise-root .awp-orientation-btn.selected:hover,
#tab-content-dijital-baski .awp-orientation-btn.selected:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}

/* Yön alanı ile yanındaki select aynı satır yüksekliği */
.awp-form-grid-aligned > .awp-orientation-field,
.awp-form-grid-aligned > .awp-orientation-field + div {
  display: flex;
  flex-direction: column;
}
.awp-form-grid-aligned > .awp-orientation-field .awp-orientation-btns,
.awp-form-grid-aligned > .awp-orientation-field + div .awp-select,
.awp-form-grid-aligned > .awp-orientation-field + div .modern-select,
.awp-form-grid-aligned > .awp-orientation-field + div select.awp-select {
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
}

/* Teslimat Hızı — form alanı stili (çerçevesiz, awp-info-block ile) */
.awp-delivery-speed-field {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.awp-delivery-speed-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.awp-delivery-speed-options--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .awp-delivery-speed-options,
  .awp-delivery-speed-options--count-2 {
    grid-template-columns: 1fr;
  }
}
.awp-delivery-speed-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.awp-delivery-speed-option:hover {
  border-color: #93c5fd;
}
.awp-delivery-speed-input:checked ~ .awp-delivery-speed-texts,
.awp-delivery-speed-option:has(.awp-delivery-speed-input:checked) {
  border-color: #2563eb;
}
.awp-delivery-speed-option:has(.awp-delivery-speed-input:checked) {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}
.awp-delivery-speed-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.awp-delivery-speed-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid #9ca3af;
  position: relative;
  box-sizing: border-box;
}
.awp-delivery-speed-input:checked + .awp-delivery-speed-check {
  border-color: #2563eb;
}
.awp-delivery-speed-input:checked + .awp-delivery-speed-check::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2563eb;
}
.awp-delivery-speed-input:focus-visible + .awp-delivery-speed-check {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
.awp-delivery-speed-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.awp-delivery-speed-option-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}
.awp-delivery-speed-option-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}
.awp-delivery-speed-duration,
.awp-delivery-speed-fee,
.awp-delivery-speed-cutoff-hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.25;
}
.awp-delivery-speed-price-suffix {
  font-weight: 500;
  color: #6b7280;
}

/* ===== Tüm formlar: input ↔ select aynı yükseklik (yan yana hiza) ===== */
#awp-printwise-root {
  --awp-control-height: 48px;
}
#awp-printwise-root .input-shared,
#awp-printwise-root .awp-form-input,
#awp-printwise-root .awp-select,
#awp-printwise-root .modern-select,
#awp-printwise-root .katalog-input,
#awp-printwise-root select.awp-select,
#awp-printwise-root .modern-select-wrapper > select,
#awp-printwise-root input[type="text"].input-shared,
#awp-printwise-root input[type="number"].input-shared,
#awp-printwise-root input[type="email"].input-shared,
#awp-printwise-root input[type="tel"].input-shared {
  height: var(--awp-control-height) !important;
  min-height: var(--awp-control-height) !important;
  max-height: var(--awp-control-height) !important;
  box-sizing: border-box !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 6px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 1rem !important;
  line-height: calc(var(--awp-control-height) - 4px) !important;
  vertical-align: middle;
}
#awp-printwise-root .awp-select,
#awp-printwise-root .modern-select,
#awp-printwise-root select.awp-select,
#awp-printwise-root .modern-select-wrapper > select {
  padding-right: 2.25rem !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#awp-printwise-root .input-shared,
#awp-printwise-root .awp-form-input,
#awp-printwise-root input[type="number"].input-shared {
  padding-right: 1rem !important;
}
#awp-printwise-root .modern-select-wrapper {
  display: block;
  width: 100%;
  min-height: var(--awp-control-height);
}
@media (max-width: 640px) {
  #awp-printwise-root {
    --awp-control-height: 44px;
  }
}