/* ═══════════════════════════════════════════════
   LINALUX — input-carddraw
   Tarot giriş modülü: açılım seçimi + kart karıştırma/çekme
   Tüm sınıflar .tcd- önekli — core/ dosyalarına dokunmaz.
   Renkler DOĞRUDAN core/tokens.css token'larından gelir.

   🔴 2026-08-09 — BURADA BİR HATA VARDI ve tam da bu satırlar onu
   meşrulaştırıyordu: "token adı farklıysa fallback devreye girer".
   Dosya --gold / --gold-dim / --card / --line adlarını kullanıyordu ve bu
   adlar HİÇBİR YERDE TANIMLI DEĞİLDİ. var() tanımsız bir ada bakınca
   yedeğe düşer — yani ekrana basılan renk her zaman yedekteki ESKİ KOYU
   PALETTİ. Tema geçişi bu dosyayı hiç etkilemedi, /tarot#acilim adımı
   koyu mor + altın kaldı. Sabit renk sayacı da göremedi: yedekleri
   "güvenlik ağı" sayıp saymıyordu — token TANIMLIYSA doğru bir varsayım,
   tanımsızsa yedek kuralın kendisi olur.
   Artık yedek YOK: token ya vardır ya yoktur, ikisi de sessizce yanlış
   renk basmaz.
   ═══════════════════════════════════════════════ */

/* ---------- Sayfa içi açılım listesi (landing) ---------- */
.tcd-spreads{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tcd-spread-link{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--ak) 4%, var(--bg));
  border:1px solid var(--b1);
  transition:border-color .2s, transform .2s;
}
.tcd-spread-link:active{transform:scale(.985)}
.tcd-spread-link:hover{border-color:var(--ak)}
.tcd-spread-num{
  font-size:14px;font-weight:700;letter-spacing:.08em;
  color:var(--ak);min-width:22px;
}
.tcd-spread-body{flex:1;min-width:0}
.tcd-spread-name{display:block;font-size:20px;font-weight:700;color:var(--text)}
/* 🔴 Renk TOKEN DEĞİL, kullanıcının seçtiği okunabilirlik tonu (04.09.2026).
   Palette'te karşılığı yok: --muted (#6E6E6C) fazla soluk, --dim (#45443F)
   hâlâ açık kalıyordu. Palet elden geçerse bu satır ELLE gözden geçirilmeli
   (kayıt: _reference/tema-dogrula.mjs ISTISNA). */
.tcd-spread-desc{display:block;font-size:16px;line-height:1.45;color:#31312f;margin-top:2px}

/* ── Landing "Nasıl Çalışır": yalnızca başlıklar ──
   Kurallar /atlas (.aw-hl-sade) · /gunluk-burc (.gb-hl-sade) · /el
   (.pa-hl-sade) · /yildizname (.yn-hl-sade) ile BİREBİR aynı — bu BEŞİNCİ
   kopya ve core/components.css'e taşınmayı hak ediyor; tek engel
   atlas-landing-dogrula.mjs'in sınıf adını Atlas'ın kendi HTML'inde araması.
   Burada duruyor çünkü tarot sayfasının kendi <style> bloğu YOK ve .tcd-
   öneki zaten bu dosyanın (landing'deki .tcd-spread-* de burada). */
.tcd-hl-sade .hi{align-items:center;padding:14px 0}
.tcd-hl-sade .ht{font-family:var(--serif);font-size:24px;font-weight:300;
  line-height:1.15;letter-spacing:.015em;margin-bottom:0}
.tcd-hl-sade .hn{padding-top:0}
.tcd-spread-count{
  /* 16px rozet 3px dolguda sıkışıyordu — dolgu da büyüdü. */
  font-size:16px;font-weight:700;white-space:nowrap;
  color:var(--ak);
  border:1px solid color-mix(in srgb, var(--ak) 40%, transparent);
  border-radius:999px;padding:5px 11px;
}

/* ---------- Funnel overlay ----------
   Not: components.css'te ortak bir flow overlay kontratı varsa
   entegrasyonda .tcd-flow o markup'a bağlanabilir; bu blok
   kendi başına da çalışır (fixed, .shell DIŞINDA durur). */
.tcd-flow{
  position:fixed;inset:0;z-index:80;display:none;
  flex-direction:column;background:var(--bg);
}
.tcd-flow.open{display:flex}
.tcd-flow-top{
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  padding:14px 12px 8px;
}
.tcd-back,.tcd-close{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--b2);
  background:transparent;color:var(--text);font-size:16px;cursor:pointer;
}
.tcd-back{justify-self:start}
.tcd-close{justify-self:end}
.tcd-prog{height:3px;border-radius:2px;background:var(--b2);overflow:hidden}
.tcd-prog > i{display:block;height:100%;width:0;background:var(--ak);transition:width .3s}
.tcd-body{
  flex:1;overflow-y:auto;overflow-x:clip;-webkit-overflow-scrolling:touch;
  padding:18px 20px 40px;max-width:480px;width:100%;margin:0 auto;
}
/* t5 — adım başlığı: sayfanın ana ifadesi. Serif, büyük, ekrana ortalı.
   ⚠️ .tcd-q akıştaki ON BİR adımın hepsinde kullanılıyor, yalnızca kart
   çekme adımında değil. 48px sabit yazılsaydı 320px ekranda "Hangi açılımı
   istiyorsun?" dört satıra düşerdi; 12.8vw tavanı 375px ve üstünde tam
   48px veriyor, altında oranlı küçülüyor. */
.tcd-q{
  font-family:var(--serif);font-size:min(48px, 12.8vw);font-weight:400;line-height:1.05;
  letter-spacing:-.02em;color:var(--text);
  text-align:center;padding-top:11px;margin:0 0 4px;
}
/* t6 — yelpazenin hemen üstünde duruyor; başlıkla değil DESTEYLE ilişkili. */
/* G10 — mono KALDIRILDI, 30 → 24px. Alt başlık artık gövde yazı tipiyle:
   30px'lik mono büyük bir metin bloğunda başlıkla yarışıyordu. */
.tcd-sub{
  font-size:20px;line-height:1.6;color:var(--muted);
  text-align:center;margin:0 0 6px;
}

/* ── t9 — SEÇENEK EKRANLARI: başlık ve açıklama daha aşağıda başlasın ──
   Bu ekranlarda içerik az (birkaç buton); üstteki boşluk sayfayı boş değil
   FERAH gösteriyor. Kart çekme adımına uygulanmıyor, orada yer yelpazenin.

   Beş adıma veriliyor: dört seçenek ekranı + odak sorusu. Hepsi aynı
   iskelet (başlık, açıklama, tek bir giriş alanı ya da buton listesi);
   biri farklı boşlukta olsaydı adımlar arası geçişte başlık zıplardı ve
   hata gibi görünürdü. */
[data-adim="spreadSelect"] .tcd-q,
[data-adim="variantSelect"] .tcd-q,
[data-adim="periodSelect"] .tcd-q,
[data-adim="twoOptions"] .tcd-q,
[data-adim="focusQuestion"] .tcd-q{ padding-top:49px; margin-top:20px }

[data-adim="spreadSelect"] .tcd-sub,
[data-adim="variantSelect"] .tcd-sub,
[data-adim="periodSelect"] .tcd-sub,
[data-adim="twoOptions"] .tcd-sub,
[data-adim="focusQuestion"] .tcd-sub{ padding:15px }   /* G10: 53 → 15px */

/* ---------- Seçenek butonları / metin girişleri ---------- */
.tcd-opts{display:flex;flex-direction:column;gap:10px}
.tcd-opt{
  padding:14px 16px;border-radius:14px;cursor:pointer;
  background:color-mix(in srgb, var(--ak) 4%, var(--bg));
  border:1px solid var(--b1);
  color:var(--text);font-size:18px;font-weight:600;
  transition:border-color .15s, background .15s;
}
.tcd-opt small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.tcd-opt:hover,.tcd-opt.sel{border-color:var(--ak);background:color-mix(in srgb, var(--ak) 6%, var(--bg))}
.tcd-input,.tcd-textarea{
  width:100%;padding:14px 16px;border-radius:14px;font:inherit;font-size:16px;
  background:var(--s3);
  border:1px solid var(--b2);
  color:var(--text);outline:none;
}
.tcd-input:focus,.tcd-textarea:focus{border-color:var(--ak)}
.tcd-textarea{min-height:96px;resize:vertical}
.tcd-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px}
.tcd-next{
  display:block;width:100%;margin-top:22px;padding:15px;border:none;border-radius:14px;
  background:var(--ak);color:var(--beyaz);font-size:15px;font-weight:700;cursor:pointer;
}
.tcd-next:disabled{opacity:.45;cursor:default}
/* 🔴 Yelpaze kartları kutudan AŞAĞI taşıyor (overflow:visible) ve mutlak
   konumlu oldukları için normal akıştaki içeriğin ÜSTÜNE boyanırlar.
   Buton artık yelpazenin altında olduğuna göre kartların altında kalırdı;
   kendi yığın bağlamıyla öne alınıyor. */
.tcd-stage .tcd-next{position:relative;z-index:3}
.tcd-skip{
  display:block;width:100%;margin-top:10px;padding:10px;background:none;border:none;
  color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;
}

/* ═══════════════════════════════════════════════
   LINALUX — input-carddraw v2: ÇARK + UÇUŞ + FLIP
   Bu blok, modules/input-carddraw.css içindeki ESKİ
   "Kart karıştırma / çekme" bölümünün YERİNE geçer.
   (.tcd-deck, .tcd-drawn, tcdShuf*, tcdReveal silinir)
   Performans kuralları:
   - Animasyonda SADECE transform + opacity kullanılır
   - Kart başına gölge YOK; çark altında TEK elips gölge var
   - Çark tek elemandır, sürüklemede tek rotate değişir
   ═══════════════════════════════════════════════ */

/* ---------- Sahne ---------- */
.tcd-stage{display:flex;flex-direction:column;min-height:60vh}

/* ---------- Slot satırı (hayalet yuvalar) ---------- */
.tcd-slots{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;padding:6px 0 14px;
}
.tcd-slot{display:flex;flex-direction:column;align-items:center;gap:6px}
/* genişlik JS'ten --sw ile gelir (kart sayısına göre 56-84px) */
.tcd-slot-card{
  width:var(--sw,84px);aspect-ratio:1/1.62;border-radius:10px;
  border:1.5px dashed color-mix(in srgb, var(--ak) 45%, transparent);
  background:color-mix(in srgb, var(--ak) 3%, transparent);
  perspective:900px;position:relative;
}
.tcd-slot.filled .tcd-slot-card{border-style:solid;background:transparent}
/* 🔴 Renk TOKEN DEĞİL — .tcd-spread-desc ile aynı gerekçe (04.09.2026):
   yuva etiketleri 9px + --muted ile neredeyse okunmuyordu. */
.tcd-slot-lbl{
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#141413;text-align:center;
  max-width:calc(var(--sw,84px) + 14px);line-height:1.3;
}
.tcd-slot-lbl b{
  display:block;font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--ak);margin-top:2px;
}

/* ---------- Çift yüzlü kart (flip) ---------- */
.tcd-flipcard{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.35,.7,.3,1)}
.tcd-flipcard.flipped{transform:rotateY(180deg)}
.tcd-face{
  position:absolute;inset:0;border-radius:10px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* ── KART SIRTI ──
   🔴 2026-08-09: mürekkep sırt SİYAH bir dikdörtgen gibi okunuyordu ve
   hilal tam ortadaydı — "kart" değil "koyu kutu" hissi veriyordu.
   Yeni sırt basılı bir kart gibi: BEYAZ zemin, ince mürekkep kenar, içeride
   bir çerçeve dikdörtgeni, hilal o çerçevenin SOL ÜST köşesinde.
   Hilalin ortadan köşeye alınması bilinçli: yelpazede kartlar birbirinin
   üstüne biniyor ve yalnızca SOL ŞERİDİ görünüyor — ortadaki motif
   kayboluyordu, köşedeki görünüyor ve her kart tek tek okunabiliyor. */
.tcd-face.back{
  background:var(--s3);
  border:1px solid color-mix(in srgb, var(--ak) 60%, transparent);
  color:var(--ak);font-size:15px;
  align-items:flex-start;justify-content:flex-start;
  padding:9px 0 0 10px;
}
/* İç çerçeve: kartın "basılmış" hissini veren tek çizgi. Pseudo-eleman,
   yani işaretlemede fazladan düğüm yok — yelpazede 78 kart var. */
.tcd-face.back::before,.tcd-fan-card::before{
  content:'';position:absolute;inset:4px;border-radius:5px;
  border:1px solid color-mix(in srgb, var(--ak) 28%, transparent);
  pointer-events:none;
}

/* kart yüzü — görseller sonra gelecek: img buraya data-card-id ile takılır */
.tcd-face.front{
  transform:rotateY(180deg);
  background:var(--s3);
  border:1px solid var(--ak);
}
/* ── YÜZÜN İÇERİĞİ ──
   .fci kartın TAMAMINI kaplıyor, dolayısıyla dönüş merkezi kartın merkezi.
   Önemi şu: ters kartta 180° döndürülünce üstteki motif ALTA geçip baş
   aşağı duruyor — gerçek bir ters tarot kartı böyle görünür. Eskiden
   yalnızca glyph kendi ekseninde dönüyordu, kartın kendisi düz duruyordu. */
.tcd-face.front .fci{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  /* t7+t8: ikon aşağı indi, ad kartın ALT bölümüne yerleşti.
     space-between iki ucu ayırıyor; üstteki dolgu ikonu aşağı itiyor. */
  justify-content:space-between;
  /* G10 — yatay dolgu 5px → 0. Astrolojik Evler'de 12 kart yan yana dizildiği
     için yuva daralıyor; iki yandaki 5px, kart adına kalan genişliğin ~%18'ini
     yiyip adı gereksiz yere sarmalıyordu. `.fcn` zaten `max-width:100%` ve
     `overflow-wrap:anywhere` ile kendi sınırını koruyor. */
  gap:4px;padding:30% 0px 9px;
}
.tcd-face.front.ters .fci{transform:rotate(180deg)}
.tcd-face.front .fc{font-size:26px;line-height:1;transition:none}
/* Kart adı — yuva genişliğiyle ölçekleniyor: aynı stil hem 84px hem 56px
   kartta çalışmalı (--sw .tcd-slots'tan miras geliyor). Taban 6.5px:
   altına inince mono büyük harf okunmaz hâle geliyor. */
.tcd-face.front .fcn{
  font-family:var(--mono);
  /* t7 — tavan 12,5px. Yuva genişliğiyle ölçekleniyor (--sw mirasla gelir);
     84px yuvada tavana dayanıyor, 56px yuvada 8,4px'e iniyor. */
  font-size:min(12.5px, max(7px, calc(var(--sw, 84px) * .15)));
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  line-height:1.2;color:var(--dim);
  max-width:100%;overflow-wrap:anywhere;
}

/* ---------- Çark (yelpaze) ---------- */
/* 🔴 KESİLME DÜZELTİLDİ (2026-08-09).
   Kutu 150px yüksekliğinde ve overflow:hidden'dı. Çarkın dönme merkezi
   kutunun 236px ALTINDA, kart yarıçapı ~292px: yandaki kartların merkezi
   y≈210px'e iniyor, kendi köşeleriyle ~230px'e ulaşıyor. Yani kartların
   altı ve yan köşeleri GÖRÜNMEZ BİR KUTUYA çarpıp düz bir çizgiyle
   kesiliyordu — yelpaze gibi değil, kırpılmış gibi duruyordu.

   İki şey değişti:
   · overflow:visible → kutu artık kesmiyor
   · yatayda tam taşma (negatif kenar boşluğu) → kartlar EKRAN kenarına
     kadar gidip orada kesiliyor; doğal olan bu, yelpazenin uçları zaten
     ekran dışında kalmalı.
   Yükseklik DEĞİŞMEDİ (150px): overflow:visible zaten kesmeyi kaldırıyor,
   kutuyu büyütmek yalnızca üstteki yuvaları sıkıştırırdı. Kutu artık bir
   KIRPMA sınırı değil, sadece düzende ayrılan yer. */
.tcd-fanwrap{
  position:relative;margin-top:auto;height:150px;
  /* 🔴 overflow:visible DEĞİL, clip + clip-margin (2026-08-10).
     visible ile kartların taşması .tcd-body'nin KAYDIRILABİLİR ALANINA
     ekleniyordu: yelpazeyi çevirdikçe sayfa aşağı uzuyor, kullanıcı
     olmayan bir boşluğa kaydırabiliyordu.

     'clip' bir kaydırma kabı OLUŞTURMAZ ve taşmasını üst kaplara
     BİLDİRMEZ — sayfa açıldığı boyutta kalır. overflow-clip-margin ise
     kutunun dışına ne kadar boyanabileceğini söylüyor: 240px, kartların
     ulaştığı en uzak noktadan (~82px alt, ~230px yan) fazlasıyla geniş,
     yani görünen hiçbir şey kesilmiyor. Kesme pratikte EKRAN kenarında
     oluyor — istenen buydu.

     İlk satır eski tarayıcılar için yedek: 'clip'i tanımayan bir motor
     ikinci satırı geçersiz sayıp visible'da kalır (eski davranış), yeni
     motorlar clip'i uygular. */
  overflow:visible;
  overflow:clip;
  overflow-clip-margin:240px;
  margin-left:-20px;margin-right:-20px;   /* .tcd-body padding'ini iptal eder */
  /* Yelpaze yukarıda dursun VE altındaki buton kartların taşma alanına
     düşmesin. Kartlar kutunun ~80px altına kadar iniyor (yarıçap 292px,
     çark merkezi kutunun 236px altında); 10px yetmiyordu, buton kartların
     arasında kalıyordu. */
  margin-bottom:64px;
  /* Açık z-index: taşan kartlar hiçbir koşulda butonun önüne geçmesin. */
  z-index:0;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
}
.tcd-fanwrap.dragging{cursor:grabbing}
/* 🔴 ELİPS GÖLGE KALDIRILDI (2026-08-10, kullanıcı bildirdi).
   Yelpazenin altında 340×56px'lik %16 siyah radyal bir elips vardı —
   kartları "yere basıyor" göstermek için konmuş bir koyu tema aracıydı.
   Kâğıt temada zeminde bir leke gibi okunuyor ("ortadaki kartların alt
   bölümünde karartı"), üstelik referans tasarımın ilk ilkesi gölge
   kullanmamak. Kural silinmedi, yalnızca boyamıyor. */
.tcd-fanwrap::after{ display:none }
.tcd-wheel{
  position:absolute;left:50%;bottom:-236px;width:0;height:0;
  transform:rotate(var(--wa, 0deg));
}
.tcd-fanwrap.dragging .tcd-wheel{transition:none}
.tcd-wheel.settle{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.tcd-fan-card{
  position:absolute;left:-33px;top:-346px;width:66px;height:107px;
  border-radius:9px;
  transform-origin:33px 346px; /* pivot = çark merkezi */
  transform:rotate(var(--a));
  background:var(--s3);
  border:1px solid color-mix(in srgb, var(--ak) 60%, transparent);
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:7px 0 0 8px;
  color:var(--ak);font-size:12px;
}
.tcd-fan-card.used{visibility:hidden}

/* t4 — "Kart Çek" desteyi kıpırdatır.
   🔴 rotate(var(--a)) keyframe'lerin İÇİNDE tekrar yazılıyor: transform tek
   bir özellik, animasyon onu ezerdi ve bütün kartlar 0°'a sıçrayıp yelpaze
   çökerdi. --kd her karta ayrı gecikme veriyor, kıpırdama dalga gibi geçiyor. */
@keyframes tcd-kipir{
  0%,100%{ transform:rotate(var(--a)) }
  30%    { transform:rotate(calc(var(--a) - 2deg)) }
  65%    { transform:rotate(calc(var(--a) + 2deg)) }
}
.tcd-fan-card.kipir{
  animation:tcd-kipir .5s ease-in-out var(--kd, 0ms) 1;
}
@media (prefers-reduced-motion: reduce){
  .tcd-fan-card.kipir{ animation:none }
}
.tcd-fan-hint{
  text-align:center;font-size:18px;color:var(--muted);
  font-family:var(--serif);
  padding-top:6px;margin:14px 0 6px;
}

/* ---------- Uçan klon ---------- */
.tcd-fly{
  position:fixed;z-index:120;pointer-events:none;
  width:66px;height:107px;perspective:900px;
  transition:transform .5s cubic-bezier(.3,.7,.25,1);
  will-change:transform;
}

/* ---------- Yardımcı butonlar ---------- */
.tcd-auto{
  display:none;margin:12px auto 0;padding:9px 18px;border-radius:999px;
  background:transparent;border:1px solid color-mix(in srgb, var(--ak) 50%, transparent);
  color:var(--ak);font-size:12px;font-weight:700;cursor:pointer;
}
.tcd-auto.show{display:block}

/* ---------- Erişilebilirlik ---------- */
@media (prefers-reduced-motion: reduce){
  .tcd-fly{transition:none}
  .tcd-flipcard{transition:none}
  .tcd-wheel.settle{transition:none}
}

/* ---------- Analiz / rapor ekranları ---------- */
.tcd-spin{
  width:44px;height:44px;margin:26px auto 14px;border-radius:50%;
  border:3px solid var(--b2);
  border-top-color:var(--ak);animation:tcdSpin 1s linear infinite;
}
@keyframes tcdSpin{to{transform:rotate(360deg)}}
/* font-size 13 → 16px (User-tests.md F1).
   `min-height` de 18 → 20px: bu satır bekleme sırasında WAIT_LINES mesajları
   arasında dönüyor ve taban, mesaj değişirken yüksekliğin çökmemesi için var.
   18px 13'lük metne göre ayarlanmıştı; 16px'te tek satır (~19,2px = 16 × 1,2)
   onu zaten aşıyor ve taban işlevsiz kalıyordu. 20px yeni tek satır yüksekliğini
   karşılıyor, yani zıplama koruması çalışmaya devam ediyor. */
.tcd-anal-line{font-size:16px;color:var(--muted);text-align:center;margin-top:8px;min-height:20px}

/* ---------- Paywall ---------- */
.tcd-price{
  border:1px solid color-mix(in srgb, var(--ak) 50%, transparent);border-radius:16px;
  padding:20px;text-align:center;background:color-mix(in srgb, var(--ak) 4%, var(--bg));margin-top:8px;
}
.tcd-price .big{font-size:34px;font-weight:800;color:var(--text)}
.tcd-price .per{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.tcd-secure{display:flex;justify-content:center;gap:6px;align-items:center;font-size:11px;color:var(--muted);margin-top:12px}

/* ---------- Sonuç ---------- */
.tcd-result-card{
  border:1px solid var(--b1);border-radius:14px;
  background:color-mix(in srgb, var(--ak) 4%, var(--bg));padding:14px 16px;margin-bottom:10px;
}
.tcd-result-card .pos{font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ak)}
.tcd-result-card .nm{font-size:20px;font-weight:700;color:var(--text);margin:3px 0 6px}
.tcd-result-card .nm .ters-badge{
  font-size:9px;font-weight:700;letter-spacing:.05em;vertical-align:middle;margin-left:6px;
  color:var(--ak2);border:1px solid color-mix(in srgb, var(--ak2) 45%, transparent);border-radius:999px;padding:2px 7px;
}
.tcd-result-card .yorum{font-size:18px;line-height:1.6;color:var(--dim)}
.tcd-sky{
  border-left:3px solid var(--ak);padding:10px 14px;margin:16px 0;
  background:color-mix(in srgb, var(--ak) 4%, var(--bg));border-radius:0 12px 12px 0;
}
.tcd-sky .t{font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--ak);margin-bottom:4px}
.tcd-sky .d{font-size:18px;line-height:1.55;color:var(--dim)}
.tcd-fullread p{font-size:14px;line-height:1.7;color:var(--text);margin:0 0 14px}
.tcd-guidance{
  border:1px dashed color-mix(in srgb, var(--ak) 50%, transparent);border-radius:14px;
  padding:14px 16px;font-size:20px;line-height:1.6;color:var(--text);margin-top:6px;
}
.tcd-h2{font-size:25px;font-weight:800;color:var(--text);margin:22px 0 10px;text-align:center}
.tcd-main-msg{font-size:20px;font-weight:800;line-height:1.35;color:var(--text);margin:4px 0 16px}

/* ═══════════════ TAHTA — dizilim (tarot2.md) ═══════════════
   Kartlar mutlak konumlu; konum/ölçü JS'ten piksel olarak BİR KEZ yazılıyor.
   Animasyon yalnızca transform — kare içinde düzen hesabı yok. */
.tcd-board-wrap{ display:flex; justify-content:center; margin:18px 0 22px }
.tcd-board{ position:relative; flex-shrink:0 }

.tcd-bcard{
  position:absolute;
  /* Dış kutu YALNIZCA ötelenir (FLIP). Döndürme iç katmanda — ikisi tek
     transform'da toplansaydı animasyon dönüşü de ezerdi. */
  transform:translate(0,0) scale(1);
  backface-visibility:hidden;   /* alt piksel titremesini kesiyor */
}
.tcd-bcard-in{ position:absolute; inset:0 }

/* Kart yüzü tahtada da aynı bileşen (.tcd-flipcard) — ayrı bir kart görünümü
   yok, dolayısıyla tema/şekil değişikliği tek yerden akıyor. */
.tcd-board .tcd-flipcard{ position:absolute; inset:0 }

/* Oturma vuruşu — dizilim bitti işareti. Tek seferlik, transform'da. */
@keyframes tcd-otur{
  0%   { transform:scale(1) }
  45%  { transform:scale(1.035) }
  100% { transform:scale(1) }
}
.tcd-board.oturdu{ animation:tcd-otur 240ms ease-out 1 }

@media (prefers-reduced-motion: reduce){
  .tcd-board.oturdu{ animation:none }
  .tcd-bcard{ transition:none !important }
}