/* BYMACCRO ELITE THEME v8.0 (CENTER FIX) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&display=swap');

:root {
    --bg: #050508;
    --panel: #0f0f13;
    --border: rgba(255, 255, 255, 0.08);
    --primary: #7f5cff;
    --accent: #00f2ea;
    --gold: #ffd700;
    --text: #ffffff;
    --text-muted: #888;
    --header-h: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; -webkit-tap-highlight-color: transparent; }

html, body { width: 100%; overflow-x: hidden; background-color: var(--bg); color: var(--text); min-height: 100vh; }
body { display: flex; background-image: radial-gradient(circle at 10% 10%, rgba(127,92,255,0.08), transparent 40%), radial-gradient(circle at 90% 90%, rgba(0,242,234,0.05), transparent 40%); }
img { max-width: 100%; height: auto; display: block; }

/* =========================================
   SIDEBAR
   ========================================= */
.sidebar {
    width: 280px; background: rgba(15, 15, 19, 0.98);
    border-right: 1px solid var(--border); backdrop-filter: blur(20px);
    display: flex; flex-direction: column; padding: 30px;
    position: fixed; height: 100vh; top: 0; left: 0; z-index: 10000;
    transition: transform 0.3s ease;
}

.logo-area { text-align: center; margin-bottom: 30px; display: flex; justify-content: center; align-items: center; padding-top: 10px; }
.brand-logo { height: 50px !important; width: auto !important; max-width: 180px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(127,92,255,0.6)); }
.nav-menu { display: flex; flex-direction: column; gap: 8px; }
.nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; color: var(--text-muted);
    text-decoration: none; border-radius: 12px;
    transition: all 0.3s ease; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.nav-link i { font-size: 20px; }
.nav-link:hover, .nav-link.active { background: linear-gradient(90deg, rgba(127,92,255,0.15), transparent); color: #fff; border-left: 3px solid var(--primary); }
.close-sidebar-btn { display: none; position: absolute; top: 20px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; }

/* =========================================
   ANA İÇERİK ALANI (MERKEZLEME AYARI)
   ========================================= */
.main-content {
    flex: 1; margin-left: 280px; padding: 40px;
    width: calc(100% - 280px); 
    position: relative;
    min-height: 100vh; /* Ekranı tam kapla */
    display: flex;
    flex-direction: column;
    align-items: center; /* Yatay Ortala */
    justify-content: center; /* Dikey Ortala */
}

/* Diğer sayfalar için normal akış */
.chat-main, .radar-main, .stats-main, .calc-main, .profile-main {
    flex: 1; margin-left: 280px; padding: 40px;
    width: calc(100% - 280px); position: relative;
}

/* HERO BOX (Index Ortadaki Kutu) */
.hero-box { 
    text-align: center; 
    max-width: 800px; 
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Kutunun içindekileri ortala */
    justify-content: center;
}

/* ORTA LOGO (GÜÇLÜ MERKEZLEME) */
.hero-logo {
    display: block !important;
    margin: 0 auto 25px auto !important; /* Üst-Alt boşluk, Yanlar Otomatik */
    width: auto !important;
    height: auto !important;
    max-height: 120px; /* Çok devasa olmasın */
    max-width: 250px;
    filter: drop-shadow(0 0 25px rgba(127, 92, 255, 0.6));
}

.hero-title { font-size: 42px; font-weight: 900; margin-bottom: 15px; line-height: 1.2; }
.hero-desc { font-size: 16px; color: #888; max-width: 600px; margin: 0 auto 30px auto; line-height: 1.6; }
.hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 40px; background: linear-gradient(90deg, #7f5cff, #00f2ea); color: #000; border-radius: 50px; font-weight: 800; text-decoration: none; transition: 0.3s; text-transform: uppercase; }
.hero-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(127, 92, 255, 0.5); color: #fff; }

/* GRIDLER VE KARTLAR */
.grid-box, .sponsor-grid, .contact-grid, .input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; width: 100%; }
.bonus-card, .inv-card, .sp-card, .contact-card, .res-card, .input-box { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; position: relative; transition: 0.3s; }
.bonus-img { width: 100%; height: 160px; object-fit: cover; }
.bonus-body { padding: 20px; }
.bonus-tag { position: absolute; top: 15px; right: 15px; background: var(--gold); color: #000; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 4px; }
.btn-claim { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 12px; background: var(--primary); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 700; margin-top: 15px; }
.sp-card.elite { border: 2px solid #ffd700; box-shadow: 0 0 15px rgba(255,215,0,0.1); }
.sp-img-box { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.sp-img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sp-btn { display: block; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 700; margin-top: 10px; text-align: center;}
.elite .sp-btn { background: #ffd700; color: #000; }
.pro .sp-btn { background: rgba(127,92,255,0.2); color: #fff; border: 1px solid var(--primary); }
.std .sp-btn { background: #222; color: #ccc; }
.inv-card { padding: 20px; text-align: center; text-decoration: none; display: block; color: #fff; }
.inv-icon { width: 60px; height: 60px; margin: 0 auto 15px; background: rgba(0,242,234,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }

/* MOBİL ÜST BAR */
.mobile-header {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h);
    background: rgba(5, 5, 8, 0.95); border-bottom: 1px solid var(--border);
    z-index: 9999; align-items: center; justify-content: space-between; padding: 0 20px;
    backdrop-filter: blur(10px);
}
.mob-logo { height: 30px !important; width: auto !important; }
.mob-menu-btn { font-size: 24px; color: #fff; background: none; border: none; cursor: pointer; }

/* =========================================
   📱 MOBİL UYUMLULUK (HAMBURGER)
   ========================================= */
@media screen and (max-width: 1024px) {
    body { display: block; }
    .mobile-header { display: flex; }

    .sidebar {
        width: 280px; transform: translateX(-100%); box-shadow: 5px 0 20px rgba(0,0,0,0.8);
    }
    .sidebar.active { transform: translateX(0); }
    .sidebar .brand-area { display: none; }
    .close-sidebar-btn { display: block; }
    .desktop-only { display: none !important; }

    .main-content {
        margin-left: 0; width: 100%; 
        margin-top: var(--header-h); 
        padding: 20px 15px;
        min-height: calc(100vh - 60px);
        display: flex; flex-direction: column; justify-content: center; /* Mobilde de ortala */
    }
    
    /* Diğer sayfalar için mobil ayarı */
    .chat-main, .radar-main, .stats-main, .calc-main, .main-area, .profile-main {
        margin-left: 0; width: 100%; margin-top: var(--header-h); padding: 20px 15px;
    }

    .grid-box, .sponsor-grid, .contact-grid, .input-grid, .stats-row, .result-cards {
        grid-template-columns: 1fr !important; gap: 15px;
    }
    
    .chat-window { height: calc(100vh - 140px); min-height: 400px; }
    .radar-circle { width: 280px; height: 280px; }
    .hero-logo { width: 150px; max-height: 100px; }
    .hero-title { font-size: 28px; }
    .calc-sponsor-box { flex-direction: column; text-align: center; }
    .calc-sp-btn { width: 100%; display: block; text-align: center; }
    .contact-card { flex-direction: column; text-align: center; }
    #pwa-install { bottom: 20px; width: 90%; left: 5%; transform: none; }
}

.menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; backdrop-filter: blur(3px); }
.menu-overlay.active { display: block; }