/* =============================================================
   WhatsApp maliyet hesaplayicisi (/whatsapp-maliyet-hesaplama)
   chatopya-product.css'ten sonra yuklenir.
   ============================================================= */

.cc-hero { padding-bottom: var(--cy-space-8); }
.cc-section { padding-top: 0; }

.cc-calc {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--cy-space-8);
  align-items: start;
}

/* ---------- Form ---------- */
.cc-form {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-6);
  padding: var(--cy-space-8);
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius);
}
.cc-field { display: flex; flex-direction: column; gap: var(--cy-space-2); }
.cc-field > label,
.cc-label,
.cc-volumes legend {
  font-weight: 600;
  color: var(--cy-ink-900);
  font-size: var(--cy-text-base);
}
.cc-input {
  width: 100%;
  min-height: 48px;
  padding: var(--cy-space-2) var(--cy-space-4);
  font: inherit;
  color: var(--cy-ink-900);
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-200);
  border-radius: var(--cy-radius-sm);
}
.cc-input:focus { outline: 2px solid var(--cy-brand-600); outline-offset: 1px; border-color: var(--cy-brand-600); }
.cc-help { margin: 0; font-size: var(--cy-text-sm); color: var(--cy-ink-500); line-height: 1.5; }

.cc-seg { display: inline-flex; gap: var(--cy-space-2); }
.cc-seg-item { position: relative; cursor: pointer; }
.cc-seg-item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cc-seg-item span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--cy-space-4);
  border: 1px solid var(--cy-ink-200);
  border-radius: var(--cy-radius-sm);
  font-weight: 600;
  color: var(--cy-ink-700);
}
.cc-seg-item input:checked + span { background: var(--cy-brand); border-color: var(--cy-brand); color: #fff; }
.cc-seg-item input:focus-visible + span { outline: 2px solid var(--cy-brand-600); outline-offset: 2px; }

.cc-volumes { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--cy-space-4); }
.cc-volumes legend { margin-bottom: var(--cy-space-2); padding: 0; }
.cc-volume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem;
  align-items: center;
  gap: var(--cy-space-4);
  padding-top: var(--cy-space-4);
  border-top: 1px solid var(--cy-ink-050);
}
.cc-volume label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--cy-ink-900); }
.cc-volume small { font-weight: 400; font-size: var(--cy-text-sm); color: var(--cy-ink-500); line-height: 1.45; }
.cc-volume .cc-input { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Sonuc ---------- */
.cc-result {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  padding: var(--cy-space-8);
  background: var(--cy-surface-dark);
  color: var(--cy-on-dark);
  border-radius: var(--cy-radius);
}
.cc-result-label { font-size: var(--cy-text-sm); text-transform: uppercase; letter-spacing: var(--cy-tracking-wide); }
.cc-total {
  font-family: var(--cy-font-display);
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cc-try { font-size: var(--cy-text-base); color: #fff; min-height: 1.5em; }
.cc-breakdown { width: 100%; border-collapse: collapse; margin-top: var(--cy-space-2); }
.cc-breakdown th,
.cc-breakdown td { padding: var(--cy-space-3) 0; border-top: 1px solid var(--cy-border-dark); vertical-align: top; }
.cc-breakdown th { font-weight: 600; color: #fff; text-align: left; }
.cc-breakdown th small { display: block; font-weight: 400; font-size: var(--cy-text-xs); color: var(--cy-on-dark); margin-top: 2px; }
.cc-breakdown td { text-align: right; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--cy-space-4); }
.cc-avg { margin: 0; font-size: var(--cy-text-sm); }
.cc-avg:empty { display: none; }
.cc-result-cta { display: flex; flex-direction: column; gap: var(--cy-space-3); margin-top: var(--cy-space-3); }
.cc-result .cy-btn-outline { color: #fff; border-color: var(--cy-border-dark); background: transparent; }
.cc-result .cy-btn-outline:hover,
.cc-result .cy-btn-outline:focus { background: var(--cy-surface-dark-2); color: #fff; }
.cc-fine { margin: 0; font-size: var(--cy-text-xs); line-height: 1.5; }
.cc-empty { margin: 0; padding: var(--cy-space-8); text-align: center; color: var(--cy-ink-500); }

/* ---------- Fiyat tablosu ---------- */
.cc-rates-wrap { overflow-x: auto; }
.cc-rates { width: 100%; max-width: 52rem; border-collapse: collapse; background: var(--cy-surface); border-radius: var(--cy-radius); overflow: hidden; }
.cc-rates th,
.cc-rates td { padding: var(--cy-space-4); border-bottom: 1px solid var(--cy-ink-100); text-align: left; vertical-align: top; }
.cc-rates thead th { font-size: var(--cy-text-sm); color: var(--cy-ink-500); font-weight: 600; background: var(--cy-surface-sunk); }
.cc-rates tbody th { font-weight: 600; color: var(--cy-ink-900); }
.cc-rates tbody th small { display: block; font-weight: 400; font-size: var(--cy-text-xs); color: var(--cy-ink-500); max-width: 22rem; }
.cc-rates td { font-variant-numeric: tabular-nums; color: var(--cy-ink-700); }
.cc-rates details summary { cursor: pointer; color: var(--cy-brand); font-weight: 600; }
.cc-rates details ul { list-style: none; margin: var(--cy-space-2) 0 0; padding: 0; font-size: var(--cy-text-sm); }
.cc-rates details li { display: flex; justify-content: space-between; gap: var(--cy-space-4); padding: 2px 0; }

.cc-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Kisa cevap ve "bilgi amaclidir" notu ---------- */
.cc-answer {
  max-width: 52rem;
  margin: var(--cy-space-8) auto 0;
  padding: var(--cy-space-6);
  background: var(--cy-brand-050);
  border-left: 4px solid var(--cy-brand);
  border-radius: var(--cy-radius-sm);
}
.cc-answer-text { margin: 0; line-height: var(--cy-leading-body); color: var(--cy-ink-900); }
.cc-disclaimer {
  display: flex;
  gap: var(--cy-space-2);
  align-items: flex-start;
  margin: var(--cy-space-3) 0 0;
  font-size: var(--cy-text-sm);
  line-height: 1.5;
  color: var(--cy-ink-500);
}
.cc-disclaimer i { color: var(--cy-brand); margin-top: 2px; }
.cc-disclaimer-plain { max-width: 52rem; margin-top: var(--cy-space-4); }

/* ---------- Kategori ve ornek hesap tablolari ---------- */
.cc-cats { max-width: none; }
.cc-cats td { line-height: 1.55; }
.cc-example td:not(:first-child),
.cc-example th:not(:first-child) { text-align: right; white-space: nowrap; }
.cc-example td:nth-child(2) { text-align: right; }
.cc-example tfoot th,
.cc-example tfoot td { font-weight: 700; color: var(--cy-ink-900); background: var(--cy-surface-sunk); text-align: right; }
.cc-example tfoot th { text-align: left; }
.cc-example-note { max-width: 52rem; margin: var(--cy-space-4) 0 0; line-height: var(--cy-leading-body); color: var(--cy-ink-700); }

/* ---------- Tasarruf ipuclari ---------- */
.cc-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cy-space-6); }
.cc-tip {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  padding: var(--cy-space-6);
  background: var(--cy-surface);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius);
}
.cc-tip-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--cy-brand-050);
  color: var(--cy-brand);
  font-weight: 700;
}
.cc-tip h3 { margin: 0; font-size: var(--cy-text-lg); font-weight: 600; }
.cc-tip p { margin: 0; font-size: var(--cy-text-sm); line-height: 1.65; color: var(--cy-ink-500); }
.cc-tip a { display: inline-block; margin-top: var(--cy-space-2); font-weight: 600; color: var(--cy-brand); }

/* ---------- Ekim 2026 degisiklikleri ---------- */
.cc-changes { max-width: 52rem; margin: 0; padding-left: var(--cy-space-6); display: flex; flex-direction: column; gap: var(--cy-space-3); }
.cc-changes li { line-height: var(--cy-leading-body); color: var(--cy-ink-700); }

@media (max-width: 1199.98px) {
  .cc-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .cc-tips { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .cc-calc { grid-template-columns: minmax(0, 1fr); }
  .cc-result { position: static; }
}
@media (max-width: 575.98px) {
  .cc-form,
  .cc-result { padding: var(--cy-space-6); }
  .cc-volume { grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--cy-space-3); }
  .cc-rules { grid-template-columns: minmax(0, 1fr); }
  .cc-rates th,
  .cc-rates td { padding: var(--cy-space-3); }
}