/*
Performans modu — iken devreye girer.
Sayfaların gorunusu ayni kalir, sadece pahali efektler (blur, surekli
animasyon, hover transform, cok katmanli golge, uzun liste render'i)
kapatilir/hafifletilir. perf-mode.js tarafindan 'e class eklenir.
Seciciler CSS Modules'un derlenmis sinif adlarina (`{dosya}-module__{hash}__{ad}`)
gore yazildi — proje boyunca ayni tasarim sistemi tekrar kullanildigi icin
(wrap/aurora/rise/card/list/log/dial/roleChip...) bu adlar dosyalar arasi ortak.
Kisa/belirsiz adlarda (.t/.p/.c) yanlis eslesmeyi onlemek icin hem dosya
onekine hem "tam sonek" ($=) esitligine bakiliyor.
*/
/* ── 1) Cam paneller (glassmorphism kartlar): backdrop-filter kapat, duz koyu zemin ── */
html.perf [class*="__card"],
html.perf [class*="__glass"],
html.perf [class*="__chart"],
html.perf [class*="__score"],
html.perf [class*="__tabs"],
html.perf [class*="__scrim"],
html.perf [class*="cezaliGorev-module"][class$="__t"],
html.perf [class*="gorevTablosu-module"][class$="__p"],
html.perf [class*="saglikKontrolu-module"][class$="__c"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-image: none !important;
background-color: rgba(20, 14, 30, 0.92) !important;
}
/* ── 7) Agir box-shadow'lar tek katmana insin (ayni kartlar) ── */
html.perf [class*="__card"],
html.perf [class*="__glass"],
html.perf [class*="__dialCard"],
html.perf [class*="__personCard"],
html.perf [class*="cezaliGorev-module"][class$="__t"],
html.perf [class*="gorevTablosu-module"][class$="__p"],
html.perf [class*="saglikKontrolu-module"][class$="__c"] {
box-shadow: 0 0 0 1px var(--edge, rgba(255, 255, 255, 0.08)) !important;
}
/* ── 2) Aurora arka planlar: surukleme animasyonu kapat, daha az/daha dar blur ── */
html.perf [class*="__aurora"] {
animation: none !important;
inset: -15% !important;
filter: blur(60px) !important;
}
/* ── 3) Gren dokusu (giris ekrani) ── */
html.perf .gir-body .sky .grain {
display: none !important;
}
/* ── 4) Donen halkalar / buyuk susler (giris ekrani ring + halo) ──
NOT: .dragons suruklenmesi bilerek dokunulmuyor — daha once "ejderhalar
hareket etmiyor" hatasi burada duzeltilmisti, perf modda da suruklemeli kalmali. */
html.perf .gir-body .ring,
html.perf .gir-body .halo {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* ── 5) Giris animasyonlari: rise + kademeli fade-in ── */
html.perf [class*="__rise"] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
html.perf .sayfa-gecisi {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
html.perf .gir-body .card,
html.perf .gir-body .card > *,
html.perf .gir-body .foot,
html.perf .gir-body .wave {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* ── 6) Hover'da transform kullanan her sey ── */
html.perf [class*="-module__"]:hover {
transform: none !important;
}
html.perf .hover\:-translate-y-0\.5:hover {
transform: none !important;
}
html.perf .gir-body .cta:hover,
html.perf .gir-body .invite:hover,
html.perf .gir-body .card:has(.cta:hover) .mark {
transform: none !important;
}
/* ── 8) Uzun liste satirlari: ekran disindayken render etme ── */
html.perf [class*="__list"] > *,
html.perf [class*="__log"] > * {
content-visibility: auto;
contain-intrinsic-size: 0 56px;
}
/* Dokunulmadi (bilerek): pulse/sweep/eyeGlow gibi kucuk tek-eleman
animasyonlari (orn. .gir-body .stone, .eye-glow, .ember, .led, .spin,
.animate-pulse, girStoneGlow/girEyeGlow/girEmberFloat/girPulse) — bunlar
sayfanin "canli" hissini veren hafif efektler, perf modda da calismaya
devam eder. */
/* ── Ac/kapa dugmesi (perf-mode.js tarafindan eklenir) ── */
.perf-toggle {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 2147483000;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
padding: 9px 13px;
border-radius: 999px;
border: 1px solid rgba(168, 85, 247, 0.3);
background: rgba(21, 18, 30, 0.92);
color: #a99fc0;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 11.5px;
font-weight: 500;
line-height: 1;
box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.perf-toggle:hover {
color: #ece8f4;
border-color: rgba(168, 85, 247, 0.55);
}
.perf-toggle svg {
flex: 0 0 auto;
opacity: 0.8;
}
.perf-toggle-on {
color: #cd9bff;
border-color: rgba(168, 85, 247, 0.6);
background: rgba(91, 47, 133, 0.28);
}
.perf-toggle-on svg {
opacity: 1;
}
@media (max-width: 560px) {
.perf-toggle span {
display: none;
}
.perf-toggle {
padding: 10px;
}
}