/* Ana sayfa (18 Ekim 2026, sahibin onayladığı "Apple dili" tasarımı;
   kaynak: tuvaldeki Main.dc.html). Alt sayfalar son-kapak.css'te kalır;
   ana sayfa onu yüklemez. Buraya oradan yalnız Inter yüzü kopyalandı:
   adres son-kapak.css ile ve index.html'deki preload ile aynı kalmalı.
   CSP font-src yalnız fonts.gstatic.com'a izin veriyor. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/l/font?kit=UcC73FwrK3iLTeHuS_nVMrMxCp50SjIq14BKdGYQvfcxnVL7ObFrppmttcDkSAO-LbJ8GF4GihISRcsGQWBCN6yF9owxwVpp0Eu5DopTJQ365wjSKnC1-AAeejX8I45FInBO7VjFvLzecXia-DBbY1WXlcBImUglFy4U1pAGam1WHb_RtmzuNzUO7CF2GYaIvhkUcr_I8XM368Mv5JqBnNgwHP_6u4k2B7SbculfG4IuIA3wk6w3ywQtyGeCmxDu7EYdYbV5GhssyYXQ4hJbwBkBSQr_gr_PMkFtt24aw9pS7gQ0_jZD_t04eT_PIiyPKDpRFwNYMbR3g8eWdN9Wdt5SqunWcFwZfDX9mbgzhxm7epeeDjD9bShnrmZUDPyyiOx68owTBKuIihWizOZOqXFhj8z2QvgUWL-D-QY5-aoUlHjDQDLd_4qMMwL0e1kSjY1tr9-zAK67TCiYJDrRcTNLZEAhl8Bk11ULkjW3wMmU7rBi0tXi85s9IWJi3j4X-GT8aimBZi4FYb4FwcQXZ4EJhiBi7qLSHcJFFrCPrHWxcph_i4vrMK9_yErzeUJJVnUPPZiSn4o-GBuktInh93A-yj0N6TuwmYp5ZH6TTkkktb6pGwsz1uJJ5N1GgvfFHQ1zV2ViWGSkPZycVZiNJJyK8gXCwMTvM6FvzjRdXCO8jNKfOtOJrzGoAQc-IKOAwL8VWbwp-REOzABU-h7XoKEQBQJBb48tpIkqoolbIxqGOguCOnCKMTAub_YGFi3Qn_Y-63CA9vbDKvnLaoOJajn2RvBxqeILC3IcYF9_tpWG84I2lZbgbNkaEDLPT_PG_DSYSocfm54_hoqNMimxKWaLV7JtGqsUsoyHzwYiVAfPnOCwcGf6dJkfvmD5UV5A3oAaSYnX1_0vVGAMF0blvw0yxo51J4Hssz0tU6Jy88aD2gvyAlqAT_-NI25URb17&skey=c491285d6722e4fa&v=v20")
    format("woff2");
}

/* Renkler. Açık palet tasarımın kendisi; koyu palet tema.js'in
   data-tema="koyu" anahtarına bağlı (sistem tercihi bilerek okunmuyor,
   bkz. tema.js). Telefon görselleri iki temada da aynı: köşeleri saydam.
   Teslim kodu kartı, lime kart ve Partner bölümü iki temada da sabit renkli
   yüzeyler; içlerindeki yazı renkleri o yüzeye göre ölçüldü. */
:root {
  --zemin: #ffffff;
  --metin: #0e1a14;
  --ikincil: #5e6d63;
  --yuzey: #f6f7f2;
  --cizgi: #e3e8de;
  --marka: #183e32;
  --marka-ust: #0e2a20;
  --dugme: #183e32;
  --dugme-yazi: #ffffff;
  --alt-yazi: #24402f;
  --ust-zemin: rgba(255, 255, 255, 0.86);
  --ust-cizgi: rgba(14, 26, 20, 0.08);
  --kutu-zemin: #ffffff;
  --lime: #d8ed9d;
  --orman: #183e32;
  --gece: #0b1510;
  --egri: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
html[data-tema="koyu"] {
  --zemin: #0f1a15;
  --metin: #f4f7f0;
  --ikincil: #b1c0b5;
  --yuzey: #192a22;
  --cizgi: #33473b;
  --marka: #d8ed9d;
  --marka-ust: #ecf7cd;
  --dugme: #d8ed9d;
  --dugme-yazi: #0f1a15;
  --alt-yazi: #d3ded6;
  --ust-zemin: rgba(15, 26, 21, 0.86);
  --ust-cizgi: rgba(244, 247, 240, 0.1);
  --kutu-zemin: #0f1a15;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm]) {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a {
  color: var(--marka);
}
a:hover {
  color: var(--marka-ust);
}
button {
  font-family: inherit;
}
[hidden] {
  display: none !important;
}
/* :where — hapların ve yuvarlak düğmenin kendi köşesi odakta bozulmasın. */
:where(a, button, summary):focus-visible {
  outline: 3px solid var(--marka);
  outline-offset: 3px;
  border-radius: 12px;
}
.partner :where(a):focus-visible {
  outline-color: var(--lime);
}
main:focus {
  outline: none;
}
::selection {
  background: var(--orman);
  color: #ffffff;
}
.gizli {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.atla {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 20;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--zemin);
  color: var(--metin);
  box-shadow: 0 0 0 1px var(--cizgi);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.atla:focus {
  transform: none;
}

.kap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}
.soluk {
  color: var(--ikincil);
}

/* ------------------------------------------------------------ hap ve ok */
.hap {
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: var(--dugme);
  color: var(--dugme-yazi);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.2s var(--egri),
    background-color 0.2s;
}
.hap:hover {
  color: var(--dugme-yazi);
}
.hap:active {
  transform: scale(0.98);
}
.hap-buyuk {
  height: 48px;
  padding: 0 24px;
  font-size: 17px;
}
.ok {
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) {
  .hap:hover {
    transform: scale(1.03);
  }
  .ok:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* --------------------------------------------------------------- üst çubuk */
.ust {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ust-zemin);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ust-cizgi);
}
.ust-ic {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.marka {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--marka);
  text-decoration: none;
}
.marka:hover {
  color: var(--marka);
}
.marka svg {
  display: block;
  flex: none;
}
.marka span {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.ust-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}
.menu-metin {
  padding: 14px 12px;
  color: var(--metin);
  font-size: 13px;
  text-decoration: none;
}
.menu-metin:hover {
  color: var(--metin);
}
.tema-dugmesi {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--metin);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tema-dugmesi svg {
  display: block;
  width: 17px;
  height: 17px;
}
.tema-dugmesi .ikon-gunes,
html[data-tema="koyu"] .tema-dugmesi .ikon-ay {
  display: none;
}
html[data-tema="koyu"] .tema-dugmesi .ikon-gunes {
  display: block;
}
.donuyor svg {
  animation: ana-don 0.4s ease-out;
}
@keyframes ana-don {
  to {
    transform: rotate(180deg);
  }
}
.hap-kucuk {
  height: 36px;
  margin-left: 4px;
  padding: 0 16px;
  font-size: 14px;
  outline-offset: 4px;
}

/* ------------------------------------------------------------- kahraman */
.kahraman {
  padding-top: 88px;
  overflow: hidden;
  background: var(--zemin);
}
.kahraman-ic,
.kapanis-ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kahraman-ic {
  gap: 22px;
}
.ust-etiket {
  margin: 0;
  color: var(--marka);
  font-size: 19px;
  font-weight: 600;
}
.kahraman h1 {
  margin: 0;
  font-size: clamp(36px, 10.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 700;
}
.kahraman h1 span {
  display: block;
}
.kahraman-alt {
  max-width: 30em;
  margin: 0;
  color: var(--ikincil);
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.4;
  text-wrap: balance;
}

/* Mağaza dalları. Varsayılan işaretleme masaüstü (ve iPhone) dalı: App
   Store önde, Google Play yanında bağlantı. ana.js Android'de html'e
   os-android koyar ve dallar yer değiştirir. Alan sabit yükseklikte, not
   Android'de görünmez ama yerini korur: sınıf ilk boyamadan sonra gelse
   bile sayfa kaymaz. 600 px altında iki öğe alt alta durur; üstünde iki
   dal da tek satıra sığar. */
.magaza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  height: 48px;
}
.kahraman .magaza {
  margin-top: 6px;
}
.magaza .ok {
  padding: 12px 0;
  font-size: 17px;
  line-height: 20px;
  white-space: nowrap;
}
html:not(.os-android) .dal-android,
.os-android .dal-ios {
  display: none;
}
.os-android .magaza-not {
  visibility: hidden;
}
.magaza-not {
  margin: 0;
  color: var(--ikincil);
  font-size: 14px;
}
@media (max-width: 600px) {
  .magaza {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
    height: 104px;
  }
}

.kahraman-tel {
  height: clamp(420px, 46vw, 660px);
  margin: 64px 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}
.kahraman-tel img {
  position: relative;
  flex: none;
  height: auto;
}
.kahraman-tel .orta {
  z-index: 2;
  width: clamp(280px, 28vw, 400px);
}
.kahraman-tel .yan {
  z-index: 1;
  width: clamp(220px, 23vw, 330px);
  margin-top: 110px;
}
.kahraman-tel .sol {
  margin-right: -48px;
}
.kahraman-tel .sag {
  margin-left: -48px;
}

/* --------------------------------------------------------- bölüm başlığı */
.baslik-bolum {
  margin: 0;
  text-align: center;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 700;
}

/* ---------------------------------------------------------------- nasıl */
.nasil {
  padding: 112px 0 120px;
  background: var(--yuzey);
}
.nasil-ic {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 48px;
}
.adimlar li {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adim-no {
  color: var(--marka);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.adimlar h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.adimlar p {
  margin: 0;
  color: var(--ikincil);
  font-size: 19px;
  line-height: 1.5;
}
.nasil-son {
  margin: 0;
  text-align: center;
  color: var(--marka);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 600;
}

/* ----------------------------------------------------------- özellikler */
.ozellikler {
  padding: 120px 0;
  background: var(--zemin);
}
.ozellikler-ic {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.izgara {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.g2 {
  grid-column: span 2;
}
.g3 {
  grid-column: span 3;
}
.g4 {
  grid-column: span 4;
}
.kart {
  border-radius: 28px;
}
.kart h3 {
  margin: 0;
  font-weight: 700;
}
.kart-etiket {
  margin: 0;
  color: var(--marka);
  font-size: 17px;
  font-weight: 600;
}
.kart-govde {
  margin: 0;
  color: var(--ikincil);
  font-size: 19px;
  line-height: 1.5;
}
.kart-blok {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kart-ikon {
  display: block;
  color: var(--marka);
}
.kart-gorselli {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 48px 48px 0;
}
.kart-gorselli .kart-blok {
  flex: 1 1 260px;
  align-self: flex-start;
}
.kart-gorselli h3 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.kart-gorselli .kart-govde {
  max-width: 18em;
}
.kart-metin {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 44px;
}
.kart-metin h3 {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.kart-kod {
  min-height: 540px;
  background: var(--orman);
  color: #f7faf0;
}
.kart-kod .kart-etiket {
  color: var(--lime);
}
.kart-kod .kart-govde {
  color: #c9d6cc;
}
.kod-kirp {
  width: 270px;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
}
.kod-kirp img {
  display: block;
  width: 270px;
  height: auto;
  margin-top: -150px;
}
.kart-iptal {
  min-height: 540px;
  background: var(--lime);
  color: #0e1a14;
}
.kart-iptal .kart-etiket {
  color: #183e32;
}
.kart-iptal .kart-govde {
  color: #24402f;
}
.kart-odeme {
  min-height: 480px;
  background: var(--yuzey);
}
.kart-etkim {
  min-height: 480px;
  background: var(--yuzey);
}
.kart-etkim img {
  display: block;
  width: 260px;
  height: auto;
  margin: 0 auto -200px;
}
.kart-cizgili {
  min-height: 280px;
  border: 1px solid var(--cizgi);
  background: var(--zemin);
}
.kart-cizgili .kart-blok {
  gap: 10px;
}
.kart-cizgili h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

/* -------------------------------------------------------------- içinde */
.icinde {
  padding-top: 112px;
  overflow: hidden;
  background: var(--yuzey);
}
.icinde-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 48px 72px;
}
.icinde-metin,
.partner-metin {
  align-self: center;
  padding-bottom: 112px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.icinde-metin {
  flex: 1 1 420px;
}
.icinde h2,
.partner h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.icinde-metin p {
  max-width: 28em;
  margin: 0;
  color: var(--ikincil);
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.45;
}
.icinde-tel {
  flex: 0 1 340px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.icinde-tel img {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
  margin-bottom: -300px;
}

/* -------------------------------------------------------------- s.s.s. */
.sss-bolum {
  padding: 120px 0;
  background: var(--zemin);
}
.sss-ic {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sss-bolum h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.sss {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--cizgi);
}
.sss details {
  border-bottom: 1px solid var(--cizgi);
}
.sss summary {
  list-style: none;
  cursor: pointer;
  min-height: 64px;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sss summary::-webkit-details-marker {
  display: none;
}
.arti {
  display: block;
  flex: none;
  color: var(--marka);
  transition: transform 0.2s var(--egri);
}
.sss details[open] .arti {
  transform: rotate(45deg);
}
.sss p {
  margin: 0;
  padding: 0 40px 24px 0;
  color: var(--ikincil);
  font-size: 19px;
  line-height: 1.55;
}
/* Satır içi: dar ekranda "var?"dan sonra kırılır, ikon yazıyla birlikte
   akar. Dikey iç pay dokunma alanını 44 px'e çıkarır. */
.sss-wa {
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 20px;
}
.sss-wa a {
  padding: 12px 0;
}
.kirilmaz {
  white-space: nowrap;
}

/* ------------------------------------------------------------- partner */
.partner {
  padding-top: 112px;
  overflow: hidden;
  background: var(--gece);
  color: #f7faf0;
}
html[data-tema="koyu"] .partner {
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
.partner-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.partner-metin {
  flex: 1 1 440px;
}
.partner-etiket {
  margin: 0;
  color: var(--lime);
  font-size: 19px;
  font-weight: 600;
}
.partner-govde {
  max-width: 28em;
  margin: 0;
  color: #b9c7bd;
  font-size: 19px;
  line-height: 1.55;
}
.partner-dugmeler {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.partner .hap {
  background: var(--lime);
  color: var(--gece);
}
.partner .ok,
.partner .ok:hover {
  padding: 12px 0;
  color: var(--lime);
  font-size: 17px;
}
.partner-tel {
  flex: 0 1 360px;
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto;
  margin: 0 auto -280px;
}

/* ------------------------------------------------------------- kapanış */
.kapanis {
  padding: 136px 0;
  background: var(--zemin);
}
.kapanis-ic {
  gap: 26px;
}
.kapanis-logo {
  display: block;
  color: var(--marka);
}
.kapanis h2 {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 700;
}

/* ------------------------------------------------------------ altbilgi */
.alt {
  background: var(--yuzey);
  border-top: 1px solid var(--cizgi);
}
.alt-ic {
  padding-top: 40px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.alt-tanim,
.alt-kunye {
  margin: 0;
  color: var(--ikincil);
  font-size: 13px;
  line-height: 1.6;
}
.alt-tanim {
  max-width: 52em;
}
.alt-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 24px;
  padding-top: 12px;
  border-top: 1px solid var(--cizgi);
}
.alt-menu a,
.alt-menu a:hover {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--alt-yazi);
  font-size: 13px;
}
.alt-orta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--cizgi);
}
.odeme img {
  display: block;
  width: auto;
  height: 24px;
  max-width: 100%;
}
.odeme .odeme-koyu,
html[data-tema="koyu"] .odeme .odeme-acik {
  display: none;
}
html[data-tema="koyu"] .odeme .odeme-koyu {
  display: block;
}
.hareket {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--kutu-zemin);
  color: var(--alt-yazi);
  font: 500 13px Inter, system-ui, sans-serif;
  cursor: pointer;
}
.hareket:disabled {
  cursor: default;
}
.alt-kunye a,
.alt-kunye a:hover {
  color: var(--ikincil);
}

/* ------------------------------------------------------------ dar ekran */
@media (max-width: 900px) {
  .izgara {
    grid-template-columns: minmax(0, 1fr);
  }
  .g2,
  .g3,
  .g4 {
    grid-column: auto;
  }
  .kahraman-tel .yan {
    display: none;
  }
  .kart-metin {
    min-height: auto;
  }
  .icinde-metin,
  .partner-metin {
    padding-bottom: 0;
  }
}
/* Tasarım 1440'ta çizildi; telefonda bölüm boşlukları ve kart iç payı
   oranında daralıyor, yoksa 270 px'lik kod görseli karttan taşıyordu. */
@media (max-width: 640px) {
  .menu-metin,
  .ust-etiket {
    display: none;
  }
  .kahraman {
    padding-top: 44px;
  }
  .nasil {
    padding: 80px 0 88px;
  }
  .ozellikler,
  .sss-bolum {
    padding: 88px 0;
  }
  .icinde,
  .partner {
    padding-top: 80px;
  }
  .kapanis {
    padding: 96px 0;
  }
  .kart-gorselli {
    padding: 32px 24px 0;
  }
  .kart-metin {
    padding: 32px 24px;
  }
  .sss p {
    padding-right: 0;
  }
}

/* ---------------------------------------------------------------- hareket */
/* Bölümler bir kez belirir. Gizleme yalnız ana.js'in eklediği sınıfla
   olur ve yalnız ilk yüklemede ekranın altında kalan öğelere eklenir:
   JS gelmezse ya da hareket azaltıldıysa her şey baştan görünür. */
.belir-bekliyor {
  opacity: 0;
  transform: translateY(28px);
}
.belir-gecis {
  transition:
    opacity 0.8s var(--egri),
    transform 0.8s var(--egri);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.tema-gecis body,
html.tema-gecis .ust,
html.tema-gecis section,
html.tema-gecis .alt {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hap,
  .arti,
  .belir-gecis {
    transition: none;
  }
  .hap:hover,
  .hap:active {
    transform: none;
  }
  .belir-bekliyor {
    opacity: 1;
    transform: none;
  }
}
html[data-calm] .hap,
html[data-calm] .arti,
html[data-calm] .belir-gecis {
  transition: none;
}
html[data-calm] .hap:hover,
html[data-calm] .hap:active,
html[data-calm] .belir-bekliyor {
  opacity: 1;
  transform: none;
}
html[data-calm] .donuyor svg {
  animation: none;
}
@media print {
  .ust {
    position: static;
  }
  .belir-bekliyor {
    opacity: 1;
    transform: none;
  }
}