:root {
    /* Font Sizes */
    --ui-font-size-large: clamp(1.5em, 3vw, 2em);
    --ui-font-size-medium: clamp(1.1em, 2.2vw, 1.5em);
    --ui-font-size-base: clamp(0.9em, 1.8vw, 1em);
    --ui-font-size-small: clamp(0.7em, 1.5vw, 0.8em);

    /* Askeri Renk Paleti */
    --olive-dark: #2d3a1f;
    --olive-mid: #4a5d23;
    --olive-light: #6b7c3f;
    --khaki: #c3b091;
    --sand: #d4c4a8;
    --rust: #8b4513;
    --metal-dark: #3a3a3a;
    --metal-mid: #5a5a5a;
    --metal-light: #7a7a7a;
    --warning-red: #8b0000;
    --warning-orange: #b8600f;
    --health-green: #4a7c23;
    --shield-blue: #4a6a8a;

    /* Panel Arka Planları */
    --panel-bg: linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    --panel-border: #1a2010;
    --panel-inset: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(255,255,255,0.1);

    /* Texture Patterns */
    --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    --metal-scratches: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 3px,
        rgba(255,255,255,0.02) 3px,
        rgba(255,255,255,0.02) 4px,
        transparent 4px,
        transparent 12px
    ), repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 8px,
        rgba(0,0,0,0.03) 8px,
        rgba(0,0,0,0.03) 9px
    );

    --canvas-texture: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.05) 1px,
        rgba(0,0,0,0.05) 2px
    ), repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.05) 1px,
        rgba(0,0,0,0.05) 2px
    );

    --rivet-shadow: inset 1px 1px 2px rgba(255,255,255,0.1), inset -1px -1px 2px rgba(0,0,0,0.3);

    /* Juice Renkleri (Askeri) */
    --juice-gold: #d4a017;
    --juice-orange: #ff8040;
    --juice-green: #6b8e23;
    --juice-blue: #5a8aba;
    --juice-purple: #8b4a8b;

    /* Eski uyumluluk için (geçiş süreci) */
    --crt-color: var(--olive-light);
    --bar-bg: rgba(45, 58, 31, 0.8);
    --shield-color: var(--shield-blue);
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background: var(--canvas-texture), linear-gradient(135deg, #1a1a14 0%, #2a2a1e 50%, #1a1a14 100%);
    color: var(--khaki);
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    overflow: hidden;
}

/* ================================================================
   JUICE EFEKT SİSTEMİ - Global Animasyonlar
   ================================================================ */

@keyframes shine-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes elastic-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes juice-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes pulse-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    50% { filter: brightness(1.2) drop-shadow(0 0 15px var(--juice-gold)); }
}

@keyframes rotate-shine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 0.6; }
    100% { transform: scale(4); opacity: 0; }
}

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

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

@keyframes number-pop {
    0% { transform: scale(0) translateY(0); opacity: 0; }
    20% { transform: scale(1.5) translateY(-10px); opacity: 1; }
    40% { transform: scale(0.9) translateY(-15px); }
    60% { transform: scale(1.1) translateY(-25px); }
    100% { transform: scale(0.8) translateY(-50px); opacity: 0; }
}

@keyframes liquid-wobble {
    0%, 100% { transform: translateY(0) scaleY(1); }
    25% { transform: translateY(-2px) scaleY(1.02); }
    50% { transform: translateY(0) scaleY(0.98); }
    75% { transform: translateY(1px) scaleY(1.01); }
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(195, 176, 145, 0.3); }
    50% { text-shadow: 0 0 20px rgba(195, 176, 145, 0.6), 0 0 30px rgba(255, 215, 0, 0.3); }
}

/* Juice Utility Classes */
.juice-bounce { animation: elastic-bounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.juice-pop { animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.juice-shake { animation: juice-shake 0.4s ease-out; }
.juice-pulse { animation: pulse-glow 1.5s ease-in-out infinite; }

/* Rivet Detayları */
.rivet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #6a6a6a, #3a3a3a);
    border-radius: 50%;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), inset -1px -1px 2px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5);
}

#gameCanvas {
    display: block;
    background-color: #0c0c0c;
}

/* PixiJS canvas container - Canvas 2D'nin üstünde, HUD'ın altında */
#pixiCanvasContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Parçacıklar tıklanabilir olmamalı */
    z-index: 2; /* game-ui-overlay (z-50) altında, efektler HUD'ın altında kalır */
}

#pixiCanvasContainer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent;
}

#gameCanvas {
    position: relative;
    z-index: 1; /* Canvas 2D: arka plan, birimler, mermiler */
}

#gameContainer {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    background: var(--canvas-texture), #1a1a14;
    border: 4px solid var(--metal-dark);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 0 3px var(--olive-dark);
}

.game-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000; /* HUD - Tüm oyun katmanlarının çok üstünde (child elementler 6-10 arası z-index kullanıyor) */
}

#top-head-band {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--metal-scratches), var(--panel-bg);
    border-bottom: 3px solid var(--panel-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    padding: 8px 15px;
    box-sizing: border-box;
    z-index: 6;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* Noise texture overlay */
#top-head-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--noise-texture);
    opacity: 0.04;
    pointer-events: none;
}

.top-ui {
    position: relative;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.top-left-ui {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-center-ui {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.top-right-ui {
    display: flex;
    align-items: center;
    gap: 15px;
}

#bossBarsWrapper {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.boss-health-container {
    width: 100%;
    height: 25px;
    background-color: rgba(51, 51, 51, 0.7);
    border: 2px solid rgba(255, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    position: relative;
    transition: all 0.3s ease-in-out;
}

.boss-health-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 68, 68, 0.4), rgba(255, 0, 0, 0.4));
    transition: width 0.2s linear;
}

.boss-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: var(--ui-font-size-base);
    text-shadow: 1px 1px 2px black;
    width: 100%;
    text-align: center;
}

/* --- Panel and HUD Styles --- */

.info-display {
    background: var(--canvas-texture), linear-gradient(180deg, #2a2a22 0%, #1a1a14 100%);
    border: 2px solid var(--metal-dark);
    border-radius: 2px;
    padding: 6px 12px;
    color: var(--khaki);
    font-family: 'Orbitron', sans-serif;
    font-size: var(--ui-font-size-small);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--panel-inset), inset 0 0 20px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
    position: relative;
}

/* Ekran cam efekti */
.info-display::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    border-radius: 1px;
    pointer-events: none;
}

/* === GÖREV CHECKLIST === */
.mission-checklist {
    position: fixed;
    top: 80px;
    left: 10px;
    background: linear-gradient(180deg, rgba(45, 58, 31, 0.95) 0%, rgba(30, 40, 20, 0.95) 100%);
    border: 2px solid var(--olive-mid);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 200px;
    max-width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 100;
    font-family: 'Segoe UI', sans-serif;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mission-checklist.hidden {
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
}

.mission-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
}

.mission-icon {
    font-size: 16px;
}

.mission-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--sand);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mission-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border-left: 3px solid var(--olive-mid);
    transition: all 0.3s ease;
}

.mission-item.completed {
    border-left-color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.mission-item.completed .mission-checkbox {
    color: #4ade80;
    text-shadow: 0 0 8px #4ade80;
}

.mission-item.completed .mission-text {
    color: #4ade80;
    text-decoration: line-through;
    opacity: 0.8;
}

.mission-item.active {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    animation: mission-pulse 2s infinite ease-in-out;
}

@keyframes mission-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
}

.mission-checkbox {
    font-size: 14px;
    color: var(--khaki);
    min-width: 18px;
    text-align: center;
}

.mission-text {
    font-size: 11px;
    color: var(--sand);
    line-height: 1.3;
}

.mission-progress {
    margin-top: 10px;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.mission-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px #4ade80;
}

/* Görev tamamlandığında animasyon */
.mission-item.just-completed {
    animation: mission-complete 0.6s ease forwards;
}

@keyframes mission-complete {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); background: rgba(74, 222, 128, 0.3); }
    100% { transform: scale(1); }
}

#totalMoneyDisplay {
    border-color: #ffd700;
    color: #ffd700;
    text-shadow: 0 0 8px #ffd700;
    animation: money-glow 2s infinite ease-in-out;
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    padding: 8px 16px;
}

@keyframes money-glow {
    0%, 100% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(255, 215, 0, 0.7);
        border-color: #ffd700;
    }
    50% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 20px rgba(255, 215, 0, 1);
        border-color: #fff;
    }
}

#magazine-display {
    display: flex !important; /* Şarjör her zaman görünür */
    justify-content: center;
    align-items: center;
    min-height: 30px;
    font-weight: bold;
    color: var(--khaki);
}

#gameTimer { font-size: var(--ui-font-size-large); }
#score, #flag-counter, #money { font-size: var(--ui-font-size-medium); }

/* Sol üstteki silah UI kaldırıldı - alt bar kullanılıyor */
#weapon-ui {
    display: none !important;
}

#dashboard {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* PixiJS canvas (z-3) üzerinde */
    background: var(--metal-scratches), var(--panel-bg);
    border-top: 3px solid var(--panel-border);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
    padding: 15px 20px; /* Daha kompakt padding */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* Noise overlay */
#dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--noise-texture);
    opacity: 0.04;
    pointer-events: none;
}

.panel-section {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 15px);
}
/* Eski panel isimleri - geriye uyumluluk */
#left-panel { flex: 1 1 30%; }
#center-panel { flex: 1 1 40%; }
#right-panel { flex: 1 1 30%; justify-content: flex-end; }

/* Yeni panel yapısı - 3 bölüm: Radar | (Zırh+Şarjör) + Silahlar | Kalkan+Atılma */
#radar-panel {
    flex: 0 0 auto;
}
#stats-panel {
    flex: 1 1 auto; /* Ekran genişliğine göre esner */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Zırh sol, Silahlar sağ */
    gap: 15px;
    position: relative; /* Pasif yetenekler için anchor */
}
#skills-panel {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Grup 1: Zırh + Şarjör (dikey düzen) - Genişletilmiş */
#health-ammo-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto; /* Ekran genişliğine göre genişler */
    max-width: 600px; /* Maksimum genişlik sınırı */
    margin-right: 15px; /* Silah slotlarından ayrılık */
}

/* Sol üstteki silah gösterimi kaldırıldı */

/* HTML butonlarını gizle (PixiJS butonları kullanılıyor) */
#mapButton, #pauseButton { display: none !important; }

/* =====================================================
   XP BAR STRIP - Dashboard üstünde ince çizgi
   ===================================================== */
#xp-bar-strip {
    position: absolute;
    bottom: var(--dashboard-height, 170px); /* Dashboard yüksekliği */
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, #0d0d0a 0%, #1a1a14 50%, #0a0a08 100%);
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    z-index: 100;
    pointer-events: none;
}

#xp-bar-strip #xp-bar-container {
    height: 100%;
    border-radius: 0;
    border: none;
    background: transparent;
}

#xp-bar-strip #xp-bar {
    position: absolute;
    top: 1px;
    left: 0;
    width: 0%;
    height: calc(100% - 2px);
    border-radius: 0;
    background: linear-gradient(180deg,
        rgba(0, 180, 255, 0.9) 0%,
        rgba(0, 120, 200, 0.8) 50%,
        rgba(0, 80, 150, 0.9) 100%);
    box-shadow: 0 0 10px rgba(0, 153, 238, 0.5),
                0 0 20px rgba(0, 153, 238, 0.3);
    transition: width 0.3s ease-out;
}

#xp-bar-strip .xp-strip-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 5;
}

#xp-bar-strip .xp-strip-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--khaki);
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    z-index: 5;
}

/* =====================================================
   RADAR PANEL - Minimap canvas
   ===================================================== */
#radar-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

#radarCanvas {
    border-radius: 50%;
    border: 3px solid var(--panel-border);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(0, 0, 0, 0.3);
    background: rgba(0, 20, 0, 0.8);
}

/* =====================================================
   WEAPONS PANEL - Aktif silahlar listesi (5 slot + 1 kilitli)
   ===================================================== */
#active-weapons-display {
    display: grid;
    grid-template-columns: repeat(3, 75px); /* 3 sütun × 75px = 225px (+ 20px gap = 245px içerik) */
    grid-template-rows: repeat(2, 75px); /* 2 satır × 75px = 150px (+ 10px gap = 160px içerik) */
    gap: 10px; /* Slotlar arası boşluk dengeli */
    justify-items: stretch;
    align-items: stretch;
    justify-content: center;
    align-content: center;
    /* Sabit blok: dashboard TAM yüksekliği (170px) */
    width: 255px; /* Genişlik sabitlendi */
    height: 170px; /* Dashboard yüksekliğine TAM eşit */
    flex-shrink: 0; /* Küçülmeyi engelle */
    padding: 5px; /* Hafif iç padding */
    background: linear-gradient(180deg, rgba(40, 45, 30, 0.6) 0%, rgba(30, 35, 20, 0.8) 100%);
    border-top: 3px solid var(--olive-dark);
    border-bottom: 3px solid var(--olive-dark);
    border-left: 3px solid var(--olive-dark);
    border-right: 3px solid var(--olive-dark);
    border-radius: 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-top: -15px; /* Dashboard üst padding'i iptal */
    margin-bottom: -15px; /* Dashboard alt padding'i iptal */
}

/* =====================================================
   PASSIVE ABILITIES - Aktif pasif yetenek göstergeleri
   ===================================================== */
#passive-abilities-display {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

#passive-abilities-display:empty {
    display: none;
}

.passive-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    font-family: var(--ui-font);
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    border: 1px solid;
    background: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    animation: passive-badge-in 0.4s ease-out;
}

.passive-badge .passive-icon {
    font-size: 16px;
    line-height: 1;
}

.passive-badge .passive-label {
    line-height: 1;
}

.passive-badge.mermi-manyagi {
    border-color: #d4a017;
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.4), inset 0 0 8px rgba(212, 160, 23, 0.1);
    color: #ffd54f;
}

.passive-badge.kundakci {
    border-color: #ff8040;
    box-shadow: 0 0 6px rgba(255, 128, 64, 0.4), inset 0 0 8px rgba(255, 128, 64, 0.1);
    color: #ffab76;
}

.passive-badge.teknoloji-meraklisi {
    border-color: #5a8aba;
    box-shadow: 0 0 6px rgba(90, 138, 186, 0.4), inset 0 0 8px rgba(90, 138, 186, 0.1);
    color: #8bb8e8;
}

.passive-badge.oyuncak-sever {
    border-color: #8b4a8b;
    box-shadow: 0 0 6px rgba(139, 74, 139, 0.4), inset 0 0 8px rgba(139, 74, 139, 0.1);
    color: #c88ac8;
}

.passive-badge.kesici-ustasi {
    border-color: #c0392b;
    box-shadow: 0 0 6px rgba(192, 57, 43, 0.4), inset 0 0 8px rgba(192, 57, 43, 0.1);
    color: #e8706a;
}

@keyframes passive-badge-in {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

.weapon-slot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px; /* Grid boyutuna eşit */
    height: 75px; /* Grid boyutuna eşit */
    background: linear-gradient(180deg, rgba(30, 30, 25, 0.9) 0%, rgba(15, 15, 12, 0.95) 100%);
    border: 2px solid var(--panel-border);
    border-radius: 8px;
    font-size: 32px; /* İkon boyutu artırıldı */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 2px 8px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.2s ease;
}

/* Dolu slot */
.weapon-slot-box.filled {
    background: linear-gradient(180deg, var(--metal-mid) 0%, var(--metal-dark) 100%);
    border-color: var(--olive);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 8px rgba(107, 142, 35, 0.3);
}

/* Boş slot */
.weapon-slot-box.empty {
    opacity: 0.6;
}
.weapon-slot-box.empty::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px dashed rgba(150, 150, 140, 0.3);
    border-radius: 4px;
}

/* Kilitli slot */
.weapon-slot-box.locked {
    background: linear-gradient(180deg, rgba(40, 20, 20, 0.9) 0%, rgba(20, 10, 10, 0.95) 100%);
    border-color: rgba(100, 50, 50, 0.6);
    opacity: 0.5;
}
.weapon-slot-box.locked::after {
    content: '🔒';
    font-size: 14px;
    opacity: 0.6;
}

.weapon-slot-box .weapon-level {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 18px; /* 10px → 18px büyütüldü */
    background: var(--olive);
    color: #fff;
    padding: 4px 8px; /* Padding artırıldı */
    border-radius: 6px; /* Border radius artırıldı */
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Silah grubu renkleri */
.weapon-slot-box.filled.mermi-manyagi {
    border-color: #d4a017;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(212, 160, 23, 0.15),
                0 0 10px rgba(212, 160, 23, 0.25);
}
.weapon-slot-box.filled.mermi-manyagi .weapon-level { background: #d4a017; }

.weapon-slot-box.filled.kundakci {
    border-color: #ff8040;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 128, 64, 0.15),
                0 0 10px rgba(255, 128, 64, 0.25);
}
.weapon-slot-box.filled.kundakci .weapon-level { background: #ff8040; }

.weapon-slot-box.filled.teknoloji-meraklisi {
    border-color: #5a8aba;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(90, 138, 186, 0.15),
                0 0 10px rgba(90, 138, 186, 0.25);
}
.weapon-slot-box.filled.teknoloji-meraklisi .weapon-level { background: #5a8aba; }

.weapon-slot-box.filled.oyuncak-sever {
    border-color: #8b4a8b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(139, 74, 139, 0.15),
                0 0 10px rgba(139, 74, 139, 0.25);
}
.weapon-slot-box.filled.oyuncak-sever .weapon-level { background: #8b4a8b; }

.weapon-slot-box.filled.kesici-ustasi {
    border-color: #c0392b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(192, 57, 43, 0.15),
                0 0 10px rgba(192, 57, 43, 0.25);
}
.weapon-slot-box.filled.kesici-ustasi .weapon-level { background: #c0392b; }

.gauge-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.xp-gauge {
    justify-content: center;
}
.gauge-label {
    position: absolute;
    left: 20px; /* 2x büyük */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px; /* 2x büyük */
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: 4px; /* 2x büyük */
    font-weight: bold;
    text-shadow: 2px 2px 4px #000; /* 2x büyük */
    z-index: 5;
    pointer-events: none;
}

.gauge-text {
    position: absolute;
    right: 20px; /* 2x büyük */
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px; /* 2x büyük */
    color: var(--khaki);
    font-weight: bold;
    text-shadow: 2px 2px 4px #000; /* 2x büyük */
    z-index: 5;
}
.gauge-bar-container {
    width: 100%;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 3px),
                linear-gradient(180deg, #1a1a14 0%, #0a0a08 100%);
    border: 3px solid var(--metal-dark);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), inset 0 0 15px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
}

/* Glass reflection */
.gauge-bar-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

#health-bar-container {
    height: 64px; /* 2x büyük */
    overflow: hidden; /* Animasyonların taşmamasını sağla */
}

/* Büyük hasar alındığında container'ı sarsar */
#health-bar-container.big-hit {
    animation: health-container-shake 0.4s ease-out;
}

@keyframes health-container-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
/* Eski XP bar container stili - artık #xp-bar-strip içinde */
/* #xp-bar-container stilini #xp-bar-strip altında tanımladık */

/* Hasar izi - can barının arkasında yavaşça azalan renkli bar */
#health-bar-trail {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    max-width: calc(100% - 6px); /* Animasyonların taşmamasını sağla */
    height: calc(100% - 6px);
    background: repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0px, transparent 1px, transparent 4px),
                linear-gradient(to right, var(--warning-red), var(--warning-orange), #8b6914);
    border-radius: 1px;
    z-index: 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hasar alındığında pulse animasyonu */
#health-bar-trail.damage-pulse {
    animation: health-trail-pulse 0.4s ease-out;
}

@keyframes health-trail-pulse {
    0% {
        box-shadow: 0 0 8px rgba(255, 204, 68, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 1), 0 0 30px rgba(255, 136, 68, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.4);
        filter: brightness(1.3);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 204, 68, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }
}
#health-bar {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    max-width: calc(100% - 6px); /* Animasyonların taşmamasını sağla */
    height: calc(100% - 6px);
    z-index: 1;
    /* Gerçekçi metal bar - fırçalanmış çelik görünümü */
    background: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px, transparent 3px, transparent 5px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 6px),
                linear-gradient(180deg, #8a8a7a 0%, #6a6a5a 15%, #5a5a4a 40%, #4a4a3a 60%, #5a5a4a 85%, #6a6a5a 100%);
    border-radius: 1px;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.4), inset 2px 0 3px rgba(0,0,0,0.2), inset -2px 0 3px rgba(0,0,0,0.2);
}

/* Shimmer sweep effect */
#health-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 3s ease-in-out infinite;
    z-index: 2;
}

/* Top highlight */
#health-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    border-radius: 1px 1px 0 0;
}

/* Liquid wobble on change */
#health-bar.changing {
    animation: liquid-wobble 0.3s ease-out;
}

/* Kritik can seviyesinde (<%25) sürekli pulse */
#health-bar.critical {
    animation: health-bar-critical 0.8s ease-in-out infinite;
}

@keyframes health-bar-critical {
    0%, 100% {
        background: linear-gradient(180deg, #8b3a3a 0%, #5a2020 50%, #6b3030 100%);
    }
    50% {
        background: linear-gradient(180deg, #aa4a4a 0%, #7a3030 50%, #8b4040 100%);
    }
}

/* Hasar alındığında can barı kırmızı yanıp söner */
#health-bar.hit-flash {
    animation: health-bar-hit 0.3s ease-out;
}

@keyframes health-bar-hit {
    0% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
    40% {
        filter: brightness(0.6) saturate(0);
        box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.6);
    }
    100% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
}

/* İyileşme efekti - yeşil parıltı */
#health-bar.heal-flash {
    animation: health-bar-heal 0.5s ease-out;
}

@keyframes health-bar-heal {
    0% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
    50% {
        filter: brightness(1.4) saturate(1.2);
        box-shadow: inset 0 0 15px rgba(107, 124, 63, 0.8), 0 0 20px rgba(107, 124, 63, 0.8), 0 0 30px rgba(107, 124, 63, 0.5);
    }
    100% {
        filter: brightness(1);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 5px rgba(158, 158, 158, 0.3);
    }
}
#xp-bar {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 0%;
    height: calc(100% - 6px);
    max-width: calc(100% - 6px);
    overflow: hidden; /* Animasyonlar sadece dolu bölümde görünsün */
    /* CANLI MAVİ METAL - Yüksek Saturation */
    background: repeating-linear-gradient(180deg, transparent 0px, transparent 2px, rgba(255,255,255,0.12) 2px, rgba(255,255,255,0.12) 3px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 5px),
                linear-gradient(180deg, #00aaff 0%, #0099ee 15%, #0088dd 40%, #0077cc 60%, #0088dd 85%, #0099ee 100%);
    border-radius: 1px;
    transition: width 0.3s ease-out;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), /* Parlak highlight */
                inset 0 -1px 0 rgba(0,0,0,0.3),
                inset 2px 0 3px rgba(0,0,0,0.15),
                0 0 30px rgba(0, 170, 255, 1), /* Canlı mavi glow */
                0 0 20px rgba(0, 204, 255, 0.8),
                0 0 40px rgba(0, 153, 238, 0.6),
                inset 0 0 25px rgba(102, 204, 255, 0.2); /* İçten mavi glow */
}

/* Shimmer sweep - DAHA PARLAK, sadece dolu bölümde */
#xp-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
    animation-delay: 0.5s;
    z-index: 2;
}

/* Top highlight - DAHA PARLAK */
#xp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%);
    pointer-events: none;
}

/* XP kazanımında parlama efekti - CANLI MAVİ GLOW */
@keyframes xp-gain-pulse {
    0% {
        filter: brightness(1.4) saturate(1.3);
        transform: scaleY(1);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 30px rgba(0, 170, 255, 1),
                    0 0 20px rgba(0, 204, 255, 0.8),
                    0 0 40px rgba(0, 153, 238, 0.6),
                    inset 0 0 25px rgba(102, 204, 255, 0.2);
    }
    30% {
        filter: brightness(2.2) saturate(2.0);
        transform: scaleY(1.15);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.7),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 50px rgba(0, 170, 255, 1),
                    0 0 40px rgba(0, 204, 255, 1),
                    0 0 65px rgba(0, 153, 238, 0.8),
                    inset 0 0 35px rgba(102, 204, 255, 0.4);
    }
    50% {
        filter: brightness(2.6) saturate(2.2) drop-shadow(0 0 25px rgba(0, 204, 255, 1));
        transform: scaleY(1.18);
        box-shadow: inset 0 4px 0 rgba(255,255,255,0.9),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 70px rgba(0, 170, 255, 1),
                    0 0 55px rgba(0, 204, 255, 1),
                    0 0 85px rgba(0, 153, 238, 1),
                    inset 0 0 45px rgba(102, 204, 255, 0.6);
    }
    100% {
        filter: brightness(1.4) saturate(1.3);
        transform: scaleY(1);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 30px rgba(0, 170, 255, 1),
                    0 0 20px rgba(0, 204, 255, 0.8),
                    0 0 40px rgba(0, 153, 238, 0.6),
                    inset 0 0 25px rgba(102, 204, 255, 0.2);
    }
}

#xp-bar.pulse {
    animation: xp-gain-pulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center center;
    overflow: hidden; /* Animasyon sadece dolu bölümde */
}

/* XP bar glow when near full - CANLI MAVİ PARLAK */
@keyframes xp-almost-full-glow {
    0%, 100% {
        filter: brightness(1.6) saturate(1.4);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 35px rgba(0, 170, 255, 1),
                    0 0 28px rgba(0, 204, 255, 0.9),
                    0 0 45px rgba(0, 153, 238, 0.7),
                    inset 0 0 28px rgba(102, 204, 255, 0.25);
    }
    50% {
        filter: brightness(2.2) saturate(1.9);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.7),
                    inset 0 -1px 0 rgba(0,0,0,0.3),
                    inset 2px 0 3px rgba(0,0,0,0.15),
                    0 0 55px rgba(0, 170, 255, 1),
                    0 0 45px rgba(0, 204, 255, 1),
                    0 0 70px rgba(0, 153, 238, 0.9),
                    inset 0 0 40px rgba(102, 204, 255, 0.45);
    }
}

#xp-bar.almost-full {
    animation: xp-almost-full-glow 1.2s ease-in-out infinite;
    overflow: hidden; /* Animasyon sadece dolu bölümde */
}
.gauge-text {
    text-align: center;
    color: #fff;
    font-size: var(--ui-font-size-base);
    font-weight: bold;
    margin-top: calc(-1 * clamp(23px, 3vh, 28px));
    text-shadow: 1px 1px 2px #000;
    position: relative;
    pointer-events: none;
}
#health-bar-container > #health-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 2; /* Barların üstünde görünsün */
}

#xp-bar-container > #xp-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 2; /* Barların üstünde görünsün */
    text-align: center;
}

.skill-gauge {
    width: 160px; /* 2x büyük */
    height: 12px; /* 2x büyük */
    display: flex;
    gap: 4px; /* 2x büyük */
    background: transparent;
    border: none;
}

.fuel-segment, .shield-segment {
    flex: 1;
    background: var(--metal-dark);
    border-radius: 2px; /* 2x büyük */
    transition: all 0.3s;
    border: 2px solid #222; /* 2x büyük */
}

.fuel-segment.charged {
    background: linear-gradient(180deg, #b8860b 0%, #8b6914 100%);
    border-color: #d4a017;
    box-shadow: 0 0 8px rgba(184, 134, 11, 0.6);
    animation: segment-fill 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.shield-segment.charged {
    background: linear-gradient(180deg, var(--shield-blue) 0%, #3a5a7a 100%);
    border-color: #5a8aba;
    box-shadow: 0 0 8px rgba(74, 106, 138, 0.6);
    animation: segment-fill 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes segment-fill {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Depleted segment shake */
.fuel-segment.depleted, .shield-segment.depleted {
    animation: segment-deplete 0.3s ease-out;
}

@keyframes segment-deplete {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); filter: brightness(0.5); }
    100% { transform: scale(1); opacity: 1; }
}

/* Full gauge pulse */
.skill-gauge.full .fuel-segment.charged,
.skill-gauge.full .shield-segment.charged {
    animation: segment-full-pulse 1s ease-in-out infinite;
}

@keyframes segment-full-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

#dash-fuel-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffc400, #ffd700);
    border-radius: 3px;
    transition: width 0.1s linear;
}

#skills-container {
    display: flex;
    gap: clamp(10px, 2vw, 20px);
}
.skill-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 2x büyük */
}
.skill-label {
    font-size: 18px; /* 2x büyük */
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: 2px; /* 2x büyük */
}

.skill-button {
    background: linear-gradient(180deg, var(--metal-mid) 0%, var(--metal-dark) 100%);
    border: 4px solid var(--metal-dark); /* 2x büyük */
    color: #666;
    padding: 12px 24px; /* 2x büyük */
    border-radius: 4px; /* 2x büyük */
    font-family: inherit;
    font-size: 20px; /* 2x büyük */
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 2px; /* 2x büyük */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.1); /* 2x büyük */
}

.skill-button:hover {
    transform: translateY(-4px); /* 2x büyük */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* 2x büyük */
}

.skill-button:active {
    transform: translateY(2px) scale(0.95); /* 2x büyük */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 2x büyük */
    transition: all 0.05s;
}

.skill-button.ready {
    border-color: var(--olive-light);
    color: var(--khaki);
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    animation: skill-ready-pulse 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes skill-ready-pulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(107, 124, 63, 0.3);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 20px rgba(107, 124, 63, 0.6);
    }
}

.skill-button.ready::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

.skill-button.ready:hover {
    filter: brightness(1.2);
    transform: translateY(-4px) scale(1.05); /* 2x büyük translate */
    box-shadow: 0 8px 24px rgba(107, 124, 63, 0.5); /* 2x büyük */
}

/* Skill used flash */
.skill-button.used {
    animation: skill-used 0.3s ease-out;
}

@keyframes skill-used {
    0% { filter: brightness(2); transform: scale(1.1); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* --- Pop-up & Menu Styles --- */
.objective-popup {
    display: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(2.5em, 6vw, 4.5em);
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px var(--olive-light), 0 0 20px var(--olive-light), 0 0 40px rgba(107, 124, 63, 0.6);
    z-index: 1050;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

.objective-popup.show {
    display: block;
    animation: fadeInOut 2s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* === ACHIEVEMENT MODAL === */
#achievement-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

#achievement-modal-overlay.show {
    display: flex;
    animation: achievement-fade-in 0.3s ease-out;
}

@keyframes achievement-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#achievement-modal {
    background: linear-gradient(180deg, #2a2a1a 0%, #1a1a10 100%);
    border: 3px solid #c9a825;
    border-radius: 6px;
    padding: 30px 45px 25px;
    text-align: center;
    min-width: 340px;
    max-width: 460px;
    box-shadow:
        0 0 30px rgba(201, 168, 37, 0.4),
        0 0 60px rgba(201, 168, 37, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.8);
    animation: achievement-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

@keyframes achievement-entrance {
    0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
    60% { transform: scale(1.05) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#achievement-star {
    font-size: 42px;
    color: #ffd700;
    text-shadow: 0 0 15px #ffd700, 0 0 30px #ff8c00, 0 0 45px #ff6600;
    animation: achievement-star-pulse 1.5s ease-in-out infinite;
    margin-bottom: 4px;
}

@keyframes achievement-star-pulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 15px #ffd700, 0 0 30px #ff8c00; }
    50% { transform: scale(1.15); text-shadow: 0 0 25px #ffd700, 0 0 50px #ff8c00, 0 0 70px #ff6600; }
}

#achievement-modal-title {
    color: #c9a825;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: bold;
}

#achievement-modal-name {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 16px;
    letter-spacing: 1px;
}

#achievement-weapons-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

#achievement-weapons-list .ach-weapon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(201, 168, 37, 0.3);
    border-radius: 4px;
    padding: 6px 12px;
    color: var(--khaki);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#achievement-weapons-list .ach-weapon .ach-weapon-icon {
    width: 22px;
    height: 22px;
}

#achievement-modal-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a825, transparent);
    margin: 0 auto 14px;
}

#achievement-bonus-label {
    color: #8b7514;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: bold;
}

#achievement-modal-desc {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 22px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

#achievement-ok-btn {
    background: linear-gradient(180deg, #8b7514 0%, #6a5a10 100%);
    border: 2px solid #c9a825;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 10px 50px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

#achievement-ok-btn:hover {
    background: linear-gradient(180deg, #a08a1a 0%, #8b7514 100%);
    box-shadow: 0 0 15px rgba(201, 168, 37, 0.5);
    transform: scale(1.05);
}

#achievement-ok-btn:active {
    transform: scale(0.97);
}

/* === TUTORIAL MODAL === */
#tutorial-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

#tutorial-modal-overlay.show {
    display: flex;
    animation: achievement-fade-in 0.3s ease-out;
}

#tutorial-modal {
    background: linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    border: 3px solid #6b7c3f;
    border-radius: 6px;
    padding: 28px 40px 22px;
    text-align: center;
    min-width: 340px;
    max-width: 480px;
    box-shadow:
        0 0 30px rgba(107, 124, 63, 0.4),
        0 0 60px rgba(107, 124, 63, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.8);
    animation: tutorial-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

@keyframes tutorial-entrance {
    0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
    60% { transform: scale(1.05) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#tutorial-step-indicator {
    position: absolute;
    top: 8px;
    right: 14px;
    color: #6b7c3f;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: bold;
}

#tutorial-icon {
    font-size: 38px;
    margin-bottom: 6px;
    text-shadow: 0 0 15px rgba(107, 124, 63, 0.6);
}

#tutorial-title {
    color: #c3b091;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(195, 176, 145, 0.3);
}

#tutorial-desc {
    color: #a89070;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

#tutorial-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #c3b091;
    font-size: 13px;
    align-items: center;
}

#tutorial-keys kbd {
    display: inline-block;
    background: linear-gradient(180deg, #4a4a3a 0%, #2a2a1a 100%);
    border: 2px solid #6b7c3f;
    border-bottom-width: 3px;
    border-radius: 4px;
    padding: 4px 10px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Orbitron', monospace;
    min-width: 28px;
    text-align: center;
    box-shadow: 0 2px 0 #1a1a10, 0 0 6px rgba(107, 124, 63, 0.3);
}

/* Elit Düşman Varyantları Listesi */
.elite-variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: left;
}

.elite-variants .variant {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #6b7c3f;
}

.elite-variants .variant-icon {
    font-size: 20px;
    min-width: 28px;
    text-align: center;
}

.elite-variants .variant-name {
    font-weight: bold;
    color: #d4c4a4;
    min-width: 60px;
    font-size: 13px;
}

.elite-variants .variant-desc {
    color: #a89070;
    font-size: 12px;
    flex: 1;
}

#tutorial-ok-btn {
    background: linear-gradient(180deg, #4a5d23 0%, #3d4a1f 100%);
    border: 2px solid #6b7c3f;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 10px 50px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    font-family: 'Orbitron', monospace;
}

#tutorial-ok-btn:hover {
    background: linear-gradient(180deg, #5a6d33 0%, #4a5d23 100%);
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.5);
    transform: scale(1.05);
}

#tutorial-ok-btn:active {
    transform: scale(0.97);
}

#tutorial-skip-label {
    display: block;
    margin-top: 12px;
    color: #6b7c3f;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}

#tutorial-skip-label input[type="checkbox"] {
    margin-right: 5px;
    accent-color: #6b7c3f;
    vertical-align: middle;
}

/* Tutorial HUD Highlight */
.tutorial-highlight {
    animation: tutorial-highlight-pulse 1.5s ease-in-out infinite !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.3) !important;
    border-color: #ffd700 !important;
    z-index: 100 !important;
    position: relative;
}

@keyframes tutorial-highlight-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4); }
}

/* Tutorial Ok İşareti */
.tutorial-arrow {
    position: fixed;
    z-index: 9997;
    pointer-events: none;
    transform: translateX(-50%);
}

.tutorial-arrow-inner {
    color: #ffd700;
    font-size: 24px;
    text-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.5);
    animation: tutorial-arrow-bounce 0.8s ease-in-out infinite;
}

@keyframes tutorial-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* === KONTROLLER YARDIM MODALI === */
#controls-help-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: auto;
}

#controls-help-overlay.show {
    display: flex;
    animation: controls-fade-in 0.2s ease-out;
}

@keyframes controls-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

#controls-help-modal {
    background: linear-gradient(180deg, #2a3520 0%, #1a2510 100%);
    border: 3px solid #4a5d30;
    border-radius: 8px;
    padding: 0;
    min-width: 320px;
    max-width: 400px;
    box-shadow:
        0 0 30px rgba(74, 93, 48, 0.5),
        0 15px 50px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: controls-entrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes controls-entrance {
    0% { opacity: 0; transform: scale(0.9) translateY(-20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#controls-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #3a4530 0%, #2a3520 100%);
    border-bottom: 2px solid #4a5d30;
    border-radius: 5px 5px 0 0;
}

.controls-help-icon {
    font-size: 22px;
    margin-right: 10px;
}

.controls-help-title {
    flex: 1;
    color: #c3b091;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: 0 0 8px rgba(195, 176, 145, 0.3);
}

#controls-help-close {
    background: transparent;
    border: 2px solid #5a6d40;
    border-radius: 4px;
    color: #a89070;
    font-size: 16px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#controls-help-close:hover {
    background: #5a6d40;
    color: #fff;
}

#controls-help-content {
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
}

.controls-section {
    margin-bottom: 18px;
}

.controls-section:last-child {
    margin-bottom: 0;
}

.controls-section-title {
    color: #6b7c3f;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #3a4530;
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin: 4px 0;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.control-row:hover {
    background: rgba(107, 124, 63, 0.15);
}

.control-row.highlight {
    background: rgba(107, 124, 63, 0.25);
    border: 1px solid rgba(107, 124, 63, 0.4);
}

.control-row.highlight:hover {
    background: rgba(107, 124, 63, 0.35);
}

.control-row kbd {
    display: inline-block;
    background: linear-gradient(180deg, #4a4a3a 0%, #2a2a1a 100%);
    border: 2px solid #5a6d40;
    border-bottom-width: 3px;
    border-radius: 4px;
    padding: 4px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Orbitron', monospace;
    min-width: 50px;
    text-align: center;
    box-shadow: 0 2px 0 #1a1a10;
}

.control-row span {
    color: #a89070;
    font-size: 13px;
    text-align: right;
}

#controls-help-footer {
    padding: 12px 18px;
    background: linear-gradient(180deg, #2a3520 0%, #1a2510 100%);
    border-top: 1px solid #3a4530;
    border-radius: 0 0 5px 5px;
    text-align: center;
}

.hint-text {
    color: #5a6d40;
    font-size: 11px;
}

.hint-text kbd {
    display: inline-block;
    background: #2a2a1a;
    border: 1px solid #4a5d30;
    border-radius: 3px;
    padding: 2px 6px;
    color: #8a9a70;
    font-size: 10px;
    font-family: 'Orbitron', monospace;
}

.map-hint {
    position: absolute;
    top: 320px; /* Görev checklist'inin altında */
    left: 20px;
    background: var(--panel-bg);
    border: 2px solid var(--olive-dark);
    border-radius: 2px;
    padding: 8px 15px;
    color: var(--khaki);
    font-size: var(--ui-font-size-base);
    z-index: 10;
    pointer-events: none;
    animation: hint-pulse 2s infinite ease-in-out;
}

@keyframes hint-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

#activeQuestUI {
    position: absolute;
    top: 120px;
    left: 20px;
    background-color: rgba(50, 40, 20, 0.8);
    border: 1px solid #ffd700;
    border-radius: 5px;
    padding: 8px 15px;
    color: #ffd700;
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700;
    font-size: var(--ui-font-size-base);
    z-index: 10;
    pointer-events: none;
}

/* Modal overlay stilleri - Polish UI bölümünde tanımlandı */
#levelUpScreen { z-index: 1050; }
#discardWeaponScreen { z-index: 1040; }

/* Silah grupları için askeri stiller */
.pause-panel.mermi-manyagi { border-color: #d4a017; }
.pause-panel.mermi-manyagi h3, .pause-panel.mermi-manyagi .weapon-list .weapon-icon { color: #d4a017; text-shadow: none; }

.pause-panel.kundakci { border-color: #ff8040; }
.pause-panel.kundakci h3, .pause-panel.kundakci .weapon-list .weapon-icon { color: #ff8040; text-shadow: none; }

.pause-panel.teknoloji-meraklisi { border-color: #5a8aba; }
.pause-panel.teknoloji-meraklisi h3, .pause-panel.teknoloji-meraklisi .weapon-list .weapon-icon { color: #5a8aba; text-shadow: none; }

.pause-panel.oyuncak-sever { border-color: #8b4a8b; }
.pause-panel.oyuncak-sever h3, .pause-panel.oyuncak-sever .weapon-list .weapon-icon { color: #8b4a8b; text-shadow: none; }

.pause-panel.kesici-ustasi { border-color: #c0392b; }
.pause-panel.kesici-ustasi h3, .pause-panel.kesici-ustasi .weapon-list .weapon-icon { color: #c0392b; text-shadow: none; }

.pause-panel.gizli-fuzyon { border-color: #ccaa00; }
.pause-panel.gizli-fuzyon h3, .pause-panel.gizli-fuzyon .weapon-list .weapon-icon { color: #ccaa00; text-shadow: none; }

.weapon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--ui-font-size-small);
}

.weapon-list li {
    padding: 3px 0;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.weapon-list li, .pause-panel h3[data-achievement-id] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pause-panel h3[data-achievement-id]:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.weapon-list li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.weapon-list .weapon-icon {
    font-size: 1.2em;
    width: 22px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* Meta Upgrade #1: Silah seviye etiketi */
.weapon-level-tag {
    font-size: 0.75em;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Meta Upgrade #33: Başarım ilerleme göstergesi */
.achievement-progress {
    font-size: 0.7em;
    color: #a89070;
    padding: 0 8px 4px;
    text-align: right;
}

/* Meta Upgrade #3: Silah açıklama ipucu (level-up kartında) */
.weapon-desc-hint {
    display: block;
    font-size: 0.7em;
    color: #a89070;
    margin-bottom: 2px;
    line-height: 1.2;
}

.game-over-screen h2 { margin: 0 0 20px 0; font-size: 3em; text-shadow: 0 0 10px currentColor; }
.game-over-screen p { font-size: 1.5em; }

#upgrade-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    overflow: visible;
    padding: 15px 10px 35px 10px;
}
.menu-buttons { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    flex: 1;
    justify-content: flex-end;
    align-items: flex-start; /* Sola yaslamak için */
    order: 1; /* Sola yaslamak için */
}

#discard-weapon-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
#discard-weapon-options .upgrade-button {
    flex-direction: column;
    width: 110px;
    height: 100px;
    padding: 10px;
}
#discard-weapon-options .upgrade-text {
    text-align: center;
}

/* === MENU BUTTON === */
.menu-button {
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.9) 0%, rgba(40, 50, 25, 0.95) 100%);
    color: #ccc;
    border: 2px solid #ccc;
    padding: 15px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.menu-button:hover {
    color: #1a1a1a;
    background-color: #ccc;
    transform: scale(1.05) translateY(-2px);
}

.menu-button:active {
    transform: scale(0.95) translateY(1px);
    transition: all 0.05s ease-out;
}

/* === UPGRADE BUTTON (Kart Stili) === */
.upgrade-button {
    background: linear-gradient(180deg, #4a4a45 0%, #3a3a35 100%);
    border: 2px solid #5a5a55;
    border-radius: 3px;
    padding: 18px 15px;
    width: 140px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    opacity: 0;
    transform: scale(0.9);
    animation: slot-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Shine sweep efekti - clip-path ile sınırlandırılmış */
.upgrade-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 30%,
        rgba(255,255,255,0.2) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position 0.5s ease;
    z-index: 10;
    pointer-events: none;
    border-radius: 3px;
    overflow: hidden;
}

.upgrade-button:hover::before {
    background-position: -100% 0;
}

/* Glow border efekti */
.upgrade-button::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(107, 124, 63, 0.5), transparent);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.upgrade-button:hover::after {
    opacity: 1;
}

/* Hover efektleri - 3D transform */
.upgrade-button:not(.max-level):hover {
    border-color: #6b7c3f;
    background: linear-gradient(180deg, #4a5d28 0%, #3a4a1f 100%);
    transform: translateY(-8px) rotateX(5deg);
    box-shadow:
        0 15px 30px rgba(0,0,0,0.4),
        0 5px 15px rgba(107, 124, 63, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
    opacity: 1;
    animation: none;
}

.upgrade-button:not(.max-level):active {
    transform: translateY(-2px) scale(0.98);
    transition: all 0.1s;
}

@keyframes slot-in {
    0% { opacity: 0; transform: scale(0.7) rotate(-5deg); }
    50% { opacity: 1; }
    60% { transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.upgrade-button.max-level {
    color: #888;
    border-color: #555;
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.6;
}

/* İkon stili */
.upgrade-icon {
    font-size: 36px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
}

.upgrade-button:not(.max-level):hover .upgrade-icon {
    transform: scale(1.2) rotate(-5deg);
    animation: heartbeat 1s ease-in-out infinite;
}

/* Metin stili */
.upgrade-text {
    text-align: center;
}

.upgrade-text strong {
    display: block;
    color: var(--khaki);
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s, text-shadow 0.2s;
}

.upgrade-button:not(.max-level):hover .upgrade-text strong {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.upgrade-text span {
    display: block;
    color: var(--sand);
    font-size: 10px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.upgrade-button:not(.max-level):hover .upgrade-text span {
    opacity: 1;
}

/* === SİLAH GRUPLARI (Askeri Renkler) === */
.upgrade-button.mermi-manyagi { border-color: #d4a017; }
.upgrade-button.mermi-manyagi .upgrade-text strong { color: #d4a017; }
.upgrade-button.mermi-manyagi:not(.max-level):hover {
    background: linear-gradient(180deg, #5a4a20 0%, #4a3a15 100%);
    border-color: #ffd700;
}

.upgrade-button.kundakci { border-color: #ff8040; }
.upgrade-button.kundakci .upgrade-text strong { color: #ff8040; }
.upgrade-button.kundakci:not(.max-level):hover {
    background: linear-gradient(180deg, #5a3020 0%, #4a2515 100%);
    border-color: #ff9060;
}

.upgrade-button.teknoloji-meraklisi { border-color: #5a8aba; }
.upgrade-button.teknoloji-meraklisi .upgrade-text strong { color: #5a8aba; }
.upgrade-button.teknoloji-meraklisi:not(.max-level):hover {
    background: linear-gradient(180deg, #2a3a5a 0%, #1a2a4a 100%);
    border-color: #7aaada;
}

.upgrade-button.oyuncak-sever { border-color: #8b4a8b; }
.upgrade-button.oyuncak-sever .upgrade-text strong { color: #8b4a8b; }
.upgrade-button.oyuncak-sever:not(.max-level):hover {
    background: linear-gradient(180deg, #4a2a4a 0%, #3a1a3a 100%);
    border-color: #ab6aab;
}

.upgrade-button.kesici-ustasi { border-color: #c0392b; }
.upgrade-button.kesici-ustasi .upgrade-text strong { color: #c0392b; }
.upgrade-button.kesici-ustasi:not(.max-level):hover {
    background: linear-gradient(180deg, #5a2020 0%, #4a1515 100%);
    border-color: #e05050;
}

/* === GLOWING ANİMASYONLAR (Askeri Renkler) === */
.upgrade-button.glowing.mermi-manyagi { animation: slot-in 0.5s forwards, glowing-mermi 1.5s ease-in-out infinite; }
.upgrade-button.glowing.kundakci { animation: slot-in 0.5s forwards, glowing-kundakci 1.5s ease-in-out infinite; }
.upgrade-button.glowing.teknoloji-meraklisi { animation: slot-in 0.5s forwards, glowing-teknoloji 1.5s ease-in-out infinite; }
.upgrade-button.glowing.oyuncak-sever { animation: slot-in 0.5s forwards, glowing-oyuncak 1.5s ease-in-out infinite; }
.upgrade-button.glowing.kesici-ustasi { animation: slot-in 0.5s forwards, glowing-kesici 1.5s ease-in-out infinite; }

@keyframes glowing-mermi {
    0%, 100% { box-shadow: 0 0 10px rgba(212, 160, 23, 0.7), 0 0 15px #d4a017; border-color: #d4a017; }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px #ffd700, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-kundakci {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 120, 50, 0.7), 0 0 15px #ff8040; border-color: #ff8040; }
    50% { box-shadow: 0 0 20px rgba(255, 120, 50, 1), 0 0 30px #ff8040, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-teknoloji {
    0%, 100% { box-shadow: 0 0 10px rgba(90, 138, 186, 0.7), 0 0 15px #5a8aba; border-color: #5a8aba; }
    50% { box-shadow: 0 0 20px rgba(90, 138, 186, 1), 0 0 30px #5a8aba, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-oyuncak {
    0%, 100% { box-shadow: 0 0 10px rgba(139, 74, 139, 0.7), 0 0 15px #8b4a8b; border-color: #8b4a8b; }
    50% { box-shadow: 0 0 20px rgba(139, 74, 139, 1), 0 0 30px #8b4a8b, 0 0 10px #fff inset; border-color: #fff; }
}
@keyframes glowing-kesici {
    0%, 100% { box-shadow: 0 0 10px rgba(192, 57, 43, 0.7), 0 0 15px #c0392b; border-color: #c0392b; }
    50% { box-shadow: 0 0 20px rgba(192, 57, 43, 1), 0 0 30px #c0392b, 0 0 10px #fff inset; border-color: #fff; }
}

/* === FINAL CHOICE ANİMASYONU === */
@keyframes pulsing-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.upgrade-button.final-choice .upgrade-icon,
.upgrade-button.final-choice .upgrade-text strong {
    animation: pulsing-scale 1.2s ease-in-out infinite;
}

/* Final choice için ekstra margin (recommended badge için) */
.upgrade-button.final-choice {
    margin-bottom: 20px;
}

/* ÖNERİLEN badge */
.recommended-badge {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
    color: #1a1a14;
    font-size: 9px;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 3px;
    border: 2px solid #ffcc00;
    white-space: nowrap;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(212, 160, 23, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
    z-index: 20;
    animation: recommended-pulse 1.5s ease-in-out infinite;
}

@keyframes recommended-pulse {
    0%, 100% {
        box-shadow: 0 3px 10px rgba(212, 160, 23, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 3px 15px rgba(212, 160, 23, 0.9), 0 0 30px rgba(255, 215, 0, 0.6);
        transform: translateX(-50%) scale(1.08);
    }
}

/* YENİ etiketi */
.new-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb000 100%);
    color: #1a1a14;
    font-size: 9px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
    animation: new-tag-pulse 1.5s ease-in-out infinite;
    z-index: 5;
}

@keyframes new-tag-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4);
        transform: scale(1.05);
    }
}

/* Silah seviye yükseltme badge'i - çok belirgin */
.weapon-level-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #00cc66 0%, #00aa44 50%, #009933 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    border: 2px solid #00ff88;
    box-shadow: 0 2px 10px rgba(0, 255, 100, 0.6), 0 0 20px rgba(0, 255, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: level-badge-pulse 1.2s ease-in-out infinite;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.weapon-level-badge .level-current {
    color: #aaffcc;
    font-size: 12px;
}

.weapon-level-badge .level-arrow {
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: arrow-bounce 0.6s ease-in-out infinite;
}

.weapon-level-badge .level-next {
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 255, 100, 0.6);
}

@keyframes level-badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(0, 255, 100, 0.6), 0 0 20px rgba(0, 255, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 15px rgba(0, 255, 100, 0.9), 0 0 35px rgba(0, 255, 100, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: scale(1.08);
    }
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

.upgrade-text span { font-size: 0.8em; color: #ccc; }
#restartButton { background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%); color: var(--khaki); border: 2px solid var(--olive-light); padding: 15px 30px; font-family: 'Orbitron', sans-serif; font-size: 1.2em; font-weight: bold; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); }
#restartButton:hover { background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-mid) 100%); border-color: var(--khaki); color: var(--sand); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transform: scale(1.05); }

#gameOverStatsContainer {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 30px;
    width: 100%;
}

#scoreboard, #weaponDamageScoreboard {
    flex: 1;
    text-align: left;
    color: var(--khaki);
    background: linear-gradient(180deg, rgba(45, 50, 35, 0.9) 0%, rgba(35, 40, 25, 0.95) 100%);
    border: 2px solid var(--olive-dark);
    border-radius: 4px;
    padding: 15px;
    box-shadow: inset 0 0 10px #000;
}
.game-over-screen.win #scoreboard, .game-over-screen.win #weaponDamageScoreboard { 
    color: #ffd700; 
    border-color: #ffd700;
}
#scoreboard h3, #weaponDamageScoreboard h3 { text-align: center; margin-bottom: 10px; }
#scoreboard ol, #weaponDamageScoreboard ol { padding-left: 0; list-style: none; font-size: 1.1em; }
#scoreboard li, #weaponDamageScoreboard li { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 15px; align-items: center;}
#scoreboard li span:first-child, #weaponDamageScoreboard li span:first-child { flex-grow: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scoreboard small { color: #aaa; font-size: 0.8em; }
.ui-button {
    pointer-events: auto;
    background: var(--metal-scratches), linear-gradient(180deg, var(--metal-mid) 0%, var(--metal-dark) 100%);
    border: 2px solid var(--metal-dark);
    color: var(--khaki);
    font-size: 16px;
    width: 38px;
    height: 38px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

/* Button wear effect */
.ui-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    border-radius: 2px;
}

/* Button press ripple */
.ui-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.ui-button:active::before {
    width: 100px;
    height: 100px;
}

.ui-button:hover {
    background: var(--metal-scratches), linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--olive-light);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4), 0 0 15px rgba(107, 124, 63, 0.4);
}

.ui-button:active {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.05s;
}

#mainMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #252520 0%, #1a1a16 60%, #0f0f0c 100%);
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    z-index: 2000;
    color: var(--khaki);
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
}
#mainMenu h1 {
    font-size: clamp(3em, 10vw, 6em);
    margin: 0;
    letter-spacing: 5px;
    animation: text-flicker 3s infinite alternate;
}
#mainMenu .subtitle {
    font-size: var(--ui-font-size-medium);
    margin: 5px 0 20px 0;
    opacity: 0.8;
}
#startButton {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    color: var(--khaki);
    border: 2px solid var(--olive-light);
    padding: 20px 40px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
#startButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: shine-sweep 3s infinite;
}
#startButton:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-mid) 100%);
    border-color: var(--khaki);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.instructions {
   display: none;
}
.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    text-align: left;
}
.controls-grid p {
    margin: 0;
    font-size: var(--ui-font-size-base);
}
.controls-grid p strong {
    color: #fff;
    min-width: 80px;
    display: inline-block;
}

.main-layout-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    max-width: 1200px;
    height: 100%;
}

/* Üst: Başlık + Slogan */
.menu-title-row {
    text-align: center;
    flex-shrink: 0;
}
.menu-title-row h1 {
    line-height: 1;
}

/* Alt: Silahlar (sol) | Çizgi | Butonlar (orta) | Çizgi | Araçlar (sağ) */
.menu-content-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;
}

/* Sol/Sağ: Kartlar doğrudan menu-content-row içinde */
.menu-content-row > .menu-card {
    margin: 10px 15px;
}

/* Orta: Dikey çizgi seperatör */
.menu-separator {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(107, 124, 63, 0.6) 20%, rgba(107, 124, 63, 0.6) 80%, transparent);
    flex-shrink: 0;
}

/* Orta: Buton grubu */
.menu-buttons-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex: 0 0 auto;
    padding: 10px 20px;
}

/* Göreve Başla wrapper - dikeyde ortalı */
.start-game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

/* Meta butonlar - alta yapışık */
.menu-buttons-column > .meta-button-row {
    margin-top: auto;
}


/* ═══ MENU CARD - Ortak kart stili ═══ */
.menu-card {
    background: linear-gradient(180deg, rgba(38, 48, 28, 0.92) 0%, rgba(28, 36, 18, 0.96) 100%);
    border: 1px solid rgba(107, 124, 63, 0.5);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.menu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px 6px 0 0;
}
.menu-card-header h3 {
    margin: 0;
    font-size: 13px;
    color: var(--olive-light);
    letter-spacing: 2px;
}
.menu-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    flex: 1;
}

/* ═══ İNLİNE ARAÇ GELİŞTİRME ═══ */
.vehicle-upgrade-inline {
    display: none;
    padding: 0 12px 12px;
}
.vehicle-upgrade-inline .upgrade-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 124, 63, 0.5), transparent);
    margin-bottom: 8px;
}
.vehicle-upgrade-inline .selected-vehicle-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 8px;
    font-size: 12px;
}
.vehicle-upgrade-inline .selected-vehicle-header .vehicle-icon {
    font-size: 1.4em;
}
.vehicle-upgrade-inline .selected-vehicle-header .vehicle-name {
    font-size: 11px;
}

/* ═══ SİLAH GRUPLARI ═══ */
.weapons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 10px 12px 12px;
    align-content: start;
}
.weapon-group {
    padding: 6px 8px;
    border: 1px solid var(--metal-dark);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}
.weapon-group h4 {
    font-size: 9px;
    color: var(--olive-light);
    letter-spacing: 0.8px;
    margin: 0 0 5px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.25);
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
}
.weapon-group:hover {
    border-color: var(--olive);
}
/* Silah grubu renkleri */
.weapon-group.mermi-manyagi { border-color: rgba(212, 160, 23, 0.4); }
.weapon-group.mermi-manyagi h4 { color: #d4a017; }
.weapon-group.kundakci { border-color: rgba(255, 128, 64, 0.4); }
.weapon-group.kundakci h4 { color: #ff8040; }
.weapon-group.teknoloji-meraklisi { border-color: rgba(90, 138, 186, 0.4); }
.weapon-group.teknoloji-meraklisi h4 { color: #5a8aba; }
.weapon-group.oyuncak-sever { border-color: rgba(139, 74, 139, 0.4); }
.weapon-group.oyuncak-sever h4 { color: #8b4a8b; }
.weapon-group.kesici-ustasi { border-color: rgba(192, 57, 43, 0.4); }
.weapon-group.kesici-ustasi h4 { color: #c0392b; }
.weapon-group.gizli-fuzyon { border-color: rgba(204, 170, 0, 0.4); }
.weapon-group.gizli-fuzyon h4 { color: #ccaa00; }

/* Silah listesi */
.menu-card .weapon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-card .weapon-list li {
    padding: 2px 2px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: 2px;
}
.menu-card .weapon-list li:hover {
    background-color: rgba(255, 255, 255, 0.06);
}
.menu-card .weapon-list .weapon-icon {
    font-size: 1em;
    width: 18px;
    text-align: center;
}
.menu-card .weapon-level-tag {
    font-size: 0.7em;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 3px;
}
/* Fuzyon grid */
.fusion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
}
.fusion-grid li {
    font-size: 9px !important;
}
/* Locked durumları */
.weapon-group h4.locked { color: #555; }
.menu-card .weapon-list li.locked { color: #444; opacity: 0.6; }
.menu-card .weapon-list li.locked .weapon-icon { filter: grayscale(1); opacity: 0.4; }

/* ═══ GÖREVE BAŞLA BUTONU - En göze batan ═══ */
.start-button {
    background: linear-gradient(180deg, #4a7c23 0%, #2d5a10 100%);
    border: 4px solid #6b9c3f;
    color: #fff;
    padding: 22px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    animation: start-button-glow 1.2s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(107, 156, 63, 0.7), 0 8px 25px rgba(0, 0, 0, 0.5);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

@keyframes start-button-glow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(107, 156, 63, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
        border-color: #6b9c3f;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 50px rgba(107, 156, 63, 1), 0 0 80px rgba(150, 200, 80, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5);
        border-color: #9ccc5f;
        transform: scale(1.02);
    }
}

.start-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: start-shine 2s infinite;
}

@keyframes start-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.start-button:hover {
    animation: none;
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(107, 156, 63, 1), 0 0 100px rgba(150, 200, 80, 0.6), 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: #afd85f;
    background: linear-gradient(180deg, #5a9c33 0%, #3d7a20 100%);
}

.start-button:active {
    transform: scale(0.98);
    box-shadow: 0 0 20px rgba(107, 156, 63, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ═══ KOLAY MOD TOGGLE - Küçük buton ═══ */
.start-mode-toggles {
    display: flex;
    gap: 8px;
}

.easy-mode-toggle {
    background: linear-gradient(180deg, #3a3a35 0%, #2a2a25 100%);
    border: 1px solid #5a5a55;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.7;
    flex: 1;
}

.easy-mode-toggle:hover {
    opacity: 1;
    border-color: #7a7a75;
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.easy-mode-toggle.active {
    background: linear-gradient(180deg, #5a6a35 0%, #4a5a25 100%);
    border-color: #8a9a5f;
    opacity: 1;
    box-shadow: 0 0 20px rgba(138, 154, 95, 0.5);
}

/* ═══ STRES TESTİ BUTONU ═══ */
.stress-test-toggle {
    background: linear-gradient(180deg, #3a2a2a 0%, #2a1a1a 100%);
    border: 1px solid #6a3a3a;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: #cc6666;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.7;
    flex: 1;
}

.stress-test-toggle:hover {
    opacity: 1;
    border-color: #aa5555;
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(204, 102, 102, 0.4);
    color: #ff6666;
}

/* ═══ META YÜKSELTMELER CTA BUTONU ═══ */
.meta-upgrade-cta {
    background: linear-gradient(180deg, rgba(90, 70, 15, 0.95) 0%, rgba(55, 40, 5, 0.98) 100%);
    border: 2px solid #ffd700;
    color: #ffd700;
    padding: 16px 45px;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.2);
    animation: meta-cta-pulse 2.5s ease-in-out infinite;
    width: 100%;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.meta-upgrade-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
    animation: meta-cta-sweep 4s ease-in-out infinite;
}

@keyframes meta-cta-sweep {
    0%, 70% { left: -100%; }
    100% { left: 200%; }
}

@keyframes meta-cta-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), 0 4px 12px rgba(0,0,0,0.5); border-color: #ffd700; }
    50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.45), 0 4px 12px rgba(0,0,0,0.5), 0 0 60px rgba(255, 215, 0, 0.15); border-color: #ffe44d; }
}

.meta-upgrade-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 8px 20px rgba(0,0,0,0.5);
    filter: brightness(1.15);
    animation-play-state: paused;
}

.meta-upgrade-cta:active {
    transform: translateY(1px) scale(0.97);
    transition: all 0.1s;
}

/* Meta buton satırı (madalya göstergesi için wrapper) */
.meta-button-row {
    position: relative;
    display: flex;
    width: 100%;
}

/* Meta buton madalya göstergesi */
.meta-medal-anim {
    right: -12px;
    top: -8px;
}

/* Menü ikincil buton satırı */
.menu-secondary-row {
    display: flex;
    gap: 10px;
    width: 100%;
    position: relative;
}

.menu-secondary-row .badge-btn {
    flex: 1;
    color: #c9a825;
    border-color: #c9a825;
    padding: 12px 20px;
    position: relative;
}

.menu-secondary-row .badge-btn:hover {
    color: #1a1a1a;
    background-color: #c9a825;
}

/* Menü yardımcı buton satırı */
.menu-utility-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.menu-button.utility-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1px;
    opacity: 0.7;
    border-color: #666;
    color: #999;
}

.menu-button.utility-btn:hover {
    opacity: 1;
    color: #ccc;
    background-color: rgba(100,100,100,0.3);
}

.menu-button.danger-btn {
    color: #ff6666;
    border-color: #883333;
}

.menu-button.danger-btn:hover {
    color: #1a1a1a;
    background-color: #ff6666;
    border-color: #ff6666;
}

/* Araç kategori ayırıcıları */
.vehicle-category {
    margin-bottom: 3px;
}
.vehicle-category:last-child {
    margin-bottom: 0;
}

.money-badge {
    background: linear-gradient(180deg, rgba(60, 55, 20, 0.9), rgba(40, 35, 10, 0.95));
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.15);
}

/* Upgrade satırları */
.upgrade-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Eski panel tabs gizle (artık kullanılmıyor) */
.panel-tabs {
    display: none;
    width: 100%;
    margin-bottom: 20px;
}

.panel-tab {
    flex: 1;
    padding: 10px;
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.8) 0%, rgba(40, 50, 25, 0.9) 100%);
    border: 2px solid var(--olive-dark);
    color: var(--khaki);
    font-family: 'Orbitron', sans-serif;
    font-size: var(--ui-font-size-base);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.panel-tab:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 1px solid var(--olive-dark);
}

.panel-tab:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 1px solid var(--olive-dark);
}

.panel-tab:hover:not(.active) {
    background: linear-gradient(180deg, rgba(60, 70, 45, 0.9) 0%, rgba(50, 60, 35, 0.95) 100%);
    border-color: var(--olive-light);
}

.panel-tab.active {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--olive-light);
    color: var(--sand);
    text-shadow: none;
    font-weight: bold;
}

.panel-content {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    justify-content: flex-start;
}

#vehiclesContent {
    overflow-y: hidden;
}

.panel-content.active {
    display: flex;
}

.upgrade-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.upgrade-label {
    font-size: 11px;
    flex: 0 0 auto;
    text-align: left;
    white-space: nowrap;
    min-width: 48px;
}

.upgrade-slots {
    display: flex;
    gap: 4px;
}

.upgrade-slot {
    width: 22px;
    height: 12px;
    border: 1px solid var(--olive-light);
    background-color: rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    border-radius: 2px;
}
.upgrade-slot.purchased {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive-mid) 100%);
    border-color: var(--khaki);
    box-shadow: 0 0 5px rgba(107, 124, 63, 0.5);
}

.upgrade-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    flex: 1;
    justify-content: center;
}

.upgrade-cost {
    font-size: 10px;
    color: #ccc;
    min-height: 1.2em;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.buy-upgrade-button {
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.8) 0%, rgba(40, 50, 25, 0.9) 100%);
    color: var(--khaki);
    border: 1.5px solid var(--olive-light);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.buy-upgrade-button:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--khaki);
    color: var(--sand);
}
.buy-upgrade-button:disabled {
    border-color: #444;
    color: #555;
    cursor: not-allowed;
    opacity: 0.5;
    background: rgba(30, 30, 30, 0.5);
}

/* Upgrade Button Tooltip */
.buy-upgrade-button {
    position: relative;
}
.buy-upgrade-button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 25, 15, 0.95);
    color: var(--sand);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid var(--olive-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    margin-bottom: 6px;
}
.buy-upgrade-button[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Vehicle Selection Styles */
.vehicle-selection-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    margin-top: 4px;
}

.vehicle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px;
    border: 1.5px solid var(--olive-dark);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(50, 60, 35, 0.7) 0%, rgba(40, 50, 25, 0.8) 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 68px;
}

.vehicle-item:not(.locked):not(.selected):hover {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--khaki);
    transform: scale(1.05);
}

.vehicle-item.buyable {
     border-color: var(--olive-light);
     box-shadow: 0 0 8px rgba(107, 124, 63, 0.4);
     color: var(--khaki);
}

.vehicle-item.buyable:hover {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border-color: var(--khaki);
    transform: scale(1.05);
}

.vehicle-item.selected {
    border-color: #ffd700;
    box-shadow: 0 0 15px #ffd700;
    cursor: default;
}

.vehicle-item.selected:hover {
    transform: none; /* Seçili öğenin büyümesini engelle */
}

.vehicle-item.locked:not(.buyable) {
    border-color: #555;
    color: #555;
    cursor: not-allowed;
    opacity: 0.6;
}

.vehicle-item.locked:not(.buyable):hover {
    background-color: rgba(0,0,0,0.5);
    color: #555;
}

.vehicle-icon {
    font-size: 2em;
    line-height: 1;
}

.vehicle-name {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}

.vehicle-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #ffd700;
}

/* Tooltip styles */
.vehicle-tooltip {
    display: none;
    position: absolute;
    background: linear-gradient(180deg, rgba(45, 58, 31, 0.98) 0%, rgba(35, 48, 21, 0.98) 100%);
    border: 2px solid var(--olive-dark);
    border-radius: 4px;
    padding: 15px;
    color: #e0e0e0;
    text-shadow: none;
    z-index: 2010;
    width: 300px;
    pointer-events: none;
    font-size: var(--ui-font-size-small);
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.vehicle-tooltip h4 {
    margin: 0 0 10px 0;
    color: var(--khaki);
    text-shadow: none;
    font-size: var(--ui-font-size-base);
}

.vehicle-tooltip p {
    margin: 0 0 10px 0;
    color: #ccc;
}

.vehicle-tooltip .stats {
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.stat-bar-label {
    width: 60px; /* Sabit genişlik */
    flex-shrink: 0;
    color: #fff;
    font-weight: bold;
}
.stat-bar-wrapper {
    flex-grow: 1;
    display: flex;
    height: 12px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #555;
}
.stat-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--olive-mid), var(--olive-light));
    border-radius: 2px;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
}

.weapon-list li.locked {
    color: #555;
    cursor: default;
}
.pause-panel h3.locked {
    color: #555;
    cursor: default;
}
.pause-panel h3.locked:hover {
    background-color: transparent;
}
.weapon-list li.locked .weapon-icon {
    opacity: 0.4;
}
.weapon-list li.locked:hover {
    background-color: transparent;
}

.weapon-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;
}
.weapon-stats-table th, .weapon-stats-table td {
    border: 1px solid rgba(107, 124, 63, 0.3);
    padding: 4px;
    text-align: left;
}
.weapon-stats-table th {
    background-color: rgba(0, 0, 0, 0.3);
}
.weapon-stats-table tr.current-level {
    background: rgba(107, 124, 63, 0.35);
    color: #fff;
    font-weight: bold;
}
.weapon-stats-table tr.current-level td {
    border-color: rgba(107, 124, 63, 0.6);
}
.weapon-level-badge {
    font-size: 0.7em;
    background: var(--olive);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.weapon-level-badge.inactive {
    background: #555;
    color: #999;
}

@keyframes button-pulse-military {
    0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 15px rgba(107, 124, 63, 0.3); }
    50% { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 25px rgba(107, 124, 63, 0.5); }
}

.difficulty-button {
    background: linear-gradient(180deg, var(--olive-mid) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: var(--khaki);
    padding: 15px 50px;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    animation: button-pulse-military 2s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Shine sweep */
.difficulty-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.4s ease;
}

.difficulty-button:hover::before {
    left: 150%;
}

.difficulty-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 20px rgba(107, 124, 63, 0.4);
    filter: brightness(1.1);
    border-color: #8b9c5f;
    animation-play-state: paused;
}

.difficulty-button:active {
    transform: translateY(1px) scale(0.98);
    transition: all 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.difficulty-button.secondary {
    background: linear-gradient(180deg, #4a4a45 0%, #3a3a35 100%);
    border: 2px solid #5a5a55;
    color: var(--sand);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    animation: none;
    font-size: 14px;
    padding: 12px 35px;
}

.difficulty-button.secondary:hover {
    background: linear-gradient(180deg, #5a5a55 0%, #4a4a45 100%);
    border-color: var(--khaki);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 15px rgba(90, 90, 85, 0.3);
}

#muteButton {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    font-size: 2em;
    z-index: 2001;
}

#lootBoxAnimationContainer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1040;
    pointer-events: none;
}

/* Askeri sandık animasyonu */
@keyframes crate-glow {
    0%, 100% { box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 0 8px rgba(107, 124, 63, 0.4); }
    50% { box-shadow: inset 0 0 15px rgba(0,0,0,0.4), 0 0 15px rgba(107, 124, 63, 0.6), 0 0 25px rgba(107, 124, 63, 0.3); }
}

@keyframes lock-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(107, 124, 63, 0.5); }
    50% { box-shadow: 0 0 15px rgba(107, 124, 63, 0.8), 0 0 25px rgba(195, 176, 145, 0.5); }
}

#lootBoxChest {
    position: relative;
    width: 320px;
    height: 240px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}

#lootBoxChest.visible {
    transform: scale(1);
    opacity: 1;
}

#lootBoxChest .chest-lid,
#lootBoxChest .chest-base {
    position: absolute;
    width: 100%;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px),
                linear-gradient(180deg, #4a5d23 0%, #3a4a1a 50%, #2d3a15 100%);
    border: 4px solid #1a2010;
    animation: crate-glow 2.5s infinite ease-in-out;
    box-sizing: border-box;
}

#lootBoxChest .chest-lid {
    height: 72px;
    top: 0;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid #1a2010;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#lootBoxChest .chest-base {
    height: 168px;
    top: 72px;
    border-radius: 0 0 6px 6px;
}

/* Metal band on lid */
#lootBoxChest .chest-lid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 18px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #4a4a4a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 3px;
}

/* Lock on lid */
#lootBoxChest .chest-lid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #6b7c3f, #3a4a1a);
    border-radius: 50%;
    border: 4px solid #2a3a15;
    animation: lock-glow 1.5s infinite ease-in-out;
}

/* SUPPLY text */
#lootBoxChest .chest-base::before {
    content: 'SUPPLY';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: rgba(195, 176, 145, 0.4);
    letter-spacing: 6px;
}

/* Metal plate on base */
#lootBoxChest .chest-base::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 50px;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 4px;
}

/* Shake animation makes glow faster */
#lootBoxChest.shake .chest-lid,
#lootBoxChest.shake .chest-base {
    animation: crate-glow 0.3s infinite ease-in-out;
}



#lootBoxChest.grow {
    animation: grow-in 0.5s ease-out forwards;
}

#lootBoxChest.shake {
    animation-name: shake-animation;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes grow-in {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shake-animation {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-8px, 0) rotate(-3deg); }
    50% { transform: translate(8px, 0) rotate(3deg); }
    75% { transform: translate(-8px, 0) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* ═══ DAMAGE OVERLAY - Kademeli Hasar Sistemi ═══ */
#damageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* Kırmızı vignette katmanı */
#damage-vignette {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

#damageOverlay[data-stage="1"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(100, 0, 0, 0.12) 65%,
        rgba(80, 0, 0, 0.25) 85%,
        rgba(60, 0, 0, 0.4) 100%
    );
}

#damageOverlay[data-stage="2"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        transparent 30%,
        rgba(120, 0, 0, 0.18) 55%,
        rgba(100, 0, 0, 0.35) 75%,
        rgba(70, 0, 0, 0.55) 100%
    );
    animation: vignette-pulse-soft 2s ease-in-out infinite;
}

#damageOverlay[data-stage="3"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        transparent 20%,
        rgba(140, 0, 0, 0.22) 45%,
        rgba(110, 0, 0, 0.45) 65%,
        rgba(80, 0, 0, 0.7) 100%
    );
    animation: vignette-pulse-med 1.5s ease-in-out infinite;
}

#damageOverlay[data-stage="4"] #damage-vignette {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(80, 0, 0, 0.1) 10%,
        rgba(150, 0, 0, 0.3) 35%,
        rgba(120, 0, 0, 0.55) 55%,
        rgba(90, 0, 0, 0.8) 100%
    );
    animation: vignette-pulse-crit 0.9s ease-in-out infinite;
}

@keyframes vignette-pulse-soft {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
@keyframes vignette-pulse-med {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
@keyframes vignette-pulse-crit {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* SVG katmanı */
#damageOverlay svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    will-change: opacity;
}

/* ─── Çatlak stage'leri - kademeli görünürlük ─── */
.crack-stage, .blood-stage {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Stage 1: Hafif kenar çatlakları */
#damageOverlay[data-stage="1"] .crack-stage-1,
#damageOverlay[data-stage="2"] .crack-stage-1,
#damageOverlay[data-stage="3"] .crack-stage-1,
#damageOverlay[data-stage="4"] .crack-stage-1 {
    opacity: 1;
    animation: crack-shimmer-soft 3s ease-in-out infinite;
}

/* Stage 2: Genişleyen çatlaklar + hafif kan */
#damageOverlay[data-stage="2"] .crack-stage-2,
#damageOverlay[data-stage="3"] .crack-stage-2,
#damageOverlay[data-stage="4"] .crack-stage-2 {
    opacity: 1;
    animation: crack-shimmer-soft 2.5s ease-in-out infinite;
}
#damageOverlay[data-stage="2"] .blood-stage-2,
#damageOverlay[data-stage="3"] .blood-stage-2,
#damageOverlay[data-stage="4"] .blood-stage-2 {
    opacity: 1;
}

/* Stage 3: Ağır çatlaklar + kan */
#damageOverlay[data-stage="3"] .crack-stage-3,
#damageOverlay[data-stage="4"] .crack-stage-3 {
    opacity: 1;
    animation: crack-shimmer-med 2s ease-in-out infinite;
}
#damageOverlay[data-stage="3"] .blood-stage-3,
#damageOverlay[data-stage="4"] .blood-stage-3 {
    opacity: 1;
}

/* Stage 4: Kritik - merkez örümcek ağı + ağır kan */
#damageOverlay[data-stage="4"] .crack-stage-4 {
    opacity: 1;
    animation: crack-shimmer-crit 1.2s ease-in-out infinite;
}
#damageOverlay[data-stage="4"] .blood-stage-4 {
    opacity: 1;
    animation: blood-pulse 1s ease-in-out infinite;
}

/* Kan damla animasyonu */
#damageOverlay[data-stage="4"] .blood-drip-el {
    animation: blood-drip-flow 3s ease-in infinite;
}
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(2) { animation-delay: 0.6s; }
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(3) { animation-delay: 1.2s; }
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(4) { animation-delay: 0.3s; }
#damageOverlay[data-stage="4"] .blood-drip-el:nth-child(5) { animation-delay: 0.9s; }

@keyframes blood-drip-flow {
    0% { transform: translateY(-100%); opacity: 0; }
    15% { opacity: 0.8; }
    85% { opacity: 0.6; }
    100% { transform: translateY(80px); opacity: 0; }
}

/* Çatlak parıltı animasyonları (stage'e göre yoğunluk) */
@keyframes crack-shimmer-soft {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
@keyframes crack-shimmer-med {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes crack-shimmer-crit {
    0%, 100% { opacity: 0.5; }
    40% { opacity: 1; }
    60% { opacity: 0.9; }
}

/* Kan nabız efekti */
@keyframes blood-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Hasar alınca anlık parlama */
#damageOverlay.hit-pulse #damage-vignette {
    animation: damage-hit-flash 0.25s ease-out !important;
}

@keyframes damage-hit-flash {
    0% { background: radial-gradient(ellipse at center, rgba(200,0,0,0.3) 0%, rgba(150,0,0,0.6) 100%); }
    100% { background: inherit; }
}

/* Yeni Uyarı Modalı Stili */
#easyModeConfirmModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 20, 10, 0.95);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 600px;
    z-index: 2020; /* Ana menünün üzerinde olması için */
    pointer-events: auto;
    border: 2px solid #ffd700;
    color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
#easyModeConfirmModal h2 {
    margin: 0 0 20px 0;
    font-size: 2.5em;
    text-shadow: 0 0 10px currentColor;
}
#easyModeConfirmModal p {
    font-size: 1.2em;
    color: #e0e0e0;
    text-shadow: none;
    line-height: 1.6;
    margin-bottom: 30px;
}
#easyModeConfirmModal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}


/* Responsiveness */
@media (max-width: 1024px) {
    #dashboard {
        flex-wrap: wrap;
        justify-content: center;
    }
    #left-panel, #right-panel {
        flex-basis: 45%;
        flex-grow: 1;
    }
    #center-panel {
        flex-basis: 100%;
        order: 3;
    }
}

@media (max-width: 768px) {
    #top-head-band {
        padding: 5px;
    }
    .top-ui {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    #weapon-ui {
        order: 3;
        justify-content: center;
    }
    #dashboard {
        padding: 5px;
        gap: 5px;
        flex-direction: column;
    }
    .panel-section {
        width: 100%;
        justify-content: center;
    }
    #left-panel, #right-panel, #center-panel {
        flex-basis: auto;
    }
    #right-panel {
        justify-content: center;
    }

    #bossBarsWrapper {
        top: 240px; /* Top UI panelinin altına itmek için */
        width: 80%;
    }

    #activeQuestUI {
        top: 200px; /* Adjust for smaller screens */
        left: 10px;
        width: auto;
        text-align: center;
    }
}

/* ================================================================
   POLISH UI - ASKERİ TEMA
   ================================================================ */

:root {
    /* Askeri Tema Renkleri */
    --olive: #6b7c3f;
    --olive-dark: #3a4a1a;
    --olive-light: #8fa04f;
    --khaki: #c3b091;
    --sand: #a89070;
    --metal-dark: #3a3a35;
    --warning-red: #d94a4a;

    /* Juice Renkleri */
    --juice-gold: #ffd700;
    --juice-orange: #ff8c00;
    --juice-green: #4ad94a;
}

/* === JUICE ANİMASYONLARI === */

/* Sparkle Particles */
.sparkle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--juice-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: float-up 0.8s ease-out forwards;
    box-shadow: 0 0 6px var(--juice-gold), 0 0 12px var(--juice-orange);
    z-index: 9999;
}

.sparkle:nth-child(odd) { width: 3px; height: 3px; }
.sparkle:nth-child(3n) { width: 5px; height: 5px; background: var(--juice-orange); }
.sparkle:nth-child(5n) { width: 6px; height: 6px; box-shadow: 0 0 8px #fff, 0 0 16px var(--juice-gold); }

@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
    30% { opacity: 1; }
    100% {
        transform: translateY(var(--float-y, -60px)) translateX(var(--float-x, 0px)) scale(0.3);
        opacity: 0;
    }
}

/* Screen Flash */
#screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
}

#screen-flash.flash-gold {
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: screen-flash-anim 0.3s ease-out;
}

#screen-flash.flash-green {
    background: radial-gradient(ellipse at center, rgba(107, 124, 63, 0.5) 0%, transparent 70%);
    animation: screen-flash-anim 0.25s ease-out;
}

#screen-flash.flash-red {
    background: radial-gradient(ellipse at center, rgba(255, 50, 50, 0.4) 0%, transparent 70%);
    animation: screen-flash-anim 0.2s ease-out;
}

#screen-flash.flash-orange {
    background: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.45) 0%, transparent 70%);
    animation: screen-flash-anim 0.25s ease-out;
}

@keyframes screen-flash-anim {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Confetti */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* === SEVİYE ATLAMA - SLOT MAKİNESİ === */

#levelUpOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#levelUpOverlay.show {
    display: flex;
}

.levelup-popup {
    position: relative;
    background: linear-gradient(180deg, #2a2a25 0%, #1a1a16 100%);
    border: 4px solid var(--metal-dark);
    border-radius: 3px;
    padding: 25px 35px 35px 35px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    animation: popup-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: visible;
}

@keyframes popup-entrance {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateX(-15deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

.levelup-popup h2 {
    color: #d4a017;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(212, 160, 23, 0.5);
}

.levelup-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    padding: 10px;
}

/* Upgrade Card */
.upgrade-card {
    background: linear-gradient(180deg, #4a4a45 0%, #3a3a35 100%);
    border: 2px solid #5a5a55;
    border-radius: 3px;
    padding: 18px 15px;
    width: 140px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    position: relative;
    overflow: visible;
}

.upgrade-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: var(--olive);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 20px rgba(107, 124, 63, 0.3);
}

.upgrade-card .shine-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10;
}

.upgrade-card .shine-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.upgrade-card:hover .shine-container::before {
    left: 200%;
}

.upgrade-card .icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.upgrade-card .name {
    font-size: 11px;
    font-weight: bold;
    color: var(--khaki);
    margin-bottom: 4px;
}

.upgrade-card .desc {
    font-size: 9px;
    color: #888;
}

/* YENİ Tag */
.new-tag {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb000 100%);
    color: #1a1a14;
    font-size: 8px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
    z-index: 20;
    animation: new-tag-pulse 1.5s infinite;
}

@keyframes new-tag-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Glowing Cards */
.upgrade-card.glowing {
    animation: glowing-card 2s infinite;
}

@keyframes glowing-card {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
        border-color: #ffd700;
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.5);
        border-color: #fff;
    }
}

/* Slot Machine Animations */
#upgrade-options.slot-mode .upgrade-button {
    opacity: 0;
    transform: translateY(-200px) scale(0.3);
}

/* Kart ilk oluştuğunda - giriş animasyonu */
#upgrade-options.slot-mode .upgrade-button.slot-entering {
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
    animation: slot-enter 0.3s ease-out forwards;
}

@keyframes slot-enter {
    0% {
        opacity: 0;
        transform: translateY(-100px) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#upgrade-options.slot-mode .upgrade-button.slot-spinning {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: slot-spin 0.15s linear infinite;
}

#upgrade-options.slot-mode .upgrade-button.slot-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: slot-land 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               slot-impact-glow 0.6s ease-out forwards;
}

/* Glowing kartlar slot-revealed olduktan sonra glowing animasyonuna geçsin */
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.mermi-manyagi {
    animation: slot-land 0.4s forwards, glowing-mermi 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.kundakci {
    animation: slot-land 0.4s forwards, glowing-kundakci 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.teknoloji-meraklisi {
    animation: slot-land 0.4s forwards, glowing-teknoloji 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.oyuncak-sever {
    animation: slot-land 0.4s forwards, glowing-oyuncak 1.5s 0.4s ease-in-out infinite;
}
#upgrade-options.slot-mode .upgrade-button.slot-revealed.glowing.kesici-ustasi {
    animation: slot-land 0.4s forwards, glowing-kesici 1.5s 0.4s ease-in-out infinite;
}

/* Final-choice kartları için pulsing ekle */
#upgrade-options.slot-mode .upgrade-button.slot-revealed.final-choice {
    margin-bottom: 24px;
}

@keyframes slot-spin {
    0% { transform: translateY(-120px) scale(0.4) rotateX(0deg); opacity: 0.2; filter: blur(4px); }
    25% { transform: translateY(-40px) scale(0.7) rotateX(90deg); opacity: 0.5; filter: blur(2px); }
    50% { transform: translateY(0) scale(0.9) rotateX(180deg); opacity: 0.7; filter: blur(1px); }
    75% { transform: translateY(40px) scale(0.7) rotateX(270deg); opacity: 0.5; filter: blur(2px); }
    100% { transform: translateY(120px) scale(0.4) rotateX(360deg); opacity: 0.2; filter: blur(4px); }
}

@keyframes slot-land {
    0% { transform: translateY(-60px) scale(0.7) rotateX(25deg); opacity: 0.6; filter: blur(2px) brightness(1.5); }
    20% { transform: translateY(0) scale(1.15) rotateX(-3deg); filter: blur(0) brightness(1.8); }
    35% { transform: translateY(12px) scale(1.08) rotateX(2deg); filter: brightness(1.4); }
    50% { transform: translateY(-6px) scale(0.97); filter: brightness(1.2); }
    65% { transform: translateY(4px) scale(1.03); filter: brightness(1.1); }
    80% { transform: translateY(-2px) scale(0.99); }
    100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; filter: blur(0) brightness(1); }
}

@keyframes slot-impact-glow {
    0% { box-shadow: 0 0 60px rgba(255, 255, 255, 0.9), 0 0 100px rgba(195, 176, 145, 0.8); filter: brightness(1.5); }
    50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 50px rgba(195, 176, 145, 0.4); filter: brightness(1.2); }
    100% { box-shadow: 0 0 15px rgba(195, 176, 145, 0.3), 0 5px 15px rgba(0,0,0,0.4); filter: brightness(1); }
}

/* Slot Tension */
.levelup-container.slot-tension {
    animation: slot-tension-shake 0.08s linear infinite;
}

@keyframes slot-tension-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: translate(-1px, -1px) rotate(-0.3deg); }
    75% { transform: translate(1px, 1px) rotate(0.3deg); }
}

#upgrade-options.slot-mode {
    position: relative;
}

#upgrade-options.slot-mode::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 25px, rgba(255,255,255,0.02) 25px, rgba(255,255,255,0.02) 50px);
    animation: slot-lines 0.3s linear infinite;
    pointer-events: none;
    z-index: 100;
    border-radius: 8px;
}

#upgrade-options.slot-mode::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: linear-gradient(90deg,
        transparent,
        rgba(195, 176, 145, 0.3),
        rgba(107, 124, 63, 0.4),
        rgba(195, 176, 145, 0.3),
        transparent
    ) border-box;
    animation: slot-border-glow 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 99;
}

#upgrade-options.slot-complete::before,
#upgrade-options.slot-complete::after { display: none; }

@keyframes slot-border-glow {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 20px rgba(195, 176, 145, 0.2);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 40px rgba(195, 176, 145, 0.5), 0 0 60px rgba(107, 124, 63, 0.3);
    }
}

@keyframes slot-lines {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* === OYUN BİTTİ === */

.game-over-container {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.98) 0%, rgba(30, 25, 18, 0.98) 100%);
    border: 3px solid var(--olive-dark);
    border-radius: 4px;
    padding: 40px 50px;
    text-align: center;
    max-width: 900px;  /* 600px -> 900px: Modal genişletildi */
    width: 90%;  /* Responsive: ekran genişliğinin %90'ı */
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: gameover-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;  /* hidden -> visible: Taşan içerik görünsün */
    max-height: 90vh;  /* Ekran yüksekliğinin max %90'ı */
    overflow-y: auto;  /* Dikey scroll ekle */
}

.game-over-container::before,
.game-over-container::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--olive);
    opacity: 0.5;
}

.game-over-container::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.game-over-container::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

@keyframes gameover-entrance {
    0% { opacity: 0; transform: scale(0.8) translateY(-30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Scrollbar Styling (Game Over Modal) */
.game-over-container::-webkit-scrollbar {
    width: 8px;
}

.game-over-container::-webkit-scrollbar-track {
    background: rgba(20, 15, 10, 0.5);
    border-radius: 4px;
}

.game-over-container::-webkit-scrollbar-thumb {
    background: var(--olive-dark);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.game-over-container::-webkit-scrollbar-thumb:hover {
    background: var(--olive);
}

.game-over-container h2 {
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin-bottom: 10px;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.8), 0 0 20px rgba(255, 68, 68, 0.5);
    animation: glitch-text 3s infinite;
}

.game-over-container.victory h2 {
    color: #d4a017;
    text-shadow: 0 0 10px rgba(212, 160, 23, 0.8), 0 0 20px rgba(212, 160, 23, 0.5);
    animation: none;
}

@keyframes glitch-text {
    0%, 90%, 100% { transform: translateX(0); filter: none; }
    92% { transform: translateX(-3px); filter: hue-rotate(90deg); }
    94% { transform: translateX(3px); filter: hue-rotate(-90deg); }
    96% { transform: translateX(-2px); }
    98% { transform: translateX(2px); }
}

.new-highscore-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4a017 0%, #ffcc00 50%, #d4a017 100%);
    background-size: 200% 100%;
    color: #1a1a14;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 8px 25px;
    border-radius: 3px;
    margin-bottom: 15px;
    animation: highscore-shine 2s linear infinite, highscore-bounce 0.6s ease-out;
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.6);
}

@keyframes highscore-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes highscore-bounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.gameover-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 kolon yan yana */
    gap: 15px;
    margin: 20px 0;
}

/* Responsive: Küçük ekranlarda 1 kolon */
@media (max-width: 768px) {
    .gameover-stats-grid {
        grid-template-columns: 1fr;  /* Tek kolon */
    }

    .game-over-container {
        max-width: 95%;  /* Mobilde daha geniş */
        padding: 30px 20px;  /* Daha az padding */
    }
}

.battle-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 11px;
    color: #ccc;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.battle-stat-row span:last-child {
    color: var(--khaki);
    font-weight: bold;
}

.gameover-stat-box {
    background: linear-gradient(180deg, rgba(50, 45, 35, 0.9) 0%, rgba(35, 30, 22, 0.95) 100%);
    border: 2px solid var(--metal-dark);
    border-radius: 3px;
    padding: 15px;
    position: relative;
    transition: all 0.3s ease;
}

.gameover-stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--olive), transparent);
    opacity: 0.6;
}

.gameover-stat-box:hover {
    border-color: var(--olive);
    transform: translateY(-2px);
}

.gameover-stat-box h3 {
    font-size: 11px;
    color: var(--olive);
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    padding-bottom: 8px;
}

/* === TAKTİK HARİTA === */

#mapOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(20, 25, 15, 0.98) 0%, rgba(30, 35, 22, 0.98) 100%);
    z-index: 9999; /* Tüm katmanların üstünde — HUD dahil */
}

#mapOverlay.show {
    display: flex;
    flex-direction: column;
}

.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(40, 45, 30, 0.95) 0%, rgba(30, 35, 20, 0.95) 100%);
    border-bottom: 2px solid var(--olive-dark);
}

.map-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--khaki);
    letter-spacing: 3px;
}

.map-close-btn {
    padding: 8px 16px;
    background: linear-gradient(180deg, #5a3a3a 0%, #4a2a2a 100%);
    border: 2px solid #6a4a4a;
    color: #ffaaaa;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
}

.map-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.map-legend, .map-objectives {
    width: 180px;
    background: linear-gradient(180deg, rgba(35, 40, 25, 0.95) 0%, rgba(25, 30, 18, 0.95) 100%);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map-legend {
    border-right: 2px solid var(--olive-dark);
}

.map-objectives {
    border-left: 2px solid var(--olive-dark);
}

.map-legend h3, .map-objectives h3 {
    font-size: 10px;
    color: var(--olive);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
}

.map-view {
    flex: 1;
    position: relative;
    background: #1a1f12;
    border: 3px solid var(--olive-dark);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#tacticalMapCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.map-zone {
    position: absolute;
    border: 2px dashed;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-zone.safe {
    background: rgba(74, 217, 74, 0.1);
    border-color: rgba(74, 217, 74, 0.4);
}

.map-zone.danger {
    background: rgba(217, 74, 74, 0.15);
    border-color: rgba(217, 74, 74, 0.5);
    animation: danger-pulse 2s infinite;
}

@keyframes danger-pulse {
    0%, 100% { background: rgba(217, 74, 74, 0.15); }
    50% { background: rgba(217, 74, 74, 0.25); }
}

.map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.map-marker.player {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #4a90d9 40%, transparent 70%);
    border: 3px solid #4a90d9;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(74, 144, 217, 0.8);
    animation: player-pulse 1.5s infinite;
}

@keyframes player-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(74, 144, 217, 0.8); transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 25px rgba(74, 144, 217, 1); transform: translate(-50%, -50%) scale(1.1); }
}

.map-marker.enemy {
    width: 10px;
    height: 10px;
    background: #d94a4a;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(217, 74, 74, 0.6);
    animation: enemy-blink 1s infinite;
}

@keyframes enemy-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.map-marker.boss {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #9a4ad9 30%, rgba(154, 74, 217, 0.3) 70%);
    border: 2px solid #9a4ad9;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(154, 74, 217, 0.7);
    animation: boss-glow 2s infinite;
}

@keyframes boss-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(154, 74, 217, 0.7); }
    50% { box-shadow: 0 0 30px rgba(154, 74, 217, 1); }
}

.map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(30, 35, 20, 0.95) 0%, rgba(40, 45, 30, 0.95) 100%);
    border-top: 2px solid var(--olive-dark);
}

.map-hint {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 10px;
    color: #888;
}

.map-hint .key {
    background: rgba(107, 124, 63, 0.3);
    color: var(--olive-light);
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: bold;
}

/* === SCANLINES EFEKT === */

.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    z-index: 1;
    opacity: 0.6;
}

/* === OYUN BİTTİ BUTONLARI === */

.gameover-btn {
    padding: 14px 35px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
}

.gameover-btn.primary {
    background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 124, 63, 0.4);
}

.gameover-btn.primary:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    box-shadow: 0 6px 25px rgba(107, 124, 63, 0.6);
    transform: translateY(-2px);
}

.gameover-btn.secondary {
    background: linear-gradient(180deg, #4a4540 0%, #3a3530 100%);
    border: 2px solid #5a5550;
    color: var(--khaki);
}

.gameover-btn.secondary:hover {
    background: linear-gradient(180deg, #5a5550 0%, #4a4540 100%);
    border-color: var(--khaki);
    transform: translateY(-2px);
}

.gameover-btn.prestige {
    background: linear-gradient(180deg, #8b6914 0%, #6b4f10 100%);
    border: 2px solid #ffd700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: prestigePulse 2s ease-in-out infinite;
}

.gameover-btn.prestige:hover {
    background: linear-gradient(180deg, #a07818 0%, #8b6914 100%);
    border-color: #ffe44d;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

@keyframes prestigePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
}

/* === PAUSE MENU === */

.pause-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pause-container {
    background: linear-gradient(180deg, rgba(35, 40, 28, 0.98) 0%, rgba(25, 30, 18, 0.98) 100%);
    border: 3px solid var(--olive-dark);
    border-radius: 4px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: pause-entrance 0.3s ease-out;
}

@keyframes pause-entrance {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.pause-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(45, 50, 35, 0.95) 0%, rgba(35, 40, 25, 0.95) 100%);
    border-bottom: 2px solid var(--olive-dark);
}

.pause-header h2 {
    font-size: 18px;
    color: var(--khaki);
    letter-spacing: 4px;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.pause-stats {
    display: flex;
    gap: 12px;
}

.pause-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #aaa;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid rgba(107, 124, 63, 0.3);
}

.pause-stat .stat-icon {
    font-size: 12px;
}

.pause-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
    padding: 14px 16px;
}

@media (max-width: 800px) {
    .pause-panels {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}

.pause-panel {
    background: linear-gradient(180deg, rgba(50, 55, 40, 0.8) 0%, rgba(40, 45, 30, 0.9) 100%);
    border: 2px solid var(--metal-dark);
    border-radius: 3px;
    padding: 10px;
    transition: all 0.3s ease;
}

.pause-panel:hover {
    border-color: var(--olive);
    transform: translateY(-2px);
}

.pause-panel h3 {
    font-size: 10px;
    color: var(--olive-light);
    letter-spacing: 1px;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.4);
    text-transform: uppercase;
}

/* Alt bar: butonlar + ses ayarları tek satır */
.pause-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 2px solid var(--olive-dark);
    background: linear-gradient(180deg, rgba(30, 35, 22, 0.95) 0%, rgba(25, 30, 18, 0.98) 100%);
    gap: 16px;
}

.pause-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Ses Ayarları — kompakt */
.volume-controls {
    display: flex;
    gap: 14px;
    align-items: center;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.volume-control label {
    font-size: 13px;
    line-height: 1;
    cursor: default;
}

.volume-slider {
    -webkit-appearance: none;
    width: 70px;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    border: 1px solid var(--metal-dark);
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    border-radius: 50%;
    border: 2px solid var(--khaki);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    border-radius: 50%;
    border: 2px solid var(--khaki);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.volume-value {
    font-size: 10px;
    color: #888;
    min-width: 28px;
    text-align: right;
}

/* Toggle Switch */
.toggle-control { gap: 4px; }
.toggle-label { font-size: 9px; color: #aaa; white-space: nowrap; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #444;
    border-radius: 8px;
    transition: 0.2s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 12px; width: 12px;
    left: 2px; bottom: 2px;
    background: #999;
    border-radius: 50%;
    transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--olive); }
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background: var(--khaki);
}

.pause-btn {
    padding: 10px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pause-btn.primary {
    background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 124, 63, 0.4);
}

.pause-btn.primary:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    box-shadow: 0 6px 25px rgba(107, 124, 63, 0.6);
    transform: translateY(-2px);
}

.pause-btn.secondary {
    background: linear-gradient(180deg, #4a4540 0%, #3a3530 100%);
    border: 2px solid #5a5550;
    color: var(--khaki);
}

.pause-btn.secondary:hover {
    background: linear-gradient(180deg, #5a5550 0%, #4a4540 100%);
    border-color: var(--khaki);
    transform: translateY(-2px);
}

/* === ASKERİ SANDIK (MILITARY CHEST) === */

.military-chest {
    position: relative;
    width: 200px;
    height: 150px;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease-out;
}

/* Visible state - sandık belirme animasyonu */
.military-chest.visible {
    transform: scale(1);
    opacity: 1;
}

/* Grow state (eski uyumluluk) */
.military-chest.grow {
    transform: scale(1);
    opacity: 1;
}

.military-chest .chest-lid,
.military-chest .chest-base {
    position: absolute;
    width: 100%;
    background:
        repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px),
        linear-gradient(180deg, #4a5d23 0%, #3a4a1a 50%, #2d3a15 100%);
    border: 4px solid #1a2010;
    box-sizing: border-box;
    animation: crate-glow 2.5s infinite ease-in-out;
}

.military-chest .chest-lid {
    height: 45px;
    top: 0;
    border-radius: 4px 4px 0 0;
    border-bottom: 2px solid #1a2010;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.military-chest .chest-base {
    height: 105px;
    top: 45px;
    border-radius: 0 0 4px 4px;
}

/* Metal bant (kapak üstünde) */
.military-chest .chest-lid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 12px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 50%, #4a4a4a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 2px;
}

/* Kilit dairesi */
.military-chest .chest-lid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, #6b7c3f, #3a4a1a);
    border-radius: 50%;
    border: 3px solid #2a3a15;
    animation: lock-glow 1.5s infinite ease-in-out;
}

/* SUPPLY yazısı */
.military-chest .chest-base::before {
    content: 'SUPPLY';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: rgba(195, 176, 145, 0.4);
    letter-spacing: 4px;
}

/* Metal plaka (alt) */
.military-chest .chest-base::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 35px;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border: 2px solid #2a2a2a;
    border-radius: 3px;
}

/* Perçinler */
.crate-rivet {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #6a6a5a 0%, #4a4a3a 50%, #3a3a2a 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* === SANDIK ANİMASYONLARI === */

/* Shake animasyonu - güçlendirilmiş */
@keyframes shake-animation {
    0%, 100% { transform: scale(1) translateX(0); }
    10% { transform: scale(1) translateX(-8px) rotate(-3deg); }
    20% { transform: scale(1) translateX(8px) rotate(3deg); }
    30% { transform: scale(1) translateX(-8px) rotate(-3deg); }
    40% { transform: scale(1) translateX(8px) rotate(3deg); }
    50% { transform: scale(1) translateX(-6px) rotate(-2deg); }
    60% { transform: scale(1) translateX(6px) rotate(2deg); }
    70% { transform: scale(1) translateX(-4px) rotate(-1deg); }
    80% { transform: scale(1) translateX(4px) rotate(1deg); }
    90% { transform: scale(1) translateX(0); }
}

.military-chest.shake {
    animation: shake-animation 0.1s linear infinite;
}

.military-chest.shake.visible,
.military-chest.shake.grow {
    transform: scale(1);
    opacity: 1;
}

/* Shake sırasında hızlı glow + parlaklık */
.military-chest.shake .chest-lid,
.military-chest.shake .chest-base {
    animation: crate-glow 0.3s infinite ease-in-out, shake-glow 0.1s infinite;
}

/* Shake sırasında parlaklık değişimi */
@keyframes shake-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

/* Crate glow animasyonu */
@keyframes crate-glow {
    0%, 100% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 5px rgba(107, 124, 63, 0.2);
    }
    50% {
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 15px rgba(107, 124, 63, 0.5), 0 0 25px rgba(195, 176, 145, 0.3);
    }
}

/* Lock glow animasyonu */
@keyframes lock-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(107, 124, 63, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(107, 124, 63, 0.8), 0 0 25px rgba(195, 176, 145, 0.5);
    }
}


/* === LOOT BURST === */

.loot-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,
        rgba(255,255,255,0.9) 0%,
        rgba(195, 176, 145, 0.7) 20%,
        rgba(107, 124, 63, 0.5) 45%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.loot-burst.active {
    animation: loot-burst 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Shake sırasında pulse */
.military-chest.shake .loot-burst {
    opacity: 1;
    animation: burst-pulse 0.3s ease-out infinite;
}

@keyframes loot-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes burst-pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* === IŞIK HÜZMELERİ === */

.light-rays {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.15) 10deg,
        transparent 20deg,
        transparent 45deg,
        rgba(255, 215, 0, 0.15) 55deg,
        transparent 65deg,
        transparent 90deg,
        rgba(255, 215, 0, 0.15) 100deg,
        transparent 110deg,
        transparent 135deg,
        rgba(255, 215, 0, 0.15) 145deg,
        transparent 155deg,
        transparent 180deg,
        rgba(255, 215, 0, 0.15) 190deg,
        transparent 200deg,
        transparent 225deg,
        rgba(255, 215, 0, 0.15) 235deg,
        transparent 245deg,
        transparent 270deg,
        rgba(255, 215, 0, 0.15) 280deg,
        transparent 290deg,
        transparent 315deg,
        rgba(255, 215, 0, 0.15) 325deg,
        transparent 335deg,
        transparent 360deg
    );
    opacity: 0;
    pointer-events: none;
}

/* Açılınca ışık hüzmeleri */
.military-chest.open .light-rays {
    animation: light-rays-spin 1.5s ease-out forwards;
}

@keyframes light-rays-spin {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    }
}

/* Lootbox Overlay */
.lootbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1040;
    /* display controlled by JS - starts as none */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lootbox-overlay.show {
    opacity: 1;
}

/* Sandık ortalama - üstten biraz aşağıda */
.lootbox-overlay .military-chest {
    margin-top: -10%;
}

/* === SEVİYE ATLAMA CONTAINER === */

.levelup-container {
    position: relative;
    background:
        var(--metal-scratches),
        var(--panel-bg);
    border: 4px solid var(--metal-dark);
    border-radius: 3px;
    padding: 25px 35px 35px 35px;
    text-align: center;
    max-width: 90%;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.7),
        var(--panel-inset),
        0 0 0 1px rgba(255,255,255,0.05);
    overflow: visible;
    animation: popup-entrance 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Noise overlay */
.levelup-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--noise-texture);
    opacity: 0.04;
    pointer-events: none;
    border-radius: 2px;
}

@keyframes popup-entrance {
    0% {
        opacity: 0;
        transform: scale(0.5) rotateX(-15deg);
    }
    50% {
        transform: scale(1.05) rotateX(3deg);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.levelup-container h2 {
    color: var(--khaki);
    font-size: 22px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-bottom: 2px solid var(--olive-dark);
    padding-bottom: 10px;
    animation: text-glow 2s ease-in-out infinite;
}

@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(195, 176, 145, 0.3); }
    50% { text-shadow: 0 0 20px rgba(195, 176, 145, 0.6), 0 0 30px rgba(255, 215, 0, 0.3); }
}

.levelup-btn {
    padding: 14px 35px;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(180deg, var(--olive) 0%, var(--olive-dark) 100%);
    border: 2px solid var(--olive-light);
    color: #fff;
    box-shadow: 0 4px 15px rgba(107, 124, 63, 0.4);
    margin-top: 20px;
}

.levelup-btn:hover {
    background: linear-gradient(180deg, var(--olive-light) 0%, var(--olive) 100%);
    box-shadow: 0 6px 25px rgba(107, 124, 63, 0.6);
    transform: translateY(-2px);
}

/* === GAME OVER SCREEN EK STİLLER === */

.game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gameover-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.final-score-display {
    font-size: 18px;
    color: var(--khaki);
    margin: 10px 0 20px 0;
    letter-spacing: 2px;
}

/* Madalya ve TL yan yana container */
.rewards-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.medals-earned-display {
    font-size: 18px;
    color: #ffd700;
    margin: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.2));
    border: 2px solid #ffd700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    animation: medal-glow 2s ease-in-out infinite;
    flex: 1;
    min-width: 140px;
    max-width: 200px;
}

.medals-earned-display .medals-icon {
    font-size: 24px;
    animation: medal-spin 3s linear infinite;
}

@keyframes medal-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    }
}

@keyframes medal-spin {
    0%, 90% {
        transform: rotate(0deg);
    }
    95% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.money-earned-display {
    font-size: 18px;
    color: #4caf50;
    margin: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.2));
    border: 2px solid #4caf50;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    flex: 1;
    min-width: 140px;
    max-width: 200px;
}

.money-earned-display .money-icon {
    font-size: 22px;
    font-weight: 900;
    color: #66bb6a;
}

.high-scores-list,
.weapon-damage-list {
    font-size: 12px;
    color: #ccc;
    line-height: 1.8;
}

/* === LOOTBOX AKSİYON BUTONLARI (Ban/Kilitle) === */

/* Kart wrapper - kart + aksiyon butonları */
.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Wrapper içindeki kart eşit yükseklikte olsun */
.card-wrapper .upgrade-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Aksiyon butonları container */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-height: 52px;
    width: 100%;
}

/* Genel aksiyon buton stili */
.card-action-btn {
    background: rgba(40, 40, 50, 0.9);
    border: 1px solid #666;
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.5px;
}

/* Ban butonu */
.card-action-btn.ban-btn {
    background: rgba(120, 25, 25, 0.9);
    border-color: #cc4444;
    color: #ffaaaa;
}

.card-action-btn.ban-btn:hover {
    background: #a02020;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

/* Kilitle butonu */
.card-action-btn.lock-btn {
    background: rgba(25, 70, 120, 0.9);
    border-color: #44aaff;
    color: #aaddff;
}

.card-action-btn.lock-btn:hover {
    background: #1860a0;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(68, 170, 255, 0.5);
}

.card-action-btn .ban-count,
.card-action-btn .lock-count {
    opacity: 0.7;
    font-size: 9px;
}

/* Aksiyon butonu durumları */

/* Meta yükseltme alınmamış - kilitli */
.card-action-btn.locked-action {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

.card-action-btn.locked-action:hover {
    transform: none;
    box-shadow: none;
    background: rgba(60, 60, 70, 0.9);
}

/* Hak kalmamış */
.card-action-btn.exhausted-action {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-action-btn.exhausted-action:hover {
    transform: none;
    box-shadow: none;
}

/* Kullanılmış (bu kartta) */
.card-action-btn.used-action {
    opacity: 0.3;
    pointer-events: none;
}

/* Banlanan kart stili */
.upgrade-button.banned {
    opacity: 0.35 !important;
    border-color: #ff4444 !important;
    pointer-events: none;
}

.upgrade-button.banned::after {
    content: '🚫';
    position: absolute;
    font-size: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}

/* Kilitleme fazında seçilebilir kartlar */
.upgrade-button.lockable {
    border-color: #44aaff !important;
    animation: lock-pulse 1.2s ease-in-out infinite;
}

@keyframes lock-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(68, 170, 255, 0.3); }
    50% { box-shadow: 0 0 15px rgba(68, 170, 255, 0.6); }
}

/* Kilitlenmiş kart stili */
.upgrade-button.locked-card {
    border-color: #44aaff !important;
    box-shadow: 0 0 12px rgba(68, 170, 255, 0.5) !important;
    opacity: 1 !important;
}

.upgrade-button.locked-card::after {
    content: '🔒';
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
}

/* Seçilen kart stili */
.upgrade-button.selected-card {
    border-color: #ffd700 !important;
}

/* === SEVİYE ATLAMA SCREEN === */

.level-up-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Levelup ekranı - aktif silahlar paneli */
#levelup-current-weapons {
    margin-top: 18px;
    text-align: center;
}

.levelup-weapons-label {
    font-size: 10px;
    color: var(--sand, #a89070);
    letter-spacing: 2px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.levelup-weapons-grid {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.levelup-weapons-grid .weapon-slot-box {
    width: 50px;
    height: 50px;
}

.levelup-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.levelup-btn.secondary {
    background: linear-gradient(180deg, #4a4540 0%, #3a3530 100%);
    border: 2px solid #5a5550;
    color: var(--khaki);
}

.levelup-btn.secondary:hover {
    background: linear-gradient(180deg, #5a5550 0%, #4a4540 100%);
    border-color: var(--khaki);
}

/* ================================================================
   UI_TEST'TEN ALINAN GELİŞMİŞ GERİ BİLDİRİM SİSTEMLERİ
   ================================================================ */

/* === JUICE RENK DEĞİŞKENLERİ === */
:root {
    --juice-gold: #ffd700;
    --juice-orange: #ff8c00;
    --juice-green: #00ff88;
    --juice-blue: #00aaff;
    --juice-purple: #aa55ff;
}

/* === GLOBAL JUICE ANİMASYONLARI === */

/* Shine Sweep - Parlama geçişi */
@keyframes shine-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Elastic Bounce */
@keyframes elastic-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Pop In */
@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

/* Juice Shake */
@keyframes juice-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Pulse Glow */
@keyframes pulse-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    50% { filter: brightness(1.2) drop-shadow(0 0 15px var(--juice-gold)); }
}

/* Heartbeat */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/* Juice Class'ları */
.juice-pop {
    animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.juice-shake {
    animation: juice-shake 0.4s ease-out;
}

.juice-pulse {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

/* === HASAR SAYILARI (DAMAGE NUMBERS) === */
/* === KILL FEED === */
/* Kill feed kaldırıldı - combo display sağ üst köşeye taşındı */
#kill-feed {
    display: none !important;
}

#damage-numbers-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.damage-number {
    position: absolute;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255,68,68,0.5);
    animation: damage-pop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 1000;
}

.damage-number.crit {
    font-size: 28px;
    color: var(--juice-gold);
    text-shadow: 0 0 15px var(--juice-gold), 0 0 30px var(--juice-orange);
    animation: crit-damage-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.damage-number.heal {
    color: var(--juice-green);
    text-shadow: 0 0 10px rgba(0,255,100,0.5);
}

.damage-number.xp {
    font-size: 22px;
    font-weight: bold;
    /* Renk orb.color'dan gelecek (custom color support) */
    animation: xp-float-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes xp-float-pop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.3);
    }
    20% {
        transform: translateY(-20px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.9);
    }
}

.damage-number.shield {
    color: var(--juice-blue);
    text-shadow: 0 0 10px rgba(0,170,255,0.5);
}

.damage-number.player {
    font-size: 24px;
    color: #ff3333;
    text-shadow: 0 0 15px rgba(255,50,50,0.8);
    animation: player-damage-pop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes player-damage-pop {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.5);
    }
    20% {
        transform: translateY(-15px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
}

.damage-number.money {
    font-size: 26px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255,215,0,0.9), 0 0 24px rgba(255,170,0,0.6), 0 2px 4px rgba(0,0,0,0.8);
    animation: money-pop 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes money-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3) rotate(-5deg);
        filter: brightness(3);
    }
    10% {
        opacity: 1;
        transform: translateY(-20px) scale(1.5) rotate(3deg);
        filter: brightness(2);
    }
    20% {
        transform: translateY(-28px) scale(1.1) rotate(-1deg);
        filter: brightness(1.2);
    }
    35% {
        transform: translateY(-35px) scale(1.15) rotate(0deg);
        filter: brightness(1.5);
    }
    50% {
        transform: translateY(-42px) scale(1.05);
        filter: brightness(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-65px) scale(0.85);
    }
}

.damage-number.reload {
    font-size: 20px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 0 14px rgba(255,200,0,0.8), 0 0 28px rgba(255,150,0,0.4);
    animation: reload-pulse 2s ease-out forwards;
}

@keyframes reload-pulse {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.5);
        filter: brightness(2);
    }
    8% {
        opacity: 1;
        transform: translateY(-15px) scale(1.3);
        filter: brightness(1.5);
    }
    16% {
        transform: translateY(-20px) scale(1);
        filter: brightness(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-22px) scale(1.08);
        text-shadow: 0 0 20px rgba(255,200,0,1), 0 0 35px rgba(255,150,0,0.6);
    }
    45% {
        transform: translateY(-24px) scale(0.98);
        text-shadow: 0 0 10px rgba(255,200,0,0.6);
    }
    60% {
        opacity: 1;
        transform: translateY(-26px) scale(1.05);
        text-shadow: 0 0 18px rgba(255,200,0,0.9), 0 0 30px rgba(255,150,0,0.5);
    }
    75% {
        transform: translateY(-28px) scale(0.98);
    }
    100% {
        opacity: 0;
        transform: translateY(-35px) scale(0.9);
    }
}

.damage-number.ready {
    font-size: 24px;
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0,255,136,0.9);
    animation: ready-pop 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ready-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translateY(-25px) scale(1.4);
    }
    20% {
        transform: translateY(-30px) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translateY(-35px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
}

.damage-number.streak {
    font-size: 32px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 12px rgba(255,68,68,0.9), 0 0 24px rgba(255,0,0,0.6), 0 2px 4px rgba(0,0,0,0.8);
    animation: streak-pop 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes streak-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3);
    }
    8% {
        opacity: 1;
        transform: translateY(-30px) scale(1.6);
    }
    16% {
        transform: translateY(-35px) scale(1.1);
    }
    60% {
        opacity: 1;
        transform: translateY(-40px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

.damage-number.dodge {
    font-size: 18px;
    font-weight: bold;
    color: #00eeff;
    text-shadow: 0 0 8px rgba(0,238,255,0.8), 0 0 16px rgba(0,150,255,0.5);
    animation: dodge-pop 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dodge-pop {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    15% { opacity: 1; transform: translateY(-15px) scale(1.3); }
    50% { opacity: 1; transform: translateY(-25px) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

@keyframes damage-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translateY(-15px) scale(1.3);
    }
    30% {
        transform: translateY(-20px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

@keyframes crit-damage-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.3) rotate(-10deg);
    }
    15% {
        opacity: 1;
        transform: translateY(-20px) scale(1.5) rotate(5deg);
    }
    25% {
        transform: translateY(-25px) scale(1.2) rotate(-3deg);
    }
    40% {
        transform: translateY(-35px) scale(1.1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.7);
    }
}
/* === XP BAR GELİŞTİRMELERİ === */

/* XP Bar Shimmer Sweep */
#xp-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine-sweep 2s ease-in-out infinite;
    animation-delay: 0.5s;
    z-index: 2;
}

/* XP Bar Pulse on Gain */
#xp-bar.pulse {
    animation: xp-gain-pulse 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes xp-gain-pulse {
    0% { filter: brightness(1); transform: scaleX(1); }
    30% { filter: brightness(1.8); transform: scaleX(1.02); }
    50% { filter: brightness(1.5) drop-shadow(0 0 10px rgba(90, 138, 186, 0.6)); }
    100% { filter: brightness(1); transform: scaleX(1); }
}

/* XP Bar Almost Full Glow */
#xp-bar.almost-full {
    animation: xp-almost-full 1s ease-in-out infinite;
}

@keyframes xp-almost-full {
    0%, 100% {
        filter: brightness(1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
    }
    50% {
        filter: brightness(1.3);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), 0 0 15px rgba(90, 138, 186, 0.6);
    }
}

/* === HEALTH BAR GELİŞTİRMELERİ === */

/* Health Bar Hit Flash */
#health-bar.hit-flash {
    animation: health-bar-hit 0.3s ease-out;
}

@keyframes health-bar-hit {
    0% { filter: brightness(1); }
    50% { filter: brightness(2) saturate(1.5); }
    100% { filter: brightness(1); }
}

/* Health Trail Damage Pulse */
#health-bar-trail.damage-pulse {
    animation: health-trail-pulse 0.4s ease-out;
}

@keyframes health-trail-pulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* Health Container Big Hit Shake */
#health-bar-container.big-hit {
    animation: big-hit-shake 0.3s ease-out;
}

@keyframes big-hit-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* === WEAPON SLOT GELİŞTİRMELERİ KALDIRİLDI (Alt bar weapon-slot-box kullanılıyor) === */

/* === LOW HEALTH HEARTBEAT === */
#health-bar-container.low-health {
    animation: heartbeat 1s ease-in-out infinite;
}

#health-bar-container.low-health #health-bar {
    animation: health-bar-critical 0.8s ease-in-out infinite;
}

/* === DAMAGE OVERLAY HIT PULSE === */
#damageOverlay.pulse #damage-vignette {
    animation: damage-overlay-hit 0.3s ease-out !important;
}

@keyframes damage-overlay-hit {
    0% { filter: brightness(2); }
    50% { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}

/* === META UPGRADES MODAL === */
.meta-upgrades-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.meta-upgrades-container {
    width: 90%;
    max-width: 1400px;
    height: 90%;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(40, 20, 20, 0.95));
    border: 3px solid #ffd700;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.meta-upgrades-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid #ffd700;
}

.meta-upgrades-header h2 {
    color: #ffd700;
    font-size: 32px;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.medals-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #ffd700;
}

.medal-icon {
    font-size: 36px;
    animation: medal-pulse 2s ease-in-out infinite;
}

@keyframes medal-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.close-meta-btn {
    background: rgba(255, 100, 100, 0.3);
    border: 2px solid #ff6666;
    color: #fff;
    font-size: 28px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-meta-btn:hover {
    background: rgba(255, 100, 100, 0.6);
    transform: scale(1.1);
}

.meta-upgrades-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Kategori kutuları */
.meta-category {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #4a9eff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
}

.meta-category-header {
    font-size: 24px;
    color: #4a9eff;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a9eff;
    text-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
}

.meta-upgrades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 15px;
}

/* Upgrade kartları */
.meta-upgrade-card {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.8), rgba(50, 30, 30, 0.8));
    border: 2px solid #666;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
}

.meta-upgrade-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
}

.meta-upgrade-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.meta-upgrade-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: #666;
}

.meta-upgrade-card.max-level {
    border-color: #00ff00;
    background: linear-gradient(135deg, rgba(30, 50, 30, 0.8), rgba(30, 60, 30, 0.8));
}

.meta-upgrade-title {
    font-size: 18px;
    color: #ffd700;
    margin-bottom: 8px;
    font-weight: bold;
}

.meta-upgrade-level {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 10px;
}

.meta-upgrade-description {
    font-size: 13px;
    color: #ddd;
    line-height: 1.4;
    margin-bottom: 12px;
    min-height: 60px;
    white-space: pre-line;
}

.meta-upgrade-progress {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.meta-upgrade-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff, #ffd700);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.meta-upgrade-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meta-upgrade-cost {
    font-size: 16px;
    color: #ffd700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-upgrade-buy-btn {
    background: linear-gradient(135deg, #4a9eff, #2a7eff);
    border: 2px solid #4a9eff;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.meta-upgrade-buy-btn:hover {
    background: linear-gradient(135deg, #6ab9ff, #4a9eff);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.5);
}

.meta-upgrade-buy-btn:disabled {
    background: #444;
    border-color: #666;
    color: #888;
    cursor: not-allowed;
    transform: none;
}

.meta-upgrade-buy-btn.max-level {
    background: #00aa00;
    border-color: #00ff00;
}

.prereq-warning {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 100, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

/* Scrollbar styling */
.meta-upgrades-content::-webkit-scrollbar {
    width: 12px;
}

.meta-upgrades-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.meta-upgrades-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4a9eff, #ffd700);
    border-radius: 6px;
}

.meta-upgrades-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6ab9ff, #ffe44a);
}

/* ================================================================
   BADGE (ROZET) SİSTEMİ
   ================================================================ */

/* Badge Overlay */
.badge-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

.badge-overlay.show {
    display: flex;
    animation: badge-fade-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-fade-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Badge Modal */
.badge-modal {
    background: linear-gradient(180deg, #2a2a1a 0%, #1a1a10 100%);
    border: 3px solid #c9a825;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
    max-width: 420px;
    box-shadow:
        0 0 30px rgba(201, 168, 37, 0.4),
        0 0 60px rgba(201, 168, 37, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Badge Shine Effect */
.badge-modal::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 215, 0, 0.1),
        transparent,
        rgba(255, 215, 0, 0.1),
        transparent
    );
    animation: badge-rotate 4s linear infinite;
    pointer-events: none;
}

@keyframes badge-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Badge Header */
.badge-header {
    margin-bottom: 20px;
}

.badge-ribbon {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a10;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
}

/* Badge Content */
.badge-content {
    position: relative;
    z-index: 1;
}

.badge-icon {
    display: block;
    font-size: 64px;
    margin: 20px 0;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
    animation: badge-icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badge-icon-bounce {
    0% { transform: scale(0) rotate(-20deg); }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.badge-name {
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    margin: 15px 0 10px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
}

.badge-category {
    display: inline-block;
    background: rgba(74, 93, 35, 0.6);
    color: #c3b091;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.badge-desc {
    color: #d4c4a8;
    font-size: 16px;
    margin: 15px 0;
    line-height: 1.5;
}

/* Badge Difficulty */
.badge-difficulty {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.badge-difficulty.kolay {
    background: linear-gradient(135deg, #4a7c23, #6b8e23);
    color: #e8f5e9;
    border: 1px solid #6b8e23;
}

.badge-difficulty.orta {
    background: linear-gradient(135deg, #1565c0, #42a5f5);
    color: #e3f2fd;
    border: 1px solid #42a5f5;
}

.badge-difficulty.zor {
    background: linear-gradient(135deg, #b8600f, #ff8c00);
    color: #fff3e0;
    border: 1px solid #ff8c00;
}

.badge-difficulty.epik {
    background: linear-gradient(135deg, #7b1fa2, #ba68c8);
    color: #f3e5f5;
    border: 1px solid #ba68c8;
    animation: epik-glow 1.5s ease-in-out infinite;
}

@keyframes epik-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(186, 104, 200, 0.5); }
    50% { box-shadow: 0 0 20px rgba(186, 104, 200, 0.8), 0 0 30px rgba(186, 104, 200, 0.4); }
}

.badge-difficulty.efsanevi {
    background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);
    color: #fff8e1;
    border: 1px solid #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
    animation: efsanevi-glow 1.5s ease-in-out infinite;
}

@keyframes efsanevi-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 24px rgba(255, 215, 0, 1), 0 0 36px rgba(255, 215, 0, 0.5); }
}

/* Badge Reward (Madalya Bonusu) */
.badge-reward {
    display: inline-block;
    background: linear-gradient(135deg, #1a5a2a, #2d8a45);
    color: #ffd700;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 15px;
    border: 2px solid #3fa855;
    box-shadow: 0 0 15px rgba(61, 168, 85, 0.5);
    letter-spacing: 1px;
    animation: badge-reward-shine 2s ease-in-out infinite;
}

@keyframes badge-reward-shine {
    0%, 100% {
        box-shadow: 0 0 15px rgba(61, 168, 85, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(61, 168, 85, 0.8), 0 0 40px rgba(255, 215, 0, 0.3);
        transform: scale(1.05);
    }
}

/* Badge OK Button */
.badge-ok-btn {
    margin-top: 25px;
    padding: 12px 40px;
    background: linear-gradient(180deg, #4a5d23 0%, #3a4a1a 100%);
    border: 2px solid #6b7c3f;
    border-radius: 6px;
    color: #c3b091;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.badge-ok-btn:hover {
    background: linear-gradient(180deg, #5a6d33 0%, #4a5a2a 100%);
    border-color: #8b9c5f;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.5);
}

.badge-ok-btn:active {
    transform: scale(0.98);
}

/* Badge List (Ana Menü için) */
.badges-panel {
    background: var(--panel-bg);
    border: 2px solid var(--panel-border);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.badges-panel h3 {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 2px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
}

.badge-slot {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #3a3a3a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.2s ease;
    position: relative;
}

.badge-slot.unlocked {
    border-color: #c9a825;
    background: rgba(201, 168, 37, 0.1);
}

.badge-slot.unlocked:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(201, 168, 37, 0.4);
}

.badge-slot.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.badge-slot.locked::after {
    content: '🔒';
    font-size: 16px;
    position: absolute;
    bottom: -5px;
    right: -5px;
}

/* Badge Count Display */
.badge-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    font-size: 14px;
    color: #c3b091;
}

.badge-count-number {
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
}

/* Badge Tooltip */
.badge-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 16, 0.95);
    border: 2px solid #c9a825;
    border-radius: 6px;
    padding: 10px 15px;
    min-width: 180px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.badge-slot:hover .badge-tooltip {
    opacity: 1;
}

.badge-tooltip-name {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.badge-tooltip-desc {
    color: #d4c4a8;
    font-size: 12px;
    line-height: 1.4;
}

/* --- BADGE KOLEKSİYONU MODAL --- */
.badge-collection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 2000;
}

.badge-collection-container {
    width: 92%;
    max-width: 1200px;
    height: 90%;
    background: linear-gradient(180deg, rgba(30, 28, 18, 0.97), rgba(18, 16, 10, 0.97));
    border: 3px solid #c9a825;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(201, 168, 37, 0.3);
}

.badge-collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 2px solid #c9a825;
    background: rgba(0, 0, 0, 0.3);
}

.badge-collection-header h2 {
    color: #ffd700;
    font-size: 28px;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    letter-spacing: 2px;
}

.badge-collection-count {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    color: #ffd700;
    padding: 8px 18px;
    background: rgba(201, 168, 37, 0.1);
    border: 2px solid #c9a825;
    border-radius: 8px;
}

.badge-collection-icon {
    font-size: 28px;
}

.badge-collection-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.badge-collection-content::-webkit-scrollbar {
    width: 10px;
}

.badge-collection-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.badge-collection-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #c9a825, #8a7518);
    border-radius: 5px;
}

/* Kategori bölümleri */
.badge-cat-section {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(201, 168, 37, 0.3);
    border-radius: 10px;
    padding: 18px;
}

.badge-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201, 168, 37, 0.2);
}

.badge-cat-title {
    font-size: 20px;
    color: #c9a825;
    font-weight: bold;
    letter-spacing: 1px;
}

.badge-cat-progress {
    font-size: 14px;
    color: #8a7e5a;
}

.badge-cat-progress .done {
    color: #ffd700;
    font-weight: bold;
}

/* Badge kartları grid */
.badge-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* Tek badge kartı */
.badge-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 2px solid #444;
    background: linear-gradient(135deg, rgba(40, 38, 28, 0.8), rgba(30, 28, 18, 0.8));
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.badge-card.unlocked {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(60, 52, 15, 0.95), rgba(45, 38, 10, 0.95));
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}

.badge-card.unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.35);
    border-color: #ffe44d;
}

.badge-card.revealed {
    opacity: 0.7;
    border-color: #555;
}

.badge-card.revealed:hover {
    opacity: 0.85;
    border-color: #777;
}

.badge-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
}

/* Badge ikonu */
.badge-card-icon {
    font-size: 36px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(201, 168, 37, 0.3);
}

.badge-card.revealed .badge-card-icon {
    border-color: rgba(100, 100, 100, 0.3);
}

.badge-card.locked .badge-card-icon {
    font-size: 20px;
}

/* Badge bilgileri */
.badge-card-info {
    flex: 1;
    min-width: 0;
}

.badge-card-name {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-card.revealed .badge-card-name {
    color: #ccc;
}

.badge-card.locked .badge-card-name {
    color: #888;
}

.badge-card-desc {
    font-size: 12px;
    color: #aaa;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}

/* Zorluk etiketi */
.badge-card-diff {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    flex-shrink: 0;
    text-transform: uppercase;
}

.badge-card-diff.kolay {
    background: rgba(74, 124, 35, 0.6);
    color: #a5d66f;
    border: 1px solid rgba(107, 142, 35, 0.5);
}

.badge-card-diff.orta {
    background: rgba(21, 101, 192, 0.5);
    color: #7ec8f5;
    border: 1px solid rgba(66, 165, 245, 0.5);
}

.badge-card-diff.zor {
    background: rgba(184, 96, 15, 0.5);
    color: #ffb74d;
    border: 1px solid rgba(255, 140, 0, 0.5);
}

.badge-card-diff.epik {
    background: rgba(123, 31, 162, 0.5);
    color: #ce93d8;
    border: 1px solid rgba(186, 104, 200, 0.5);
}

.badge-card-diff.efsanevi {
    background: rgba(184, 134, 11, 0.5);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

/* Kilit ikonu overlay - kilitli ve keşfedilmiş */
.badge-card.locked .badge-card-icon::after,
.badge-card.revealed .badge-card-icon::after {
    content: '🔒';
    position: absolute;
    font-size: 14px;
}

/* Açılmış badge check */
.badge-card.unlocked::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 14px;
    color: #00cc44;
    font-weight: bold;
}

/* Toplanmamış madalya - açılmış ama madalyası toplanmamış rozet */
.badge-card.unclaimed {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(80, 65, 10, 0.95), rgba(55, 45, 8, 0.95));
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.05);
    animation: unclaimed-pulse 2s ease-in-out infinite;
    cursor: pointer;
}

.badge-card.unclaimed:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5), 0 0 25px rgba(255, 170, 0, 0.3);
    border-color: #ffe44d;
}

@keyframes unclaimed-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.2), inset 0 0 15px rgba(255, 215, 0, 0.03);
    }
    50% {
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.45), inset 0 0 25px rgba(255, 215, 0, 0.08);
    }
}

/* Unclaimed badge'de madalya toplama göstergesi */
.badge-claim-indicator {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    animation: claim-indicator-glow 1.5s ease-in-out infinite;
}

@keyframes claim-indicator-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.4); }
    50% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); }
}

/* Toplama flash animasyonu */
.badge-claim-indicator.claimed-flash {
    animation: claimed-pop 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.5);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 200, 100, 0.15));
}

@keyframes claimed-pop {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.5); opacity: 1; filter: brightness(2); }
    100% { transform: scale(0.5) translateY(-15px); opacity: 0; }
}

/* Just-claimed geçiş animasyonu */
.badge-card.just-claimed {
    animation: just-claimed-flash 0.6s ease-out;
}

@keyframes just-claimed-flash {
    0% { filter: brightness(2); transform: scale(1.05); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* Unclaimed badge sayaç - header'daki bildirim */
.unclaimed-badge-count {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: bold;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    animation: unclaimed-pulse 2s ease-in-out infinite;
}

/* Ana menü rozet butonundaki madalya animasyonu */
.badge-medal-anim {
    position: absolute;
    right: -8px;
    top: -12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(30, 20, 0, 0.85);
    border: 1px solid #ffd700;
    border-radius: 12px;
    padding: 2px 8px;
    z-index: 1;
    pointer-events: none;
}

.badge-medal-anim .medal-icon-bounce {
    display: inline-block;
    font-size: 18px;
    animation: medal-float 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

@keyframes medal-float {
    0%, 100% {
        transform: translateY(0) rotate(-5deg) scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
    25% {
        transform: translateY(-4px) rotate(5deg) scale(1.15);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1));
    }
    50% {
        transform: translateY(-1px) rotate(-3deg) scale(1.05);
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
    }
    75% {
        transform: translateY(-5px) rotate(4deg) scale(1.2);
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1));
    }
}

.badge-medal-anim .medal-count {
    font-size: 13px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    animation: medal-count-pulse 2s ease-in-out infinite;
}

@keyframes medal-count-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 215, 0, 0.9); }
}

/* Butonun kendisine de hafif glow */
.menu-secondary-row .badge-btn.has-unclaimed {
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    animation: btn-unclaimed-glow 3s ease-in-out infinite;
}

@keyframes btn-unclaimed-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.35); }
}

/* Rozet modal'daki toplama ipucu */
.badge-reward.unclaimed-hint {
    color: #ffd700;
    font-size: 13px;
    animation: claim-indicator-glow 1.5s ease-in-out infinite;
}

/* === COMBO DISPLAY === */
/* ============================================
   COMBO DISPLAY - Sağ Üst Köşe, Diagonal Juice
   ============================================ */
.combo-display {
    position: fixed;
    top: 55px;
    right: 10px;
    transform: rotate(-12deg) scale(1);
    transform-origin: top right;
    font-family: 'Orbitron', sans-serif;
    z-index: 1001;
    pointer-events: none;
    padding: 8px 28px 12px 22px;
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.12) 0%, rgba(255, 120, 0, 0.2) 100%);
    border-left: 4px solid #ffd700;
    border-bottom: 2px solid rgba(255, 200, 0, 0.2);
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    text-align: center;
    min-width: 110px;
    backdrop-filter: blur(4px);
}

.combo-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.25), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
    transition: all 0.3s ease;
}

.combo-inner {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}

#combo-count {
    font-size: 48px;
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px #ffd700,
        0 0 25px #ff8800,
        0 0 50px rgba(255, 136, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.9);
    line-height: 1;
    letter-spacing: -2px;
    transition: font-size 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.combo-label {
    font-size: 14px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 0 8px #ff8800, 0 1px 3px rgba(0,0,0,0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.combo-bonus {
    font-size: 11px;
    color: #aaffaa;
    text-shadow: 0 0 6px rgba(100, 255, 100, 0.5);
    margin-top: 2px;
    letter-spacing: 1px;
    min-height: 14px;
}

/* Combo açılış animasyonu - SLAM efekti */
.combo-display.active {
    display: block !important;
}

.combo-display.combo-slam {
    animation: comboSlam 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes comboSlam {
    0% {
        transform: rotate(-18deg) scale(2.2);
        filter: brightness(3) saturate(2);
    }
    40% {
        transform: rotate(-8deg) scale(0.85);
    }
    70% {
        transform: rotate(-14deg) scale(1.1);
    }
    100% {
        transform: rotate(-12deg) scale(1.0);
        filter: brightness(1) saturate(1);
    }
}

/* Milestone büyük slam */
.combo-display.combo-mega-slam {
    animation: comboMegaSlam 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes comboMegaSlam {
    0% {
        transform: rotate(-25deg) scale(3.0);
        filter: brightness(5) saturate(3);
    }
    30% {
        transform: rotate(-5deg) scale(0.7);
    }
    50% {
        transform: rotate(-16deg) scale(1.3);
        filter: brightness(2);
    }
    75% {
        transform: rotate(-10deg) scale(0.95);
    }
    100% {
        transform: rotate(-12deg) scale(1.0);
        filter: brightness(1) saturate(1);
    }
}

/* Timer bar */
.combo-timer-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    margin-top: 6px;
    overflow: hidden;
}

.combo-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff2200, #ffd700);
    border-radius: 1px;
    transition: width 0.05s linear;
    box-shadow: 0 0 8px #ffd700, 0 0 3px #ff4400;
}

/* Timer acil durum yanıp sönmesi */
@keyframes comboTimerUrgent {
    from { opacity: 1; background: #ff2200; box-shadow: 0 0 12px #ff0000; }
    to { opacity: 0.4; background: #ff6600; box-shadow: 0 0 4px #ff4400; }
}

/* ============================
   COMBO TİER SİSTEMİ
   ============================ */

/* Tier: HOT (10-19 kill) - Turuncu ateş */
.combo-display[data-tier="hot"] {
    border-left-color: #ff6600;
    background: linear-gradient(135deg, rgba(255, 100, 0, 0.2) 0%, rgba(255, 50, 0, 0.3) 100%);
}
.combo-display[data-tier="hot"] #combo-count {
    color: #ff8800;
    text-shadow: 0 0 15px #ff6600, 0 0 35px #ff4400, 0 0 60px rgba(255, 50, 0, 0.5), 0 2px 6px rgba(0,0,0,0.9);
}
.combo-display[data-tier="hot"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 100, 0, 0.35), transparent 70%);
}
.combo-display[data-tier="hot"] .combo-label {
    color: #ff9944;
}

/* Tier: FIRE (20-29 kill) - Kırmızı alev */
.combo-display[data-tier="fire"] {
    border-left-color: #ff2200;
    background: linear-gradient(135deg, rgba(255, 50, 0, 0.25) 0%, rgba(200, 0, 0, 0.35) 100%);
    animation: comboFirePulse 0.6s ease-in-out infinite alternate;
}
.combo-display[data-tier="fire"] #combo-count {
    color: #ff4400;
    text-shadow: 0 0 20px #ff2200, 0 0 40px #ff0000, 0 0 70px rgba(255, 0, 0, 0.6), 0 2px 6px rgba(0,0,0,0.9);
}
.combo-display[data-tier="fire"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 30, 0, 0.5), transparent 70%);
    filter: blur(25px);
}
.combo-display[data-tier="fire"] .combo-label {
    color: #ff6644;
}

@keyframes comboFirePulse {
    from { box-shadow: 0 0 20px rgba(255, 50, 0, 0.3), inset 0 0 15px rgba(255, 50, 0, 0.1); }
    to { box-shadow: 0 0 45px rgba(255, 50, 0, 0.6), 0 0 90px rgba(255, 0, 0, 0.15), inset 0 0 25px rgba(255, 50, 0, 0.15); }
}

/* Tier: ULTRA (30-49 kill) - Mor enerji */
.combo-display[data-tier="ultra"] {
    border-left-color: #cc00ff;
    background: linear-gradient(135deg, rgba(200, 0, 255, 0.25) 0%, rgba(150, 0, 200, 0.35) 100%);
    animation: comboUltraPulse 0.45s ease-in-out infinite alternate;
}
.combo-display[data-tier="ultra"] #combo-count {
    color: #dd44ff;
    text-shadow: 0 0 20px #cc00ff, 0 0 40px #8800cc, 0 0 70px rgba(200, 0, 255, 0.6), 0 2px 6px rgba(0,0,0,0.9);
}
.combo-display[data-tier="ultra"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(180, 0, 255, 0.5), transparent 70%);
    filter: blur(30px);
}
.combo-display[data-tier="ultra"] .combo-label {
    color: #cc88ff;
}

@keyframes comboUltraPulse {
    from { box-shadow: 0 0 25px rgba(200, 0, 255, 0.4), inset 0 0 15px rgba(180, 0, 255, 0.1); }
    to { box-shadow: 0 0 55px rgba(200, 0, 255, 0.7), 0 0 110px rgba(150, 0, 200, 0.2), inset 0 0 30px rgba(180, 0, 255, 0.15); }
}

/* Tier: LEGENDARY (50+ kill) - Gökkuşağı */
.combo-display[data-tier="legendary"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 200, 0, 0.2) 33%, rgba(255, 0, 100, 0.2) 66%, rgba(0, 200, 255, 0.15) 100%);
    animation: comboLegendaryPulse 0.35s ease-in-out infinite alternate, comboRainbowBorder 2s linear infinite;
    border-left-width: 5px;
}
.combo-display[data-tier="legendary"] #combo-count {
    animation: comboRainbowText 1.5s linear infinite;
    font-weight: 900;
}
.combo-display[data-tier="legendary"] .combo-glow {
    background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.6), rgba(255, 0, 150, 0.3) 50%, transparent 70%);
    filter: blur(35px);
    animation: comboGlowRotate 3s linear infinite;
}
.combo-display[data-tier="legendary"] .combo-label {
    animation: comboRainbowLabel 2s linear infinite;
}

@keyframes comboLegendaryPulse {
    from { box-shadow: 0 0 30px rgba(255, 200, 0, 0.5), inset 0 0 20px rgba(255, 150, 0, 0.1); }
    to { box-shadow: 0 0 70px rgba(255, 100, 0, 0.8), 0 0 140px rgba(255, 0, 100, 0.2), inset 0 0 40px rgba(255, 200, 0, 0.15); }
}

@keyframes comboRainbowBorder {
    0% { border-left-color: #ff0000; border-bottom-color: rgba(255, 0, 0, 0.3); }
    16% { border-left-color: #ff8800; border-bottom-color: rgba(255, 136, 0, 0.3); }
    33% { border-left-color: #ffff00; border-bottom-color: rgba(255, 255, 0, 0.3); }
    50% { border-left-color: #00ff88; border-bottom-color: rgba(0, 255, 136, 0.3); }
    66% { border-left-color: #0088ff; border-bottom-color: rgba(0, 136, 255, 0.3); }
    83% { border-left-color: #cc00ff; border-bottom-color: rgba(200, 0, 255, 0.3); }
    100% { border-left-color: #ff0000; border-bottom-color: rgba(255, 0, 0, 0.3); }
}

@keyframes comboRainbowText {
    0% { color: #ff4444; text-shadow: 0 0 25px #ff0000, 0 0 50px #ff0000, 0 2px 6px rgba(0,0,0,0.9); }
    25% { color: #ffaa00; text-shadow: 0 0 25px #ff8800, 0 0 50px #ff8800, 0 2px 6px rgba(0,0,0,0.9); }
    50% { color: #44ff88; text-shadow: 0 0 25px #00ff66, 0 0 50px #00ff66, 0 2px 6px rgba(0,0,0,0.9); }
    75% { color: #4488ff; text-shadow: 0 0 25px #0066ff, 0 0 50px #0066ff, 0 2px 6px rgba(0,0,0,0.9); }
    100% { color: #ff4444; text-shadow: 0 0 25px #ff0000, 0 0 50px #ff0000, 0 2px 6px rgba(0,0,0,0.9); }
}

@keyframes comboRainbowLabel {
    0% { color: #ff8888; }
    25% { color: #ffcc66; }
    50% { color: #88ffaa; }
    75% { color: #88aaff; }
    100% { color: #ff8888; }
}

@keyframes comboGlowRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Combo sarsıntı efekti (JS ile tetiklenir) */
.combo-display.combo-shake {
    animation: comboShake 0.15s ease-out;
}
@keyframes comboShake {
    0% { transform: rotate(-12deg) scale(1) translate(0, 0); }
    25% { transform: rotate(-14deg) scale(1.02) translate(-3px, 2px); }
    50% { transform: rotate(-10deg) scale(1.04) translate(3px, -2px); }
    75% { transform: rotate(-13deg) scale(1.01) translate(-2px, 1px); }
    100% { transform: rotate(-12deg) scale(1) translate(0, 0); }
}
/* ================================================
   ASKERİ TEMA - KONTROLLER VE SIFIRLA MODALLERİ
   ================================================ */

/* Military Modal Container */
.military-modal {
    background: linear-gradient(180deg, #1a1f14 0%, #0f140a 100%);
    border: 3px solid #4a5d23;
    border-radius: 2px;
    max-width: 700px;
    width: 90%;
    margin: auto;
    position: relative;
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(107, 124, 63, 0.3);
    animation: military-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.military-modal.danger {
    border-color: #8b2020;
    max-width: 650px;
    margin: auto;
}

@keyframes military-entrance {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Military Modal Header */
.military-modal-header {
    background: linear-gradient(180deg, #2d3820 0%, #232b18 100%);
    border-bottom: 2px solid #4a5d23;
    padding: 18px 25px;
    position: relative;
    overflow: hidden;
}

.military-modal-header.danger {
    background: linear-gradient(180deg, #3d1a1a 0%, #2b1212 100%);
    border-bottom: 2px solid #8b2020;
}

.military-modal-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 6px;
    color: #c3b091;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.military-modal-header.danger h2 {
    color: #ff8888;
}

/* Header Decorations */
.header-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        #4a5d23 0px,
        #4a5d23 20px,
        #2d3820 20px,
        #2d3820 40px
    );
}

.header-stripe.danger {
    background: repeating-linear-gradient(
        45deg,
        #8b2020 0px,
        #8b2020 15px,
        #ffdd00 15px,
        #ffdd00 30px
    );
    height: 4px;
}

.header-corner {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid #6b7c3f;
}

.header-corner.top-left {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.header-corner.top-right {
    top: 8px;
    right: 8px;
    border-left: none;
    border-bottom: none;
}

.danger-stripes {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        135deg,
        #8b2020 0px,
        #8b2020 10px,
        transparent 10px,
        transparent 20px
    );
    opacity: 0.4;
}

/* Military Modal Body */
.military-modal-body {
    padding: 25px 30px;
    background: rgba(20, 25, 15, 0.4);
}

/* Controls Sections */
.controls-section {
    margin-bottom: 25px;
}

.controls-section:last-child {
    margin-bottom: 0;
}

.section-label {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #6b7c3f;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
    position: relative;
}

.section-label::before {
    content: '█';
    margin-right: 8px;
    color: #4a5d23;
}

/* Control Row */
.control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(35, 40, 25, 0.3);
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}

.control-row:hover {
    background: rgba(74, 93, 35, 0.2);
    border-left-color: #6b7c3f;
}

/* Key Badges */
.key-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 30px;
    padding: 0 10px;
    background: linear-gradient(180deg, #3d4a28 0%, #2d3820 100%);
    border: 2px solid #6b7c3f;
    border-radius: 3px;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: bold;
    color: #c3b091;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.key-badge.wide {
    min-width: 90px;
}

.control-desc {
    flex: 1;
    font-size: 13px;
    color: #d4c4a8;
    line-height: 1.4;
}

/* Warning Box (Reset Modal) */
.warning-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(139, 32, 32, 0.2) 0%, rgba(139, 32, 32, 0.1) 100%);
    border: 2px solid #8b2020;
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 25px;
}

.warning-icon {
    font-size: 42px;
    color: #ffdd00;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(255, 221, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    animation: warning-pulse 1.5s ease-in-out infinite;
}

@keyframes warning-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.warning-text {
    flex: 1;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ff8888;
    margin: 0;
    line-height: 1.5;
}

/* Data List (Reset Modal) */
.data-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
}

.data-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(35, 40, 25, 0.4);
    border-left: 3px solid #8b2020;
    font-size: 13px;
    color: #d4c4a8;
    transition: all 0.2s ease;
}

.data-item:hover {
    background: rgba(139, 32, 32, 0.2);
    border-left-color: #ff5555;
}

.item-icon {
    color: #8b2020;
    font-size: 10px;
}

.confirm-text {
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #ffaa88;
    padding: 15px;
    background: rgba(139, 32, 32, 0.15);
    border: 1px dashed #8b2020;
}

/* Military Modal Footer */
.military-modal-footer {
    padding: 20px 25px;
    background: rgba(20, 25, 15, 0.6);
    border-top: 2px solid rgba(74, 93, 35, 0.3);
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Military Buttons */
.military-button {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    padding: 14px 40px;
    border: 2px solid #6b7c3f;
    background: linear-gradient(180deg, #4a5d23 0%, #3a4a1a 100%);
    color: #c3b091;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.military-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.military-button:hover::before {
    left: 100%;
}

.military-button:hover {
    background: linear-gradient(180deg, #6b7c3f 0%, #5a6b33 100%);
    border-color: #8a9b4f;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.military-button:active {
    transform: translateY(0);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.military-button.secondary {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: #5a5a5a;
    color: #aaa;
}

.military-button.secondary:hover {
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
    border-color: #7a7a7a;
    color: #fff;
}

.military-button.danger {
    background: linear-gradient(180deg, #b82020 0%, #8b2020 100%);
    border-color: #ff5555;
    color: #fff;
    min-width: 180px;
}

.military-button.danger:hover {
    background: linear-gradient(180deg, #d82020 0%, #b82020 100%);
    border-color: #ff8888;
    box-shadow:
        0 6px 12px rgba(139, 32, 32, 0.6),
        0 0 20px rgba(255, 85, 85, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   AYARLAR MODALI - Settings Modal
   ═══════════════════════════════════════════════════════════ */
.settings-modal {
    max-width: 500px;
}

.settings-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.3);
}

.settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section .section-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--olive-light, #6b7c3f);
    letter-spacing: 2px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(107, 124, 63, 0.2);
}

/* Setting Rows */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    gap: 20px;
}

.setting-label {
    font-size: 13px;
    color: var(--khaki, #c3b091);
    flex-shrink: 0;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: var(--olive-light, #6b7c3f);
    min-width: 40px;
    text-align: right;
}

/* Settings Slider */
.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 8px;
    background: linear-gradient(90deg, #2d3a1f 0%, #3d4a2f 100%);
    border-radius: 4px;
    border: 1px solid #4a5d23;
    cursor: pointer;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #6b7c3f 0%, #4a5d23 100%);
    border: 2px solid #8b9c5f;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(180deg, #8b9c5f 0%, #6b7c3f 100%);
    transform: scale(1.1);
}

.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #6b7c3f 0%, #4a5d23 100%);
    border: 2px solid #8b9c5f;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #2d3a1f 0%, #1a2010 100%);
    border: 1px solid #4a5d23;
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: linear-gradient(180deg, #6b7c3f 0%, #4a5d23 100%);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(180deg, #8b2020 0%, #5a1515 100%);
    border-color: #aa3030;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background: linear-gradient(180deg, #cc4444 0%, #aa3030 100%);
}

/* Language Options */
.language-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: linear-gradient(180deg, #2d3a1f 0%, #1a2010 100%);
    border: 2px solid #3a4a25;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-btn:hover {
    background: linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    border-color: #5a6a35;
}

.language-btn.active {
    background: linear-gradient(180deg, #4a5d23 0%, #3d4a1f 100%);
    border-color: #6b7c3f;
    box-shadow: 0 0 15px rgba(107, 124, 63, 0.3);
}

.lang-flag {
    font-size: 20px;
}

.lang-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: var(--khaki, #c3b091);
    letter-spacing: 1px;
}

.language-btn.active .lang-name {
    color: #fff;
}

.language-note {
    margin-top: 12px;
    font-size: 11px;
    color: #777;
    font-style: italic;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .military-modal {
        width: 95%;
        max-width: none;
    }

    .military-modal-header h2 {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .military-modal-body {
        padding: 20px 18px;
    }

    .key-badge.wide {
        min-width: 70px;
    }

    .data-list {
        grid-template-columns: 1fr;
    }

    .military-button {
        padding: 12px 25px;
        font-size: 12px;
    }
}