/* ==========================================================================
   Hesaplayıcılar — ROAS/POAS, CAC/LTV ve pazaryeri kârı
   Yalnızca kısa kod sayfaya girdiğinde yüklenir (inc/shortcodes.php).
   ========================================================================== */

.calc {
  padding: clamp(22px, 3vw, 34px);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  scroll-margin-top: 96px;        /* sticky başlık altında kalmasın */
}

.calc + .calc { margin-top: 24px; }

.calc__title {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: var(--ls-tight);
}

.calc__intro {
  margin-top: 10px;
  max-width: 60ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text-70);
}

/* --- Girdiler --- */

.calc__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.calc__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc__label {
  font-size: var(--fs-sm);
  color: var(--c-text-70);
}

.calc__input-wrap {
  position: relative;
  display: block;
}

.calc__input-wrap input {
  width: 100%;
  min-height: 48px;
  padding: 12px 38px 12px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast);
}
.calc__input-wrap input:hover { border-color: var(--c-border-strong); }
.calc__input-wrap input:focus-visible { border-color: var(--c-primary); }

/* Tarayıcı artırma oklarını gizle — dokunmatikte yanlış basılıyor */
.calc__input-wrap input::-webkit-outer-spin-button,
.calc__input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc__input-wrap input[type="number"] { -moz-appearance: textfield; }

.calc__suffix {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: var(--fs-base);
  color: var(--c-text-66);
  pointer-events: none;
}

/* --- Sonuçlar --- */

.calc__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.calc__result {
  padding: 18px 20px;
  background: #fff;
  border-radius: var(--r-lg);
}
.calc__result--wide { grid-column: 1 / -1; }

.calc__result-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-66);
}

.calc__result-value {
  display: block;
  margin-top: 6px;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

/* Kırmızının tek rolü: dikkat ve uyarı (Final Rapor A5) */
.calc__result-value.is-negative { color: var(--c-attention); }

/* --- Gider dökümü (pazaryeri) ---
   Tek bir kâr rakamı "ne yapmalı" sorusunu yanıtlamıyor. Döküm, kârı
   yiyen kalemi görünür kılar: komisyon mu, kargo mu, iade mi. Karar
   burada veriliyor, sonuç kutusunda değil. */

.calc__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 2px 20px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  list-style: none;
}

.calc__breakdown li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
  font-size: var(--fs-base);
  color: var(--c-text-70);
}
.calc__breakdown li + li { border-top: 1px solid var(--c-border-soft); }

.calc__breakdown strong {
  font-weight: 500;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  /* Rakamlar sağda hizalı okunur; etiket uzayınca sayı kaymasın. */
  white-space: nowrap;
}

/* Sekiz girdi varsayılan 190px'lik kolonlarda geniş ekranda iki satıra
   yayılıyordu. Bu blokta kolon alt sınırı düşürülüyor. */
.calc__inputs--dense { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }

.calc__footnote {
  margin-top: 14px;
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-66);
}

.calc__verdict {
  margin-top: 18px;
  max-width: 62ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text-70);
}

.calc__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* --- Yazdırma: girdiler ve sonuçlar kâğıda düzgün geçsin --- */

@media print {
  .calc {
    background: none;
    padding: 0;
    break-inside: avoid;
  }
  .calc__actions { display: none; }
  .calc__breakdown li + li { border-top: 1px solid #ddd; }
  .calc__result { border: 1px solid #ccc; }
  .calc__input-wrap input { border: 0; padding-left: 0; }
}