/* TrendSatıcı — Canlı görünüm "Nefes" · bileşen stili (.tsc- önekli; global seçici yok) */
.tsc { position: relative; font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #303030; font-variant-numeric: tabular-nums; }
.tsc-sahne { position: relative; width: 100%; aspect-ratio: var(--tsc-oran, 2 / 1); background: #ffffff; overflow: hidden; }
.tsc--mobil .tsc-sahne { aspect-ratio: var(--tsc-oran-mobil, 1.7 / 1); }
.tsc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Noktalar hareket ederken (kıpırdama, fareden kaçma) yalnız sahne yeniden boyansın — üstündeki yazılar / TrendBot değil */
.tsc-svg { will-change: transform; }
.tsc-donusen { transform-box: fill-box; transform-origin: center; }
.tsc-n { transform-box: fill-box; transform-origin: center; }   /* varışta nokta kendi merkezinde kabarır */
.tsc-isik { transform: scale(0); }   /* ışık katmanı yalnız animasyon sırasında görünür */

/* ── Zemin (yaşayan sistem, 18.10.2026): SVG'nin arkasında küre, ışıma, derinlik katmanları, parıltılar, dalga halkaları.
   Boştaki bütün hareket bileşik katmanda (transform / opacity): ana iş parçacığı boşta kalır. Animasyonlar varsayılan
   duraklatılmış; bileşen .tsc--canli verince oynar (sekme gizli, sahne ekran dışı, 3 dk etkileşimsizlik, sade kip: yok). */
.tsc-zemin { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; -webkit-mask-composite: source-in; mask-composite: intersect;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }   /* kenar solması + yazı kutularında delik */
.tsc-zemin > div, .tsc-zemin canvas { position: absolute; }
.tsc-kure, .tsc-isima, .tsc-flas, .tsc-dalga { border-radius: 50%; }
/* Küre: ışık sol üstten (vurgu), gövde şeftali-krem, kenar yumuşakça solar — Shopify'daki taşan küre gibi hacim */
.tsc-kure {
    background:
        radial-gradient(circle closest-side at 36% 32%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle closest-side, #fffcf9 0, #fef8f3 55%, #fdf3eb 84%, #fcede3 95.5%, rgba(251, 233, 220, .55) 98.6%, rgba(251, 233, 220, 0) 100%);
}
/* bant / telefon: daha açık bulut — 'bugün' noktaları zeminde solmasın */
.tsc-kure--bant { background: radial-gradient(circle closest-side, #fffaf6 0, #fef6f0 42%, rgba(254, 245, 238, .55) 72%, rgba(254, 245, 238, 0) 100%); }
/* Yoğunluk merkezinde nefes alan sıcak ışıma: turuncu → şeftali → krem */
.tsc-isima {
    background: radial-gradient(circle closest-side, rgba(249, 115, 22, .17) 0, rgba(251, 146, 60, .11) 26%, rgba(253, 186, 140, .065) 52%, rgba(254, 215, 170, 0) 100%);
    animation: tscNefes 6.4s ease-in-out infinite alternate both paused;
}
.tsc-flas { opacity: 0; background: radial-gradient(circle closest-side, rgba(249, 115, 22, .34) 0, rgba(251, 146, 60, .22) 30%, rgba(253, 186, 140, .1) 58%, rgba(254, 215, 170, 0) 100%); }
.tsc-derinlik, .tsc-tepki { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tsc-derinlik { transition: transform 1.4s cubic-bezier(.2, .7, .25, 1); }   /* fare paralaksı yumuşakça izler */
.tsc-katman { will-change: transform; animation: 21s ease-in-out infinite alternate both paused; }
/* 3 katman (onarım; eskiden 5): uzak katman yavaş süzülür, iki orta katman farklı yönlere süzülürken hafifçe genişler */
.tsc-katman--u { animation-name: tscSuzU; animation-duration: 29s; }
.tsc-katman--o1 { animation-name: tscSuzO1; animation-duration: 19s; }
.tsc-katman--o2 { animation-name: tscSuzO2; animation-duration: 23s; }
.tsc--canli .tsc-zemin .tsc-katman, .tsc--canli .tsc-zemin .tsc-isima, .tsc--canli .tsc-zemin .tsc-parilti { animation-play-state: running; }
@keyframes tscNefes { from { transform: scale(.94); opacity: .74; } to { transform: scale(1.05); opacity: 1; } }
@keyframes tscSuzU { 0% { transform: translate3d(-2.2px, 1.2px, 0) rotate(-.2deg); } 50% { transform: translate3d(1.4px, -1.8px, 0) rotate(.06deg); } 100% { transform: translate3d(2.4px, 1.6px, 0) rotate(.24deg); } }
@keyframes tscSuzO1 { 0% { transform: translate3d(-1.4px, -1px, 0) rotate(.22deg) scale(.996); } 50% { transform: translate3d(1.2px, 1.5px, 0) rotate(-.08deg) scale(1.008); } 100% { transform: translate3d(1.6px, -1.2px, 0) rotate(-.3deg) scale(.999); } }
@keyframes tscSuzO2 { 0% { transform: translate3d(1.2px, 1.3px, 0) rotate(-.26deg) scale(1.006); } 50% { transform: translate3d(-1.5px, -.6px, 0) rotate(.12deg) scale(.996); } 100% { transform: translate3d(-.8px, 1.7px, 0) rotate(.28deg) scale(1.004); } }
/* Seyrek ışık kıpırtısı: küçük sıcak bir ışık arada bir parlayıp söner (her biri kendi ritminde) */
.tsc-parilti {
    position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle closest-side, rgba(255, 250, 245, 1) 0, rgba(251, 160, 90, .6) 34%, rgba(253, 186, 140, 0) 100%);
    animation: tscParilti 11s ease-in-out infinite both paused;
}
@keyframes tscParilti { 0%, 84%, 100% { opacity: 0; transform: scale(.3); } 90% { opacity: .95; transform: scale(1.15); } 95% { opacity: .35; transform: scale(.8); } }
/* Sipariş dalgası: merkezden yayılan yumuşak halka (yazı kutularında maskeli — yazıya binmez) */
.tsc-dalgalar { left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tsc-dalga { position: absolute; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(circle closest-side, rgba(249, 115, 22, 0) 73%, rgba(249, 115, 22, .14) 84%, rgba(249, 115, 22, .32) 91%, rgba(253, 186, 140, .14) 96%, rgba(253, 186, 140, 0) 100%); }
.tsc-dalga--ince { background: radial-gradient(circle closest-side, rgba(251, 146, 60, 0) 84%, rgba(251, 146, 60, .28) 93%, rgba(253, 186, 140, 0) 100%); }
/* SVG'nin üstünde sipariş anı: ışık izi (canvas) ve kıvılcımlar — yazıların ve kartların altında */
.tsc-efekt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tsc-iz { position: absolute; }
.tsc-kivilcim {
    position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle closest-side, #fff8f2 0, rgba(251, 146, 60, .95) 45%, rgba(249, 115, 22, 0) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .tsc-zemin *, .tsc-efekt * { animation: none !important; transition: none !important; }
}

.tsc-bas { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.tsc-bas > b { font-weight: 600; color: #303030; }
.tsc-bugun { color: #616161; }
.tsc-bugun b { color: #303030; font-weight: 600; }
.tsc-son { color: #616161; }
.tsc-canli { width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 3px #fee9da; flex: none; }
.tsc-ornek { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 500; color: #616161; background: #f1f1f1; border-radius: 5px; padding: 2px 7px; }
.tsc-lejant { position: absolute; left: 16px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #616161; }
.tsc-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.tsc-lejant i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tsc-lej-n { color: #303030; font-weight: 500; }
/* Ortalanmış karşılama bandı: başlık ve lejant sahnenin ortasında */
.tsc--orta:not(.tsc--mobil) .tsc-bas { left: 50%; transform: translateX(-50%); }
.tsc--orta:not(.tsc--mobil) .tsc-lejant { left: 50%; transform: translateX(-50%); flex-wrap: nowrap; white-space: nowrap; }
.tsc--orta.tsc--mobil .tsc-bas { left: 50%; transform: translateX(-50%); }
.tsc--orta.tsc--mobil .tsc-lejant { justify-content: center; }
.tsc-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tsc-kart {
    position: absolute; z-index: 2; width: 212px; box-sizing: border-box; padding: 9px 12px;
    background: #ffffff; border-radius: 12px; outline: none; font-size: 12px; line-height: 1.35;
    box-shadow: 0 4px 10px rgba(26, 26, 26, .10), 0 1px 1.6px rgba(26, 26, 26, .08), 0 0 0 1px rgba(0, 0, 0, .07);
}
.tsc-kart:focus-visible { box-shadow: 0 4px 10px rgba(26, 26, 26, .10), 0 0 0 2px #ffffff, 0 0 0 4px #005bd3; }
.tsc-kart-ust { display: flex; align-items: center; gap: 7px; }
.tsc-kart-ust i { width: 8px; height: 8px; border-radius: 50%; background: #f97316; flex: none; }
.tsc-kart--notr .tsc-kart-ust i { background: #8a8a8a; }
.tsc-kart-ust b { flex: 1; font-size: 13px; font-weight: 600; color: #303030; }
.tsc-kart-ornek { font-size: 11px; font-weight: 500; color: #616161; background: #f1f1f1; border-radius: 5px; padding: 1px 6px; }
.tsc-kart-alt-satir { margin-top: 3px; padding-left: 15px; color: #616161; }
/* tutar baştan son boyunda (panelde rakam-2026.js tutarı 14 px yapar): kart yerleştikten sonra büyüyüp yer değiştirmesin */
.tsc-tutar { font-size: 14px; font-weight: 600; color: #303030; white-space: nowrap; }
/* Dar yerde tek satırlık kısa kart (canli-nefes.js kartYerlestir): başlık ve tutar yan yana, "· az önce" yok (duyuruda var) */
.tsc-kart--tek { display: flex; align-items: center; gap: 8px; width: max-content; padding: 7px 12px; white-space: nowrap; }
.tsc-kart--tek .tsc-kart-ust b { flex: none; }
.tsc-kart--tek .tsc-kart-alt-satir { margin-top: 0; padding-left: 0; }
.tsc-kart--tek .tsc-zaman { display: none; }
/* Dar boşlukta yazı genişliğinde iki satırlı kart (≈125 px), "· az önce" yok */
.tsc-kart--kisa { width: max-content; }
.tsc-kart--kisa .tsc-zaman { display: none; }

/* Sağ yerleşim (karşılama bandının tamamı, Shopify'daki küre gibi): başlık yok — bugünün rakamları üst çubukta */
.tsc--sag { height: 100%; }
.tsc--sag .tsc-sahne { aspect-ratio: auto; height: 100%; background: transparent; }
.tsc--sag .tsc-bas { display: none; }
.tsc.tsc--sag:not(.tsc--mobil) .tsc-lejant { left: auto; right: 20px; bottom: 14px; transform: none; }
.tsc.tsc--sag:not(.tsc--mobil) .tsc-ornek { top: 12px; right: 20px; }

/* Telefon: kart sahnenin altında, tek kart; yenisi gelince eskisiyle üst üste yumuşakça yer değiştirir */
.tsc--mobil .tsc-bas { font-size: 12px; top: 10px; left: 12px; }
.tsc--mobil .tsc-son { display: none; }
.tsc--mobil .tsc-lejant { position: static; font-size: 11px; padding: 4px 12px 0; gap: 2px 10px; }
.tsc--mobil .tsc-ornek { top: 8px; right: 10px; }
.tsc--orta.tsc--mobil .tsc-ornek { top: auto; bottom: 6px; right: 8px; }   /* ortadaki başlığa değmesin */
.tsc-kart-alt { position: relative; height: 58px; margin: 8px 16px 0; }
.tsc--mobil .tsc-kart { left: 0; right: 0; top: 0; width: auto; max-width: 380px; margin-inline: auto; }