/* Herkese açık yüzeyin kendi yerleşimi.
 *
 * Yalnızca burada kullanılan şeyler: site başlığı, ana sayfanın bölümleri,
 * doğrulama ve ödeme sayfalarının kabı. Paylaşılan bileşenler (düğme, alan, kart, uyarı)
 * `shared/css/components/` altında ve base.css onları getiriyor.
 *
 * Tek bir ham renk yok — hepsi token. `frontend/tests/check_design.py`
 * bunu doğruluyor ve CI'da koşuyor.
 */

/* ── Sayfa iskeleti ───────────────────────────────────────────────────── */

.cw-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


.cw-main {
  flex: 1;
}

/* Site başlığı ve dar ekran menüsü `shared/css/components/site-header.css`'te:
 * giriş sayfaları da aynı başlığı taşıyor. */

/* ── Ana sayfa (D-060) ────────────────────────────────────────────────────
 *
 * Onaylanan "lacivert sürüm" (2026-10-23): ilk ekranın ortasında belge, vaat
 * satırı onun iki yanında; bir sipariş lacivert bantta adım adım; sertifika
 * ve doğrulaması yine lacivertte; iki fiyat yan yana. Her renk bir rol —
 * sayfa iki modda da aynı dosyadan boyanıyor. Lacivert bantlar
 * (`--cw-feature`) iki modda da lacivert kalıyor; üstlerindeki coral metin
 * `--cw-feature-accent-text`.
 */

/* Dikey boşluk hep uzun yazımla: bu sınıflar `.cw-wrap` ile aynı elemanda
 * duruyor ve `padding: 4rem 0` kısaltması onun yatay payını sıfırlar
 * (identity.test.html bunu ölçüyor). */

.cw-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cw-main :where(em) {
  font-style: italic;
}

/* Bölüm başlıkları: büyük, serif, ikinci yarısı italik. Ölçek sayfanın
 * kendisinin — panelin h2'si 30 piksel, bir vitrinin bölüm başlığı değil. */
.cw-title {
  font-family: var(--cw-font-serif);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.cw-subtitle {
  font-family: var(--cw-font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cw-section {
  padding-top: clamp(4.5rem, 3rem + 5vw, 8rem);
  padding-bottom: clamp(4.5rem, 3rem + 5vw, 8rem);
}

.cw-section--raised {
  background: var(--cw-raised);
}

.cw-section__head {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.cw-section__lead {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--cw-text-muted);
}

/* ── Başlık: yapışkan ─────────────────────────────────────────────────── */

/* Yalnızca geniş ekranda, başlık tek satırken. Telefonda başlık iki üç
 * satıra sarıyor (116–165 piksel) ve yapışkan kalınca her bölümün üstünde
 * ekranın dörtte birini örtüyordu; orada sayfayla birlikte kayıp gidiyor. */
@media (min-width: 44rem) and (min-height: 30rem) {
  .cw-header--sticky {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  /* Sayfa içi bağlantılar (#order, #receive, #pricing) hedefini yapışkan
   * başlığın altına getirsin, arkasına değil. */
  :where(html:has(.cw-header--sticky)) {
    scroll-padding-top: var(--cw-header-h, 4.5rem);
  }
}

/* ── İlk ekran ────────────────────────────────────────────────────────── */

.cw-hero {
  padding-top: 1.25rem;
  padding-bottom: 3rem;
}

.cw-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Başlık iki yarım: dar ekranda belgenin üstünde iki satır, geniş ekranda
 * belgenin iki yanında. Okunan h1 görünmez ve bütün; görünen iki yarım
 * `aria-hidden` (index.html'deki not). */
.cw-motto__a,
.cw-motto__b {
  font-family: var(--cw-font-serif);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 3.2rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-optical-sizing: auto;
}

.cw-motto__b {
  font-style: italic;
}

.cw-hero__left {
  display: none;
}

.cw-hero__left :where(p) {
  max-width: 15rem;
  margin-left: auto;
  font-family: var(--cw-font-serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--cw-text-muted);
}

.cw-hero__aside {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

/* The sworn proofreader's line under the lead, on narrow screens; the wide
 * layout shows it in its own left column (`.cw-hero__left`) instead. */
.cw-hero__sworn {
  max-width: 30rem;
  font-family: var(--cw-font-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--cw-text-muted);
}

.cw-hero__lead {
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--cw-text-muted);
}

.cw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

.cw-hero__price {
  font-weight: 600;
  color: var(--cw-text);
}

.cw-hero__facts {
  display: grid;
  gap: 0.5rem;
  font-size: var(--cw-text-ui);
  color: var(--cw-text-muted);
}

.cw-hero__facts :where(li) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.cw-pip {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cw-person-mark);
}

.cw-pip--engine {
  background: var(--cw-accent);
}

@media (min-width: 64rem) {
  .cw-hero {
    padding-top: clamp(1rem, 3vh, 2.5rem);
    padding-bottom: clamp(2rem, 5vh, 4rem);
  }

  .cw-hero__grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    justify-items: stretch;
    gap: 0 clamp(2rem, 3.5vw, 3.5rem);
    text-align: left;
  }

  .cw-motto__a,
  .cw-motto__b {
    font-size: clamp(4rem, 2rem + 4.2vw, 6.25rem);
    padding-top: 2.5rem;
  }

  .cw-motto__a {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }

  .cw-motto__b {
    grid-column: 3;
    grid-row: 1;
  }

  .cw-wipe {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .cw-hero__sworn {
    display: none;
  }

  .cw-hero__left {
    display: block;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    padding-bottom: 1rem;
    text-align: right;
  }

  .cw-hero__aside {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    justify-items: start;
    padding-bottom: 1rem;
  }

  .cw-hero__actions {
    justify-content: flex-start;
  }
}

/* ── Belge ve çizgisi ─────────────────────────────────────────────────── */

.cw-wipe {
  position: relative;
  /* Telefonda da belge ilk ekrana bütün sığıyor (sahibi: "belge ilk ekranda
   * tam görünmeli"): genişlik, görünen yükseklikten başlık (ölçülen boyu),
   * iki satırlık vaat ve aralar çıkarılarak — bir iPhone'un görünen alanı
   * 664 piksel, cihazın boyu değil. */
  /* Bir tabanı var: yan çevrilmiş bir telefonda (844×390) yükseklikten
   * gelen genişlik 77 piksele, yazı 2.5 piksele iniyordu. 12rem'in altına
   * inmiyor: bir iPhone SE'nin görünen alanında (375×553) belge hâlâ ilk
   * ekrana sığıyor, yan çevrilmiş telefonda okunur kalıyor (ve iki parmakla
   * büyütülebiliyor). */
  /* `svh` olmayan motorlar (Safari 15.4, Chrome 108 öncesi) bir önceki
   * satırı, `vh` ile olanı kullanıyor. */
  width: min(84vw, 21.5rem, max(12rem, calc((100vh - var(--cw-header-h, 7.25rem) - 10.5rem) * 0.725)));
  width: min(84vw, 21.5rem, max(12rem, calc((100svh - var(--cw-header-h, 7.25rem) - 10.5rem) * 0.725)));
  margin: 0;
  /* Belgenin yazısı belgenin kendi genişliğiyle ölçekleniyor (`cqi`):
   * pencereyle ölçeklendiğinde 44–64rem arasında belge 21.5rem'de dururken
   * yazı büyümeye devam ediyordu, İngilizce başlık iki satıra iniyor ve iki
   * dilin satırları 40 piksel kayıyordu — sayfanın tek iddiasının tersi. */
  container-type: inline-size;
}

/* Geniş ekranda belge ilk ekrana bütün sığıyor: yüksekliği pencereden,
 * başlık ve alt yazı çıkarılarak hesaplanıyor (sahibi: "belge ilk ekranda
 * tam görünmeli"). */
@media (min-width: 64rem) {
  .cw-wipe {
    /* Telefondaki kuralla aynı iki şey: ölçülen başlık boyu (iki satıra
     * sarabiliyor) ve okunur bir taban. */
    width: min(25rem, max(12rem, calc((100vh - var(--cw-header-h, 4.5rem) - 5.5rem) * 0.72)));
    width: min(25rem, max(12rem, calc((100svh - var(--cw-header-h, 4.5rem) - 5.5rem) * 0.72)));
  }
}

.cw-doc {
  position: relative;
  text-align: left;
  aspect-ratio: 1 / 1.38;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cw-paper);
  box-shadow: var(--cw-shadow-sheet-front);
  font-size: 0.7rem;
  font-size: 3.2cqi;
  cursor: ew-resize;
  /* Dikey kaydırma ve iki parmakla yakınlaştırma tarayıcının; yana sürükleme
   * çizginin. Yalnızca pan-y belgenin üstünde yakınlaştırmayı da kapatıyordu
   * (WCAG 1.4.4) ve belge telefonun ilk ekranının çoğu. */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.cw-doc__layer {
  position: absolute;
  inset: 0;
  /* Üstte dil etiketlerine yer: belge numarası etiketin altında kalıyordu. */
  padding: 12% 8% 0;
  font-family: var(--cw-font-sans);
  line-height: 1.35;
  color: var(--cw-doc-text);
}

.cw-doc__layer--target {
  background: var(--cw-paper);
  clip-path: inset(0 0 0 var(--cut, 50%));
}

.cw-doc__layer--source {
  clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0);
}

.cw-doc__no {
  text-align: right;
  font-size: 0.82em;
  color: var(--cw-paper-ink);
}

.cw-doc__issuer {
  margin-top: 1em;
  text-align: center;
  font-size: 0.98em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cw-doc__sub {
  text-align: center;
  font-size: 0.82em;
  color: var(--cw-paper-ink);
}

.cw-doc__title {
  margin-top: 1.1em;
  text-align: center;
  font-family: var(--cw-font-serif);
  /* İki dilin en uzun başlığı ("POPULATION REGISTER EXTRACT") her genişlikte
   * tek satır: ikinci satıra inen bir başlık altındaki satırları kaydırır. */
  font-size: 1.3em;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cw-doc__rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.3em;
  row-gap: 0.25em;
  margin-top: 1.2em;
  padding-right: 27%;
}

.cw-doc__rows :where(dt) {
  color: var(--cw-paper-ink);
}

.cw-doc__rows :where(dd) {
  font-weight: 600;
  white-space: nowrap;
}

.cw-doc__note {
  margin-top: 1.3em;
  padding-right: 22%;
  font-size: 0.8em;
  color: var(--cw-paper-ink);
}

/* Çizgi bir köşeye yaklaşınca o köşenin dil etiketi gidiyor: salınımın
 * ucunda "Türkçe" etiketi İngilizce metnin üstünde kalıyordu. */
.cw-doc__tags :where(span) {
  transition: opacity 0.2s;
}

.cw-doc--edge-start .cw-doc__tags :where(span:first-child),
.cw-doc--edge-end .cw-doc__tags :where(span:last-child) {
  opacity: 0;
}

/* İşaretler tek katman, iki dilin de üstünde: farklı olamazlar. */
.cw-doc__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cw-doc__photo {
  position: absolute;
  right: 8%;
  top: 29%;
  width: 19%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--cw-paper-line);
}

.cw-doc__photo :where(svg) {
  width: 100%;
  height: 100%;
}

.cw-doc__photo-ground {
  fill: var(--cw-doc-photo);
}

.cw-doc__photo-figure {
  fill: var(--cw-ground-400);
}

.cw-doc__seal {
  position: absolute;
  left: 7%;
  bottom: 13%;
  width: 25%;
  height: auto;
  aspect-ratio: 1;
  color: var(--cw-doc-seal);
  opacity: 0.85;
  transform: rotate(-12deg);
}

.cw-doc__seal-text {
  font-family: var(--cw-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.cw-doc__stamp {
  position: absolute;
  left: 37%;
  bottom: 18%;
  padding: 0.3em 0.65em;
  border: 2px solid var(--cw-doc-stamp);
  color: var(--cw-doc-stamp);
  font-family: var(--cw-font-sans);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.88;
  transform: rotate(-6deg);
}

.cw-doc__sign {
  position: absolute;
  right: 7%;
  bottom: 13.5%;
  width: 27%;
  color: var(--cw-doc-sign);
}

.cw-doc__sign :where(svg) {
  width: 100%;
  height: auto;
}

.cw-doc__sign :where(i) {
  display: block;
  margin-top: 0.2em;
  border-top: 1px solid var(--cw-paper-line);
}

.cw-doc__bar {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--cw-font-sans);
  font-size: 0.72em;
  font-variant-numeric: var(--cw-numeric-tabular);
  color: var(--cw-paper-ink);
}

.cw-doc__barcode {
  width: 42%;
  height: 1.8em;
  background: repeating-linear-gradient(90deg,
    var(--cw-doc-text) 0 1px, transparent 1px 3px,
    var(--cw-doc-text) 3px 5px, transparent 5px 6px,
    var(--cw-doc-text) 6px 7px, transparent 7px 10px);
}

.cw-doc__tags {
  position: absolute;
  top: 2.5%;
  left: 3%;
  right: 3%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.cw-doc__tags :where(span) {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
  font-family: var(--cw-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cw-doc__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cut, 50%);
  width: 0;
  pointer-events: none;
}

.cw-doc__line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--cw-action-bg);
}

.cw-doc__knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cw-action-bg);
  color: var(--cw-action-fg);
  box-shadow: var(--cw-shadow-sheet-front);
  transform: translate(-50%, -50%);
}

.cw-doc__knob :where(svg) {
  width: 20px;
  height: 20px;
}

/* Klavye ve ekran okuyucu için gerçek bir kaydırıcı, belgenin altında ve
 * görünmez; odaklanınca belgenin çerçevesi halkayı taşıyor. */
/* Kaydırıcı `.cw-sr-only`: görsel olarak yok, odaklanabilir. Belgenin
 * altında 44 piksellik görünmez bir şerit olarak duruyordu ve telefonda giriş
 * paragrafının ilk satırlarını örtüyordu. Fare ve parmak belgenin kendisini
 * kullanıyor; bu yalnızca klavye ve ekran okuyucu için. */

.cw-wipe:has(.cw-wipe__range:focus-visible) .cw-doc {
  outline: 2px solid var(--cw-focus);
  outline-offset: 4px;
}

.cw-wipe__caption {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: var(--cw-text-ui);
  color: var(--cw-text-muted);
}

/* Çizgiyi durduran düğme: sessiz, alt yazının yanında. */
.cw-wipe__pause {
  min-height: 32px;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--cw-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--cw-text-muted);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-data);
  font-weight: 600;
  cursor: pointer;
}

.cw-wipe__pause:hover {
  color: var(--cw-text);
  border-color: var(--cw-text-muted);
}

.cw-wipe__hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cw-wipe__caption :where(svg) {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cw-link);
}

/* ── Ne kalır, ne değişir ─────────────────────────────────────────────── */

.cw-pairing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

@media (min-width: 52rem) {
  .cw-pairing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cw-pairing__col {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 20px;
  background: var(--cw-card);
}

.cw-pairing__col--changes {
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
}

.cw-pairing__col :where(h3) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.cw-pairing__col :where(h3 small) {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cw-text-muted);
}

.cw-pairing__col--changes :where(h3 small) {
  color: var(--cw-feature-muted);
}

.cw-pairing__col :where(ul) {
  display: grid;
  margin-top: 1.5rem;
}

.cw-pairing__col :where(li) {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  border-top: 1px solid var(--cw-line);
}

.cw-pairing__col--changes :where(li) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  border-top-color: var(--cw-feature-line);
}

.cw-pairing__col :where(li:first-child) {
  border-top: 0;
}

.cw-pairing__col--changes :where(li > small) {
  font-size: var(--cw-text-ui);
  color: var(--cw-feature-muted);
}

.cw-glyph {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--cw-raised);
  color: var(--cw-text-muted);
}

.cw-glyph :where(svg) {
  width: 1.35rem;
  height: 1.35rem;
}

/* Belgedeki işaretlerin kendi renkleri; koyu modda kart zemininde mühür ve
 * imza mürekkebi okunmadığı için roller orada ikon rengine dönüyor. */
.cw-glyph--seal { color: var(--cw-glyph-seal); }
.cw-glyph--stamp { color: var(--cw-glyph-stamp); }
.cw-glyph--sign { color: var(--cw-glyph-sign); }

.cw-swap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  font-size: 1.05rem;
}

.cw-swap :where(s) {
  color: var(--cw-feature-muted);
  text-decoration-thickness: 1px;
}

.cw-swap :where(b) {
  font-weight: 600;
  color: var(--cw-feature-fg);
}

.cw-swap__arrow {
  color: var(--cw-feature-accent-text);
}

/* ── Bir sipariş, baştan imzaya ───────────────────────────────────────── */

.cw-order {
  position: relative;
  padding-top: clamp(4.5rem, 3rem + 5vw, 8rem);
  padding-bottom: clamp(4.5rem, 3rem + 5vw, 8rem);
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
}

.cw-order :where(.cw-title em) {
  color: var(--cw-feature-accent-text);
}

.cw-order .cw-section__lead {
  color: var(--cw-feature-muted);
}

.cw-order__intro {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.cw-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.25rem;
}

.cw-rail :where(button) {
  min-height: 44px;
  padding: 0.45rem 1.05rem;
  border: 2px solid var(--cw-feature-line);
  border-radius: 999px;
  background: transparent;
  color: var(--cw-feature-muted);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.cw-rail :where(button:hover) {
  border-color: var(--cw-feature-muted);
  color: var(--cw-feature-fg);
}

.cw-rail :where(button[aria-current="step"]) {
  border-color: var(--cw-accent);
  background: var(--cw-accent);
  color: var(--cw-accent-fg);
}

.cw-order__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4rem;
  margin-top: 3rem;
}

.cw-order__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  min-width: 0;
  /* Başlığın payı sayfanın `scroll-padding-top`'ında; bu yalnızca nefes. */
  scroll-margin-top: 1rem;
}

.cw-order__text {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  max-width: 32rem;
}

.cw-order__text :where(p) {
  color: var(--cw-feature-muted);
}

.cw-order__n {
  font-family: var(--cw-font-serif);
  font-size: 5.5rem;
  font-style: italic;
  line-height: 0.75;
  color: var(--cw-navy-500);
}

.cw-order__step--engine .cw-order__n {
  color: var(--cw-feature-accent-text);
}

.cw-engine-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--cw-feature-raised);
  color: var(--cw-feature-accent-text);
  font-size: var(--cw-text-ui);
  font-weight: 600;
}

.cw-engine-tag :where(i) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cw-accent);
}

/* Geniş ve yeterince yüksek ekranda bant sabitleniyor ve kaydırma adımları
 * birer birer gösteriyor. Sorgu yalnızca burada: `home.js` adımların
 * `position`'ına bakıyor. 46rem'den alçak bir pencerede en uzun adımın kartı
 * sabit kutuya sığmıyordu. Betik
 * yoksa (`.cw-js` yok) adımlar alt alta kalıyor. Başlığın boyu
 * `--cw-header-h`'den: uzun dillerde iki satıra sarıyor. */
@media (min-width: 62rem) and (min-height: 46rem) {
  .cw-js .cw-order {
    padding-top: 0;
    padding-bottom: 0;
  }

  .cw-js .cw-order__track {
    position: relative;
    height: 520vh;
  }

  .cw-js .cw-order__pin {
    position: sticky;
    top: var(--cw-header-h, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--cw-header-h, 4.5rem));
    height: calc(100svh - var(--cw-header-h, 4.5rem));
  }

  /* Sabit kutuya sığsın diye görünmüyor, ama okunuyor: bölümün vaadi. */
  .cw-js .cw-order__intro .cw-section__lead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cw-js .cw-order__pin .cw-title {
    font-size: clamp(2.2rem, 1rem + 3vw, 3.6rem);
  }

  .cw-js .cw-rail {
    margin-top: 1.5rem;
  }

  .cw-js .cw-order__steps {
    position: relative;
    gap: 0;
    /* Başlık ölçülen boyuyla, bölüm başlığı ve şerit 13.5rem. */
    height: min(31rem, calc(100vh - var(--cw-header-h, 4.5rem) - 13.5rem));
    height: min(31rem, calc(100svh - var(--cw-header-h, 4.5rem) - 13.5rem));
    margin-top: 1.75rem;
  }

  .cw-js .cw-order__step {
    position: absolute;
    inset: 0;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 4rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.4s, transform 0.4s;
  }

  .cw-js .cw-order__step.is-on {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .cw-js .cw-order__text {
    align-content: center;
  }
}

/* Uygulama ekranlarının çizimi: kart, dosya satırı, alan, toplam. */
.cw-mock {
  justify-self: center;
  width: min(100%, 32rem);
  padding: 1.4rem;
  border-radius: 18px;
  background: var(--cw-card);
  color: var(--cw-text);
  font-size: var(--cw-text-ui);
  box-shadow: var(--cw-shadow-sheet-front);
}

.cw-mock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--cw-line);
}

.cw-mock__top > :where(small) {
  color: var(--cw-text-muted);
}

.cw-mock__file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.cw-mock__file :where(b) {
  display: block;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cw-mock__file :where(small) {
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

.cw-mock__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 42px;
  border-radius: 4px;
  background: var(--cw-sunken);
  color: var(--cw-text-muted);
  font-size: 0.625rem;
  font-weight: 700;
}

.cw-mock__field {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.cw-mock__field :where(label) {
  font-size: var(--cw-text-data);
  font-weight: 600;
  color: var(--cw-text-muted);
}

.cw-mock__field :where(input, textarea) {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--cw-line-strong);
  border-radius: 10px;
  background: var(--cw-card);
  color: var(--cw-text);
}

.cw-mock__field :where(textarea) {
  min-height: 80px;
  resize: vertical;
}

.cw-mock__sum > :where(div) {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--cw-line);
}

.cw-mock__sum > :where(div:last-child) {
  border-bottom: 0;
}

.cw-mock__sum :where(dt) {
  color: var(--cw-text-muted);
}

.cw-mock__sum :where(dd) {
  font-weight: 500;
  font-variant-numeric: var(--cw-numeric-tabular);
  text-align: right;
}

.cw-mock__total :where(dd) {
  font-size: 1.3rem;
  font-weight: 700;
}

.cw-mock > .cw-btn {
  width: 100%;
  margin-top: 1rem;
}

.cw-mock__hint {
  margin-top: 0.7rem;
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

.cw-mock__fix {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--cw-line);
}

.cw-mock__fix :where(small) {
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

.cw-mock__fix :where(p) {
  margin-top: 0.15rem;
}

.cw-mock :where(del) {
  color: var(--cw-text-muted);
  text-decoration-color: var(--cw-doc-seal);
}

.cw-mock :where(ins) {
  padding: 0 0.25rem;
  border-radius: 3px;
  background: var(--cw-selected-wash);
  color: var(--cw-text);
  font-weight: 600;
  text-decoration: none;
}

.cw-mock__signed {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.cw-mock__signed :where(small) {
  display: block;
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

.cw-mock__signed :where(svg) {
  width: 6.5rem;
  /* İnsanın imzası insanın renginde: koyuda bağlantı coral, ve coral motorun. */
  color: var(--cw-person-mark);
}

.cw-mock__decide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cw-mock__status {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--cw-selected-wash);
  color: var(--cw-text);
  font-size: var(--cw-text-ui);
  font-weight: 600;
}

.cw-mock__status:empty {
  display: none;
}

.cw-mock__pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 1rem;
}

.cw-mock__page {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.38;
  padding: 0.6rem;
  border-radius: 4px;
  background: var(--cw-raised);
  font-size: 0.75rem;
}

.cw-mock__page :where(i) {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--cw-line-strong);
}

.cw-mock__page :where(b) {
  font-weight: 600;
}

.cw-mock__page :where(small) {
  margin-top: auto;
  overflow-wrap: anywhere;
  font-size: 0.6875rem;
  color: var(--cw-text-muted);
}

.cw-mock__page--cert {
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
}

.cw-mock__page--cert :where(i) {
  background: var(--cw-feature-line);
}

.cw-mock__page--cert :where(small) {
  color: var(--cw-feature-accent-text);
  font-variant-numeric: var(--cw-numeric-tabular);
  letter-spacing: 0.03em;
}

/* Motorun yeniden kurduğu sayfa: korunan işaretler kesik coral çerçevede. */
.cw-mini {
  position: relative;
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 1 / 1.38;
  margin: 0.4rem auto 0;
  padding: 9% 9% 0;
  border: 1px solid var(--cw-paper-line);
  border-radius: 3px;
  background: var(--cw-paper);
}

.cw-mini > :where(i) {
  display: block;
  height: 0.45rem;
  margin-top: 0.55rem;
  border-radius: 2px;
  background: var(--cw-navy-100);
}

.cw-mini__box {
  position: absolute;
  border: 1.5px dashed var(--cw-accent);
  border-radius: 3px;
  background: var(--cw-doc-kept-bg);
}

.cw-mini__box :where(span) {
  position: absolute;
  top: -1.35rem;
  left: -1px;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: var(--cw-doc-kept-bg);
  color: var(--cw-doc-kept-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.cw-mini__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  margin-top: 1rem;
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

.cw-mini__key {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 0.4rem;
  border-radius: 3px;
  background: var(--cw-navy-100);
  vertical-align: -1px;
}

.cw-mini__key--kept {
  background: var(--cw-doc-kept-bg);
  box-shadow: inset 0 0 0 1.5px var(--cw-accent);
}

/* ── Kim ne yapar ─────────────────────────────────────────────────────── */

.cw-who {
  margin-top: 3rem;
  overflow-x: auto;
  border-radius: 20px;
  background: var(--cw-card);
}

.cw-who :where(table) {
  width: 100%;
  min-width: 42rem;
}

.cw-who :where(th, td) {
  padding: 1.05rem 1.25rem;
  text-align: left;
  vertical-align: top;
}

.cw-who :where(thead th) {
  background: var(--cw-sunken);
  font-family: var(--cw-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
}

.cw-who .cw-who__engine {
  color: var(--cw-accent-text);
}

.cw-who :where(tbody tr + tr) > :where(th, td) {
  border-top: 1px solid var(--cw-line);
}

.cw-who :where(tbody th) {
  width: 40%;
  font-weight: 500;
}

.cw-who :where(td) {
  width: 20%;
  font-size: var(--cw-text-ui);
  color: var(--cw-text-muted);
}

.cw-who .cw-who__does {
  font-weight: 600;
  color: var(--cw-text);
}

.cw-who__does::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--cw-person-mark);
}

.cw-who__does--engine::before {
  background: var(--cw-accent);
}

.cw-who__note {
  margin-top: 1rem;
  font-size: var(--cw-text-ui);
  color: var(--cw-text-muted);
}

/* ── Sertifika ve doğrulaması: lacivert bant ──────────────────────────── */

/* Gece bandlarının odak halkası. Açık moddaki halka lacivert-500; bandın
 * içindeki lacivert-900 kutuda 2.97 ölçüyordu (en az 3 gerekir). Bandın
 * coral metniyle aynı ton orada 7'nin üstünde. */
.cw-order,
.cw-section--feature,
.cw-pricing__side--code,
.cw-more__card--feature {
  --cw-focus: var(--cw-feature-accent-text);
}

/* Bandın içindeki kartlar kart: odak halkası yine sayfanınki (coral-400
 * beyaz kartta 2.3 ölçüyordu). Coral kapanış alanında da halka lacivert:
 * coral üstünde coral görünmüyordu. */
.cw-mock {
  --cw-focus: var(--cw-link);
}

.cw-band {
  --cw-focus: var(--cw-feature);
}

.cw-section--feature {
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
}

.cw-section--feature .cw-section__lead {
  color: var(--cw-feature-muted);
}

.cw-receive {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  margin-top: 3rem;
}

@media (min-width: 58rem) {
  .cw-receive {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

.cw-cert {
  justify-self: center;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  aspect-ratio: 1 / 1.38;
  padding: 10% 10% 8%;
  border-radius: 4px;
  background: var(--cw-paper);
  color: var(--cw-doc-text);
  font-size: clamp(0.72rem, 0.58rem + 0.35vw, 0.9rem);
  box-shadow: var(--cw-shadow-sheet-front);
}

.cw-cert__page {
  display: contents;
}

.cw-cert__title {
  text-align: center;
  font-family: var(--cw-font-serif);
  font-size: 1.75em;
  font-weight: 500;
}

.cw-cert__rule {
  width: 3rem;
  height: 2px;
  margin: 0.9em auto 0;
  /* Sertifika insanın sayfası; coral orada yok (D-028'in "sertifikada marka
   * yok" kuralı). Çizgi imzanın mürekkebinde. */
  background: var(--cw-doc-sign);
}

.cw-cert__statement {
  margin-top: 1.4em;
  font-family: var(--cw-font-serif);
  font-size: 1.08em;
  line-height: 1.55;
  color: var(--cw-paper-ink);
}

.cw-cert__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4em 1.4em;
  margin-top: 1.5em;
}

.cw-cert__facts :where(dt) {
  color: var(--cw-paper-ink);
}

.cw-cert__facts :where(dd) {
  font-weight: 500;
}

.cw-cert__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: auto;
}

.cw-cert__foot :where(svg) {
  width: 8em;
  color: var(--cw-doc-sign);
}

.cw-cert__foot :where(span) {
  display: block;
  padding-top: 0.3em;
  border-top: 1px solid var(--cw-paper-line);
  font-size: 0.92em;
}

.cw-cert__code {
  text-align: right;
  font-size: 0.9em;
  color: var(--cw-paper-ink);
}

.cw-cert__code :where(b) {
  display: block;
  font-size: 1.15em;
  font-variant-numeric: var(--cw-numeric-tabular);
  letter-spacing: 0.06em;
  color: var(--cw-doc-text);
}

.cw-receive__facts {
  display: grid;
  gap: 2rem;
}

.cw-receive__facts :where(dt) {
  font-family: var(--cw-font-serif);
  font-size: 1.6rem;
  font-weight: 400;
}

.cw-receive__facts :where(dd) {
  margin-top: 0.35rem;
  color: var(--cw-feature-muted);
}

.cw-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: 24px;
  background: var(--cw-feature-raised);
}

@media (min-width: 58rem) {
  .cw-check {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 4rem;
  }
}

.cw-check .cw-subtitle {
  font-size: 2rem;
}

.cw-check :where(p) {
  margin-top: 0.6rem;
  color: var(--cw-feature-muted);
}

.cw-check__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.cw-check__form :where(input) {
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 52px;
  padding: 0.7rem 1rem;
  /* Kenar bandın soluk metni: lacivert-800 kenar lacivert-900 kutuda 1.2
   * ölçüyordu, yazı yazılınca alanın sınırı kayboluyordu (en az 3). */
  border: 1.5px solid var(--cw-feature-muted);
  border-radius: 999px;
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
  font-size: 1.05rem;
  font-variant-numeric: var(--cw-numeric-tabular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cw-check__form :where(input)::placeholder {
  color: var(--cw-navy-300);
  letter-spacing: 0.02em;
  text-transform: none;
}

.cw-check__form :where(input:focus) {
  border-color: var(--cw-accent);
}

.cw-check__form .cw-btn {
  min-height: 52px;
}

.cw-check__example {
  padding: 1.25rem 1.4rem;
  border-radius: 16px;
  background: var(--cw-feature);
}

.cw-check .cw-check__state {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0;
  font-weight: 600;
  color: var(--cw-feature-fg);
}

.cw-check__state :where(i) {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cw-accent);
}

.cw-check__example :where(dl) {
  margin-top: 0.9rem;
}

.cw-check__example :where(dl > div) {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-top: 1px solid var(--cw-feature-line);
}

.cw-check__example :where(dt) {
  color: var(--cw-feature-muted);
}

.cw-check__example :where(dd) {
  text-align: right;
}

.cw-check__tech {
  font-family: var(--cw-font-mono);
  font-size: var(--cw-text-tech);
}

.cw-check .cw-check__never {
  color: var(--cw-navy-300);
}

/* ── Fiyat: iki taraf ─────────────────────────────────────────────────── */

.cw-pricing {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.cw-pricing__sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .cw-pricing__sides {
    grid-template-columns: 1fr 1fr;
  }
}

.cw-pricing__side {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  padding-left: clamp(1rem, 3vw, 2.25rem);
  padding-right: clamp(1rem, 3vw, 2.25rem);
}

@media (min-width: 52rem) {
  .cw-pricing__side {
    padding-left: clamp(2rem, 1rem + 4vw, 6rem);
    padding-right: clamp(2rem, 1rem + 4vw, 6rem);
  }
}

.cw-pricing__side--code {
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
}

.cw-pricing__side--plain {
  background: var(--cw-card);
}

.cw-pricing__who {
  font-family: var(--cw-font-serif);
  font-size: 1.6rem;
  font-style: italic;
}

.cw-pricing__side--code .cw-pricing__who {
  color: var(--cw-feature-accent-text);
}

.cw-pricing__amount {
  font-family: var(--cw-font-serif);
  font-size: clamp(5.5rem, 3rem + 7vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
}

.cw-pricing__amount :where(small) {
  margin-left: 0.4rem;
  font-family: var(--cw-font-sans);
  font-size: 1rem;
  letter-spacing: 0;
}

.cw-pricing__side > :where(p:not([class])) {
  max-width: 26rem;
  color: var(--cw-text-muted);
}

.cw-pricing__side--code > :where(p:not([class])) {
  color: var(--cw-feature-muted);
}

.cw-pricing__side .cw-btn {
  justify-self: start;
  margin-top: 0.75rem;
}

.cw-pricing__foot {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  padding-left: clamp(1rem, 3vw, 2.25rem);
  padding-right: clamp(1rem, 3vw, 2.25rem);
  text-align: center;
  font-family: var(--cw-font-serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

/* ── Diller, bürolar, yazılım ─────────────────────────────────────────── */

.cw-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 58rem) {
  .cw-more {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.cw-more__card {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.75rem;
  border-radius: 20px;
  background: var(--cw-card);
}

.cw-more__card > :where(p) {
  color: var(--cw-text-muted);
}

.cw-more__card > :where(a) {
  margin-top: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}

.cw-more__card > :where(a:hover) {
  text-decoration: underline;
}

/* A new office's address: a long word that may wrap on a phone. */
.cw-more__ask {
  overflow-wrap: anywhere;
}

.cw-more__card--feature {
  background: var(--cw-feature);
  color: var(--cw-feature-fg);
}

.cw-more__card--feature > :where(a) {
  color: var(--cw-feature-accent-text);
}

.cw-flow {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.4rem;
  counter-reset: flow;
}

.cw-flow :where(li) {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.cw-flow :where(li)::before {
  content: counter(flow);
  counter-increment: flow;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--cw-feature-raised);
  color: var(--cw-feature-accent-text);
  font-size: var(--cw-text-data);
  font-weight: 700;
}

.cw-languages {
  margin-top: 0.5rem;
}

.cw-languages > :where(p) {
  color: var(--cw-text-muted);
}

.cw-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cw-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--cw-raised);
  font-size: var(--cw-text-ui);
  font-weight: 500;
}

.cw-pair__arrow {
  color: var(--cw-text-faint);
}

/* ── Sorular ──────────────────────────────────────────────────────────── */

.cw-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 4rem;
  margin-top: 2.5rem;
}

@media (min-width: 58rem) {
  .cw-faq {
    grid-template-columns: 1fr 1fr;
  }
}

.cw-faq :where(details) {
  border-top: 1px solid var(--cw-line-strong);
}

.cw-faq :where(summary) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: var(--cw-font-serif);
  font-size: 1.35rem;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.cw-faq :where(summary)::-webkit-details-marker {
  display: none;
}

/* Artı işareti iki çizgi: bir veri URI'sinin içindeki renk moda uymazdı. */
.cw-faq :where(summary)::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--cw-text), var(--cw-text)) center / 13px 1.8px no-repeat,
    linear-gradient(var(--cw-text), var(--cw-text)) center / 1.8px 13px no-repeat,
    var(--cw-sunken);
  transition: transform 0.2s;
}

.cw-faq :where(details[open] summary)::after {
  transform: rotate(45deg);
}

.cw-faq :where(details p) {
  max-width: 34rem;
  padding-bottom: 1.25rem;
  color: var(--cw-text-muted);
}

/* Altlığın alt satırı iki parça: haklar ve "örnektir" notu. Not soluk
 * değil: sayfadaki kişi, kod ve tarihlerin uydurma olduğunu söyleyen tek
 * satır, ve `--cw-text-faint` çukur zeminde 2.50 ölçüyordu. */
.cw-footer__note {
  color: var(--cw-text-muted);
}

.cw-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

/* Gündüz/gece seçimi: altlığın sağ altında, küçük. Bir ray, üç seçenek
 * (güneş, ay, cihaz) ve seçilenin altında kayan bir yuvarlak; yeri
 * `data-look`tan. Haklar satırının sonunda, `margin-left: auto` ile sağa
 * yaslı. */
.cw-daynight {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--cw-line-strong);
  border-radius: 999px;
  background: var(--cw-card);
  color: var(--cw-text-muted);
}

/* Each choice is a 32px target; the chosen one sits on the thumb. */
.cw-daynight :where(button) {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s;
}

.cw-daynight .cw-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The thumb, under whichever choice is on. */
.cw-daynight::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cw-action-bg);
}

/* Kayma, ilk çizimden sonra (`data-ready`): sayfa açılırken yuvarlak
 * güneşten seçilene kaymasın. */
.cw-daynight[data-ready]::before {
  transition: transform 0.2s;
}

.cw-daynight[data-look="dark"]::before {
  transform: translateX(calc(32px + 0.2rem));
}

.cw-daynight[data-look="system"]::before {
  transform: translateX(calc(2 * (32px + 0.2rem)));
}

.cw-daynight :where(button[aria-checked="true"]) {
  color: var(--cw-action-fg);
}

@media (prefers-reduced-motion: reduce) {
  .cw-daynight[data-ready]::before,
  .cw-daynight :where(button) {
    transition: none;
  }
}

/* Zorunlu renklerde zemin düşüyor ve yuvarlak görünmez olur: seçili olanı
 * bir sistem rengiyle çevrelenmiş halka söylesin. */
@media (forced-colors: active) {
  .cw-daynight :where(button[aria-checked="true"]) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* Focus lands on the chosen one: its ring must still change on arrival. */
  .cw-daynight :where(button:focus-visible) {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
  }
}

/* ── Kapanış: coral alan ──────────────────────────────────────────────── */

.cw-band {
  background: var(--cw-accent);
  color: var(--cw-accent-fg);
}

.cw-band__inner {
  display: grid;
  justify-items: center;
  gap: 2rem;
  padding-top: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  text-align: center;
}

.cw-band__line {
  max-width: 16ch;
  font-family: var(--cw-font-serif);
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

@media (prefers-reduced-motion: reduce) {
  .cw-js .cw-order__step {
    transition: none;
  }
}


/* ── Doğrulama sayfası ────────────────────────────────────────────────── */

/* Yine uzun yazım, yine `class="cw-wrap cw-verify"` aynı elemanda. Formun
 * kendisi `shared/css/components/verify.css`'te: müşterinin kabuk içindeki
 * doğrulama sayfasıyla paylaşılıyor (D-056). */
.cw-verify {
  padding-top: clamp(2rem, 1.5rem + 3vw, 5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

/* Izgara, ölçü, başlık ve hap biçimli kutu `components/verify.css`'te
 * (`.cw-verify__grid`): müşterinin kabuktaki doğrulama sayfası da aynı
 * düzeni taşıyor. */

/* ── Ödeme sonrası sayfa (D-051) ──────────────────────────────────────────
 * Kendi kabı (`.cw-paid`): bir simge, iki parçalı başlık, giriş, kutudaki
 * not ve iki düğme (D-060, onaylanan maket). `paid.js` adres "ödemeden
 * çıktı" diyorsa başlığı, simgeyi, girişi ve notu değiştiriyor. */
.cw-paid {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: 40rem;
  padding-top: clamp(2rem, 1.5rem + 3vw, 5rem);
  padding-bottom: 5rem;
}

/* Bir saat, bir onay işareti değil: sayfa ödemenin geçip geçmediğini
 * bilmiyor (adres elle yazılabilir; D-051), ve yeşil bir tik "ödemeniz
 * alındı" derdi. Söyleyebildiği şey "onaylanıyor". */
.cw-paid__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cw-selected-wash);
  color: var(--cw-link);
}

.cw-paid__icon--left {
  background: var(--cw-sunken);
  color: var(--cw-text-muted);
}

.cw-paid__icon :where(svg) {
  width: 32px;
  height: 32px;
}

.cw-paid__title {
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  line-height: 1.05;
}

.cw-paid__lead {
  color: var(--cw-text-muted);
}

.cw-paid__note {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--cw-card);
  color: var(--cw-text-muted);
}

.cw-paid__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}