body { background-color: #1b2838; color: #c6d4df; 
         font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;

     margin: 0; padding: 40px 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .game-card { background: rgba(0,0,0,0.3); border: 1px solid rgba(138, 187, 209, 0.15); padding: 15px; border-radius: 4px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; text-decoration: none; color: inherit; }
        .game-card:hover { background: rgba(255,255,255,0.05); border-color: #66c0f4; }
        .game-info { display: flex; align-items: center; gap: 15px; }
        .game-name { color: #fff; font-weight: bold; }
        .game-id { color: #56707f; font-size: 12px; }
        .top-langs { display: flex; gap: 8px; font-size: 12px; color: #8abbd1; }
        .lang-badge { background: rgba(102, 192, 244, 0.1); color: #66c0f4; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
        .arrow-icon { color: #66c0f4; font-size: 20px; font-weight: bold; }
        .back-btn { display: inline-block; color: #66c0f4; text-decoration: none; font-size: 16px; }
        .stat-box { background: rgba(0,0,0,0.4); padding: 25px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; }
        .chart-wrapper { width: 220px; height: 220px; position: relative; }
        table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,0.3);border-radius: 4px; }
        th { text-align: left; padding: 12px; color: #54a5d4; font-size: 11px; border-bottom: 2px solid #3c5a78; text-transform: uppercase; }
        td { padding: 12px; border-bottom: 1px solid rgba(60, 90, 120, 0.2); }
        .flag-icon { width: 22px; height: 15px; border-radius: 2px; vertical-align: middle; margin-right: 12px; }
        .lang-name { font-weight: 500; color: #c6d4df; }
        .perc-text { color: #66c0f4; font-weight: bold; font-size: 14px; text-align: right; width: 80px; }
        .color-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; }
        /* Analiz Kartları Özel Tasarımı */
.analysis-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analysis-card {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(102, 192, 244, 0.1);
    border-radius: 4px;
    text-decoration: none !important;
    overflow: hidden; /* Resmin köşelerden taşmaması için */
    transition: background 0.2s, transform 0.2s;
}

.analysis-card:hover {
    background: rgba(102, 192, 244, 0.1);
    transform: translateX(5px);
}

.analysis-rank {
    min-width: 45px;
    text-align: center;
    font-weight: bold;
    color: #66c0f4;
    font-size: 18px;
}

.analysis-image img {
    width: 184px;
    height: 86px;
    display: block; /* Altındaki boşluğu siler */
    object-fit: cover;
}

/* Yazı alanı için padding buraya geliyor */
.analysis-info {
    padding: 15px 20px; 
    flex-grow: 1;
}

.analysis-name {
    display: block;
    color: #c6d4df;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    
}

.analysis-meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.analysis-price-tag {
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
}

.analysis-appid {
    font-size: 11px;
    color: #56707f;
}

.analysis-langs {
    display: flex;
    gap: 5px;
}

.analysis-arrow {
    padding-right: 20px;
    color: #66c0f4;
    font-size: 18px;
}

/* Mobil uyum */
@media (max-width: 600px) {
    .analysis-image img {
        width: 120px;
        height: 60px;
    }
    .analysis-info {
        padding: 5px 12px;
    }
}
.container { 
    max-width: 800px; 
    margin: 0 auto; 
    width: 100%; /* Ekran küçüldüğünde genişliğe yayılması için */
    box-sizing: border-box;
}

body { 
    padding: 20px 10px; /* Mobilde kenarlardan çok sıkışmaması için padding'i azalttık */
}/* Masaüstünde kart içindeki appid'yi sağa yaslayalım ki alan kazanalım */
.analysis-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap; /* Mobilde fiyat ve id alt alta gelebilir */
}

/* MOBİL GÜNCELLEME (En önemli kısım) */
@media (max-width: 600px) {
    /* Kartın içindeki padding'leri küçült */
    .analysis-rank {
        min-width: 30px;
        font-size: 14px;
    }

    /* Görseli daha küçük tut ama oranını koru */
    .analysis-image img {
        width: 120px; /* Mobilde görseli küçülttük */
        height: 60px;
    }

    /* Yazı alanındaki padding'i daralt */
    .analysis-info {
        padding: 8px 12px;
    }

    .analysis-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Çok uzun isimler kartı patlatmasın */
        max-width: 150px;
    }

    .analysis-langs {
        display: none; /* Mobilde çok kalabalık yapıyorsa dilleri gizleyebilirsin */
    }

    .analysis-arrow {
        padding-right: 10px;
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .analysis-price-tag {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }
}
/* Badge tasarımını tamamen modernize ediyoruz */
.lang-badge {
    background: rgba(102, 192, 244, 0.05); /* Çok hafif bir arka plan */
    color: #8abbd1; /* Soft mavi-gri tonu */
    border: 1px solid rgba(102, 192, 244, 0.15); /* İnce belirginlik */
    padding: 2px 8px;
    border-radius: 3px; /* Keskin olmayan ama çok yuvarlak da olmayan modern köşe */
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: capitalize; /* Sadece baş harfi büyük */
    transition: all 0.2s ease;
}

/* Hover efekti: Steam mavisine hafif bir parlama */
.lang-badge:hover {
    background: rgba(102, 192, 244, 0.15);
    color: #66c0f4;
    border-color: rgba(102, 192, 244, 0.4);
}

.lang-order {
    color: #66c0f4; /* Numaralar Steam mavisi */
    font-weight: bold;
    font-size: 10px;
}

.mini-flag {
    width: 14px; /* Ufak ve zarif boyut */
    height: auto;
    border-radius: 1px;
}


@media (max-width: 768px) {
    /* Yan yana dizilimi sağla ve üstten az boşluk ver */
    .analysis-langs {
        display: flex !important;
        flex-wrap: wrap;
        gap: 3px;
        margin-top: 5px;
    }

    /* Arka planı koru ama iç boşlukları ve boyutu küçült */
    .lang-badge {
        display: inline-flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.08); /* Arka plan duruyor */
        padding: 1px 4px; /* İyice daralttık */
        border-radius: 2px;
        font-size: 9px; /* En küçük okunabilir yazı */
        color: #8abbd1;
    }

    /* Bayrağı minnacık yap */
    .mini-flag {
        width: 10px !important;
        height: auto;
        margin: 0 3px !important;
    }

    /* 1. 2. 3. sayılarını küçült */
    .lang-order {
        font-size: 8px;
        font-weight: bold;
        color: #66c0f4;
    }
}

.game-stats-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        color: #8abbd1;
        font-size: 13px;
        margin: 8px 0 0 0;
    }

    /* Mobilde (768px altı) alt alta diz */
    @media (max-width: 768px) {
        .game-stats-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }
        .game-stats-row .separator {
            display: none; /* Mobilde dikey çizgiyi gizle */
        }
    }
    
    .game-info-card {
        display: flex;
        gap: 15px;
        align-items: center;
        margin: 20px 0;
        background: rgba(0,0,0,0.5);
        padding: 15px;
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        position: relative;
    }

    .game-stats-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        color: #8abbd1;
        font-size: 13px;
        margin-top: 10px;
    }

    .steam-btn {
         padding: 6px 15px;
    background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 2px;
    text-align: center;
        border-radius: 2px;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        margin-top: 15px;
    }
.steam-btn:hover { background: linear-gradient( to right, #8ed629 5%, #6aa621 95%); }

    @media (max-width: 768px) {
        .game-info-card { flex-direction: column; align-items: flex-start; }
        .game-info-card img { width: 60% !important; max-width: 300px; }
        .game-stats-row { flex-direction: column; gap: 5px; }
        .game-stats-row .separator { display: none; }
    }
    
    
    .mini-share-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 71, 94, 0.6);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    transition: 0.3s;
}



.backlogo {
    display: flex;
    justify-content: center; /* Yatayda ortalar */
    align-items: center;     /* Dikeyde ortalar */
    background: transparent; /* Arka planı şeffaf tutar */
    width: 100%;             /* Alanı kaplar */
}

.logao {
    width: 100px;             /* Logoyu ufak yapar */
    height: auto;            /* Oranları korur */
    opacity: 0.7;            /* %50 yerine %80 yaparak biraz daha görünür kıldık */
}