/* ---------------------------------------------------------------------------
 * wallpapers.css — 11 animasyonlu yüzey (duvar kağıdı)
 *
 * Kaynak: "Duvar Kagitlari.dc.html" tasarım tuvali (Claude Design). Yüzeyler,
 * gradyanlar, keyframe süreleri ve gecikmeleri BİREBİR o dosyadan alındı;
 * uydurma renk/animasyon yok.
 *
 * TEK FARK — ölçü birimi: tasarımda tam ekran varsayıldığı için vw/vh/vmin
 * kullanılıyordu. Aynı yüzeyin küçük bir KART içinde de doğru çalışması
 * gerektiğinden (sertifika kartı, profil bloğu) hepsi kap sorgusu birimlerine
 * çevrildi: vw→cqw, vh→cqh, vmin→cqmin. Kap `.wp` üzerindeki
 * `container-type: size` ile kurulur; yüzey tam ekranda da kart içinde de
 * kabının boyutuna göre ölçeklenir.
 *
 * DİKKAT: `container-type` kendi içindeki `position: fixed` elemanları kabına
 * hapseder. Yüzeyin ÜSTÜNE açılan menü/pop-up varsa onu kabın dışına, body'ye
 * portal'la.
 * ------------------------------------------------------------------------- */

.wp {
  position: relative;
  overflow: hidden;
  container-type: size;
  background: #070708;
  isolation: isolate;
}

.wp__face,
.wp__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wp__fx {
  overflow: hidden;
  animation: wp-fadein 700ms ease-out;
}

.wp__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(0, 0, 0, 0.55);
}

/* Not: Duvar kağıtları ürünün çekirdek görsel değeri (kartın malzemesi hareketle
   anlatılıyor). Kullanıcı isteğiyle "hareketi azalt" ayarında da oynatılıyor;
   animasyonlar zaten yumuşak (yavaş süzülme/kayma), sert strobe yok. */

/* ── Keyframe'ler (tasarımdan birebir; vw/vh/vmin → cqw/cqh/cqmin) ───────── */
@keyframes wp-breathe { 0%, 100% { opacity: 0.35; transform: scale(1) } 50% { opacity: 0.9; transform: scale(1.06) } }
@keyframes wp-prismShift { 0%, 100% { transform: rotate(34deg) translateX(0) } 50% { transform: rotate(34deg) translateX(90px) } }
/* Foton huzmeleri: eskiden zamanın %88'i sönüktü (Foton "duruyor" görünüyordu).
   Artık çevrimde iki parlama var, ışık daha sık geçiyor. */
@keyframes wp-flash { 0% { opacity: 0 } 14% { opacity: 0.95 } 24% { opacity: 0.2 } 34% { opacity: 0.7 } 46% { opacity: 0 } 68% { opacity: 0 } 76% { opacity: 0.6 } 86% { opacity: 0.12 } 100% { opacity: 0 } }
/* Foton ambiyansı: her zaman süzülen yumuşak ışık — sürekli hareketi bu verir. */
@keyframes wp-lightdrift { 0% { transform: translate(-9%, -5%) scale(1); opacity: 0.5 } 50% { transform: translate(11%, 7%) scale(1.18); opacity: 0.95 } 100% { transform: translate(-9%, -5%) scale(1); opacity: 0.5 } }
/* Foton: cam üzerinden geçen ışık bandı — gözle görülür, kesintisiz kayma. */
@keyframes wp-sweep { 0% { transform: translateX(-135%) skewX(-12deg) } 100% { transform: translateX(135%) skewX(-12deg) } }
@keyframes wp-voidglow { 0%, 100% { opacity: 0.75; transform: scale(1) } 50% { opacity: 1; transform: scale(1.08) } }
@keyframes wp-voiddrift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-44px, 30px) } }
@keyframes wp-drift { from { background-position: 0 0 } to { background-position: 900px 450px } }
@keyframes wp-nebula { 0%, 100% { opacity: 0.6; transform: scale(1) } 50% { opacity: 1; transform: scale(1.1) } }
@keyframes wp-orbit { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes wp-corepulse { 0%, 100% { transform: scale(1); filter: brightness(1) } 50% { transform: scale(1.07); filter: brightness(1.18) } }
@keyframes wp-shoot { 0% { transform: translate(-10%, 0); opacity: 0 } 6% { opacity: 1 } 18% { transform: translate(260%, 240px); opacity: 0 } 100% { opacity: 0 } }
@keyframes wp-fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes wp-crtflick { 0%, 100% { opacity: 0.5 } 42% { opacity: 0.72 } 47% { opacity: 0.34 } 52% { opacity: 0.68 } }
@keyframes wp-rollup { from { transform: translateY(0) } to { transform: translateY(-50%) } }
@keyframes wp-scanpass { 0% { transform: translateY(-30cqh) } 100% { transform: translateY(130cqh) } }
@keyframes wp-silk { 0%, 100% { transform: skewY(-6deg) translateX(-4cqw) scaleY(1) } 50% { transform: skewY(-2deg) translateX(4cqw) scaleY(1.14) } }
@keyframes wp-swirlA { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1) } 35% { transform: translate(8cqw, -5cqh) rotate(48deg) scale(1.22) } 70% { transform: translate(-4cqw, 6cqh) rotate(96deg) scale(0.9) } }
@keyframes wp-swirlB { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1.05) } 40% { transform: translate(-9cqw, 4cqh) rotate(-60deg) scale(0.88) } 75% { transform: translate(5cqw, -6cqh) rotate(-118deg) scale(1.2) } }
@keyframes wp-swirlC { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.95) } 50% { transform: translate(3cqw, 7cqh) rotate(70deg) scale(1.28) } }
@keyframes wp-beam { 0%, 100% { opacity: 0.35; transform: rotate(18deg) translateX(0) } 50% { opacity: 0.85; transform: rotate(18deg) translateX(3cqw) } }
@keyframes wp-mote { 0% { transform: translate(0, 0); opacity: 0 } 18% { opacity: 0.9 } 100% { transform: translate(4cqw, -70cqh); opacity: 0 } }
@keyframes wp-fall { from { transform: translateY(-140%) } to { transform: translateY(260%) } }
@keyframes wp-dotwave { 0%, 100% { transform: translate(-26%, -12%) scale(1) } 50% { transform: translate(26%, 12%) scale(1.3) } }
@keyframes wp-ribbon { 0%, 100% { transform: translateX(0) skewX(-8deg) scaleY(1); opacity: 0.45 } 50% { transform: translateX(5cqw) skewX(6deg) scaleY(1.22); opacity: 0.95 } }