/* ============================================================
   BAYKUL — Bayi Kataloğu
   Görsel dünya: tezgâh üstü yağ/yedek parça bayi kataloğu.
   Tohum: 30d282a4
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('fontlar/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url('fontlar/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fontlar/jbmono-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fontlar/jbmono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Zemin krem değil: lider mürekkebin (kol A mavisi) açık, soğuk türevi.
     Kâğıt rengi paletten türetiliyor, güvenli sıcak kırık beyazdan değil. */
  --kagit: #dce0e5;
  --kagit-ust: #eef0f3;
  --murekkep: #16171a;
  --murekkep-ikincil: #4b4f56;
  --cizgi: #b6bcc4;

  /* Dört kol, dört nokta mürekkebi */
  --kol-madeni: #14459b;
  --kol-endustri: #a02718;
  --kol-tarim: #1c5730;
  --kol-insaat: #8a5606;

  /* Aktif kol — sekmeye basınca sayfa bu değerle yeniden mürekkeplenir */
  --ink: var(--kol-madeni);

  --ray: 4.5rem;
  --olcu: 68ch;
  --gecis: 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--ink) var(--kagit);
}

body {
  margin: 0;
  padding-right: var(--ray);
  background: var(--kagit);
  color: var(--murekkep);
  font-family: 'Archivo', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: none;
}

::selection {
  background: var(--ink);
  color: var(--kagit-ust);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.drenaj :focus-visible {
  outline-color: var(--kagit-ust);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}

p {
  margin: 0;
  max-width: var(--olcu);
}

/* ---- Ölçü ve kod dizgisi ---------------------------------- */

.kod,
.olcu {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ---- Sayfa kabı ------------------------------------------- */

.sayfa {
  width: min(100% - 3rem, 78rem);
  margin-inline: auto;
}

/* ============================================================
   BAŞPARMAK SEKMESİ RAYI — kataloğun kesik ön kenarı
   ============================================================ */

.ray {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--ray);
  display: flex;
  flex-direction: column;
  z-index: 40;
  border-left: 1px solid var(--cizgi);
}

.sekme {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0;
  background: var(--sekme-ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-stretch: 78%;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  cursor: pointer;
  /* çekilmiş başparmak indeksi: aktif sekme raydan dışarı kayar */
  transform: translateX(0);
  transition: transform var(--gecis), filter 220ms ease-out;
}

.sekme:last-child {
  border-bottom: 0;
}

.sekme .kod {
  font-size: 0.7rem;
  opacity: 0.75;
  letter-spacing: 0.1em;
}

.sekme:hover {
  filter: brightness(1.14);
}

.sekme[aria-current='true'] {
  transform: translateX(-0.7rem);
  box-shadow: -0.75rem 0 1.5rem rgba(22, 23, 26, 0.28);
}

/* ============================================================
   KÜNYE SAYFASI — ilk görüntü
   ============================================================ */

.kunye {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Künye sayfası gibi kurulur: başlık bloğu üstte, dağıtıcı künyesi altta.
     Ortalamak ikisini ortada toplayıp aralarında amaçsız bir boşluk bırakıyordu. */
  align-items: start;
  align-content: space-between;
  gap: 4rem;
  padding-block: 6.5rem 2.5rem;
}

/* 1fr aslında minmax(auto, 1fr): bölünemez uzun bir künye kelimesi min-content
   tabanıyla sütunu kendi payından geniş yapıp karşı sütunu sıkıştırıyordu. */
.kunye > * {
  min-width: 0;
}

.marka {
  /* Katsayı iki sütunlu aralığın en dar ucundan (≈960px) türetildi: künye
     kelimesi orada sütununu aşmamalı, üstünde zaten 6rem tavanına oturuyor. */
  font-size: clamp(3.4rem, 7.4vw, 6rem);
  font-stretch: 125%;
  text-transform: lowercase;
  letter-spacing: -0.04em;
}

.kunye-not {
  margin-top: 1.6rem;
  color: var(--murekkep-ikincil);
  font-size: 1.0625rem;
}

/* İçindekiler: kataloğun kendi dizgisi ilk görüntüde görünür ve sol sütunun
   alt alanını gerçek bilgiyle kapatır. Renkli çip sırası rayı tekrarlıyordu. */
.icindekiler {
  margin: 3.25rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 2px solid var(--murekkep);
  list-style: none;
}

.icindekiler li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--cizgi);
}

.icindekiler .ad {
  font-stretch: 96%;
  font-weight: 700;
  font-size: 1.1rem;
}

.icindekiler .ad::before {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.65rem;
  background: var(--nokta);
}

/* Kod satırın kendi kol mürekkebini taşır: içindekiler, dört mürekkebin
   aynı anda göründüğü tek yerdir ve bağlayıcının iki ucu birbirine bağlanır. */
.icindekiler .kod {
  color: var(--nokta);
}

/* Bağlayıcı çizgi adla kod arasında durur; sağ boşluğa akıp hiçbir şeye
   varmayan bir çizgi katalog değil süstür. */
.cizik {
  flex: 1;
  align-self: center;
  height: 0;
  border-bottom: 1px dotted var(--cizgi);
}

.drenaj .cizik {
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* ---- Çalışan seçici --------------------------------------- */

/* Kopartılabilir danışma fişi. Kenar, kart konturu değil kesme çizgisi olarak
   okunsun diye sık perforasyon ritmi + içerik kenardan uzakta duruyor. */
.secici {
  position: relative;
  background: var(--kagit-ust);
  /* Kesme çizgisi gerçek bir kenarlıkla çizilir. Tire ritmini elle kurmak için
     gradyan katmanı kullanmak, dekoratif çizgi zemini imzasına düşüyordu;
     fişi fiş yapan zaten geniş iç boşluk, fiş numarası ve kesme talimatı. */
  border: 1px dashed var(--ink);
  padding: 2.4rem;
  transition: border-color var(--gecis);
}

.fis-no {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  color: var(--ink);
  transition: color var(--gecis);
}

.fis-kesme {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--cizgi);
  color: var(--murekkep-ikincil);
  font-size: 0.85rem;
  font-weight: 600;
  font-stretch: 92%;
}

.secici h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-stretch: 110%;
}

.secici-alan {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.alan {
  display: grid;
  gap: 0.4rem;
}

/* Etiketler kataloğun metin sesiyle dizilir. Mono yalnızca kod, yıl ve ölçü
   içindir; her etikete uygulanınca teknik kostüme dönüşüyordu — üstelik
   11px, güneş altında telefondan bakan alıcı için fazla küçüktü. */
.alan label {
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-ikincil);
}

.alan select {
  appearance: none;
  width: 100%;
  padding: 0.72rem 2.4rem 0.72rem 0.85rem;
  border: 1px solid var(--murekkep);
  border-radius: 0;
  background-color: var(--kagit-ust);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.85rem) 55%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  color: var(--murekkep);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--gecis);
}

.alan select:hover {
  border-color: var(--ink);
}

.alan select:disabled {
  color: var(--murekkep-ikincil);
  background-color: #d0d5db;
  cursor: not-allowed;
}

/* Seçicinin çıktısı: kataloğun kendi dilinde basılan bir satır */
.fis {
  margin-top: 1.5rem;
  border-top: 1px dashed var(--cizgi);
  padding-top: 1.2rem;
}

.fis-bos {
  color: var(--murekkep-ikincil);
  font-size: 0.95rem;
}

.fis-dolu {
  display: none;
}

.fis[data-durum='dolu'] .fis-bos {
  display: none;
}

.fis[data-durum='dolu'] .fis-dolu {
  display: block;
}

.fis-satir {
  font-stretch: 110%;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--gecis);
}

.fis-not {
  margin-top: 0.6rem;
  color: var(--murekkep-ikincil);
  font-size: 0.95rem;
}

.eylem {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--gecis), transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.eylem:hover {
  transform: translateX(0.25rem);
}

.eylem svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

/* ---- Bayilik künye satırı --------------------------------- */

.dagitici {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.8rem;
}

.dagitici-etiket {
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-ikincil);
}

.dagitici ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-stretch: 88%;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   KOL BÖLÜMLERİ — her biri kendi mürekkebine batar
   ============================================================ */

.drenaj {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  /* Renkli yüzey kendi iç boşluğunu taşır; içerik ortalanmış sarmalayıcının
     genişlik hesabına bağlı kalmaz. Toplam iç boşluk değişmiyor. */
  padding-inline: clamp(1.5rem, 3vw, 2.5rem);
}

.drenaj > .sayfa {
  width: min(100%, 78rem);
}

.drenaj h2 {
  font-size: clamp(3rem, 9vw, 6rem);
  font-stretch: 125%;
}

.drenaj-ust {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.drenaj-ust .kod {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

.drenaj p {
  margin-top: 1.6rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.15rem;
}

/* Spec listesi: iki sütun, noktalı bağlayıcı — kataloğun iç sayfası */
.spec {
  margin: 3.2rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 3.5rem;
}

.spec li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-stretch: 92%;
  font-weight: 600;
  font-size: 1.0625rem;
}

.spec .kod {
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   YETKİLİ DAĞITICI SAYFASI
   ============================================================ */

.bolum {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.bolum h2 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-stretch: 118%;
}

.bolum-giris {
  margin-top: 1.5rem;
  color: var(--murekkep-ikincil);
  font-size: 1.1rem;
}

.bayilik {
  margin-top: 3rem;
  border-top: 2px solid var(--murekkep);
}

.bayi {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.7rem 0.9rem;
  /* Dolgu sabit, kenar boşluğu negatif: satır metin sütunundan geniş yanar
     ama hover'da hiçbir yerleşim değeri canlanmaz. */
  margin-inline: -0.9rem;
  border-bottom: 1px solid var(--cizgi);
  text-decoration: none;
  transition: background var(--gecis);
}

.bayi:hover {
  background: var(--kagit-ust);
}

.bayi-ad {
  font-stretch: 105%;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}

.bayi-kapsam {
  color: var(--murekkep-ikincil);
}

.bayi-yer {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-ikincil);
}

.bayi-git {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-stretch: 92%;
  color: var(--ink);
  transition: color var(--gecis);
}

.bayi-git svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* ============================================================
   UYGULAMA DİZİNİ — kitap arkası indeksi
   ============================================================ */

.dizin {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 4rem;
}

.dizin li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--cizgi);
}

.dizin .ad {
  font-stretch: 96%;
  font-weight: 700;
}

.dizin-not {
  color: var(--murekkep-ikincil);
  font-size: 0.9rem;
}

.dizin .kod {
  color: var(--murekkep-ikincil);
}

/* ============================================================
   BASKI GEÇMİŞİ — 1981'den bugüne
   ============================================================ */

.baski {
  margin-top: 3rem;
  border-top: 2px solid var(--murekkep);
}

.baski-satir {
  display: grid;
  grid-template-columns: 7.5rem minmax(10rem, 18rem) 1fr;
  gap: 1.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--cizgi);
}

.baski-yil {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  transition: color var(--gecis);
}

.baski-ad {
  font-stretch: 100%;
  font-weight: 700;
  font-size: 1.15rem;
}

.baski-not {
  color: var(--murekkep-ikincil);
}

/* ============================================================
   TEZGÂH — iletişim
   ============================================================ */

.tezgah {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
}

.kanal {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
  /* Satırlar doğal yüksekliğinde kalır: sütun formun boyuna gerildiğinde
     fazla alanı satır aralarına dağıtıp künyeyi kopartıyordu. */
  align-content: start;
  gap: 0.9rem 1.5rem;
  border-top: 2px solid var(--murekkep);
  padding-top: 1.3rem;
}

.kanal dt {
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-ikincil);
  padding-top: 0.3rem;
}

.kanal dd {
  margin: 0;
  font-stretch: 100%;
  font-weight: 700;
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

/* Eksik veri dürüstçe duruyor — uydurulmuş numara yok */
.bos-veri {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #c8ced5;
  border: 1px dashed #7e858d;
  color: #33373d;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

form {
  display: grid;
  gap: 1.1rem;
}

.alan input,
.alan textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--murekkep);
  border-radius: 0;
  background: var(--kagit-ust);
  color: var(--murekkep);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--gecis);
}

.alan textarea {
  min-height: 7rem;
  resize: vertical;
}

.alan input:hover,
.alan textarea:hover {
  border-color: var(--ink);
}

.alan input::placeholder,
.alan textarea::placeholder {
  color: #5b5e64;
}

.form-not {
  color: var(--murekkep-ikincil);
  font-size: 0.85rem;
}

/* Eksik alan: sessiz kalmaz, palet renginde işaretlenir. */
form.dogrula input:invalid,
form.dogrula textarea:invalid {
  border-color: var(--kol-endustri);
  border-width: 2px;
  background: #f6ecea;
}

/* Ana eylemin yanıtı sayfaya basılır, tarayıcı baloncuğuna bırakılmaz. */
.onay {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-top: 3px solid var(--ink);
  background: var(--kagit-ust);
  color: var(--murekkep);
  font-size: 0.95rem;
  max-width: var(--olcu);
}

/* Harita da eksik veridir; yer tutucu olarak dürüstçe durur. */
.harita {
  margin-top: 2.5rem;
  padding: 1.4rem;
  border: 1px dotted var(--cizgi);
}

.harita p {
  margin-top: 0.7rem;
  color: var(--murekkep-ikincil);
  font-size: 0.9rem;
}

button.eylem {
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  justify-self: start;
}

/* ============================================================
   ALT KÜNYE
   ============================================================ */

.alt {
  border-top: 2px solid var(--murekkep);
  padding-block: 2rem 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.04em;
  color: var(--murekkep-ikincil);
}

/* ============================================================
   UYARLAMA
   ============================================================ */

@media (max-width: 60rem) {
  .kunye,
  .tezgah {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .spec,
  .dizin {
    columns: 1;
  }

  .bayi {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .baski-satir {
    grid-template-columns: 5rem 1fr;
  }

  .baski-not {
    grid-column: 2;
  }
}

/* Dar ekranda ray üste taşınır: katalog yatık tutulmuş gibi */
@media (max-width: 48rem) {
  :root {
    --ray: 0px;
  }

  body {
    padding-right: 0;
    padding-top: 3.25rem;
  }

  .ray {
    inset: 0 0 auto 0;
    width: 100%;
    height: 3.25rem;
    flex-direction: row;
    border-left: 0;
    border-bottom: 1px solid var(--cizgi);
  }

  .sekme {
    writing-mode: horizontal-tb;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
  }

  .sekme:last-child {
    border-right: 0;
  }

  .sekme[aria-current='true'] {
    transform: translateY(0.4rem);
    box-shadow: 0 -0.6rem 1.2rem rgba(22, 23, 26, 0.28);
  }

  .sekme .kod {
    display: none;
  }

  .sayfa {
    width: min(100% - 2rem, 78rem);
  }

  /* Etiket sütunu dar ekranda üste geçer: uzun e-posta taşmasın */
  .kanal {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .kanal dt {
    padding-top: 0.9rem;
  }

  .kanal dd {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}