/* ===================================================================== * group-cosmetics.css — GRUBA ÖZEL çerçeveler ve isim efektleri * * Kullanıcı süslerinden AYRI bir aile. Ayrı olmalarının sebebi * görsel: kullanıcı çerçeveleri 320px'lik çizimler (ejderha, melek * kanadı, sakura). Bir grup avatarının etrafına da ejderha koysaydık * grup ile kişi birbirine karışırdı. * * Grup çerçeveleri bu yüzden tamamen GEOMETRİK ve tamamen CSS: * dönen halkalar, konik degradeler, kesik çemberler. Bir bakışta * "bu bir topluluk nişanı" diyor, "bu birinin avatarı" demiyor. * Dosya indirmiyor olmaları da yan fayda: grup paneli anında açılıyor. * * İsim efektlerinde de aynı ayrım var: kullanıcı efektleri tek bir * ismi süslüyor, grup efektleri bir TOPLULUK adını taşıyor — daha * ağır, daha törensel. * * ERİŞİLEBİLİRLİK: prefers-reduced-motion açıkken animasyonlar * durur, efekt görünür kalır. Kullanıcı satın aldığını yine görür. * ===================================================================*/ /* ===================================================================== 1) GRUP ÇERÇEVELERİ .avatar-ring üzerine geliyor, tıpkı kullanıcı çerçeveleri gibi. ::after kullanıcı çerçevelerinde dolu; çakışmasın diye grup çerçeveleri ::before kullanıyor. ===================================================================*/ .avatar-ring[class*="gframe-"]{ overflow:visible; } .avatar-ring[class*="gframe-"]::before{ content:""; position:absolute; inset:-6px; border-radius:50%; pointer-events:none; z-index:2; /* avatarın üstünde — halka önde durmalı */ } /* Kendi kurallarim .avatar-ring ile NITELENDI (0,2,0): taban kural .avatar-ring[class*="gframe-"]::before de 0,2,0 ve AYNI dosyada once geliyor. Nitelenmeseydi (0,1,0) her seferinde taban kural kazanir, inset ve kenarlik degerleri uygulanmazdi -- olculdu: inset -7px yerine -6px kaliyordu. */ /* --- 1. YÖRÜNGE: iç çember sabit, dış çember ters yönde döner ----- */ .avatar-ring.gframe-halka::before{ border:2px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); animation:gfSpin 6s linear infinite; } .avatar-ring.gframe-halka::after{ content:""; position:absolute; inset:-12px; border-radius:50%; border:2px dashed color-mix(in srgb, var(--accent) 45%, transparent); pointer-events:none; z-index:1; animation:gfSpin 11s linear infinite reverse; } /* --- 2. NABIZ: büyüyüp küçülen tek halka ------------------------- */ .avatar-ring.gframe-nabiz::before{ border:3px solid #6ee7ff; box-shadow:0 0 10px rgba(110,231,255,.55), inset 0 0 8px rgba(110,231,255,.28); animation:gfPulse 2.2s ease-in-out infinite; } /* --- 3. PRİZMA: renk çemberi boyunca dönen konik degrade --------- conic-gradient bir HALKA olarak görünsün diye ortası maskeyle deliniyor; kenarlık özelliğiyle konik degrade çizilemiyor. */ .avatar-ring.gframe-prizma::before{ inset:-7px; border:0; background:conic-gradient(from 0deg, #ff4d6d, #ffb703, #6ee7ff, #8b5cf6, #22d3ee, #ff4d6d); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation:gfSpin 4.5s linear infinite; } /* --- 4. ZİNCİR: kesik kesik çelik halka -------------------------- Baklalar ONCE 8 derecelik dilimlerdi ve 5px'lik bir bantta ciziliyordu: 56px'lik bir avatarda her bakla 2-3 piksele dusuyor, halka uzaktan bos gorunuyordu. Dilimler 30 dereceye, bant 7 piksele cikarildi -- artik bakla bakla okunuyor. */ .avatar-ring.gframe-zincir::before{ inset:-8px; border:0; background:conic-gradient(from 0deg, #e4e8ef 0 22deg, transparent 22deg 30deg, #8f98a8 30deg 52deg, transparent 52deg 60deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); filter:drop-shadow(0 0 4px rgba(215,219,228,.55)); animation:gfSpin 9s linear infinite; } /* --- 5. TAÇ: altın çift halka + tepede parlayan işaret ----------- */ .avatar-ring.gframe-tac::before{ border:2px solid #ffd76a; box-shadow:0 0 0 3px rgba(214,168,58,.30), 0 0 14px rgba(255,215,106,.45); } .avatar-ring.gframe-tac::after{ /* Taç işareti: halkanın tepesine oturan küçük bir üçgen dizisi. Görsel dosyası değil, conic maskeli bir şerit — her boyutta keskin kalıyor. */ content:"♛"; position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:13px; line-height:1; color:#ffd76a; text-shadow:0 0 8px rgba(255,215,106,.85); pointer-events:none; z-index:3; animation:gfGlow 2.6s ease-in-out infinite; } /* --- 6. KALKAN: ağır mor halka ------------------------------------ Once "padding-box + border-box" numarasiyla ciziliyordu: ic dolgu var(--surface) rengiyle DOLDURULUYOR ve avatarin kendisini tamamen ortuyordu (olculdu: magaza kartinda avatar kayboldu). Prizma ile ayni maske tekniği kullaniliyor -- ortasi gercekten bos. Digerlerinden ayrilmasi icin bant kalin ve iki katmanli: ::before donen konik halka, ::after sabit ic parlaklik. */ .avatar-ring.gframe-kalkan::before{ inset:-8px; border:0; background:conic-gradient(from 200deg, #8b5cf6, #c084fc, #6d28d9, #a78bfa, #8b5cf6); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); filter:drop-shadow(0 0 8px rgba(139,92,246,.55)); animation:gfSpin 14s linear infinite; } .avatar-ring.gframe-kalkan::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(167,139,250,.55); pointer-events:none; z-index:1; } @keyframes gfSpin { to { transform:rotate(360deg); } } @keyframes gfPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.09); opacity:.7; } } @keyframes gfGlow { 0%,100%{ opacity:1; } 50%{ opacity:.45; } } /* ===================================================================== 2) GRUP İSİM EFEKTLERİ Grup Adı ===================================================================*/ .gnx{ font-weight:800; display:inline-block; -webkit-text-fill-color:currentColor; } /* Degrade tabanlı efektlerin ortak iskeleti. */ .gnx--grad{ background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* --- KLAN: oyulmuş taş. Degrade yok — gömme gölge ---------------- */ .gnx-klan{ color:#cfd6e4; text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 -1px 0 rgba(0,0,0,.75), 0 0 10px rgba(160,180,210,.22); letter-spacing:.04em; } [data-theme="light"] .gnx-klan{ color:#4a5568; text-shadow:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.28); } /* --- LONCA: mühür altını, yavaş salınım ------------------------- */ .gnx-lonca{ background:linear-gradient(100deg,#8a6414,#e8c766,#fff4c9,#d6a83a,#8a6414); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gnxSway 5.5s ease-in-out infinite; } /* --- SANCAK: soldan sağa akan bayrak ---------------------------- */ .gnx-sancak{ background:linear-gradient(90deg,#c0392b,#ff6b5a,#ffd9a0,#ff6b5a,#c0392b); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gnxSlide 4s linear infinite; } /* --- İTTİFAK: iki renk ortada buluşuyor ------------------------- */ .gnx-ittifak{ background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 38%,#f8fafc 50%,#fb923c 62%,#ea580c 100%); background-size:100% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 0 6px rgba(96,165,250,.30)); } /* --- HANEDAN: mor-altın, harflerin ardında ışıltı ---------------- */ .gnx-hanedan{ position:relative; background:linear-gradient(105deg,#6d28d9,#a78bfa,#ffd76a,#a78bfa,#6d28d9); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gnxSlide 6s linear infinite; filter:drop-shadow(0 0 7px rgba(167,139,250,.45)); } /* --- EFSANE: sürekli akan prizma -------------------------------- */ .gnx-efsane{ background:linear-gradient(90deg,#ff4d6d,#ffb703,#22d3ee,#8b5cf6,#ff4d6d); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gnxSlide 3s linear infinite; filter:drop-shadow(0 0 8px rgba(139,92,246,.40)); } @keyframes gnxSlide{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } @keyframes gnxSway { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } /* Hareket azaltma: efekt DURUR ama GÖRÜNÜR kalır. Kullanıcı satın aldığı şeyi yine görmeli, sadece kıpırdamamalı. */ @media (prefers-reduced-motion: reduce){ .avatar-ring[class*="gframe-"]::before, .avatar-ring[class*="gframe-"]::after, .gnx-lonca, .gnx-sancak, .gnx-hanedan, .gnx-efsane{ animation:none !important; } } /* ---------- MAĞAZA ÖNİZLEMESİ ---------------------------------- Grup çerçeveleri avatarın DIŞINA taşıyor; kartın önizleme kutusunda pay verilmezse halka kırpılıyordu. */ .shop-card__gav{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; overflow:visible; background:linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); } .shop-card__gini{ font-weight:800; font-size:1.25rem; color:#fff; }