:root { --ana: #111; --altin: #d4af37; --gri: #f4f4f4; --yukselis: #27ae60; --dusus: #e74c3c; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--gri); margin: 0; color: #333; }

        .ticker { background: #000; color: var(--altin); padding: 8px 0; overflow: hidden; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--altin); }
        .ticker-move { white-space: nowrap; animation: move 35s linear infinite; display: inline-block; padding-left: 100%; }
        @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

        .header { 
    /* '../' ile css klasöründen çıkıp img klasörüne giriyoruz */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('../img/gold-bg.jpg'); 
    background-size: cover; 
    background-position: center;
    color: var(--altin); 
    text-align: center; 
    padding: 0 0 60px 0; 
    border-bottom: 5px solid var(--altin);
}
        
        .top-bar-integrated {
            background: rgba(0, 0, 0, 0.4); 
            backdrop-filter: blur(10px);
            padding: 10px; 
            display: flex; 
            justify-content: space-around; 
            align-items: center;
            flex-wrap: wrap; 
            font-size: 13px; 
            color: #fff; 
            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
            margin-bottom: 25px;
        }
        .top-bar-integrated b { color: var(--altin); }

        .header h1 { font-size: 2.2rem; margin: 0; text-shadow: 2px 4px 10px rgba(0,0,0,0.8); }

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

        .quick-stats { 
            display: flex; gap: 12px; margin: -30px auto 20px auto; padding: 10px 5px; 
            overflow-x: auto; position: relative; z-index: 50; scrollbar-width: none;
        }
        .quick-stats::-webkit-scrollbar { display: none; }
        @media (min-width: 768px) { .quick-stats { justify-content: center; } }
        
        .stat-card { 
            background: #fff; min-width: 140px; padding: 15px 12px; border-radius: 12px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.15); text-align: center; border-bottom: 3px solid var(--altin); 
        }
        .stat-card span { display: block; font-size: 11px; color: #777; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; }
        .stat-card strong { display: block; font-size: 17px; color: #111; letter-spacing: -0.5px; }
        .stat-card small { font-size: 12px; font-weight: bold; margin-top: 5px; display: block;}
        .stat-card small.up { color: var(--yukselis); }
        .stat-card small.down { color: var(--dusus); }
        .stat-card small.stable { color: #666; }
        
        .tab-menu { display: flex; justify-content: center; gap: 10px; margin: 0 0 20px 0; position: sticky; top: 10px; z-index: 100; flex-wrap: wrap;}
        .tab-btn { padding: 10px 20px; border: none; background: #fff; border-radius: 50px; cursor: pointer; font-weight: 700; color: #666; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s;}
        .tab-btn.active { background: var(--altin); color: #fff; transform: scale(1.05);}

        .tab-pane { display: none; }
        .tab-pane.active { display: block; animation: fadeIn 0.4s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* YENİ JİLET GİBİ MOBİL UYUMLU BORSA TABLOSU CSS'İ */
        .table-wrapper {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.04);
            overflow: hidden; /* Taşmayı gizler, tabloyu tam sığdırır */
            border: 1px solid #f0f0f0;
            margin-bottom: 20px;
        }
        .gold-table {
            width: 100%;
            border-collapse: collapse;
            text-align: right;
        }
        .gold-table th {
            background: #111;
            color: var(--altin);
            padding: 14px 10px;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 800;
        }
        .gold-table th:first-child { text-align: left; }
        
        .gold-table td {
            padding: 12px 10px;
            border-bottom: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: 700;
            color: #333;
            vertical-align: middle;
            white-space: nowrap; /* Fiyatlar alt alta inmesin diye */
        }
        .gold-table tr:hover td { background-color: #fdfdfd; }
        .gold-table tr:last-child td { border-bottom: none; }
        
        .gold-table td.isim { 
            text-align: left; 
            color: #111; 
            font-weight: 800; 
            font-size: 14px; 
            white-space: normal; /* İsimler 2 satıra inip sığsın diye */
            line-height: 1.3;
        }
        
        /* 🚨 Renk ve Oklar için KESİN KURALLAR (!important) */
        .gold-table td.artis { color: var(--yukselis) !important; }
        .gold-table td.dusus { color: var(--dusus) !important; }
        .gold-table td.stable { color: #666 !important; }
        .arrow { font-size: 12px; margin-left: 2px; }
        .takas-badge { color: #e67e22; font-weight: 800; font-size: 14px;}

        /* MOBİL EKRAN DARALTMALARI (AŞAĞI İNMEYİ VE TAŞMAYI ÖNLER) */
        @media (max-width: 768px) {
            .header { padding: 0 0 30px 0 !important; }
            .header h1 { font-size: 1.6rem !important; }
            .top-bar-integrated { margin-bottom: 15px !important; padding: 8px !important; }
            .quick-stats { margin-top: -15px !important; margin-bottom: 15px !important; }
            .tab-menu { margin-bottom: 15px !important; gap: 6px; }
            .tab-btn { padding: 8px 15px; font-size: 12px; }
            
            /* Tabloyu küçültüp ekrana tam sığdırır */
            .gold-table th { padding: 10px 5px; font-size: 10px; }
            .gold-table td { padding: 10px 5px; font-size: 12px; }
            .gold-table td.isim { font-size: 12px; }
            .takas-badge { font-size: 12px; }
        }

        /* DİĞER KART VE ALANLARIN CSS'İ */
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 20px; }
        .card { background: #fff; padding: 25px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-top: 5px solid var(--altin); transition: 0.3s;}
        
        .calc-modes { display: flex; gap: 8px; margin-bottom: 20px; justify-content: center; }
        .mode-btn { padding: 8px 12px; border: 1px solid #ddd; background: #f9f9f9; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; transition: 0.3s; }
        .mode-btn.active { background: var(--altin); color: #fff; border-color: var(--altin); }
        .calc-box { display: none; flex-direction: column; gap: 15px; }
        .calc-box.active { display: flex; animation: fadeIn 0.3s; }
        .calc-input-group { display: flex; flex-direction: column; gap: 5px; }
        .calc-input-group label { font-size: 12px; font-weight: bold; color: #666; }
        .calc-input-group input, .calc-input-group select { padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; }

        .footer { background: #0d0d0d; color: #ccc; padding: 60px 0 30px 0; margin-top: 60px; border-top: 4px solid var(--altin); }
        .footer h4 { color: var(--altin); text-transform: uppercase; font-size: 14px; letter-spacing: 1.5px; border-bottom: 2px solid #222; padding-bottom: 10px; margin-bottom: 20px; display: inline-block; }
        .footer ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2.5; color: #bbb; }
        .footer p { font-size: 13px; line-height: 1.8; color: #999; }
        
        .mode-btn {
    background: #f0f0f0;
    color: #666;
    transition: 0.3s;
}
.mode-btn.active {
    background: #d4af37 !important; /* Altın Sarısı */
    color: #fff !important;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.4);
}