:root {
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --green-accent: #a8e6cf; /* Görseldeki yeşil tonu */
    --green-dark: #2ecc71;
    
    /* Presence Renkleri */
    --bronze-color: #cd7f32;
    --silver-color: #bdc3c7;
    --gold-color: #f1c40f;
    --platinum-color: #e5e4e2; /* Parlak beyaz/gri */
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.page-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-family:Arial, Helvetica, sans-serif;
}

.page-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

/* --- GRID YAPISI (MOBILE FIRST) --- */
.badges-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobilde tek sütun */
    gap: 20px;
}

/* Tablet (2 sütun) */
@media (min-width: 600px) {
    .badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Masaüstü (3 veya 4 sütun) */
@media (min-width: 1024px) {
    .badges-grid {
        grid-template-columns: repeat(3, 1fr); /* İsteğe göre 4 yapılabilir */
        gap: 30px;
    }
}

/* --- ROZET KARTI TASARIMI --- */
.badge-card {
    background: var(--green-accent); /* Görseldeki yeşil arka plan */
    border-radius: 20px;
    padding: 30px 20px;
    position: relative;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Kartın içindeki içeriği dikeyde ortala */
    justify-content: center; 
    min-height: 280px; 
}

/* Kazanılmamış (Kilitli) Kart Stili - Opsiyonel Gri Tasarım */
.badge-card.locked {
    background: #dfe6e9; /* Gri ton */
    filter: grayscale(0.8);
    opacity: 0.8;
}

.badge-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Kazanılmış kart hover'da parlasın */
.badge-card.earned:hover {
    filter: brightness(1.05);
}

/* --- PRESENCE İKONU (SAĞ ÜST) --- */
.badge-presence {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-card:hover .badge-presence {
    transform: scale(1.2) rotate(10deg); /* Hover'da kupa büyür ve döner */
}

.badge-presence img {
    width: 24px;
    height: 24px;
}

/* Presence Border Renkleri (İsteğe bağlı halka eklemek için) */
.presence-bronze { border: 2px solid var(--bronze-color); }
.presence-silver { border: 2px solid var(--silver-color); }
.presence-gold   { border: 2px solid var(--gold-color); }
.presence-platinum { border: 2px solid var(--text-primary); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }


/* --- ANA İKON --- */
.badge-icon-wrapper {
    width: 80px;  /* Wrapper boyutunu sabitleyelim */
    height: 80px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Dışarı sızarsa gizle */
}

/* İçeriden gelen SVG'yi wrapper'a mahkum et */
.badge-icon-wrapper svg {
    width: 100% !important;  /* Genişliği 80px'e zorla */
    height: 100% !important; /* Yüksekliği 80px'e zorla */
    max-width: 80px;
    max-height: 80px;
    display: block;
    object-fit: contain; /* Oranı koruyarak sığdır */
}

.badge-card:hover .badge-icon-wrapper {
    transform: scale(1.1); /* İkon hafifçe büyür */
}

.badge-main-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));
}

/* --- METİN ALANI --- */
.badge-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: white; /* Görseldeki gibi beyaz yazı */
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
}


/* --- ANİMASYONLAR --- */
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}