/* Yeslist paketler ve ödeme ailesi (TASARIM-01 parti 7.1, plan v2 §7).
   site.css'ten SONRA yüklenir ve onun dilini kullanır: afiş H1, `.btn-*`,
   kağıt zemin, cetvel çizgileri. Kabuğun sınıflarını (`.brand`, `.eyebrow`,
   `.head`, `.foot`) yeniden tanımlamaz. Bu sayfalarda hareket yoktur.
   Yazı %200 büyütülünce de taşma olmamalı: sabit genişlik yok, her şey sarar.
   Kurucu 24998: kullanıcı yazı okumadan pakete ulaşır; uzun metin kapalı gelir. */

/* İçerik ve footer sarar; kabuğun header'ındaki düğme metni bölünmez. */

.sales main, .sales .foot { overflow-wrap: anywhere; }

/* Kabukta tek satır kalan parçalar burada sarabilir (dar ekran + büyük yazı). */

.sales .eyebrow { white-space: normal; line-height: 1.3; margin: 0 0 var(--space-4); }

.sales .poster > span { white-space: normal; }

/* Dar sütun: sol kenar logoyla hizalı kalır, yalnız içerik daralır. */

.sales-narrow > * { max-width: 40rem; }

/* ---------------------------------------------------------------- sayfa başı */

.sales-top { padding: var(--space-8) 0 var(--space-8); }

.sales-top-tight { padding-bottom: var(--space-6); }

.sales-lead {
  max-width: 44rem;
  margin: var(--space-6) 0 0;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.stage .sales-lead { color: var(--stage-text-soft); }

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 6.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.version { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); }

.sales-section { padding: var(--space-10) 0; }

.sales-section-flush { padding-top: 0; }

.sales-section:last-child { padding-bottom: var(--space-16); }

/* Telefonda ilk ekranda üç fiyat: dokununca o karta iner. */

.price-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-6);
  border: 2px solid var(--color-ink);
  border-radius: 18px;
  overflow: hidden;
}

.price-strip a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  line-height: 1.2;
}

.price-strip a + a { border-left: 1px solid var(--color-border-strong); }

.price-strip span { font-weight: 700; font-size: var(--text-xs); color: var(--color-ink-soft); }

.price-strip strong { font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

.price-strip a:last-child { background: var(--stage); color: var(--lime); }

.price-strip a:last-child span { color: var(--stage-text-soft); }

/* ---------------------------------------------------------------- paket kartları */
/* Landing'deki paket kartıyla aynı geometri: ücretsiz kesik çizgili, Temel
   çizgili, Pro sahne. Her kart o paketin bütün haklarını taşır. */

.buy-grid { display: grid; gap: var(--space-4); max-width: 36rem; }

.price-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  border: 2px solid var(--color-ink);
  border-radius: 24px;
  background: var(--color-surface);
  scroll-margin-top: calc(var(--head-h) + 12px);
}

.price-card-ucretsiz { border-style: dashed; background: transparent; }

.price-card-pro {
  border-color: var(--stage);
  color: var(--stage-text);
  background-color: var(--stage);
  background-image: radial-gradient(120% 80% at 100% 0%, var(--stage-hi) 0%, rgb(27 94 56 / 0%) 65%);
}

.price-name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  line-height: 1.2;
  letter-spacing: 0.12em;
}

.price-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0 0 var(--space-2); }

.price-amount strong {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: 4.25rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.price-card-pro .price-amount strong { color: var(--lime); }

.price-amount span { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

.price-line { margin: 0 0 var(--space-4); font-size: 1.125rem; font-weight: 500; }

.price-rows { display: grid; margin: 0 0 var(--space-4); padding: 0; list-style: none; }

.price-rows li {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 0.625rem 0 0.625rem 1.75rem;
  border-top: 1px solid var(--color-border);
  line-height: 1.3;
}

.price-card-pro .price-rows li { border-top-color: var(--stage-line); }

.price-rows span { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: var(--color-ink-soft); }

.price-card-pro .price-rows span { color: var(--stage-text-soft); }

.price-rows strong { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }

/* Onay işareti: logodaki ✓ ile aynı jest. */

.price-rows .has::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95rem;
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--color-brand);
  border-bottom: 3px solid var(--color-brand);
  transform: rotate(-45deg);
}

.price-card-pro .price-rows .has::before { border-color: var(--lime); }

.price-rows .soon strong { font-weight: 700; color: var(--color-ink-soft); }

.price-card-pro .price-rows .soon strong { color: var(--stage-text-soft); }

.price-missing { margin: 0 0 var(--space-5); font-size: 0.9375rem; line-height: 1.45; color: var(--color-ink-soft); }

.price-note { max-width: 36rem; margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--color-ink-soft); }

/* Satın alma ve ödeme düğmesi: metin uzun olabilir, o yüzden sarar. */

.buy-button {
  min-height: 60px;
  padding: var(--space-3) var(--space-6);
  font-size: 1.0625rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.price-card .buy-button { width: 100%; margin-top: auto; }

.buy-button.disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink-soft);
  cursor: not-allowed;
}

.price-card-pro .buy-button.disabled { border-color: rgb(255 255 255 / 30%); color: var(--stage-text-soft); }

/* Odak halkası kağıtta marka yeşili, sahnede filiz (kabuğun header/footer'ına dokunmaz). */

.sales main .btn:focus-visible, .sales main a:focus-visible, .sales main input:focus-visible,
.sales main summary:focus-visible, .sales main .legal-copy:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.sales main .price-card-pro .btn:focus-visible, .sales main .stage a:focus-visible { outline-color: var(--lime); }

/* ---------------------------------------------------------------- açılır satırlar */
/* Landing'deki SSS ile aynı geometri; yerleşik <details>, JavaScript gerekmez. */

.fold-list { max-width: 56rem; border-top: 2px solid var(--color-ink); }

.fold { border-bottom: 1px solid var(--color-border); }

.fold summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--space-3) 3rem var(--space-3) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--color-ink);
  -webkit-tap-highlight-color: transparent;
}

.fold summary::-webkit-details-marker { display: none; }

.fold summary::before, .fold summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 18px;
  height: 2.5px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--color-brand);
}

.fold summary::after { transform: rotate(90deg); }

.fold[open] > summary::after { transform: none; }

.fold-body { padding: 0 0 var(--space-6); }

.fold-lead { max-width: 44rem; margin: 0 0 var(--space-5); color: var(--color-ink-soft); }

/* ---------------------------------------------------------------- karşılaştırma */
/* Kart değil cetvel: yalnız yatay çizgiler. Pro sütunu sahne renginde başlar. */

.comparison { width: 100%; border-collapse: collapse; table-layout: fixed; }

.comparison th, .comparison td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.comparison thead th {
  border-bottom: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
  vertical-align: bottom;
}

.comparison thead th:first-child { font-size: var(--text-sm); color: var(--color-ink-soft); }

.comparison thead .version { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }

.comparison thead th:last-child {
  border-radius: 14px 14px 0 0;
  border-bottom-color: var(--stage);
  background: var(--stage);
  color: var(--lime);
}

.comparison thead th:last-child .version { color: var(--stage-text-soft); }

.comparison tbody th { width: 24%; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.35; }

.comparison tbody td:last-child { background: var(--color-sprout-soft); font-weight: 600; }

.comparison .is-none { color: var(--color-ink-soft); }

/* Metin içi küçük bağlantı yerine 48 px'lik satır bağlantı. */

.row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 36rem;
  min-height: 56px;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}

.row-link:last-child { border-bottom: 1px solid var(--color-border); }

.row-link svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--color-brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.row-link:hover { color: var(--color-brand); }

/* ---------------------------------------------------------------- bilgiler */

.facts { max-width: 48rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }

.facts li { position: relative; padding: var(--space-4) 0 var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }

/* Nötr işaret: bu satırlar koşuldur, onay işareti taşımaz. */

.facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.7rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand);
}

.support-action { margin: var(--space-8) 0 0; }

.support-button { max-width: 100%; min-height: 56px; padding: var(--space-3) var(--space-6); font-size: 1rem; line-height: 1.25; text-align: center; white-space: normal; }

/* ---------------------------------------------------------------- ödeme öncesi onay */
/* Kurucu 25004: telefonda düğme İLK EKRANDA görünür. Sıkı özet, küçük onay
   satırları; dar ekranda düğme ayrıca alta yapışır (metin açılsa da görünür). */

.pay-top { padding: var(--space-5) 0 var(--space-4); }

.pay-top .eyebrow { margin-bottom: var(--space-3); }

.pay-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: var(--space-3) 0 0; font-family: var(--font-display); line-height: 1.25; }

.pay-price strong { font-weight: 800; font-size: 1.375rem; font-variant-numeric: tabular-nums; }

.pay-price span { font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-soft); }

.pay-facts { margin: var(--space-1) 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--color-ink-soft); }

.approval-form { display: grid; gap: 0; border-top: 2px solid var(--color-ink); }

/* Onay satırı: kutu + tek cümle; metin altında ince bir satırda kapalı durur. */

.consent-block { min-width: 0; border-bottom: 1px solid var(--color-border); }

.consent-row {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
}

.consent-row strong { font-weight: 700; }

.consent-row input { width: 1.625rem; height: 1.625rem; margin: 0; accent-color: var(--color-brand); cursor: pointer; }

.fold-doc { border-bottom: 0; padding-left: calc(1.625rem + var(--space-3)); }

.fold-doc summary { min-height: 44px; padding-block: var(--space-2); font-size: var(--text-sm); color: var(--color-brand); }

.fold-doc summary::before, .fold-doc summary::after { width: 14px; }

.fold-doc[open] { padding-left: 0; }

.fold-doc[open] > summary { padding-left: calc(1.625rem + var(--space-3)); }

.pay-cta { padding: var(--space-4) 0 0; }

.pay-cta .buy-button { width: 100%; min-height: 56px; font-size: 1.125rem; }

.legal-copy {
  max-width: 100%;
  max-height: 20rem;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font: 400 1rem/1.6 var(--font-body);
}

.legal-copy.full { max-height: none; margin-top: var(--space-6); padding: var(--space-5); background: var(--color-surface); }

.form-error {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-left: 4px solid var(--color-danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-danger-soft);
  font-weight: 700;
}

/* ---------------------------------------------------------------- sonuç ekranları */

.sales-result { min-height: calc(100vh - var(--head-h) - 18rem); padding-block: var(--space-12) var(--space-16); }

.sales-result-in { position: relative; }

.sales-action { margin: var(--space-8) 0 0; }

.sales-legal { padding-bottom: var(--space-16); }

.sales-legal .wrap > * { max-width: 52rem; }

@media (max-width: 59.9375rem) {
  /* Telefon ve tablette tablo yerine özellik başına bir blok: üstte özellik,
     altında dört katman "ad · değer" satırları. */
  .comparison, .comparison tbody, .comparison tr, .comparison th, .comparison td { display: block; width: 100%; }
  .comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .comparison tr { padding-block: var(--space-4); border-top: 1px solid var(--color-border-strong); }
  .comparison tbody tr:first-child { border-top: 0; padding-top: 0; }
  .comparison tbody th { width: 100%; padding: 0 0 var(--space-2); border: 0; font-weight: 800; font-size: 1.0625rem; }
  .comparison td {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-3);
      padding: var(--space-2) 0;
      border: 0;
      border-top: 1px solid var(--color-border);
    }
  .comparison td::before {
      content: attr(data-label);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: var(--text-sm);
      line-height: 1.5;
      color: var(--color-ink-soft);
    }
  .comparison tbody td:last-child { width: calc(100% + var(--space-3) * 2); margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); border-radius: var(--radius-sm); }
  .comparison tbody td:last-child::before { color: var(--color-brand); font-weight: 800; }
}

@media (max-width: 47.9375rem) {
  .pay-body { padding-bottom: 0; }
  .pay-body.sales-section:last-child { padding-bottom: var(--space-8); }
  .pay-cta {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      z-index: 2;
      margin-inline: calc(var(--space-5) * -1);
      padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
      background: var(--color-paper);
    }
}

@media (min-width: 48rem) {
  .pay-top { padding: var(--space-10) 0 var(--space-5); }
  .consent-row { font-size: 1rem; }
  .pay-cta { padding-top: var(--space-6); }
  .sales-top { padding: var(--space-12) 0 var(--space-8); }
  .sales-section { padding: var(--space-12) 0; }
  .sales-section-flush { padding-top: 0; }
  .price-card { padding: var(--space-8) var(--space-6); border-radius: 28px; }
  .sales-result { padding-block: var(--space-20); }
}

/* Üç kart yan yana sığınca fiyat şeridi gereksizdir. */

@media (min-width: 60rem) {
  .price-strip { display: none; }
  .buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); max-width: none; align-items: stretch; }
  .comparison th, .comparison td { padding: var(--space-4); overflow-wrap: break-word; }
}