/* TrendSatıcı tanıtım sitesi (/tanitim) — "Üç adımda başla." bölümü (#nasil-calisir), "Üç kısa film" (önek tadc-). 20.10.2026, kullanıcı C'yi seçti ("Üç adımda başla bölümünde C olsun"); taslak static/taslak/adimlar/c.html, buraya birebir taşındı. İşaretleme: templates/reklam/_adimlar.html (adimlar makrosu; süre etiketlerinin ve maket metinlerinin dayanakları oradaki şablon yorumunda); hareket: static/js/tanitim-adimlar-2026.js. Yalnız /tanitim'de, tanitim-2026.css'ten sonra yüklenir (değişkenler, .tn-h2, .tn-giris, .tn-dugme ve .tn-dipnot oradan). Üç adım yan yana üç sütun. Her sütunun üstünde kendi küçük panel sahnesi oynar; aynı anda tek hareket (1 bitince 2, sonra 3). Sahnelerin hemen altından ince bir zaman çizgisi geçer: her adımın parçası, kendi filmi oynarken dolar; üçüncü parça kesikli, çünkü o iş arka planda sürer. Süre, adımın adıyla aynı satırda (telefonda oynatıcının etiketinde de): hesap "Birkaç dakika", bağlama "Yaklaşık 1 dakika" (kullanıcının işi üç değeri kopyalayıp yapıştırmak; tahmin, ölçülmüş değil), kurulum "Arka planda, mağazana göre" (kesin süre yok; büyük mağazada uzar, bu yüzden "birkaç dakika" sözü verilmez). Son hâl CSS'in kendisidir (JS yok ya da hareket azaltılmış). JS film başına sınıf verir: .tadc-bekle (sırası gelmedi: iskelet soluk) · .tadc-oyna (ilk akış) · .tadc-yeniden (fare / dokunuşla tekrar); kökte .tadc-durak (bölüm ekranda değil ya da sekme gizli: her şey durur). .tadc-bekle'yi ve ilk sahneyi (data-etkin) önce şablondaki satır içi betik verir (sayfa ayrıştırılırken; ertelemeli betik gelmezse sayfa yüklenince geri alır). Yalnız transform ve opacity canlanır. Boylar px; hiçbir şey boy değiştirmez. 1024 altında üç sahne tek sahnede üst üste durur (telefonda tek "oynatıcı"), adımlar altında satır olur. Maket metinleri gerçek ekranlardan (birebir; dar sahnede baştan kısalır): kayıt penceresi ve alanları, e-posta kodu, kart doğrulaması (tanışma teklifi kapalıyken ödeme), "Hesabınız hazır. Şimdi mağazanızı bağlayalım.", Satıcı Paneli yolu "Hesabım › Entegrasyon Bilgileri" ve etiketleri, bağlama formu ve düğmesi, "Mağazan bağlandı! Kurulum başlıyor...", kurulum alt yazısı, beş iş ve dönemleri. Anlatım olan tek satır "Bilgiler Trendyol'a soruluyor": gerçek formda ara yazı yok, sayfa yanıtı bekler. ══ */ .tadc { --tadc-egri: cubic-bezier(.2, .7, .2, 1); /* girişler: çabuk başlar, yumuşak oturur */ --tadc-yaz: cubic-bezier(.4, .1, .6, .9); /* yazma: neredeyse düz hız */ --tadc-boy: 312px; /* sahne */ --tadc-ust: 0px; /* sahne etiketi payı (yalnız tek sahnede) */ --tadc-aralik: 24px; } .tadc-giris { margin-top: 12px; } .tadc-filmler { display: grid; gap: 24px; margin-top: 32px; } /* ── Sahne kartı: açık bej zemin, içinde beyaz ekran parçaları (bölümün eski kartlarıyla aynı dil) ── */ .tadc-sahneler { position: relative; } .tadc-sahne { position: relative; height: var(--tadc-boy); overflow: hidden; border-radius: 16px; background: var(--tn-acik-2); container: tadc-sahne / inline-size; font-size: 12px; line-height: 16px; color: var(--tn-a-yazi); font-variant-numeric: tabular-nums; } /* Oynatıcı etiketi (yalnız tek sahnede): solda adım, sağda süresi; film oynarken iddia gözün önünde kalır */ .tadc-sahne__etiket { display: none; position: absolute; left: 16px; right: 16px; top: 14px; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--tn-a-yazi-2); white-space: nowrap; } .tadc-sahne__etiket > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tadc-sahne__no { margin-right: 8px; color: var(--tn-marka); } .tadc-sahne__sure { flex: none; font-weight: 400; color: var(--tn-a-yazi-3); } /* iddia hiç kesilmez (640 px'te "Yaklaşık 1 dak…" oluyordu) */ b.tadc-sahne__sure { font-weight: 600; color: var(--tn-a-yazi); } .tadc-pencere { position: absolute; border-radius: 10px; background: #fff; box-shadow: var(--tn-golge-acik); } .tadc-pencere__baslik { margin-bottom: 10px; font-size: 13px; line-height: 18px; font-weight: 600; } .tadc-kisa, .tadc-tam { display: none; } /* Form satırı: ad solda, kutu sağda (gerçek formların etiketleri) */ .tadc-alan { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); align-items: center; column-gap: 8px; } .tadc-alan + .tadc-alan { margin-top: 6px; } .tadc-alan__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 14px; color: var(--tn-a-yazi-3); } .tadc-girdi { position: relative; display: flex; align-items: center; min-width: 0; height: 28px; padding: 0 9px; overflow: hidden; border: 1px solid var(--tn-a-cizgi); border-radius: 6px; white-space: nowrap; } .tadc-girdi::after { content: ""; position: absolute; inset: -1px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--tn-a-yazi-2); opacity: 0; } /* 1 · Hesap: gerçek formun beş alanı yazılır (beyaz perde sağa çekilir, imleç önde), 6 haneli kod gelir, kart iyzico'da doğrulanır, tutar yazılmaz (tanışma teklifi kapalıyken ödeme iyzico ile). Yedi satır sahneye sığsın diye kutular 24 px. */ .tadc-hesap { left: 20px; right: 20px; top: calc(16px + var(--tadc-ust)); } .tadc-hesap .tadc-pencere__govde { padding: 10px 14px; } .tadc-hesap .tadc-alan + .tadc-alan { margin-top: 5px; } .tadc-hesap .tadc-girdi { height: 24px; } .tadc-hesap .tadc-durum { margin-top: 9px; padding-top: 8px; } .tadc-yaz { position: relative; display: inline-block; overflow: hidden; vertical-align: top; } .tadc-perde { position: absolute; top: 0; bottom: 0; left: 0; right: -2px; background: #fff; transform: translateX(101%); } .tadc-perde::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 1px; background: var(--tn-a-yazi); opacity: 0; } .tadc-kod { gap: .45em; } .tadc-kod i { display: inline-block; font-style: normal; } .tadc-durum { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--tn-a-cizgi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } /* Pencere başlık şeridi: hangi uygulamanın ekranı olduğu. TrendSatıcı pencerelerinde logo işareti; "Satıcı Paneli" maketi nötr (Trendyol markası, logosu, rengi yok). */ .tadc-pencere__ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 24px; padding: 0 12px; border-radius: 10px 10px 0 0; background: #F1EEE9; white-space: nowrap; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--tn-a-yazi-2); } .tadc-pencere__ust > span { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tadc-pencere__ust > span + span { font-weight: 400; color: var(--tn-a-yazi-3); } .tadc-pencere__ust img { flex: none; width: 12px; height: 12px; } /* 2 · Bağla: arkada Satıcı Paneli, önde TrendSatıcı formu; biri ötekinden kopyalanır. Değerler yazılmaz, yapıştırılır (anında belirir). */ .tadc-panel { left: 20px; right: 56px; top: calc(16px + var(--tadc-ust)); } .tadc-panel__govde { padding: 6px 12px; } .tadc-panel__satir { position: relative; display: grid; grid-template-columns: 6.4em minmax(0, 1fr); align-items: center; height: 18px; font-size: 11px; line-height: 14px; } .tadc-panel__satir > span:first-child { color: var(--tn-a-yazi-3); } .tadc-panel__satir::before { content: ""; position: absolute; top: 1px; bottom: 1px; left: -6px; right: -6px; border-radius: 4px; background: rgba(28, 25, 22, .07); opacity: 0; } .tadc-form { left: 56px; right: 20px; top: calc(100px + var(--tadc-ust)); } .tadc-form .tadc-pencere__govde { padding: 10px 12px 9px; } .tadc-form .tadc-alan + .tadc-alan { margin-top: 5px; } .tadc-form .tadc-girdi { height: 26px; } .tadc-form__dugme { display: flex; align-items: center; justify-content: center; height: 28px; margin-top: 8px; padding: 0 10px; border-radius: 8px; background: var(--tn-acik-2); white-space: nowrap; font-size: 11.5px; font-weight: 600; } .tadc-form .tadc-durum { margin-top: 6px; padding-top: 0; border-top: 0; font-size: 11.5px; } .tadc-yigin { display: grid; } .tadc-yigin > * { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tadc-sor { opacity: 0; font-weight: 400; color: var(--tn-a-yazi-3); } /* son hâlde yalnız "bağlandı" */ /* Kopyalanan değer: paneldeki değerin üstünden kalkar, forma iner (kaynağı yerinde kalır; kopya). Durağan konumu formdaki kutunun metni; hareket panelden buraya translate + scale (11 → 12 px). Son hâlde görünmez. */ .tadc-ucan { position: absolute; left: calc(25px + 8.4em); height: 20px; padding: 0 5px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 25, 22, .08), 0 4px 12px rgba(28, 25, 22, .16); font-size: 12px; line-height: 20px; white-space: nowrap; color: var(--tn-a-yazi); transform-origin: 5px 50%; opacity: 0; pointer-events: none; } .tadc-ucan--1 { top: 37px; } .tadc-ucan--2 { top: 68px; } .tadc-ucan--3 { top: 99px; } /* 3 · Kârını gör: kurulum ekranı (beş iş, gerçek sırası ve dönemleriyle), ardından bir siparişin net kârı */ .tadc-kurulum { left: 20px; right: 20px; top: calc(16px + var(--tadc-ust)); } .tadc-kurulum .tadc-pencere__govde { padding: 9px 14px 8px; } .tadc-kurulum__alt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 15px; color: var(--tn-a-yazi-3); } .tadc-bar { position: relative; display: block; height: 4px; margin: 9px 0 5px; overflow: hidden; border-radius: 2px; background: var(--tn-acik-2); } .tadc-bar__dolu { position: absolute; inset: 0; border-radius: 2px; background: var(--tn-a-yazi); transform-origin: 0 50%; } .tadc-isler { margin: 0; padding: 0; list-style: none; } .tadc-isler li { display: flex; align-items: center; gap: 6px; height: 21px; font-size: 11.5px; line-height: 14px; } .tadc-isler small { font-size: 11px; color: var(--tn-a-yazi-3); } .tadc-isler__vurgu span { font-weight: 600; } .tadc-tik { position: relative; width: 12px; height: 12px; margin-left: auto; flex: none; } .tadc-tik::before { content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 4px; border-left: 1.5px solid var(--tn-a-yazi); border-bottom: 1.5px solid var(--tn-a-yazi); transform: rotate(-45deg); } .tadc-siparis { left: 60px; right: 20px; top: calc(204px + var(--tadc-ust)); padding: 10px 12px 9px; } .tadc-siparis__ad { margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .tadc-siparis__satir { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; height: 19px; font-size: 11.5px; line-height: 19px; color: var(--tn-a-yazi-3); } .tadc-siparis__satir > span:last-child { white-space: nowrap; color: var(--tn-a-yazi); } .tadc-siparis__net { height: 24px; margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--tn-a-cizgi); font-size: 12px; line-height: 20px; font-weight: 600; color: var(--tn-a-yazi); } .tadc-siparis__net > span:last-child { font-size: 15px; letter-spacing: -0.01em; } /* adımın ödülü: sahnenin en iri rakamı */ .tadc-siparis__net small { margin-right: 8px; font-size: 11px; font-weight: 400; color: var(--tn-a-yazi-3); } /* Dar sahne (1024–1180 sütunu ve 360 altı telefon): uzun ekler düşer, ad sütunu daralır. Satır boyları px, kart boyu sabit. */ @container tadc-sahne (max-width: 330px) { .tadc-uzun { display: none; } .tadc-kisa { display: inline; } .tadc-alan { grid-template-columns: 7.6em minmax(0, 1fr); column-gap: 6px; } .tadc-hesap, .tadc-kurulum { left: 14px; right: 14px; } .tadc-panel { left: 14px; right: 40px; } .tadc-form { left: 40px; right: 14px; } .tadc-siparis { left: 44px; right: 14px; } .tadc-girdi { padding: 0 7px; } .tadc-ucan { left: calc(21px + 7.6em); } } /* Kurulum alt yazısı gerçek metniyle yalnız geniş sahneye sığar (297 px); orta genişlikte baştaki "Mağaza" düşer, dar sahnede yalnız "Birkaç dakika sürebilir." kalır */ @container tadc-sahne (min-width: 370px) { .tadc-tam { display: inline; } .tadc-tam-degil { display: none; } } /* Panel başlığındaki yol ("Hesabım ›") panel penceresi dar kalınca düşer; sayfa adı kalır */ @container tadc-sahne (max-width: 340px) { .tadc-yol { display: none; } } @container tadc-sahne (max-width: 300px) { .tadc-sahne__etiket { gap: 8px; font-size: 12px; } /* 640–690 px tabletinde sahne 272 px: ad ve süre birlikte sığsın */ .tadc-sahne__no { margin-right: 6px; } .tadc-hesap, .tadc-kurulum { left: 12px; right: 12px; } } /* ── Adımlar ve zaman çizgisi ── */ .tadc-liste { margin: 0; padding: 0; list-style: none; } /* Adım adı düğmesi (betik ekler; yalnız bir işe yaradığı düzende): tek sahnede o adımın sahnesini gösterir ya da oynatır, masaüstünde o filmi oynatır. Görünüşü başlığın kendisi; odak halkası sitenin ortak :focus-visible'ı. */ .tadc-ad__dugme { margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tadc-no { font-size: 15px; line-height: 24px; color: var(--tn-marka); font-variant-numeric: tabular-nums; } .tadc-ad { margin: 0; font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.015em; } .tadc-cumle { font-size: 15px; line-height: 21px; color: var(--tn-a-yazi-3); text-wrap: pretty; } .tadc-sure { font-size: 13px; line-height: 18px; color: var(--tn-a-yazi-3); } .tadc-sure b { font-weight: 600; color: var(--tn-a-yazi); } .tadc-cizgi { position: relative; display: block; height: 9px; } .tadc-cizgi::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--tn-acik-3); } .tadc-cizgi__dolu { position: absolute; left: 0; right: 0; top: 3px; height: 2px; overflow: hidden; } .tadc-cizgi__dolu::before { content: ""; position: absolute; inset: 0; background: var(--tn-a-yazi); transform-origin: 0 50%; } .tadc-cizgi__son { display: none; } /* Arka plan parçası kesikli: iz de kesikli, dolan çizgi soldan kayarak gelir (ölçeklense kesikler ezilirdi) */ .tadc-cizgi--arka::before { height: 0; background: none; border-top: 1px dashed var(--tn-a-yazi-3); } .tadc-cizgi--arka .tadc-cizgi__dolu::before { height: 0; background: none; border-top: 2px dashed var(--tn-a-yazi); } /* Telefon ve tablet: tek sahne ("oynatıcı"), altında adım satırları; satırın alt çizgisi o adımın zaman parçası */ @media (max-width: 1023.98px) { .tadc { --tadc-ust: 24px; --tadc-boy: 336px; } .tadc-sahneler { height: var(--tadc-boy); } .tadc-sahne { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; } .tadc-sahne__etiket { display: flex; } .tadc-sahneler:not([data-etkin]) .tadc-f2, .tadc-sahne.tadc-sahne--etkin { opacity: 1; } .tadc-adim { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "no ad sure" ". cumle cumle" "cizgi cizgi cizgi"; align-items: baseline; padding-top: 14px; } .tadc-no { grid-area: no; } .tadc-ad { grid-area: ad; font-size: 17px; } .tadc-cumle { grid-area: cumle; margin-top: 4px; font-size: 14px; line-height: 20px; } .tadc-sure { grid-area: sure; margin-left: 12px; white-space: nowrap; text-align: right; } .tadc-cizgi { grid-area: cizgi; height: 1px; margin-top: 14px; } .tadc-cizgi::before { top: 0; } .tadc-cizgi__dolu { top: 0; height: 1px; } .tadc-cizgi--arka .tadc-cizgi__dolu::before { border-top-width: 1px; } .tadc-adim { -webkit-tap-highlight-color: transparent; } } @media (max-width: 389.98px) { .tadc-sure__ek { display: none; } } /* dar telefonda adın yanına sığmaz (Kârını gör kırılırdı) */ @media (min-width: 640px) and (max-width: 1023.98px) { .tadc-filmler { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: center; margin-top: 40px; } .tadc-liste { align-self: center; } } @media (min-width: 640px) and (max-width: 799.98px) { .tadc-sure__ek { display: none; } } /* Masaüstü: üç sütun. Zaman çizgisi filmlerin hemen altından geçer (her parça üstündeki filmin oynatma çizgisi; sütun aralıklarından da geçer). Altında adım satırı: numara, ad ve sağda süresi; en altta tek cümle. Film → çizgisi → adı ve süresi → cümlesi tek birim okunur; düğme cümlelerin hemen ardından gelir. Satırlar ortak ızgarada (subgrid) hizalı. */ @media (min-width: 1024px) { .tadc-baslik, .tadc-giris { margin-inline: auto; text-align: center; } .tadc-giris { max-width: 800px; margin-top: 16px; } .tadc-filmler { gap: 16px; margin-top: 44px; } .tadc-sahneler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tadc-aralik); } .tadc-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--tadc-aralik); } .tadc-adim { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 0; align-items: baseline; grid-template-areas: "cizgi cizgi cizgi" "no ad sure" "cumle cumle cumle"; } .tadc-no { grid-area: no; margin-top: 14px; } .tadc-ad { grid-area: ad; margin-top: 14px; } .tadc-sure { grid-area: sure; margin: 14px 0 0 12px; white-space: nowrap; text-align: right; } .tadc-cumle { grid-area: cumle; margin-top: 6px; padding-right: 8px; } .tadc-cizgi { grid-area: cizgi; align-self: start; } .tadc-cizgi::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 9px; background: var(--tn-a-yazi-3); } .tadc-adim:not(:last-child) .tadc-cizgi { margin-right: calc(var(--tadc-aralik) * -1); } .tadc-cizgi__son { display: block; position: absolute; right: 0; top: 0; width: 1px; height: 9px; background: var(--tn-a-yazi-3); } .tadc-sahne { cursor: default; } } @media (min-width: 1280px) { .tadc-ad { font-size: 21px; line-height: 26px; } .tadc-no { line-height: 26px; } } @media (min-width: 1024px) and (max-width: 1179.98px) { .tadc-sure__ek { display: none; } } /* dar sütunda adın yanına sığmaz */ /* En dar masaüstü sütunu (~290 px): ad ile süre arasında nefes kalsın */ @media (min-width: 1024px) and (max-width: 1099.98px) { .tadc-adim { grid-template-columns: 28px minmax(0, 1fr) auto; } .tadc-ad { font-size: 18px; } } /* Eylem (düğme ve şart satırı) 22.10.2026'da kalktı: bölüm adımların cümleleriyle biter. */ /* ══ Hareket ══════════════════════════════════════════════════════════════════════════════════════════════════════ Her film kendi başlangıcından sayılır; filmdeki her animasyon film başında gecikmesiz başlar ve film boyunca sürer, bekleme ile hareket anahtar karelerdedir (zaman çizelgesi taslak aşamasındaki üreticiden: zaman.py). Ölçüm 20.10.2026: animation-delay ile kademeli başlayan animasyonlar kompozitörde koşsa da ana iş parçacığını 500 ms'de 9–30 kez stil hesabına uyandırıyordu; bu yapıda filmler boyunca 0. Filmin bütün animasyonları aynı anda biter; çizgi parçasının bitişi (tadc-cizgi-N) filmin son vuruşudur, sıradaki film o an başlar. Her filmin sonunda ~0,4 sn durgunluk var (göz sonucu okur). Toplam ≈ 10,9 sn; en uzun film, iddianın kendisi olan 2. F1 0–3,7: beş alan 0,15–1,83 (ad soyad, kullanıcı adı, e-posta, cep telefonu, şifre) · kod 1,95–2,5 · kart satırı 2,5 ("iyzico'da") · 2,8 ("doğrulandı") · "Hesabın hazır" 3,0 F2 0–4,0: üç kopyala/yapıştır 0,3 / 0,92 / 1,54 (satır vurgusu → değer kalkıp forma iner → kutu çerçevelenir) · düğme 2,25–2,66 · "soruluyor" 2,6–3,24 · "bağlandı" 3,24–3,52 (üst üste binmez) F3 0–3,2: çubuk 0,15–2,05 (beş iş, her biri çubuk oraya varınca) · sipariş 2,15 · net kâr 2,55 ══ */ /* Bekleme: sırası gelmemiş film boş kutu değil, kendi iskeleti soluk durur; altındaki adım yazısı da soluk */ .tadc-adim > :not(.tadc-cizgi) { transition: opacity .45s ease; } .tadc-adim.tadc-bekle > :not(.tadc-cizgi) { opacity: .5; } /* soluk ama okunur: göz önden okuyabilsin, odak yine oynayan filmde */ .tadc-bekle .tadc-alan__ad, .tadc-bekle .tadc-form__dugme, .tadc-bekle .tadc-kurulum__alt { opacity: .45; } .tadc-bekle .tadc-perde { transform: none; } .tadc-bekle :is(.tadc-kod i, .tadc-yapis, .tadc-tik, .tadc-siparis), .tadc-bekle.tadc-f1 .tadc-durum, .tadc-bekle .tadc-yigin > * { opacity: 0; } .tadc-bekle .tadc-panel { opacity: .55; } .tadc-bekle .tadc-isler li { opacity: .4; } .tadc-bekle .tadc-bar__dolu { transform: scaleX(0); } .tadc-bekle .tadc-cizgi__dolu::before { transform: scaleX(0); } .tadc-bekle .tadc-cizgi--arka .tadc-cizgi__dolu::before { transform: translateX(-100%); } /* ── ÜRETİLEN HAREKET (zaman çizelgesinden; elle düzenlenirse yüzde = an ÷ film süresi, film süreleri cizgi-N ile aynı) ── */ .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-alan__ad { animation: tadc-k1-00 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--1 .tadc-perde { animation: tadc-k1-01 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--1 .tadc-perde::before { animation: tadc-k1-02 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--2 .tadc-perde { animation: tadc-k1-03 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--2 .tadc-perde::before { animation: tadc-k1-04 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--3 .tadc-perde { animation: tadc-k1-05 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--3 .tadc-perde::before { animation: tadc-k1-06 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--4 .tadc-perde { animation: tadc-k1-07 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--4 .tadc-perde::before { animation: tadc-k1-08 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--5 .tadc-perde { animation: tadc-k1-09 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-yaz--5 .tadc-perde::before { animation: tadc-k1-10 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-kod i:nth-child(1) { animation: tadc-k1-11 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-kod i:nth-child(2) { animation: tadc-k1-12 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-kod i:nth-child(3) { animation: tadc-k1-13 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-kod i:nth-child(4) { animation: tadc-k1-14 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-kod i:nth-child(5) { animation: tadc-k1-15 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-kod i:nth-child(6) { animation: tadc-k1-16 3.7s linear both; } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-durum { animation: tadc-k1-19 3.7s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-panel { animation: tadc-k2-20 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan__ad { animation: tadc-k2-21 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-panel__satir:nth-child(1)::before { animation: tadc-k2-22 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-ucan--1 { animation: tadc-k2-23 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan:nth-of-type(1) .tadc-girdi::after { animation: tadc-k2-24 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan:nth-of-type(1) .tadc-yapis { animation: tadc-k2-25 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-panel__satir:nth-child(2)::before { animation: tadc-k2-26 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-ucan--2 { animation: tadc-k2-27 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan:nth-of-type(2) .tadc-girdi::after { animation: tadc-k2-28 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan:nth-of-type(2) .tadc-yapis { animation: tadc-k2-29 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-panel__satir:nth-child(3)::before { animation: tadc-k2-30 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-ucan--3 { animation: tadc-k2-31 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan:nth-of-type(3) .tadc-girdi::after { animation: tadc-k2-32 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form .tadc-alan:nth-of-type(3) .tadc-yapis { animation: tadc-k2-33 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-form__dugme { animation: tadc-k2-34 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-sor { animation: tadc-k2-35 4.0s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-bagli { animation: tadc-k2-36 4.0s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-kurulum__alt { animation: tadc-k3-37 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-bar__dolu { animation: tadc-k3-38 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(1) { animation: tadc-k3-39 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(1) .tadc-tik { animation: tadc-k3-40 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(2) { animation: tadc-k3-41 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(2) .tadc-tik { animation: tadc-k3-42 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(3) { animation: tadc-k3-43 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(3) .tadc-tik { animation: tadc-k3-44 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(4) { animation: tadc-k3-45 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(4) .tadc-tik { animation: tadc-k3-46 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(5) { animation: tadc-k3-47 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-isler li:nth-child(5) .tadc-tik { animation: tadc-k3-48 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-siparis { animation: tadc-k3-49 3.2s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-siparis__net { animation: tadc-k3-50 3.2s linear both; } @container tadc-sahne (max-width: 330px) { .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-ucan--1 { animation-name: tadc-k2-23-dar; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-ucan--2 { animation-name: tadc-k2-27-dar; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-ucan--3 { animation-name: tadc-k2-31-dar; } } .tadc-f1:is(.tadc-oyna, .tadc-yeniden) .tadc-cizgi__dolu::before { animation: tadc-cizgi-1 3.7s linear both; } .tadc-f2:is(.tadc-oyna, .tadc-yeniden) .tadc-cizgi__dolu::before { animation: tadc-cizgi-2 4.0s linear both; } .tadc-f3:is(.tadc-oyna, .tadc-yeniden) .tadc-cizgi__dolu::before { animation: tadc-cizgi-3 3.2s linear both; } @keyframes tadc-k1-00 { 0% { opacity: .45; animation-timing-function: ease; } 8.11% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k1-01 { 0% { transform: none; } 4.05% { transform: none; animation-timing-function: cubic-bezier(.4, .1, .6, .9); } 12.16% { transform: translateX(101%); } 100% { transform: translateX(101%); } } @keyframes tadc-k1-02 { 0% { opacity: 0; } 4.05% { opacity: 0; } 5.14% { opacity: 1; } 11.08% { opacity: 1; } 12.16% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k1-03 { 0% { transform: none; } 13.51% { transform: none; animation-timing-function: cubic-bezier(.4, .1, .6, .9); } 21.08% { transform: translateX(101%); } 100% { transform: translateX(101%); } } @keyframes tadc-k1-04 { 0% { opacity: 0; } 13.51% { opacity: 0; } 14.59% { opacity: 1; } 20% { opacity: 1; } 21.08% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k1-05 { 0% { transform: none; } 22.43% { transform: none; animation-timing-function: cubic-bezier(.4, .1, .6, .9); } 31.89% { transform: translateX(101%); } 100% { transform: translateX(101%); } } @keyframes tadc-k1-06 { 0% { opacity: 0; } 22.43% { opacity: 0; } 23.51% { opacity: 1; } 30.81% { opacity: 1; } 31.89% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k1-07 { 0% { transform: none; } 33.24% { transform: none; animation-timing-function: cubic-bezier(.4, .1, .6, .9); } 41.35% { transform: translateX(101%); } 100% { transform: translateX(101%); } } @keyframes tadc-k1-08 { 0% { opacity: 0; } 33.24% { opacity: 0; } 34.32% { opacity: 1; } 40.27% { opacity: 1; } 41.35% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k1-09 { 0% { transform: none; } 42.7% { transform: none; animation-timing-function: cubic-bezier(.4, .1, .6, .9); } 49.46% { transform: translateX(101%); } 100% { transform: translateX(101%); } } @keyframes tadc-k1-10 { 0% { opacity: 0; } 42.7% { opacity: 0; } 43.78% { opacity: 1; } 48.38% { opacity: 1; } 49.46% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k1-11 { 0% { opacity: 0; transform: translateY(4px); } 52.7% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 58.11% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k1-12 { 0% { opacity: 0; transform: translateY(4px); } 54.59% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 60% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k1-13 { 0% { opacity: 0; transform: translateY(4px); } 56.49% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 61.89% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k1-14 { 0% { opacity: 0; transform: translateY(4px); } 58.38% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 63.78% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k1-15 { 0% { opacity: 0; transform: translateY(4px); } 60.27% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 65.68% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k1-16 { 0% { opacity: 0; transform: translateY(4px); } 62.16% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 67.57% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k1-19 { 0% { opacity: 0; transform: translateY(4px); } 67.57% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 75.68% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k2-20 { 0% { opacity: .55; animation-timing-function: ease; } 7.5% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k2-21 { 0% { opacity: .45; animation-timing-function: ease; } 7.5% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k2-22 { 0% { opacity: 0; } 7.5% { opacity: 0; animation-timing-function: ease; } 10% { opacity: 1; } 18% { opacity: 1; animation-timing-function: ease; } 22.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-23 { 0% { opacity: 0; transform: translate(-84.4px, -92px) scale(.917); } 9.5% { opacity: 0; transform: translate(-84.4px, -92px) scale(.917); } 11% { opacity: 1; transform: translate(-84.4px, -92px) scale(.917); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 20% { opacity: 1; transform: none; animation-timing-function: ease; } 23% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes tadc-k2-23-dar { 0% { opacity: 0; transform: translate(-60.8px, -92px) scale(.917); } 9.5% { opacity: 0; transform: translate(-60.8px, -92px) scale(.917); } 11% { opacity: 1; transform: translate(-60.8px, -92px) scale(.917); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 20% { opacity: 1; transform: none; animation-timing-function: ease; } 23% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes tadc-k2-24 { 0% { opacity: 0; } 17.5% { opacity: 0; animation-timing-function: ease; } 20% { opacity: 1; } 25% { opacity: 1; animation-timing-function: ease; } 28.75% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-25 { 0% { opacity: 0; } 19% { opacity: 0; animation-timing-function: ease; } 21% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k2-26 { 0% { opacity: 0; } 23% { opacity: 0; animation-timing-function: ease; } 25.5% { opacity: 1; } 33.5% { opacity: 1; animation-timing-function: ease; } 38% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-27 { 0% { opacity: 0; transform: translate(-84.4px, -105px) scale(.917); } 25% { opacity: 0; transform: translate(-84.4px, -105px) scale(.917); } 26.5% { opacity: 1; transform: translate(-84.4px, -105px) scale(.917); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 35.5% { opacity: 1; transform: none; animation-timing-function: ease; } 38.5% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes tadc-k2-27-dar { 0% { opacity: 0; transform: translate(-60.8px, -105px) scale(.917); } 25% { opacity: 0; transform: translate(-60.8px, -105px) scale(.917); } 26.5% { opacity: 1; transform: translate(-60.8px, -105px) scale(.917); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 35.5% { opacity: 1; transform: none; animation-timing-function: ease; } 38.5% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes tadc-k2-28 { 0% { opacity: 0; } 33% { opacity: 0; animation-timing-function: ease; } 35.5% { opacity: 1; } 40.5% { opacity: 1; animation-timing-function: ease; } 44.25% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-29 { 0% { opacity: 0; } 34.5% { opacity: 0; animation-timing-function: ease; } 36.5% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k2-30 { 0% { opacity: 0; } 38.5% { opacity: 0; animation-timing-function: ease; } 41% { opacity: 1; } 49% { opacity: 1; animation-timing-function: ease; } 53.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-31 { 0% { opacity: 0; transform: translate(-84.4px, -118px) scale(.917); } 40.5% { opacity: 0; transform: translate(-84.4px, -118px) scale(.917); } 42% { opacity: 1; transform: translate(-84.4px, -118px) scale(.917); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 51% { opacity: 1; transform: none; animation-timing-function: ease; } 54% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes tadc-k2-31-dar { 0% { opacity: 0; transform: translate(-60.8px, -118px) scale(.917); } 40.5% { opacity: 0; transform: translate(-60.8px, -118px) scale(.917); } 42% { opacity: 1; transform: translate(-60.8px, -118px) scale(.917); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 51% { opacity: 1; transform: none; animation-timing-function: ease; } 54% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } } @keyframes tadc-k2-32 { 0% { opacity: 0; } 48.5% { opacity: 0; animation-timing-function: ease; } 51% { opacity: 1; } 56% { opacity: 1; animation-timing-function: ease; } 59.75% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-33 { 0% { opacity: 0; } 50% { opacity: 0; animation-timing-function: ease; } 52% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k2-34 { 0% { opacity: .45; transform: none; } 56.25% { opacity: .45; transform: none; animation-timing-function: ease; } 60% { opacity: 1; transform: none; animation-timing-function: ease; } 62.5% { opacity: 1; transform: scale(.96); animation-timing-function: ease; } 66.5% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k2-35 { 0% { opacity: 0; } 65% { opacity: 0; animation-timing-function: ease; } 68.5% { opacity: 1; } 78% { opacity: 1; animation-timing-function: ease; } 81% { opacity: 0; } 100% { opacity: 0; } } @keyframes tadc-k2-36 { 0% { opacity: 0; transform: translateY(3px); } 81% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 88% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k3-37 { 0% { opacity: .45; animation-timing-function: ease; } 9.37% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-38 { 0% { transform: scaleX(0); } 4.69% { transform: scaleX(0); } 64.06% { transform: none; } 100% { transform: none; } } @keyframes tadc-k3-39 { 0% { opacity: .4; } 16.56% { opacity: .4; animation-timing-function: ease; } 22.81% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-40 { 0% { opacity: 0; } 16.56% { opacity: 0; animation-timing-function: ease; } 22.81% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-41 { 0% { opacity: .4; } 28.44% { opacity: .4; animation-timing-function: ease; } 34.69% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-42 { 0% { opacity: 0; } 28.44% { opacity: 0; animation-timing-function: ease; } 34.69% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-43 { 0% { opacity: .4; } 40.31% { opacity: .4; animation-timing-function: ease; } 46.56% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-44 { 0% { opacity: 0; } 40.31% { opacity: 0; animation-timing-function: ease; } 46.56% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-45 { 0% { opacity: .4; } 52.19% { opacity: .4; animation-timing-function: ease; } 58.44% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-46 { 0% { opacity: 0; } 52.19% { opacity: 0; animation-timing-function: ease; } 58.44% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-47 { 0% { opacity: .4; } 64.06% { opacity: .4; animation-timing-function: ease; } 70.31% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-48 { 0% { opacity: 0; } 64.06% { opacity: 0; animation-timing-function: ease; } 70.31% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-k3-49 { 0% { opacity: 0; transform: translateY(10px); } 67.19% { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.2, .7, .2, 1); } 79.69% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } } @keyframes tadc-k3-50 { 0% { opacity: 0; } 79.69% { opacity: 0; animation-timing-function: ease; } 89.06% { opacity: 1; } 100% { opacity: 1; } } @keyframes tadc-cizgi-1 { 0% { transform: scaleX(0); } 100% { transform: none; } } @keyframes tadc-cizgi-2 { 0% { transform: scaleX(0); } 100% { transform: none; } } @keyframes tadc-cizgi-3 { 0% { transform: translateX(-100%); } 100% { transform: none; } } /* ── ÜRETİLEN HAREKET SONU ── */ /* Ekranda değil ya da sekme gizli: her şey yerinde durur */ .tadc-durak *, .tadc-durak *::before, .tadc-durak *::after { animation-play-state: paused !important; } /* Hareket azaltma: betik film sınıfı vermez (sayfa açılırken azaltılmışsa); sayfa açıkken açılırsa betik filmleri bitirir, burada da her şey son hâline atlar */ @media (prefers-reduced-motion: reduce) { .tadc-sahne, .tadc-adim > * { transition: none !important; } .tadc *, .tadc *::before, .tadc *::after { animation: none !important; } } /* ── Geçiş levhasında (grafit, 22.10.2026): filmlerin kutuları açık kalır (mobil uygulama kartları gibi: koyu zeminde açık kutu); kutuların dışındaki yazı, süre ve zaman çizgisi koyu zemin renklerine geçer. Düğme sitenin koyu zemin düğmesi (açık kapsül), şart satırı koyu zemin dipnotu. ── */ .tn-gecis .tadc-no { color: var(--tn-marka-gece); } .tn-gecis .tadc-cumle, .tn-gecis .tadc-sure { color: var(--tn-k-yazi-3); } .tn-gecis .tadc-sure b { color: var(--tn-beyaz); } .tn-gecis .tadc-cizgi::before { background: rgba(243, 239, 233, .18); } .tn-gecis .tadc-cizgi__dolu::before { background: var(--tn-beyaz); } .tn-gecis .tadc-cizgi--arka::before { background: none; border-top-color: var(--tn-k-yazi-4); } .tn-gecis .tadc-cizgi--arka .tadc-cizgi__dolu::before { background: none; border-top-color: var(--tn-beyaz); } @media (min-width: 1024px) { .tn-gecis .tadc-cizgi::after, .tn-gecis .tadc-cizgi__son { background: var(--tn-k-yazi-4); } }