/* ─────────────────────────────────────────────────────────────
   Yasha Records — css/perf.css
   "Performans modu" (html[data-lite]) katmanı. js/perf.js açar.

   Neyi kapatır:
     • Sonsuz dekoratif animasyonlar — her karede yeniden boyanıyorlardı.
     • backdrop-filter — sürekli ekranda duran yüzeylerde (nav, alt bar,
       açılır menüler) kalıcı bir bulanıklık katmanı demek; zayıf GPU'da
       ve kaynak kısan tarayıcılarda (Opera GX) en pahalı kalem.
     • Geniş yayılımlı gölgeler ve blur filtreleri.

   Neyi kapatmaz: yükleniyor göstergeleri (kullanıcıya ilerleme anlatır,
   üstelik transform tabanlı ve ucuzdur), düzen, renkler, içerik.

   Bu dosya index.css / izle.css'ten SONRA yüklenir.
   ───────────────────────────────────────────────────────────── */

/* ── Ucuz nabız efektleri (lite olmasa da herkese uygulanır) ──
   box-shadow animasyonu elemanın her karede yeniden boyanmasına yol
   açıyordu; sticky nav'ın içindeyse tüm nav katmanı yeniden boyanıyordu.
   Aynı görüntüyü opacity/transform ile veriyoruz — bunlar compositor'da
   çalışır, ana iş parçacığına dokunmaz. */
@keyframes yrRingFade {
  0%       { opacity: .8; transform: scale(1); }
  70%,100% { opacity: 0;  transform: scale(1.45); }
}
@keyframes yrRainbowShift {
  from { background-position: 0 50%; }
  to   { background-position: -200% 50%; }
}

/* Destek Ol düğmesinin çevresinde sürekli yanıp sönen turuncu hale vardı
   (sabit 16px parıltı + 2.8 sn'de bir nefes alan 24px ikinci kat).
   Gözü yoruyordu ve sayfanın en "yapay" duran yeriydi. Parıltı kaldırıldı;
   düğme yalnızca üstüne gelince hafifçe belirginleşiyor. */
.nav-support { position: relative; }
.nav-support:hover { filter: brightness(1.08); }

.sec-title .badge-live { position: relative; }
/* Halka dalgası yalnız gerçekten dikkat isteyen iki yerde kaldı
   (okunmamış bildirim ve CANLI etiketi); yeni bölüm şeridinde
   gereksizdi — her kartta ayrı ayrı atıyordu. Dalga da yumuşadı. */
.notif-badge::after,
.sec-title .badge-live::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(255, 69, 0, .3);
  opacity: 0; pointer-events: none;
  animation: yrRingFade 2.6s ease-out infinite;
}
.sec-title .badge-live::after { box-shadow: 0 0 0 5px rgba(239, 68, 68, .45); }

/* ── Gizli içerik (admin önizlemesi) ─────────────────────────
   Adminin yanlışlıkla "bu yayında sanmak" ihtimalini bırakmamak için
   gizli kayıtlar her yerde çizgili bir şeritle işaretlenir. */
.pc-ribbon.st-hidden { background: #4b5563; color: #fff; }
/* Gizli proje kartı soluk çizilir — admin listede gezerken yayındaki
   projelerle karıştırmasın. :has desteklemeyen tarayıcıda yalnızca
   şerit görünür, işlev değişmez. */
.pc-card:has(.pc-ribbon.st-hidden) .pc-poster-wrap { opacity: .55; }
.pc-card:has(.pc-ribbon.st-hidden):hover .pc-poster-wrap { opacity: 1; }
.yr-hidden-flag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(107, 114, 128, .22); color: #d1d5db;
  border: 1px solid rgba(209, 213, 219, .28);
  padding: 3px 9px; border-radius: 20px;
  font-size: .6rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  vertical-align: middle;
}
[data-theme="light"] .yr-hidden-flag { background: rgba(75, 85, 99, .12); color: #4b5563; }

/* ── Tema penceresindeki performans anahtarı ─────────────── */
.perf-row {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 4px; padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s;
}
.perf-row:hover { border-color: var(--border-h); background: rgba(255, 255, 255, .05); }
.perf-row:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px; }
.perf-row-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pr-s); color: var(--pr); font-size: .9rem;
}
.perf-row-body { flex: 1; min-width: 0; }
.perf-row-title { font-size: .82rem; font-weight: 800; color: var(--text); }
.perf-row-sub { font-size: .68rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.perf-switch {
  flex: 0 0 42px; width: 42px; height: 24px; border-radius: 12px;
  background: rgba(255, 255, 255, .12); position: relative;
  transition: background .2s;
}
.perf-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .2s var(--ease);
}
.perf-row.active .perf-switch { background: var(--pr); }
.perf-row.active .perf-knob   { transform: translateX(18px); }
[data-theme="light"] .perf-row     { background: rgba(0, 0, 0, .03); }
[data-theme="light"] .perf-switch  { background: rgba(0, 0, 0, .16); }

/* ═══════════════════════════════════════════════════════════
   LITE MODU
   ═══════════════════════════════════════════════════════════ */

/* Bulanık yüzeyleri kaldır — arkasını göstermemeleri için opak yap. */
html[data-lite] nav.main-nav,
html[data-lite] nav,
html[data-lite] .bottom-nav,
html[data-lite] .user-menu,
html[data-lite] .notif-dropdown,
html[data-lite] .search-overlay,
html[data-lite] .search-input-wrap,
html[data-lite] .search-results,
html[data-lite] .modal-bg,
html[data-lite] .auth-bg,
html[data-lite] .auth-box,
html[data-lite] .custom-box,
html[data-lite] .settings-box,
html[data-lite] .prof-modal,
html[data-lite] .supp-box,
html[data-lite] .apply-box,
html[data-lite] .gen-box,
html[data-lite] .report-modal-box,
html[data-lite] .proj-modal,
html[data-lite] .toast,
html[data-lite] .hero-btn.ghost,
html[data-lite] .hero-arrow,
html[data-lite] .carousel-arrow,
html[data-lite] .pc-kind,
html[data-lite] .ae-box,
html[data-lite] nav.admin-nav,
html[data-lite] .sb-overlay,
html[data-lite] .pending-bar,
html[data-lite] .md-bg,
html[data-lite] .md-box,
html[data-lite] .save-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-lite] nav.admin-nav { background: var(--bg); }
html[data-lite] .pending-bar,
html[data-lite] .md-box,
html[data-lite] .save-bar { background: var(--surf); }
html[data-lite] .md-bg { background: rgba(0, 0, 0, .9); }

html[data-lite] nav.main-nav,
html[data-lite] nav               { background: var(--bg); }
html[data-lite] .bottom-nav       { background: var(--bg); }
html[data-lite] .user-menu,
html[data-lite] .notif-dropdown   { background: var(--surf); }
html[data-lite] .search-overlay   { background: rgba(0, 0, 0, .92); }
html[data-lite] .modal-bg         { background: rgba(0, 0, 0, .9); }
html[data-lite] .auth-bg          { background: rgba(0, 0, 0, .93); }
html[data-lite] .auth-box,
html[data-lite] .custom-box,
html[data-lite] .settings-box,
html[data-lite] .prof-modal,
html[data-lite] .supp-box,
html[data-lite] .apply-box,
html[data-lite] .gen-box,
html[data-lite] .report-modal-box,
html[data-lite] .proj-modal       { background: var(--surf); }
html[data-lite] .toast            { background: var(--surf); }

[data-theme="light"] html[data-lite] .search-overlay,
html[data-lite][data-theme="light"] .search-overlay { background: rgba(245, 245, 247, .96); }

/* Sonsuz dekoratif animasyonları durdur. Yükleniyor göstergeleri
   (.ld-ring, .spinner, .fa-spin, .skeleton-*) kasıtla dışarıda. */
html[data-lite] .nav-support,
html[data-lite] .notif-badge::after,
html[data-lite] .sec-title .badge-live::after,
html[data-lite] .a-logo,
html[data-lite] .ld-wrap img,
html[data-lite] [style*="yrRainbowShift"],
html[data-lite] [style*="animation:rainbow"] {
  animation: none !important;
}

/* Giriş animasyonlarını kısalt — kart bolluğunda toplamda birikiyorlar. */
html[data-lite] .sec,
html[data-lite] .fi,
html[data-lite] .news-card,
html[data-lite] .locked-overlay { animation-duration: .01ms !important; }

/* Ağır gölgeler → ince kenarlık. Kart ızgaralarında hover başına
   koca bir blur yüzeyi boyanıyordu. */
html[data-lite] .pc-card:hover .pc-poster-wrap { box-shadow: none; border-color: var(--pr); }
html[data-lite] .search-input-wrap,
html[data-lite] .user-menu,
html[data-lite] .notif-dropdown,
html[data-lite] .auth-box,
html[data-lite] .prof-modal,
html[data-lite] .proj-modal,
html[data-lite] .toast,
html[data-lite] .video-wrap { box-shadow: 0 0 0 1px var(--border); }

/* filter:blur bir render geçişi daha demek — kilitli içerikte
   aynı işi opaklık görüyor. */
html[data-lite] .blurred-content { filter: none; opacity: .25; }

/* Hover geçişlerini kısalt: uzun geçiş = uzun süre boyanan kart. */
html[data-lite] .pc-card,
html[data-lite] .ep-card,
html[data-lite] .cw-card,
html[data-lite] .cast-card { transition-duration: .12s !important; }