/* ═══════════════════════════════════════════════════════════════════════════
   TEMSOR OYUN — MASA TEMASI (Pişti · 101 Okey · Batak ortak katmanı)
   ---------------------------------------------------------------------------
   YÖN: bu bir kumarhane değil, BİR MASA. Kategorinin varsayılanı Vegas —
   bordo çuha, altın ampullü pervaz, çizgi film avatar, yığın altın. Tam da
   hedef kitlemizin şikâyet ettiği dünyanın görüntüsü o. Biz onu almıyoruz.

   Aldığımız şey: ceviz bir masa, üstüne serilmiş petrol yeşili yün çuha,
   fildişi taşlar, mat pirinç. Ve TEK BİR LAMBA.

   ⚠️ TASARIMIN TEK KURALI — TEK IŞIK KAYNAĞI.
   Masanın üstünde bir lamba var: üstte, hafif solda. Bundan üç şey türüyor ve
   üçü de bu dosyada sabitlendi:
     · ışık havuzu   — masanın ortası aydınlık, kenarlar sönüyor (vinyet)
     · gölge yönü    — HER yükseltilmiş öğe aşağı-sağa gölge düşürür
     · üst parlama   — HER yükseltilmiş öğenin üst kenarı bir ton açık
   "Premium" duygusunu veren şey ne yuvarlaklık ne gradyandır; sahnedeki her
   nesnenin AYNI ışığa uyması. Gölge yönünü tek bir yerde bile bozarsan göz
   bunu "çizim" diye okur. Yeni bir yüzey eklerken --golge-* ölçeğini kullan,
   elle box-shadow yazma.

   Harici istek YOK — resim de yazı tipi de. Bütün malzeme CSS gradyanı:
   bu türün can damarı açılışın anında gelmesi, taşlar dağıtılana kadar geçen
   her saniye oyuncu kaybı.

   Yazı: gövde sistem sans (okunurluk, yaşlı kitle), BAŞLIK VE SAYILAR serif.
   İkisinin zıtlığı bilinçli — mobilya serif, oyun taşları sans. Tek bir yazı
   ailesiyle her şeyi dizmek "şablon" duygusunun en büyük kaynağı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ VARSAYILAN GÜNDÜZ MASASI — Serdar direktifi (2026-08-02):
   "oyunlarda default bu kadar karanlık tema olmamalı". Bu yüzden `:root`
   aydınlık masa, koyu masa `[data-tema="koyu"]` altında. Tema değişirken
   IŞIK YÖNÜ DEĞİŞMEZ, yalnız yoğunluğu — yoksa sahne "başka bir oyun" olur. */
:root{
  /* ── Malzeme ─────────────────────────────────────────────────────────── */
  /* ⚠️ Çuha DOYGUN OLMAMALI. İlk ayar (#42806E) ekranda "video oyunu yeşili"
     okunuyordu; gerçek yün çuha ışığı emer, doygunluğu düşüktür. Kırmızıyı
     bir tık yükseltip yeşili düşürmek kumaşa yaklaştırıyor. */
  --cuha:#3D7565;            /* yün çuha — gün ışığında petrol yeşili */
  --cuha-dip:#2A574B;        /* çuhanın gölgede kalan kenarı */
  --ceviz:#6B4426;           /* masa pervazı / ıstaka */
  --ceviz-ust:#8F6238;       /* pervazın ışık alan üst kenarı */
  --ceviz-dip:#4A2D17;
  --fildisi:#F5ECDA;         /* taş ve kart yüzü */
  --fildisi-dip:#E2D2B4;
  --pirinc:#C79B4E;          /* mat pirinç — parlak altın değil */
  --pirinc-parlak:#E7BE72;
  --murekkep:#241C12;

  /* ── Metin ───────────────────────────────────────────────────────────── */
  /* ⚠️ ÖLÇÜMLE AÇILDI (2026-08-09, tool/olc-okunurluk.mjs). Eski değerler
     (--sonuk #C3B79E, --silik #93866C) çuhanın üstünde 2,1–3,7:1 veriyordu;
     WCAG AA küçük metin için 4,5:1 istiyor. Kitle yaşlı, bu satır süs değil.
     Yeni değerler en KOYU çuhada 5,3–6,0:1. Panelin kendisi de koyulaştırıldı,
     çünkü metin tarafında yapılacak her şey yapılsa bile açık panel 4,28:1'i
     geçemiyordu — bkz. `--panel-dolgu`. */
  /* ⚠️ ÜÇÜNCÜ TON EMEKLİ (2026-08-09, ölçümle). Çuha zemininde üç kademe açık
     metin matematiksel olarak SIĞMIYOR: panel dolgusu 4,5:1 için metnin en
     fazla L≈0,65'e inmesine izin veriyor, `--sonuk` zaten L≈0,71'de. Üçüncü
     kademeye kalan aralık gözle ayırt edilemeyecek kadar dar (denendi:
     #DCD2BD → 4,52:1 ama `--sonuk`tan ayırt edilemiyor). Çuha üstünde
     hiyerarşi artık PARLAKLIKLA değil kalınlık/boy/harf aralığıyla taşınıyor.
     Açık zeminde (`.kutu`) üç kademe SIĞIYOR — orada ayrı değerler duruyor. */
  --metin:#F4EEE1; --sonuk:#E2DACA; --silik:#E2DACA;
  --metin-koyu:#241C12;      /* fildişi zeminde okunacak metin */

  /* ── Işık ────────────────────────────────────────────────────────────── */
  /* Lambanın konumu: üstte, hafif solda. Gölgeler bu yüzden aşağı-SAĞA düşer. */
  --isik-x:46%;
  --golge-1:0 1px 2px rgba(20,12,6,.26);
  --golge-2:0 3px 7px rgba(20,12,6,.26), 0 1px 2px rgba(20,12,6,.18);
  --golge-3:0 10px 26px rgba(20,12,6,.34), 0 3px 8px rgba(20,12,6,.22);
  --parlama:inset 0 1px 0 rgba(255,255,255,.24);

  /* ── Panel dolgusu ───────────────────────────────────────────────────────
     ⚠️ BU JETON BİR ÖLÇÜM SONUCU, süs değil. Paneller eskiden çuhayı ÜSTTEN
     %9–14 BEYAZLA açıyordu (`rgba(255,255,255,.10)` üst durak). Panelin üst
     bandı da tam adların/durumların oturduğu yer olduğu için, çuha koyu olsa
     bile yazı ekranda açık yeşilin üstünde kalıyordu: ölçülen en açık panel
     rgb(99,138,119) → oradaki metin ne yapılsa 4,28:1'i geçemiyor. Yani kusur
     YAZININ rengi değildi, ZEMİNDİ; üç oyundaki düşük kontrastların çoğu tek
     bu duraktan geliyordu.
     Çözüm: panel çuhayı AÇMAZ, KOYULAŞTIRIR — kabartma hissi gövdenin
     tonundan değil `--parlama`nın 1px üst pahından geliyor (masaya gömülü
     koyu deri kaplama + parlak bizote kenar). Bu yüzden `--parlama`
     KALDIRILMAMALI: onu silmek paneli düz bir leke yapar.
     Ölçülen (2026-08-09, düzeltilmiş araçla): `.rakipler` şeridinde panel
     rgb(48..60, 82..92, 70..78) → L≈0,079 · `--metin` 7,0:1 · `--sonuk` 5,9:1.
     ⚠️ BU DURAKLARI KOYULAŞTIRMAYA ÇALIŞMA — denendi ve GERİ ALINDI (2026-08-09).
     Araç o gün Batak'ta altı kırmızı gösteriyordu (`--metin` 4,32:1 ·
     `--sonuk` 3,53:1) ve zemin rgb(72,121,103) diye okunuyordu; ilk teşhis
     "panel lamba havuzunun altında kalıyor, yeterince bastırmıyor" oldu ve
     duraklar .32/.42'ye çekildi. Sayı ZERRE OYNAMADI — çünkü kusur panelde
     değildi: araç o sırada panelin hiç çizilmediği bayat bir kare okuyordu ve
     ölçtüğü şey panel değil ALTINDAKİ ÇUHAYDI (bkz. `docs/denetim/okunurluk.md`,
     altıncı hata). Araç düzelince altı kırmızı da eski duraklarla kendiliğinden
     kapandı. Ders: bir jetonu değiştirmek sayıyı oynatmıyorsa ölçtüğün şey o
     jeton değildir — koyulaştırmaya devam etme, ÖLÇÜMÜ sorgula. */
  --panel-dolgu:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.34));

  /* ── Kart/taş renkleri (fildişi zemin üstünde) ───────────────────────── */
  /* ⚠️ `--t-sari` ÖLÇÜMLE KOYULAŞTIRILDI (#8A6A12 → #82620F). Fildişi taşın
     (rgb(246,238,221)) üstünde sarı rakam 4,39:1 veriyordu — WCAG AA sınırının
     (4,5) hemen ALTINDA, yani gözle "olmuş" görünen ama geçmeyen tek renk.
     Yeni değer 4,89:1. Diğer üç renk zaten geçiyor (kırmızı 5,3 · siyah ~15).
     ⚠️ O 4,89 SAYISI EKSİK ÖLÇÜMDÜ (düzeltildi 2026-08-09): fildişi yüz DÜZ
     RENK DEĞİL, gradyan (`#FDF9F0 → --fildisi → --fildisi-dip`). Ölçüm yüzün
     en AÇIK yerinden (rgb(246,238,221)) alınmıştı; rakam yüzün koyu kısmına
     denk gelince zemin rgb(237,225,202)'ye iniyor ve sarı 4,38:1'e düşüyor —
     çok tohumlu kapı bunu `olc-1` elinde yakaladı. Yeni değer o KOYU zemine
     göre seçildi: #77590D → 5,04:1. Ders: gradyanlı yüzde renk, yüzün en
     açık noktasına göre değil EN KOYU noktasına göre seçilir. */
  --t-siyah:#221E1A; --t-kirmizi:#B3352A; --t-mavi:#1B5687; --t-sari:#77590D;
  /* ⚠️ Aşağıdaki beş değişkeni `ortak/masa/kart.js` SVG'nin İÇİNDE kullanıyor
     (fill/stroke doğrudan `var(--kart-…)` yazıyor). Adları değiştirilirse
     kartlar sessizce renksiz çizilir — konsolda hata çıkmaz. */
  /* ⚠️ `--kart-kirmizi` ÖLÇÜMLE KOYULAŞTIRILDI (#B3352A → #9A2820, 2026-08-09).
     Kart rakamı SVG içinde çiziliyor ve kartlar ÜST ÜSTE BİNİYOR: bir kartın
     rakamı komşu kartın gölgesine denk geldiğinde yüzü rgb(209,203,191)'e
     kadar koyulaşıyor. Ölçülen: eski değer orada 3,37:1 (Pişti `olc-3`),
     Batak'ta 4,36:1. Yeni değer en koyu ölçülen yüzde 4,82:1, normal yüzde
     5,6:1. `--t-kirmizi` DOKUNULMADI: Okey taşları üst üste binmiyor, en koyu
     taş yüzünde 4,69:1 ile geçiyor — ama payı dar, taş yüzü koyulaşırsa
     ilk düşecek renk odur. */
  --kart-kirmizi:#9A2820; --kart-siyah:#221E1A;
  --kart-arka:#1D4A3E; --kart-arka-desen:#3E7A66; --kart-arka-cizgi:#78B49B;

  --r:14px;
  color-scheme:light;
}

/* Koyu tema = aynı masa, gece. Lamba tek ışık kaynağı olduğu için havuz
   belirginleşiyor, çuha koyuluyor, gölgeler sertleşiyor. */
[data-tema="koyu"]{
  --cuha:#24564C; --cuha-dip:#12302A;
  --ceviz:#57341F; --ceviz-ust:#7A4E2C; --ceviz-dip:#341D0F;
  --metin:#F4EEE1; --sonuk:#E2DACA; --silik:#E2DACA;   /* üçüncü ton emekli — bkz. :root */
  --golge-1:0 1px 2px rgba(10,6,3,.34);
  --golge-2:0 3px 7px rgba(10,6,3,.34), 0 1px 2px rgba(10,6,3,.24);
  --golge-3:0 10px 26px rgba(6,4,2,.46), 0 3px 8px rgba(6,4,2,.32);
  --parlama:inset 0 1px 0 rgba(255,255,255,.18);
  --kart-arka:#123027; --kart-arka-desen:#2A5A4C; --kart-arka-cizgi:#5E9A82;
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}

/* ── ÇUHA ─────────────────────────────────────────────────────────────────
   Dört katman, sırası önemli: lamba havuzu → vinyet → dokuma → renk.
   Dokuma iki ters açıda çok düşük alfa; tek açı "tarama çizgisi" gibi
   görünüyor, iki açı yün örgüsü gibi. */
body{
  background:
    radial-gradient(112% 74% at var(--isik-x) -10%, rgba(255,228,176,.20), transparent 60%),
    radial-gradient(148% 116% at 50% 40%, transparent 34%, rgba(0,0,0,.46) 100%),
    repeating-linear-gradient(37deg, rgba(255,255,255,.016) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-53deg, rgba(0,0,0,.022) 0 2px, transparent 2px 4px),
    linear-gradient(178deg, var(--cuha), var(--cuha-dip));
  background-attachment:fixed;
  color:var(--metin);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;overscroll-behavior:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--pirinc-parlak);outline-offset:2px}

/* Serif = mobilya (marka, başlık, büyük sayı). Sans = oyun taşları.
   Georgia her yerde yok; düşerse yine SERİF'e düşsün diye zincir serifle bitiyor. */
.marka,h2,h3,.skor .p,.deste-sayi{font-family:Georgia,"Iowan Old Style","Noto Serif",serif}

#sahne{display:flex;flex-direction:column;height:100%;max-width:1080px;margin:0 auto;position:relative}

/* ── ÜST ŞERİT ──────────────────────────────────────────────────────────── */
header{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid rgba(0,0,0,.28);box-shadow:0 1px 0 rgba(255,255,255,.06)}
/* ⚠️ MARKA ARTIK BİR PİRİNÇ PLAKA — ölçüm zorladı, süs değil.
   13px pirinç yazı çıplak çuhanın üstünde 2,92:1 veriyordu. Buradaki çıkmaz
   şu: pirinç bir ARA TON (L≈0,55). Çuhada (L≈0,155) 4,5:1 için metnin
   L≥0,874 olması gerekiyor — ivory bile (0,859) yetmiyor. Yani "rengi
   açalım" yolu matematiksel olarak kapalı; pirinci bırakmak ya da kuralı
   değiştirmek gerekiyordu.
   Seçilen yol: WCAG'ın BÜYÜK METİN kapısı (≥18,66px + kalın → 3:1) + koyu
   panel. Ölçülen: panel L≈0,099 üstünde pirinç 4,03:1, eşiğin belirgin
   üstünde. Marka hem okunur oluyor hem "mat pirinç künye" dilini koruyor —
   `--metin`e çevirmek geçerdi ama markayı sahnedeki tek pirinç olmaktan
   çıkarıp sıradan bir yazıya döndürürdü. `text-shadow` bilerek duruyor ama
   ONA GÜVENİLMİYOR: WCAG gölgeyi kontrasta saymaz. */
.marka{font-weight:700;letter-spacing:.10em;font-size:19px;color:var(--pirinc-parlak);
  background:var(--panel-dolgu);border:1px solid rgba(0,0,0,.30);border-radius:8px;
  padding:2px 10px;box-shadow:var(--parlama);
  text-shadow:0 1px 0 rgba(0,0,0,.45)}

/* Skor = pirinç künye. Eski hali elektronik tablo hücresiydi: dört geniş kutu,
   içinde minik yazı, çok boşluk. Şimdi ad ve puan AYNI SATIRDA — künye
   içeriği kadar yer kaplıyor, şerit inceliyor, masaya yer kalıyor. */
.skorlar{display:flex;gap:5px;flex:1;overflow:hidden;justify-content:flex-end}
.skor{min-width:0;display:flex;align-items:baseline;gap:6px;border-radius:8px;padding:3px 9px;
  background:var(--panel-dolgu);
  border:1px solid rgba(0,0,0,.30);box-shadow:var(--parlama);}
.skor.sira{border-color:var(--pirinc);
  box-shadow:var(--parlama), 0 0 0 1px var(--pirinc), 0 0 16px rgba(231,190,114,.28)}
/* ⚠️ `overflow:hidden` bir flex öğesinin OTOMATİK minimum genişliğini 0'a
   indiriyor (CSS Flexbox §4.5) — dar viewport'ta `.skor` sıkışınca `.ad`
   sıfıra kadar küçülüp isim tamamen kayboluyordu, rakam yalnız kalıyordu.
   Sabit bir min-width bu otomatik sıfırı ezip en azından bir-iki harf
   (kısaltma noktası ile) ayakta tutuyor. */
.skor .ad{font-size:12px;color:var(--sonuk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.03em;min-width:15px}
/* ⚠️ PUAN KÜNYENİN DIŞINA TAŞIYORDU — ölçüldü (2026-08-09, dört oyuncu · 390px):
   künyenin sağ kenarı 127,7px'te bitiyor, `.p`nin kutusu 130,4px'e gidiyordu.
   Yani rakamın bir kısmı pirinç plakanın DIŞINDA, çıplak çuhanın üstünde
   duruyordu; okunurluk ölçümü bunu 3,77:1 diye kırmızı bastı ve haklıydı —
   sorun rengin değil rakamın nerede durduğuydu. Sebep: `.skorlar` dört künyeyi
   sıkıştırıyor, `.skor{min-width:0}` bunu bilerek serbest bırakıyor ve iki
   çocuk da varsayılan olarak küçülebilir; `.ad` `min-width:15px`e dayanınca
   fazlalık `.p`ye biniyor, ama rakam kendi içeriğinden daha küçülemiyor →
   padding'i aşıp dışarı çıkıyor.
   Çözüm: rakam ASLA küçülmez (`flex:none`), sıkışmayı adın kısaltması yer;
   `overflow:hidden` da taşan bir şey kalırsa plakanın içinde kalmasını
   garanti eder (bu, yukarıdaki `.ad` min-width kuralının nedeni olan
   §4.5 otomatik-min tuzağını `.skor` düzeyinde YENİDEN AÇMAZ, çünkü
   `.skor`un min genişliği zaten elle 0 verilmiş). */
.skor{overflow:hidden}
.skor .ad{flex:1 1 auto}
/* DÖRT KÜNYELİ MASADA PLAKA İKİ SATIRA GEÇER.
   Ölçüm (390px, Batak, dört oyuncu): her künye içeriği için 59px istiyor,
   şeritte yalnız 39–45px buluyor → 68px açık. Tek satırlı plakada bu açık
   rakamı dışarı atıyordu.
   ⚠️ Adı tek harfe indirmek YETMEZ: puan üç haneye çıkabiliyor ("101"),
   o zaman tek satır yine taşar — yani o çözüm oyunun ortasında geri kırılırdı.
   Dikey dizilim plakanın genişliğini "en geniş SATIR" yapıyor; taşma
   matematiksel olarak kapanıyor (ölçüldü: 4×40px + 15px boşluk = 175 ≤ 183).
   Kural künye SAYISINA bağlı, ekran genişliğine değil: Pişti iki takım künyesi
   (Biz/Onlar) gösteriyor ve orada yatay dizilim daha iyi duruyor — gereksiz
   yere onu da bozmamak için `:has()` ile dördüncü künye aranıyor. */
/* Şerit başlığın ALT SATIRINA geçer.
   Ölçüm (Batak, 390px): koz kutusu 74,5 + üç düğme 104 + boşluk/dolgu 28 = 206px,
   künyelere 184px kalıyor; dört ad ve dört puanın istediği 201px. 360px'te açık
   47px'e çıkıyor. Sonuç: adlar "S… A… Ke… Ze…" diye kırpılıyordu — okunurluk
   turunda yazıyı büyütmek bilgiyi GÖTÜRÜYORDU, çünkü darboğaz punto değil
   yatay bütçeydi. Alt satırda şerit 374px buluyor, dört ad tam okunuyor.
   ⚠️ Önce ad/puanı ALT ALTA dizmek denendi; taşmayı kapatıyordu ama adlar yine
   kırpık kalıyordu (şerit hâlâ 183px'ti) ve başlık 103px'e şişiyordu. Yer
   sorununu şeridi geniş satıra almak çözünce dikey dizilim GEREKSİZ kaldı,
   geri alındı — iki çözümü üst üste bırakmak boşuna yükseklik demekti.
   `order` şart: şerit başlıkta üçüncü çocuk, `flex-basis:100%` tek başına
   verilse düğmeler ÜÇÜNCÜ satıra düşer. Kural yine künye sayısına bağlı —
   Pişti'nin iki takım künyesi tek satırda rahat duruyor, ona dokunulmuyor. */
header:has(.skorlar > .skor:nth-child(4)){flex-wrap:wrap}
header:has(.skorlar > .skor:nth-child(4)) .skorlar{
  order:9;flex-basis:100%;justify-content:space-between;gap:6px}
/* Şerit alt satıra inince üst satırı sağa yayan öğe kalmıyordu (eskiden
   `.skorlar{flex:1}` düğmeleri sağ kenara itiyordu) — düğmeler ortada asılı
   kalıyordu. Sağ kenar bu yüzden elle geri veriliyor. */
header:has(.skorlar > .skor:nth-child(4)) .ufak{margin-left:auto}
.skor .p{flex:none;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(0,0,0,.4)}

.ufak{display:flex;gap:4px}
/* ⚠️ DOKUNMA 44px GÖRSEL DEĞİL. Üç 44×44 düğme Batak şeridinde künyeleri
   "S…" yapıyor (ölçüldü 2026-08-09, yatay bütçe). Görünen kutu 36; parmak
   kutusu `::after` tamponuyla 44'e çıkar (Apple HIG / WCAG 2.5.5).
   `inset:-4px` + `gap:4px` tamponları tam ortada buluşturur, örtüşmez.
   Kapı: `tool/olc-dokunma.mjs`. */
.ufak button{position:relative;width:36px;height:36px;border-radius:9px;font-size:15px;line-height:1;color:var(--sonuk);
  background:var(--panel-dolgu);
  border:1px solid rgba(0,0,0,.32);box-shadow:var(--parlama)}
.ufak button::after{content:"";position:absolute;inset:-4px}
.ufak button:hover{color:var(--metin)}

/* ── `hidden` SAVUNMASI ──────────────────────────────────────────────────
   HTML'in `hidden` özelliği, TEK bir `display` kuralıyla sessizce eziliyor.
   Bu depoda KRİTİK bir kusur olarak yaşandı: Pişti'de hiç oynamamış oyuncu
   `0 OYUN / 0 GALİBİYET` panelini görüyordu — JS doğru davranıyordu
   (`hidden = true`), CSS yalan söylüyordu (`.istat{display:grid}` ve
   `.buton{display:block}` özgüllükle eziyordu). Tek tek sınıf yamamak yerine
   kural kapatılır.

   Pişti kendi yerelinde bunu kapatmıştı; Okey ve Batak'ta YOKTU. Bugün ikisi de
   `hidden` KULLANMIYOR, yani bu bir hata düzeltmesi değil ZEMİN: `hidden`
   yazan bir sonraki kişi aynı tuzağa düşmesin. Savunma, kusur çıktıktan sonra
   değil ortak katmanda durur.

   ⚠️ `[hidden]` seçicisi `aria-hidden`ı KAPSAMAZ (öznitelik adı farklı) —
   ekran okuyucudan gizlenip görsel kalan öğeler etkilenmiyor, kontrol edildi. */
[hidden]{display:none!important}

/* `position:relative` — `.patlama` (tamamlama anı) buna göre konumlanıyor.
   Düzeni etkilemiyor: `main` zaten flex kolon, yalnız çapa görevi ekliyor. */
main{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px;gap:8px}

/* ── OTURAK (rakip) ───────────────────────────────────────────────────────
   Eskiden üç beyaz dikdörtgen kutuydu; masa değil form görünüyordu. Şimdi
   oturak: pirinç madalyonda baş harf + ad + durum. Sıra kimdeyse madalyon
   pirinç halkayla yanıyor — "sıra sende" bilgisinin tek taşıyıcısı bu. */
.rakipler{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.rakip{position:relative;min-width:0;border-radius:12px;padding:6px 8px;
  background:var(--panel-dolgu);
  border:1px solid rgba(0,0,0,.30);box-shadow:var(--parlama), var(--golge-1)}
/* ⚠️ Madalyon YALNIZ `data-harf` verilmişse çizilir. Koşulsuz yazılırsa
   Pişti'de ikinci bir madalyon çıkıyor — orada oturağın kendi `.rozet`
   düğümü zaten var. Boş `attr()` metni boş bırakır ama daireyi bırakmaz. */
.rakip[data-harf]{padding-left:40px}
.rakip[data-harf]::before{
  content:attr(data-harf);position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:700 13px/1 Georgia,"Noto Serif",serif;color:#2A1E0C;
  background:radial-gradient(120% 120% at 32% 22%, var(--pirinc-parlak), var(--pirinc) 58%, #8E6C2E);
  box-shadow:var(--golge-1), inset 0 1px 0 rgba(255,255,255,.55)}
/* Sıra kimdeyse oturak pirinçle yanar. Pişti kendi sınıfını (`sirada`)
   kullanıyor — ikisi de aynı görünüşü almalı, yoksa "sıra sende" bilgisi
   oyundan oyuna başka türlü okunur. */
.rakip.sira,.rakip.sirada{border-color:var(--pirinc)}
.rakip.sira::before,.rakip.sirada::before{box-shadow:var(--golge-1), inset 0 1px 0 rgba(255,255,255,.55),
  0 0 0 2px rgba(231,190,114,.85), 0 0 18px rgba(231,190,114,.45)}
.rakip .ad{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--metin)}
.rakip .alt,.rakip .bilgi{font-size:12.5px;color:var(--sonuk)}
.rakip .durum.acik{color:#7BD8A8;font-weight:700}
.rakip .durum.kapali{color:var(--silik)}

/* ── OYUN ALANI (çuhanın üstü) ───────────────────────────────────────────
   ⚠️ Bu alan boşken ekranın üçte birini yiyor ve ilk tasarımda bomboş bir
   dikdörtgendi — "yarım kalmış" duygusunun tek büyük kaynağı oydu. Çözüm onu
   küçültmek değil, ÇİZİLMİŞ MASA ÖRTÜSÜ yapmak: gerçek okey/batak muşambası
   da boşken boş görünmez, üstünde oyunun yerleşim çizgileri vardır.

   Üç katman: dikey ayrım çizgileri (per yerleri) + yatay orta çizgi +
   lamba havuzu. Hepsi çok düşük alfa; desen görünsün ama taşların okunmasına
   karışmasın. */
.masa-gruplar,.masa-orta{
  position:relative;
  background:
    radial-gradient(72% 96% at var(--isik-x) 4%, rgba(255,230,180,.14), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.20));
  border:1px solid rgba(0,0,0,.26);border-radius:16px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.26), inset 0 -1px 0 rgba(255,255,255,.06)}
/* Muşambanın ortasındaki soluk damga — boş masayı "bekliyor" gibi gösterir.
   İçeriği oyun kendi CSS'inde `--damga` ile verir; vermezse damga çıkmaz. */
.masa-gruplar::after,.masa-orta::after{
  content:var(--damga,"");position:absolute;inset:0;display:grid;place-items:center;
  font:700 clamp(22px,5vw,44px)/1 Georgia,"Noto Serif",serif;letter-spacing:.22em;
  color:rgba(255,255,255,.055);pointer-events:none;text-transform:uppercase}
.masa-gruplar .bos,.masa-orta .bos{color:var(--sonuk);font-size:12px;position:relative}

/* Ortadaki plakalar (deste / gösterge / koz) — pirinç çerçeveli künye. */
.orta-kutu,.koz-kutu{
  background:var(--panel-dolgu);
  border:1px solid rgba(0,0,0,.32);border-radius:11px;
  box-shadow:var(--parlama), var(--golge-1)}
.orta .etiket,.koz-kutu .et{color:var(--sonuk);letter-spacing:.10em;font-size:12px}
.deste-sayi{color:var(--metin);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.okey-bilgi{color:var(--sonuk)} .okey-bilgi b{color:var(--metin)}

/* ── TAŞ / KART — fildişi ────────────────────────────────────────────────
   Malzemenin tamamı burada: üstte parlama, altta ton düşüşü, dışta tek yönlü
   gölge. Sayı KAZINMIŞ gibi dursun diye açık renkli bir alt gölge alıyor. */
.tas,.kart{
  background:linear-gradient(163deg, #FDF9F0 0%, var(--fildisi) 46%, var(--fildisi-dip) 100%);
  border:1px solid rgba(120,95,55,.45);
  box-shadow:var(--golge-1), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(120,95,55,.22);
  color:var(--metin-koyu)}
.tas .sayi{text-shadow:0 1px 0 rgba(255,255,255,.72)}
.tas.t-siyah{color:var(--t-siyah)} .tas.t-kirmizi{color:var(--t-kirmizi)}
.tas.t-mavi{color:var(--t-mavi)}   .tas.t-sari{color:var(--t-sari)}
/* Okey taşı: pirinç çerçeve. Eskiden sarı bir iç çizgiydi, taşın malzemesinden
   kopuktu; şimdi çerçeve DIŞTA, yani taşa takılmış bir halka gibi. */
.tas.okey{box-shadow:var(--golge-2), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 2px var(--pirinc)}

/* Kapalı taş / kart arkası: çuhayla aynı aileden koyu yeşil, ceviz kenar. */
.tas.kapali,.kart[data-kapali="1"]{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 8px),
    linear-gradient(160deg,#1D4A3E,#123027);
  border-color:rgba(0,0,0,.45)}

/* ── ISTAKA / EL — ceviz pervaz ──────────────────────────────────────────
   Oyuncunun kendi eli fiziksel bir nesnenin üstünde durmalı: okeyde ıstaka,
   kartta masa kenarı. Ahşap dokusu iki katman — damar + üstten ışık. */
/* ⚠️ Ahşap damarı DÜZENLİ OLMAMALI. İlk sürüm tek bir 3px/7px tekrarıydı ve
   kadife/fitilli kumaş gibi görünüyordu — gözün yakaladığı şey ritmin
   düzenliliği. Üç farklı adımda (7/13/23px), farklı açılarda ve çok düşük
   alfada üst üste binen üç tekrar, asal olmayan ortak katı yüzünden gözle
   fark edilmeyen uzun bir desen üretiyor: ahşap böyle okunuyor. */
.ben{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.08) 38%, rgba(0,0,0,.28)),
    repeating-linear-gradient(0.7deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-0.5deg, rgba(255,255,255,.022) 0 3px, transparent 3px 13px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 5px, transparent 5px 23px),
    linear-gradient(180deg, var(--ceviz-ust), var(--ceviz) 44%, var(--ceviz-dip));
  border:1px solid rgba(0,0,0,.42);border-radius:13px;
  box-shadow:var(--golge-3), inset 0 1px 0 rgba(255,255,255,.20)}
.yuva{background:rgba(0,0,0,.24);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.yuva.hedef{background:rgba(231,190,114,.28);box-shadow:inset 0 0 0 2px var(--pirinc)}

/* Seçili taş masadan KALKAR — gölgesi de büyür. Gölge büyümezse taş kalkmış
   değil, sadece kaymış görünür; yükseklik duygusu gölgeden gelir. */
.yuva .tas.secili,.el .kart.secili{
  transform:translateY(-6px);
  box-shadow:var(--golge-3), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 2px var(--pirinc)}

/* ── EYLEM DÜĞMELERİ ────────────────────────────────────────────────────── */
.eylem button{
  border:1px solid rgba(0,0,0,.34);border-radius:10px;padding:8px 11px;
  font-size:13px;font-weight:700;min-height:40px;color:var(--metin);
  background:var(--panel-dolgu);
  box-shadow:var(--parlama), var(--golge-1)}
.eylem button:hover:not(:disabled){background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24))}
.eylem button:active:not(:disabled){transform:translateY(1px);box-shadow:var(--golge-1)}
.eylem button:disabled{opacity:.58;cursor:not-allowed;box-shadow:none}
.eylem button.birincil,.buton{
  background:linear-gradient(180deg, var(--pirinc-parlak), var(--pirinc) 55%, #A87F35);
  border-color:#8E6C2E;color:#2A1E0C;text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--golge-2)}
.eylem button.tehlike{color:#F0A79C}
.eylem .ipucu{font-size:12.5px;color:var(--sonuk);text-align:right;max-width:190px;line-height:1.3}
.eylem .ipucu b{color:var(--pirinc-parlak)}

/* ── PERDE / KUTU ────────────────────────────────────────────────────────
   Perde arkası masayı gizlemiyor, karartıyor: oyun orada durmaya devam
   ediyor hissi. Kutu ceviz masanın üstündeki bir kâğıt gibi fildişi. */
.perde{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:40;
  background:radial-gradient(90% 70% at 50% 40%, rgba(8,18,15,.60), rgba(4,10,8,.86))}
.perde.acik{display:flex}
.kutu{
  background:linear-gradient(178deg,#FBF6EA,#EFE5D0);color:var(--metin-koyu);
  border:1px solid rgba(90,68,38,.35);border-radius:var(--r);padding:18px;max-width:520px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:var(--golge-3), inset 0 1px 0 rgba(255,255,255,.9)}
.kutu h2{margin:0 0 3px;font-size:21px;letter-spacing:-.01em}
.kutu .altbaslik{margin:0 0 14px;font-size:12px;color:#6E6250}
.kutu .not{font-size:11px;color:#6E6250;margin-top:11px;line-height:1.55}
.kutu .not b{color:var(--metin-koyu)}
.grup-ayar .baslik{font-size:10px;font-weight:800;color:#8A7C64;letter-spacing:.10em;margin-bottom:6px}
.secenekler button{
  border:1px solid rgba(90,68,38,.30);border-radius:9px;padding:7px 11px;font-size:13px;font-weight:600;
  background:linear-gradient(180deg,#FFFCF5,#F2E9D6);color:var(--metin-koyu);box-shadow:var(--golge-1)}
.secenekler button[aria-pressed="true"]{
  background:linear-gradient(180deg, var(--pirinc-parlak), var(--pirinc));border-color:#8E6C2E;color:#2A1E0C}
.secenekler button small{display:block;font-size:10px;font-weight:500;opacity:.75}
.buton{display:block;width:100%;border-radius:11px;padding:12px;font-size:15px;font-weight:800;margin-top:9px;border:1px solid #8E6C2E}
.buton.ikincil{background:linear-gradient(180deg,#FFFCF5,#F0E7D4);color:var(--metin-koyu);
  border-color:rgba(90,68,38,.30);text-shadow:none}
.kurallar h3{color:#8A6A12}
.kurallar .vurgu{background:#F6EEDC;border-left:3px solid var(--pirinc);padding:8px 11px;border-radius:0 7px 7px 0}
.tohum{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:#6E6250;word-break:break-all}
table.sayim th,table.sayim td{border-bottom:1px solid rgba(90,68,38,.20)}
table.sayim tr.ben-satir{background:#F6EEDC}

.duyuru{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:30;
  background:linear-gradient(180deg,#FBF6EA,#EFE5D0);color:var(--metin-koyu);
  border:1px solid var(--pirinc);border-radius:12px;padding:10px 18px;font-weight:800;
  box-shadow:var(--golge-3);opacity:0;pointer-events:none;transition:opacity .18s}
.duyuru.gor{opacity:1}

/* ── HAREKET ─────────────────────────────────────────────────────────────
   Tek kural: hareket ışığa uymalı. Taş masaya konarken gölgesi küçülür
   (yaklaşıyor), kalkarken büyür. Süreler kısa — bu bir animasyon gösterisi
   değil, dokunma geri bildirimi. */
@keyframes tas-koy{from{transform:translateY(-14px) scale(1.04);opacity:0}to{transform:none;opacity:1}}
@keyframes plaka-gir{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.yuva .tas.yeni{animation:tas-koy .30s cubic-bezier(.2,.7,.3,1)}
.orta-kutu,.rakip{animation:plaka-gir .28s ease-out both}

/* SIRA NABZI — "kimin sırası?" bir kart oyununda en sık sorulan soru ve renk
   değişimi onu yeterince yüksek sesle söylemiyor; HAREKET gerekiyor. Bu ezgi
   Pişti'de doğdu, orada oturağın `.rozet` düğümünde duruyordu — yani üç oyunun
   ikisi sessizdi. Ortak katmana taşındı ve Pişti'deki yereli KALDIRILDI:
   yukarıdaki `.rakip.sira,.rakip.sirada` kuralının kendi gerekçesi zaten
   "ikisi de aynı görünüşü almalı, yoksa bilgi oyundan oyuna başka okunur".
   İki sınıf adı da hedefleniyor: Okey/Batak `sira`, Pişti `sirada` yazıyor.

   Halka pirinç madalyonun üstünde büyüyor — masanın tek ışık kaynağı kuralına
   uyar, çünkü parlayan şey zaten ışığı toplayan yüzey. `box-shadow` animasyonu
   düzen (layout) hesabı tetiklemiyor.

   ⚠️ İKİ AYRI ÇAPA, TEK RİTİM. Madalyon her oyunda aynı düğüm DEĞİL:
     · Okey/Batak → `.rakip[data-harf]::before` (baş harfli pirinç daire)
     · Pişti      → `.rakip .rozet` (kendi skor madalyonu; `data-harf` YAZMIYOR,
                     yani orada `::before` diye bir şey hiç oluşmuyor)
   Tek seçiciye indirmek Pişti'nin nabzını KONSOL HATASI VERMEDEN yok ederdi —
   bu depoda pahalıya öğrenilen sessiz kusur sınıfının tam örneği. O yüzden iki
   kural var ama süre/yumuşatma/oran birebir aynı: göz tek bir dil görüyor.
   Taban gölgeleri farklı olduğu için kare listeleri de ayrı olmak zorunda
   (`box-shadow` animasyonu tüm yığını yeniden yazar; taban tekrarlanmazsa
   madalyonun kendi kabartması animasyon boyunca kaybolur). */
@keyframes sira-nabzi{
  0%,100%{box-shadow:var(--golge-1), inset 0 1px 0 rgba(255,255,255,.55),
          0 0 0 2px rgba(231,190,114,.85), 0 0 18px rgba(231,190,114,.45)}
  60%    {box-shadow:var(--golge-1), inset 0 1px 0 rgba(255,255,255,.55),
          0 0 0 9px rgba(231,190,114,0),  0 0 18px rgba(231,190,114,.15)}
}
@keyframes sira-nabzi-rozet{
  0%,100%{box-shadow:0 0 0 0 rgba(231,190,114,.55)}
  60%    {box-shadow:0 0 0 9px rgba(231,190,114,0)}
}
/* ⚠️ `[data-harf]` / `:not([data-harf])` ayrımı ŞART, süs değil: Okey'in
   `.rakip` kutusunda `.rozet` diye BAŞKA anlamda bir düğüm var (AÇIK/ÇİFT
   durumu). Kural daraltılmazsa Okey'de madalyon ve durum rozeti AYNI ANDA
   atar — kaçınmaya çalıştığımız çift ritmin ta kendisi. Kuralın okunuşu:
   "madalyon, `data-harf` varsa `::before`tir; yoksa `.rozet`tir." */
.rakip[data-harf].sira::before,.rakip[data-harf].sirada::before{
  animation:sira-nabzi 1.6s ease-in-out infinite}
.rakip:not([data-harf]).sira .rozet,.rakip:not([data-harf]).sirada .rozet{
  animation:sira-nabzi-rozet 1.6s ease-in-out infinite}

/* PERDE GİRİŞİ — menü/kurallar/sonuç kutuları anında "beliriyordu"; sıçrama
   ucuz ama algılanan kaliteyi en çok değiştiren yer burası. Perde
   `display:none → flex` olduğu için kutu her açılışta yeniden çiziliyor,
   animasyon da her seferinde baştan koşuyor. Süre 280 ms: kısa geçiş bandının
   (50–200 ms) hemen üstü, orta bandın (250–400 ms) altı — kutu büyük, daha
   hızlısı sıçrama gibi duruyor. */
@keyframes kutu-gir{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.perde.acik > .kutu{animation:kutu-gir .28s cubic-bezier(.2,.9,.3,1)}

/* ── BOŞTA DÜRTME ────────────────────────────────────────────────────────
   Sıra oyuncudayken uzun süre hiçbir şey olmuyorsa oynanabilir parçalar üç kez
   nabız atar. Bu süs değil ELDE TUTMA: bu türde en sık sessiz terk sebebi
   "neden ilerlemiyor?" anı — oyuncu sırasının kendisinde olduğunu fark etmiyor
   ve oyunu bozuk sanıp kapatıyor.

   Ezgi Pişti'de doğdu (`.el.durt .kart.oynanabilir`) ve üç oyunun ikisi
   sessizdi — `sira-nabzi` ile birebir aynı hikâye. Ortak katmana taşındı;
   Pişti'nin yereli KALDIRILDI ki tek bir yerden yönetilsin.

   ⚠️ ÜÇ OYUNDA ÜÇ FARKLI PARÇA, TEK RİTİM (yine `sira-nabzi` dersi):
     · Pişti → `.el .kart.oynanabilir`   (elindeki oynanabilir kart)
     · Batak → `.el .kart.oynanabilir`   (aynı yapı)
     · Okey  → `.ben.durt .istaka .tas`  (ıstaka İKİ SATIR: `#istakaUst` +
                                          `#istakaAlt`. Sınıf tek satıra yazılsa
                                          elin yarısı atar, yarısı durur — göz
                                          bunu ritim değil arıza olarak okur.
                                          O yüzden çapa ortak kap `#benKutu`.
                                          Ayrıca Okey'de "oynanabilir" sınıfı
                                          YOK: sıra sendeyse her taş atılabilir.)
   Tek seçiciye indirmek Okey'i sessizce dilsiz bırakırdı.

   `translateY` seçildi, `top` değil: yalnız bileşim katmanında koşuyor, düzen
   hesabı tetiklemiyor. 1.5 sn × 3 tekrar = 4,5 sn — sonra kendiliğinden susar;
   sonsuz nabız bir süre sonra uyarı olmaktan çıkıp gürültü olur. */
@keyframes durtme{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.el.durt .kart.oynanabilir,.ben.durt .istaka .tas{animation:durtme 1.5s ease-in-out 3}

/* ── TAMAMLAMA ANI ───────────────────────────────────────────────────────
   `docs/plan/premium-his.md` Madde 2: el/oyun sonu koreografisi Pişti'de VARDI
   (`#patlama`), Okey ve Batak'ta HİÇ YOKTU — üç oyunun en görünür dil kırığı.
   Rakip incelemesinde de en zayıf nokta: Royal Smash'in 18 gerçek ekran
   görüntüsünün hiçbiri bir ödül anı göstermiyor, yani rakip bunu pazarlamada
   bile öne çıkarmıyor ([[royal-smash]] Bölüm 3). Bizim için ucuz ayrışma.

   İKİ AŞAMALI, bilerek:
     ① `.patlama` — ne olduğunu tek kelimeyle söyleyen büyük yazı (PİŞTİ /
        BİTTİ / TUTTURDU / BATTI). 1,25 sn, kendi kendine söner.
     ② `table.sayim tr.satir` — sayım tablosu satır satır açılır. Hepsi birden
        belirirse göz nereye bakacağını bilemiyor; sıralı açılış okuma sırasını
        DAYATIR. Gecikme satır indisinden geliyor (`--i`), JS zamanlayıcı YOK —
        zamanlayıcı ile yapılan sıralamalar sekmeden çıkılınca dağılıyor.

   Eğri Pişti'nin eğrisi (`cubic-bezier(.2,.9,.3,1)`). Material'ın
   `emphasized-decelerate` (.05,.7,.1,1) da değerlendirildi ve REDDEDİLDİ:
   amaç en iyi eğriyi bulmak değil ÜÇ OYUNUN AYNI eğriyi kullanması, ve bu eğri
   zaten üründe koşuyor + kapıdan geçmiş durumda. Yeni eğri = dördüncü lehçe. */
@keyframes patla{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
  30%{transform:translate(-50%,-50%) scale(1)}
  76%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.98)}
}
.patlama{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  z-index:25;text-align:center;pointer-events:none;opacity:0;
}
.patlama.gor{animation:patla 1.25s cubic-bezier(.2,.9,.3,1) forwards}
.patlama .buyuk{
  font-size:clamp(34px,11vw,62px);font-weight:900;letter-spacing:-2px;
  color:var(--altin-parlak,var(--pirinc-parlak));text-shadow:0 3px 0 rgba(0,0,0,.14);
  line-height:1;
}
.patlama .kucuk{font-size:15px;font-weight:800;color:var(--metin);margin-top:4px}

/* Sayım satırlarının sıralı açılışı. `--i` satır indisi; JS yalnız onu yazıyor.
   ⚠️ `both` ŞART: animasyon gecikmesi boyunca satır `from` durumunda (görünmez)
   kalmalı — `both` olmadan satır önce TAM görünür çiziliyor, sonra kaybolup
   yeniden giriyor ve göz bir sıçrama görüyor. */
@keyframes satir-gir{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
table.sayim tr.satir{animation:satir-gir .26s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--i,0) * 70ms)}

/* ⚠️ `*::before,*::after` ŞART — evrensel seçici SÖZDE-ÖĞELERİ KAPSAMAZ.
   Yalnız `*` yazılıydı ve `sira-nabzi` (madalyonun `::before`ı) hareketi azalt
   açıkken ATMAYA DEVAM EDİYORDU. Konsolda hata yok, CSS "yazılmış" görünüyor,
   kusur yalnız DAVRANIŞ ölçülünce çıkıyor (tool/olc-hareket.mjs bunu kırmızı
   gördü). Pişti'nin yerel koruması bu üç seçiciyi baştan yazıyordu; ortak
   katman geride kalmıştı. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}