.cc_lz85qzy3_PPRGLzEpw5 .cost {
  width: 100%;
  padding: var(--space-2xl) 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 5rem);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__heading {
  margin: 0 0 var(--space-md);
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* Varsayım başlığın hemen altında: "156" rakamının nereden geldiği
   gizlenmemeli, yoksa sahte kesinlik olur. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__premise {
  margin: 0 0 var(--space-xl);
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   Satırlar

   Mobilde alt alta akan bloklar, masaüstünde ızgara. Gerçek bir
   `<table>` kullanılmadı: hücreler mobilde ya yatay kaydırma ya da
   okunmaz genişlikler üretiyor. Buradaki yapı her ölçekte aynı sırayla
   okunuyor — ad, rakam, noktalar, cümle.
   ═══════════════════════════════════════════════════════════════ */

.cc_lz85qzy3_PPRGLzEpw5 .cost__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Bizim satır vurgulu: ince bir altın çizgi ve biraz daha koyu metin.
   Kutu ya da dolgu kullanılmadı — rakam zaten farkı söylüyor, üstüne
   bir de renkli kutu koymak bağırmak olurdu. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__row--ours {
  border-top-color: var(--color-accent);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__row--ours .cost__name {
  color: var(--color-accent-text);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__figure-value {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__figure-unit {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── İşaret şeridi ─────────────────────────────────────────────────────────
   Her ödeme bir işaret. İşaretler eskiden yuvarlak noktaydı: kalabalık
   okunuyordu ama NEYİN kalabalığı olduğu okunmuyordu — 156 nokta ile 10 nokta
   arasındaki fark yalnızca uzunluktu. Artık işaret sayılan şeye benziyor:
   tırtıklı poşet, artı işareti (seans), cihaz gövdesi, şişe, krem kutusu.

   Simgeler `mask-image` ile veriliyor, `<img>` veya satır içi SVG ile değil:
   156 adet SVG düğümü DOM'u şişirirdi ve rengi tema değişkeninden almazdı.
   Maske yalnızca alfa kanalını kullandığı için SVG'lerde `fill` YAZILMIYOR —
   varsayılan siyah dolgu maske için yeterli, renk `background`tan geliyor. */

.cc_lz85qzy3_PPRGLzEpw5 .cost__marks {
  display: block;
  margin: 0.25rem 0 0.125rem;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__marks-track {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.25rem;
  /* Varsayılan durum GÖRÜNÜR: animasyon çalışmazsa şerit tam açık durur. */
  clip-path: inset(0 0 0 0);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__mark {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
}

/* Simgeli işaretler yuvarlak değil; biçimi maske veriyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__mark--device, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--sachet, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--session, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--bottle, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--jar {
  border-radius: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Cihaz: tek işaret olduğu için en büyük ve en okunaklı olan bu.
   Yuvarlatılmış gövde + gösterge noktası. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__mark--device {
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3zm2.5 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 11h7v2h-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3zm2.5 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 11h7v2h-7z'/%3E%3C/svg%3E");
}

/* Poşet: üstü tırtıklı, dikdörtgen gövde. 156 tane yan yana dizildiği için
   dar ve uzun — sıra hâlinde bakıldığında "raf dolusu poşet" okunuyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__mark--sachet {
  width: 0.5625rem;
  height: 0.875rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Cpath d='M1 4l2-2 2 2 2-2 2 2 2-2 2 2v18H1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Cpath d='M1 4l2-2 2 2 2-2 2 2 2-2 2 2v18H1z'/%3E%3C/svg%3E");
}

/* Seans: artı işareti. Klinik/sağlık için evrensel, 12px'te bile okunuyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__mark--session {
  width: 0.75rem;
  height: 0.75rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 2h5v7.5H22v5h-7.5V22h-5v-7.5H2v-5h7.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 2h5v7.5H22v5h-7.5V22h-5v-7.5H2v-5h7.5z'/%3E%3C/svg%3E");
}

/* Şişe: boyun + gövde. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__mark--bottle {
  width: 0.4375rem;
  height: 0.75rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Cpath d='M5 1h4v3h1a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Cpath d='M5 1h4v3h1a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1z'/%3E%3C/svg%3E");
}

/* Krem kutusu: kapak + geniş kısa gövde. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__mark--jar {
  width: 0.75rem;
  height: 0.6875rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 1h18v4H3zM4 7h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 1h18v4H3zM4 7h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

/* Bizim satırımız vurgulu renkte ve bir tık daha büyük. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__row--ours .cost__mark {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-accent);
}

/* Simge desteklemeyen tarayıcıda maske düşer ve kare kalır — okunur bir
   yedek. Yuvarlaklık yalnızca simgesiz noktalarda. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--device, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--sachet, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--session, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--bottle, .cc_lz85qzy3_PPRGLzEpw5 .cost__mark--jar {
    border-radius: var(--radius-pill);
  }
}

/* Sayılamayan durum: nokta yok, kesikli şerit var. "Bilmiyoruz"un görsel
   karşılığı — uydurma bir sayı koymak yerine boşluğu dürüstçe gösteriyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__marks-unknown {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: 0;
  border-top: 2px dashed var(--color-border);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__body {
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Fiyat bandı ayrı satırda ve daha sönük: bir iddia değil, dipnotu olan
   bir piyasa gözlemi. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__price {
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__footnote {
  margin: var(--space-xl) 0 0;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  /* Masaüstünde ad ve rakam solda sabit sütunda, noktalar ve cümle sağda.
     Göz üç satırda da aynı yerde rakamı bulur; kıyas ancak böyle
     kurulabilir. */
  .cc_lz85qzy3_PPRGLzEpw5 .cost__row {
    grid-template-columns: 16rem 1fr;
    grid-template-areas:
      "name marks"
      "figure body"
      "figure price";
    column-gap: var(--space-xl);
    align-items: start;
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__name {
    grid-area: name;
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__figure {
    grid-area: figure;
    flex-direction: column;
    gap: 0.125rem;
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__marks {
    grid-area: marks;
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__body {
    grid-area: body;
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__price {
    grid-area: price;
  }
}

/* ─── Şerit soldan sağa açılır ────────────────────────────────
   156 noktaya tek tek gecikme vermek yerine şeridin tamamı kırpılarak
   açılıyor: tek animasyon, aynı etki, çok daha ucuz.

   Varsayılan durum GÖRÜNÜR: animasyon hiç uygulanmazsa şerit zaten
   tam açık. */

@keyframes cc_lz85qzy3_PPRGLzEpw5_cost-marks-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost.is-visible .cost__marks-track {
    animation: cc_lz85qzy3_PPRGLzEpw5_cost-marks-in 1100ms var(--ease-out) backwards;
    animation-delay: var(--row-delay, 0ms);
  }
}

/* Kapanış: tabloyu okumayan da sonucu görsün diye tablonun hemen altında,
   gövde metninden bir tık daha güçlü. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__kicker {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  max-width: 60ch;
}

@media (max-width: 767px) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost__kicker {
    font-size: var(--text-body);
  }
}

/* ─── Kazanç bloğu — bölümün cevabı, başlığın hemen altında ─────────────────
   Tablonun altındaydı, üste alındı: mobilde ziyaretçi üç satırlık tabloyu
   kaydırırken bölümü terk ediyor ve cevabı hiç görmüyordu.

   Üç kart: para, zaman, çevre. Para en büyük tipografiyi alıyor çünkü kararı
   veren rakam o; ama tek başına DURMUYOR — yalnız bırakıldığında iki ayrı
   müşteri incelemesinde de "abartılı" okundu. Çevre kartı kasten farklı bir
   renkte: üçüncü sırada ama görsel olarak silik değil. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__gains {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gains-lead {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  max-width: 46rem;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gains-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobil: ikon solda, rakam ve açıklama sağda — üç kart alt alta ama her biri
   tek satır yüksekliğinde. Dikey istif ekranı yerdi. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__gain {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon value"
    "icon label";
  align-items: center;
  column-gap: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain-icon {
  grid-area: icon;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-secondary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain-value {
  grid-area: value;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  /* Sayaç akarken rakam genişliği değişip satırı zıplatmasın. */
  font-variant-numeric: tabular-nums;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain-unit {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain-label {
  grid-area: label;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* "en fazla" / "en az" — rakamın sınır olduğunu söyleyen kelimeler.
   Silik değil VURGULU: dipnotu okumayan da rakamın bir tavan (ya da taban)
   olduğunu buradan anlamalı. Ticari Reklam Yönetmeliği açısından iddianın
   sınırı, iddianın yanında durmak zorunda. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__gain-qual {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Para: bölümün karar verdiren rakamı. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__gain--money .cost__gain-value {
  font-size: var(--text-h1);
  color: var(--color-accent-text);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain--money {
  border-left-color: var(--color-accent);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain--money .cost__gain-icon {
  color: var(--color-accent-text);
}

/* Çevre: üçüncü sırada ama görsel olarak öne çıkıyor — para ve zamandan
   sonra gelen üçüncü gerekçe, dipnot değil. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__gain--eco {
  border-left-color: var(--color-success);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__gain--eco .cost__gain-icon, .cc_lz85qzy3_PPRGLzEpw5 .cost__gain--eco .cost__gain-value {
  color: var(--color-success);
}

/* DİPNOT NUMARASI — genel kural `0.68em`, yani yazının boyutuna oranlı.
   Buradaki yazı `--text-h1` (3,5rem'e kadar) olduğu için numara 2,4rem'e
   çıkıyor ve rakamla yarışıyordu. Bu yüzden mutlak boyuta sabitleniyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__gain-value .dipnot-ref {
  font-size: var(--text-label);
  margin-left: 0.25rem;
}

@media (min-width: 768px) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost__gains {
    padding: var(--space-lg);
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__gains-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__gain {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "value"
      "label";
    align-items: start;
    row-gap: var(--space-xs);
    padding: 0 0 0 var(--space-sm);
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__gain-label {
    font-size: var(--text-body);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Yıl çubuğu

   Bir çubuk, iki parça: solda cihazın bedeline denk gelen kısım,
   sağda cebinizde kalan. Çubuğun boyu hem para hem zaman olduğu
   için bölünme noktası doğrudan "kaçıncı ay" demek oluyor.

   TABAN DURUM DOLU. Animasyon yalnızca .is-visible altında ve
   `both` dolgusuyla çalışıyor; JS çalışmazsa da, hareket
   azaltılmışsa da çubuk dolu ve ay işareti görünür.
   ═══════════════════════════════════════════════════════════════ */

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil {
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--color-border);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-lead {
  margin: 0 0 var(--space-lg);
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-ad {
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-toplam {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Çubuğun tamamı = alternatifin bir yıllık parası. Zemin "cebinizde
   kalan" tarafı; üstüne binen dolgu cihazın bedeli. İki ayrı kutu
   yerine zemin + dolgu kullanıldı: aradaki sınır tek bir kenar
   oluyor, iki kutunun arasında piksel boşluğu kalmıyor.

   ZEMİN DOLU ALTIN. Önce açık altın (accent-light) kullanılmıştı ve
   dolgunun açık grisiyle neredeyse aynı tonda kalıyordu: çubuk tek
   parça görünüyor, bölünme yalnızca ince bir çizgiden okunuyordu.
   Çubuğun bütün işi o bölünmeyi göstermek — iki taraf birbirinden
   AÇIKÇA ayrılmak zorunda. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-cubuk {
  position: relative;
  width: 100%;
  height: 2.25rem;
  /* SAG UC YUVARLANMIYOR. Yuvarlak bir uc "burada bitti" der; oysa
     alternatifin gideri bitmiyor -- her yil bastan olusuyor. Sag
     kenarda ayrica bir erime var: cubuk cerceveden tasip soluyor,
     yani gozle "devam ediyor" diye okunuyor. */
  border-radius: 0.25rem 0 0 0.25rem;
  background: var(--color-accent);
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - 2.5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - 2.5rem),
    transparent 100%
  );
}

/* Altin bolumde yavasca saga akan seritler: duran bir blok "bir
   yillik tutar", akan bir blok "her yil yeniden" demek. Hareket
   sonsuz dongude ve yalnizca opaklik/konum degistiriyor. */
@keyframes cc_lz85qzy3_PPRGLzEpw5_cost-sonsuz {
  to {
    background-position: 1.5rem 0;
  }
}
.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-cubuk::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pay, 50%);
  right: 0;
  opacity: 0.22;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0 0.5rem,
    var(--color-surface) 0.5rem 1rem
  );
  background-size: 1.5rem 100%;
  animation: cc_lz85qzy3_PPRGLzEpw5_cost-sonsuz 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost__yil-cubuk::after {
    animation: none;
  }
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-dolgu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--pay, 50%);
  border-radius: 0.25rem 0 0 0.25rem;
  background: var(--color-surface-alt);
  border-right: 1px solid var(--color-border-strong);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-bedel {
  display: none;
}

/* Ay işareti sınırın üstünde duruyor: okuyan "burası kaçıncı ay"
   diye sormadan cevabı görüyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-ay {
  position: absolute;
  top: 50%;
  left: var(--pay, 50%);
  transform: translate(-50%, -50%);
  padding: 0.1875rem 0.625rem;
  border-radius: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-text);
  white-space: nowrap;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-md);
  margin: 0.625rem 0 0;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-etiket {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-nokta {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.1875rem;
}

/* Anahtar noktaları çubuğun İKİ tarafının AYNISI olmalı; farklı olsalardı
   anahtar işini yapmazdı. */
.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-etiket--bedel .cost__yil-nokta {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-etiket--kalan .cost__yil-nokta {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-cumle {
  margin: 0.625rem 0 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.cc_lz85qzy3_PPRGLzEpw5 .cost__yil-cumle strong {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
  color: var(--color-accent-text);
}

/* ── Dolum: on iki ay, on iki adım ────────────────────────────── */

/* Döngü: dolum ilk %15'te, kalan %85 beklemede. Çubuk zamanın çoğunda
   DOLU duruyor — okuyan doğru bölünmeyi görüyor, ara sıra da paranın
   nasıl birikip cihazın bedelini geçtiğini izliyor. */
@keyframes cc_lz85qzy3_PPRGLzEpw5_cost-yil-dol {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  15%, 100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cc_lz85qzy3_PPRGLzEpw5_cost-yil-ay {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 8 sn döngü: 1,2 sn dolum (on iki kesikli adım) + 6,8 sn bekleme.
   Ay rozeti dolum oraya vardığı karede beliriyor; gecikmesi dolumla aynı
   takvimde hesaplandığı için döngü boyunca senkron kalıyor. */
.cc_lz85qzy3_PPRGLzEpw5 .cost.is-visible .cost__yil-dolgu {
  animation: cc_lz85qzy3_PPRGLzEpw5_cost-yil-dol 8s steps(12, end) 80ms infinite both;
}

.cc_lz85qzy3_PPRGLzEpw5 .cost.is-visible .cost__yil-ay {
  animation: cc_lz85qzy3_PPRGLzEpw5_cost-yil-ay 140ms ease-out var(--ay-gecikme, 80ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost.is-visible .cost__yil-dolgu, .cc_lz85qzy3_PPRGLzEpw5 .cost.is-visible .cost__yil-ay {
    animation: none;
  }
}

@media (max-width: 47.9375rem) {
  .cc_lz85qzy3_PPRGLzEpw5 .cost__yil-cubuk {
    height: 2rem;
  }

  .cc_lz85qzy3_PPRGLzEpw5 .cost__yil-etiketler {
    flex-direction: column;
  }
}