@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;500;600;700;800&family=Teko:wght@600;700&display=swap');

/* ==========================================================================
   FAMEVISO STEAM CALCULATOR - INDUSTRIAL & RAW EDITION (V8.1 MASTER)
   Özellikler: Keskin Köşeler, Mobil Optimizasyon, Çoklu ID Grid Desteği
   ========================================================================== */

#steam-app-root {
    /* --- AYDINLIK MOD (LIGHT) DEĞİŞKENLERİ --- */
    --st-font-main: 'Inter', -apple-system, sans-serif;
    --st-font-head: 'Teko', sans-serif;         
    --st-font-mono: 'JetBrains Mono', monospace; 
    
    --st-primary: #000000;       
    --st-primary-hover: #333333; 
    --st-accent: #2563eb;        
    
    --st-success: #059669;       
    --st-danger: #dc2626;        
    --st-warning: #d97706;
    
    --st-bg-main: #f3f4f6;       
    --st-bg-card: #ffffff;
    --st-bg-soft: #f8fafc;
    --st-border: #cbd5e1;        
    
    --st-text-bold: #0f172a;
    --st-text-main: #334155;
    --st-text-muted: #64748b;
    
    /* Brutalism: Sıfır Oval, Keskin Gölge */
    --st-shadow-md: 4px 4px 0px 0px rgba(0, 0, 0, 0.1); 
    --st-shadow-card: 6px 6px 0px 0px rgba(15, 23, 42, 0.08); 
    --st-radius-lg: 0px;  
    --st-radius-md: 0px;
    --st-radius-sm: 0px;
    
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--st-font-main) !important;
    color: var(--st-text-main) !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

#steam-app-root * { box-sizing: border-box !important; border-radius: 0 !important; }

/* ==========================================================================
   GECE MODU (DARK MODE) - TRUE STEAM THEME
   ========================================================================== */
body.dark #steam-app-root {
    --st-primary: #66c0f4;       
    --st-primary-hover: #4199ca;
    --st-accent: #66c0f4;
    
    --st-bg-main: #171a21;       
    --st-bg-card: #1b2838;       
    --st-bg-soft: #101822;       
    --st-border: #2a475e;        
    
    --st-text-bold: #ffffff;
    --st-text-main: #c7d5e0;     
    --st-text-muted: #8f98a0;
    
    --st-shadow-card: 4px 4px 0px 0px rgba(0, 0, 0, 0.6); 
}

#steam-app-root h1, #steam-app-root h2, #steam-app-root h3, #steam-app-root h4, #steam-app-root h5,
#steam-app-root strong, #steam-app-root b {
    color: var(--st-text-bold) !important;
    font-family: var(--st-font-head) !important;
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important;
}

#steam-app-root p, #steam-app-root span, #steam-app-root li, #steam-app-root div {
    font-family: var(--st-font-main);
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
#steam-app-root .stm-breadcrumbs {
    display: flex !important; align-items: center !important; flex-wrap: wrap !important;
    font-size: 13px !important; font-weight: 600 !important; font-family: var(--st-font-mono) !important;
    background: var(--st-bg-main) !important; 
    border: 1px solid var(--st-border) !important;
    padding: 12px 20px !important; margin: 0 auto 30px auto !important; gap: 8px !important;
    width: 100% !important; text-transform: uppercase !important;
}

#steam-app-root .stm-breadcrumbs a {
    display: inline-flex !important; align-items: center !important; color: var(--st-text-muted) !important;
    text-decoration: none !important; padding: 4px 8px !important; transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

#steam-app-root .stm-breadcrumbs a:hover { color: var(--st-primary) !important; border-color: var(--st-primary) !important; background: var(--st-bg-soft) !important; }
#steam-app-root .stm-breadcrumbs a i { margin-right: 6px !important; font-size: 12px !important; }
#steam-app-root .stm-breadcrumbs .sep { color: var(--st-border) !important; margin: 0 4px !important; }
#steam-app-root .stm-breadcrumbs .current { color: var(--st-primary) !important; font-weight: 700 !important; padding: 4px 8px !important; background: var(--st-bg-soft) !important; border: 1px solid var(--st-border) !important; }

/* ==========================================================================
   ORTAK KART DİZAYNI
   ========================================================================== */
#steam-app-root .st-card {
    background: var(--st-bg-card) !important; 
    border: 2px solid var(--st-border) !important;
    box-shadow: var(--st-shadow-card) !important; 
    padding: 35px !important; 
    margin-bottom: 30px !important; 
    position: relative !important;
    transition: transform 0.1s !important;
}

#steam-app-root .st-system-status {
    display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important;
    background: var(--st-bg-soft) !important; border: 1px dashed var(--st-border) !important;
    padding: 12px 25px !important; margin-bottom: 20px !important; font-weight: 600 !important; font-size: 12px !important; 
    color: var(--st-text-muted) !important; font-family: var(--st-font-mono) !important; text-transform: uppercase !important; gap: 10px !important;
}
#steam-app-root .st-status-item i { color: var(--st-success) !important; margin-right: 8px !important; font-size: 10px !important; }

/* ==========================================================================
   HERO BÖLÜMÜ
   ========================================================================== */
#steam-app-root .st-hero {
    display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important;
    background: var(--st-bg-card) !important; padding: 0 !important; border: 2px solid var(--st-border) !important;
}
#steam-app-root .st-hero-content { flex: 1 !important; padding: 40px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-right: 2px solid var(--st-border) !important; }
#steam-app-root .st-hero-img { flex: 0 0 400px !important; background: var(--st-bg-soft) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
#steam-app-root .st-hero-img img { width: 100% !important; border: 2px solid var(--st-border) !important; filter: grayscale(20%) contrast(120%); } 

#steam-app-root .st-hero h2 { font-size: clamp(32px, 6vw, 58px) !important; line-height: 0.9 !important; margin-bottom: 20px !important; word-wrap: break-word !important; }
#steam-app-root .st-text-gradient { color: var(--st-primary) !important; background: none !important; -webkit-text-fill-color: initial !important; } 
#steam-app-root .st-hero p { font-size: 16px !important; color: var(--st-text-muted) !important; margin-bottom: 30px !important; }

#steam-app-root .st-badge-row { margin-bottom: 20px !important; display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
#steam-app-root .st-tag { font-family: var(--st-font-mono) !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 12px !important; border: 1px solid var(--st-text-bold) !important; color: var(--st-text-bold) !important; background: transparent !important; }
#steam-app-root .st-tag.live { border-color: var(--st-danger) !important; color: var(--st-danger) !important; }

#steam-app-root .st-stats-row { display: flex !important; gap: 0 !important; border-top: 2px solid var(--st-border) !important; margin-top: auto !important; flex-wrap: wrap !important; }
#steam-app-root .st-mini-stat { padding: 15px 20px !important; flex: 1 1 30% !important; border-right: 2px solid var(--st-border) !important; text-align: center !important; }
#steam-app-root .st-mini-stat:last-child { border-right: none !important; }
#steam-app-root .st-mini-stat strong { font-size: 24px !important; margin-bottom: 0 !important; display: block !important; font-family: var(--st-font-head) !important; line-height: 1 !important;}
#steam-app-root .st-mini-stat span { font-size: 11px !important; font-family: var(--st-font-mono) !important; color: var(--st-text-muted) !important; }

/* ==========================================================================
   ARAMA ALANI (INPUT)
   ========================================================================== */
#steam-app-root .st-panel { text-align: center !important; padding: 50px 30px !important; }
#steam-app-root .st-panel-head { margin-bottom: 30px !important; }
#steam-app-root .st-panel-head i { font-size: 40px !important; color: var(--st-text-bold) !important; margin-bottom: 10px !important; }
#steam-app-root .st-panel-head h3 { font-size: clamp(26px, 5vw, 32px) !important; word-wrap: break-word !important; }

#steam-app-root .st-input-wrap { display: flex !important; max-width: 700px !important; margin: 0 auto 15px auto !important; border: 2px solid var(--st-border) !important; }
#steam-app-root .st-input-inner { flex: 1 !important; position: relative !important; border-right: 2px solid var(--st-border) !important; }
#steam-app-root .st-search-icon { position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--st-text-bold) !important; font-size: 16px !important; }

#steam-app-root #stmInput { width: 100% !important; padding: 20px 20px 20px 50px !important; border: none !important; background: var(--st-bg-main) !important; color: var(--st-text-bold) !important; font-size: 16px !important; font-family: var(--st-font-mono) !important; outline: none !important; }
#steam-app-root #stmInput:focus { background: var(--st-bg-card) !important; }

#steam-app-root .st-btn-glow { background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; border: none !important; padding: 0 40px !important; font-size: 18px !important; font-family: var(--st-font-head) !important; cursor: pointer !important; transition: background 0.2s !important; letter-spacing: 1px !important; }
#steam-app-root .st-btn-glow:hover { background: var(--st-primary) !important; }
body.dark #steam-app-root .st-btn-glow { background: var(--st-primary) !important; color: #fff !important;}
body.dark #steam-app-root .st-btn-glow:hover { background: var(--st-text-bold) !important; color: #000 !important; }

/* Loader */
#steam-app-root .st-loader { display: flex; flex-direction: column; align-items: center; margin-top: 30px; font-family: var(--st-font-mono) !important; }
#steam-app-root .st-spinner { width: 30px; height: 30px; border: 2px solid var(--st-border); border-top: 2px solid var(--st-text-bold); animation: spin 0.8s linear infinite; }
#steam-app-root .st-progress-bar { width: 100%; max-width: 400px; height: 4px; background: var(--st-border); margin-top: 15px; }
#steam-app-root .st-progress-fill { height: 100%; width: 0%; background: var(--st-text-bold); transition: width 0.1s linear; }

/* ==========================================================================
   SONUÇ KARTLARI & ID GRID (MOBİL UYUMLU)
   ========================================================================== */
#steam-app-root .st-passport { display: flex !important; padding: 0 !important; align-items: stretch !important; }
#steam-app-root .st-passport-content { display: flex !important; flex: 1 !important; align-items: stretch !important; }

#steam-app-root .st-user-avatar { padding: 30px !important; background: var(--st-bg-soft) !important; border-right: 2px solid var(--st-border) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;}
#steam-app-root .st-user-avatar img { width: 140px !important; height: 140px !important; border: 2px solid var(--st-border) !important; filter: grayscale(10%); }

#steam-app-root .status-pill { margin-top: 15px !important; font-size: 12px !important; font-family: var(--st-font-mono) !important; font-weight: 700 !important; padding: 4px 15px !important; border: 1px solid currentColor !important; }
#steam-app-root .status-pill.online { color: var(--st-success) !important; }
#steam-app-root .status-pill.offline { color: var(--st-text-muted) !important; }

#steam-app-root .st-user-meta { flex: 1 !important; padding: 30px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; overflow: hidden !important; }
#steam-app-root .st-user-meta h3 { font-size: clamp(28px, 6vw, 40px) !important; margin-bottom: 15px !important; word-wrap: break-word !important; }

/* YENİ ID GRID SİSTEMİ (Inline HTML'i ezer, taşmayı önler) */
#steam-app-root .st-id-grid {
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; 
    gap: 10px !important; 
    margin-bottom: 15px !important;
    width: 100% !important;
}

#steam-app-root .st-id-copy { 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    gap: 8px !important; 
    background: var(--st-bg-soft) !important; 
    padding: 8px 12px !important; 
    border: 1px solid var(--st-border) !important; 
    font-family: var(--st-font-mono) !important; 
    font-size: 12px !important; 
    cursor: pointer !important; 
    width: 100% !important; 
    color: var(--st-text-main) !important; 
    word-break: break-all !important; /* Uzun hex/id'leri alt satıra atar, dışarı taşırmaz */
}
#steam-app-root .st-id-copy:hover { background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; }

#steam-app-root .st-meta-links { display: flex !important; gap: 10px !important; width: 100% !important;}
#steam-app-root .st-link-btn { flex: 1 !important; text-align: center !important; font-size: 12px !important; font-weight: 600 !important; font-family: var(--st-font-mono) !important; border: 1px solid var(--st-border) !important; padding: 8px 15px !important; color: var(--st-text-bold) !important; text-transform: uppercase !important;}
#steam-app-root .st-link-btn:hover:not(.static) { background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; }

#steam-app-root .st-valuation-box { background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; padding: 30px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; text-align: right !important; min-width: 250px !important; }
#steam-app-root .val-title { font-size: 12px !important; font-family: var(--st-font-mono) !important; color: var(--st-bg-soft) !important; opacity: 0.8 !important;}
#steam-app-root .val-amount { font-size: clamp(36px, 8vw, 55px) !important; line-height: 1 !important; margin: 10px 0 !important; font-family: var(--st-font-head) !important; color: var(--st-bg-card) !important; word-wrap: break-word !important;}
body.dark #steam-app-root .val-amount { color: var(--st-primary) !important; }

/* TIER DÜZELTMESİ (Görünmezlik Çözümü) */
#steam-app-root .val-tier { font-size: 15px !important; font-family: var(--st-font-mono) !important; color: #cbd5e1 !important;}
#steam-app-root .val-tier strong { color: var(--st-bg-card) !important; font-size: 16px !important; letter-spacing: 1px !important; }
body.dark #steam-app-root .val-tier strong { color: var(--st-bg-soft) !important; }

/* 4'lü Grid */
#steam-app-root .st-stats-grid { display: flex !important; border: 2px solid var(--st-border) !important; margin-bottom: 30px !important; box-shadow: var(--st-shadow-card) !important; background: var(--st-bg-card) !important; }
#steam-app-root .st-stat-item { flex: 1 !important; padding: 20px !important; border-right: 2px solid var(--st-border) !important; display: flex !important; align-items: center !important; gap: 15px !important; margin: 0 !important;}
#steam-app-root .st-stat-item:last-child { border-right: none !important; }
#steam-app-root .st-icon { font-size: 24px !important; color: var(--st-text-bold) !important; }

#steam-app-root .st-stat-text span { font-size: 11px !important; font-family: var(--st-font-mono) !important; color: var(--st-text-muted) !important; display: block !important;}
#steam-app-root .st-stat-text strong { font-size: 26px !important; display: block !important; line-height: 1 !important; margin-top: 5px !important;}

/* 2'li Liste Alanı (Tablolar) */
#steam-app-root .st-details-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; margin-bottom: 30px !important; }
#steam-app-root .st-detail-box { padding: 0 !important; border: 2px solid var(--st-border) !important; background: var(--st-bg-card) !important; box-shadow: var(--st-shadow-card) !important;}
#steam-app-root .st-detail-box h4 { padding: 15px 20px !important; margin: 0 !important; background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; font-size: 20px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
body.dark #steam-app-root .st-detail-box h4 { color: #000 !important; }
#steam-app-root .st-detail-box h4 i { color: inherit !important; font-size: 16px !important;}

/* Liste İçerikleri (Taşmayı Önleme) */
#steam-app-root .st-list li { display: flex !important; justify-content: space-between !important; padding: 15px 20px !important; border-bottom: 1px dashed var(--st-border) !important; font-family: var(--st-font-mono) !important; font-size: 13px !important; align-items: flex-start !important; gap: 10px !important; word-wrap: break-word !important;}
#steam-app-root .st-list li:last-child { border-bottom: none !important; }
#steam-app-root .st-list span { color: var(--st-text-muted) !important; flex: 1 !important; }
#steam-app-root .st-list strong { font-size: 15px !important; font-family: var(--st-font-main) !important; color: var(--st-text-bold) !important; text-align: right !important; flex-shrink: 0 !important;}

/* Pazar Box */
#steam-app-root .st-market-box { text-align: center !important; padding: 40px !important;}
#steam-app-root .st-market-btns { display: flex !important; justify-content: center !important; gap: 15px !important; margin-top: 20px !important; flex-wrap: wrap !important; }
#steam-app-root .st-market-btns a { font-family: var(--st-font-mono) !important; font-size: 13px !important; border: 1px solid var(--st-text-bold) !important; padding: 10px 20px !important; color: var(--st-text-bold) !important; transition: all 0.2s !important; }
#steam-app-root .st-market-btns a:hover { background: var(--st-text-bold) !important; color: var(--st-bg-card) !important; }

/* ==========================================================================
   SEO & GLOSSARY
   ========================================================================== */
#steam-app-root .st-seo-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
#steam-app-root .seo-card { border: 2px solid var(--st-border) !important; box-shadow: var(--st-shadow-card) !important; padding: 30px !important; background: var(--st-bg-card) !important; }
#steam-app-root .seo-card.full { grid-column: 1 / -1 !important; }
#steam-app-root .seo-card h3 { font-size: 26px !important; border-bottom: 2px solid var(--st-text-bold) !important; padding-bottom: 10px !important; margin-bottom: 20px !important; display: inline-block !important;}

#steam-app-root .st-check-list li { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 15px !important; font-size: 15px !important; border-bottom: 1px dashed var(--st-border) !important; padding-bottom: 15px !important;}
#steam-app-root .st-check-list li:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important;}
#steam-app-root .st-check-list i { color: var(--st-text-bold) !important; margin-top: 4px !important; }

#steam-app-root .st-glossary-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
#steam-app-root .glossary-item { background: var(--st-bg-soft) !important; border: 1px solid var(--st-border) !important; padding: 20px !important; }
#steam-app-root .glossary-item h4 { font-size: 20px !important; margin-bottom: 10px !important; }

#steam-app-root .st-tier-grid { display: flex !important; border: 2px solid var(--st-border) !important; flex-wrap: wrap !important;}
#steam-app-root .tier-item { flex: 1 1 25% !important; padding: 20px !important; border-right: 2px solid var(--st-border) !important; text-align: center !important; background: var(--st-bg-main) !important; }
#steam-app-root .tier-item:last-child { border-right: none !important; }
#steam-app-root .tier-item .t-title { font-size: 22px !important; font-family: var(--st-font-head) !important; display: block !important; margin-bottom: 5px !important; }
#steam-app-root .tier-item .t-val { font-family: var(--st-font-mono) !important; font-size: 13px !important; font-weight: 700 !important; display: block !important; margin-bottom: 5px !important;}

#steam-app-root .stm-faq-container { width: 100% !important; margin-top: 10px !important; }
#steam-app-root .stm-faq-title { font-size: 28px !important; border-bottom: 2px solid var(--st-text-bold) !important; padding-bottom: 10px !important; margin-bottom: 20px !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; }
#steam-app-root .stm-faq-item { border: 2px solid var(--st-border) !important; margin-bottom: 10px !important; background: var(--st-bg-card) !important; transition: border 0.2s !important; }
#steam-app-root .stm-faq-item:hover { border-color: var(--st-text-bold) !important; }
#steam-app-root .stm-faq-question { padding: 20px !important; font-size: 18px !important; font-family: var(--st-font-head) !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; }
#steam-app-root .stm-faq-question::after { content: '+' !important; font-family: var(--st-font-mono) !important; font-weight: 400 !important; font-size: 24px !important; }
#steam-app-root .stm-faq-question.stm-active::after { content: '-' !important; }
#steam-app-root .stm-faq-answer { padding: 0 20px 20px 20px !important; font-size: 15px !important; display: none; line-height: 1.6 !important; border-top: 1px dashed var(--st-border) !important; margin-top: 5px !important; padding-top: 15px !important; }

#steam-app-root .st-security-banner { display: flex !important; align-items: center !important; gap: 25px !important; border: 2px solid var(--st-text-bold) !important; padding: 30px !important; margin-bottom: 30px !important; box-shadow: var(--st-shadow-card) !important; background: var(--st-bg-main) !important; }
#steam-app-root .st-security-banner .sec-icon { font-size: 40px !important; color: var(--st-text-bold) !important; }

/* ==========================================================================
   MOBİL OPTİMİZASYON (Sert Kırılmalar & Taşma Önleyici)
   ========================================================================== */
@media screen and (max-width: 992px) {
    #steam-app-root .st-hero { flex-direction: column !important; border-right: 2px solid var(--st-border) !important; }
    #steam-app-root .st-hero-content { border-right: none !important; border-bottom: 2px solid var(--st-border) !important; }
    #steam-app-root .st-hero-img { border-top: none !important; width: 100% !important; flex: auto !important; padding: 40px !important; }
    
    #steam-app-root .st-passport-content { flex-direction: column !important; text-align: center !important; }
    #steam-app-root .st-user-avatar { border-right: none !important; border-bottom: 2px solid var(--st-border) !important; width: 100% !important; padding: 20px !important; }
    #steam-app-root .st-user-meta { padding: 20px 15px !important; }
    #steam-app-root .st-valuation-box { width: 100% !important; text-align: center !important; border-top: 2px solid var(--st-border) !important;}
    
    #steam-app-root .st-stats-grid { flex-wrap: wrap !important; }
    #steam-app-root .st-stat-item { flex: 1 1 50% !important; border-bottom: 2px solid var(--st-border) !important; }
    #steam-app-root .st-stat-item:nth-child(even) { border-right: none !important; }
    
    #steam-app-root .tier-item { flex: 1 1 50% !important; border-bottom: 2px solid var(--st-border) !important; }
    #steam-app-root .tier-item:nth-child(even) { border-right: none !important; }
}

@media screen and (max-width: 768px) {
    #steam-app-root .st-input-wrap { flex-direction: column !important; border: none !important; gap: 15px !important; }
    #steam-app-root .st-input-inner { border: 2px solid var(--st-border) !important; }
    #steam-app-root .st-btn-glow { padding: 20px !important; }
    
    #steam-app-root .st-details-split { grid-template-columns: 1fr !important; gap: 20px !important; }
    #steam-app-root .st-seo-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    #steam-app-root .st-glossary-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    
    #steam-app-root .st-security-banner { flex-direction: column !important; text-align: center !important; padding: 20px 15px !important;}
    #steam-app-root .st-card { padding: 25px 15px !important; }
    #steam-app-root .st-detail-box { padding: 0 !important; }
    
    /* Mobil Grid Taşma Çözümü */
    #steam-app-root .st-id-grid { grid-template-columns: 1fr !important; }
    #steam-app-root .st-meta-links { flex-direction: column !important; }
}

@media screen and (max-width: 480px) {
    #steam-app-root .st-stats-grid { flex-direction: column !important; }
    #steam-app-root .st-stat-item { border-right: none !important; }
    #steam-app-root .tier-item { flex: 1 1 100% !important; border-right: none !important; }
}

/* ==========================================================================
   TOAST (KOPYALANDI BİLDİRİMİ) ANİMASYONU
   ========================================================================== */
#steam-app-root .st-toast {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--st-text-bold) !important;
    color: var(--st-bg-card) !important;
    padding: 12px 25px !important;
    font-family: var(--st-font-mono) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    z-index: 99999 !important;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.3) !important;
    border: 2px solid var(--st-border) !important;
    animation: toastSlideUp 0.3s ease forwards !important;
    white-space: nowrap !important;
}

body.dark #steam-app-root .st-toast {
    background: var(--st-primary) !important;
    color: #fff !important;
    border-color: #000 !important;
}

@keyframes toastSlideUp {
    from { bottom: -50px; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}