/* ==========================================================================
   Seyir paneli — "Uzam" katmanı (seçildi 15 Eki 2026; prototip: panel/dev/yonler, yön 3)
   Gündüz belirteçleri, yazı tipleri ve kurum rengi aynı kalır; bu dosya derinlik ve hareket ekler:
   - ışıklı oda: kurum renginden yumuşak ışık lekeleri ve perspektif zemin ızgarası (js/uzam.js'in eklediği .uzam-zemin),
     imleçle hafif paralaks;
   - buzlu cam yüzeyler: yan menü, üst çubuk, kart, açılır menü, pencere ve çekmece;
   - kartın kenarında imleci izleyen ışık; birincil düğmede yumuşak parıltı;
   - görünüm ve pencere derinlikten öne gelir, pencere açıkken arka plan geri çekilir.
   Isı haritasının 3B blokları css/grafik.css'te (aynı anahtar).
   İçerik döndürülmez: metin keskin kalsın diye derinliği zemin katmanı, gölge ve ışık verir.

   Kapatma: <html data-efekt="sade"> (Hesap menüsü ya da Profil › Tercihler › Efektler: Sade) Gündüz görünümüne döner.
   Hareketi azalt açıkken (css/temel.css) geçişler anlık, js/uzam.js imleci izlemez; cam ve ışık kalır.
   İç içe yazım (CSS nesting) ve color-mix desteklemeyen eski tarayıcı bu dosyanın kurallarını yok sayar: panel Gündüz olarak çalışır.
   ========================================================================== */

:root {
  --cam: color-mix(in oklab, var(--yuzey) 72%, transparent);
  --cam-yogun: color-mix(in oklab, var(--yuzey) 86%, transparent);
  --cam-kenar: rgb(255 255 255 / .72);
  --cam-cizgi: color-mix(in oklab, var(--cizgi) 70%, transparent);
  --cam-bulanik: blur(22px) saturate(1.5);
  --golge-uzam: 0 1px 0 rgb(255 255 255 / .65) inset, 0 1px 2px rgb(19 32 42 / .05), 0 22px 44px -30px rgb(19 32 42 / .34);
  --golge-uzam-kalk: 0 1px 0 rgb(255 255 255 / .7) inset, 0 2px 6px rgb(19 32 42 / .06), 0 30px 56px -28px rgb(19 32 42 / .44);
  --isik-1: color-mix(in oklab, var(--vurgu) 24%, transparent);
  --isik-2: color-mix(in oklab, var(--isi3) 42%, transparent);
  --isik-3: color-mix(in oklab, var(--isi2) 55%, transparent);
  --izgara: color-mix(in oklab, var(--vurgu) 15%, transparent);
  --r-uzam: 14px;
  --uzam-oy: 50vh;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --cam: color-mix(in oklab, var(--yuzey) 70%, transparent);
    --cam-yogun: color-mix(in oklab, var(--yuzey) 88%, transparent);
    --cam-kenar: rgb(255 255 255 / .09);
    --golge-uzam: 0 1px 0 rgb(255 255 255 / .05) inset, 0 26px 52px -30px rgb(0 0 0 / .75);
    --golge-uzam-kalk: 0 1px 0 rgb(255 255 255 / .07) inset, 0 32px 60px -26px rgb(0 0 0 / .85);
    --isik-1: color-mix(in oklab, var(--vurgu) 30%, transparent);
    --isik-2: color-mix(in oklab, var(--isi3) 30%, transparent);
    --isik-3: color-mix(in oklab, var(--isi2) 30%, transparent);
    --izgara: color-mix(in oklab, var(--vurgu) 22%, transparent);
  }
}
:root[data-tema="koyu"] {
  --cam: color-mix(in oklab, var(--yuzey) 70%, transparent);
  --cam-yogun: color-mix(in oklab, var(--yuzey) 88%, transparent);
  --cam-kenar: rgb(255 255 255 / .09);
  --golge-uzam: 0 1px 0 rgb(255 255 255 / .05) inset, 0 26px 52px -30px rgb(0 0 0 / .75);
  --golge-uzam-kalk: 0 1px 0 rgb(255 255 255 / .07) inset, 0 32px 60px -26px rgb(0 0 0 / .85);
  --isik-1: color-mix(in oklab, var(--vurgu) 30%, transparent);
  --isik-2: color-mix(in oklab, var(--isi3) 30%, transparent);
  --isik-3: color-mix(in oklab, var(--isi2) 30%, transparent);
  --izgara: color-mix(in oklab, var(--vurgu) 22%, transparent);
}

.uzam-zemin { display: none; }

:root:not([data-efekt="sade"]) {
  & body { isolation: isolate; }

  /* ---------- ışıklı oda ---------- */
  & .uzam-zemin { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --px: 0; --py: 0; }
  & .uzam-isik { position: absolute; inset: -15%;
    background:
      radial-gradient(38% 34% at 24% 16%, var(--isik-1), transparent 70%),
      radial-gradient(32% 38% at 88% 10%, var(--isik-2), transparent 70%),
      radial-gradient(30% 30% at 64% 84%, var(--isik-3), transparent 70%);
    translate: calc(var(--px) * -16px) calc(var(--py) * -12px);
    transition: translate 1.2s var(--egri);
    animation: uzam-isik 28s ease-in-out infinite alternate; }
  & .uzam-izgara { position: absolute; left: -50%; right: -50%; bottom: -12%; height: 58%; transform-origin: 50% 100%;
    transform: perspective(700px) rotateX(72deg) translateX(calc(var(--px) * -28px));
    transition: transform 1.2s var(--egri);
    background-image: linear-gradient(var(--izgara) 1px, transparent 1px), linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(transparent, #000 65%); mask-image: linear-gradient(transparent, #000 65%); }

  /* ---------- cam yüzeyler ---------- */
  & .yan { background: var(--cam); backdrop-filter: var(--cam-bulanik); -webkit-backdrop-filter: var(--cam-bulanik); border-right-color: var(--cam-cizgi);
    box-shadow: 1px 0 0 var(--cam-kenar) inset; }
  & .ust { background: color-mix(in oklab, var(--bg) 62%, transparent); backdrop-filter: var(--cam-bulanik); -webkit-backdrop-filter: var(--cam-bulanik);
    border-bottom-color: var(--cam-cizgi); }
  & .menu-oge[aria-current="page"] { background: var(--cam-yogun);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--vurgu) 22%, transparent), 0 8px 20px -12px color-mix(in oklab, var(--vurgu) 60%, transparent); }

  & .kart { position: relative; background: var(--cam); backdrop-filter: var(--cam-bulanik); -webkit-backdrop-filter: var(--cam-bulanik);
    border-color: var(--cam-kenar); border-radius: var(--r-uzam); box-shadow: var(--golge-uzam); transition: box-shadow .35s var(--egri); }
  & .kart:hover { box-shadow: var(--golge-uzam-kalk); }
  /* kenar ışığı: js/uzam.js imlecin kart içindeki yerini --mx/--my olarak yazar */
  & .kart::before { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--vurgu) 75%, white), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .3s ease; }
  & .kart[data-isik]::before { opacity: 1; }

  /* kartsız tablolar (ör. hasta listesi) de cam yüzeyde durur; kart, pencere ve çekmece içindekiler zaten camın üstünde */
  & .tablo-kap:not(.kart .tablo-kap, .kip-kutu .tablo-kap, .cekmece-kutu .tablo-kap) { padding: 4px 8px 6px; background: var(--cam);
    backdrop-filter: var(--cam-bulanik); -webkit-backdrop-filter: var(--cam-bulanik); border: 1px solid var(--cam-kenar); border-radius: var(--r-uzam);
    box-shadow: var(--golge-uzam); }

  & .acilir { background: var(--cam-yogun); backdrop-filter: var(--cam-bulanik); -webkit-backdrop-filter: var(--cam-bulanik); border-color: var(--cam-kenar);
    box-shadow: var(--golge-uzam-kalk); }
  & .dugme[data-tur="birincil"] { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 8px 18px -10px color-mix(in oklab, var(--vurgu) 75%, transparent); }

  /* ---------- pencere ve çekmece: derinlikten öne gelir ---------- */
  & dialog.kip::backdrop, & dialog.cekmece::backdrop { background: color-mix(in oklab, var(--metin) 14%, transparent); backdrop-filter: blur(6px) saturate(.9); }
  & .kip-kutu, & .cekmece-kutu { background: var(--cam-yogun); backdrop-filter: var(--cam-bulanik); -webkit-backdrop-filter: var(--cam-bulanik);
    border-color: var(--cam-kenar); box-shadow: var(--golge-uzam-kalk), var(--golge-buyuk); }
  & .kip-kutu { border-radius: 18px; animation: uzam-kip-gir .55s var(--egri); }
  & .cekmece-kutu { animation: uzam-cekmece-gir .6s var(--egri); }
  & dialog.cekmece[data-taraf="sol"] .cekmece-kutu { animation-name: cekmece-gir-sol; }
  & dialog.kip[data-kapaniyor] .kip-kutu { animation: kip-cik 170ms var(--egri) forwards; }
  & dialog.cekmece[data-kapaniyor] .cekmece-kutu { animation: cekmece-cik 170ms var(--egri) forwards; }

  /* pencere açıkken arka plan geri çekilir (masaüstü; telefonda alt gezinme sabit kalsın diye yok) */
  & .kabuk { transition: grid-template-columns var(--t-yavas) var(--egri), scale .6s var(--egri); transform-origin: 50% var(--uzam-oy); }
  @media (min-width: 760px) {
    &:has(dialog.kip[open], dialog.cekmece[open]) .kabuk { scale: .985; }
  }

  /* ---------- görünüm geçişi ---------- */
  & .gorunum { animation: uzam-gorunum-gir .5s var(--egri); }
}

@keyframes uzam-isik { 50% { transform: translate(3%, 2%) scale(1.04); } 100% { transform: translate(-2%, 3%) scale(1.02); } }
@keyframes uzam-kip-gir { from { opacity: 0; transform: perspective(1200px) translateZ(-220px) translateY(10px); } }
@keyframes uzam-cekmece-gir { from { opacity: 0; transform: perspective(1200px) translateX(40px) translateZ(-120px) rotateY(-8deg); } }
@keyframes uzam-gorunum-gir { from { opacity: 0; transform: perspective(1200px) translateZ(-50px) translateY(6px); } }

@media (forced-colors: active) {
  .uzam-zemin { display: none !important; }
  .kart::before { display: none; }
}