/* ==========================================================================
   Groyt — /efekt önizlemeleri (9 Ekim): 14 yeni efekt
   --------------------------------------------------------------------------
   previews.css'teki .fx / .fx-av yapısının üstüne kurulu (harfli yuvarlak
   avatar). Filtreler önce → sonra gidip gelir; şablonlu efektler (poster,
   mezar taşı, çerçeve) sade CSS/SVG çizimdir, gerçek görsel değildir.
   ========================================================================== */
.fx.r9-tall { height: 122px; }
.r9 .fx-av { position: relative; overflow: hidden; }

/* 🤚 petpet — el avatara bastırır, avatar yaylanır */
.r9-pet { align-content: end; padding-bottom: 4px; }
.r9-pet .fx-av { transform-origin: 50% 100%; animation: r9Squish 0.42s ease-in-out infinite; }
.r9-pet .r9-hand { position: absolute; left: 50%; top: 2px; font-size: 30px; line-height: 1; font-style: normal; transform-origin: 30% 80%; animation: r9Pat 0.42s ease-in-out infinite; }
@keyframes r9Squish { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.12, 0.78); } }
@keyframes r9Pat { 0%, 100% { transform: translate(-30%, 0) rotate(-12deg); } 50% { transform: translate(-30%, 9px) rotate(-4deg); } }

/* 🌈 rgb — renkler sürekli döner */
.r9-rgb .fx-av { animation: r9Hue 1.6s linear infinite; box-shadow: 0 0 14px rgba(255, 79, 216, 0.55); }
@keyframes r9Hue { from { filter: hue-rotate(0deg) saturate(1.6); } to { filter: hue-rotate(360deg) saturate(1.6); } }

/* 🫨 titret — sinirli titreme + kızarma */
.r9-shake .fx-av { animation: shake 0.12s linear infinite, r9Angry 0.5s steps(2) infinite; }
@keyframes r9Angry { 0% { box-shadow: inset 0 0 0 999px rgba(255, 30, 30, 0.3); } 100% { box-shadow: inset 0 0 0 999px rgba(255, 30, 30, 0.1); } }

/* 🌀 döndür */
.r9-spin .fx-av { animation: r9Spin 1.1s linear infinite; }
@keyframes r9Spin { to { transform: rotate(360deg); } }

/* Filtreler: önce normal, sonra filtreli (gidip gelir) */
.r9-filter .fx-av { animation: r9Before 2.6s ease-in-out infinite alternate; }
@keyframes r9Before { 0%, 30% { filter: var(--r9-from, none); } 70%, 100% { filter: var(--r9-to); } }
.r9-fry { --r9-to: saturate(3.4) contrast(1.9) brightness(1.15) sepia(0.25); }
.r9-old { --r9-to: sepia(1) contrast(0.88) brightness(0.92); }
.r9-old .fx-av::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 12px rgba(40, 22, 8, 0.85); background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 246, 220, 0.18) 13px 14px); }
.r9-gray { --r9-to: grayscale(1) contrast(1.15); }
.r9-neg { --r9-to: invert(1); }

/* 📼 glitch — kanal kayması, kesik şeritler, tarama çizgileri */
.r9-glitch .fx-av { animation: r9Glitch 1.4s steps(1) infinite; filter: drop-shadow(-3px 0 #00fff2) drop-shadow(3px 0 #ff00c8); }
.r9-glitch .fx-av::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 4px); }
@keyframes r9Glitch {
  0% { transform: none; clip-path: inset(0); }
  14% { transform: translateX(-4px); clip-path: inset(18% 0 48% 0); }
  18% { transform: translateX(3px); clip-path: inset(62% 0 8% 0); }
  22% { transform: none; clip-path: inset(0); }
  61% { transform: translateX(5px) skewX(-8deg); clip-path: inset(40% 0 30% 0); }
  65% { transform: none; clip-path: inset(0); }
}

/* 🪞 ayna — iki yarının simetrisi yan yana */
.r9-mirror { display: flex; justify-content: center; align-items: center; gap: 10px; }
.r9-mirror .is-flip { transform: scaleX(-1); }
.r9-mirror i { width: 2px; height: 50px; border-radius: 2px; background: linear-gradient(transparent, rgba(154, 208, 236, 0.9), transparent); animation: r9Shine 1.8s ease-in-out infinite; }
@keyframes r9Shine { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* 🇹🇷 bayrak — yarı saydam ay-yıldız süzgeci */
.r9-flag .fx-av svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; animation: r9Wave 2.4s ease-in-out infinite; }
@keyframes r9Wave { 0%, 100% { opacity: 0.56; } 50% { opacity: 0.68; } }

/* 🤠 aranıyor — parşömen poster */
.r9-wanted { width: 104px; margin: 0 auto; padding: 6px 6px 5px; display: grid; justify-items: center; gap: 3px; background: radial-gradient(circle at 50% 45%, #ecd9ad, #c9a46b); border: 2px solid #4a2e14; box-shadow: inset 0 0 0 2px #ecd9ad, inset 0 0 0 3px #4a2e14, 0 4px 10px rgba(0, 0, 0, 0.35); color: #3a2212; font-family: Georgia, 'Times New Roman', serif; text-align: center; animation: r9Drop 0.6s var(--ease-out, ease-out) both; }
.r9-wanted b { font-size: 13px; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.r9-wanted small { font-size: 6px; font-weight: 700; letter-spacing: 0.08em; }
.r9-wanted .fx-av { width: 46px; height: 46px; border-radius: 0; border: 2px solid #3a2212; filter: sepia(0.9) contrast(1.1); mix-blend-mode: multiply; }
.r9-wanted em { font-style: normal; font-size: 7px; font-weight: 700; }
.r9-wanted strong { font-size: 11px; line-height: 1; }
@keyframes r9Drop { from { transform: translateY(-8px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* 🪦 rip — gün batımında mezar taşı */
.r9-rip { width: 150px; height: 118px; margin: 0 auto; border-radius: 8px; overflow: hidden; display: grid; justify-items: center; align-content: end; background: linear-gradient(180deg, #3b2a4d 0%, #e9774a 55%, #f6b26b 68%, #2f4a22 68%, #1f3317 100%); }
.r9-stone { width: 82px; height: 102px; margin-bottom: 8px; padding-top: 8px; display: grid; justify-items: center; align-content: start; gap: 2px; border-radius: 38px 38px 4px 4px; background: linear-gradient(135deg, #5d6068, #34363b); box-shadow: inset -5px 0 0 rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.4); color: rgba(232, 226, 210, 0.9); font-family: Georgia, 'Times New Roman', serif; text-align: center; text-shadow: 0 1px 1px #000; animation: r9Rise 0.8s var(--ease-out, ease-out) both; }
.r9-stone small { font-size: 5.5px; font-weight: 700; letter-spacing: 0.05em; }
.r9-stone .fx-av { width: 30px; height: 30px; font-size: 12px; filter: grayscale(1) brightness(0.9); box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.7); }
.r9-stone b { font-size: 10px; }
.r9-stone em { font-style: normal; font-size: 5.5px; }
.r9-stone i { font-style: italic; font-size: 5.5px; opacity: 0.85; padding: 0 6px; line-height: 1.2; }
@keyframes r9Rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 🖼️ tablo — oymalı altın çerçeve */
.r9-frame { width: 132px; margin: 0 auto; padding: 10px 14px; border-radius: 6px; background: #6b6458; }
.r9-gold { padding: 7px; background: linear-gradient(135deg, #7a5a18, #f4d47c 30%, #a87b24 55%, #f9e3a1 75%, #7a5a18); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(80, 55, 10, 0.6); animation: r9Hang 3s ease-in-out infinite; transform-origin: 50% -20px; }
.r9-gold .fx-av { width: 100%; height: 72px; border-radius: 0; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6); filter: sepia(0.25) saturate(1.2); }
@keyframes r9Hang { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }

@media (prefers-reduced-motion: reduce) {
  .r9 .fx-av, .r9 .r9-hand, .r9 svg, .r9-gold, .r9-wanted, .r9-stone, .r9-mirror i { animation: none !important; }
  .r9-filter .fx-av { filter: var(--r9-to); }
}