/* ── Buybox ve rakipler (#alan-rakip) · "Tek ürün, dört sahne" (22.10.2026; önek tbb-). Kullanıcı: "bir ürüne
   odaklansak; ... kârını gördün, kâr ettiğini doğruladın, o fiyata ilk önce sen girdin". Hikâye tahtası
   _wf/dis-sayfa/buybox/hikaye.png. Tek kutuda kısa film: 1 rakip Buybox'ı aldı · 2 yeni fiyatta elinde kalan ·
   3 o fiyata sen girdin, Buybox sende · 4 siparişler ve net kâr. Son hâl CSS'in kendisidir (JS yok, hareket azaltma);
   .tbb-js .tbb-durak ilk karedir (_buybox.html'deki satır içi betik ayrıştırma sırasında verir; hareket
   tanitim-buybox-2026.js). İşaretleme templates/reklam/_buybox.html. Yalnız /tanitim'de. Yalnız transform ve opacity canlanır;
   bütün katmanlar üst üste yığılı, kutunun boyu sabit. Süreler sahne başından: S1 0 · S2 3,75 · S3 7,5 · S4 11,4 · son ≈16,4 sn (22.10.2026, kullanıcı: "çok hızlı
   olmuş gibi" → bütün süreler 1,5 kat). ── */
.tbb { --tbb-z: var(--tn-gece); --tbb-y: var(--tn-beyaz); --tbb-y2: var(--tn-k-yazi-2); --tbb-y3: var(--tn-k-yazi-3);
  --tbb-nokta: var(--tn-marka-gece); --tbb-soluk: .36;
  --tbb-egri: cubic-bezier(.2, .7, .2, 1); --tbb-cikis: cubic-bezier(.5, 0, .75, 0); --tbb-kay: cubic-bezier(.65, 0, .25, 1); }

/* Alanın dört maddesi: girişin altında, sahnenin üstünde yatay sıra (fiyat bölümüyle aynı aile) */
.tn-ozellik-liste.tbb-liste { grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin-top: 28px; }
.tbb-liste li { padding: 12px 0 14px; }
.tbb-liste strong { font-size: 15px; line-height: 21px; }
@media (min-width: 480px) { .tn-ozellik-liste.tbb-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Film kutusu ── */
.tbb-film { --sah-h: 196px; --sat-h: 48px; --ad-g: 54px;
  position: relative; height: 366px; margin-top: 32px; overflow: hidden; border-radius: 16px; background: var(--tbb-z);
  box-shadow: 0 0 0 1px rgba(243, 239, 233, .07); color: var(--tbb-y); font-variant-numeric: tabular-nums; contain: layout paint; }
.tbb-ust { position: absolute; top: 16px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 13px; line-height: 18px; color: var(--tbb-y3); }
.tbb-urun { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbb-ilerleme { display: flex; flex: none; gap: 4px; }
.tbb-ilerleme i { position: relative; width: 16px; height: 2px; overflow: hidden; border-radius: 1px; background: rgba(243, 239, 233, .14); }
.tbb-ilerleme i::after { content: ""; position: absolute; inset: 0; background: var(--tbb-y3); transform-origin: 0 50%; }
.tbb-sahne { position: absolute; top: 54px; left: 20px; right: 20px; height: var(--sah-h); }

/* Son hâl: satırlar üstte, siparişler altta (1024'ten itibaren yan yana) */
.tbb-son { display: grid; align-content: start; row-gap: 14px; height: 100%; max-width: 520px; margin-inline: auto; }
.tbb-sat-kutu { --tbb-orta: translateY(calc((var(--sah-h) - 2 * var(--sat-h)) / 2)); min-width: 0; }
.tbb-satirlar { position: relative; }
.tbb-satir { display: flex; align-items: center; height: var(--sat-h); }
/* Rakip satırı yalnız 1–3. sahnede görünür; son hâlde (4. sahne) yalnız sen ve Buybox kalır. Yerleşimde yer kaplamaz,
   senin satırının altında durur (sahne 1 ve 3'te iki satır birlikte ortalanır). */
.tbb-satir--rakip { position: absolute; top: var(--sat-h); left: 0; right: 0; opacity: 0; }
.tbb-ad { flex: none; width: var(--ad-g); font-size: 15px; line-height: 20px; font-weight: 500; }
.tbb-fiyat { margin-left: auto; font-size: clamp(26px, 8.2vw, 32px); line-height: 1.16; font-weight: 300; letter-spacing: -0.02em; white-space: nowrap; }
.tbb-rozet { position: absolute; top: calc((var(--sat-h) - 22px) / 2); left: var(--ad-g); height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--tbb-y); color: var(--tbb-z); font-size: 11px; line-height: 22px; font-weight: 600; letter-spacing: 0; }

/* Odometre: her hane dikey bir şerit; --yf son hâl, --y0 ilk hâl (hücre sırası); ₺ önünde bölünmez boşluk payı */
.tbb-sayi { --c: 1.16em; display: inline-flex; height: var(--c); line-height: var(--c); vertical-align: top; }
.tbb-sayi > span { display: block; }
.tbb-h { height: var(--c); overflow: hidden; }
.tbb-s { display: block; white-space: pre; transform: translateY(calc(var(--yf) * var(--c) * -1)); }
.tbb-tl { margin-left: .24em; }

/* Sahne 2: yeni fiyatta elinde kalan (son hâlde gizli; altta "adet başı" olarak kalır) */
.tbb-kalan { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; opacity: 0; }
.tbb-kalan__ust { font-size: 15px; line-height: 20px; color: var(--tbb-y2); }
.tbb-kalan__sayi { margin-top: 10px; font-size: clamp(56px, 18vw, 72px); line-height: 1.16; font-weight: 300; letter-spacing: -0.04em; }
.tbb-tamam { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 10px; padding: 0 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(243, 239, 233, .28); font-size: 13px; line-height: 18px; color: var(--tbb-y2); }
.tbb-tamam svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Sahne 4: siparişler (nokta = adet; boşlukla ayrılan küme = sipariş) ve sayaçlar */
/* Telefonda satırların altında ince çizgiyle ayrılır; 1024'ten itibaren sağ yarıda, solda dikey çizgi */
.tbb-siparis { min-width: 0; padding-top: 14px; border-top: 1px solid var(--tn-k-cizgi); }
.tbb-sip-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 26px; }
.tbb-noktalar { display: flex; align-items: center; gap: 10px; }
.tbb-grup { display: flex; gap: 4px; }
.tbb-grup i { width: 8px; height: 8px; border-radius: 50%; background: var(--tbb-nokta); }
.tbb-sip { display: flex; align-items: baseline; gap: 5px; font-size: 14px; line-height: 20px; color: var(--tbb-y2); white-space: nowrap; }
.tbb-sip .tbb-sayi { font-size: 22px; line-height: 1.16; font-weight: 300; color: var(--tbb-y); }
.tbb-net { margin-top: 6px; font-size: clamp(36px, 11vw, 42px); line-height: 1.16; font-weight: 300; letter-spacing: -0.035em;
  white-space: nowrap; text-align: right; }   /* sağa yaslı: sayaç büyürken baştaki boş haneler solda kalır */
.tbb-not { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--tbb-y3); white-space: nowrap; text-align: right; }
.tbb-not.tbb-carpim { margin-top: 0; }   /* sonda belirir: net kâr = adet × adet başı elinde kalan */

/* Altyazı: sahnenin tek cümlesi (ilk ekranın akan başlığı gibi ince, kelime kelime) */
.tbb-alt { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; text-align: center; }
.tbb-alt p { grid-area: 1 / 1; align-self: end; font-size: 20px; line-height: 26px; font-weight: 300; letter-spacing: -0.015em;
  text-wrap: balance; opacity: 0; }
.tbb-alt p:last-child { opacity: 1; }
.tbb-km { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.tbb-k { display: inline-block; }

@media (max-width: 374.98px) {
  .tbb-ust { gap: 10px; }
  .tbb-ilerleme { gap: 3px; } .tbb-ilerleme i { width: 10px; }
  .tbb-fiyat { font-size: 26px; }
  .tbb-net { font-size: 36px; }
  .tbb-alt p { font-size: 19px; line-height: 25px; }
}
@media (min-width: 640px) {
  .tbb-film { --sah-h: 232px; --sat-h: 58px; --ad-g: 66px; height: 400px; }
  .tbb-ust { top: 22px; left: 28px; right: 28px; font-size: 14px; line-height: 20px; }
  .tbb-ilerleme i { width: 20px; }
  .tbb-sahne { top: 64px; left: 28px; right: 28px; }
  .tbb-ad { font-size: 16px; line-height: 22px; }
  .tbb-fiyat { font-size: 40px; }
  .tbb-rozet { top: calc((var(--sat-h) - 24px) / 2); height: 24px; padding: 0 9px; font-size: 12px; line-height: 24px; }
  .tbb-kalan__ust { font-size: 16px; line-height: 22px; }
  .tbb-kalan__sayi { font-size: 88px; }
  .tbb-son { row-gap: 16px; }
  .tbb-grup i { width: 10px; height: 10px; }
  .tbb-noktalar { gap: 12px; }
  .tbb-net { font-size: 50px; }
  .tbb-sip { font-size: 15px; }
  .tbb-sip .tbb-sayi { font-size: 26px; }
  .tbb-not { font-size: 14px; line-height: 20px; }
  .tbb-alt { left: 28px; right: 28px; bottom: 28px; }
  .tbb-alt p { font-size: 24px; line-height: 30px; }
}
@media (min-width: 1024px) {
  .tn-ozellik-liste.tbb-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
  .tbb-liste li { padding: 16px 0 20px; } .tbb-liste strong { font-size: 16px; line-height: 22px; }
  .tbb-film { --sah-h: 252px; --sat-h: 72px; --ad-g: 84px; height: 448px; margin-top: 40px; border-radius: 24px; }
  .tbb-ust { top: 26px; left: 36px; right: 36px; }
  .tbb-sahne { top: 74px; left: 36px; right: 36px; }
  .tbb-son { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; align-items: center; align-content: center;
    max-width: 1000px; }
  .tbb-sat-kutu { --tbb-orta: translate(calc(50% + 24px), calc(var(--sat-h) / -2)); padding-right: 48px; }
  .tbb-siparis { padding: 6px 0 6px 48px; border-top: 0; border-left: 1px solid var(--tn-k-cizgi); }
  .tbb-ad { font-size: 18px; line-height: 24px; }
  .tbb-fiyat { font-size: 52px; }
  .tbb-rozet { top: calc((var(--sat-h) - 26px) / 2); height: 26px; padding: 0 10px; font-size: 13px; line-height: 26px; }
  .tbb-kalan__ust { font-size: 18px; line-height: 24px; }
  .tbb-kalan__sayi { font-size: 112px; margin-top: 2px; }
  .tbb-tamam { margin-top: 8px; }
  .tbb-sip-ust { height: 34px; }
  .tbb-noktalar { gap: 16px; }
  .tbb-grup { gap: 6px; }
  .tbb-grup i { width: 12px; height: 12px; }
  .tbb-sip { font-size: 16px; }
  .tbb-sip .tbb-sayi { font-size: 30px; }
  .tbb-net { margin-top: 10px; font-size: 64px; }
  .tbb-not { margin-top: 4px; font-size: 15px; line-height: 20px; }
  .tbb-alt { left: 36px; right: 36px; bottom: 34px; }
  .tbb-alt p { font-size: 30px; line-height: 36px; }
}

/* ── Hareket (yalnız .tbb-js). Aynı öğede birden çok canlandırma: listede sonraki, etkinken öncekini ezer; yeniden
   giren canlandırmalar "forwards" (gecikmede ilk karesi uygulanıp öncekileri bozmasın). ── */
@keyframes tbb-gir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes tbb-cik { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-28px); } }
@keyframes tbb-k { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes tbb-ac { from { opacity: 0; } to { opacity: 1; } }
@keyframes tbb-soluk { from { opacity: 1; } to { opacity: var(--tbb-soluk); } }
@keyframes tbb-parla { from { opacity: var(--tbb-soluk); } to { opacity: 1; } }
@keyframes tbb-asagi { from { transform: none; } to { transform: translateY(var(--sat-h)); } }
@keyframes tbb-yukari { from { transform: translateY(var(--sat-h)); } to { transform: none; } }
@keyframes tbb-rakip-gir { from { opacity: 0; transform: translateY(calc(-1 * var(--sat-h) - 16px)); }
  to { opacity: 1; transform: translateY(calc(-1 * var(--sat-h))); } }
@keyframes tbb-rakip-in { from { transform: translateY(calc(-1 * var(--sat-h))); } to { transform: none; } }
@keyframes tbb-rakip-gec { 0% { opacity: 1; } 22% { opacity: 0; } 72% { opacity: 0; } 100% { opacity: var(--tbb-soluk); } }
@keyframes tbb-sondur { from { opacity: var(--tbb-soluk); } to { opacity: 0; } }
@keyframes tbb-pop { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes tbb-zipla { 0% { transform: none; } 42% { transform: translateY(-18px) scale(1.06); } 72% { transform: translateY(2px); }
  100% { transform: none; } }
@keyframes tbb-ortadan { from { transform: var(--tbb-orta); } to { transform: none; } }
@keyframes tbb-say { from { transform: translateY(calc(var(--y0) * var(--c) * -1)); } }
/* Altı sipariş, 0,36 sn arayla; her adım 0,3 sn sarar (2,16 sn) */
@keyframes tbb-adim {
  0%       { transform: translateY(calc(var(--y0) * var(--c) * -1)); }
  13.889%, 16.667% { transform: translateY(calc(var(--y1) * var(--c) * -1)); }
  30.556%, 33.333% { transform: translateY(calc(var(--y2) * var(--c) * -1)); }
  47.222%, 50%     { transform: translateY(calc(var(--y3) * var(--c) * -1)); }
  63.889%, 66.667% { transform: translateY(calc(var(--y4) * var(--c) * -1)); }
  80.556%, 83.333% { transform: translateY(calc(var(--y5) * var(--c) * -1)); }
  97.222%, 100%    { transform: translateY(calc(var(--y6) * var(--c) * -1)); }
}
@keyframes tbb-dus { 0% { opacity: 0; transform: translateY(-26px); } 65% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@keyframes tbb-dol { from { transform: scaleX(0); } }
@keyframes tbb-son { from { opacity: 0; } }

.tbb-js .tbb-ilerleme i::after { animation: tbb-dol var(--d) linear var(--t) both; }
/* Altyazılar: girer (kelime kelime), sıradaki sahnede yukarı çıkar; sonuncusu kalır */
.tbb-js .tbb-alt p { animation: tbb-ac .01s linear var(--t) both, tbb-cik .6s var(--tbb-cikis) var(--t2, 99s) forwards; }
.tbb-js .tbb-alt p:last-child { animation: none; }
.tbb-js .tbb-k { animation: tbb-k .825s var(--tbb-egri) calc(var(--t) + .525s + var(--i) * .09s) both; }
/* Satırlar: S1 girer, S2'de çıkar, S3'te geri gelir; S4'te ortadan son yerine kayar */
.tbb-js .tbb-satirlar { animation: tbb-gir .9s var(--tbb-egri) .225s both, tbb-cik .675s var(--tbb-cikis) 3.75s forwards,
  tbb-gir .9s var(--tbb-egri) 7.725s forwards; }
.tbb-js .tbb-sat-kutu { animation: tbb-ortadan 1.05s var(--tbb-kay) 11.4s both; }
/* S1: rakip üste girer, sen aşağı iner ve soluklaşır, Buybox rozeti üstte (rakipte) belirir */
.tbb-js .tbb-satir--sen { animation: tbb-asagi .9s var(--tbb-kay) 1.275s both, tbb-soluk .675s ease 2.025s both,
  tbb-yukari 1.05s var(--tbb-kay) 9.975s forwards, tbb-parla .6s ease 8.7s forwards; }
.tbb-js .tbb-satir--rakip { animation: tbb-rakip-gir .9s var(--tbb-kay) 1.275s both, tbb-rakip-in 1.05s var(--tbb-kay) 9.975s forwards,
  tbb-rakip-gec 1.2s linear 9.9s forwards, tbb-sondur .6s ease 11.4s forwards; }
.tbb-js .tbb-rozet { animation: tbb-pop .675s var(--tbb-egri) 1.875s both, tbb-zipla 1.05s var(--tbb-kay) 9.975s forwards; }
/* S3: senin fiyatın 899,00 → 859,00 akar (aşağı sarar), sonra üste çıkarsın; rozet zıplar, sana kalır */
.tbb-js .tbb-satir--sen .tbb-s { animation: tbb-say var(--d) var(--tbb-kay) 8.7s both; }
/* S2: elinde kalan */
.tbb-js .tbb-kalan { animation: tbb-ac .01s linear 4.05s both, tbb-cik .675s var(--tbb-cikis) 7.5s forwards; }
.tbb-js .tbb-kalan__ust { animation: tbb-gir .825s var(--tbb-egri) 4.125s both; }
.tbb-js .tbb-kalan__sayi { animation: tbb-gir .825s var(--tbb-egri) 4.275s both; }
.tbb-js .tbb-kalan .tbb-s { animation: tbb-say var(--d) cubic-bezier(.3, .6, .2, 1) 4.425s both; }
.tbb-js .tbb-tamam { animation: tbb-pop .675s var(--tbb-egri) 6.6s both; }
/* S4: siparişler düşer, sayaçlar her siparişte bir adım */
.tbb-js .tbb-siparis { animation: tbb-gir .825s var(--tbb-egri) 12.225s both; }   /* satırlar yerine oturunca (ayraç fiyatı kesmesin) */
.tbb-js .tbb-grup i { animation: tbb-dus .63s cubic-bezier(.3, .7, .4, 1) calc(12.675s + var(--g) * .54s + var(--j, 0) * .075s) both; }
.tbb-js .tbb-siparis .tbb-s { animation: tbb-adim 3.24s cubic-bezier(.25, .8, .25, 1) 13.05s both; }
.tbb-js .tbb-bitis { animation: tbb-son .675s ease 15.75s both; }   /* en son biten: betik bunu bekler */
.tbb-durak, .tbb-durak *, .tbb-durak *::before, .tbb-durak *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .tbb-js *, .tbb-js *::before, .tbb-js *::after { animation: none !important; } }