/* Sıvı metal hareketi, 2. tur (hareket.js ile). Kullanıcı (14 Ekim): "Kıyasla / Tasarım / Okuma'da dönme, saçaklanma
   olmayacak. Fiyat şeridi dönerli olmayacak. Sadece artı ve Fişi bas dönerli olabilir. Hiçbir şey kasmasın."
   Dönen halka yalnız ana eylem düğmelerinde (.altin.sivi) ve Düzenle (+) düğmesinde; sade, ince, yavaş.
   Performans: dönen ve kayan her şey ayrı katmanda transform ile hareket eder (kompozitör); her karede yeniden boyama yok.
   Sarı / altın yok. */

/* ---------- Halkanın çalışmayan eski dönüşleri kapalı (--a ile boyanan tur, sedef bant akışı, basınca parıltı) ---------- */
html[data-tema="sivi"] .sivi-halka{animation:none!important}
html[data-tema="sivi"] .sivi.tur::after,html[data-tema="sivi"] .gonder-d.tur::after{animation:none!important;opacity:0!important}

/* ---------- Dönen halka: maskeli şerit, içinde dönen iki katman ---------- */
html[data-tema="sivi"] .sivi-halka.hr-hazir{background:none!important;overflow:hidden;contain:layout paint}
html[data-tema="sivi"] .duzen-d .sivi-halka.hr-ek{position:absolute;inset:-1.5px;border-radius:50%;padding:1.5px;pointer-events:none;z-index:1;
  -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)}
.hr-don{position:absolute;left:50%;top:50%;width:var(--hr-cap,160%);height:var(--hr-cap,160%);margin:calc(var(--hr-cap,160%) / -2) 0 0 calc(var(--hr-cap,160%) / -2);
  pointer-events:none;will-change:transform;backface-visibility:hidden}
/* krom gövde: ağır, ters yönde */
.hr-govde{background:conic-gradient(#8a919c 0deg,#c8cdd4 40deg,#fbfbfc 70deg,#d9dde2 100deg,#9097a2 146deg,#5d646e 178deg,#9299a4 208deg,#eaedf0 244deg,#fff 262deg,#c5cad1 296deg,#9ca3ad 330deg,#8a919c 360deg);
  animation:hr-don 46s linear infinite reverse;animation-delay:var(--hr-faz,0s)}
/* ince ışık: beyaz tepe, lila-buz kuyruk, gül ucu; karşıda daha sönük ikinci ışık */
.hr-isin{background:conic-gradient(rgba(255,255,255,0) 0deg,rgba(205,229,242,0) 14deg,rgba(180,169,230,.5) 44deg,rgba(151,203,232,.85) 56deg,#fff 64deg,rgba(228,219,230,.9) 69deg,rgba(233,185,196,.6) 74deg,rgba(255,255,255,0) 84deg,
    rgba(255,255,255,0) 196deg,rgba(205,229,242,.5) 230deg,rgba(255,255,255,.8) 238deg,rgba(255,255,255,0) 252deg,rgba(255,255,255,0) 360deg);
  animation:hr-don 11s linear infinite;animation-delay:var(--hr-faz,0s)}
@keyframes hr-don{to{transform:rotate(360deg)}}

/* ---------- Ana düğmenin yüzündeki sedef bant: kayan katman (eski ::before yeniden boyamalı akışın yerine) ---------- */
html[data-tema="sivi"] .altin.sivi.hr-bantli::before{display:none}
.hr-bant{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.hr-bant>i{position:absolute;left:0;top:0;bottom:0;width:300%;opacity:.88;will-change:transform;backface-visibility:hidden;
  background:linear-gradient(102deg,transparent 0 14%,rgba(216,209,241,.75) 25%,rgba(255,255,255,.95) 33%,rgba(205,229,242,.75) 41%,transparent 52%,transparent 62%,rgba(220,230,241,.72) 74%,rgba(255,255,255,.85) 80%,rgba(239,215,221,.55) 85%,transparent 93%);
  animation:hr-bant 18s ease-in-out infinite alternate;animation-delay:var(--hr-faz,0s)}
@keyframes hr-bant{from{transform:translate3d(0,0,0)}to{transform:translate3d(-66.667%,0,0)}}
html[data-tema="sivi"] .altin.sivi:disabled:not(.calisiyor) .hr-bant{opacity:.5}

/* ---------- Kayan hap (Kıyasla / Tasarım / Okuma, duvar seçici): sade, durağan ---------- */
.seg.hr-kayan{position:relative;isolation:isolate}
html[data-tema="sivi"] .seg.hr-kayan button{position:relative;z-index:1}
html[data-tema="sivi"] .seg.hr-kayan button:is([aria-checked=true],[aria-pressed=true],[aria-selected=true]){background:transparent!important;box-shadow:none!important;border-color:transparent!important;color:#15171b}
html[data-tema="sivi"] .seg.hr-kayan button::after{display:none!important}
/* seçili olmayan sekmede arka plan yok: dokunmatik ekranda takılı kalan :hover gri hap bırakmasın; yalnız fareli cihazda hafif ipucu */
html[data-tema="sivi"] .seg.hr-kayan button:not([aria-checked=true]),html[data-tema="sivi"] .seg.hr-kayan button:not([aria-checked=true]):hover{background:transparent;box-shadow:none}
@media (hover:hover) and (pointer:fine){html[data-tema="sivi"] .seg.hr-kayan button:not([aria-checked=true]):hover{background:var(--cap-hover)}}
.hr-hap{position:absolute;left:0;top:0;z-index:0;width:0;border-radius:999px;pointer-events:none;transform-origin:0 50%;will-change:transform;
  border:1px solid transparent;
  background:linear-gradient(180deg,#fff,#eceef2) padding-box,linear-gradient(180deg,#fff 0%,#cdd2d9 55%,#9aa1ab 100%) border-box;
  box-shadow:0 1px 2px rgba(30,36,48,.16),0 4px 10px -3px rgba(30,36,48,.22)}

/* ---------- Dok: + açılınca kapsül çekilir, tepsi + düğmesinden büyür (yalnız transform + opacity) ----------
   Eskiden: kapsülde filter: blur geçişi (cam kapsülün üstünde her karede bulanıklık) ve tepside clip-path dairesi
   (her karede yeniden boyama + arkasındaki cam bulanıklığı). İkisi de kompozitörde çalışmıyordu. */
html[data-tema="sivi"] .s-dok>.seg{transition:opacity .2s ease-out,transform var(--donus) var(--ease-d)}
html[data-tema="sivi"] .s-dok.acik>.seg{filter:none}
html[data-tema="sivi"] .tepsi{clip-path:none;transform-origin:var(--ox,85%) var(--oy,110%);will-change:transform,opacity;
  transition:transform .36s cubic-bezier(.2,.9,.25,1.04),opacity .2s ease-out}
html[data-tema="sivi"] .tepsi.kapali{transform:scale(.1);opacity:0;transition:transform .26s cubic-bezier(.4,0,.6,1),opacity .2s ease-in .06s}

/* ---------- Fotoğraf: modlar arası kayma ---------- */
.hr-eski{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 45%;will-change:transform;contain:strict}
.hr-eski,.hr-eski *{animation:none!important;transition:none!important}
/* geri çekilen kopyadaki küçük cam mercekler bulanıklığı her karede yeniden hesaplamasın */
.hr-eski *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hr-perde{position:absolute;inset:0;z-index:20;background:rgba(28,32,42,.3);opacity:0;will-change:opacity}
/* birleşim çizgisi: yeni kartın kenarında ince sedef çizgi + eski kartın üstüne düşen gölge (blur yok, düz gradyan) */
.hr-bicak{position:absolute;left:0;top:0;bottom:0;z-index:6;width:2px;margin-left:-1px;pointer-events:none;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(255,255,255,.3),#fff 14%,rgba(205,212,240,.95) 34%,#fff 52%,rgba(190,220,238,.95) 70%,#fff 88%,rgba(255,255,255,.3))}
.hr-bicak::before{content:"";position:absolute;top:0;bottom:0;width:40px}
.hr-bicak.sol::before{right:2px;background:linear-gradient(270deg,rgba(20,24,32,.3),rgba(20,24,32,0))}
.hr-bicak.sag::before{left:2px;background:linear-gradient(90deg,rgba(20,24,32,.3),rgba(20,24,32,0))}

@media (prefers-reduced-motion:reduce){
  .hr-don,.hr-bant>i{animation:none!important}
  .hr-bicak,.hr-eski{display:none!important}
}