/* =========================================
   AY-TECH | PREMIUM PROFILE CSS
   ========================================= */
:root {
    --bg-dark: #F3F4F6;
    --surface: #FFFFFF;
    --text-main: #111827;
    --text-sub: #6B7280;
    --border: #E5E7EB;
    
    --primary: #D32F2F;
    --accent: #FFD600;
    --success: #00C853;
    --danger: #E53935;
    
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-alt: 'Montserrat', sans-serif;
    
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* --- GÜVENLİK --- */
.auth-lock {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}
.auth-lock.hidden { display: none; }
.lock-box {
    background: #fff; padding: 40px; border-radius: 20px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); border: 1px solid var(--border);
    max-width: 400px; width: 90%;
}
.lock-box i { font-size: 3rem; color: var(--primary); margin-bottom: 20px; }
.lock-box h2 { font-family: var(--font-head); margin-bottom: 10px; }

/* --- SIDEBAR --- */
.sidebar {
    width: 80px; background: var(--surface); border-right: 1px solid var(--border);
    height: 100%; display: flex; flex-direction: column; align-items: center; padding: 30px 0;
    flex-shrink: 0; z-index: 100;
}
.brand { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; color: var(--primary); margin-bottom: 40px; }
.menu { display: flex; flex-direction: column; gap: 20px; width: 100%; align-items: center; }
.menu a {
    width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
    color: var(--text-sub); border-radius: 12px; font-size: 1.2rem; transition: 0.3s;
    text-decoration: none;
}
.menu a:hover, .menu a.active { background: #FFF1F2; color: var(--primary); transform: translateY(-2px); }
.mobile-toggle, .mobile-top-bar { display: none; }

/* --- GRID LAYOUT --- */
.dashboard-area {
    flex: 1; padding: 20px; height: 100%; overflow: hidden;
    display: flex; flex-direction: column;
}

.grid-layout {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 20px;
    height: 100%;
}

.panel-user, .panel-garage, .panel-widgets {
    display: flex; flex-direction: column; gap: 20px;
    overflow-y: auto; padding-right: 5px;
}

/* --- SOL PANEL (PREMIUM TASARIM) --- */
.profile-card.premium-card {
    background: #1F2937; /* Koyu Tema */
    color: #fff;
    border: 1px solid #374151;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.card-bg {
    height: 80px;
    background: linear-gradient(135deg, var(--primary), #8B0000);
    opacity: 0.8;
}

.avatar-container {
    position: absolute;
    top: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
}

.avatar {
    width: 80px; height: 80px;
    background: #111; color: #fff;
    border-radius: 50%;
    border: 4px solid #1F2937;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-size: 1.8rem; font-weight: 700;
}

.level-badge {
    background: var(--accent); color: #000;
    font-size: 0.6rem; font-weight: 800;
    padding: 2px 8px; border-radius: 10px;
    margin-top: -10px; z-index: 2;
    border: 2px solid #1F2937;
}

.user-details { margin-top: 50px; text-align: center; padding: 0 20px; }
.user-details h2 { font-family: var(--font-alt); font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.user-handle { color: #9CA3AF; font-size: 0.75rem; font-weight: 500; }

.wallet-section {
    margin: 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

.wallet-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wallet-row:last-child { margin-bottom: 0; }
.w-label { font-size: 0.65rem; color: #9CA3AF; font-weight: 700; letter-spacing: 0.5px; }
.w-val { font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; }

.menu-actions { padding: 0 20px 20px 20px; display: flex; gap: 10px; }
.menu-btn {
    flex: 1; padding: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn:hover { background: rgba(255,255,255,0.1); }
.menu-btn.danger:hover { background: rgba(211, 47, 47, 0.2); color: var(--primary); border-color: var(--primary); }

/* --- ORTA PANEL --- */
.garage-head {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface); padding: 15px 20px;
    border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.garage-head h1 { font-family: var(--font-head); font-size: 1.1rem; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
/* ORTA PANEL BUTONU (KÜÇÜLTÜLDÜ) */
.btn-primary {
    background: var(--text-main);
    color: #fff;
    border: none;
    padding: 6px 14px; /* Eskiden 10px 20px idi, şimdi kibar */
    border-radius: 6px; /* Köşeler biraz daha keskin */
    font-family: var(--font-head);
    font-size: 0.7rem; /* Font küçüldü */
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px; /* İkon ile yazı arası mesafe azaldı */
    text-decoration: none;
    height: 32px; /* Yükseklik sabitlendi, taşma yapmaz */
    line-height: 1;
}

.btn-primary:hover {
    background: var(--primary);
    transform: translateY(-1px); /* Hafif kalkma efekti */
}

.garage-list { display: flex; flex-direction: column; gap: 15px; min-height: 100px; }

/* Araç Kartı */
.garage-car-card {
    background: #fff; border-radius: 12px; border: 1px solid var(--border);
    padding: 20px; position: relative; transition: 0.3s;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.garage-car-card:hover { transform: translateY(-3px); border-color: var(--text-main); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }

.car-info h3 { font-family: var(--font-alt); font-weight: 800; font-size: 1rem; color: var(--text-main); }
.car-sub { font-size: 0.8rem; color: var(--text-sub); font-weight: 600; margin: 4px 0; }
.purchase-price { font-size: 0.75rem; background: #F3F4F6; padding: 3px 8px; border-radius: 4px; display: inline-block; color: #555; }

.car-finance { text-align: right; }
.live-pl { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; margin-bottom: 5px; }
.live-pl span { font-size: 0.7rem; font-family: var(--font-body); font-weight: 600; color: var(--text-sub); margin-left: 5px; }

.remove-btn {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; color: #E5E7EB; cursor: pointer; font-size: 0.9rem; transition: 0.2s;
}
.garage-car-card:hover .remove-btn { color: var(--danger); }

/* Gemini Box */
.ai-portfolio-box {
    background: linear-gradient(135deg, #111827, #000);
    border-radius: 16px; padding: 20px; color: #E5E7EB;
    border: 1px solid #374151; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.ai-head {
    font-family: var(--font-head); font-weight: 700; color: var(--accent);
    margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem;
}
.ai-content { font-size: 0.9rem; line-height: 1.6; opacity: 0.9; margin-bottom: 15px; white-space: pre-line; }
.ai-refresh-btn {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; padding: 8px 15px; border-radius: 6px; cursor: pointer;
    font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.ai-refresh-btn:hover { background: var(--primary); border-color: var(--primary); }

/* --- SAĞ PANEL --- */
.widget { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.widget-header { background: #F9FAFB; padding: 12px 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.widget-header h4 { font-family: var(--font-head); font-size: 0.75rem; color: var(--text-main); font-weight: 700; }
.widget-header button { border: none; background: none; color: var(--primary); cursor: pointer; }
.widget-body { padding: 10px; min-height: 80px; }
.w-empty { font-size: 0.8rem; color: #aaa; text-align: center; margin-top: 20px; }

.alarm-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #f0f0f0; }
.a-model { font-weight: 700; font-size: 0.8rem; display: block; color: #333; }
.a-target { font-size: 0.75rem; color: var(--text-sub); }

/* Renkler */
.pos { color: var(--success) !important; }
.neg { color: var(--danger) !important; }
.neutral { color: #fff !important; }

/* MODAL */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-overlay.hidden { display: none; }
.modal-box { background: #fff; width: 90%; max-width: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.m-head { background: var(--text-main); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.m-head h3 { font-family: var(--font-head); font-size: 1rem; }
.m-head button { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
.m-body { padding: 20px; }
.inp-group { margin-bottom: 15px; }
.inp-group label { display: block; font-size: 0.75rem; font-weight: 700; margin-bottom: 5px; color: var(--text-sub); }
.m-body input, .m-body select { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); outline: none; background: #fff; }
.flex-row { display: flex; gap: 10px; }
.btn-full { width: 100%; padding: 12px; background: var(--success); color: #fff; border: none; border-radius: 8px; font-family: var(--font-head); font-weight: 700; cursor: pointer; }

/* RESPONSIVE */
@media (max-width: 1000px) {
    body { flex-direction: column; overflow-y: auto; height: auto; }
    
    .sidebar { width: 100%; height: 60px; flex-direction: row; position: fixed; bottom: 0; left: 0; padding: 0; justify-content: space-around; border-top: 1px solid var(--border); border-right: none; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
    .brand { display: none; }
    .menu { flex-direction: row; width: 100%; justify-content: space-evenly; }
    .menu a { width: auto; font-size: 1.4rem; padding: 0 15px; }
    
    .mobile-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: var(--surface); position: sticky; top: 0; z-index: 90; border-bottom: 1px solid var(--border); }
    .m-logo { font-family: var(--font-head); font-weight: 900; color: var(--primary); font-size: 1.2rem; }
    .m-user { width: 35px; height: 35px; background: #111; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }

    .grid-layout { display: flex; flex-direction: column; height: auto; gap: 15px; padding-bottom: 80px; }
    .dashboard-area { padding: 15px; overflow: visible; height: auto; }
    
    .panel-user, .panel-garage, .panel-widgets { overflow: visible; padding: 0; }
    
    .garage-car-card { flex-direction: column; text-align: center; gap: 15px; }
    @media (max-width: 900px) {
    .nav-rail {
        width: 100% !important;
        height: 65px !important;
        top: auto !important;
        bottom: 0 !important;
        flex-direction: row !important;
        border-right: none !important;
        border-top: 1px solid #E5E7EB !important;
        padding: 0 !important;
        justify-content: space-around !important;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
    }

    .desktop-logo { display: none !important; }

    .nav-links {
        flex-direction: row !important;
        height: 100%;
        justify-content: space-evenly !important;
        gap: 0 !important;
    }

    .nav-item {
        width: auto !important;
        height: 100% !important;
        padding: 0 20px;
        border-radius: 0 !important;
        margin: 0 !important;
        font-size: 1.3rem !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Mobilde HOT etiketi biraz daha aşağıda dursun */
    .nav-hot-tag {
        top: 10px;
        right: 10px;
        font-size: 0.5rem;
        padding: 2px 4px;
        border: 1px solid #fff;
    }

    .nav-item.active {
        background: transparent !important;
        border-top: 3px solid #D32F2F !important;
        box-shadow: none !important;
    }
}
    .car-finance { text-align: center; }
}
/* =========================================
   BAŞARIMLAR (ROZETLER) CSS
   ========================================= */

.badges-card {
    /* Kart yapısı zaten genel stilden geliyor, içi için ayar: */
    display: flex;
    flex-direction: column;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.card-head h4 {
    font-family: var(--font-head);
    font-size: 0.85rem;
    color: var(--text-main);
    letter-spacing: 1px;
}

.badge-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ROZET (Pasif Durum) */
.badge {
    width: 50px;
    height: 50px;
    background: #F3F4F6; /* Sönük gri zemin */
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #9CA3AF; /* Sönük ikon */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: help;
}

/* ROZET (Kazanılmış - Aktif Durum) */
.badge.earned {
    background: linear-gradient(135deg, #FFD600 0%, #F59E0B 100%); /* Altın Sarısı Gradyan */
    border: 1px solid #FCD34D;
    color: #111827; /* İkon koyu renk olsun ki okunsun */
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); /* Hafif sarı parıltı */
    transform: scale(1.05);
}

/* Hover Efekti */
.badge.earned:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
    z-index: 10;
}

/* Tooltip (Üzerine gelince isim yazsın) */
.badge:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #1F2937;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    animation: tooltipFade 0.2s forwards;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Ok işareti (Tooltip için) */
.badge:hover::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1F2937 transparent;
    opacity: 0;
    animation: tooltipFade 0.2s forwards;
}

@keyframes tooltipFade {
    to { opacity: 1; bottom: -30px; } /* Before için bottom -10px'te kalmalı, after hareketi için */
}
/* =========================================
   MOBİL DÜZELTMELERİ (TAŞMA YOK)
   ========================================= */
@media (max-width: 1000px) {
    /* Genel Taşma Engelleyici */
    body, html {
        overflow-x: hidden; /* Yatay kaydırmayı kapat */
        width: 100%;
        position: relative;
    }

    /* Üst Header */
    .mobile-top-bar {
        width: 100%;
        max-width: 100vw; /* Ekran genişliğini geçemez */
        box-sizing: border-box; /* Padding dahil hesapla */
        padding: 15px 20px;
        position: sticky;
        top: 0;
        z-index: 900;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    /* Alt Navigasyon (Sidebar -> Bottom Bar) */
    .sidebar {
        width: 100%;
        height: 60px;
        flex-direction: row;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 0; /* İç boşluğu sıfırla */
        justify-content: space-between; /* İkonları yay */
        border-top: 1px solid var(--border);
        border-right: none;
        background: rgba(255,255,255,0.98); /* Blur yerine düz renk (performans için) */
        z-index: 1000;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    }

    .menu {
        flex-direction: row;
        width: 100%;
        height: 100%;
        justify-content: space-around; /* Eşit aralık */
        align-items: center;
        padding: 0 10px; /* Kenarlardan hafif boşluk */
        margin: 0;
        gap: 0;
    }

    .menu a {
        width: auto;
        height: 100%;
        padding: 0 15px; /* Tıklama alanı */
        border-radius: 0;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
    }
    
    /* Aktif menüde alt çizgi (mobilde daha şık) */
    .menu a.active {
        background: transparent;
        color: var(--primary);
        transform: none;
        border-top: 3px solid var(--primary);
    }

    /* Grid İptali */
    .grid-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        padding-bottom: 90px; /* Alt menü payı */
    }
    
    .panel-user, .panel-garage, .panel-widgets {
        padding: 0;
        overflow: visible;
    }
}