/**
 * Achievement Badges CSS
 * Başarım rozetleri için stiller - profil, yorumlar ve chat'te gösterim
 */

/* Achievement Badge Mini - Yorumlarda ve profillerde gösterilen küçük rozetler */
.user-achievement-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.achievement-badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: help;
}

.achievement-badge-mini:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.achievement-badge-mini.more {
    background-color: #999 !important;
    font-size: 9px;
    font-weight: bold;
}

/* ==========================================================================
   Profile Frame System — boyut ve şekil tamamen otomatik / dinamik
   --------------------------------------------------------------------------
   Boyut: starlab_render_user_avatar_with_frame($user_id, $size) tarafından
   inline "--sl-avatar-size" CSS değişkeni olarak yazılır. Sabit piksel
   sınıfları (size-40, size-96 vb.) YOKTUR — her $size değeri otomatik çalışır.

   Şekil: Çerçeve admin panelinde "Kare" / "Yuvarlak" olarak işaretlenir
   (otomatik tespit edilemezse admin manuel seçer). Render fonksiyonu bu
   bilgiye göre wrapper'a "frame-shape-round" ya da "frame-shape-square"
   sınıfını ekler; avatar konteynerinin border-radius'u buna göre değişir.
   ========================================================================== */
.user-avatar-with-frame {
    position: relative;
    display: inline-block;
    width: var(--sl-avatar-size, 96px);
    height: var(--sl-avatar-size, 96px);
    flex-shrink: 0;
    /* .profile-frame-overlay, bu kutudan --sl-frame-scale oranında büyük ve
       ortalanmış şekilde taşıyor (aşağıya bakın). position:absolute olduğu
       için bu taşma normal box modelinde YOK sayılır — komşu flex/grid
       elemanları bunun farkında olmaz. Bu da yorum listelerinde, mini avatar
       listelerinde ve chat mesajlarında çerçevelerin komşu içeriğe/birbirine
       binmesine sebep olur (kullanıcının bildirdiği "dışa taşma" sorunu).
       Buradaki margin, görsel taşmayı gerçek bir box-model boşluğuna
       çeviriyor: taşma miktarı --sl-frame-scale ve --sl-avatar-size'dan
       otomatik hesaplanıyor, bu yüzden her boyuttaki (40px mini avatar,
       112px profil avatarı vb.) ve her taşma oranındaki çerçevede otomatik
       doğru çalışır — context başına elle padding ayarlamaya gerek yok.
       Profil sayfası "hero" alanı gibi bilinçli taşma tasarlanan yerlerde bu
       margin zaten .sprofile-avatar .user-avatar-with-frame kuralıyla
       override edilip margin:0 auto'ya döndürülüyor (bkz. profile-modern.css). */
    margin: calc((var(--sl-frame-scale, 1.18) - 1) * var(--sl-avatar-size, 96px) / 2);
}

.user-avatar-with-frame .avatar-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%; /* varsayılan: yuvarlak */
}

/* Kare çerçeve seçiliyse avatar konteyneri de kareye/yuvarlatılmış-kareye döner */
.user-avatar-with-frame.frame-shape-square .avatar-container {
    border-radius: 0%;
}

.user-avatar-with-frame .avatar-container img,
.user-avatar-with-frame .avatar-container .avatar,
.user-avatar-with-frame .avatar-container .avatar-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Çerçeve görseli, avatarın biraz dışına taşacak şekilde ortalanır.
   Taşma oranı "--sl-frame-scale" ile çerçeve bazlı ayarlanabilir
   (starlab admin panelinden çerçeveye özel 'scale' tanımlanabilir). */
.user-avatar-with-frame .profile-frame-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% * var(--sl-frame-scale, 1.18));
    height: calc(100% * var(--sl-frame-scale, 1.18));
    pointer-events: none;
    z-index: 2;
}

/* Bağlam bazlı sarmalayıcılar (yorumlar, mini listeler vb.) artık boyutu
   kendileri zorlamıyor — boyut, render fonksiyonundan gelen inline
   "--sl-avatar-size" değişkeniyle belirleniyor. Burada sadece dizilim/hizalama
   ile ilgili kurallar bırakılıyor. */
.comment-avatar .user-avatar-with-frame,
.comment-form-avatar .user-avatar-with-frame,
.chat-message-avatar .user-avatar-with-frame,
.user-avatar-mini .user-avatar-with-frame {
    vertical-align: middle;
}

/* Achievement Badge in Comment Header */
.comment-header .user-achievement-badges {
    vertical-align: middle;
}

/* Frame Animation on Hover */
.user-avatar-with-frame:hover .profile-frame-overlay {
    animation: frameGlow 0.5s ease-in-out;
}

@keyframes frameGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,255,255,0.5));
    }
}

/* Username Name Effects */
.username-with-effect {
    display: inline-block;
}

.name-effect-glow {
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.6), 0 0 20px rgba(102, 126, 234, 0.4);
    animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(102, 126, 234, 0.6), 0 0 20px rgba(102, 126, 234, 0.4);
    }
    50% {
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(102, 126, 234, 0.6);
    }
}

.name-effect-gradient {
    background: linear-gradient(90deg, #667eea 0%, #954550 50%, #667eea 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

.name-effect-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #6a0d1a, #ad152a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow 3s ease infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

.name-effect-fire {
    background: linear-gradient(180deg, #ff0000 0%, #ff7f00 50%, #ffff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fire 1s ease-in-out infinite;
}

@keyframes fire {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

/* Achievement Notification Styles */
.achievement-notification {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.achievement-notification .achievement-icon {
    font-size: 24px;
    color: #FFD700;
    margin-right: 8px;
    vertical-align: middle;
    animation: achievementPulse 1s ease-in-out;
}

/* Default (Dark Mode) */
.achievement-notification strong {
    font-size: 16px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.achievement-notification .achievement-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    display: inline-block;
    margin-right: 8px;
}

.achievement-notification .achievement-xp {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #954550 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

@keyframes achievementPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Bildirim tipine göre renkler - Default (Dark Mode) */
.notification-type-achievement {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%);
    border-left: 3px solid #FFD700;
}

.notification-type-achievement.unread {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
}

/* Light Mode Override */
[data-theme="light"] .notification-type-achievement {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
    border-left: 3px solid #FFD700;
}

[data-theme="light"] .notification-type-achievement.unread {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .user-achievement-badges {
        gap: 2px;
        margin-left: 4px;
    }
    
    .achievement-badge-mini {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
    
    .achievement-notification .achievement-icon {
        font-size: 20px;
    }
    
    .achievement-notification strong {
        font-size: 14px;
    }
}

/* ===== Mağaza ad efektleri (Qi ile satılanlar) — v2: katmanlı gradyan, parıltı, parçacık ===== */
.username-with-effect[class*="name-effect-"]{position:relative;font-weight:800;letter-spacing:.01em;padding:0 .12em}
.username-with-effect[class*="name-effect-"]::before,.username-with-effect[class*="name-effect-"]::after{position:absolute;pointer-events:none;line-height:1;background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none;text-decoration:none;font-weight:400}
/* ortak: parlama (sheen) ve akış */
@keyframes nfxSheen{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
@keyframes nfxFlow{to{background-position:300% 0}}
@keyframes nfxFlowY{from{background-position:0 0}to{background-position:0 300%}}
@keyframes nfxTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes nfxRise{0%{opacity:0;transform:translateY(.5em) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-1.3em) scale(1)}}
@keyframes nfxFall{0%{opacity:0;transform:translateY(-.2em)}25%{opacity:1}100%{opacity:0;transform:translateY(1.1em)}}
@keyframes nfxBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.07)}28%{transform:scale(1)}42%{transform:scale(1.07)}}
@keyframes nfxShake{0%,100%{transform:translate(0)}20%{transform:translate(-.5px,.5px)}40%{transform:translate(.5px,-.5px)}60%{transform:translate(-.5px,-.5px)}80%{transform:translate(.5px,.5px)}}
@keyframes nfxSpin{to{transform:rotate(360deg)}}
@keyframes nfxPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* NADİR */
.name-effect-neon{color:#fff;text-shadow:0 0 3px #fff,0 0 7px #22d3ee,0 0 14px #22d3ee,0 0 28px #06b6d4,0 0 46px #0891b2;animation:nfxNeon 3s linear infinite}
.name-effect-neon::after{content:"";left:4%;right:4%;bottom:-.08em;height:2px;border-radius:2px;background:#22d3ee;box-shadow:0 0 6px #22d3ee,0 0 14px #06b6d4}
@keyframes nfxNeon{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
.name-effect-buz{background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),linear-gradient(180deg,#e0f7ff,#7dd3fc 55%,#38bdf8);background-size:250% 100%,100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.35px rgba(3,105,161,.55);filter:drop-shadow(0 0 5px rgba(125,211,252,.6));animation:nfxSheen 3.2s linear infinite}
.name-effect-buz::after{content:"❄";right:-.95em;top:-.15em;font-size:.7em;-webkit-text-fill-color:#bae6fd;-webkit-text-stroke:0;animation:nfxTwinkle 2.6s ease-in-out infinite}
.name-effect-buz::before{content:"✧";left:-.8em;bottom:0;font-size:.55em;-webkit-text-fill-color:#e0f2fe;-webkit-text-stroke:0;animation:nfxTwinkle 2.6s ease-in-out 1.3s infinite}
.name-effect-orman{background:linear-gradient(90deg,#166534,#4ade80,#bef264,#4ade80,#166534);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(20,83,45,.7);filter:drop-shadow(0 0 4px rgba(74,222,128,.45));animation:nfxFlow 5s linear infinite}
.name-effect-orman::after{content:"❦";right:-.9em;top:-.1em;font-size:.65em;-webkit-text-fill-color:#86efac;-webkit-text-stroke:0;animation:nfxRise 3.4s ease-in-out infinite}
.name-effect-okyanus{background:linear-gradient(90deg,#0369a1,#22d3ee,#a5f3fc,#22d3ee,#0369a1);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 4px rgba(34,211,238,.5));animation:nfxFlow 3.5s linear infinite}
.name-effect-okyanus::after{content:"";left:3%;right:3%;bottom:-.2em;height:.3em;background:radial-gradient(circle at 50% 0,transparent .22em,#22d3ee .24em,#22d3ee .3em,transparent .32em) 0 0/.7em .3em repeat-x;opacity:.85;animation:nfxWave 1.6s linear infinite}
@keyframes nfxWave{to{background-position:.7em 0}}
.name-effect-sakura{background:linear-gradient(90deg,#eb5e71,#f5b0b9,#fff1f6,#f5b0b9,#eb5e71);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(157,23,77,.5);filter:drop-shadow(0 0 5px rgba(235,94,113,.55));animation:nfxFlow 5s linear infinite}
.name-effect-sakura::before{content:"✿";left:-.7em;top:-.2em;font-size:.6em;-webkit-text-fill-color:#f18f9c;-webkit-text-stroke:0;animation:nfxFall 3.2s ease-in infinite}
.name-effect-sakura::after{content:"✿";right:-.7em;top:-.35em;font-size:.5em;-webkit-text-fill-color:#f5b0b9;-webkit-text-stroke:0;animation:nfxFall 3.2s ease-in 1.6s infinite}
.name-effect-portal{background:linear-gradient(90deg,#e52b43,#22d3ee,#ee7887,#22d3ee,#e52b43);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 5px rgba(229,43,67,.7));animation:nfxFlow 3s linear infinite}
.name-effect-portal::before,.name-effect-portal::after{content:"";top:50%;width:.7em;height:.7em;margin-top:-.35em;border-radius:50%;border:2px solid transparent;border-top-color:#22d3ee;border-bottom-color:#ee7887;box-sizing:border-box;animation:nfxSpin 1.2s linear infinite}
.name-effect-portal::before{left:-.95em}.name-effect-portal::after{right:-.95em;animation-direction:reverse}
.name-effect-enerji{color:#e0f2fe;text-shadow:0 0 4px #7dd3fc,0 0 10px #38bdf8,0 0 22px #0ea5e9;animation:nfxPulse 1.4s ease-in-out infinite;-webkit-text-stroke:.3px #0369a1}
.name-effect-enerji::before{content:"⚡";left:-.8em;top:0;font-size:.7em;-webkit-text-fill-color:#fde047;animation:nfxTwinkle 1.4s ease-in-out infinite}
.name-effect-enerji::after{content:"⚡";right:-.8em;top:-.1em;font-size:.6em;-webkit-text-fill-color:#fde047;animation:nfxTwinkle 1.4s ease-in-out .7s infinite}

/* EPİK */
.name-effect-altin{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),linear-gradient(180deg,#fff2b3,#fbbf24 45%,#b45309);background-size:250% 100%,100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.4px rgba(120,53,15,.8);filter:drop-shadow(0 0 5px rgba(251,191,36,.55));animation:nfxSheen 2.8s linear infinite}
.name-effect-altin::before,.name-effect-altin::after{content:"✦";font-size:.55em;-webkit-text-fill-color:#fde68a;-webkit-text-stroke:0;animation:nfxTwinkle 2.4s ease-in-out infinite}
.name-effect-altin::before{left:-.7em;top:-.1em}.name-effect-altin::after{right:-.7em;bottom:0;animation-delay:1.2s}
.name-effect-elektrik{color:#fef9c3;text-shadow:0 0 3px #fde047,0 0 9px #facc15,0 0 20px #eab308;-webkit-text-stroke:.4px #a16207;animation:nfxZap 2s steps(1) infinite}
@keyframes nfxZap{0%,100%{opacity:1}6%{opacity:.5;transform:translateX(-1px)}8%{opacity:1;transform:translateX(1px);text-shadow:0 0 6px #fff,0 0 18px #fde047,0 0 34px #facc15}10%{transform:none}55%{opacity:1}57%{opacity:.6}59%{opacity:1}}
.name-effect-elektrik::before,.name-effect-elektrik::after{content:"⚡";font-size:.75em;-webkit-text-fill-color:#fde047;animation:nfxTwinkle 2s steps(1) infinite}
.name-effect-elektrik::before{left:-.85em;top:-.05em}.name-effect-elektrik::after{right:-.85em;top:-.05em;animation-delay:1s}
.name-effect-zehir{background:linear-gradient(90deg,#4d7c0f,#a3e635,#e8495e,#a3e635,#4d7c0f);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(26,46,5,.8);filter:drop-shadow(0 0 5px rgba(163,230,53,.5));animation:nfxFlow 4s linear infinite}
.name-effect-zehir::before,.name-effect-zehir::after{content:"●";bottom:-.4em;font-size:.4em;-webkit-text-fill-color:#a3e635;animation:nfxFall 2.4s ease-in infinite}
.name-effect-zehir::before{left:18%}.name-effect-zehir::after{left:64%;animation-delay:1.2s;-webkit-text-fill-color:#ee7484}
.name-effect-gumus{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,1) 50%,transparent 60%),linear-gradient(180deg,#f1f5f9,#94a3b8 50%,#e2e8f0);background-size:250% 100%,100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.4px rgba(51,65,85,.7);filter:drop-shadow(0 0 4px rgba(226,232,240,.5));animation:nfxSheen 3s linear infinite}
.name-effect-golge{color:#f8c8ce;text-shadow:0 0 6px #e94e63,0 0 16px #c9243a,3px 3px 0 rgba(137,27,41,.55),-3px -2px 8px rgba(233,78,99,.6);animation:nfxShade 3.2s ease-in-out infinite}
@keyframes nfxShade{0%,100%{text-shadow:0 0 6px #e94e63,0 0 16px #c9243a,3px 3px 0 rgba(137,27,41,.55),-3px -2px 8px rgba(233,78,99,.6)}50%{text-shadow:0 0 12px #ee7887,0 0 30px #e52b43,5px 5px 2px rgba(137,27,41,.4),-5px -3px 14px rgba(233,78,99,.8)}}
.name-effect-kalp{background:linear-gradient(90deg,#be123c,#fb7185,#ffe4e6,#fb7185,#be123c);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(136,19,55,.6);filter:drop-shadow(0 0 5px rgba(251,113,133,.6));animation:nfxFlow 4s linear infinite}
.name-effect-kalp::before,.name-effect-kalp::after{content:"❤";font-size:.55em;-webkit-text-fill-color:#fb7185;animation:nfxRise 2.8s ease-in-out infinite}
.name-effect-kalp::before{left:-.75em;bottom:.2em}.name-effect-kalp::after{right:-.75em;bottom:.2em;animation-delay:1.4s;-webkit-text-fill-color:#f43f5e}
.name-effect-kivilcim{background:linear-gradient(0deg,#dc2626,#f97316 45%,#fde047);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(127,29,29,.7);filter:drop-shadow(0 0 5px rgba(249,115,22,.7));animation:nfxPulse 1.2s ease-in-out infinite}
.name-effect-kivilcim::before,.name-effect-kivilcim::after{content:"✦";font-size:.5em;top:-.3em;-webkit-text-fill-color:#fdba74;animation:nfxRise 1.8s ease-out infinite}
.name-effect-kivilcim::before{left:22%}.name-effect-kivilcim::after{left:68%;animation-delay:.9s;-webkit-text-fill-color:#fde047}
.name-effect-ofke{color:#fecaca;-webkit-text-stroke:.5px #450a0a;text-shadow:0 0 5px #ef4444,0 0 14px #b91c1c,0 2px 0 #7f1d1d;animation:nfxShake .45s linear infinite}
.name-effect-ofke::before{content:"☄";left:-.85em;top:-.05em;font-size:.7em;-webkit-text-fill-color:#f87171;animation:nfxPulse .9s ease-in-out infinite}
.name-effect-ofke::after{content:"☄";right:-.85em;top:-.05em;font-size:.7em;-webkit-text-fill-color:#f87171;transform:scaleX(-1);animation:nfxPulse .9s ease-in-out .45s infinite}

/* EFSANEVİ */
.name-effect-lav{background:linear-gradient(0deg,#7f1d1d,#dc2626 30%,#f97316 60%,#fde047);background-size:100% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.4px rgba(69,10,10,.8);filter:drop-shadow(0 0 6px rgba(249,115,22,.75));animation:nfxFlowY 2.8s linear infinite}
.name-effect-lav::before,.name-effect-lav::after{content:"●";font-size:.28em;top:0;-webkit-text-fill-color:#fb923c;animation:nfxRise 2.2s ease-out infinite}
.name-effect-lav::before{left:16%}.name-effect-lav::after{left:58%;animation-delay:1.1s;-webkit-text-fill-color:#fde047}
.name-effect-galaksi{background:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(circle,#f39ca8 0 1px,transparent 1.5px) 4px 5px/13px 13px,linear-gradient(90deg,#bb3244,#c22338,#06b6d4,#c22338,#bb3244);background-size:9px 9px,13px 13px,300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(75,27,33,.8);filter:drop-shadow(0 0 6px rgba(194,35,56,.55));animation:nfxGal 6s linear infinite}
@keyframes nfxGal{to{background-position:9px 9px,-13px 5px,300% 0}}
.name-effect-galaksi::before,.name-effect-galaksi::after{content:"✦";font-size:.5em;-webkit-text-fill-color:#f6b8c1;animation:nfxTwinkle 2.2s ease-in-out infinite}
.name-effect-galaksi::before{left:-.7em;top:-.2em}.name-effect-galaksi::after{right:-.7em;bottom:0;animation-delay:1.1s}
.name-effect-glitch{color:#fff;animation:nfxGlitchMain 2.6s steps(1) infinite}
.name-effect-glitch::before,.name-effect-glitch::after{content:attr(data-text);left:.12em;top:0;font-weight:800;white-space:nowrap;opacity:.9;mix-blend-mode:screen}
.name-effect-glitch::before{-webkit-text-fill-color:#ff2d55;clip-path:inset(0 0 55% 0);animation:nfxGl1 2.6s steps(1) infinite}
.name-effect-glitch::after{-webkit-text-fill-color:#00e5ff;clip-path:inset(55% 0 0 0);animation:nfxGl2 2.6s steps(1) infinite}
@keyframes nfxGl1{0%,100%{transform:translate(-2px,0)}30%{transform:translate(3px,-1px)}31%{transform:translate(-3px,1px)}70%{transform:translate(2px,0)}}
@keyframes nfxGl2{0%,100%{transform:translate(2px,0)}35%{transform:translate(-3px,1px)}36%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}
@keyframes nfxGlitchMain{0%,92%,100%{transform:none}93%{transform:skewX(-8deg)}95%{transform:skewX(6deg)}}
.name-effect-kan{color:#dc2626;-webkit-text-stroke:.5px #450a0a;text-shadow:0 0 6px #7f1d1d,0 2px 0 #450a0a}
.name-effect-kan::before,.name-effect-kan::after{content:"";top:82%;width:.14em;height:.34em;border-radius:50% 50% 60% 60%;background:#b91c1c;box-shadow:0 0 4px #7f1d1d;animation:nfxFall 2.6s ease-in infinite}
.name-effect-kan::before{left:20%}.name-effect-kan::after{left:66%;animation-delay:1.3s}
.name-effect-aurora{background:linear-gradient(90deg,#10b981,#22d3ee,#818cf8,#ec687a,#22d3ee,#10b981);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(6,78,59,.6);filter:drop-shadow(0 0 8px rgba(34,211,238,.6)) drop-shadow(0 0 16px rgba(236,104,122,.35));animation:nfxFlow 5s linear infinite}
.name-effect-aurora::before,.name-effect-aurora::after{content:"✧";font-size:.55em;-webkit-text-fill-color:#a5f3fc;animation:nfxTwinkle 2.8s ease-in-out infinite}
.name-effect-aurora::before{left:-.7em;top:-.2em}.name-effect-aurora::after{right:-.7em;bottom:0;animation-delay:1.4s}

/* MİTİK */
.name-effect-holografik{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),linear-gradient(90deg,#f293a0,#67e8f9,#fde68a,#86efac,#f293a0);background-size:250% 100%,300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px rgba(124,26,39,.5);filter:drop-shadow(0 0 6px rgba(103,232,249,.6)) drop-shadow(0 0 12px rgba(242,147,160,.4));animation:nfxHolo 3s linear infinite}
@keyframes nfxHolo{from{background-position:160% 0,0 0}to{background-position:-60% 0,300% 0}}
.name-effect-holografik::before,.name-effect-holografik::after{content:"✦";font-size:.6em;-webkit-text-fill-color:#fff;animation:nfxTwinkle 1.8s ease-in-out infinite}
.name-effect-holografik::before{left:-.75em;top:-.2em}.name-effect-holografik::after{right:-.75em;bottom:-.05em;animation-delay:.9s}
.name-effect-kral{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),linear-gradient(90deg,#b45309,#fcd34d,#e8495e,#fcd34d,#b45309);background-size:250% 100%,300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.4px rgba(95,12,23,.75);filter:drop-shadow(0 0 7px rgba(232,73,94,.6)) drop-shadow(0 0 4px rgba(251,191,36,.5));animation:nfxHolo 3.2s linear infinite}
.name-effect-kral::before{content:"♛";left:50%;top:-.95em;margin-left:-.5em;font-size:.8em;-webkit-text-fill-color:#fcd34d;text-shadow:0 0 6px #f59e0b;animation:nfxBeat 2.4s ease-in-out infinite}
.name-effect-kral::after{content:"✦";right:-.75em;bottom:0;font-size:.55em;-webkit-text-fill-color:#f6b8c1;animation:nfxTwinkle 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){[class*="name-effect-"],[class*="name-effect-"]::before,[class*="name-effect-"]::after{animation:none!important}}

/* ===== Ad efektleri v3 (2026-10-24): Neon, Alev Parçacığı (kıvılcım), Sıvı — harf şeklini izler, kutu yok ===== */
.username-with-effect.name-effect-neon,.username-with-effect.name-effect-kivilcim,.username-with-effect.name-effect-sivi{overflow:visible;padding:0 .14em}

/* NEON — gerçek neon tüp: beyaz çekirdek, renkli hale, ara sıra titreyen tüp */
.username-with-effect.name-effect-neon{color:#f0fdff;-webkit-text-stroke:0;background:none;-webkit-text-fill-color:currentColor;
  text-shadow:0 0 2px #fff,0 0 5px #67e8f9,0 0 11px #22d3ee,0 0 22px #06b6d4,0 0 40px #0891b2;animation:nfxNeon3 4.2s linear infinite}
.username-with-effect.name-effect-neon::before{content:"";left:-.05em;right:-.05em;top:50%;height:1.1em;transform:translateY(-50%);z-index:-1;border-radius:.4em;
  background:radial-gradient(ellipse at center,rgba(34,211,238,.28),transparent 70%);filter:blur(6px);opacity:.9;animation:none}
.username-with-effect.name-effect-neon::after{content:"";left:6%;right:6%;bottom:-.14em;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#a5f3fc 20%,#fff 50%,#a5f3fc 80%,transparent);box-shadow:0 0 6px #22d3ee,0 0 14px #06b6d4;animation:nfxNeonBar 4.2s linear infinite}
@keyframes nfxNeon3{0%,17%,19%,21%,52%,54%,100%{opacity:1}18%,20%{opacity:.45;text-shadow:0 0 2px #fff,0 0 5px #22d3ee}53%{opacity:.7;text-shadow:0 0 2px #fff,0 0 7px #22d3ee,0 0 14px #06b6d4}}
@keyframes nfxNeonBar{0%,17%,19%,21%,52%,54%,100%{opacity:1}18%,20%,53%{opacity:.35}}

/* ALEV PARÇACIĞI — ateş degradeli harf + yukarı süzülen kıvılcımlar */
.username-with-effect.name-effect-kivilcim{background:linear-gradient(180deg,#fff7c2 0%,#fbbf24 38%,#f97316 72%,#dc2626 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;
  filter:drop-shadow(0 0 3px rgba(249,115,22,.75)) drop-shadow(0 -1px 8px rgba(220,38,38,.55));animation:nfxEmberText 1.8s ease-in-out infinite}
.username-with-effect.name-effect-kivilcim::before,.username-with-effect.name-effect-kivilcim::after{content:"";left:-.1em;right:-.1em;top:-1.1em;height:2.4em;z-index:1;-webkit-text-fill-color:initial;background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(transparent 0,#000 28%,#000 55%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 28%,#000 55%,transparent 100%)}
.username-with-effect.name-effect-kivilcim::before{background-image:radial-gradient(circle,#ffe29a 0 1.3px,transparent 2px),radial-gradient(circle,#ff9a3c 0 1px,transparent 1.7px),radial-gradient(circle,#fff3b0 0 .8px,transparent 1.4px);
  background-size:100% 2.4em,64% 2.4em,47% 2.4em;background-position:18% 0,70% .6em,35% 1.2em;animation:nfxEmberUp 2.3s linear infinite}
.username-with-effect.name-effect-kivilcim::after{background-image:radial-gradient(circle,#ffd166 0 1.1px,transparent 1.8px),radial-gradient(circle,#ff7a2a 0 1.3px,transparent 2px),radial-gradient(circle,#ffeaa7 0 .8px,transparent 1.4px);
  background-size:83% 2.4em,100% 2.4em,58% 2.4em;background-position:62% .9em,28% .2em,85% 1.6em;animation:nfxEmberUp 3.1s linear infinite .7s}
@keyframes nfxEmberUp{from{background-position-y:0,.6em,1.2em}to{background-position-y:-2.4em,-1.8em,-1.2em}}
@keyframes nfxEmberText{0%,100%{filter:drop-shadow(0 0 3px rgba(249,115,22,.7)) drop-shadow(0 -1px 8px rgba(220,38,38,.5))}50%{filter:drop-shadow(0 0 5px rgba(251,191,36,.9)) drop-shadow(0 -2px 12px rgba(239,68,68,.7))}}

/* SIVI — harfin içinde akan sıvı + üzerinden geçen yansımalar + damlalar */
.username-with-effect.name-effect-sivi{background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0 .1em,rgba(255,255,255,0) .24em),radial-gradient(ellipse at center,rgba(255,255,255,.7) 0 .07em,rgba(255,255,255,0) .18em),linear-gradient(100deg,#0284c7,#22d3ee 26%,#818cf8 52%,#22d3ee 78%,#0284c7);
  background-size:42% 70%,30% 55%,300% 100%;background-repeat:repeat-x,repeat-x,repeat;background-position:0 30%,40% 75%,0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;
  filter:drop-shadow(0 0 4px rgba(34,211,238,.6));animation:nfxLiquid 5.5s linear infinite}
.username-with-effect.name-effect-sivi::before,.username-with-effect.name-effect-sivi::after{content:"";bottom:-.5em;width:.3em;height:.42em;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;-webkit-text-fill-color:initial;
  background:radial-gradient(circle at 35% 30%,#fff 0 .05em,#67e8f9 .12em,#0ea5e9);box-shadow:0 0 6px rgba(34,211,238,.7);animation:nfxDrop 2.8s ease-in infinite;opacity:0}
.username-with-effect.name-effect-sivi::before{left:22%}
.username-with-effect.name-effect-sivi::after{left:68%;animation-delay:1.4s;width:.24em;height:.34em}
@keyframes nfxLiquid{from{background-position:0 30%,40% 75%,0 0}to{background-position:200% 30%,-160% 75%,300% 0}}
@keyframes nfxDrop{0%{opacity:0;transform:translateY(-.5em) scale(.5)}15%{opacity:1;transform:translateY(-.25em) scale(1)}85%{opacity:1;transform:translateY(.9em) scale(1,1.25)}100%{opacity:0;transform:translateY(1em) scale(1.8,.3)}}
@media (prefers-reduced-motion:reduce){.username-with-effect.name-effect-neon,.username-with-effect.name-effect-kivilcim,.username-with-effect.name-effect-sivi,.username-with-effect.name-effect-neon::after,.username-with-effect[class*="name-effect-"]::before,.username-with-effect[class*="name-effect-"]::after{animation:none!important}}

/* ===== Ad efektleri v4 (2026-10-24): süsler Lottie katmanına taşındı; eski parçacık/halo sahte öğeleri kapalı ===== */
.username-with-effect.name-effect-kivilcim::before,.username-with-effect.name-effect-kivilcim::after,
.username-with-effect.name-effect-sivi::before,.username-with-effect.name-effect-sivi::after,
.username-with-effect.name-effect-neon::before{content:none!important;display:none!important;animation:none!important}
/* Sıvı: parçacıklar gittiği için yazı akışı ve parıltı daha belirgin */
.username-with-effect.name-effect-sivi{filter:drop-shadow(0 0 5px rgba(34,211,238,.7))}