/* ══════════════════════════════════════════════════════════════════
   ANA DERNEĞİ — SİTE STİLİ
   ⛔ Elle düzenlenmez; `_arac/uret.py` üretir.

   RENKLER — kimlik hattının TEK karar dosyasından
   (`sosyal/marka/ana-dernegi/uretim/karar.py`). ⛔ Renk İCAT EDİLMEZ.
     mürekkep #000000 (logo) · vurgu #1E406B parlamento · kâğıt #F3F7FC
     gece #091320 · gövde #1E406B · parlamento açık #427ECA
   ⭐ Buğra 12.08.2026: "Marka rengi paleti Arz ile benzerlik taşıyabilir ·
      farklı sitelerdeki renklerin benzeşmesinde sorun olmaz." → renk Arz'la
      BİLEREK aynı. Kurumları ayıran şey LOGO'dur, renk değil.
   ⚠️ Parlamento KOYU zeminde yalnız 1,78:1 verir → koyu zeminde ASLA vurgu
      kullanılmaz, `--acik` (#427ECA, gece ile 4,50:1) kullanılır.
   ⭐ LOGO SİYAH-BEYAZ KALIR; renk yalnız arayüzdedir.

   YAZI — Anybody (başlık, wdth 150 onarılmış) + Inter (gövde). ⭐ Arz'ın takımı;
   Buğra 12.08.2026: "Arz'ın yazı tipleri çok iyiydi ... bu tipler kullanılsın."
   ⚠️ Anybody'nin İ noktası wdth 150'de bozuktu; gömülen `anybody-genis.woff2`
      ONARILMIŞ sürümdür (`web/arz-v2/_uret/font_hazirla.py`). ⛔ Ham Anybody
      yeniden subset'lenmez, onarım kaybolur.
   ⛔ Anybody'nin İTALİĞİ YOK — italik gereken yerde ağırlık/renk kullanılır.
   ⚠️ Başlıklarda optik boyut SABİT: `font-optical-sizing:none` + açık `opsz`.
   ⛔ 16 px altına inen metin yok.
   ══════════════════════════════════════════════════════════════════ */

@font-face{ font-family:"Anybody"; src:url("/varlik/font/anybody-genis.woff2?s=8656414e75")
  format("woff2-variations"); font-weight:300 700; font-style:normal;
  font-display:swap; }
@font-face{ font-family:"Inter"; src:url("/varlik/font/inter.woff2?s=e1ad203438")
  format("woff2-variations"); font-weight:200 1000; font-style:normal;
  font-display:swap; }

:root{
  --murekkep:#000000;
  --vurgu:#1E406B;
  --kagit:#F3F7FC;
  --gece:#091320;
  --govde:#1E406B;
  --acik:#427ECA;
  --beyaz:#FFFFFF;
  --cizgi:#C8DAF0;
  --cizgi-koyu:#4A2029;
  --dis:20px;
  --ara:clamp(40px,7vw,84px);
  --yuvarlak:14px;
  --en:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--kagit); color:var(--gece);
  font-family:"Inter",system-ui,sans-serif;
  font-size:17px; line-height:1.62; font-weight:400;
  font-variation-settings:"wght" 400,"opsz" 16;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,blockquote{
  font-family:"Anybody",system-ui,sans-serif; font-optical-sizing:none;
  margin:0; line-height:1.15; letter-spacing:-.005em;
}
h1{ font-size:clamp(34px,7.6vw,60px); font-variation-settings:"wght" 700; }
h2{ font-size:clamp(26px,4.6vw,38px); font-variation-settings:"wght" 700; }
h3{ font-size:21px; font-variation-settings:"wght" 700; }
h4{ font-size:19px; font-variation-settings:"wght" 700; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:var(--vurgu); text-decoration-thickness:1px;
   text-underline-offset:3px; }
a:hover{ color:var(--gece); }
:focus-visible{ outline:3px solid var(--vurgu); outline-offset:3px;
                border-radius:4px; }

.amblem{ width:44px; height:auto; color:var(--murekkep); flex:none; }

/* ─────────── ÜST ─────────── */
/* ⚠️ Yapışkan üst çubuk 360 px'te iki satır menüyle ekranın dörtte birini
   yiyordu; mobilde SABİT değil, akışta duruyor. 860 px'ten sonra tek satıra
   sığdığı için yapışkan oluyor. */
.ust{
  position:static; z-index:40;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px var(--ara);
  padding:12px var(--dis);
  background:rgba(243,247,252,.96); border-bottom:1px solid var(--cizgi);
}
.marka{ display:flex; align-items:center; gap:11px; text-decoration:none;
        color:var(--gece); }
.marka .amblem{ width:38px; }
.marka-yazi{ display:flex; flex-direction:column; line-height:1.15; }
.marka-yazi b{ font-family:"Anybody",sans-serif; font-optical-sizing:none;
  font-variation-settings:"wght" 700; font-size:19px; letter-spacing:.055em; }
.marka-yazi i{ font-style:normal; font-size:16px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--govde);
  font-variation-settings:"wght" 600; }
.gez{ flex:1 1 100%; }
.gez ul{ display:flex; flex-wrap:wrap; gap:2px 18px; }
.gez a{
  display:inline-block; padding:5px 0; font-size:16px; text-decoration:none;
  color:var(--gece); font-variation-settings:"wght" 600;
  border-bottom:2px solid transparent;
}
.gez a:hover{ color:var(--vurgu); border-bottom-color:var(--cizgi); }
.gez a[aria-current="page"]{ color:var(--vurgu);
  border-bottom-color:var(--vurgu); }

/* ─────────── ORTAK KUTU ─────────── */
.blok,.cagri,.alinti-band,.sayfa-bas,.hero-ic,.proje-hero-ic,.altb-ic{
  max-width:var(--en); margin-inline:auto; }
.blok{ padding:var(--ara) var(--dis); }
/* ⚠️ Dar blok ORTALANMAZ — ortalanınca sol kenarı diğer bölümlerden içeride
   kalıyor ve sayfa kaymış görünüyordu (1440'ta gözle yakalandı). Kutu aynı
   kalır, yalnız SATIR UZUNLUĞU kısalır: sol hiza her yerde aynı. */
.blok-dar > *{ max-width:760px; }
/* ⭐ Açık zeminli bölüm: DÜZEN normal blokla birebir aynı kalsın diye kutu
   genişletilmez; yalnız zemin iki yana taşırılır (kutu gölgesi + kırpma).
   Böylece sol hiza bozulmaz ve fazladan sarmalayıcı gerekmez. */
.blok-acik{ background:#F6E9EC; box-shadow:0 0 0 100vmax #F6E9EC;
            clip-path:inset(0 -100vmax); }
.bolum-bas{ margin-bottom:6px; }
.bolum-alt{ color:var(--govde); font-size:17px; margin-bottom:26px;
            font-variation-settings:"wght" 600; }
.bolum-bas + .kart-liste,.bolum-bas + .izgara,.bolum-bas + .proje-liste,
.bolum-bas + .duyuru-liste,.bolum-bas + .seffaf-liste,.bolum-bas + .kunye,
.bolum-bas + p{ margin-top:22px; }
.iri{ font-size:clamp(19px,2.4vw,23px); line-height:1.5; color:var(--govde);
      font-variation-settings:"wght" 600; }
.orta-yazi{ max-width:720px; margin-bottom:26px; }
.not{ font-size:16px; color:var(--govde); }
.devam{ margin-top:26px; }
.devam a{ font-variation-settings:"wght" 700; text-decoration:none;
          border-bottom:2px solid var(--cizgi); padding-bottom:2px; }
.devam a:hover{ border-bottom-color:var(--vurgu); }
.devam i{ font-style:normal; }

/* ─────────── HERO ─────────── */
.hero{ position:relative; background:var(--gece); color:var(--kagit);
       overflow:hidden; }
.hero-resim-kutu{ position:absolute; inset:0; }
/* ⚠️ İlk denemede fotoğraf %34 saydamlık + koyu örtüyle neredeyse tamamen
   kayboluyordu; ekran görüntüsünde yakalandı. Fotoğraf açıldı, örtü
   yazının OLDUĞU tarafta koyu, karşı tarafta açık bırakıldı — kontrast
   ölçümü yine eşiğin üstünde (bkz. _kanit/kontrast). */
.hero-resim{ width:100%; height:100%; object-fit:cover; opacity:.62; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(175deg,rgba(32,8,13,.90) 0%,rgba(32,8,13,.80) 46%,
             rgba(32,8,13,.66) 100%); }
.hero-ic{ position:relative; z-index:2; padding:clamp(48px,9vw,104px)
          var(--dis) clamp(44px,8vw,92px); }
.amblem-hero{ width:76px; color:var(--kagit); margin-bottom:20px; }
.hero-uste{ font-size:16px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--kagit); font-variation-settings:"wght" 700; margin-bottom:12px; }
.hero h1{ font-size:clamp(40px,9.4vw,78px); color:var(--kagit);
          font-variation-settings:"wght" 700; }
.hero-alt{ margin-top:22px; max-width:640px; font-size:clamp(17px,2.1vw,20px);
           color:var(--kagit); }
.dug-sira{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.dug{
  display:inline-block; padding:13px 24px; border-radius:999px;
  /* ⚠️ Yazı rengi GECE iken ölçüm 4,51:1 veriyordu — eşiğin kıl payı
     üstü. Mürekkep (logonun kendi siyahı) 5,20:1'e çıkarıyor; yeni renk
     icat edilmedi. */
  background:var(--acik); color:var(--murekkep); text-decoration:none;
  font-size:17px; font-variation-settings:"wght" 700;
  border:2px solid var(--acik);
}
.dug:hover{ background:var(--kagit); border-color:var(--kagit);
            color:var(--gece); }
.dug-bos{ color:var(--kagit); }
.dug-bos{ background:transparent; color:var(--kagit);
          border-color:rgba(243,247,252,.5); }
.dug-bos:hover{ background:var(--kagit); border-color:var(--kagit);
                color:var(--gece); }

/* ─────────── KARTLAR ─────────── */
.kart-liste{ display:grid; gap:14px; grid-template-columns:1fr; }
.kart{ background:var(--beyaz); border:1px solid var(--cizgi);
       border-radius:var(--yuvarlak); padding:22px 20px; }
.kart h3{ color:var(--vurgu); margin-bottom:8px; }
.kart p{ font-size:16.5px; color:var(--gece); }

/* ─────────── PROJE KARTLARI ─────────── */
.proje-liste{ display:grid; gap:22px; grid-template-columns:1fr; }
.proje-kart{ background:var(--beyaz); border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak); overflow:hidden; }
.proje-bag{ display:block; text-decoration:none; color:var(--gece);
            height:100%; }
.proje-resim-kutu{ display:block; aspect-ratio:16/10; overflow:hidden;
                   background:var(--gece); }
.proje-resim{ width:100%; height:100%; object-fit:cover; }
.proje-ic{ display:block; padding:22px 20px 24px; }
.proje-etiket{ display:inline-block; font-size:16px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--vurgu);
  font-variation-settings:"wght" 700; }
.proje-ad{ display:block; margin-top:10px; font-family:"Anybody",sans-serif;
  font-optical-sizing:none; font-variation-settings:"wght" 700;
  font-size:clamp(26px,4vw,34px); line-height:1.1; }
.proje-yil{ display:block; margin-top:6px; font-size:16px;
            color:var(--govde); font-variation-settings:"wght" 600; }
.proje-ozet{ display:block; margin-top:12px; font-size:16.5px; }
.dug-yazi{ display:inline-block; margin-top:16px;
  font-variation-settings:"wght" 700; color:var(--vurgu);
  border-bottom:2px solid var(--cizgi); padding-bottom:2px; }
.proje-bag:hover .dug-yazi{ border-bottom-color:var(--vurgu); }
.proje-bag:hover .proje-resim{ transform:scale(1.03); }
.proje-resim{ transition:transform .4s ease; }

/* ─────────── ALINTI ─────────── */
/* ⭐ Alıntı bandı AYDINLIK. Sivil toplum sitesi "ulaşılabilir ve güven
   veren" olacak (SITE_MIMARISI); ana sayfada üst üste dört koyu kütle
   (hero + alıntı + çağrı + alt bilgi) ağır duruyordu. */
.alinti-band{ background:var(--beyaz); border-block:1px solid var(--cizgi); }
.alinti-band blockquote{ margin:0; padding:var(--ara) var(--dis);
  border-left:5px solid var(--vurgu); max-width:900px; }
.alinti-band p{ font-family:"Anybody",sans-serif; font-optical-sizing:none;
  font-variation-settings:"wght" 500;
  font-size:clamp(23px,3.6vw,34px); line-height:1.34; color:var(--gece); }
.alinti-band cite{ display:block; margin-top:18px; font-style:normal;
  font-family:"Inter",sans-serif; font-size:16px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vurgu);
  font-variation-settings:"wght" 700; }

/* ─────────── DUYURU ─────────── */
.duyuru-liste{ display:grid; gap:16px; }
.duyuru-liste li{ background:var(--beyaz); border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak); padding:22px 20px;
  border-left:4px solid var(--vurgu); }
.blok-acik .duyuru-liste li{ background:var(--beyaz); }
.duyuru-liste time{ display:block; font-size:16px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--govde);
  font-variation-settings:"wght" 700; }
.duyuru-liste h3{ margin:8px 0 8px; }
.duyuru-liste p{ font-size:16.5px; }

/* ─────────── ŞEFFAFLIK / İLETİŞİM ─────────── */
.seffaf-liste,.iletisim-liste{ display:grid; gap:16px; }
.seffaf,.ilet{ background:var(--beyaz); border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak); padding:22px 20px; }
.seffaf h3,.ilet h3{ color:var(--vurgu); margin-bottom:8px; }
.seffaf p,.ilet p{ font-size:16.5px; }
.kunye{ margin:0; display:grid; gap:0; border-top:1px solid var(--cizgi); }
.kunye > div{ display:grid; gap:2px; padding:15px 0;
              border-bottom:1px solid var(--cizgi); }
.kunye dt{ font-size:16px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--govde); font-variation-settings:"wght" 700; }
.kunye dd{ margin:0; font-size:17px; }
.uyari{ background:var(--beyaz); border:1px solid var(--cizgi);
  border-left:4px solid var(--vurgu); border-radius:var(--yuvarlak);
  padding:20px; font-size:16.5px; color:var(--gece); }

/* ─────────── SAYFA BAŞI ─────────── */
.sayfa-bas{ padding:clamp(40px,6vw,72px) var(--dis) 6px; }
.sayfa-ust{ font-size:16px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--vurgu); font-variation-settings:"wght" 700; margin-bottom:10px; }
.sayfa-alt{ margin-top:14px; font-size:clamp(18px,2.2vw,21px);
            color:var(--govde); font-variation-settings:"wght" 600; }

/* ─────────── PROJE HERO ─────────── */
.proje-hero{ position:relative; background:var(--gece); color:var(--kagit);
             overflow:hidden; }
.proje-hero .hero-resim{ opacity:.62; }
.proje-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(175deg,rgba(32,8,13,.90) 0%,rgba(32,8,13,.82) 50%,
             rgba(32,8,13,.68) 100%); }
.proje-hero-ic{ position:relative; z-index:2;
  padding:clamp(44px,7vw,86px) var(--dis); }
.proje-hero .sayfa-ust{ color:var(--kagit); }
.proje-hero h1{ color:var(--kagit); }
.proje-hero-ozet{ margin-top:18px; max-width:640px;
  font-size:clamp(18px,2.2vw,21px); color:var(--kagit); }
.proje-hero-kunye{ margin-top:16px; font-size:16px; color:var(--kagit);
                   font-variation-settings:"wght" 600; }

/* ─────────── GALERİ + IŞIK KUTUSU (SAF CSS) ─────────── */
.izgara{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.kare{ scroll-margin-top:120px; }
.kare-bag{ position:relative; display:block; overflow:hidden;
  border-radius:10px; background:var(--gece); aspect-ratio:4/3;
  text-decoration:none; }
.kare-resim{ width:100%; height:100%; object-fit:cover;
             transition:transform .45s ease; }
.kare-bag:hover .kare-resim{ transform:scale(1.05); }
.kare-alt{ position:absolute; left:0; right:0; bottom:0; padding:30px 12px 11px;
  font-size:16px; line-height:1.35; color:var(--beyaz);
  background:linear-gradient(180deg,rgba(32,8,13,0),rgba(32,8,13,.9));
  opacity:0; transition:opacity .25s ease; }
.kare-bag:hover .kare-alt,.kare-bag:focus-visible .kare-alt{ opacity:1; }
.kare-buyutec{ position:absolute; top:8px; right:8px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(243,247,252,.92); color:var(--gece); font-size:20px;
  line-height:1; font-variation-settings:"wght" 700; }

.buyut{ display:none; }
.buyut:target{ display:flex; position:fixed; inset:0; z-index:90;
  align-items:center; justify-content:center; padding:56px 14px 84px;
  background:rgba(20,4,8,.97); }
.buyut-perde{ position:absolute; inset:0; }
.buyut-ic{ position:relative; z-index:2; margin:0; max-width:1100px;
           width:100%; display:flex; flex-direction:column; gap:12px; }
.buyut-resim{ width:100%; max-height:70vh; object-fit:contain;
              border-radius:8px; }
.buyut-ic figcaption{ color:var(--kagit); font-size:16px; text-align:center;
                      line-height:1.45; }
.buyut-say{ display:block; margin-top:6px; font-size:16px;
            letter-spacing:.14em; color:var(--acik);
            font-variation-settings:"wght" 700; }
.buyut-kapat,.buyut-yon{ position:absolute; z-index:3; display:flex;
  align-items:center; justify-content:center; text-decoration:none;
  color:var(--gece); background:var(--kagit); border-radius:50%;
  font-variation-settings:"wght" 700; }
.buyut-kapat{ top:10px; right:12px; width:44px; height:44px; font-size:27px;
              line-height:1; }
.buyut-yon{ bottom:20px; width:52px; height:52px; font-size:32px;
            line-height:1; }
.buyut-onceki{ left:14px; }
.buyut-sonraki{ right:14px; }
.buyut-kapat:hover,.buyut-yon:hover{ background:var(--acik);
                                     color:var(--gece); }

/* ─────────── ÇAĞRI ─────────── */
.cagri{ max-width:none; background:var(--gece); color:var(--kagit); }
.cagri > *{ max-width:820px; margin-inline:auto; }
.cagri h2{ color:var(--kagit); padding-top:var(--ara);
           padding-inline:var(--dis); }
.cagri p{ padding-inline:var(--dis); margin-top:16px; font-size:17.5px;
          color:var(--kagit); }
.cagri .dug-sira{ padding-bottom:var(--ara); }

/* ─────────── ALT BİLGİ ─────────── */
.altb{ background:var(--gece); color:var(--kagit); }
.altb-ic{ display:grid; gap:30px; padding:var(--ara) var(--dis) 26px; }
.amblem-altb{ width:52px; color:var(--kagit); margin-bottom:14px; }
.altb-marka p{ font-size:16px; color:var(--kagit); max-width:340px; }
.altb-marka b{ font-family:"Anybody",sans-serif; font-optical-sizing:none;
  font-variation-settings:"wght" 700; font-size:19px; letter-spacing:.05em; }
.altb-kutu h4{ color:var(--kagit); margin-bottom:12px; font-size:16px;
  letter-spacing:.16em; text-transform:uppercase;
  font-family:"Inter",sans-serif; font-variation-settings:"wght" 700; }
.altb-kutu p{ font-size:16px; color:var(--kagit); margin-bottom:.7em; }
.altb a{ color:var(--kagit); text-underline-offset:3px; }
.altb a:hover{ color:var(--acik); }
.altb-gez{ display:grid; gap:7px; }
.altb-gez a{ font-size:16px; text-decoration:none; }
.altb-gez a:hover{ text-decoration:underline; }
.altb-satir{ border-top:1px solid var(--cizgi-koyu); margin:0;
  padding:20px var(--dis) 26px; font-size:16px; color:var(--kagit);
  text-align:center; max-width:var(--en); margin-inline:auto; }

/* ═══════════════ GENİŞLEDİKÇE ═══════════════ */
@media (min-width:560px){
  .izgara{ grid-template-columns:repeat(3,1fr); }
  .kart-liste{ grid-template-columns:repeat(2,1fr); }
  .iletisim-liste{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:860px){
  :root{ --dis:34px; }
  .ust{ flex-wrap:nowrap; gap:34px; position:sticky; top:0; }
  .gez{ flex:1; }
  .gez ul{ justify-content:flex-end; gap:4px 24px; }
  .kart-liste{ grid-template-columns:repeat(3,1fr); }
  .izgara{ grid-template-columns:repeat(4,1fr); gap:13px; }
  .izgara-serit{ grid-template-columns:repeat(3,1fr); }
  .proje-liste{ grid-template-columns:repeat(2,1fr); }
  .duyuru-liste{ grid-template-columns:repeat(2,1fr); }
  .seffaf-liste{ grid-template-columns:repeat(2,1fr); }
  .altb-ic{ grid-template-columns:1.3fr 1fr 1fr; gap:44px; }
  .kunye{ grid-template-columns:1fr; }
  .kunye > div{ grid-template-columns:220px 1fr; gap:18px; align-items:baseline; }
  .proje-liste-genis{ grid-template-columns:1fr; }
  .proje-liste-genis .proje-bag{ display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:stretch; }
  .proje-liste-genis .proje-resim-kutu{ aspect-ratio:auto; height:100%;
                                        min-height:330px; }
  .proje-liste-genis .proje-ic{ padding:38px 34px; align-self:center; }
}
@media (min-width:1180px){
  .izgara{ grid-template-columns:repeat(4,1fr); }
}
/* ─────────── FORM (İLETİŞİM) ─────────── */
.form{ display:grid; gap:16px; max-width:520px; margin-top:22px; }
.form-alan{ display:grid; gap:6px; }
.form-alan span{ font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--govde); font-variation-settings:"wght" 700; }
.form-alan i{ text-transform:none; font-style:normal; font-weight:400;
  letter-spacing:normal; color:var(--govde); opacity:.75; }
.form-alan input,.form-alan textarea{
  font:inherit; font-size:16px; padding:12px 14px; color:var(--gece);
  background:var(--beyaz); border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak); }
.form-alan textarea{ min-height:140px; resize:vertical; }
.form-alan input:focus,.form-alan textarea:focus{
  outline:3px solid var(--vurgu); outline-offset:1px; }
.form > .dug{ justify-self:start; padding:13px 28px;
  background:var(--vurgu); color:var(--kagit); border-color:var(--vurgu); }
.form > .dug:hover{ background:var(--gece); border-color:var(--gece);
  color:var(--kagit); }
/* Bal küpü: görme engelli teknolojiden ve düzenden GERÇEKTEN saklanır,
   ekranda yer kaplamaz — botlar hâlâ doldurabilir, insanlar göremez. */
.gizli-alan{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}