/* ============================================================================
   MIQNO — ANA SAYFA TON RİTMİ (Varyant A, 24 Ağustos 2026)
   Referans: AI/mochup/anasayfa-ritim-A.png

   Ana sayfa tek düze açık tondan açık↔koyu ritmine geçer. Bu dosya YALNIZCA
   index.html'den yüklenir; /tasarla, kart motoru ve diğer sayfalar bu katmanı
   hiç görmez. Yükleme sırası: tf-light.css'ten SONRA (o dosya son override
   katmanı ve `!important` kullanıyor).

   TASARIM KARARI — NEDEN TOKEN, NEDEN SEÇİCİ AVI DEĞİL
   Bölümlerin içindeki yüzlerce kural zaten `var(--muted)`, `var(--panel)`,
   `var(--line)`, `var(--l-heading)` gibi token'lardan besleniyor. Özel
   varsayılan renkleri tek tek ezmek yerine bu token'ları KOYU BÖLÜMÜN
   ÜZERİNDE yeniden tanımlıyoruz. CSS özel değişkenleri kalıtımla çözülür:
   daha YAKIN bir öğede tanımlı değer, uzaktaki daha ÖZGÜL kuralı yener.
   Böylece bölüm içindeki bileşenler kendiliğinden koyulaşır ve bölümlere
   tek tek renk yazılmaz. Yalnız SABİT KODLANMIŞ renkler (#FFFFFF, #F6E3C6…)
   ayrıca ezilir; onlar aşağıda "sabit renk yamaları" başlığında toplandı.

   KONTRAST (ölçüldü, WCAG AA = 4.5:1 gövde metni):
     zemin #2E2229 : #F3E8DC 12.63  · #B79DA9 6.11  · #F4B860 8.62  · #E96A4B 4.81
     zemin #211820 : #F3E8DC 14.30  · #B79DA9 6.91  · #F4B860 9.76  · #E96A4B 5.45
     footer #1D141B: #F3E8DC 14.88  · #B79DA9 7.20  · #F4B860 10.16 · #E96A4B 5.67
   12 kombinasyonun 12'si de AA geçiyor; palet olduğu gibi kullanıldı.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   0) AÇIK BÖLÜMLER, SİTE TEMASINDAN BAĞIMSIZ AÇIK KALIR
   ÖLÇÜLDÜ (24 Ağustos 2026): PR #2 ile site geneli koyu tema geldi ve
   VARSAYILAN oldu (`data-tema` niteliği yokken koyu). O yüzden ana sayfanın
   "açık" bölümleri de koyu boyanıyordu — #temalar, #nasil, #katmanlar
   (#katmanlar ANA-1 ile #urun iskeletine geçti ama TONU AÇIK kaldı, 16 Eylül 2026)
   ölçümde `#0F1115`/`#14171D` çıktı. Sonuç: ilk kez gelen ziyaretçi için
   ritim diye bir şey KALMIYORDU; her bölüm koyuydu.

   KARAR: ana sayfada BÖLÜM TONU tasarımın parçasıdır, tema tercihi değil.
   Referans mockup (anasayfa-ritim-A) açık↔koyu ritmi gösteriyor; ritim
   ancak açık bölümler gerçekten açıkken vardır. Bu yüzden ana sayfanın açık
   bölümleri her iki temada da krem kalır.

   KAPSAM DAR TUTULDU: yalnız bu BEŞ bölümün zemin/metin token'ları sabitlenir.
   Header, çekmece, buton, sepet gibi site kabuğu tema tercihini izlemeye
   DEVAM eder; /tasarla ve diğer sayfalar hiç etkilenmez.
   GERİ ALMAK: bu bloğu silmek yeterli — ana sayfa yine temayı izler.
   ------------------------------------------------------------------------- */
#top, #temalar, #nasil, #katmanlar, #tema-istek, #sss{
  --bg:#FFF9F0; --bg-2:#FBF3E7; --cream:#FFF9F0; --cream-2:#FBF3E7;
  --panel:#FFFFFF; --panel-2:#FFFFFF; --deep:#FFF9F0;
  --ink:#FFF9F0; --ink-2:#FBF3E7; --ink-3:#FFFFFF;
  /* İKİNCİL METİN AA (17 Eylül 2026, ölçüldü): #86707C krem #FFF9F0 üzerinde 4,34 (< 4,5).
     #786270: krem 5,31 · kâğıt #F3EAE0 4,67 · #F3EAD7 4,65. Aynı mürdüm-gri ailesi, bir ton koyu. */
  --text:#3B2C35; --muted:#786270; --on-ink:#3B2C35; --on-ink-dim:#786270;
  --gold-text:#A9772B; --line:rgba(59,44,53,.10); --line-soft:rgba(59,44,53,.06);
  --l-bg:#F3EAD7; --l-bg-2:#EDE1C6; --l-panel:#FBF6EC;
  --l-heading:#0A1128; --l-body:#3E4049; --l-muted:#5A5E68;
  --l-gold-text:#6E4920; --l-gold-graphic:#8A5E2E; --l-gold-fill:#C9862B;
  --l-line:rgba(138,106,46,.42); --l-panel-line:rgba(10,17,40,.14);
  color:var(--text);
}
#nasil{ background:var(--bg) !important; }
#katmanlar{ background:var(--l-bg) !important; }
#sss{ background:var(--bg) !important; }
/* Hero kendi degradesini korur (mevcut açık stil, talimat: "aynen"). */
#top{ background:
  radial-gradient(58% 50% at 74% 18%, rgba(244,184,96,.16), transparent 60%),
  radial-gradient(48% 46% at 26% 88%, rgba(233,106,75,.06), transparent 62%),
  linear-gradient(180deg,#FFFDF9 0%, #FFF9F0 55%, #FFF6EA 100%) !important; }
/* Bu bölümlerin içindeki başlık/metin de krem zemine göre okunur.

   G-1b İSTİSNASI — VİTRİN PANELİ HARİÇ
   Bu kurallar "#top krem zeminlidir" varsayımıyla yazıldı (vitrin
   bölümü G-2'de hero'nun yerine geçince `#temalar` kimliği kalktı). Vitrin paneli
   (anasayfa-vitrin.css) kendi zeminini ve paletini taşıyor: Futbolcu koyu
   yeşil, Gamer neredeyse siyah. İstisna açılmadan ÖLÇÜLEN sonuç: başlık her
   panelde #3B2C35, cümle/eyebrow/sayaç #86707C -- koyu panellerde okunmuyordu.
   Dışarıda bırakılanlar panelin kendi sınıflarıyla adlandırılır; `:not()`
   içinde KARMAŞIK değil TEKİL seçici kullanılır (eski Safari karmaşık
   `:not()`u anlamayıp kuralın TAMAMINI düşürürdü). */
#top h1, #top h2, #nasil h2, #katmanlar h2, #tema-istek h2, #sss h2,
#top h3:not(.tv-p-baslik), #nasil h3, #katmanlar h3, #tema-istek h3, #sss h3{ color:var(--text) !important; }
#nasil p, #sss p,
#top p:not(.tv-p-cumle):not(.tv-p-eyebrow):not(.tv-sayac):not(.th-price){ color:var(--muted); }
/* `.th-price` DE LİSTEDEN ÇIKTI (G-10): fiyat satırı artık tema slaytlarında da
   var ve orada panelin kendi rengini taşımalı. Bu kural bir KİMLİK taşıdığı için
   (1,4,0) tema panelinin kuralını yeniyordu -- özgüllük yarışına girmek yerine
   istisna listesine alındı. Hero'nun fiyat satırının rengi anasayfa-vitrin.css'te
   AÇIKÇA yazıldı; oradan buraya bakan bir okur ikisini birlikte görsün. */
/* Kart yüzeyleri beyaz kalır (koyu tema onları koyulaştırıyordu). */
#nasil .step, #sss .faq-item{
  background:#FFFFFF !important; border-color:var(--line) !important; color:var(--text) !important; }
#nasil .step *, #sss .faq-item *{ color:inherit; }

/* ---------------------------------------------------------------------------
   1) KOYU BÖLÜM TOKEN'LARI
   `.tf-section--light` (tf-sayfa.css, FAZ 16) ile simetrik kurulur; isimlendirme
   deponun mevcut kuralına uyar (`tf-` öneki), yeni bir ad şeması açılmaz.
   ------------------------------------------------------------------------- */
.tf-section--dark{
  /* --- ton paleti --- */
  --d-bg:#2E2229;                      /* radyal mürdüm, üst */
  --d-bg-2:#211820;                    /* radyal mürdüm, alt */
  --d-head:#F3E8DC;                    /* başlık + gövde metni */
  --d-muted:#B79DA9;                   /* ikincil metin */
  --d-tag:#F4B860;                     /* etiket / eyebrow / rozet */
  --d-surface:rgba(255,246,236,.06);   /* kart-kutu yüzeyi */
  --d-surface-2:rgba(255,246,236,.10); /* hover / seçili yüzey */
  --d-edge:rgba(244,184,96,.22);       /* kart-kutu kenarlığı */

  /* --- mevcut token'ların koyu karşılıkları (kalıtımla iner) --- */
  --bg:var(--d-bg); --bg-2:var(--d-bg-2); --cream:var(--d-bg); --cream-2:var(--d-bg-2);
  --panel:var(--d-surface); --panel-2:var(--d-surface); --deep:var(--d-bg);
  --ink:var(--d-bg); --ink-2:var(--d-bg-2); --ink-3:var(--d-surface);
  --text:var(--d-head); --muted:var(--d-muted);
  --on-ink:var(--d-head); --on-ink-dim:var(--d-muted);
  --stage:transparent; --stage-2:transparent;      /* sahne artık bölümün KENDİSİ */
  --on-stage:var(--d-head); --on-stage-dim:var(--d-muted);
  --gold-text:var(--d-tag);
  --line:var(--d-edge); --line-soft:rgba(244,184,96,.14);

  /* --- FAZ 16 açık bölüm token'ları da koyuya çevrilir --- */
  --l-bg:var(--d-bg); --l-bg-2:var(--d-bg-2); --l-panel:var(--d-surface);
  --l-heading:var(--d-head); --l-body:var(--d-head); --l-muted:var(--d-muted);
  --l-gold-text:var(--d-tag); --l-gold-graphic:var(--d-tag); --l-gold-fill:var(--d-tag);
  --l-line:var(--d-edge); --l-panel-line:var(--d-edge);

  /* --- koyu zeminde gölge siyahtan gelir, mürdümden değil --- */
  --shadow-1:0 1px 2px rgba(0,0,0,.30), 0 10px 26px -16px rgba(0,0,0,.55);
  --shadow-2:0 2px 6px rgba(0,0,0,.32), 0 22px 48px -22px rgba(0,0,0,.60);

  position:relative;
  color:var(--d-head) !important;
  background:
    radial-gradient(120% 88% at 50% 0%, var(--d-bg) 0%, var(--d-bg-2) 72%) !important;
}

/* GEÇİŞLER DÜZ HAT: koyu bölümün kendi kenar süsü olmaz. Açık bölümün alt
   hairline'ı (`.tf-section--light::after`) yerinde kalır — o mevcut açık stil. */
.tf-section--dark{ border-top:none !important; border-bottom:none !important; }
.tf-section--dark::after{ content:none !important; }
.tf-section--dark::before{ background:none !important; }


/* ---------------------------------------------------------------------------
   2) TİPOGRAFİ
   ------------------------------------------------------------------------- */
.tf-section--dark h1,
.tf-section--dark h2,
.tf-section--dark h3,
.tf-section--dark h4{ color:var(--d-head) !important; }

.tf-section--dark p,
.tf-section--dark li,
.tf-section--dark dd,
.tf-section--dark label{ color:var(--d-head); }

.tf-section--dark .eyebrow,
.tf-section--dark [class*="eyebrow"],
.tf-section--dark [class*="-tag"],
.tf-section--dark .tf-badge{ color:var(--d-tag) !important; }

/* İkincil metin: "lead", "note", "sub", "muted" ailesi. */
.tf-section--dark [class*="-lead"],
.tf-section--dark [class*="-note"],
.tf-section--dark [class*="-sub"],
.tf-section--dark [class*="-desc"],
.tf-section--dark .muted{ color:var(--d-muted) !important; }

.tf-section--dark a{ color:var(--d-tag); }
.tf-section--dark a:hover{ color:#FFD79A; }


/* ---------------------------------------------------------------------------
   3) KART-KUTU YÜZEYLERİ
   Tek kural: yarı saydam sıcak beyaz + 1.5px altın kenarlık.
   ------------------------------------------------------------------------- */
.tf-section--dark .sc-card,
.tf-section--dark .section-card,
.tf-section--dark .card,
.tf-section--dark .tf-rv-card,
.tf-section--dark .tf-rv-avg,
.tf-section--dark .mst-aks-item,
.tf-section--dark .hd-band,
.tf-section--dark .story-card,
.tf-section--dark .tfl-item{
  background:var(--d-surface) !important;
  border:1.5px solid var(--d-edge) !important;
  color:var(--d-head) !important;
  box-shadow:var(--shadow-1);
}

/* Küçük "çip"/etiket kutucukları (özellik listeleri) aynı yüzey dilinde. */
.tf-section--dark .mst-feats li,
.tf-section--dark .tf-chip,
.tf-section--dark .hs-badge{
  background:var(--d-surface) !important;
  border:1.5px solid var(--d-edge) !important;
  color:var(--d-tag) !important;
}


/* ---------------------------------------------------------------------------
   4) BUTONLAR — mercan iki tonda da AYNI kalır (talimat)
   ------------------------------------------------------------------------- */
.tf-section--dark .btn-gold{
  background:var(--coral) !important;
  /* Mercan uzerinde AA: #1E1410 = 5.70:1 (#FFF6EC yalniz 2.96 idi). Mercan
     hex'i DEGISMEDI; buton iki tonda da AYNI gorunur (bkz. tf-light.css notu). */
  color:#1E1410 !important;
  border-color:transparent !important;
}
.tf-section--dark .btn-gold:hover{ background:var(--coral-2) !important; }

/* Kontur buton koyu zemine uyarlanır (tf-light.css beyaz dolgu veriyordu). */
.tf-section--dark .btn-ghost{
  background:transparent !important;
  color:var(--d-head) !important;
  border-color:var(--d-edge) !important;
}
.tf-section--dark .btn-ghost:hover{
  border-color:var(--d-tag) !important;
  color:var(--d-tag) !important;
  background:rgba(244,184,96,.08) !important;
}


/* ---------------------------------------------------------------------------
   5) SABİT RENK YAMALARI
   Token'dan beslenmeyen, doğrudan yazılmış renkler. Token katmanı bunlara
   ulaşamaz; her biri kaynağıyla birlikte not edildi.
   ------------------------------------------------------------------------- */

/* 5.1 — Örnek Kart Tasarımları (#ornekler.sc)
   tf-light.css:96 iç `.container`'a koyu sahne kutusu çiziyordu. Artık koyu
   BÖLÜMÜN KENDİSİ; iç kutu şeffaflaşır, yoksa koyu üstünde koyu kutu çıkar. */
.tf-section--dark.sc{ padding:clamp(48px,6vw,72px) 0; overflow:hidden; }
.tf-section--dark.sc > .container{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.tf-section--dark .sc-title{ color:var(--d-head) !important; }
.tf-section--dark .sc-eyebrow{ color:var(--d-tag) !important; }
.tf-section--dark .sc-lead{ color:var(--d-muted) !important; }
.tf-section--dark .sc-dot{ background:rgba(255,246,236,.24) !important; }
.tf-section--dark .sc-dot[aria-current="true"],
.tf-section--dark .sc-dot.is-active{ background:var(--d-tag) !important; }

/* 5.2 — Kendi Kartını Tasarla (#ozel.tf-gate)
   "Sağdaki koyu kart sahnesi bölümün tamamına yayılır": sahne kutusu kalkar. */
.tf-section--dark .tf-gate-stage{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 5.3 — Neden Miqno (#hakkimizda.story)
   tf-light.css:76 `linear-gradient(#FFFFFF, var(--bg-2))` — beyaz SABİT. */
.tf-section--dark.story{
  background:
    radial-gradient(120% 88% at 50% 0%, var(--d-bg) 0%, var(--d-bg-2) 72%) !important;
  border:0 !important;                 /* tf-light.css:67 kart kenarlığı */
  border-radius:0 !important;          /* tam genişlik bölüme 16px köşe olmaz */
  box-shadow:none !important;
}
/* NOT: `.story` bir kez aşağıdaki "beyaz artık" grubuna da yazılmıştı; oradaki
   `background:none` bu gradyanı eziyordu (aynı özgüllük, sonra gelen kazanır)
   ve bölüm koyu sınıfı taşıdığı hâlde krem çıkıyordu. Ölçümle yakalandı:
   `getComputedStyle(#hakkimizda).backgroundImage === 'none'`. Artık yalnız
   kenarlık/köşe/gölge orada temizleniyor, zemin BURADA kalıyor. */

/* 5.4 — Hediye bandı (#hediye.hd)
   tf-sayfa.css:3428 `#F6E3C6` krem bant — SABİT. */
.tf-section--dark .hd-text{ color:var(--d-muted) !important; }

/* 5.5 — Yorumlar (#reviews.tf-rv) — form alanları koyu zeminde */
.tf-section--dark .tf-rv-field input,
.tf-section--dark .tf-rv-field textarea,
.tf-section--dark .tf-rv-field select{
  background:rgba(0,0,0,.24) !important;
  color:var(--d-head) !important;
  border:1.5px solid var(--d-edge) !important;
}
.tf-section--dark .tf-rv-field input::placeholder,
.tf-section--dark .tf-rv-field textarea::placeholder{ color:var(--d-muted) !important; }
.tf-section--dark .tf-rv-warn{ background:rgba(0,0,0,.22) !important; }
.tf-section--dark .tf-rv-star-on{ color:var(--d-tag) !important; }

/* 5.6 — Metal Pano (#sergile.mst) — beden seçimi işaretliyken */
.tf-section--dark .mst-aks-size{
  background:rgba(0,0,0,.20) !important;
  color:var(--d-head) !important;
  border-color:var(--d-edge) !important;
}
.tf-section--dark .mst-aks-size:has(input:checked){
  background:rgba(244,184,96,.16) !important;
  border-color:var(--d-tag) !important;
  color:var(--d-head) !important;
}
.tf-section--dark .mst-aks-price{ color:var(--d-tag) !important; }

/* 5.7 — SSS ve diğer açılır bloklar koyu bölümde kullanılırsa */
.tf-section--dark details,
.tf-section--dark summary{ color:var(--d-head) !important; }


/* ---------------------------------------------------------------------------
   5b) YAPIŞKAN HEADER — altındaki bölümün tonunu takip eder
   PROBLEM: header zemini yarı saydam krem (rgba(255,249,240,.82)). Koyu
   bölümün üstünden geçerken krem ile mürdüm karışıp KİRLİ GRİ bir bant
   oluşuyordu. Ton artık `data-ton` niteliğiyle geliyor; niteliği
   assets/js/tf-koyu-yuzey.js, header şeridine daraltılmış bir
   IntersectionObserver bandıyla yazar (scroll dinleyicisi YOK).
   Geçiş yumuşak: renkler 220ms'de döner.
   ------------------------------------------------------------------------- */
header{
  transition:background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* AÇIK ŞERİT — "açık bölümde mevcut hali" (talimat).
   ÖLÇÜLDÜ: site geneli koyu tema header'ı `rgba(15,17,21,.86)` yapıyordu; ana
   sayfada krem bölümlerin üstünde koyu bir bant kalıyordu. Ana sayfada header
   de bölüm tonunu izler, tema tercihini değil (bkz. 0. blok kararı). */
/* OZGULLUK NOTU: tf-koyu.css header'i `:root:not([data-tema="acik"]) header`
   ile boyuyor -> ozgulluk (0,2,1). Duz `header[data-ton=...]` (0,1,1) o kurali
   YENEMIYORDU (olculdu: nitelik dogru donuyordu ama zemin koyu kaliyordu).
   Basa `:root ` eklenerek ozgulluk esitlendi; bu dosya SONRA yuklendigi icin
   esitlikte kazanir. */
:root header[data-ton="acik"]{
  /* OPAK, ILK BOLUMUN RENGI (Kerem, 25 Agustos 2026): "Header bolumunun arka
     plani ilk bolum rengi ile ayni olup BIR CIZGI ile boyut verilmeli."
     OLCULEN SEBEP: zemin %86 saydamdi. Yapiskan header AKISIN icinde, yani
     arkasinda bolum degil GOVDE var (#0F1115). Krem %86 + kara %14 =
     rgb(221,216,209) -- krem hero'nun ustunde KIRLI GRI bir bant.
     Ilk bolumun (hero) ust rengi olculdu: linear-gradient ilk duragi #FFFDF8.
     Golge de kaldirildi: bant zaten cizgiyle ayriliyor, ikisi birden
     "ayri katman" hissi veriyordu. */
  background:#FFFDF8 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid rgba(59,44,53,.12) !important;
  box-shadow:none !important;
}
:root header[data-ton="acik"] .nav-menu a{ color:#86707C; }
:root header[data-ton="acik"] .nav-menu a:hover{ color:#E96A4B; }
:root header[data-ton="acik"] .lang-toggle button{ color:#86707C; }
:root header[data-ton="acik"] .lang-toggle button.active{ background:#F4B860; color:#3B2C35; }
:root header[data-ton="acik"] .icon-btn,
:root header[data-ton="acik"] header svg{ color:#3B2C35; }
:root header[data-ton="acik"] .brand img{ filter:none; }
:root header[data-ton="koyu"]{
  /* Ayni kural koyu seritte: koyu bolumlerin UST rengi olculdu -> #2E2229
     (radial-gradient'in ilk duragi). Opak + tek cizgi. */
  background:#2E2229 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid rgba(244,184,96,.20) !important;
  box-shadow:none !important;
}
:root header[data-ton="koyu"] .nav-menu a{ color:#D9C6CF; }
:root header[data-ton="koyu"] .nav-menu a:hover{ color:#F4B860; }
/* Mercan CTA iki tonda da AYNI kalır (talimat) — yalnız kontur/ikonlar döner. */
:root header[data-ton="koyu"] .nav-menu a.nav-cta{ color:#1E1410; }   /* mercan uzerinde AA */
:root header[data-ton="koyu"] .lang-toggle button{ color:#D9C6CF; }
:root header[data-ton="koyu"] .lang-toggle button.active{ background:#F4B860; color:#241A20; }
:root header[data-ton="koyu"] .icon-btn,
:root header[data-ton="koyu"] header svg{ color:#F3E8DC; }
/* Logo: koyu şeritte krem sürüm (kaynağı JS çevirir, bu yalnız güvenlik ağı). */
:root header[data-ton="koyu"] .brand img:not([data-ton="koyu"]){ filter:brightness(0) invert(1) opacity(.92); }

/* ---------------------------------------------------------------------------
   5c) GİRİŞ ANİMASYONLARI — içerik 300ms'den uzun görünmez KALMAZ
   PROBLEM (ölçüldü): sayfada `.reveal` taşıyıp `.show` alamamış 21 görünür
   öğe vardı — opacity:0, yani içerik hiç görünmüyordu. Ayrıca vitrin
   kartlarının giriş gecikmeleri 0.55s–1.07s arasındaydı; orta kart en son
   geliyordu ("orta kart geç geliyor").
   KURAL: hareket YALNIZ transform'dan gelir, opacity kısa tutulur, ve
   gecikmeler kaldırılır. Failsafe JS tarafında (tf-koyu-yuzey.js).
   ------------------------------------------------------------------------- */
.reveal{ transition:opacity .18s ease, transform .26s ease !important; }

/* Vitrin kartları ilk yüklemede BİRLİKTE gelir (kademeli gecikme kaldırıldı). */
.sc .card-anim,
.slot-l2 .card-anim, .slot-l1 .card-anim,
.slot-c  .card-anim, .slot-r1 .card-anim, .slot-r2 .card-anim{
  animation-delay:0s !important;
  animation-duration:.28s !important;
}

/* Hero: LCP öğesine giriş animasyonu uygulanmaz (kural korunuyor) ve
   metin bloklarının kademeli gecikmeleri 300ms tavanının altına çekilir. */
.th-media.hero-reveal{ opacity:1 !important; animation:none !important; }
.hero-reveal{ animation-duration:.28s !important; }
.th-badge.hero-reveal, .th-title.hero-reveal{ animation-delay:0s !important; }
.th-lead.hero-reveal,  .th-sub.hero-reveal  { animation-delay:.06s !important; }
.th-cta.hero-reveal,   .th-trust.hero-reveal{ animation-delay:.12s !important; }

@media (prefers-reduced-motion: reduce){
  .reveal, .hero-reveal, .card-anim{
    opacity:1 !important; transform:none !important;
    animation:none !important; transition:none !important;
  }
}

/* ---------------------------------------------------------------------------
   6) KAPANIŞ CTA + FOOTER — tek koyu bütün
   Talimattaki tek "ardışık aynı ton" istisnası. Aralarında ayırıcı yok ki
   iki bölüm tek blok gibi okunsun.
   ------------------------------------------------------------------------- */
.tf-section--dark.cta-strip{ border-bottom:none !important; }

/* FOOTER KURALLARI BURADAN TAŞINDI -> assets/css/tf-footer-koyu.css
   Gerekçe: footer artık /tasarla dahil TÜM sayfalarda aynı koyu footer
   (Kerem, 24 Ağustos 2026). Bu dosya yalnız ana sayfaya yüklendiği için
   (bkz. test TR-7) footer kuralları burada kalsaydı diğer sayfalara
   ulaşamazdı. Ana sayfa da o dosyayı yükler; buradaki tek iş, CTA ile
   footer arasında ayırıcı bırakmamak: */
.tf-section--dark.cta-strip + footer.tf-section--dark{ border-top:none !important; }


/* ---------------------------------------------------------------------------
   7) GÖRSELLERİN KOYU ZEMİNDE SAHNELENMESİ
   Koyu bölümdeki ürün fotoğraflarının çevresinde beyaz kutu/artık kalmamalı.
   Fotoğraflar zaten şeffaf zeminli WebP; kaplarındaki beyaz dolgular kalkar.
   ------------------------------------------------------------------------- */
/* ÖLÇÜLDÜ: tf-light.css:67 genel "kart yüzeyi" kuralı `.mst-pano` ve `.story`
   öğelerini de kapsıyordu (beyaz dolgu + kenarlık + 16px yuvarlama + gölge).
   `.mst-pano` aslında kesilmiş bir ürün PNG'sinin kabı, kart değil: koyu
   zeminde 314×800'lük BEYAZ bir kutu olarak çıkıyordu. `.story` ise tam
   genişlikte bir bölüm; yuvarlatılmış köşe ve kenarlık oraya ait değil. */
.tf-section--dark .mst-pano,
.tf-section--dark .mst-figure,
.tf-section--dark .mst-photo,
.tf-section--dark .mst-media,
.tf-section--dark .tf-gate-media,
.tf-section--dark figure{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* Fotoğraf koyu zeminde havada dursun: silueti izleyen gölge (kutu gölgesi
   değil — die-cut kenarları dikdörtgen değil). `.mst-pano`nun kendi
   drop-shadow'u açık zemin için ayarlanmıştı; koyuda görünmüyordu. */
.tf-section--dark .mst-pano{
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.50)) drop-shadow(22px 30px 38px rgba(0,0,0,.45)) !important;
}
.tf-section--dark .mst-figure img,
.tf-section--dark .mst-photo img{
  background:none !important;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.42)) drop-shadow(0 26px 34px rgba(0,0,0,.38));
}


/* ---------------------------------------------------------------------------
   8) MOBİL — ritim aynen korunur
   Ton bölüme bağlı olduğu için kırılım noktalarında ayrı kural gerekmez;
   yalnız iç kutuların yatay dolgusu daralır ki koyu zemin kenara dayansın.
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .tf-section--dark.sc > .container{ padding-left:16px; padding-right:16px; }
  .tf-section--dark .hd-band{ border-radius:20px; }
}