/* TrendSatıcı tanıtım sitesi (/tanitim) — Fiyat ve kampanya alanı (#alan-fiyat), "İki satıcı" sahnesi (önek tfk-).
   22.10.2026, kullanıcı: "Basamaklı taslak uygun; cilala, denetle ve sayfaya işle." (taslak static/taslak/fiyat3/a.html).
   İşaretleme: templates/reklam/_fiyat.html (fiyat_alani makrosu); hareket: static/js/tanitim-fiyat-2026.js; rakamlar:
   reklam_sayfalari.TANITIM_FIYAT_SAHNESI (kâr motorunun çıktısı; dayanak yorumu orada). Yalnız /tanitim'de,
   tanitim-2026.css'ten sonra yüklenir (değişkenler, .tn-h2, .tn-giris, .tn-dipnot, .tn-ozellik-liste oradan).

   Aynı ürün, aynı maliyet, iki satıcı. Tarifeye katılmayan 2.799,00 ₺'ye satar (K1, %12,5); tarifeye katılan K2'nin
   tavanına (2.785,35 ₺) iner (%10). İkisinin fiyatı da kesintilerle erir; elinde kalan 64,24 ₺ ve 112,43 ₺.
   Son hâl CSS'in kendisidir (JS yoksa, hareket azaltılmışsa). Şablondaki satır içi betik ayrıştırma sırasında
   .tfk-js .tfk-durak verir (ilk kare, duraklatılmış); sahne yarı görününce .tfk-durak kalkar ve oynar (~7,7 sn), son
   hâlde durur; ekrandan tamamen çıkınca ilk kareye döner, yeniden görününce baştan oynar ("Yeniden oynat" düğmesi yok).
   Yalnız transform ve opacity canlanır; bütün metinler üst üste yığılı, yer baştan ayrılır (boy oynamaz).

   Cila (22.10.2026): ara rakam ("komisyondan önce") kalktı, rakam satış fiyatından doğrudan elinde kalana akar; çubuk
   etiketi açık parçayı anlatır ("Maliyet ve diğer kesintiler" → "Komisyon"), koyu parça hep kalandır. Çubuk katmanları:
   açık zemin her zaman altta, koyu komisyon ve koyu kalan üstte (eskiden kalanın açık zemini üstündeki koyu örtünün
   kenarında yakınlaşma sırasında ince açık çizgi kalıyordu). Tarifeye katılanın satırındaki satış fiyatı etiketi
   2.785,35 ₺'ye inince belirir (önceden etiket 2.799,00 derken satırda 2.785,35 yazıyordu). Basamaklarda yalnız
   hikâyenin iki baremi (K1, K2) aralığını yazar; K3 ve K4 yalnız oran (1024'te K3 aralığı kesiliyordu). 1024 altında
   satırlar telefon düzeninde (ad ve rakam üstte, çubuk altta tam genişlik); altı madde 1 / 2 / 3 / 6 sütun. */

.tfk { --tfk-yazi: var(--tn-a-yazi); --tfk-yazi2: var(--tn-a-yazi-2); --tfk-yazi3: var(--tn-a-yazi-3); --tfk-cizgi: var(--tn-a-cizgi);
  --tfk-bant: #E6E0D7; --tfk-dolgu: #D6CEC3; --tfk-kara: var(--tn-a-yazi); --tfk-acik: var(--tn-beyaz); --tfk-iyi: #1F7A4D;
  --tfk-egri: cubic-bezier(.2, .7, .2, 1); --tfk-cikis: cubic-bezier(.5, 0, .75, 0); --tfk-zum: cubic-bezier(.65, 0, .25, 1); }
.tfk-sahne { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--tfk-cizgi); font-variant-numeric: tabular-nums; }
.tfk-ust { font-size: 14px; line-height: 20px; color: var(--tfk-yazi3); }
.tfk-ust b { font-weight: 500; color: var(--tfk-yazi); }

/* ── Basamaklar: komisyon tarifesi dört basamak, yüksekliği oranla orantılı (K1 %12,5 tam boy). Genişlikler fiyat ölçeği
   değil, okunurluk için. --a etiket A'nın, --b0 / --b1 etiket B'nin ilk / son yeri (basamak alanı genişliğinin yüzdesi;
   etiket ortası). --d: K1'den K2'ye iniş (K2'nin K1'den kısalığı: (12,5 − 10) / 12,5 = .2). ── */
.tfk-basamak { --H: 92px; --U: 36px; --d: calc(var(--H) * .2); --k1: 48%; --k2: 28%; --a: 11.5%; --b0: 36%; --b1: 62%;
  position: relative; height: calc(var(--H) + var(--U)); margin-top: 18px; }
.tfk-basamaklar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--H); display: grid; align-items: end;
  grid-template-columns: var(--k1) var(--k2) minmax(0, 1fr) minmax(0, 1fr); }
.tfk-bs { position: relative; height: calc(var(--H) * var(--oran) / 12.5); padding: 8px 10px; overflow: hidden; background: var(--tfk-bant);
  border-left: 1px solid var(--tn-levha); }
.tfk-bs:first-child { border-left: 0; border-top-left-radius: 8px; }
.tfk-bs:last-child { border-top-right-radius: 8px; }
.tfk-bs b { display: block; font-size: 17px; line-height: 20px; font-weight: 400; letter-spacing: -0.01em; color: var(--tfk-yazi); }
.tfk-bs small { display: block; margin-top: 3px; font-size: 11px; line-height: 14px; color: var(--tfk-yazi3); white-space: nowrap; }
.tfk-bs--hedef small { display: none; }   /* telefonda K2 dar: yalnız oran */
.tfk-bs--k3, .tfk-bs--k4 { padding-inline: 6px; }
.tfk-bs--k3 b, .tfk-bs--k4 b { font-size: 15px; }
.tfk-bs__koyu { position: absolute; inset: 0; padding: inherit; background: var(--tfk-kara); font-style: normal; }
.tfk-bs__koyu b { color: var(--tfk-acik); }
.tfk-bs__koyu small { color: rgba(243, 239, 233, .72); }
.tfk-yol { position: absolute; left: 0; right: 0; top: 0; height: var(--U); pointer-events: none; }
.tfk-yol__ic { position: absolute; inset: 0; transform: translateY(var(--d)); }
.tfk-etiket { position: absolute; bottom: 6px; height: 26px; padding: 0 7px; border-radius: 6px; transform: translateX(-50%);
  font-size: 11px; line-height: 26px; font-weight: 600; white-space: nowrap; }
.tfk-etiket--a { left: var(--a); color: var(--tfk-yazi); background: var(--tn-levha); box-shadow: inset 0 0 0 1px var(--tfk-yazi3); }
.tfk-etiket--b { left: var(--b1); color: var(--tfk-acik); background: var(--tfk-kara); }
.tfk-m2 { display: inline-grid; overflow: hidden; vertical-align: top; }
.tfk-m2 > span { grid-area: 1 / 1; }
.tfk-eb0 { opacity: 0; transform: translateY(-100%); }

/* ── İki satıcı: 1024 altında ad + rakam yan yana, çubuk altta tam genişlik; geniş ekranda tek satır (ad | çubuk | rakam) ── */
.tfk-satirlar { display: grid; gap: 22px; margin-top: 22px; }
.tfk-satir { --g: 0s; --t-alt: 2s; --t-fiyat: .1s;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad sayi" "cubuk cubuk";
  column-gap: 12px; row-gap: 8px; align-items: end; }
.tfk-satir--b { --g: .15s; --t-alt: 2.35s; --t-fiyat: 1.25s; }   /* B'nin fiyatı etiketi 2.785,35'e inince belirir */
.tfk-ad { grid-area: ad; min-width: 0; }
.tfk-ad__ust { font-size: 15px; line-height: 21px; font-weight: 500; }
.tfk-ad__alt { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--tfk-yazi3); }
.tfk-cubuk { grid-area: cubuk; min-width: 0; }
.tfk-cubuk__etiket { display: grid; font-size: 13px; line-height: 18px; color: var(--tfk-yazi2); }
.tfk-cubuk__etiket > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfk-e1 { opacity: 0; }
.tfk-cubuk__yol { position: relative; height: 16px; margin-top: 6px; overflow: hidden; }
.tfk-cubuk__ic { position: absolute; inset: 0; transform-origin: 0 50%; }
/* Dilimler: --x1/--w1 ilk ölçek (satış fiyatı), --x2/--w2 son hâl (komisyon + kalan); çubuk genişliğinin oranı */
.tfk-dilim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 50%;
  transform: translateX(calc(var(--x2) * 100%)) scaleX(var(--w2)); }
.tfk-dilim--zemin { background: var(--tfk-dolgu); }
/* Koyu dilimler tek katmanda belirir: üst üste binen kenar (0,003) yarı saydamken iki kat koyulaşıp çizgi bırakmasın */
.tfk-cubuk__koyu { position: absolute; inset: 0; }
.tfk-dilim--kom, .tfk-dilim--kalan { background: var(--tfk-kara); }
.tfk-dilim--kom { opacity: 0; }
.tfk-sayi { grid-area: sayi; text-align: right; }
.tfk-sayi__deger { font-size: clamp(26px, 8.2vw, 32px); line-height: 1.18; font-weight: 300; letter-spacing: -0.03em; white-space: nowrap; }
.tfk-m { display: inline-grid; justify-items: end; overflow: hidden; vertical-align: top; }
.tfk-m > span { grid-area: 1 / 1; white-space: nowrap; }
.tfk-v0 { opacity: 0; transform: translateY(-100%); }
.tfk-sayi__not { display: grid; justify-items: end; font-size: 13px; line-height: 18px; color: var(--tfk-yazi3); }
.tfk-sayi__not > span { grid-area: 1 / 1; white-space: nowrap; }
.tfk-n0 { opacity: 0; }
.tfk-degisim { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--tfk-iyi); }

/* ── Sonuç cümlesi (ilk ekran başlığı gibi ince, kelime kelime akar) ve TrendSatıcı'nın rolü ── */
.tfk-cumle { margin-top: 26px; font-size: 22px; line-height: 28px; font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; }
.tfk-km { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.tfk-k { display: inline-block; }
.tfk-iyi { color: var(--tfk-iyi); font-weight: 400; }
.tfk-rol { margin-top: 10px; font-size: 16px; line-height: 23px; color: var(--tfk-yazi2); text-wrap: pretty; }

/* ── Alanın altı maddesi: sahnenin altında yatay, kompakt ── */
.tn-ozellik-liste.tfk-liste { grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin-top: 28px; }
.tfk-liste li { padding: 12px 0 14px; }
.tfk-liste strong { font-size: 15px; line-height: 21px; }

@media (max-width: 639.98px) { .tfk-ust .tfk-ust__alt { display: block; } }
/* Dar telefonda (320–374): oran ikinci satıra iner, nokta düşer; iki etiket K1'e sığsın diye K1 geniş, etiketler dar
   (320'de etiket 68 px, K1 150 px); K3 ve K4 oranı sığsın diye iç boşluk az */
@media (max-width: 374.98px) {
  .tfk-basamak { --k1: 52%; --k2: 24%; --a: 12.9%; --b0: 39.2%; --b1: 64%; }
  .tfk-etiket { padding: 0 5px; }
  .tfk-bs--k3, .tfk-bs--k4 { padding-inline: 4px; }
  .tfk-nokta { display: none; } .tfk-oran { display: block; }
}
@media (min-width: 480px) { .tn-ozellik-liste.tfk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) {
  .tfk-basamak { --H: 112px; --U: 38px; --k1: 45%; --k2: 30%; --a: 11%; --b0: 33%; --b1: 60%; margin-top: 22px; }
  .tfk-bs, .tfk-bs--k3, .tfk-bs--k4 { padding: 10px 12px; } .tfk-bs b, .tfk-bs--k3 b, .tfk-bs--k4 b { font-size: 20px; line-height: 24px; }
  .tfk-bs--hedef small { display: block; }
  .tfk-etiket { height: 28px; padding: 0 9px; font-size: 12px; line-height: 28px; }
  .tfk-satirlar { gap: 26px; margin-top: 28px; }
  .tfk-satir { column-gap: 24px; row-gap: 10px; }
  .tfk-ad__ust { font-size: 16px; line-height: 22px; } .tfk-ad__alt { font-size: 14px; line-height: 20px; }
  .tfk-cubuk__yol { height: 20px; }
  .tfk-sayi__deger { font-size: 40px; line-height: 46px; }
  .tfk-sayi__not { font-size: 14px; line-height: 20px; }
  .tfk-cumle { margin-top: 34px; font-size: 28px; line-height: 34px; }
  .tn-ozellik-liste.tfk-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tfk-basamak { --H: 128px; --U: 40px; --k1: 40%; --k2: 30%; --a: 10%; --b0: 30%; --b1: 55%; }
  .tfk-bs small { font-size: 12px; line-height: 16px; }
  .tfk-bs, .tfk-bs--k3, .tfk-bs--k4 { padding: 12px 14px; } .tfk-bs b, .tfk-bs--k3 b, .tfk-bs--k4 b { font-size: 24px; line-height: 28px; font-weight: 300; }
  .tfk-etiket { font-size: 13px; }
  .tfk-sahne { margin-top: 48px; padding-top: 16px; }
  .tfk-satirlar { gap: 24px; }
  .tfk-satir { grid-template-columns: 230px minmax(0, 1fr) auto; grid-template-areas: "ad cubuk sayi"; column-gap: 36px; align-items: center; }
  .tfk-sayi__deger { font-size: 50px; line-height: 56px; }
  .tfk-cumle { margin-top: 40px; font-size: 34px; line-height: 40px; }
  .tfk-rol { font-size: 17px; line-height: 24px; }
  .tn-ozellik-liste.tfk-liste { margin-top: 40px; }
  .tfk-liste li { padding: 16px 0 20px; } .tfk-liste strong { font-size: 16px; line-height: 22px; }
}
@media (min-width: 1280px) { .tn-ozellik-liste.tfk-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── Hareket (yalnız .tfk-js; süreler sahne başından, B satırı --g = 0,15 sn geriden) ── */
@keyframes tfk-gir { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes tfk-cik { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }
@keyframes tfk-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes tfk-sol { from { opacity: 1; } to { opacity: 0; } }
@keyframes tfk-yuksel { from { opacity: 0; transform: translateY(8px); } }
@keyframes tfk-etiket-gel { from { opacity: 0; transform: translate(-50%, 8px); } }   /* etiket ortası --a / --b1'de kalır */
@keyframes tfk-buyu { from { transform: scaleX(0); } }
@keyframes tfk-zum { from { transform: translateX(calc(var(--x1) * 100%)) scaleX(var(--w1)); } }
@keyframes tfk-zx { from { transform: translateX(calc(var(--b0) - var(--b1))); } }
@keyframes tfk-zy { 0% { transform: translateY(0); } 38% { transform: translateY(-12px); } 100% { transform: translateY(var(--d)); } }
@keyframes tfk-son { from { opacity: 0; transform: translateY(6px); } }
.tfk-js .tfk-ad__ust { animation: tfk-yuksel .5s var(--tfk-egri) var(--g) both; }
.tfk-js .tfk-ad__alt { animation: tfk-belir .5s ease var(--t-alt) both; }
/* Rakam: satış fiyatı → elinde kalan (ara rakam yok); fiyat, komisyon açılıp kalan belli olunca çıkar */
.tfk-js .tfk-v0 { animation: tfk-gir .6s var(--tfk-egri) var(--t-fiyat) both, tfk-cik .4s var(--tfk-cikis) calc(var(--g) + 4.95s) forwards; }
.tfk-js .tfk-v1 { animation: tfk-gir .6s var(--tfk-egri) calc(var(--g) + 5.15s) both; }
.tfk-js .tfk-n0 { animation: tfk-belir .4s ease calc(var(--t-fiyat) + .1s) both, tfk-sol .3s ease calc(var(--g) + 4.95s) forwards; }
.tfk-js .tfk-n1 { animation: tfk-belir .4s ease calc(var(--g) + 5.2s) both; }
/* Çubuk: doğar (satış fiyatı boyu, açık) → kesintiden sonrası kararır → kalana yakınlaşır → komisyon açılır */
.tfk-js .tfk-cubuk__ic { animation: tfk-buyu .9s var(--tfk-egri) calc(var(--g) + .25s) both; }
.tfk-js .tfk-dilim--zemin { animation: tfk-zum 1.1s var(--tfk-zum) calc(var(--g) + 3.3s) both; }
.tfk-js .tfk-cubuk__koyu { animation: tfk-belir .4s ease calc(var(--g) + 2.8s) both; }
.tfk-js .tfk-dilim--kom { animation: tfk-zum 1.1s var(--tfk-zum) calc(var(--g) + 3.3s) both, tfk-sol .8s ease calc(var(--g) + 4.7s) both; }
.tfk-js .tfk-dilim--kalan { animation: tfk-zum 1.1s var(--tfk-zum) calc(var(--g) + 3.3s) both; }
.tfk-js .tfk-e1 { animation: tfk-belir .4s ease calc(var(--g) + 3.0s) both, tfk-sol .3s ease calc(var(--g) + 4.6s) forwards; }
.tfk-js .tfk-e2 { animation: tfk-belir .4s ease calc(var(--g) + 4.85s) both; }
/* Basamak: iki etiket K1'de belirir; B'nin fiyatı akar, bir basamak aşağı zıplar, K2 kararır */
.tfk-js .tfk-etiket--a { animation: tfk-etiket-gel .45s var(--tfk-egri) .3s both; }
.tfk-js .tfk-etiket--b { animation: tfk-etiket-gel .45s var(--tfk-egri) .42s both; }
.tfk-js .tfk-eb0 { animation: tfk-cik .35s var(--tfk-cikis) 1.05s both; }
.tfk-js .tfk-eb1 { animation: tfk-gir .45s var(--tfk-egri) 1.2s both; }
.tfk-js .tfk-yol--b { animation: tfk-zx .8s cubic-bezier(.45, 0, .25, 1) 1.5s both; }
.tfk-js .tfk-yol__ic { animation: tfk-zy .8s cubic-bezier(.3, 0, .3, 1) 1.5s both; }
.tfk-js .tfk-bs__koyu { animation: tfk-belir .35s ease 2.2s both; }
/* Sonuç */
.tfk-js .tfk-degisim { animation: tfk-belir .4s ease 5.9s both; }
.tfk-js .tfk-k { animation: tfk-gir .55s var(--tfk-egri) calc(6.1s + var(--i) * .055s) both; }
.tfk-js .tfk-rol { animation: tfk-son .5s var(--tfk-egri) 7.15s both; }   /* en son biten: betik bunu bekler (dipnot 22.10.2026'da kalktı) */
.tfk-durak, .tfk-durak *, .tfk-durak *::before, .tfk-durak *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .tfk-js *, .tfk-js *::before, .tfk-js *::after { animation: none !important; } }