/*
 * TrendSatıcı tanıtım sitesi — shopify.com dili (19.10.2026)
 * Şartname: _wf/dis-sayfa/10-shopify-dili-sartname.md (ölçüler shopify.com'dan ölçüldü: 10a/10b/10c raporları).
 * Kullanıcı: "Yönetim paneli gibi değil, tanıtım sitesi olacak; Shopify tarzı. Önceki denemeler ya çok basit ya çok AI."
 *
 * İlkeler: tonlu siyah sahne + üst üste binen 48 px köşeli levhalar; dev ama ince başlık (Inter 300/330); renk kromda
 * değil gerçek ürün ekranlarında; kapsül düğmeler, bölüm başına en çok bir dolu düğme; ikon kutusu, ışıma, nokta deseni,
 * degrade YOK; derinlik yalnız üst üste binmeyle (ekran kenardan taşar, telefon ekranın üstüne biner).
 * Ana sayfa (/landing; 28.10.2026, eski modda /tanitim) ve alt sayfaların çerçevesi kullanır (/baslat şimdilik dis-2026.css).
 * Önek: tn-. Açık/kapalı durum sınıfı: tn-gorunur
 * (tn-acik = açık zemin bağlamıdır, karıştırma).
 */

@font-face {            /* yazı tipi gelene kadar kayma olmasın (CLS): Inter ölçüsüne ayarlı yedek */
  font-family: "Inter Yedek"; src: local("Arial");
  size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%;
}

:root {
  /* Renk (20.10.2026, kullanıcı: "renkleri güzelleştir, canlı tonlar değil"): saf siyah ve saf beyaz yerine sıcak koyu
     antrasit ve kırık beyaz; turuncu kısık. Logonun kendi turuncusu (#f97316) yalnız logoda kalır, tek parlak vurgu odur. */
  /* Zemin */
  --tn-gece: #151311;   --tn-gece-2: #1D1A17;   --tn-gece-3: #28231F;
  --tn-levha: #F6F3EE;  --tn-acik-2: #ECE7E0;   --tn-acik-3: #DDD6CD;
  /* Yazı — koyu zeminde */
  --tn-beyaz: #F3EFE9; --tn-k-yazi-2: #D3CCC3; --tn-k-yazi-3: #A69D93; --tn-k-yazi-4: #7C736B;
  /* Yazı — açık zeminde */
  --tn-a-yazi: #1C1916; --tn-a-yazi-2: #4A433D; --tn-a-yazi-3: #665E57;
  /* Çizgi */
  --tn-k-cizgi: rgba(243, 239, 233, .10); --tn-a-cizgi: #E3DDD4;
  /* Marka (kısık): açık zeminde #B4541F, koyuda #E0864F (ikisi de AA) */
  --tn-marka: #B4541F; --tn-marka-gece: #E0864F;
  /* Gölge: yalnız üst üste binen öğelerde */
  --tn-golge-acik: 0 0 0 1px rgba(28, 25, 22, .07), 0 8px 8px rgba(28, 25, 22, .04), 0 4px 4px rgba(28, 25, 22, .04),
                   0 2px 2px rgba(28, 25, 22, .04);
  --tn-golge-gece: 0 0 0 1px rgba(243, 239, 233, .08), 0 24px 48px -12px rgba(0, 0, 0, .5);
  /* Kap: 1260 içerik + kenar (telefon 16, 640: 32, 1024: 48, 1440: 90 — Shopify 90 + 1260 + 90) */
  --tn-kenar: 16px;
  --tn-bar: 64px;
}
@media (min-width: 640px)  { :root { --tn-kenar: 32px; } }
@media (min-width: 1024px) { :root { --tn-kenar: 48px; } }
@media (min-width: 1200px) { :root { --tn-bar: 72px; } }
@media (min-width: 1440px) { :root { --tn-kenar: 90px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.tn {
  margin: 0; background: var(--tn-gece); color: var(--tn-beyaz); overflow-x: clip;
  font-family: Inter, "Inter Yedek", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.45; font-weight: 400;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:where(.tn) img { display: block; max-width: 100%; height: auto; }
:where(.tn) a { color: inherit; }
:where(.tn) :where(p, h1, h2, h3, ul) { margin: 0; }
:where(.tn) ul { padding: 0; list-style: none; }
.tn :focus-visible { outline: 2px solid var(--tn-beyaz); outline-offset: 3px; border-radius: 4px; }
.tn .tn-acik :focus-visible { outline-color: var(--tn-a-yazi); }
[id^="alan-"], #rakamlar, #mobil, #fiyat, #nasil-calisir, #sss, #bulten { scroll-margin-top: calc(var(--tn-bar) + 16px); }

.tn-kap { width: 100%; max-width: calc(1260px + 2 * var(--tn-kenar)); padding-inline: var(--tn-kenar); margin-inline: auto; }

/* ── Tipografi (telefon önce; 640 / 1024 / 1280). 20.10.2026: ince dev başlık tarzı kalktı (kullanıcı); bütün başlıklar
   ilk ekrandaki gibi dolgun Inter 700, sıkı harf aralığı; bölüm başlıkları ilk ekran başlığından küçük. ── */
.tn-h1 { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; max-width: 1000px; }
.tn-h2 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; max-width: 760px; }
.tn-giris { font-size: 18px; line-height: 25px; color: var(--tn-k-yazi-2); max-width: 560px; text-wrap: pretty; }
.tn-govde { font-size: 16px; line-height: 23px; color: var(--tn-k-yazi-3); max-width: 600px; text-wrap: pretty; }
.tn-dipnot { font-size: 13px; line-height: 19px; color: var(--tn-k-yazi-3); }
.tn-etiket { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--tn-marka-gece); }
.tn-dar { display: inline; } .tn-genis { display: none; }
@media (min-width: 640px) {
  .tn-h1 { font-size: 44px; line-height: 50px; letter-spacing: -0.03em; }
  .tn-h2 { font-size: 36px; line-height: 42px; }
  .tn-giris { font-size: 20px; line-height: 28px; }
  .tn-govde { font-size: 17px; line-height: 24px; }
  .tn-dar { display: none; } .tn-genis { display: inline; }
}
@media (min-width: 1024px) {
  .tn-h1 { font-size: 52px; line-height: 58px; }
  .tn-h2 { font-size: 44px; line-height: 50px; }
  .tn-govde { font-size: 18px; line-height: 25px; }
}
@media (min-width: 1280px) { .tn-h1 { font-size: 58px; line-height: 64px; } }

/* Açık bağlam (levha): yazı ve çizgiler çevrilir */
.tn-acik { color: var(--tn-a-yazi); }
.tn-acik .tn-giris { color: var(--tn-a-yazi-2); }
.tn-acik .tn-govde, .tn-acik .tn-dipnot { color: var(--tn-a-yazi-3); }
.tn-acik .tn-etiket { color: var(--tn-marka); }

/* ── Düğmeler: kapsül; koyuda beyaz dolu, açıkta siyah dolu; ikincil 1,5 px çerçeve.
   20.10.2026, kullanıcı: "bunları küçültelim", bardaki düğme için "bu iyi" → hepsi bar düğmesi ölçüsünde: 44 px / 16 px ── */
.tn-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--tn-beyaz); color: var(--tn-gece); text-decoration: none; white-space: nowrap;
  font-family: inherit; font-size: 16px; line-height: 22px; font-weight: 600;
  transition: background-color .15s ease;
}
.tn-dugme:hover { background: var(--tn-acik-3); }
.tn-dugme--kucuk { min-height: 44px; padding: 0 20px; font-size: 16px; }
.tn-dugme--cerceve { background: transparent; color: var(--tn-beyaz); box-shadow: inset 0 0 0 1.5px var(--tn-beyaz); }
.tn-dugme--cerceve:hover { background: rgba(255, 255, 255, .08); }
.tn-acik .tn-dugme { background: var(--tn-gece); color: var(--tn-beyaz); }
.tn-acik .tn-dugme:hover { background: #292524; }
.tn-acik .tn-dugme--cerceve { background: transparent; color: var(--tn-gece); box-shadow: inset 0 0 0 1.5px var(--tn-gece); }
.tn-acik .tn-dugme--cerceve:hover { background: rgba(13, 11, 10, .06); }
.tn-pilot { display: inline-flex; align-items: center; vertical-align: middle; font-style: normal; font-size: 12px; font-weight: 500;
  line-height: 20px; padding: 0 8px; border-radius: 9999px; background: rgba(255, 255, 255, .1); color: var(--tn-k-yazi-2); }
.tn-baglanti { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tn-baglanti:hover { color: var(--tn-k-yazi-2); }
@media (max-width: 639px) { .tn-dugme { font-size: 16px; } }

/* ══ Üst bar ══════════════════════════════════════════════
   İlk ekranın üstünde saydam; kaydırınca (ya da menü açılınca) #0D0B0A. Yükseklik telefon 64, masaüstü 72. */
.tn-bar { position: sticky; top: 0; z-index: 60; height: var(--tn-bar); color: var(--tn-beyaz); }
.tn-bar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tn-gece);
  opacity: 0; transition: opacity .2s ease;
}
.tn-bar--dolu::after, .tn-bar--menu::after { opacity: 1; }
.tn-bar--menu::after { transition: none; }
.tn-bar__ic { display: flex; align-items: center; gap: 24px; height: 100%; }
.tn-bar__logo { display: inline-flex; flex: none; border-radius: 6px; }
.tn-bar__logo img { width: auto; height: 32px; }
.tn-bar__nav { display: none; }
.tn-bar__sag { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tn-bar__giris { font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; padding: 10px 4px; }
.tn-bar .tn-bar__ana { display: none; }
.tn-bar__menu {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px;
  border: 0; background: none; color: var(--tn-beyaz); cursor: pointer; border-radius: 8px;
}
.tn-bar__menu svg { width: 24px; height: 24px; }
.tn-cent { width: 12px; height: 12px; flex: none; transition: transform .3s cubic-bezier(.215, .61, .355, 1); }

@media (min-width: 1200px) {
  .tn-bar__ic { gap: 40px; }
  .tn-bar__logo img { height: 36px; }
  .tn-bar__nav { display: block; height: 100%; }
  .tn-bar__liste { display: flex; align-items: center; gap: 28px; height: 100%; }
  .tn-bar__liste > li { height: 100%; display: flex; align-items: center; }
  .tn-bar__konum { position: relative; }
  .tn-bar__oge {
    display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0;
    border: 0; background: none; color: var(--tn-beyaz); cursor: pointer; text-decoration: none; white-space: nowrap;
    font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 400;
    transition: opacity .3s ease;
  }
  a.tn-bar__oge:hover { text-decoration: underline; text-underline-offset: 4px; }
  .tn-bar__oge[aria-expanded="true"] .tn-cent { transform: rotate(180deg); }
  .tn-bar--menu .tn-bar__oge:not([aria-expanded="true"]) { opacity: .5; }
  .tn-bar__sag { gap: 32px; }
  .tn-bar__giris { font-weight: 400; text-decoration: none; padding: 0; }
  .tn-bar__giris:hover { text-decoration: underline; }
  .tn-bar .tn-bar__ana { display: inline-flex; }
  .tn-bar__menu { display: none; }
}
/* 1200–1339: logo, beş öğe ve sağ taraf sığsın diye aralıklar daralır (1440'ta Shopify ölçüsü: 40 / 32 / 32) */
@media (min-width: 1200px) and (max-width: 1339px) {
  .tn-bar__ic { gap: 32px; }
  .tn-bar__logo img { height: 32px; }
  .tn-bar__liste { gap: 18px; }
  .tn-bar__sag { gap: 20px; }
}
@media (min-width: 1340px) { .tn-bar__liste { gap: 32px; } }

/* ── Özellikler mega paneli: tam genişlik koyu panel, bar ile tek yüzey ── */
.tn-mega, .tn-kucuk { display: none; }
@media (min-width: 1200px) {
  .tn-mega {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: -2;
    max-height: calc(90vh - var(--tn-bar)); overflow: hidden auto;
    background: var(--tn-gece); color: var(--tn-beyaz); border-bottom: 1px solid var(--tn-k-cizgi);
    transform: translateY(calc(-100% - 1px)); visibility: hidden;
    transition: transform .15s ease-in, visibility 0s linear .15s;
  }
  .tn-mega.tn-gorunur { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.215, .61, .355, 1); }
  .tn-mega__ic { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; column-gap: 40px; padding-block: 40px 32px; }
  .tn-mega__ic > * { opacity: 0; transform: translateY(-16px); transition: opacity .15s ease, transform .15s ease; }
  .tn-mega.tn-gorunur .tn-mega__ic > * { opacity: 1; transform: none; transition-duration: .3s; }
  .tn-mega.tn-gorunur .tn-mega__ic > :nth-child(2) { transition-delay: 50ms; }
  .tn-mega.tn-gorunur .tn-mega__ic > :nth-child(n+3) { transition-delay: 100ms; }

  /* Alan rayı */
  .tn-mega__ray { display: grid; align-content: start; margin-top: -12px; }
  .tn-mega__alan {
    position: relative; display: flex; align-items: center; height: 48px; padding: 0 0 0 16px;
    border: 0; background: none; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 16px; font-weight: 400; color: var(--tn-k-yazi-3);
    transition: color .15s ease;
  }
  .tn-mega__alan:hover, .tn-mega__alan[aria-selected="true"] { color: var(--tn-beyaz); }
  .tn-mega__alan[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 14px; width: 2px; height: 20px; background: var(--tn-beyaz); }

  /* Özellik ızgarası: bütün alan panelleri aynı hücrede (boy oynamaz) */
  .tn-mega__paneller { display: grid; }
  .tn-mega__panel { grid-area: 1 / 1; }
  .tn-mega__panel[hidden] { display: block; visibility: hidden; }
  .tn-mega__maddeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
  .tn-mega__madde { display: grid; align-content: start; gap: 2px; min-height: 64px; padding: 8px 12px; margin-inline: -12px;
    border-radius: 8px; text-decoration: none; transition: background-color .15s ease; }
  .tn-mega__madde:hover { background: rgba(255, 255, 255, .06); }
  .tn-mega__ad { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tn-beyaz); }
  .tn-mega__aciklama { font-size: 13px; line-height: 18px; color: var(--tn-k-yazi-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Yan sütun: seçili alanın canlı önizlemesi (aşağıda "Özellikler menüsünün yan sütunu"); zemin sağ kenara kadar */
  .tn-mega__yan { position: relative; padding-left: 40px; }
  .tn-mega__yan::before {
    content: ""; position: absolute; z-index: -1; top: -40px; bottom: 0; left: 0; right: calc(-1 * var(--tn-kenar) - 400px);
    background: var(--tn-gece-2); border-left: 1px solid rgba(255, 255, 255, .08);
  }
  .tn-mega__onizlemeler { display: grid; }
  .tn-mega__onizleme { grid-area: 1 / 1; display: grid; gap: 4px; align-content: start; padding-bottom: 32px;
    opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
  .tn-mega__onizleme.tn-secili { opacity: 1; visibility: visible; transition: opacity .15s ease; }

  /* Alt şerit: mobil uygulama, Chrome eklentisi, hesaplayıcı */
  .tn-mega__serit { grid-column: 1 / -1; display: grid; grid-template-columns: 260px repeat(3, minmax(0, 1fr)); column-gap: 40px;
    padding-top: 24px; border-top: 1px solid var(--tn-k-cizgi); }
  .tn-mega__serit-baslik { padding-top: 10px; }
  .tn-mega__serit a { display: grid; align-content: start; gap: 2px; text-decoration: none; padding: 8px 12px; margin-inline: -12px;
    border-radius: 8px; transition: background-color .15s ease; }
  .tn-mega__serit a:hover { background: rgba(255, 255, 255, .06); }
  .tn-mega__serit strong { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
  .tn-mega__serit a > span { font-size: 13px; line-height: 18px; color: var(--tn-k-yazi-3); }

  /* Kaynaklar: küçük açılır liste */
  .tn-kucuk {
    display: block; position: absolute; top: calc(100% - 8px); left: -20px; width: 320px; padding: 8px;
    background: var(--tn-gece-2); border-radius: 12px; box-shadow: var(--tn-golge-gece);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  }
  .tn-kucuk.tn-gorunur { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .2s ease; }
  .tn-kucuk a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
  .tn-kucuk a:hover { background: rgba(255, 255, 255, .06); }
  .tn-kucuk strong { font-size: 14px; line-height: 20px; font-weight: 500; }
  .tn-kucuk a > span { font-size: 13px; line-height: 18px; color: var(--tn-k-yazi-3); }
}

/* ══ Özellikler menüsünün yan sütunu (20.10.2026, kullanıcı: "hepsine ayrı tarzda bir şey"; taslak menu2/karma onaylandı).
   Her alan kendi tarzında, iskelet altısında ortak (tmk-):
     Kâr ve raporlar, Operasyon ve ekip: "akış" (logodan akan noktalar; tma-)
     Fiyat ve kampanya: "yazı" (büyük dolgun cümle + sayarak gelen fiyat; tmy-)
     Kargo ve hakediş, Buybox ve rakipler, Ürün ve müşteri: "sahne" (canlı mini sahne; tms-)
   Önizleme 260 × 270 px:
     0–20     üst satır: 13 px gri, anahtar kısım beyaz 500 (fiyatta yerini cümle alır)  | sağda "Örnek"
     32–132   tarzın kendi görseli (nokta, cümle ve iz, koli, fiyat etiketi, soru balonu)
     148–182  cevap: 28 px · 700 rakam, yanında isteğe bağlı 14 px anlam
     186–204  açıklama: 13 px gri (kargoda aynı satırda onay hapı)
     226      ince çizgi; 234–270 alt satır: alan adı + özellik sayısı
   Yazı ölçeği bütün sütunda beş boy: 28 · 17 · 14 · 13 · 12. Turuncu her alanda tek küçük vurgu.
   Hareket alan seçilince bir kez, yalnız transform/opacity; menü kapalıyken hiçbir şey çalışmaz; hareket
   azaltılmışta okunur son hâl durağan gelir. Rakamlar demo "örnek mağaza" verisi ("Örnek" işareti).
   Davranış: tanitim-2026.js §8. ══ */
/* ── Ortak iskelet (tmk-) ── */
.tmk-gizli { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1200px) {
  .tn-mega__onizleme.tmk { display: block; position: relative; height: 270px; padding: 0; }
  /* Alan değişiminde eski önizleme önce ve hızlı söner, yenisi 60 ms sonra gelir: iki alan üst üste binmez */
  .tn-mega__onizleme.tmk { transition: opacity .12s ease, visibility 0s linear .12s; }
  .tn-mega__onizleme.tmk.tn-secili { transition: opacity .18s ease .06s; }
  /* "Örnek": yan sütunun sağ üst köşesinde tek işaret; alan değişince yerinde kalır */
  .tmk-ornek { position: absolute; z-index: 3; top: 0; right: 0; height: 20px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; line-height: 20px; font-weight: 500; color: #A69D93; box-shadow: inset 0 0 0 1px rgba(243, 239, 233, .14);
    pointer-events: none; }
  /* Üst satır: sağda "Örnek"e 64 px yer bırakır */
  .tmk-ust { position: absolute; left: 0; right: 64px; top: 0; height: 20px; margin: 0; font-size: 13px; line-height: 20px;
    font-weight: 400; color: #A69D93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  .tmk-ust b { font-weight: 500; color: #F3EFE9; }
  /* Cevap: altı alanda aynı yükseklikte, aynı boyda */
  .tmk-cevap { position: absolute; left: 0; right: 0; top: 148px; }
  .tmk-sonuc { display: flex; align-items: baseline; gap: 8px; height: 34px; margin: 0; white-space: nowrap; }
  .tmk-rakam { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; color: #F3EFE9;
    font-variant-numeric: tabular-nums; }
  .tmk-anlam { font-size: 14px; line-height: 20px; font-weight: 500; color: #A69D93; }
  .tmk-aciklama { margin: 4px 0 0; height: 18px; font-size: 13px; line-height: 18px; color: #A69D93; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  /* Alt satır: alan adı ve özellik sayısı; tıklanınca bölüme gider. Metni raydaki son alanın hizasında. */
  .tn-mega__onizleme .tmk-alt { position: absolute; left: -10px; right: -10px; bottom: 0; display: flex; align-items: baseline;
    justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #F3EFE9;
    transition: background-color .15s ease; }
  .tn-mega__onizleme .tmk-alt::before { content: ""; position: absolute; left: 10px; right: 10px; top: -8px; height: 1px;
    background: rgba(243, 239, 233, .08); }
  .tn-mega__onizleme .tmk-alt:hover { background: rgba(243, 239, 233, .06); }
  .tn-mega__onizleme .tmk-alt strong { font-size: 14px; line-height: 20px; font-weight: 600; }
  .tn-mega__onizleme .tmk-alt span { font-size: 13px; line-height: 20px; color: #A69D93; }
}

/* ── Kâr ve raporlar, Operasyon ve ekip: "akis", logodan akan noktalar (tma-) ──
   İki alanın paylaştığı tek nokta alanı (48 nokta). Bu iki alandan biri seçiliyken alan görünür. Menü açılınca ya da
   başka tarzdaki bir alandan gelince noktalar önce logonun 11 noktası olarak turuncu belirir, sonra seçili alanın
   dizisine akar; kâr ile operasyon arasında aynı noktalar yeni diziye akar. Başka alana geçince nokta alanı önizlemeyle
   birlikte söner, ardından geçişsiz başa alınır. Renk değişimi üst üste iki katmanın (gri, turuncu) opaklığıyla. */
@media (min-width: 1200px) {
  .tma-alan { grid-area: 1 / 1; position: relative; height: 132px; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
  .tma-alan.tma-gorunur { opacity: 1; transition: opacity .18s ease .06s; }
  .tma-n {
    position: absolute; z-index: 2; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #3B3530;
    opacity: var(--a, 0); transform: translate(var(--tx, 120px), var(--ty, 54px)) scale(var(--s, .3));
    transition: transform var(--t, .52s) cubic-bezier(.2, .72, .22, 1) var(--d, 0ms), opacity var(--ta, .28s) ease var(--da, 0ms);
  }
  .tma-n::before, .tma-n::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    transition: opacity var(--tc, .3s) ease var(--dc, 0ms); }
  .tma-n::before { background: #5E554E; opacity: var(--g, 0); }
  .tma-n::after { background: #f97316; opacity: var(--o, 0); }
  .tma-durgun .tma-n, .tma-durgun .tma-n::before, .tma-durgun .tma-n::after { transition: none !important; }

  /* Önizleme: nokta alanının üstündeki etiketler (üst satır + turuncu sonucun adı) */
  .tma-etiketler { position: absolute; left: 0; top: 0; width: 100%; height: 132px; pointer-events: none; }
  .tma-et { position: absolute; font-size: 12px; line-height: 16px; font-weight: 500; color: #A69D93; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .tma-et--vurgu { color: #E0864F; }

  /* Zamanlama sınıfları (JS): tma-f1 dizi kuruldu, tma-f2 olay oynadı, tma-hazir rakam belirdi */
  .tma-js .tma-on .tmk-ust, .tma-js .tma-et { opacity: 0; transition: opacity .28s ease; }
  .tma-js .tma-f1 .tmk-ust, .tma-js .tma-f2 .tma-et--f2 { opacity: 1; transition-delay: var(--ed, 0ms); }
  .tma-js .tma-sayi, .tma-js .tma-satir { opacity: 0; transform: translateY(6px);
    transition: opacity .28s ease, transform .4s cubic-bezier(.2, .72, .22, 1); }
  .tma-js .tma-hazir .tma-sayi, .tma-js .tma-hazir .tma-satir { opacity: 1; transform: none; }
  .tma-js .tma-hazir .tma-satir { transition-delay: 60ms; }
  .tma-on.tma-durgun *, .tma-on.tma-durgun *::before { transition: none !important; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .tma-alan, .tma-n, .tma-n::before, .tma-n::after, .tma-js .tma-on .tmk-ust, .tma-js .tma-et, .tma-js .tma-sayi,
  .tma-js .tma-satir { transition: none !important; }
}

/* ── Fiyat ve kampanya: "yazi", büyük dolgun cümle + sayarak gelen rakam (tmy-) ──
   Durağan (sınıfsız) hâl = okunur son hâl. Cümle kelime kelime yükselir; ardından fiyat 2.899,00 ₺'den 3.750,12 ₺'ye
   tek, kesintisiz bir hareketle sayar ve marj izi aynı anda dolar; oturunca marj ve net kâr belirir. */
@media (min-width: 1200px) {
  /* paint yok: alt satırın üzerine gelme zemini önizlemeden 10 px taşar, kırpılmasın */
  .tn-mega__onizleme.tmy { contain: layout style; }
}
.tmy-cumle { margin: 0; height: 64px; font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--tn-beyaz); white-space: nowrap; }
.tmy-k { display: inline-block; overflow: hidden; vertical-align: top; padding: 4px 0 8px; margin: -4px 0 -8px; }
.tmy-k > span { display: inline-block; }

/* Marj izi: 0–%25 ölçeğinde; ince çizgi eski marjı (%4,7) gösterir, dolgu %20'ye uzar. Cevaba yakın durur. */
.tmy-iz { position: absolute; left: 0; right: 0; top: 124px; height: 2px; border-radius: 1px; background: rgba(243, 239, 233, .12); }
.tmy-katman { position: absolute; top: 0; bottom: 0; border-radius: 1px; background: var(--tn-beyaz); transform-origin: 0 50%; }
.tmy-isaret { position: absolute; top: -4px; width: 1px; height: 10px; margin-left: -.5px; background: rgba(243, 239, 233, .5); }
.tmy .tmy-anlam { color: #E0864F; }
.tmy-not { display: grid; }
.tmy-not > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.tmy-not__ilk { opacity: 0; }

/* Oynatma. tmy-bas: başlangıç (bir kare); tmy-oyna: CSS girişleri; tmy-once: rakam yerine oturana kadar
   anlam gizli ve ilk not görünür. tmy-once kalkınca anlam ve son not yumuşakça gelir. */
/* 135 %: alttaki satırın kelimesi beklerken ö/ü noktaları kırpma kutusunun (8 px alt pay) altından görünmesin */
@keyframes tmy-yuksel { from { transform: translateY(135%); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes tmy-belir { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.tmy.tmy-bas .tmy-k > span { transform: translateY(135%); opacity: 0; }
.tmy.tmy-bas .tmy-veri, .tmy.tmy-bas .tmy-iz { opacity: 0; }
.tmy.tmy-oyna .tmy-k > span { animation: tmy-yuksel .64s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--tmy-g, 0ms) + var(--i) * 55ms); }
.tmy.tmy-oyna .tmy-veri, .tmy.tmy-oyna .tmy-iz { animation: tmy-belir .42s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--tmy-g, 0ms) + 200ms); }
.tmy.tmy-once .tmy-anlam { opacity: 0; transform: translateX(-4px); }
.tmy.tmy-once .tmy-not__ilk { opacity: 1; }
.tmy.tmy-once .tmy-not__ilk + .tmy-not__son { opacity: 0; }
.tmy:not(.tmy-once) .tmy-anlam { transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
/* İki not üst üste karışmasın: önce eskisi söner, sonra yenisi gelir */
.tmy:not(.tmy-once) .tmy-not__ilk { transition: opacity .12s ease; }
.tmy:not(.tmy-once) .tmy-not__son { transition: opacity .24s ease .12s; }
@media (prefers-reduced-motion: reduce) {
  .tmy .tmy-k > span, .tmy .tmy-veri, .tmy .tmy-iz, .tmy .tmy-anlam { animation: none !important; transition: none !important;
    transform: none !important; opacity: 1 !important; }
  .tmy .tmy-not__ilk { opacity: 0 !important; }
  .tmy .tmy-not__son { opacity: 1 !important; }
}

/* ── Kargo ve hakediş, Buybox ve rakipler, Ürün ve müşteri: "sahne", canlı mini sahne (tms-) ──
   Sahne çerçevesiz: kart, kutu ya da pencere yok; çizim doğrudan yan sütun zeminine oturur.
   Varsayılan (sınıfsız) hâl = sahnenin SON hâli: hareket azaltılmışta, menü kapalıyken ve JS yokken okunur.
   .tms-oyna yalnız menü açıkken seçili sahneye eklenir. */
.tms {
  --tms-zemin: var(--tn-gece-2, #1D1A17);
  position: relative; height: 210px;
  color: #F3EFE9; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
  contain: layout paint;
}
.tms > * { position: absolute; }
.tms i, .tms em, .tms b { font-style: normal; }
.tms-k12 { display: block; font-size: 12px; line-height: 16px; color: #A69D93; }

/* Ortak kareler */
@keyframes tms-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes tms-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Kargo: koli 9 desiden 18 desiye uzar, fark belirir, itiraz metni kopyalanır */
.tms-g-koli { left: 0; top: 42px; width: 136px; height: 56px; }
.tms-g-koli > i { position: absolute; }
.tms-g-govde { left: 0; top: 0; width: 136px; height: 56px; border-block: 1.5px solid #A69D93; background: rgba(243, 239, 233, .05); transform-origin: left center; }
.tms-g-kapak { left: 0; top: 15px; width: 136px; height: 1px; background: rgba(243, 239, 233, .26); transform-origin: left center; }
.tms-g-fazla { left: 68px; top: 1.5px; width: 68px; height: 53px; background: rgba(224, 134, 79, .2); transform-origin: left center; }
.tms-g-ara { left: 68px; top: 1.5px; height: 53px; border-left: 1px dashed rgba(243, 239, 233, .45); }
.tms-g-etiket { left: 10px; top: 28px; width: 22px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(243, 239, 233, .32); }
.tms-g-sol, .tms-g-sag { top: 0; width: 1.5px; height: 56px; background: #A69D93; }
.tms-g-sol { left: 0; }
.tms-g-sag { left: 134.5px; }
.tms-g-girilen { left: 0; top: 104px; font-size: 12px; line-height: 16px; color: #A69D93; }
.tms-g-olcu { left: 152px; right: 0; top: 42px; }
.tms-g-olcu b { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.015em; }
.tms-g-yuzde { display: block; font-weight: 600; color: #E0864F; }
.tms-g-onay { left: 0; top: 182px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: 999px;
  background: #28231F; font-size: 12px; line-height: 16px; color: #D3CCC3; white-space: nowrap; }
.tms-g-onay svg { width: 14px; height: 14px; fill: none; stroke: #E0864F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tms-oyna .tms-g-govde, .tms-oyna .tms-g-kapak { animation: tms-g-buyu .9s cubic-bezier(.33, 1, .68, 1) both .5s; }
.tms-oyna .tms-g-fazla { animation: tms-g-fazla .9s cubic-bezier(.33, 1, .68, 1) both .5s; }
.tms-oyna .tms-g-sag { animation: tms-g-sag .9s cubic-bezier(.33, 1, .68, 1) both .5s; }
.tms-oyna .tms-g-ara { animation: tms-belir .3s ease both .5s; }
.tms-oyna .tms-g-yuzde { animation: tms-gir .35s ease both 1.3s; }
.tms-oyna .tms-g-sonuc { animation: tms-gir .35s ease both 1.25s; }
/* "fazla ödendi" sayma bitince gelir: rakam büyürken yanındaki yazı kaymaz */
.tms-oyna .tms-g-anlam { animation: tms-belir .3s ease both 2.0s; }
.tms-oyna .tms-g-onay { animation: tms-onay .45s cubic-bezier(.2, .8, .3, 1) both 2.1s; }
@keyframes tms-g-buyu { from { transform: scaleX(.5); } to { transform: none; } }
@keyframes tms-g-fazla { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tms-g-sag { from { transform: translateX(-68px); } to { transform: none; } }
@keyframes tms-onay { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Rakip: senin fiyat etiketin buybox'a kayar; kesiştiği yerde net kâr görünür */
.tms-r-eksen { left: 0; right: 0; top: 86px; height: 1px; background: rgba(243, 239, 233, .16); }
.tms-r-eski { left: 171.5px; top: 81px; width: 1px; height: 11px; background: rgba(243, 239, 233, .3); }
.tms-r-hap { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; white-space: nowrap;
  font-size: 12px; line-height: 16px; font-weight: 600; }
.tms-r-hap em { font-weight: 500; }
.tms-r-hap b { font-weight: 600; }
.tms-r-sen { left: 40px; top: 46px; }
.tms-r-sen .tms-r-hap { background: #F3EFE9; color: #151311; }
.tms-r-sen .tms-r-hap em { color: #665E57; }
.tms-r-sen > i { position: absolute; left: 12px; top: 22px; width: 1px; height: 18px; background: #F3EFE9; }
.tms-r-bb { left: 40px; top: 98px; }
.tms-r-bb .tms-r-hap { box-shadow: inset 0 0 0 1px rgba(243, 239, 233, .22); color: #D3CCC3; }
.tms-r-bb .tms-r-hap em { color: #A69D93; }
.tms-r-bb > i { position: absolute; left: 12px; top: -11px; width: 1px; height: 11px; background: rgba(243, 239, 233, .35); }
.tms-r-nokta { left: 49px; top: 83px; width: 7px; height: 7px; border-radius: 50%; background: #f97316; }

.tms-oyna .tms-r-sen { animation: tms-r-kay 1.4s cubic-bezier(.65, 0, .35, 1) both .45s; }
.tms-oyna .tms-r-nokta { animation: tms-pop .35s cubic-bezier(.3, 1.4, .6, 1) both 1.8s; }
.tms-oyna .tms-r-sonuc { animation: tms-gir .4s ease both 1.95s; }
@keyframes tms-r-kay { from { transform: translateX(120px); } to { transform: none; } }
@keyframes tms-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* İçerik: soru gelir, yanıt önerisi satır satır yazılır (imleç yalnız yazılan satırda). Yanıt kutusu cevap
   bandına kadar iner; alt kenarı öteki alanların açıklama satırıyla aynı hizada. */
.tms-i-soru { left: 0; top: 36px; max-width: 220px; padding: 8px 12px; border-radius: 10px 10px 10px 3px; background: #28231F; }
.tms-i-etk { right: 0; top: 92px; font-size: 12px; line-height: 16px; font-weight: 500; color: #E0864F; }
.tms-i-yanit { left: 36px; right: 0; top: 112px; padding: 12px; border: 1px dashed rgba(243, 239, 233, .24); border-radius: 10px 10px 3px 10px; }
.tms-i-yanit span { display: block; position: relative; width: fit-content; overflow: hidden; white-space: nowrap; line-height: 20px; color: #D3CCC3; }
.tms-i-yanit span::after { content: ""; position: absolute; inset: 0; background: var(--tms-zemin); transform: translateX(101%); }
.tms-i-yanit span::before { content: ""; position: absolute; z-index: 1; top: 2px; bottom: 2px; left: 0; width: 100%;
  border-left: 1.5px solid #E0864F; opacity: 0; }

.tms-oyna .tms-i-soru { animation: tms-soru .45s cubic-bezier(.2, .8, .3, 1) both .3s; }
.tms-oyna .tms-i-etk { animation: tms-belir .3s ease both .85s; }
.tms-oyna .tms-i-yanit { animation: tms-belir .3s ease both .9s; }
.tms-oyna .tms-i-yanit span::after { animation: tms-yaz .55s linear both; animation-delay: calc(1.1s + var(--g) * .6s); }
.tms-oyna .tms-i-yanit span::before { animation: tms-imlec .55s linear forwards; animation-delay: calc(1.1s + var(--g) * .6s); }
@keyframes tms-soru { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tms-yaz { from { transform: none; } to { transform: translateX(101%); } }
@keyframes tms-imlec {
  0%   { opacity: 1; transform: none; }
  95%  { opacity: 1; transform: translateX(95%); }
  100% { opacity: 0; transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .tms *, .tms *::before, .tms *::after { animation: none !important; }
}

/* ── Telefon menüsü: tam ekran, iki düzey ── */
.tn-tel { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--tn-gece); color: var(--tn-beyaz);
  opacity: 0; transition: opacity .25s ease; }
.tn-tel[hidden] { display: none; }
.tn-tel.tn-gorunur { opacity: 1; }
.tn-tel__ust { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 16px; flex: none; }
.tn-tel__ust img { width: auto; height: 32px; }
.tn-tel__ust .tn-bar__giris { margin-left: auto; }
.tn-tel__govde { position: relative; flex: 1; overflow: hidden; }
.tn-tel__duzey { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px;
  transition: opacity .25s ease, visibility 0s; }
.tn-tel__duzey[hidden] { display: block; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
/* Ana satırlar 22 px / 600 yerine 17 px / 500 (20.10.2026, kullanıcı: "yazılar bakışta büyük duruyor") */
.tn-tel__satir {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  padding: 0; border: 0; border-bottom: 1px solid var(--tn-k-cizgi); background: none; color: var(--tn-beyaz); text-align: left; cursor: pointer;
  font-family: inherit; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
}
.tn-tel__satir svg { width: 16px; height: 16px; color: var(--tn-k-yazi-3); }
.tn-tel__geri { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin-left: -4px; border: 0; background: none;
  color: var(--tn-k-yazi-2); cursor: pointer; font-family: inherit; font-size: 14px; padding: 0 4px; }
.tn-tel__geri svg { width: 16px; height: 16px; }
.tn-tel__alan { padding: 16px 0 28px; border-bottom: 1px solid var(--tn-k-cizgi); }
.tn-tel__alan + .tn-tel__alan { padding-top: 28px; }
.tn-tel__alan:last-child { border-bottom: 0; }
.tn-tel__alan .tn-etiket { display: block; margin-bottom: 8px; }
.tn-tel__madde { display: grid; gap: 2px; padding: 10px 0; text-decoration: none; }
.tn-tel__madde strong { font-size: 16px; line-height: 22px; font-weight: 500; }
.tn-tel__madde span { font-size: 14px; line-height: 19px; color: var(--tn-k-yazi-3); }
.tn-tel__alt { flex: none; display: grid; gap: 12px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tn-k-cizgi); }
.tn-tel__alt .tn-dugme { width: 100%; min-height: 48px; font-size: 16px; }
body.tn-kilit { overflow: hidden; }
@media (min-width: 1200px) { .tn-tel, .tn-tel[hidden] { display: none; } }

/* ══ İlk ekran (20.10.2026): yazı solda; sağda panel ana sayfasının canlı görünümü "Nefes" (canli-nefes.js), örnek
   siparişlerle. Panel ekran görüntüsü yok. Telefonda ve tablette (28.10.2026) canlı logo başlığın sağında, yazının
   arkasında ve soluk (aşağıda). ══ */
.tn-hero { position: relative; z-index: 1; margin-top: calc(-1 * var(--tn-bar)); padding: calc(var(--tn-bar) + 40px) 0 64px;
  background: var(--tn-gece); overflow: hidden; overflow: clip; }   /* hidden: clip'i tanımayan eski Safari (iOS 15) için yedek */
.tn-hero__metin { position: relative; z-index: 2; max-width: 640px; }
/* Başlık (22.10.2026, kullanıcı shopify.com/tr ilk ekranını gösterdi: "yazı fontu stili aynı"): Inter ince ve büyük —
   telefonda 330, masaüstünde 300; satır aralığı 1,06; sıkı harf ve kelime aralığı (shopify.com: 56 / 70 / 96 px). İki satır:
   sabit "Bir bakışta" + akan ifade (_tanitim.html hero). Telefonda boy ekran genişliğinden: en uzun ifade ("Buybox
   durumun") 320 px'te de tek satıra sığar. Öbür bölüm başlıkları dolgun 700 kalır. */
.tn-hero .tn-h1 { font-size: min(52px, calc((100vw - 32px) / 7.2)); line-height: 1.06; font-weight: 330; letter-spacing: -0.02em;
  word-spacing: -0.04em; text-wrap: initial; max-width: none; }
.tn-akan__sabit { display: block; }
.tn-akan__akis { display: grid; }
.tn-akan__ifade { grid-area: 1 / 1; white-space: nowrap; }
.tn-akan__maske { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.tn-akan__kelime { display: inline-block; }
.tn-akan__akis:not(.tn-akan--js) .tn-akan__ifade:not(.tn-akan__ifade--etkin) { visibility: hidden; }
.tn-akan--js .tn-akan__kelime { transform: translateY(110%); opacity: 0; transition: transform .45s cubic-bezier(.5, 0, .5, 1),
  opacity .45s cubic-bezier(.5, 0, .5, 1); transition-delay: calc(var(--k) * .15s); }
.tn-akan--js .tn-akan__ifade--etkin .tn-akan__kelime { transform: none; opacity: 1; }
.tn-akan--js .tn-akan__ifade--cikis .tn-akan__kelime { transform: translateY(-110%); opacity: 0; }
.tn-akan--js .tn-akan__ifade--sifir .tn-akan__kelime { transition: none; }
.tn-gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tn-hero .tn-giris { margin-top: 24px; max-width: 30em; font-size: 17px; line-height: 26px; }
.tn-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 639px) { .tn-dugmeler { gap: 12px; } .tn-dugmeler .tn-dugme { width: 100%; } }
@media (min-width: 640px) {
  .tn-dugmeler { margin-top: 36px; }
  .tn-hero .tn-h1 { font-size: 64px; letter-spacing: -0.022em; }
  .tn-hero .tn-giris { font-size: 19px; line-height: 28px; }
}
.tn-nefes { position: relative; margin-top: 32px; }
/* Telefonda ve tablette (28.10.2026, kullanıcı: "alta böyle durması sayfayı bozuyor"; iki taslaktan A seçildi): canlı logo
   düğmelerin altında ayrı blok değil; başlığın sağında, yazının arkasında (yazı z-index 2) ve soluk, bir kısmı ekranın
   sağ kenarında kesilir (.tn-hero overflow: clip). Özellik kartı yok (aşağıda .tn-ozkart-alan). Düğmelerle sonraki levha
   arasında 48 px görünür boşluk (levha 32 px yukarı biner; sayfanın öteki levha geçişleriyle aynı). Boy genişlikten
   (bileşenin telefon düzeni, 1,7 / 1); logonun halkası başlık bandında kalır, alt yazıya inmez (halkanın altı ≈ üst +
   0,544 × genişlik). Yatay yeri §12 verir; betik yoksa sağ kenarda. */
@media (max-width: 1023.98px) {
  .tn-hero { padding-bottom: 80px; }
  .tn-hero > .tn-nefes { --tn-nefes-g: clamp(260px, 78vw, 340px); position: absolute; z-index: 1; top: calc(var(--tn-bar) - 18px);
    right: calc(var(--tn-nefes-g) * -.38); width: var(--tn-nefes-g); margin: 0; opacity: .55;
    transform: translateX(var(--tn-nefes-x, 0px)); }
  /* İfade değişince başlığın bitişini izler (tanitim-2026.js §12): kelime geçişiyle aynı eğri, iki kelimelik ifadenin
     süresi (0,45 sn + 0,15 sn) */
  .tn-hero > .tn-nefes.tn-nefes--kayar { transition: transform .6s cubic-bezier(.5, 0, .5, 1); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .tn-hero > .tn-nefes { --tn-nefes-g: 360px; top: calc(var(--tn-bar) - 6px); }   /* 64 px başlık: halka 74–254 px, alt yazı 264 px'te */
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .tn-hero > .tn-nefes.tn-nefes--kayar { transition: none; }
}
@media (min-width: 1024px) {
  /* Yazı bloğu ilk ekranın altına yaslı (22.10.2026, shopify.com/tr gibi: başlık ortanın biraz altından başlar, düğmeler
     alttaki levhanın ~100 px üstünde) */
  .tn-hero { display: flex; align-items: flex-end; min-height: 780px; padding: calc(var(--tn-bar) + 48px) 0 152px; }
  .tn-hero > .tn-kap { flex: 1; }
  .tn-hero__metin { max-width: 640px; }
  .tn-hero .tn-h1 { font-size: 76px; font-weight: 300; letter-spacing: -0.025em; }
  .tn-nefes { position: absolute; left: 0; right: 0; top: var(--tn-bar); bottom: 48px; margin: 0; }
  .tn-nefes.tsc--sag { height: auto; }   /* bileşenin height:100%'ü yerine üst/alt sınır: lejant sonraki levhanın altında kalmasın */
}
@media (min-width: 1280px) { .tn-hero .tn-h1 { font-size: 88px; } .tn-hero .tn-giris { font-size: 20px; } }

/* Logodan açılan özellik kartı: logonun bir noktasından daire olarak büyür, bir süre durur, yavaşça noktaya geri kapanır.
   Yalnız masaüstünde, ilk ekranın üstünde serbest konumlu. Telefonda ve tablette yok (28.10.2026: logonun altındaki ayrılmış
   yer kart yokken boş kalıyor, açılış dairesi logodan uzakta yarım ay gibi görünüyordu; logo artık yazının arkasında). */
.tn-ozkart-alan { display: none; }
.tn-ozkart { position: absolute; left: 0; top: 0; width: 232px; padding: 14px 16px 15px; pointer-events: auto;
  border-radius: 16px; background: var(--tn-gece-3); box-shadow: var(--tn-golge-gece); color: var(--tn-beyaz); text-decoration: none; }
.tn-ozkart__alan { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--tn-k-yazi-3); }
.tn-ozkart__alan i { width: 8px; height: 8px; border-radius: 50%; background: #f97316; }
.tn-ozkart__ad, .tn-ozkart__aciklama { display: block; }
.tn-ozkart__ad { margin-top: 6px; font-size: 15px; line-height: 20px; font-weight: 600; }
.tn-ozkart__aciklama { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--tn-k-yazi-2); }
@media (min-width: 1024px) {
  .tn-ozkart-alan { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }   /* kart 232 px: bileşenin kartına (212) yakın, logoya binmesin */
}

/* Nefes koyu zeminde: bileşenin açık zemin renkleri yalnız bu sayfada CSS ile çevrilir (bileşen dosyalarına dokunulmaz).
   Boş yankı noktaları koyu gri; sipariş tonları sıcak griden kısık turuncuya (bugün → son 1 saat → son 15 dk); küre yok,
   ışıma çok hafif. */
.tn-nefes .tsc { color: var(--tn-k-yazi-2); }
.tn-nefes { pointer-events: none; }   /* fareden kaçma kapalı: her karede yüzlerce noktayı yeniden hesaplatıyordu (kasma) */
.tn-nefes .tsc-sahne { background: transparent; }
.tn-nefes .tsc-kure, .tn-nefes .tsc-kure--bant { background: none; }   /* koyu zeminde kürenin kenarı çizgi gibi görünüyordu */
.tn-nefes .tsc-isima { background: radial-gradient(circle closest-side, rgba(249, 115, 22, .09) 0, rgba(249, 115, 22, .045) 40%, rgba(249, 115, 22, 0) 100%); }
.tn-nefes .tsc-zemin canvas { opacity: .1; }
.tn-nefes circle[fill="#ebe4de"] { fill: #3B3530; }
.tn-nefes circle[fill="#eee8e3"] { fill: #37312D; }
.tn-nefes circle[fill="#f1ece7"] { fill: #332E2A; }
.tn-nefes circle[fill="#f3efeb"] { fill: #2F2A27; }
.tn-nefes circle[fill="#fdd5b9"] { fill: #5E554E; }
.tn-nefes circle[fill="#fcbe94"] { fill: #A06B4B; }
.tn-nefes circle[fill="#fb9b5e"] { fill: #E2884F; }
.tn-nefes circle[fill="#fee9da"], .tn-nefes circle[fill="#fff4ec"] { fill: rgba(249, 115, 22, .16); }
/* Başlık satırı ("Canlı · Bugün N sipariş"), "Örnek veri" etiketi ve lejant ("1 nokta = n sipariş · 15 dk · 1 saat ·
   bugün") tanıtımda gösterilmez (kullanıcı kararı, 20.10.2026). Örnek olduğu, açılan sipariş kartındaki "Örnek" ile söylenir. */
.tn-nefes .tsc-bas, .tn-nefes .tsc-ornek, .tn-nefes .tsc-lejant { display: none; }
.tn-nefes .tsc-kart-ornek { background: rgba(243, 239, 233, .08); color: var(--tn-k-yazi-3); }
.tn-nefes .tsc-kart { background: var(--tn-gece-3); box-shadow: var(--tn-golge-gece); }
/* Bileşenin sipariş kartı tanıtımda görünmez (kullanıcı: "sipariş yerine özelliklerimiz yazsın"); yerine .tn-ozkart.
   visibility (display değil): bileşenin kart yerleştirme ölçümü bozulmasın. Telefonda kartın altta ayırdığı yer de kalkar. */
.tn-nefes .tsc-kart { visibility: hidden !important; }
.tn-nefes .tsc-kart-alt { display: none; }
.tn-nefes .tsc-kart-ust b, .tn-nefes .tsc-tutar { color: var(--tn-beyaz); }
.tn-nefes .tsc-kart-alt-satir { color: var(--tn-k-yazi-3); }
.tn-nefes .tsc-canli { box-shadow: 0 0 0 3px rgba(249, 115, 22, .18); }

.tn-telefon {
  --tel-g: 150px; position: absolute; z-index: 2; width: var(--tel-g); aspect-ratio: 248 / 520;
  padding: calc(var(--tel-g) * .04); border-radius: calc(var(--tel-g) * .177);
  background: #1C1917; box-shadow: var(--tn-golge-gece), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.tn-telefon__ekran { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--tel-g) * .145); background: #F7F7F7;
  padding-top: calc(var(--tel-g) * .13); }
.tn-telefon__ekran::before { content: ""; position: absolute; top: calc(var(--tel-g) * .035); left: 50%; width: 34%;
  height: calc(var(--tel-g) * .075); transform: translateX(-50%); border-radius: 9999px; background: #000; }
/* ══ Levhalar: yuvarlak üst kenarla bir öncekinin üstüne biner (telefonda 32, masaüstünde 48) ══ */
.tn-levha { position: relative; z-index: 2; margin-top: -32px; border-radius: 32px 32px 0 0; padding: 56px 0 80px; }
.tn-levha--acik { background: var(--tn-levha); }
.tn-levha--grafit { background: var(--tn-gece-2); }
.tn-levha--gece { background: var(--tn-gece); }
@media (min-width: 1024px) { .tn-levha { margin-top: -48px; border-radius: 48px 48px 0 0; padding: 96px 0 128px; } }

/* ══ 22.10.2026: "Satış var. Peki kâr?" şeridi kalktı; yerine aynı grafit geçiş levhasında "Üç adımda başla." (gece →
   grafit → açık). Bölümün koyu zemin renkleri tanitim-adimlar-2026.css'te (.tn-gecis). Fiyat artık son levhanın ilk
   bölümü: üst boşluğu levhanın kendi payı. ══ */
.tn-kap > .tn-fiyat:first-child { margin-top: 0; }

/* ══ Alan bölümü: etiket + başlık + giriş; video (2/3) ve yanında ikonsuz özellik listesi (1/3) ══ */
.tn-alan + .tn-alan { margin-top: 96px; }
.tn-alan .tn-etiket { margin-bottom: 16px; }
.tn-alan .tn-giris, .tn-h2 + .tn-giris { margin-top: 16px; }
.tn-alan__izgara { display: grid; gap: 32px; margin-top: 40px; }
.tn-alan__liste.tn-ozellik-liste--tek { margin-top: 0; }
/* Kart düzeni (Telefonda ve Trendyol panelinde bölümü) */
.tn-izgara { display: grid; gap: 40px; margin-top: 40px; }
.tn-medya { display: flex; flex-direction: column; min-width: 0; }
.tn-medya__kutu { position: relative; overflow: hidden; border-radius: 16px; background: var(--tn-acik-2); }
.tn-medya__baslik { margin-top: 16px; font-size: 17px; line-height: 22px; font-weight: 500; }
.tn-medya__metin { margin-top: 6px; }
@media (min-width: 1024px) {
  .tn-alan + .tn-alan { margin-top: 128px; }
  .tn-alan .tn-giris, .tn-h2 + .tn-giris { margin-top: 24px; }
  .tn-alan__izgara { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 48px; margin-top: 56px; align-items: start; }
  .tn-alan__izgara--sag { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .tn-alan__izgara--sag > .tn-video { order: 2; }
  .tn-izgara { gap: 0 24px; margin-top: 56px; }
  .tn-izgara--11 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-medya__kutu { border-radius: 24px; }
  .tn-medya__baslik { margin-top: 24px; font-size: 20px; line-height: 26px; }
}

/* ══ Video kutusu: 16:9, yer baştan ayrılır (poster aynı oranda, yerleşim kaymaz); sağ altta oynat / duraklat ══ */
.tn-video { margin: 0; min-width: 0; }
.tn-video__kutu { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #1D1A17;
  contain: layout paint; transform: translateZ(0); }   /* kendi katmanı: video karesi değişince sayfanın geri kalanı yeniden boyanmaz */
.tn-acik .tn-video__kutu { box-shadow: 0 0 0 1px rgba(28, 25, 22, .06), 0 18px 40px -18px rgba(28, 25, 22, .35); }
.tn-levha--grafit .tn-video__kutu { box-shadow: 0 0 0 1px rgba(243, 239, 233, .07); }
.tn-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1D1A17; }
/* Oynat / duraklat düğmesi (20.10.2026, kullanıcı: "ekranda durdur tuşu öyle görünmesin"): video oynarken ve
   kendiliğinden başlamayı beklerken görünmez; fareyle videonun üstüne gelince, klavyeyle odaklanınca ya da video
   durdurulmuşken (kullanıcı durdurdu, hareket azaltma, tarayıcı engelledi) görünür. Videoya tıklamak da oynatır / durdurur. */
.tn-video video { cursor: pointer; }
.tn-video__dugme { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: #F3EFE9; background: rgba(21, 19, 17, .62);
  box-shadow: 0 0 0 1px rgba(243, 239, 233, .14); opacity: 0; transition: opacity .2s ease, background-color .15s ease; }
.tn-video__dugme[data-durum="durdu"], .tn-video__dugme:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .tn-video__kutu:hover .tn-video__dugme { opacity: 1; } }
.tn-video__dugme:hover { background: rgba(21, 19, 17, .86); }
.tn-video__dugme svg { width: 18px; height: 18px; }
.tn-video__dugme[data-durum="oynuyor"] .tn-video__oynat, .tn-video__dugme:not([data-durum="oynuyor"]) .tn-video__durdur { display: none; }
.tn-video__dugme:focus-visible { outline: 2px solid #F3EFE9; outline-offset: 2px; }
.tn-video figcaption .tn-medya__baslik { margin-top: 16px; }
@media (min-width: 1024px) {
  .tn-video__kutu { border-radius: 24px; }
  .tn-video__dugme { right: 16px; bottom: 16px; }
  .tn-video figcaption .tn-medya__baslik { margin-top: 24px; }
}

.tn-ozellik-liste { display: grid; gap: 0 24px; margin-top: 48px; }
.tn-ozellik-liste li { padding: 16px 0 20px; border-top: 1px solid var(--tn-k-cizgi); }
.tn-acik .tn-ozellik-liste li { border-top-color: var(--tn-a-cizgi); }
.tn-ozellik-liste strong { display: block; font-size: 16px; line-height: 22px; font-weight: 500; }
.tn-ozellik-liste span { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--tn-k-yazi-3); }
.tn-acik .tn-ozellik-liste span { color: var(--tn-a-yazi-3); }
@media (min-width: 640px) { .tn-ozellik-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tn-ozellik-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; } }

/* ══ Koyu bağlam: açık levhanın içindeki koyu kart (fiyat planı) ══ */
.tn-koyu { color: var(--tn-beyaz); }
.tn-acik .tn-koyu .tn-dipnot { color: var(--tn-k-yazi-3); }
.tn-acik .tn-koyu .tn-etiket { color: var(--tn-marka-gece); }
.tn-acik .tn-koyu .tn-dugme { background: var(--tn-beyaz); color: var(--tn-gece); }
.tn-acik .tn-koyu .tn-dugme:hover { background: var(--tn-acik-3); }
.tn-acik .tn-koyu :focus-visible { outline-color: var(--tn-beyaz); }

/* ══ Rakam bandı · "Tek anlatı şeridi" (20.10.2026, kullanıcı C'yi seçti; taslak static/taslak/rakam/c.html, önek trc-) ══
   Üç rakam tek hikâye, soldan sağa: mağaza bağlanır, son 30 günün siparişleri listeye akar (30 gün) → içlerinden bir
   sipariş öne çıkar, 7 kalem ondan sırayla düşülür, net kâr kalır (7) → aynı siparişteki rakipli ürünün buybox'ı
   30 dakikada bir kontrol edilir; rakipsiz ürün 4 saatte bir (30 dk). Sahne üç bölmeli tek koyu kart, her bölmenin
   altında kendi rakamı; bölme işini bitirince rakamı belirginleşir. Nokta, grafik, sayan rakam yok: panelin kendi
   yazı dili (liste satırı, döküm, zaman cetveli). Şablon: _tanitim.html rakam_bandi; davranış: tanitim-2026.js §9.
   Örnek veri demo mağazadan: 4.098,00 ₺'lik sipariş (Airfryer 5,5 L + nevresim takımı, net +345,52 ₺, %8,4) ve buybox
   listesindeki Airfryer (3 rakip, buybox 2.403,26 ₺). Ekstra gider bu siparişte girilmemiş: 0,00 ₺.
   Son hâl CSS'in kendisidir (JS yoksa ya da hareket azaltılmışsa görünen hâl). JS bölmeye sınıf verir:
   .trc-bekle (sırası gelmedi: bölme boş değil, iskeleti soluk) · .trc-oyna (ilk akış) · .trc-yeniden (fareyle tekrar) ·
   .trc-bitti · .trc-durak (bölme ekranda değil ya da sekme gizli: bütün animasyonlar durur) · .trc-gec / .trc-yandi
   (bölme ekranda yok ama rakamı ekranda: rakam 0,6 sn sonra belirginleşir, öyle kalır). Zaman yalnız CSS'te; JS
   zamanlayıcı kullanmaz, animationstart / animationend olaylarıyla ilerler. Yalnız transform ve opacity canlanır.
   Teknik denetim 20.10.2026: her animasyon kompozitörde koşsun diye görünür değişikliği olmayan zamanlama öğesi
   (.trc-son, opacity 1→1) ve 1 ms'lik tutucu animasyon kaldırıldı; ikisi de ana iş parçacığında her kare stil
   hesabı yaptırıyordu. Bölmenin son vuruşu artık bölmedeki son CSS animasyonunun bitişidir. ══ */
.trc {
  --trc-ic: 16px; --trc-ust: 16px; --trc-boy: 236px;
  --trc-rh: 28px;                                     /* liste satırı */
  --trc-kh: 20px;                                     /* döküm satırı */
  --trc-cizgi: rgba(243, 239, 233, .08);
  --trc-egri: cubic-bezier(.2, .7, .2, 1);            /* girişler: çabuk başlar, yumuşak oturur */
  --trc-akis-egri: cubic-bezier(.3, 0, .1, 1);        /* sipariş akışı: hemen kalkar, uzun yavaşlayıp bugünde durur */
}
.trc-adimlar { display: grid; gap: 40px; margin-top: 32px; }
.trc-adim { min-width: 0; }

/* ── Bölme: üçü aynı iskelet. Başlık satırı + kenardan kenara ince çizgi + gövde. Masaüstünde üç başlık çizgisi aynı
   hizada durur, kartı tek bir tablo başlığı gibi keser. ── */
.trc-pano {
  position: relative; display: flex; flex-direction: column; height: var(--trc-boy); padding: var(--trc-ust) var(--trc-ic);
  overflow: hidden; border: 1px solid var(--trc-cizgi); border-radius: 14px; background: var(--tn-gece);
  font-size: 13px; line-height: 18px; color: var(--tn-k-yazi-2); font-variant-numeric: tabular-nums;
}
.trc-ust { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: none;
  padding-bottom: 10px; }
.trc-ust::after { content: ""; position: absolute; left: calc(var(--trc-ic) * -1); right: calc(var(--trc-ic) * -1); bottom: 0;
  height: 1px; background: var(--trc-cizgi); }
.trc-ust__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--tn-beyaz); }
.trc-ust__sag { flex: none; white-space: nowrap; color: var(--tn-k-yazi-3); }
.trc-ust__tutar { margin-left: 4px; font-weight: 500; color: var(--tn-beyaz); }
/* Üst üste iki metin (biri söner, öteki belirir): kap ikisinin genişini tutar, yerleşim kaymaz */
.trc-yigin { display: inline-grid; justify-items: end; }
.trc-yigin--sol { justify-items: start; }
.trc-yigin > * { grid-area: 1 / 1; white-space: nowrap; }

/* 1 · Sipariş listesi: 6 satırlık pencere; liste yukarıdan akar, bugünde durur. Satır çizgileri metinle aynı içlikte. */
.trc-pencere { position: relative; flex: none; height: calc(6 * var(--trc-rh)); margin: 2px -8px 0; overflow: hidden; }
.trc-akis { margin: 0; padding: 0; list-style: none; }
.trc-sip {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 5.9em minmax(0, 1fr) auto; column-gap: 10px;   /* 10 px: 1366–1440'ta en uzun ad (201 px) yarım piksel için kısalmasın */
  align-items: center; height: var(--trc-rh); padding: 0 8px;
}
.trc-sip + .trc-sip::after { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--trc-cizgi); }
.trc-sip__gun { white-space: nowrap; color: var(--tn-k-yazi-3); }
.trc-sip__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-sip__tutar { text-align: right; white-space: nowrap; }
.trc-sip:not(.trc-sip--secili) { opacity: .5; }
.trc-sip--secili { color: var(--tn-beyaz); }
.trc-sip--secili .trc-sip__gun { color: var(--tn-k-yazi-2); }
.trc-sip--secili::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 6px; background: rgba(243, 239, 233, .07); }
.trc-sip.trc-sip--secili::after, .trc-sip--secili + .trc-sip::after { display: none; }

/* 2 · Döküm: 7 kalem, altında kalan / net kâr */
.trc-kalemler { margin: 6px 0 0; padding: 0; list-style: none; }
.trc-kalem { display: flex; justify-content: space-between; gap: 12px; height: var(--trc-kh); line-height: var(--trc-kh); color: var(--tn-k-yazi-3); }
.trc-kalem > span { display: block; }
.trc-kalem > span:last-child { white-space: nowrap; color: var(--tn-k-yazi-2); }
.trc-kalem--sifir > span:last-child { color: var(--tn-k-yazi-4); }
.trc-net {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: none; margin-top: auto; padding-top: 6px;
  border-top: 1px solid var(--trc-cizgi); font-weight: 500; color: var(--tn-beyaz);
}
.trc-net__a { color: var(--tn-k-yazi-3); }
.trc-net__kalan { display: inline-block; font-weight: 500; color: var(--tn-k-yazi-2); }
.trc-net__son { font-size: 15px; line-height: 20px; font-weight: 600; }
.trc-net__son small { margin-right: 8px; font-size: 13px; font-weight: 400; color: var(--tn-k-yazi-3); }
.trc-net__a, .trc-net__kalan { opacity: 0; }   /* son hâlde yalnız "Net kâr" ve sonuç */

/* 3 · Zaman cetveli: 09:00–13:00; üst hat 30 dakikada bir, alt hat 4 saatte bir. Turuncu ince çizgi "şimdi": iki hatta
   aynı animasyonla yürür (etiket satırını kesmesin diye her hatta ayrı çizgi). Çentikler kısa ve ince: barkod değil, saat. */
.trc-meta { margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tn-k-yazi-3); }
.trc-cetvel { flex: none; margin-top: auto; }
.trc-hat { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.trc-hat + .trc-hat { margin-top: 8px; }
.trc-hat__ad { color: var(--tn-k-yazi-2); }
.trc-hat__siklik { white-space: nowrap; color: var(--tn-k-yazi-3); }
.trc-hat--seyrek .trc-hat__ad { color: var(--tn-k-yazi-3); }
.trc-hat__cizgi { position: relative; grid-column: 1 / -1; height: 30px; margin-inline: 16px; }
.trc-hat__cizgi::before { content: ""; position: absolute; left: -16px; right: -16px; top: 50%; height: 1px; background: var(--trc-cizgi); }
.trc-hat__cizgi i { position: absolute; top: calc(50% - 5.5px); left: calc(var(--i) * 12.5%); width: 1px; height: 12px; margin-left: -.5px;
  background: var(--tn-k-yazi-2); }
.trc-hat--seyrek .trc-hat__cizgi i { background: var(--tn-k-yazi-3); }
.trc-izci { position: absolute; inset: 0; transform: translateX(100%); pointer-events: none; }
.trc-izci::before { content: ""; position: absolute; left: -.5px; top: 4px; bottom: 4px; width: 1px; background: var(--tn-marka-gece); }
/* Çentikler ve saatler iki yandan 16 px içeride: her saat kendi çentiğinin tam ortasında, bölme kenarına taşmaz */
.trc-saatler { position: relative; height: 18px; margin-inline: 16px; font-size: 12px; line-height: 16px; color: var(--tn-k-yazi-3); }
.trc-saatler span { position: absolute; bottom: 0; left: calc(var(--s) * 25%); transform: translateX(-50%); }

/* ── Rakam sütunu ── */
.trc-sayi { margin: 20px 0 0; }
:where(.trc-sayi) dd { margin: 0; }
.trc-sayi__deger { margin-top: 10px; font-size: 52px; line-height: 58px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--tn-beyaz); }
.trc-sayi__not { margin-top: 10px; max-width: 380px; font-size: 16px; line-height: 23px; color: var(--tn-k-yazi-3); text-wrap: pretty; }
.trc-dipnot { margin-top: 40px; }

/* Tablet: her adım bir satır, bölme solda, rakam sağda */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .trc { --trc-ic: 20px; }
  .trc-adimlar { gap: 32px; margin-top: 40px; }
  .trc-adim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: center; }
  .trc-sayi { margin: 0; }
}
/* Masaüstü: üç bölme tek kart olarak yan yana, rakamlar altlarında */
@media (min-width: 1024px) {
  .trc { --trc-ic: 20px; }
  .trc-adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; }
  .trc-pano { border-radius: 0; }
  .trc-adim:first-child .trc-pano { border-radius: 16px 0 0 16px; }
  .trc-adim:last-child .trc-pano { border-radius: 0 16px 16px 0; }
  .trc-adim + .trc-adim .trc-pano { border-left: 0; }
  .trc-sayi { margin-top: 28px; padding-inline: var(--trc-ic); }
  .trc-sayi__deger { margin-top: 14px; font-size: 64px; line-height: 68px; }
  .trc-dipnot { margin-top: 48px; }
}
@media (min-width: 1280px) { .trc { --trc-ic: 24px; } }

/* ── Dar bölme (taşıma kararı 20.10.2026): seçili satırın ürün adı ("Airfryer 5,5 L ve 1 ürün") ve bölme başlıkları
   kesilmesin. Bölmenin iç genişliğine bakılır (kapsayıcı sorgusu); taslakta kesilen ekranlar 1024–1145, 640–~700 px ve
   375 px altı. Sıra: önce liste yazısı 13 → 12 px; yetmezse tarih etiketi kısalır ("13 gün önce" → "13 gün", başlıkta
   "Son kontrol" → "Kontrol"; .trc-uzun / .trc-kisa) ve sütun aralığı daralır; en darda (320 px telefon) başlık satırı
   da 12 px. Ürün adı kısalmaz. Satır ve bölme boyları px olduğu için bölüm boyu değişmez. Eşikler Inter ölçüsüyle
   (Chrome, 20.10.2026), seçili satırın istediği iç genişlik (aralık 10 px): 13 px'te 308,4 · 12 px'te 286,2 · kısa
   etiketle 253,4 (aralık 6 px: 249,4); başlıklar 13 px'te: "Son kontrol 13:00" 287,6 · "Kontrol 13:00" 261,7 · "Satış"
   263,2. 375 px telefon (iç 309) taslaktaki gibi 13 px kalır. Diğer (soluk) satırların adı taslakta da kısalır.
   Denetim 20.10.2026: 13 px'in hemen üstünde (iç 309–312; 375, ~698 ve ~1149 px ekran) seçili ad Chrome'da yalnız
   0,6 px payla sığıyordu; başka yazı motorunda (iPhone Safari) kesilmesin diye iç ≤ 312 px'te iki sütun aralığı 8 px
   (pay ≈ 4,6 px; 312 px'in hemen üstünde aralık 10 px ile ≈ 3,7). ── */
.trc-pano { container: trc-pano / inline-size; }
.trc-kisa { display: none; }
@container trc-pano (max-width: 312px) {
  .trc-sip { column-gap: 8px; }
}
@container trc-pano (max-width: 308.9px) {
  .trc-pencere { font-size: 12px; }
}
@container trc-pano (max-width: 290px) {
  .trc-uzun { display: none; }
  .trc-kisa { display: inline; }
  .trc-sip { grid-template-columns: 3.5em minmax(0, 1fr) auto; column-gap: 8px; }
}
@container trc-pano (max-width: 266px) {
  .trc-ust { font-size: 12px; }
  .trc-sip { column-gap: 6px; }
}

/* ══ Hareket ══════════════════════════════════════════════════════════════════════════════════════════════════════
   Her bölmenin zamanı kendi başlangıcından sayılır. Bölmenin son animasyonu bitince (son vuruş) sıradaki başlar; rakam
   sütunu o sırada belirginleşir, yani devir teslim tek nefeste olur, arada ölü an kalmaz.
   Masaüstünde toplam ≈ 6,3 sn: liste 0–1,6 · döküm 1,6–3,7 · cetvel 3,7–6,1 · son rakam 6,3'te tam. Son vuruşlar:
   liste 1,6 (seçili satır ve "alındı") · döküm 2,1 (net kâr) · cetvel 2,42 (son çentik). ══ */
.trc-adim--gecmis { --trc-sayi-t: 1.4s; }
.trc-adim--fis    { --trc-sayi-t: 1.9s; }
.trc-adim--saat   { --trc-sayi-t: 2.15s; }

/* Bekleme: sırası gelmemiş bölme boş kutu değil, kendi iskeleti soluk durur (başlık çizgisi, kalem adları, cetvel ve
   saatler). Hareket bu iskeleti doldurur; kart ilk karesinden son karesine bütün okunur. Rakamı da soluk bekler.
   Gizleyen ve soluklaştıran kurallar yalnız hareket serbestken (denetim 20.10.2026): sayfa açıkken hareket azaltılınca
   animasyonlar iptal olur; sınıflar ne olursa olsun son hâl görünür, bant soluk iskelette takılı kalmaz. */
@media (prefers-reduced-motion: no-preference) {
  .trc-bekle .trc-ust > *, .trc-bekle .trc-meta, .trc-bekle .trc-hat__ad, .trc-bekle .trc-hat__siklik,
  .trc-bekle .trc-kalem > span:last-child, .trc-bekle .trc-net > *, .trc-bekle .trc-izci::before { opacity: 0; }
  .trc-bekle .trc-kalem > span:first-child { opacity: .3; }
  .trc-bekle .trc-hat__cizgi i { opacity: .22; transform: scaleY(.5); }
  .trc-bekle .trc-saatler { opacity: .5; }
  .trc-bekle .trc-izci { transform: none; }
  .trc-bekle .trc-akis { transform: translateY(calc(var(--n) * var(--trc-rh) * -1)); }
  .trc-bekle .trc-sayi { opacity: .3; }
  /* Bölme ekranda değil ama rakamı ekranda (aşağı kaydırıp bölmeyi geçmiş ya da alttan gelmiş): rakam %30'da asılı
     kalmaz. Rakama bakınca (0,6 sn sonra; hızlı geçişte değil) belirginleşir ve bir daha soluklaşmaz; bölme sırası gelince
     yine oynar. Durak sınıfı bu tek animasyonu durdurmaz (bölme dursa da rakam ekranda); sekme gizliyse JS sınıfı kaldırır. */
  .trc-adim.trc-gec .trc-sayi { animation: trc-yan .45s ease .6s both; animation-play-state: running !important; }
  .trc-oyna .trc-sayi { opacity: .3; animation: trc-sayi .45s ease var(--trc-sayi-t) both; }   /* temel .3: rakam yalnız başına bakılırsa (.trc-gec) oradan belirginleşir */
}
.trc-adim.trc-yandi .trc-sayi { opacity: 1; animation: none; }

/* 1 · Bağlantı: başlık ("Son 30 gün alınıyor"), liste akar (30 gün önceden bugüne), durum "alındı", seçilen sipariş
   öne çıkar. "Son 30 gün" sözü ilk karede okunur; anlam akış bitmeden gelir. */
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-ust__ad { animation: trc-ac .3s var(--trc-egri) both; }
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-ust__sag { animation: trc-ac .3s var(--trc-egri) .05s both; }
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-durum__a { animation: trc-kapa .2s ease 1.3s both; }
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-durum__b { animation: trc-ac .25s var(--trc-egri) 1.35s both; }
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-akis { animation: trc-akis 1.35s var(--trc-akis-egri) .05s both; }
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-sip:not(.trc-sip--secili) { animation: trc-yariya .25s ease 1.35s both; }
.trc-adim--gecmis:is(.trc-oyna, .trc-yeniden) .trc-sip--secili::before { animation: trc-ac .25s ease 1.35s both; }
.trc-durum__a { opacity: 0; }

/* 2 · Döküm: sipariş soldan gelir (soldaki seçili satırın devamı); kalem adları iskelette bekler, tutarlar sırayla
   iner ve her birinde "Kalan" azalır; sonunda net kâr */
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) .trc-ust__ad { animation: trc-gel .4s var(--trc-egri) both; }
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) .trc-ust__sag { animation: trc-gel .4s var(--trc-egri) .05s both; }
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) .trc-net > * { animation: trc-ac .3s var(--trc-egri) .15s both; }
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) .trc-kalem > span:first-child { animation: trc-uyan .3s var(--trc-egri) calc(.35s + var(--k) * .2s) both; }
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) .trc-kalem > span:last-child { animation: trc-dus .3s var(--trc-egri) calc(.35s + var(--k) * .2s) both; }
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) :is(.trc-net__a, .trc-net__kalan) { animation: trc-kapa .2s ease 1.85s both; }
.trc-adim--fis:is(.trc-oyna, .trc-yeniden) :is(.trc-net__b, .trc-net__son) { animation: trc-ac .25s var(--trc-egri) 1.85s both; }

/* 3 · Cetvel: iskelette bekleyen cetvelin üstüne ürün gelir; "şimdi" çizgisi 09:00'dan 13:00'e saat gibi düz yürür,
   geçtiği her kontrol çentiği dolar. Rakipsiz ürünün hattında yalnız iki çentik dolar. */
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-ust__ad { animation: trc-gel .4s var(--trc-egri) both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-ust__sag { animation: trc-ac .3s var(--trc-egri) .1s both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-meta { animation: trc-ac .3s var(--trc-egri) .15s both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) :is(.trc-hat__ad, .trc-hat__siklik) { animation: trc-ac .3s var(--trc-egri) .2s both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-saatler { animation: trc-yarimdan .3s ease .2s both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-hat__cizgi i { animation: trc-tik .22s var(--trc-egri) calc(.4s + var(--i) * .225s) both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-izci { animation: trc-izci 1.8s linear .4s both; }
.trc-adim--saat:is(.trc-oyna, .trc-yeniden) .trc-izci::before { animation: trc-ac .15s ease .3s both; }

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

@keyframes trc-ac { from { opacity: 0; } to { opacity: 1; } }
@keyframes trc-kapa { from { opacity: 1; } to { opacity: 0; } }
@keyframes trc-uyan { from { opacity: .3; } to { opacity: 1; } }
@keyframes trc-yarimdan { from { opacity: .5; } to { opacity: 1; } }
@keyframes trc-yariya { from { opacity: 1; } to { opacity: .5; } }
@keyframes trc-gel { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes trc-dus { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes trc-akis { from { transform: translateY(calc(var(--n) * var(--trc-rh) * -1)); } to { transform: none; } }
@keyframes trc-tik { from { opacity: .22; transform: scaleY(.5); } to { opacity: 1; transform: none; } }
@keyframes trc-izci { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes trc-sayi { from { opacity: .3; } to { opacity: 1; } }
@keyframes trc-yan { to { opacity: 1; } }   /* başlangıç: rakamın o anki temel opaklığı (beklerken .3) */

@media (prefers-reduced-motion: reduce) {
  .trc *, .trc *::before, .trc *::after { animation: none !important; }
}

/* Grafit levhada bant → Buybox → Günlük işler arası */
.tn-rakamlar + .tn-alan, .tn-alan + .tn-gunluk { margin-top: 96px; }
@media (min-width: 1024px) { .tn-rakamlar + .tn-alan, .tn-alan + .tn-gunluk { margin-top: 128px; } }

/* ══ Günlük işler ("Bir iş günü"): kuralları ayrı dosyada, tanitim-gunluk-2026.css (yalnız ana sayfada, /landing). Aşağıdaki tek
   sütunlu madde listesi alan bölümlerinin listesi (_tanitim.html alan_bolumu); yeri değişmesin: .tn-alan__liste
   kuralından (margin-top: 0) sonra gelir ve onu ezer (bugünkü görünüm). ══ */
.tn-ozellik-liste.tn-ozellik-liste--tek { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }

/* ══ Telefonda ve Trendyol panelinde: koyu levhada açık kutular ve telefon maketinin tabanı. Kartların kendisi (mobil
   uygulama tmd-, eklenti önce / sonra tes-) ayrı dosyada: tanitim-mobil-2026.css (yalnız ana sayfada, /landing; bunları ezer). ══ */
.tn-levha--gece .tn-medya__kutu--yuzey, .tn-medya__kutu--yuzey { aspect-ratio: 1 / 1; background: var(--tn-acik-2); color: var(--tn-a-yazi); }
.tn-telefon--yuzey { --tel-g: 220px; position: absolute; left: 0; right: 0; top: 40px; margin-inline: auto; }
.tn-medya__baglantilar { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: 16px; }
.tn-medya__baglantilar a { color: var(--tn-beyaz); }
@media (min-width: 640px) {
  .tn-telefon--yuzey { --tel-g: 260px; top: 48px; }
}
@media (min-width: 1024px) {
  .tn-yuzeyler .tn-medya__kutu--yuzey { aspect-ratio: 16 / 10; }
  .tn-telefon--yuzey { --tel-g: 280px; top: 48px; }
}

/* ══ Üç adımda başla ("Üç kısa film", önek tadc-): kuralları ayrı dosyada, tanitim-adimlar-2026.css (yalnız ana sayfada, /landing). ══ */

/* ══ Fiyat: açık levhada tek koyu plan kartı ══ */
.tn-fiyat { margin-top: 96px; }
.tn-fiyat__baslik { margin-inline: auto; text-align: center; }
.tn-plan { max-width: 640px; margin: 40px auto 0; padding: 32px 24px; border-radius: 24px; background: var(--tn-gece); }
.tn-plan__tutar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; }
.tn-plan .tn-etiket + .tn-plan__tutar { margin-top: 16px; }
.tn-plan__tutar strong { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tn-plan__tutar span { margin-left: -6px; font-size: 16px; color: var(--tn-k-yazi-3); }
.tn-plan__tutar s { font-size: 20px; color: var(--tn-k-yazi-4); font-variant-numeric: tabular-nums; }
.tn-plan__alt { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--tn-k-yazi-3); }
.tn-plan__liste { display: grid; gap: 0 24px; margin-top: 32px; }
/* Aylık / Yıllık seçici (22.10.2026, kullanıcı: yıllıkta %10 indirim; yıllık seçilince ayda düşen tutar ve altındaki satır
   değişir). İki radyo düğmesi, JS yok; iki fiyat aynı ızgara hücresinde üst üste (kart boyu oynamaz). :has yoksa aylık kalır. */
.tn-plan__secim { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tn-gece-3); }
.tn-plan__radyo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tn-plan__secim label { padding: 0 16px; border-radius: 999px; font-size: 14px; line-height: 36px; font-weight: 500; color: var(--tn-k-yazi-2);
  cursor: pointer; transition: background-color .2s ease, color .2s ease; white-space: nowrap; }
.tn-plan__secim label span { margin-left: 4px; font-size: 12px; color: var(--tn-k-yazi-3); transition: color .2s ease; }
.tn-plan__radyo:checked + label { background: var(--tn-beyaz); color: var(--tn-gece); }
.tn-plan__radyo:checked + label span { color: var(--tn-a-yazi-3); }
.tn-plan__radyo:focus-visible + label { outline: 2px solid var(--tn-beyaz); outline-offset: 2px; }
.tn-plan__fiyatlar { display: grid; margin-top: 4px; }
.tn-plan__fiyat { grid-area: 1 / 1; transition: opacity .2s ease, visibility .2s; }
.tn-plan__fiyat--yil { opacity: 0; visibility: hidden; }
.tn-plan:has(#tn-aralik-yil:checked) .tn-plan__fiyat--yil { opacity: 1; visibility: visible; }
.tn-plan:has(#tn-aralik-yil:checked) .tn-plan__fiyat--ay { opacity: 0; visibility: hidden; }
.tn-plan__sart-yil { display: none; }
.tn-plan:has(#tn-aralik-yil:checked) .tn-plan__sart-yil { display: inline; }
.tn-plan:has(#tn-aralik-yil:checked) .tn-plan__sart-ay { display: none; }
/* Telefonda kuruşlu tutar ("899,10 ₺") üstü çizili fiyat ve /ay ile tek satıra sığsın */
@media (max-width: 639.98px) { .tn-plan__tutar strong { font-size: min(56px, calc((100vw - 96px) / 6.6)); line-height: 1.08; } }
@media (prefers-reduced-motion: reduce) { .tn-plan__fiyat, .tn-plan__secim label { transition: none; } }
.tn-plan__liste li { padding: 12px 0; border-top: 1px solid var(--tn-k-cizgi); font-size: 15px; line-height: 21px; color: var(--tn-k-yazi-2); }
.tn-plan__dugme { width: 100%; margin-top: 32px; }
.tn-plan__sart, .tn-plan__eklenti { margin-top: 16px; text-align: center; }
.tn-plan__eklenti { margin-top: 8px; }
@media (min-width: 640px) {
  .tn-plan { margin-top: 56px; padding: 40px 40px 48px; }
  .tn-plan__tutar strong { font-size: 64px; line-height: 68px; }
  .tn-plan__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .tn-fiyat { margin-top: 128px; } }

/* ══ Sık sorulanlar: + / − işaretli; açılış yükseklik geçişi destekleyen tarayıcıda (JS yok) ══ */
:root { interpolate-size: allow-keywords; }
.tn-sss { display: grid; gap: 32px; margin-top: 96px; }
.tn-sss__liste details { border-top: 1px solid var(--tn-a-cizgi); }
.tn-sss__liste details:last-child { border-bottom: 1px solid var(--tn-a-cizgi); }
.tn-sss summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer;
  list-style: none; font-size: 20px; line-height: 26px; font-weight: 400; }
.tn-sss summary::-webkit-details-marker { display: none; }
.tn-sss summary i { position: relative; flex: none; width: 20px; height: 20px; margin-top: 3px; }
.tn-sss summary i::before, .tn-sss summary i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 1.5px; background: currentColor;
  transition: rotate .2s ease; }
.tn-sss summary i::after { rotate: 90deg; }
.tn-sss details[open] summary i::after { rotate: 0deg; }
.tn-sss details p { max-width: 640px; padding-bottom: 24px; font-size: 16px; line-height: 24px; color: var(--tn-a-yazi-3); }
.tn-sss details::details-content { block-size: 0; overflow-y: clip; transition: block-size .2s ease, content-visibility .2s allow-discrete; }
.tn-sss details[open]::details-content { block-size: auto; }
@media (min-width: 1024px) {
  .tn-sss { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; margin-top: 128px; }
  .tn-sss summary { padding: 24px 0; font-size: 24px; line-height: 31px; }
  .tn-sss summary i { margin-top: 6px; }
  .tn-sss details p { font-size: 18px; line-height: 25px; }
}

/* ══ Telefonda yapışkan alt çubuk ══ */
.tn-yapiskan { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--tn-gece); border-top: 1px solid var(--tn-k-cizgi);
  translate: 0 100%; visibility: hidden; transition: translate .2s ease, visibility 0s linear .2s; }
.tn-yapiskan.tn-gorunur { translate: 0 0; visibility: visible; transition: translate .2s ease; }
.tn-yapiskan p { font-size: 13px; line-height: 18px; color: var(--tn-k-yazi-3); }
.tn-yapiskan .tn-dugme { flex: none; }
@media (min-width: 1024px) { .tn-yapiskan { display: none; } }
/* Klavye odağı ya da kaydırma bir öğeyi ekranın altına getirince yapışkan çubuğun altında kalmasın (21.10.2026; denetim:
   320 px'te "Kârını gör" düğmesinin yarısı çubuğun altındaydı). Çubuk ≈69 px + güvenli alan. */
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ══ Alt bilgi (gece levha) ══ */
.tn-levha.tn-alt { z-index: 5; padding: 64px 0 104px; }   /* telefonda yapışkan çubuğa yer */
.tn-alt__logo { display: inline-flex; }
.tn-alt__logo img { width: auto; height: 40px; }
.tn-alt__sutunlar { display: grid; gap: 40px; margin-top: 48px; }
.tn-alt__sutunlar h2 { font-size: 16px; line-height: 24px; font-weight: 500; margin-bottom: 8px; }
.tn-alt__sutunlar a { display: block; font-size: 15px; line-height: 32px; color: var(--tn-k-yazi-3); text-decoration: none; }
.tn-alt__sutunlar a:hover { color: var(--tn-beyaz); }
.tn-alt__yasal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--tn-k-cizgi); }
@media (min-width: 640px) { .tn-alt__sutunlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tn-levha.tn-alt { padding: 80px 0 48px; } .tn-alt__sutunlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ══ Kaydırınca belirme (JS yoksa içerik görünür) ══ */
.js .tn-belir { opacity: 0; translate: 0 16px; transition: opacity .3s cubic-bezier(.4, 0, .2, 1), translate .3s cubic-bezier(.4, 0, .2, 1); }
.js .tn-belir.tn-gorundu { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tn *, .tn *::before, .tn *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js .tn-belir { opacity: 1; translate: 0 0; }
}

/* ══ Bülten satırı (28.10.2026: alt-sayfa-2026.css'ten taşındı; ana sayfa ve alt sayfalar ortak, reklam/_tanitim.html
   bulten_satiri). Alt bilginin üst satırı (koyu levha, içerik levhasının altından biner) ══ */
.ts-bulten { padding: 48px 0 0; z-index: 4; }
/* Tek sütun minmax(0, 1fr): e-posta kutusunun doğal genişliği sütunu kaptan taşırmasın (320 px'te "Katıl" kesiliyordu) */
.ts-bulten__ic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--tn-k-cizgi); }
.ts-bulten h2 { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 500; }
.ts-bulten__form { display: flex; gap: 8px; max-width: 440px; }
.ts-bulten__form input[type=email] {
  flex: 1; min-width: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 9999px;
  background: var(--tn-gece-3); color: var(--tn-beyaz); font-family: inherit; font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--tn-k-cizgi);
}
.ts-bulten__form input[type=email]::placeholder { color: var(--tn-k-yazi-4); }
.ts-bulten__form input[type=email]:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tn-beyaz); }
.ts-bulten__form .tn-dugme { flex: none; }
.ts-bulten__tuzak { position: absolute; left: -9999px; width: 0; height: 0; border: 0; padding: 0; }
.ts-bulten-msg { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--tn-k-yazi-3); }
.ts-bulten-msg a { color: var(--tn-k-yazi-2); text-decoration: underline; text-underline-offset: 3px; }
.ts-bulten-msg--tamam { color: var(--tn-beyaz); }
.ts-bulten-msg--hata { color: #F2A99F; }
.ts-bulten__baglantilar { display: flex; flex-wrap: wrap; gap: 4px 24px; align-content: start; }
.ts-bulten__baglantilar a { font-size: 15px; line-height: 32px; color: var(--tn-k-yazi-3); text-decoration: none; }
.ts-bulten__baglantilar a:hover { color: var(--tn-beyaz); }
/* Ana sayfada "Blogdan:" satırı (son 3 yazı + Yenilikler): her genişlikte tam satır, sola yaslı */
.ts-bulten__baglantilar--yazilar { grid-column: 1 / -1; justify-content: flex-start; }
.ts-bulten__etiket { font-size: 15px; line-height: 32px; color: var(--tn-k-yazi-4); }
@media (min-width: 1024px) {
  .ts-bulten { padding: 64px 0 0; }
  .ts-bulten__ic { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 40px; }
  .ts-bulten__baglantilar { justify-content: flex-end; padding-bottom: 30px; }
  .ts-bulten__baglantilar.ts-bulten__baglantilar--yazilar { justify-content: flex-start; padding-bottom: 0; }
}
/* Alt bilgi bülten satırının devamı: binme ve köşe yok. Alt boşluğu yalnız alt sayfalarda (.ts-cerceve) azalır: orada
   telefonda yapışkan çubuk yok. Ana sayfada çubuk var; .tn-levha.tn-alt'ın 104 px'i kalır (dipnot çubuğun altında kalmasın). */
.ts-bulten + .tn-alt { margin-top: 0; border-radius: 0; padding-top: 40px; }
.ts-cerceve .ts-bulten + .tn-alt { padding-bottom: 48px; }
@media (min-width: 1024px) { .ts-bulten + .tn-alt { padding: 48px 0 48px; } }
.ts-bulten + .tn-alt .tn-alt__sutunlar { margin-top: 40px; }

/* ══ Çerez bildirimi (yalnız ana sayfada; 28.10.2026, reklam/_tanitim.html cerez_bandi, tanitim-2026.js §4b). Ölçüler
   /baslat'ınkiyle (dis-2026.css .ds-cerez) aynı: telefonda altta tam genişlik, 640 px'ten itibaren sağ altta 420 px kutu.
   Katman: yapışkan çubuğun (50) üstünde, telefon menüsünün (80) ve açılış perdesinin (1000) altında. Sabit konumlu;
   düzeni kaydırmaz. ══ */
.tn-cerez {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--tn-gece-3); color: var(--tn-k-yazi-2); box-shadow: var(--tn-golge-gece);
  font-size: 13px; line-height: 19px;
}
.tn-cerez[hidden] { display: none; }
.tn-cerez a { color: var(--tn-beyaz); text-decoration: underline; text-underline-offset: 3px; }
.tn-cerez__dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tn-cerez__dugmeler .tn-dugme { width: 100%; font-size: 14px; }
@media (min-width: 640px) {
  .tn-cerez { left: auto; right: 24px; bottom: 24px; max-width: 420px; border-radius: 16px; }
}