/* =========================================
   AY-TECH | OTO ANALİZ MODÜLÜ
   ========================================= */

/* --- 1. GÜVENLİK KATMANI (Blur & Lock) --- */
.auth-lock-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px); /* BLUR EFEKTİ */
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex; justify-content: center; align-items: center;
}
.auth-lock-screen.hidden { display: none; }

.lock-content {
    background: #fff; padding: 40px; border-radius: 20px;
    text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 1px solid var(--border); max-width: 400px; width: 90%;
}
.lock-content i { font-size: 3rem; color: var(--primary-red); margin-bottom: 20px; }
.lock-content h2 { font-family: 'Orbitron'; color: var(--text-dark); margin-bottom: 10px; }
.lock-content p { color: var(--text-gray); font-size: 0.9rem; margin-bottom: 25px; line-height: 1.5; }

.lock-actions { display: flex; gap: 10px; justify-content: center; }
.lock-btn {
    padding: 12px 25px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: 0.3s;
}
.lock-btn.primary { background: var(--text-dark); color: #fff; }
.lock-btn.primary:hover { background: var(--primary-red); }
.lock-btn.secondary { background: #f3f4f6; color: var(--text-dark); border: 1px solid var(--border); }
.lock-btn.secondary:hover { background: #e5e7eb; }


/* --- 2. KONTROL PANELİ (Filtreler) --- */
.control-panel {
    background: var(--surface);
    margin: 20px 20px 15px 20px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.cp-grid {
    display: flex; gap: 15px; align-items: flex-end;
}

.cp-item { flex: 1; min-width: 150px; }
.cp-item label {
    display: block; font-size: 0.7rem; color: var(--text-gray); font-weight: 800;
    margin-bottom: 8px; font-family: 'Inter'; letter-spacing: 0.5px;
}

.ay-select {
    width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border);
    background: #F9FAFB; font-family: 'Inter'; font-weight: 600; color: var(--text-dark);
    outline: none; transition: 0.3s; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 10px auto;
}
.ay-select:focus { border-color: var(--primary-red); background-color: #fff; }
.ay-select:disabled { background-color: #f3f4f6; color: #bbb; cursor: not-allowed; }

.run-analysis-btn {
    flex: 0.6; height: 45px; border: none; border-radius: 8px;
    background: var(--text-dark); color: #fff; font-family: 'Orbitron';
    font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 8px; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.run-analysis-btn:hover { background: var(--primary-red); transform: translateY(-2px); }


/* --- 3. DASHBOARD GRID (SOL 70 - SAĞ 30) --- */
.dashboard-split {
    display: flex; gap: 20px; padding: 0 20px 20px 20px;
    height: calc(100vh - 130px); /* Ekranı doldur, scroll içeride olsun */
    overflow: hidden;
}

/* Sol Panel (Grafik ve Veriler) */
.left-wing {
    flex: 7; display: flex; flex-direction: column; gap: 20px;
    overflow-y: auto; padding-right: 5px; /* Scrollbar payı */
}

/* İstatistik Kutuları */
.stats-rack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.stat-box {
    background: #fff; padding: 15px; border-radius: 12px; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow); transition: 0.2s;
}
.stat-box:hover { transform: translateY(-3px); border-color: var(--primary-red); }

.stat-icon {
    width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.stat-icon.total { background: #EFF6FF; color: #2563EB; }
.stat-icon.avg { background: #ECFDF5; color: #059669; }
.stat-icon.min { background: #FFF7ED; color: #EA580C; }
.stat-icon.max { background: #FEF2F2; color: #DC2626; }

.stat-info { display: flex; flex-direction: column; }
.stat-info .val { font-family: 'Orbitron'; font-weight: 700; font-size: 1.1rem; color: var(--text-dark); }
.stat-info .lbl { font-size: 0.65rem; font-weight: 700; color: var(--text-gray); margin-top: 3px; }

/* Grafik Kutusu */
.chart-wrapper-box {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 20px; flex: 1; min-height: 350px; display: flex; flex-direction: column;
}
.box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.box-head h4 { font-family: 'Montserrat'; font-weight: 700; font-size: 0.9rem; color: var(--text-dark); }
.badge-live { background: var(--primary-red); color: #fff; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; animation: pulse 2s infinite; }
.canvas-container { flex: 1; position: relative; width: 100%; }

/* AI Kutusu */
.ai-insight-box {
    background: linear-gradient(145deg, #1F2937, #111827); border-radius: 12px;
    padding: 20px; color: #e5e7eb; border-left: 5px solid var(--accent-yellow);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.ai-head { font-family: 'Orbitron'; font-weight: 700; color: var(--accent-yellow); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.ai-body { font-size: 0.9rem; line-height: 1.6; opacity: 0.9; white-space: pre-line; }


/* --- 4. SAĞ PANEL (Liste) --- */
.right-wing {
    flex: 3; min-width: 300px;
    display: flex; flex-direction: column;
}

.listing-panel {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    height: 100%; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: var(--shadow);
}

.lp-head {
    padding: 15px; background: #F9FAFB; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
.lp-head h4 { font-family: 'Montserrat'; font-weight: 700; font-size: 0.85rem; }
.lp-head select { padding: 6px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.75rem; outline: none; }

.lp-body { flex: 1; overflow-y: auto; padding: 10px; }

/* İlan Kartı */
.ad-card {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; padding: 12px;
    margin-bottom: 8px; transition: 0.2s; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
    position: relative;
}
.ad-card:hover { border-color: var(--primary-red); background: #fffcfc; transform: translateX(3px); }
.ad-title { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ad-meta { font-size: 0.7rem; color: var(--text-gray); font-weight: 500; display: flex; gap: 10px; }
.ad-price { font-family: 'Orbitron'; font-weight: 700; color: var(--primary-red); font-size: 1rem; align-self: flex-end; }

.lp-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9CA3AF; gap: 10px; font-size: 0.9rem; }
.lp-empty i { font-size: 2.5rem; opacity: 0.3; }


/* --- 5. RESPONSIVE (MOBİL) --- */
@media (max-width: 900px) {
    /* Layout */
    .dashboard-split { flex-direction: column; height: auto; overflow: visible; padding-bottom: 80px; }
    .left-wing, .right-wing { flex: none; width: 100%; overflow: visible; }
    
    /* Filtreler */
    .cp-grid { flex-direction: column; align-items: stretch; }
    .run-analysis-btn { width: 100%; margin-top: 10px; }
    
    /* İstatistikler (2x2) */
    .stats-rack { grid-template-columns: 1fr 1fr; }
    
    /* Grafik Boyutu */
    .chart-wrapper-box { min-height: 250px; }
    
    /* Liste Yüksekliği */
    .listing-panel { max-height: 500px; }
}

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
/* =========================================
   NAVIGASYON (SOL SABİT MENÜ)
   ========================================= */
.nav-rail {
    width: 80px; /* Genişliği biraz artırdık ki rahat sığsın */
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    z-index: 999;
}

.desktop-logo {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #D32F2F;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 20px; /* İkonlar arası boşluk */
    width: 100%;
    align-items: center;
}

.nav-item {
    width: 50px;  /* Genişlik arttı */
    height: 50px; /* Yükseklik arttı */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #6B7280; /* Gri tonu */
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.4rem; /* İkon boyutu */
    position: relative; /* HOT tag'i buna göre konumlanacak */
    background: transparent;
}

/* Hover ve Aktif Durumu */
.nav-item:hover, .nav-item.active {
    background: #FFF1F2; /* Açık kırmızı arka plan */
    color: #D32F2F; /* Kırmızı İkon */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15);
}

/* HOT ETİKETİ (DÜZELTİLDİ) */
.nav-hot-tag {
    position: absolute;
    top: -8px;   /* Yukarı taşıdık */
    right: -10px; /* Sağa taşıdık */
    background-color: #FFD600; /* Sarı zemin */
    color: #000;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem; /* Yazı boyutu küçüldü */
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 6px;
    border: 2px solid #FFFFFF; /* Beyaz çerçeve (karışmaması için) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* MOBİL İÇİN DÜZENLEME (Navigasyon Altta) */
@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;
    }
}