/* ==========================================================================
   Seyir paneli — "Derinlik" katmanı (18 Eki 2026; js/derinlik.js ile birlikte çalışır)
   Neden: müşteri sunumunda panel modern, canlı ve katmanlı görünsün. Renk, yazı tipi ve yerleşim aynı kalır; yeni bir renk ailesi yok.
   Yalnız gölge, iç ışık, basınca çökme, hafif eğim ve kısa giriş hareketi eklenir. Bu dosya en son yüklenir (uzam/fizik/terapi css'inden sonra)
   ve mevcut sınıfların üstüne aynı özgüllükle bindirilir; yerleşim ölçüleri (genişlik, yükseklik, boşluk) hiçbir yerde değişmez.

   Işık yönü her yerde üstten: üst kenarda 1 px iç vurgu (--dg-isik), gölge aşağı doğru ve aşağıya yakın (negatif yayılma).
   Yükseklik basamakları: e0 çökmüş (basılı) · e1 dinlenme · e2 üzerine gelinmiş/odak · e3 yüzen (alt dock).
   Gölge tonu açık temada siyah değil, yazı rengi + kurum renginin karışımıdır (belirteçlerden color-mix); koyuda daha koyu ve parlamasızdır.

   Hareket yalnız transform, opacity ve box-shadow ile; 150-350 ms, yay benzeri eğriler (--egri, --egri-yay).
   Kapanma: <html data-efekt="sade"> (Tercihler › Efektler: Sade) bu katmanın tamamını kapatır ve Gündüz görünümüne döner;
   prefers-reduced-motion: reduce ve <html data-hareket="kapali"> bütün hareketi (geçiş, giriş, eğim, sayaç) kapatır; statik gölgeler kalır.
   Sayaç sayımı, eğim ve kademeli giriş js/derinlik.js'tedir; bu dosya yalnız onların işaretlediği özniteliklere (data-dg, data-dg-ok) bakar.
   Eski tarayıcı (color-mix, :has) desteklemiyorsa ilgili kurallar yok sayılır: panel olduğu gibi çalışır.
   ========================================================================== */

/* ---------- belirteçler: açık tema ---------- */
:root {
  --dg-ton: color-mix(in oklab, var(--vurgu) 24%, var(--metin));
  --dg-a1: color-mix(in oklab, var(--dg-ton) 6%, transparent);
  --dg-a2: color-mix(in oklab, var(--dg-ton) 9%, transparent);
  --dg-a3: color-mix(in oklab, var(--dg-ton) 14%, transparent);
  --dg-a4: color-mix(in oklab, var(--dg-ton) 22%, transparent);
  --dg-a5: color-mix(in oklab, var(--dg-ton) 32%, transparent);
  --dg-isik: rgb(255 255 255 / .78);          /* üstten gelen ışığın iç vurgusu */
  --dg-yuzey-ust: rgb(255 255 255 / .62);     /* yüzeyin üst yarısındaki ışık gradyanı */
  --dg-parlama: color-mix(in oklab, var(--vurgu) 9%, transparent);   /* işaretçi parlaması */
  --dg-parilti: rgb(255 255 255 / .7);        /* iskelet süpürmesi */
  --dg-iskelet: color-mix(in oklab, var(--cizgi) 82%, var(--yuzey3));   /* açık zeminde okunur kalsın */
  --dg-dock: color-mix(in oklab, var(--yuzey) 80%, transparent);
  --dg-dock-cizgi: color-mix(in oklab, var(--cizgi) 65%, transparent);
  --dg-gosterge: color-mix(in oklab, var(--vurgu) 13%, transparent);
  --dg-gosterge-cizgi: color-mix(in oklab, var(--vurgu) 20%, transparent);
  --dg-dugme-ust: rgb(255 255 255 / .12);     /* birincil düğme: üst ışık */
  --dg-dugme-alt: rgb(0 0 0 / .1);            /* birincil düğme: alt gölge */
  --dg-e0: inset 0 2px 4px -1px var(--dg-a4), inset 0 0 0 1px var(--dg-a1);
  --dg-e1: inset 0 1px 0 var(--dg-isik), 0 1px 1px var(--dg-a1), 0 3px 6px -2px var(--dg-a2), 0 14px 24px -18px var(--dg-a4);
  --dg-e2: inset 0 1px 0 var(--dg-isik), 0 2px 3px var(--dg-a2), 0 8px 16px -6px var(--dg-a3), 0 26px 38px -24px var(--dg-a5);
  --dg-e3: inset 0 1px 0 var(--dg-isik), 0 2px 4px var(--dg-a2), 0 14px 28px -10px var(--dg-a4), 0 30px 50px -26px var(--dg-a5);
}

/* ---------- belirteçler: koyu tema (sistem tercihi + kullanıcı seçimi; belirtec.css'teki ikiliyle aynı düzen) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --dg-ton: color-mix(in oklab, var(--bg) 38%, #000);
    --dg-a1: color-mix(in oklab, var(--dg-ton) 32%, transparent);
    --dg-a2: color-mix(in oklab, var(--dg-ton) 44%, transparent);
    --dg-a3: color-mix(in oklab, var(--dg-ton) 58%, transparent);
    --dg-a4: color-mix(in oklab, var(--dg-ton) 70%, transparent);
    --dg-a5: color-mix(in oklab, var(--dg-ton) 82%, transparent);
    --dg-isik: rgb(255 255 255 / .06);
    --dg-yuzey-ust: rgb(255 255 255 / .035);
    --dg-parlama: rgb(255 255 255 / .06);
    --dg-parilti: rgb(255 255 255 / .07);
    --dg-iskelet: var(--yuzey3);
    --dg-dock: color-mix(in oklab, var(--yuzey) 78%, transparent);
    --dg-dock-cizgi: color-mix(in oklab, var(--cizgi2) 55%, transparent);
    --dg-gosterge: color-mix(in oklab, var(--vurgu) 9%, transparent);   /* etkin sekme etiketi 4,5:1 altına düşmesin */
    --dg-gosterge-cizgi: color-mix(in oklab, var(--vurgu) 34%, transparent);
    --dg-dugme-ust: rgb(255 255 255 / .16);
    --dg-dugme-alt: rgb(0 0 0 / .05);
  }
}
:root[data-tema="koyu"] {
  --dg-ton: color-mix(in oklab, var(--bg) 38%, #000);
  --dg-a1: color-mix(in oklab, var(--dg-ton) 32%, transparent);
  --dg-a2: color-mix(in oklab, var(--dg-ton) 44%, transparent);
  --dg-a3: color-mix(in oklab, var(--dg-ton) 58%, transparent);
  --dg-a4: color-mix(in oklab, var(--dg-ton) 70%, transparent);
  --dg-a5: color-mix(in oklab, var(--dg-ton) 82%, transparent);
  --dg-isik: rgb(255 255 255 / .06);
  --dg-yuzey-ust: rgb(255 255 255 / .035);
  --dg-parlama: rgb(255 255 255 / .06);
  --dg-parilti: rgb(255 255 255 / .07);
  --dg-iskelet: var(--yuzey3);
  --dg-dock: color-mix(in oklab, var(--yuzey) 78%, transparent);
  --dg-dock-cizgi: color-mix(in oklab, var(--cizgi2) 55%, transparent);
  --dg-gosterge: color-mix(in oklab, var(--vurgu) 9%, transparent);
  --dg-gosterge-cizgi: color-mix(in oklab, var(--vurgu) 34%, transparent);
  --dg-dugme-ust: rgb(255 255 255 / .16);
  --dg-dugme-alt: rgb(0 0 0 / .05);
}

/* ==========================================================================
   1. Yükseklik sistemi (statik gölge; hareket gerektirmez)
   ========================================================================== */

/* kartlar: dinlenmede e1, üzerine gelinince ve içinde odak varken e2. Kartın kendisi kıpırdamaz (büyük kartta metin kaymasın);
   yalnız gölge derinleşir. Tıklanabilir kartlar aşağıda ayrıca yükselir ve çöker. */
:root:not([data-efekt="sade"]) .kart { box-shadow: var(--dg-e1); transition: box-shadow 240ms var(--egri), transform 240ms var(--egri-yay); }
:root:not([data-efekt="sade"]) .kart:hover,
:root:not([data-efekt="sade"]) .kart:focus-within { box-shadow: var(--dg-e2); }

/* kartsız tablo yüzeyi (ör. hasta listesi): uzam.css'teki ":not(...)" listesiyle aynı, böylece özgüllük eşit kalır ve bu dosya kazanır */
:root:not([data-efekt="sade"]) .tablo-kap:not(.kart .tablo-kap, .kip-kutu .tablo-kap, .cekmece-kutu .tablo-kap) { box-shadow: var(--dg-e1); }

/* Modüller ekranının kartları (.mgz-kart; bir modülün açma düğmesi ve bağlantıları içinde, kendisi tıklanmaz): kart gibi e1 → e2 */
:root:not([data-efekt="sade"]) .mgz-kart { box-shadow: var(--dg-e1); transition: border-color var(--t-orta) var(--egri), box-shadow 240ms var(--egri), transform 240ms var(--egri-yay); }
:root:not([data-efekt="sade"]) .mgz-kart:hover,
:root:not([data-efekt="sade"]) .mgz-kart:focus-within { box-shadow: var(--dg-e2); }

/* Bugün ve yatak sayaçları (KPI): üstten ışık gradyanı + e1; eğim ve parlama js/derinlik.js'in koyduğu data-dg-ok ile */
:root:not([data-efekt="sade"]) :is(.bg-sayac, .yt-sayac) {
  position: relative;
  background-image: linear-gradient(180deg, var(--dg-yuzey-ust), transparent 58%);
  box-shadow: var(--dg-e1);
  transition: box-shadow 220ms var(--egri), transform 320ms var(--egri-yay);
}
:root:not([data-efekt="sade"]) :is(.bg-sayac, .yt-sayac)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(170px circle at var(--dg-mx, 50%) var(--dg-my, 0%), var(--dg-parlama), transparent 72%);
  transition: opacity 200ms var(--egri);
}

/* takvim randevu blokları: durum rengi aynı kalır, yalnız katman eklenir. Sürüklenirken (data-suruk) kendi gölgesi geçerli. */
:root:not([data-efekt="sade"]) .rt-blok:not([data-suruk]) {
  box-shadow: inset 0 1px 0 var(--dg-isik), 0 1px 1px var(--dg-a1), 0 3px 6px -3px var(--dg-a3);
  transition: box-shadow 180ms var(--egri), transform 220ms var(--egri-yay);
}
:root:not([data-efekt="sade"]) .rt-blok[data-durum="onaylandi"]:not([data-suruk]) {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--dg-isik), 0 1px 1px var(--dg-a1), 0 3px 6px -3px var(--dg-a3);
}
:root:not([data-efekt="sade"]) .rt-blok:not([data-suruk]):hover {
  box-shadow: inset 0 1px 0 var(--dg-isik), 0 2px 3px var(--dg-a2), 0 10px 18px -8px var(--dg-a4);
}
:root:not([data-efekt="sade"]) .rt-blok[data-durum="onaylandi"]:not([data-suruk]):hover {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--dg-isik), 0 2px 3px var(--dg-a2), 0 10px 18px -8px var(--dg-a4);
}
:root:not([data-efekt="sade"]) .rt-blok:not([data-suruk]):active {
  box-shadow: var(--dg-e0);
}
:root:not([data-efekt="sade"]) .rt-blok[data-durum="onaylandi"]:not([data-suruk]):active {
  box-shadow: inset 3px 0 0 var(--accent), var(--dg-e0);
}

/* tıklanabilir kartlar ve tıklanabilir tablo satırı (geniş görünüm): hafif yükselme + sol kenarda ışık çizgisi */
@container (min-width: 641px) {
  :root:not([data-efekt="sade"]) .tablo tr.tiklanir:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
}

/* ==========================================================================
   2. Düğmeler: birincil dokunsal 3B, ikincil yalnız ince derinlik
   ========================================================================== */

/* birincil ve tehlike (dolu renkli) düğme: üstte ışık, altta hafif koyulaşma + iç vurgu. Renk değişmez; arka plan rengi bilesen.css'ten gelir,
   bu kural yalnız saydam bir gradyan katmanı ekler (kurum rengi ne olursa olsun çalışır). */
:root:not([data-efekt="sade"]) .dugme:is([data-tur="birincil"], [data-tur="tehlike"]) {
  background-image: linear-gradient(180deg, var(--dg-dugme-ust), transparent 52%, var(--dg-dugme-alt));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .12), 0 1px 2px color-mix(in oklab, var(--accent) 34%, transparent), 0 6px 12px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}
:root:not([data-efekt="sade"]) .dugme[data-tur="tehlike"] {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -1px 0 rgb(0 0 0 / .14), 0 1px 2px color-mix(in oklab, var(--danger) 34%, transparent), 0 6px 12px -8px color-mix(in oklab, var(--danger) 70%, transparent);
}
:root:not([data-efekt="sade"]) .dugme:is([data-tur="birincil"], [data-tur="tehlike"]):hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), inset 0 -1px 0 rgb(0 0 0 / .12), 0 2px 4px color-mix(in oklab, var(--accent) 30%, transparent), 0 10px 18px -8px color-mix(in oklab, var(--accent) 72%, transparent);
}
:root:not([data-efekt="sade"]) .dugme[data-tur="tehlike"]:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .14), 0 2px 4px color-mix(in oklab, var(--danger) 30%, transparent), 0 10px 18px -8px color-mix(in oklab, var(--danger) 72%, transparent);
}
/* basınca içeri çökme: iç gölge, dış gölge kalkar; ölçek/kayma bilesen.css'teki :active kuralından (hareket azaltılmışsa aşağıda kapatılır) */
:root:not([data-efekt="sade"]) .dugme:is([data-tur="birincil"], [data-tur="tehlike"]):active:not(:disabled) {
  box-shadow: inset 0 2px 5px rgb(0 0 0 / .3), inset 0 0 0 1px rgb(0 0 0 / .08);
}

/* ikincil: ince derinlik (üst ışık çizgisi + tek katman gölge); hayalet, bağlantı ve ince renkli türler düz kalır */
:root:not([data-efekt="sade"]) .dugme[data-tur="ikincil"] {
  box-shadow: inset 0 1px 0 var(--dg-isik), 0 1px 2px var(--dg-a2);
}
:root:not([data-efekt="sade"]) .dugme[data-tur="ikincil"]:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 var(--dg-isik), 0 2px 5px -1px var(--dg-a3);
}
:root:not([data-efekt="sade"]) .dugme[data-tur="ikincil"]:active:not(:disabled) {
  box-shadow: var(--dg-e0);
}

/* ==========================================================================
   3. Mobil alt gezinme: yüzen "dock"
   Kutu (konum, yükseklik, güvenli alan dolgusu) kabuk.css'teki gibi kalır; cam, gölge ve ışık çizgisi ::before'a, kayan gösterge ::after'a taşınır.
   Yatay boşluk simetriktir: --dg-sol = --dg-sag = 6 px (+ yatay çentik güvenli alanı). Kutunun iç dolgusu aynı değerdir; 5 sütun (minmax(0,1fr))
   camın içine oturur, etiketler ve gösterge cam sınırından taşmaz. Gösterge sütun genişliğine (%) bağlıdır: (kutu − iki boşluk) / 5.
   Gösterge, etkin sekmenin sırasını CSS :has ile okur (JS gerekmez; menü yeniden çizilse de doğru yerde kalır) ve YAY KAÇIŞI OLMAYAN eğriyle
   kayar (yaylı eğri uzun mesafede sütun dışına taşıyordu; yay yalnız küçük ikon yükselmesinde kalır).
   Etiket yazı boyu sütun genişliğine göre ölçeklenir (kutu bir boyut kabıdır: cqi); sığmayan etiket olursa js/derinlik.js ölçeği kademeli küçültür.
   ========================================================================== */
@media (max-width: 759px) {
  :root:not([data-efekt="sade"]) .alt-gezinme {
    --dg-sol: max(6px, env(safe-area-inset-left));
    --dg-sag: max(6px, env(safe-area-inset-right));
    --alt-i: 0;
    padding-left: var(--dg-sol);
    padding-right: var(--dg-sag);
    background: linear-gradient(to top, color-mix(in oklab, var(--bg) 82%, transparent), transparent);   /* dock'un altında içerik hafifçe sönsün */
    border-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* cam gövde: kutunun içinde yüzer (yanlardan --dg-sol/--dg-sag, üstten 6 px, altta güvenli alan + 6 px) */
  :root:not([data-efekt="sade"]) .alt-gezinme::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: var(--dg-sol); right: var(--dg-sag); top: 6px; bottom: calc(6px + env(safe-area-inset-bottom));
    border-radius: 24px;
    background: var(--dg-dock);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid var(--dg-dock-cizgi);
    box-shadow: var(--dg-e3);
  }
  /* sekmeler camın üstünde kalır */
  :root:not([data-efekt="sade"]) .alt-gezinme > .alt-oge { z-index: 1; -webkit-tap-highlight-color: transparent; }

  /* etiket: sütuna sığar (ellipsis yalnız son çare). Satır yüksekliği sabit: yazı boyu değişince ikon ve etiket yerinden oynamaz.
     Önce vw tabanlı yedek, cqi destekleniyorsa tam sütun genişliğine göre. --dg-ad-k: js/derinlik.js'in sığdırma çarpanı (1 = dokunulmamış) */
  :root:not([data-efekt="sade"]) .alt-gezinme .alt-ad {
    padding: 0; line-height: 16px;
    font-size: calc(clamp(8px, 2.75vw, 11px) * var(--dg-ad-k, 1));
  }
  @supports (width: 1cqi) {
    :root:not([data-efekt="sade"]) .alt-gezinme { container-type: inline-size; }
    :root:not([data-efekt="sade"]) .alt-gezinme .alt-ad {
      font-size: calc(clamp(8px, calc((20cqi - 6px) / 6.5), 11px) * var(--dg-ad-k, 1));   /* 20cqi = bir sütun */
    }
  }

  @supports selector(:has(a)) {
    /* kayan gösterge: bir sütun genişliğinde saydam kenarlıklı kutu; görünen kısım padding kutusudur (sütundan 3 px içeride) */
    :root:not([data-efekt="sade"]) .alt-gezinme::after {
      content: ""; position: absolute; z-index: 0; pointer-events: none; box-sizing: border-box;
      left: var(--dg-sol); width: calc((100% - var(--dg-sol) - var(--dg-sag)) / 5); top: 6px; bottom: calc(6px + env(safe-area-inset-bottom));
      border: 5px solid transparent; border-inline-width: 3px; border-radius: 24px;
      background: var(--dg-gosterge); background-clip: padding-box;
      box-shadow: inset 0 1px 0 var(--dg-isik), inset 0 0 0 1px var(--dg-gosterge-cizgi);
      transform: translateX(calc(var(--alt-i) * 100%));
      opacity: 0;
      transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 180ms var(--egri);   /* aşım yok: son sütunda cam sınırını geçmez */
    }
    :root:not([data-efekt="sade"]) .alt-gezinme:has(> .alt-oge[aria-current="page"])::after { opacity: 1; }
    :root:not([data-efekt="sade"]) .alt-gezinme:has(> :nth-child(2)[aria-current="page"]) { --alt-i: 1; }
    :root:not([data-efekt="sade"]) .alt-gezinme:has(> :nth-child(3)[aria-current="page"]) { --alt-i: 2; }
    :root:not([data-efekt="sade"]) .alt-gezinme:has(> :nth-child(4)[aria-current="page"]) { --alt-i: 3; }
    :root:not([data-efekt="sade"]) .alt-gezinme:has(> :nth-child(5)[aria-current="page"]) { --alt-i: 4; }
    /* eski üst çizgi göstergesi yerini kayan göstergeye bıraktı */
    :root:not([data-efekt="sade"]) .alt-oge[aria-current="page"]::before { display: none; }
  }

  /* etkin sekmede ikon yükselir; basınca ikon çöker (küçük mesafe: yaylı eğri burada güvenli) */
  :root:not([data-efekt="sade"]) .alt-ikon { transition: transform 300ms var(--egri-yay); }
  :root:not([data-efekt="sade"]) .alt-oge[aria-current="page"] .alt-ikon { transform: translateY(-2px) scale(1.1); }
  :root:not([data-efekt="sade"]) .alt-oge:active .alt-ikon { transform: scale(.9); }
  :root:not([data-efekt="sade"]) .alt-oge[aria-current="page"]:active .alt-ikon { transform: translateY(-1px) scale(1); }
}

/* ==========================================================================
   4. İskelet: yumuşak parıltı (transform ile süpürme; eski arka plan kaydırması kapanır)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .isk {
    position: relative; overflow: hidden; animation: none; background: var(--dg-iskelet);
  }
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .isk::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 18%, var(--dg-parilti) 50%, transparent 82%);
    transform: translateX(-100%);
    animation: dg-parilti 1.7s cubic-bezier(.4, 0, .2, 1) infinite;
  }
}
@keyframes dg-parilti { to { transform: translateX(100%); } }

/* ==========================================================================
   5. Hareket (yalnız hareket serbestse): görünüm geçişi, kademeli giriş, eğim, yükselme
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* görünüm geçişi: rota değişince içerik alanı kısa süre solarak 8 px yükselir (uzam.css'teki derinlikten-gelme yerine) */
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .gorunum { animation: dg-gorunum 280ms var(--egri); }

  /* kademeli giriş: js/derinlik.js yeni çizilen ilk ~12 kart/sayaç/satıra data-dg ve --dg-i koyar, animationend'de kaldırır */
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) [data-dg] {
    animation: dg-gir 340ms var(--egri) backwards;
    animation-delay: calc(var(--dg-i, 0) * 36ms);
  }

  /* tıklanabilir kart: üzerine gelince 1 px yükselir (yalnız ince işaretçi), basınca çöker */
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) :is(a.kart, button.kart, .kart[role="button"], .kart[role="link"], .kart.tiklanir):hover { transform: translateY(-1px); }
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .rt-blok:not([data-suruk]):hover { transform: translateY(-1px); }
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .mgz-kart:hover { transform: translateY(-1px); }
  }
  /* menü öğeleri (yan menü ve telefon çekmecesi): basınca hafifçe çöker */
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .menu-oge {
    transition: background-color var(--t-hizli) var(--egri), color var(--t-hizli), box-shadow var(--t-hizli), transform 150ms var(--egri-yay);
  }
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .menu-oge:active { transform: scale(.985); }
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) :is(a.kart, button.kart, .kart[role="button"], .kart[role="link"], .kart.tiklanir):active { transform: scale(.985); }
  :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .rt-blok:not([data-suruk]):active { transform: scale(.985); }

  /* KPI sayaçları: ince işaretçide eğim (≤ 4°, js/derinlik.js --dg-rx/--dg-ry yazar) + parlama; dokunmatikte eğim yok, yalnız basınca çökme */
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) :is(.bg-sayac, .yt-sayac)[data-dg-ok] {
      transform: perspective(640px) translateY(-2px) rotateX(var(--dg-rx, 0deg)) rotateY(var(--dg-ry, 0deg));
      box-shadow: var(--dg-e2);
      transition: box-shadow 220ms var(--egri), transform 120ms linear;   /* işaretçiyi yumuşakça izler */
      will-change: transform;
    }
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) :is(.bg-sayac, .yt-sayac)[data-dg-ok]::after { opacity: 1; }
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) :is(.bg-sayac, .yt-sayac)[data-dg-ok]:active {
      transform: perspective(640px) scale(.99) rotateX(var(--dg-rx, 0deg)) rotateY(var(--dg-ry, 0deg));
      box-shadow: var(--dg-e1);
    }
  }
  @media (hover: none), (pointer: coarse) {
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) :is(.bg-sayac, .yt-sayac):active { transform: scale(.985); box-shadow: var(--dg-e0); }
    :root:not([data-efekt="sade"]):not([data-hareket="kapali"]) .kart:is(a, button, [role="button"], [role="link"], .tiklanir):active { box-shadow: var(--dg-e0); }
  }
}

@keyframes dg-gorunum { from { opacity: 0; transform: translateY(8px); } }
@keyframes dg-gir { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* ==========================================================================
   6. Hareket tamamen kapalı: <html data-hareket="kapali"> (temel.css'teki prefers-reduced-motion kuralının aynısı)
   Statik derinlik (gölge, ışık) kalır; geçiş ve animasyon süresi sıfırlanır.
   ========================================================================== */
:root[data-hareket="kapali"] *, :root[data-hareket="kapali"] *::before, :root[data-hareket="kapali"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* hareketi azalt: çökme ve yükselme dönüşümleri de kapanır (bilesen.css'teki .dugme:active ölçeği dahil; gölge değişimi kalır) */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-efekt="sade"]) .dugme:active:not(:disabled) { transform: none; }
}
:root[data-hareket="kapali"]:not([data-efekt="sade"]) .dugme:active:not(:disabled) { transform: none; }

/* ---------- zorunlu renk (Windows yüksek karşıtlık): süs katmanları kapanır, dock sınırı görünür kalır ---------- */
@media (forced-colors: active) {
  .bg-sayac::after, .yt-sayac::after, .isk::after, .alt-gezinme::after { display: none !important; }
  .alt-gezinme::before { border: 1px solid CanvasText; }
}