/*
 * Achievement tier renkleri — gamification tier sistemi (Bronze→Diamond).
 * Metalik tonlar evrensel oyun standardı; M3 brand token'ları yerine
 * sabit hex kullanılır (tier renkleri brand-bağımsız).
 */

.tier-bronze   { --tier-bg: #cd7f32; --tier-soft: #f7e9d8; --tier-text: #5a3618; --tier-ring: #cd7f32; }
.tier-silver   { --tier-bg: #a8a8a8; --tier-soft: #ededed; --tier-text: #2a2a2a; --tier-ring: #9a9a9a; }
.tier-gold     { --tier-bg: #d4af37; --tier-soft: #faf3d6; --tier-text: #5a4612; --tier-ring: #d4af37; }
.tier-platinum { --tier-bg: #4a90b8; --tier-soft: #dfeef4; --tier-text: #1a3c4e; --tier-ring: #4a90b8; }
.tier-diamond  { --tier-bg: #6f5dca; --tier-soft: #e6deff; --tier-text: #1d1647; --tier-ring: #6f5dca; }
.tier-locked   { --tier-bg: #d1d5db; --tier-soft: #f3f4f6; --tier-text: #6b7280; --tier-ring: #d1d5db; }

/* Achievement kartı içindeki ikon dairesi */
.achievement-card .achievement-icon { background: var(--tier-soft); }
.achievement-card .achievement-icon-inner { color: var(--tier-bg); }
.achievement-card.tier-locked .achievement-icon-inner { color: var(--tier-text); opacity: 0.7; }

/* Tier badge (kademede etiket — "Gold" / "Platinum") */
.tier-badge { background: var(--tier-bg); color: white; }
.tier-locked .tier-badge { background: var(--tier-bg); color: var(--tier-text); }

/* Milestone barı — kart altında 5 seviyenin yatay göstergesi.
 * Pseudo-element ile dolum: is-earned state'te scaleX(1), is-locked'ta scaleX(0).
 * is-celebrating sırasında kart içindeki tüm earned barlar sıfırdan dolu hale animasyon tetikler. */
.tier-milestone {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}
.tier-milestone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tier-bg);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.tier-milestone.is-earned::after { transform: scaleX(1); }
.tier-milestone.is-locked::after { transform: scaleX(0); }
/* Sıradaki tier — hedefe yakınlık kadar dolu (CSS variable --fill = 0..1) */
.tier-milestone.is-progress::after { transform: scaleX(var(--fill, 0)); opacity: 0.55; }

/* Kart kutlandığında SADECE yeni kazanılan milestone (en sondaki earned) animasyonla dolar.
 * JS'le hedef bara `is-filling-new` class verilir; önceki milestone'lar statik dolu kalır. */
.tier-milestone.is-filling-new::after {
    animation: milestone-fill 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes milestone-fill {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* Kazanılan kart kenar vurgu */
.achievement-card:not(.tier-locked) { border-color: var(--tier-ring); border-width: 2px; }

/* Kutlama modali ikonu */
.achievement-celebration-card .achievement-celebration-icon { background: var(--tier-soft); }
.achievement-celebration-card .achievement-celebration-icon span { color: var(--tier-bg); }
.achievement-celebration-card .tier-badge { background: var(--tier-bg); color: white; }

/* Sönük (kazanılmayan) kart için gri ton */
.achievement-card.tier-locked { background: #fafafa; }

/* MAX SEVİYE — Diamond ulaşılmış kart cafcaflı görünüm */
.achievement-card.is-max-level {
    border-width: 3px;
    background: linear-gradient(135deg, white 0%, var(--tier-soft) 100%);
    animation: max-level-glow 3s ease-in-out infinite;
}

@keyframes max-level-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--tier-ring), 0 4px 12px rgba(0,0,0,0.08); }
    50%      { box-shadow: 0 0 20px 4px var(--tier-ring), 0 4px 16px rgba(0,0,0,0.12); }
}

.achievement-card.is-max-level .achievement-icon {
    animation: max-level-icon 4s ease-in-out infinite;
}

@keyframes max-level-icon {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.08) rotate(-3deg); }
}

/* Üstat mesaj kartı */
.max-level-banner {
    background: linear-gradient(135deg, var(--tier-bg) 0%, var(--tier-text) 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.max-level-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: max-level-shine 3s linear infinite;
}
@keyframes max-level-shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Seviye atlama in-place kutlama — kart pulse + glow */
@keyframes celebrate-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--tier-ring); }
    20%  { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(0,0,0,0); }
    40%  { transform: scale(0.99); }
    60%  { transform: scale(1.02); box-shadow: 0 0 30px 0 var(--tier-ring); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

@keyframes celebrate-glow {
    0%   { background: white; }
    30%  { background: var(--tier-soft); }
    100% { background: white; }
}

.achievement-card.is-celebrating {
    animation: celebrate-pulse 2s ease-out, celebrate-glow 2s ease-out;
    border-color: var(--tier-bg);
    border-width: 3px;
    z-index: 5;
    position: relative;
}

.achievement-card.is-celebrating .achievement-icon {
    animation: celebrate-icon 1.2s ease-out;
}

@keyframes celebrate-icon {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.3) rotate(-8deg); }
    60%  { transform: scale(1.15) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}