/* TrendSatıcı tanıtım sitesi (/tanitim) — "Telefonunda ve Trendyol panelinde." bölümü (#mobil, #eklenti). İşaretleme:
   templates/reklam/_mobil.html (yuzeyler makrosu; maket metinlerinin dayanakları oradaki şablon yorumunda). Yalnız
   /tanitim'de, tanitim-2026.css'ten sonra yüklenir (değişkenler, .tn-levha, .tn-izgara, .tn-medya, .tn-telefon,
   .tn-telefon--yuzey ve .tn-medya__kutu--yuzey oradan; buradaki kurallar onları ezer). İki kart:

   · Mobil uygulama "Açılış ve bildirim" (önek tmd-; 21.10.2026, kullanıcı D2'yi seçti: "içinde grafik filan istemiyorum,
     sadece açılış ve bildirim"; taslak static/taslak/mobil/d2.html, buraya birebir taşındı). Büyük telefon kartın üstünden
     başlar, altı kartın kenarında kesilir (22.10.2026, kullanıcı: kartlar "boyuna büyük"; K2 seçildi: telefon büyük kalsın,
     bildirim yazıları okunsun; logo ve ad kesilmez); bölüm görününce ekran koyu zeminde açılır, logonun 11 noktası sırayla belirir ve ekranın ortasında kalır, altında
     "TrendSatıcı · Mobil uygulama"; üstten "Yeni Sipariş" iner, ardından "Zararlı Sipariş" en üste iner, ilki bir yuva
     aşağı kayar. Bir kez oynar, son hâlde durur (logo + ad + iki bildirim). Hareketi şablondaki satır içi betik yönetir.
     Zaman çizelgesi (sn): 0,1 durum çubuğu · 0,15–1,3 noktalar · 1,25 "TrendSatıcı / Mobil uygulama" · 2,0 "Yeni
     Sipariş" · 3,4 "Zararlı Sipariş" üste, ilki aşağı · ≈4,0 son.
   · Chrome eklentisi önce / sonra (önek tes-; 27.10.2026): üç sekme (Ana sayfa · Plus fiyatları · Kâr dökümü), her
     sekmede eklentisiz ve eklentili demo ekran görüntüsü üst üste; ayırıcının solu eklentili (clip-path), sağı
     eklentisiz; altta kaydırma çubuğu. --tes-v ayırıcının sahnedeki yeri (%). Hareket ve sürükleme:
     static/js/tanitim-mobil-2026.js (bölüm ilk görününce çizgi bir kez soldan duruş noktasına kayar).

   Son hâl CSS'in kendisidir (JS yok ya da hareket azaltılmışsa görünen). Mobil kutuya sınıf verilir: .tmd-bekle (ilk
   kare; şablondaki satır içi betik sayfa ayrıştırılırken verir) · .tmd-oyna (bir kez) · .tmd-bitti · .tmd-durak (ekranda
   değil ya da sekme gizli). Zaman yalnız CSS'te. Yalnız transform ve opacity canlanır; hiçbir şey boy değiştirmez. ══ */
.tmd { --tmd-egri: cubic-bezier(.2, .8, .2, 1); --tmd-ios: cubic-bezier(.16, 1, .3, 1); }
.tmc-tanim { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Kutular (22.10.2026: kısaldı; 27.10.2026: eklenti önce / sonra) ──
   Mobil kutu sabit boylu: telefonda 480, tablette 520, masaüstünde 580 px (eskiden 4:5, 1440 px'te ~770 px'ti). Telefon
   kutunun üstünden 40–48 px aşağıda başlar, genişliği 268 / 300 px (kutu darsa kutu − 40/48 px); altı kutunun kenarında
   kesilir. Logo ve "TrendSatıcı · Mobil uygulama" telefon boyunun ~%63'ünde biter, her genişlikte kutunun içinde kalır.
   Eklenti kutusu 1024 px altında içeriği kadar (sekmeler + sahne + çubuk). 1024 px ve üstünde ızgara 5/7: ekran
   görüntüsü yarım kutuda okunmuyordu; iki kutu aynı boyda, 580 px (en uzun sahne, Kâr dökümü, sığar). */
.tmd.tmc .tn-yuzeyler .tmd-sahne { container-type: size; aspect-ratio: auto; height: 480px; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .tmd.tmc .tn-yuzeyler .tmd-sahne { height: 520px; }
}
@media (min-width: 1024px) {
  .tes .tes-izgara { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .tmd.tmc .tn-yuzeyler .tn-medya__kutu--yuzey { aspect-ratio: auto; height: 580px; max-height: none; }
}

/* ══ Mobil uygulama: telefon ══ */
.tmd .tmd-tel { --tel-g: min(268px, calc(100cqw - 48px)); top: 40px; padding: calc(var(--tel-g) * .032); }
@media (min-width: 640px) { .tmd .tmd-tel { --tel-g: min(300px, calc(100cqw - 40px)); top: 48px; } }
.tmd .tmd-ekran { padding: 0; border-radius: calc(var(--tel-g) * .145); background: #F2F2F4; color: #1C1916; text-align: left;
  font-variant-numeric: tabular-nums; }
.tmd .tmd-ekran::before { z-index: 6; }                   /* ada her katmanın üstünde */

/* ── Durum çubuğu (açılışta açık yazı) ve ana ekran çizgisi ── */
.tmd-durum { position: absolute; top: calc(var(--tel-g) * .035); left: 0; right: 0; display: grid; grid-template-columns: 1fr 34% 1fr;
  height: calc(var(--tel-g) * .075); align-items: center; color: #1C1916; }
.tmd-durum--koyu { color: #fff; }
.tmd-saat { justify-self: center; font-size: calc(var(--tel-g) * .045); font-weight: 600; letter-spacing: -0.01em; }
.tmd-durum__ikon { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: calc(var(--tel-g) * .012); }
.tmd-durum__ikon svg { width: auto; height: calc(var(--tel-g) * .03); fill: currentColor; }
.tmd-durum__ikon svg:last-child { height: calc(var(--tel-g) * .033); }
.tmd-cubuk { position: absolute; left: 32%; right: 32%; bottom: calc(var(--tel-g) * .022); height: calc(var(--tel-g) * .014);
  border-radius: 999px; background: #1C1916; }
.tmd-acilis .tmd-cubuk { background: rgba(255, 255, 255, .86); }

/* ── Bildirim şeridi (iOS 16+): ikon solda ve ortalı, başlık kalın, saat sağda, gövde altta; uygulama adı yazılmaz,
   başlıkta emoji yok. Ölçüler 393 pt ekranın oranları (8 pt kenar, 14 pt iç boşluk, 38 pt ikon, 23 pt köşe); yazı
   okunurluk için ~%12 büyük. İki şerit üst üste iki yuvada; boyları sabit (yuva kayması aynı değişkenden). ── */
.tmd-bildirimler { --tmd-yuva: calc(var(--tel-g) * .235); position: absolute; z-index: 5; top: calc(var(--tel-g) * .125);
  left: calc(var(--tel-g) * .022); right: calc(var(--tel-g) * .022); display: flex; flex-direction: column; gap: calc(var(--tel-g) * .02); }
.tmd-bil { display: block; }
.tmd-bil > .tmd-bil__ic { box-sizing: border-box; height: calc(var(--tel-g) * .215); }
.tmd-bil__ic { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--tel-g) * .024);
  padding: calc(var(--tel-g) * .03) calc(var(--tel-g) * .034); border-radius: calc(var(--tel-g) * .055);
  background: #FCFCFC; color: #1C1916;
  box-shadow: 0 0 0 .5px rgba(28, 25, 22, .08), 0 8px 22px -10px rgba(28, 25, 22, .32);
  font-size: calc(var(--tel-g) * .042); line-height: 1.32; }
.tmd-bil__ikon { display: grid; place-items: center; width: calc(var(--tel-g) * .09); height: calc(var(--tel-g) * .09);
  border-radius: calc(var(--tel-g) * .021); background: #fff; box-shadow: 0 0 0 .5px rgba(28, 25, 22, .14); }
.tmd-bil__ikon svg { width: 78%; height: 78%; }
.tmd-bil__metin { display: grid; min-width: 0; }
.tmd-bil__ust { display: flex; align-items: baseline; gap: .5em; }
.tmd-bil__ust b { font-weight: 600; }
.tmd-bil__ust i { margin-left: auto; font-size: .88em; font-style: normal; color: #8A8580; }
.tmd-bil--c { position: relative; z-index: 1; }

/* ── Açılış: koyu zemin, ortada logonun 11 noktası (son hâlde de durur: ekranın kendisi) ── */
.tmd-acilis { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: #151311; }
.tmd-merkez { display: grid; justify-items: center; row-gap: calc(var(--tel-g) * .07); margin-top: calc(var(--tel-g) * -.08); }
.tmd-logo { display: block; width: calc(var(--tel-g) * .4); height: calc(var(--tel-g) * .4); overflow: visible; }
/* Uygulamanın adı (kullanıcı, 21.10.2026: "telefonun içinde TrendSatıcı mobil uygulaması yazabilir") */
.tmd-uygad { display: grid; justify-items: center; row-gap: calc(var(--tel-g) * .012); margin: 0; text-align: center; }
.tmd-uygad b { font-size: calc(var(--tel-g) * .082); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: #F3EFE9; }
.tmd-uygad span { font-size: calc(var(--tel-g) * .046); line-height: 1.3; color: #A69D93; }
.tmd-logo circle { transform-box: fill-box; transform-origin: center; }

/* ══ Chrome eklentisi: önce / sonra ══
   Görüntü genişliği --tes-g: kutu içi genişlik, en az 608 px (daha darsa görüntünün bir yanı kırpılır: Ana sayfada sol,
   Plus'ta sağ, Kâr dökümünde orta görünür; yazı ~%80'den küçülmesin), en çok 760 px (1:1). Sahne boyu en uzun
   görüntüye (Kâr dökümü, 941/1520) göre sabit: sekme değişince kutu boyu değişmez; kısa görüntüler dikeyde ortalı.
   Üstteki 26 px şeritte bölge adları (görüntünün üstüne binmesin). Dokunmada dikey kaydırma ve iki parmakla
   yakınlaştırma tarayıcıda kalır (touch-action); yatay sürükleme çizgiyi taşır. */
.tmd.tmc .tn-yuzeyler .tn-medya__kutu--yuzey.tes-kutu { aspect-ratio: auto; height: auto; max-height: none; display: flex;
  flex-direction: column; justify-content: center; padding: 14px; container: tes / inline-size; }
@media (min-width: 640px) { .tmd.tmc .tn-yuzeyler .tn-medya__kutu--yuzey.tes-kutu { padding: 20px; } }
@media (min-width: 1024px) { .tmd.tmc .tn-yuzeyler .tn-medya__kutu--yuzey.tes-kutu { height: 580px; padding: 24px; } }
.tes-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sekmeler: kapsül içinde; dar kutuda dolgu azalır (320 px'te de üçü sığar). Yine taşarsa (büyük yazı tipi) yana kayar:
   kaydırma çubuğu gizli, seçilen sekme kapsülün iç boşluğu korunarak görünür alana alınır. Pasif sekme yazısı #4A433D:
   kapsül zemininde 4,5:1'in üstünde. */
.tes-sekmeler { display: inline-flex; flex: none; align-self: flex-start; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-padding-inline: 3px; scrollbar-width: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--tn-acik-3); }
.tes-sekmeler::-webkit-scrollbar { display: none; }
.tes-sekme { flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; color: var(--tn-a-yazi-2);
  transition: background-color .2s, color .2s, box-shadow .2s; }
.tes-sekme[aria-selected="true"] { background: #fff; color: var(--tn-a-yazi); box-shadow: 0 1px 2px rgba(28, 25, 22, .12); }
.tes-sekme:focus-visible { outline: 2px solid var(--tn-a-yazi); outline-offset: -2px; border-radius: 999px; }
@container tes (max-width: 340px) { .tes-sekme { padding: 0 10px; } }
@container tes (max-width: 270px) { .tes-sekme { padding: 0 6px; } }

/* Sahne: iki katman üst üste; sonra katmanı soldan --tes-v'ye kadar görünür */
.tes-sahne { --tes-v: 64%; --tes-g: min(760px, max(100cqw, 608px)); position: relative; flex: none;
  height: calc(var(--tes-g) * .6191 + 26px); margin-top: 10px; overflow: hidden; touch-action: pan-y pinch-zoom; cursor: ew-resize;
  user-select: none; -webkit-user-select: none; }
.tes-panel-grup { position: absolute; inset: 26px 0 0; border-radius: 10px; transition: opacity .2s ease, visibility 0s linear 0s; }
.tes-panel-grup[hidden] { display: block; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.tes-panel-grup:focus { outline: none; }
.tes-panel-grup:focus-visible { outline: 2px solid var(--tn-a-yazi); outline-offset: -2px; }
.tes-katman { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tes .tes-katman img { flex: none; width: var(--tes-g); max-width: none; height: auto; border-radius: 10px;
  box-shadow: var(--tn-golge-acik); -webkit-user-drag: none; user-select: none; }
@container tes (max-width: 607.98px) {
  .tes-panel-grup--sol .tes-katman { justify-content: flex-start; }
  .tes-panel-grup--sag .tes-katman { justify-content: flex-end; }
}
.tes-katman--sonra { clip-path: inset(0 calc(100% - var(--tes-v)) 0 0); }
.tes-cizgi { position: absolute; top: 0; bottom: 0; left: var(--tes-v); width: 2px; margin-left: -1px; pointer-events: none;
  background: var(--tn-a-yazi); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.tes-etiket { position: absolute; top: 2px; height: 20px; padding: 0 8px; border-radius: 999px; pointer-events: none;
  font-size: 11px; line-height: 20px; font-weight: 500; white-space: nowrap; background: rgba(28, 25, 22, .78); color: var(--tn-beyaz);
  transition: opacity .15s; }
.tes-etiket--sonra { right: calc(100% - var(--tes-v) + 8px); }
.tes-etiket--once { left: calc(var(--tes-v) + 8px); }
.tes-etiket.tes-sakla { opacity: 0; }

/* Çubuk (input range): ince iz, beyaz yuvarlak tutamak; klavyede tek odak halkası tutamakta */
.tes-cubuk { margin-top: 14px; }
.tes-aralik { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.tes-aralik::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--tn-acik-3); }
.tes-aralik::-moz-range-track { height: 6px; border-radius: 999px; background: var(--tn-acik-3); }
.tes-aralik::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  border: 1px solid var(--tn-a-yazi-3); background: #fff; box-shadow: 0 1px 3px rgba(28, 25, 22, .2); }
.tes-aralik::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--tn-a-yazi-3); background: #fff;
  box-shadow: 0 1px 3px rgba(28, 25, 22, .2); }
.tes-aralik:focus { outline: none; }
.tes-aralik:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--tn-a-yazi); outline-offset: 2px; }
.tes-aralik:focus-visible::-moz-range-thumb { outline: 2px solid var(--tn-a-yazi); outline-offset: 2px; }

/* ══ Hareket: mobil uygulama ══ */
/* İlk kare: ekran koyu ve boş; bildirim yok */
.tmd-bekle :is(.tmd-logo circle, .tmd-uygad, .tmd-acilis .tmd-durum, .tmd-acilis .tmd-cubuk, .tmd-bil__ic) { opacity: 0; }
.tmd-bekle .tmd-bil--a { transform: translateY(calc(-1 * var(--tmd-yuva))); }

.tmd-oyna :is(.tmd-acilis .tmd-durum, .tmd-acilis .tmd-cubuk) { animation: tmd-ac .3s ease .1s both; }
.tmd-oyna .tmd-logo circle { animation: tmd-nokta .42s var(--tmd-egri) calc(.15s + var(--k) * .075s) both; }
.tmd-oyna .tmd-uygad { animation: tmd-ac .5s ease 1.25s both; }

/* "Yeni Sipariş" 2,0'da en üst yuvaya iner (dış katman o sırada bir yuva yukarıda bekler); 3,4'te "Zararlı Sipariş" en
   üste inerken "Yeni Sipariş" bir yuva aşağı kayar. İç katman giriş, dış katman kayma: aynı öğede iki transform yok. */
.tmd-oyna .tmd-bil--a > .tmd-bil__ic { animation: tmd-bil-gir .6s var(--tmd-ios) 2s both; }
.tmd-oyna .tmd-bil--a { animation: tmd-bil-asagi .5s var(--tmd-ios) 3.4s both; }
.tmd-oyna .tmd-bil--c > .tmd-bil__ic { animation: tmd-bil-gir .6s var(--tmd-ios) 3.4s both; }

/* Ekranda değil ya da sekme gizli: her şey yerinde durur */
.tmd-durak *, .tmd-durak *::before, .tmd-durak *::after { animation-play-state: paused !important; }

@keyframes tmd-ac { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmd-nokta { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes tmd-bil-asagi { from { transform: translateY(calc(-1 * var(--tmd-yuva))); } to { transform: none; } }
@keyframes tmd-bil-gir { 0% { opacity: 0; transform: translateY(calc(-100% - var(--tel-g) * .125)); } 30% { opacity: 1; }
  100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tmc *, .tmc *::before, .tmc *::after { animation: none !important; }
  .tes-panel-grup, .tes-sekme, .tes-etiket { transition: none; }
}