/* ══════════════════════════════════════════════════════════════════════
   freerider-theme.css
   Freerider Evrensel Renk Sistemi — tüm Tailwind class'larını
   OLED Siyah + Primary Blue (#3b82f6) temasına çeker.
   
   KAPSAM: button, a, div, span — HER element tipine uygulanır.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── CSS DEĞİŞKENLERİ ─────────────────────────────────────────────── */
:root {
    --bg-base:       #000000;
    --bg-surface:    #0a0a0c;
    --bg-glass:      rgba(15, 23, 42, 0.6);
    --blue-primary:  #3b82f6;
    --blue-hover:    #2563eb;
    --blue-glow:     rgba(59, 130, 246, 0.4);
    --text-primary:  #ffffff;
    --text-secondary:#94a3b8;
    --border-color:  rgba(59, 130, 246, 0.15);
    /* Buton gradients */
    --btn-grad:      linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
    --btn-grad-hover:linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
    --btn-shadow:    0 4px 15px rgba(59,130,246,0.35), 0 1px 3px rgba(0,0,0,0.3);
    --btn-shadow-h:  0 6px 22px rgba(59,130,246,0.55), 0 2px 8px rgba(0,0,0,0.4);
}

/* ─── 1. PRIMARY BUTON ─────────────────────────────────────────────── */
/* Sky, Blue, Indigo, Violet, Teal, Cyan, Orange, Amber, Yellow        */
/* TÜMÜ gradient primary blue'ya çevrilir.                              */
.bg-sky-400, .bg-sky-500, .bg-sky-600, .bg-sky-700,
.bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-indigo-400, .bg-indigo-500, .bg-indigo-600,
.bg-violet-400, .bg-violet-500, .bg-violet-600,
.bg-purple-400, .bg-purple-500, .bg-purple-600, .bg-purple-700,
.bg-teal-400, .bg-teal-500, .bg-teal-600,
.bg-cyan-400, .bg-cyan-500, .bg-cyan-600,
.bg-orange-400, .bg-orange-500, .bg-orange-600,
.bg-amber-400, .bg-amber-500, .bg-amber-600,
.bg-yellow-500, .bg-yellow-600 {
    background: var(--btn-grad) !important;
    box-shadow: var(--btn-shadow) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

.bg-sky-400:hover, .bg-sky-500:hover, .bg-sky-600:hover, .bg-sky-700:hover,
.bg-blue-400:hover, .bg-blue-500:hover, .bg-blue-600:hover, .bg-blue-700:hover,
.bg-indigo-400:hover, .bg-indigo-500:hover, .bg-indigo-600:hover,
.bg-violet-400:hover, .bg-violet-500:hover, .bg-violet-600:hover,
.bg-purple-400:hover, .bg-purple-500:hover, .bg-purple-600:hover, .bg-purple-700:hover,
.bg-teal-400:hover, .bg-teal-500:hover, .bg-teal-600:hover,
.bg-cyan-400:hover, .bg-cyan-500:hover, .bg-cyan-600:hover,
.bg-orange-400:hover, .bg-orange-500:hover, .bg-orange-600:hover,
.bg-amber-400:hover, .bg-amber-500:hover, .bg-amber-600:hover,
.bg-yellow-500:hover, .bg-yellow-600:hover {
    background: var(--btn-grad-hover) !important;
    box-shadow: var(--btn-shadow-h) !important;
    transform: translateY(-1px) !important;
}

.bg-sky-500:active, .bg-blue-500:active, .bg-indigo-500:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Hover variant class'ları */
.hover\:bg-sky-400:hover, .hover\:bg-sky-500:hover, .hover\:bg-sky-600:hover, .hover\:bg-sky-700:hover,
.hover\:bg-blue-400:hover, .hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover,
.hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover,
.hover\:bg-violet-500:hover, .hover\:bg-teal-500:hover,
.hover\:bg-purple-400:hover, .hover\:bg-purple-500:hover, .hover\:bg-purple-600:hover,
.hover\:bg-orange-500:hover, .hover\:bg-amber-500:hover {
    background: var(--btn-grad-hover) !important;
    box-shadow: var(--btn-shadow-h) !important;
}

/* ─── 2. SECONDARY BUTON ───────────────────────────────────────────── */
/* Zinc, Gray, Neutral → OLED yüzey + mavi border                      */
.bg-zinc-600, .bg-zinc-700, .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
.bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900,
.bg-neutral-600, .bg-neutral-700, .bg-neutral-800, .bg-neutral-900 {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.bg-zinc-600:hover, .bg-zinc-700:hover, .bg-zinc-800:hover, .bg-zinc-900:hover,
.bg-gray-600:hover, .bg-gray-700:hover, .bg-gray-800:hover, .bg-gray-900:hover,
.bg-neutral-600:hover, .bg-neutral-700:hover, .bg-neutral-800:hover {
    background-color: rgba(59,130,246,0.09) !important;
    border-color: rgba(59,130,246,0.4) !important;
    color: var(--text-primary) !important;
}

.hover\:bg-zinc-700:hover, .hover\:bg-zinc-800:hover, .hover\:bg-zinc-900:hover,
.hover\:bg-gray-700:hover, .hover\:bg-gray-800:hover, .hover\:bg-gray-900:hover {
    background-color: rgba(59,130,246,0.09) !important;
    border-color: rgba(59,130,246,0.4) !important;
}

/* bg-white → dark */
.bg-white {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.bg-white:hover, .hover\:bg-white:hover {
    background-color: rgba(59,130,246,0.08) !important;
}

/* ─── 3. SEMANTIC: KIRMIZI — değişmez ─────────────────────────────── */
.bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700 {
    transition: all 0.2s ease !important;
}
.bg-red-500:hover, .bg-red-600:hover, .hover\:bg-red-500:hover, .hover\:bg-red-600:hover {
    background-color: #dc2626 !important;
    box-shadow: 0 4px 15px rgba(239,68,68,0.4) !important;
    transform: translateY(-1px) !important;
}

/* ─── 4. SEMANTIC: YEŞİL — değişmez (onayla/satın al/giriş) ─────── */
.bg-green-400, .bg-green-500, .bg-green-600,
.bg-emerald-400, .bg-emerald-500, .bg-emerald-600 {
    transition: all 0.2s ease !important;
}
.bg-green-500:hover, .bg-green-600:hover,
.bg-emerald-500:hover, .hover\:bg-green-500:hover, .hover\:bg-green-600:hover {
    background-color: #16a34a !important;
    box-shadow: 0 4px 15px rgba(34,197,94,0.4) !important;
    transform: translateY(-1px) !important;
}

/* ─── 5. TAB / FİLTRE BUTONLARI ───────────────────────────────────── */
.tab-btn,
[role="tab"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text-secondary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.tab-btn:hover, [role="tab"]:hover {
    color: var(--text-primary) !important;
    border-bottom-color: rgba(59,130,246,0.4) !important;
    background: transparent !important;
    transform: none !important;
}
.tab-btn.active,
[role="tab"][aria-selected="true"] {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 2px solid var(--blue-primary) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}
.admin-tab-btn.active-admin-tab {
    background: rgba(59,130,246,0.12) !important;
    border: 1px solid rgba(59,130,246,0.35) !important;
    color: #bae6fd !important;
    border-radius: 8px !important;
    transform: none !important;
}

/* ─── 6. INPUT SUBMIT/BUTTON ───────────────────────────────────────── */
input[type="submit"],
input[type="button"] {
    background: var(--btn-grad) !important;
    box-shadow: var(--btn-shadow) !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
}
input[type="submit"]:hover, input[type="button"]:hover {
    background: var(--btn-grad-hover) !important;
    box-shadow: var(--btn-shadow-h) !important;
    transform: translateY(-1px) !important;
}

/* ─── 7. METİN RENKLERİ ─────────────────────────────────────────────── */
.text-white { color: var(--text-primary) !important; }
.text-zinc-100, .text-gray-100, .text-neutral-100 { color: var(--text-primary) !important; }
.text-zinc-200, .text-gray-200 { color: #f1f5f9 !important; }
.text-zinc-300, .text-gray-300, .text-slate-300 { color: #cbd5e1 !important; }
.text-zinc-400, .text-gray-400, .text-neutral-400 { color: var(--text-secondary) !important; }
.text-zinc-500, .text-gray-500 { color: #64748b !important; }
.text-zinc-600, .text-gray-600 { color: #475569 !important; }
.text-sky-300, .text-sky-400, .text-sky-500, .text-sky-600 { color: var(--blue-primary) !important; }
.text-blue-300, .text-blue-400, .text-blue-500 { color: var(--blue-primary) !important; }
.text-indigo-400, .text-indigo-500 { color: var(--blue-primary) !important; }

/* ─── 8. BORDER RENKLERİ ─────────────────────────────────────────────── */
.border-zinc-700, .border-gray-700 { border-color: rgba(59,130,246,0.2) !important; }
.border-zinc-800, .border-gray-800 { border-color: var(--border-color) !important; }
.border-sky-500, .border-sky-600, .border-blue-500, .border-blue-600 { border-color: var(--blue-primary) !important; }

/* ─── 9. ARKA PLAN RENK DÜZELTMELERİ ──────────────────────────────── */
.bg-zinc-950, .bg-gray-950 { background-color: var(--bg-base) !important; }
.bg-sky-900, .bg-blue-900 { background-color: rgba(59,130,246,0.12) !important; }
.bg-sky-950, .bg-blue-950 { background-color: rgba(59,130,246,0.07) !important; }

/* ─── 10. GENEL ─────────────────────────────────────────────────────── */
.divide-zinc-800 > * + *, .divide-gray-800 > * + * { border-color: var(--border-color) !important; }
::placeholder { color: #475569 !important; }

/* ─── 11. GRADIENT KOMBİNASYON OVERRIDE'LARI ───────────────────────── */
/* from-purple-* to-pink-* (Social follow button, save button) → mavi gradient */
[class*="from-purple"][class*="to-pink"],
[class*="from-pink"][class*="to-purple"],
[class*="from-purple"][class*="to-orange"] {
    background: var(--btn-grad) !important;
    box-shadow: var(--btn-shadow) !important;
    color: #ffffff !important;
}
[class*="from-purple"][class*="to-pink"]:hover,
[class*="from-pink"][class*="to-purple"]:hover,
[class*="from-purple"][class*="to-orange"]:hover {
    background: var(--btn-grad-hover) !important;
    box-shadow: var(--btn-shadow-h) !important;
    transform: translateY(-1px) !important;
}

/* from-sky-* to-sky-* (Avatar kaydet) → mavi gradient */
[class*="from-sky"][class*="to-sky"],
[class*="from-blue"][class*="to-blue"],
[class*="from-sky"][class*="to-blue"],
[class*="from-blue"][class*="to-sky"] {
    background: var(--btn-grad) !important;
    box-shadow: var(--btn-shadow) !important;
    color: #ffffff !important;
}

/* ─── 12. BOTTOM NAV OLED SIYAH ───────────────────────────────────── */
#bottom-nav {
    background: rgba(0,0,0,0.96) !important;
    background-color: rgba(0,0,0,0.96) !important;
    border-top: 1px solid rgba(59,130,246,0.12) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Bottom nav ikonları — aktif ikon mavi, pasif gri */
#bottom-nav button, #bottom-nav a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease !important;
}
#bottom-nav button:hover, #bottom-nav a:hover,
#bottom-nav button.active, #bottom-nav a.active {
    background: transparent !important;
    color: var(--blue-primary) !important;
    transform: none !important;
}

/* ─── 13. SHADOW/GLOW RENK DÜZELTMESİ ─────────────────────────────── */
/* Mor glow shadow'ları mavi glow'a çevir */
[style*="rgba(168,85,247"] { 
    /* purple/violet glow overridden by filter below */
}
.shadow-\[0_0_20px_rgba\(168\,85\,247\,0\.4\)\] { box-shadow: 0 0 20px rgba(59,130,246,0.4) !important; }
.shadow-\[0_0_15px_rgba\(168\,85\,247\,0\.4\)\] { box-shadow: 0 0 15px rgba(59,130,246,0.4) !important; }
.shadow-\[0_0_10px_rgba\(249\,115\,22\,0\.4\)\] { box-shadow: 0 0 10px rgba(59,130,246,0.35) !important; }

/* ─── 14. PAZAR (MARKET) EKRANI ────────────────────────────────────── */
/* İlan Ver butonu yeşil KALIR (satın alma / aksiyon onaylama) */
/* Kategori filtreler — aktif filtre mavi */
#screen-market .bg-emerald-500\/20 { background-color: rgba(59,130,246,0.15) !important; }
#screen-market .text-emerald-400 { color: var(--blue-primary) !important; }
#screen-market .border-emerald-500\/50 { border-color: rgba(59,130,246,0.35) !important; }

/* ─── 15. PROFIL EKRANI ────────────────────────────────────────────── */
/* Profili Düzenle, Ayarlar butonları zaten bg-zinc-800 → secondary olarak doğru */
/* Avatar Kaydet (from-sky-600 to-sky-400) → yukarıda gradient override ile yakalandı */

/* ─── 17. NATIVE SELECT DARK MODE (Pazar Sıralama Beyaz Ekran Fix) ─── */
select,
select option {
    background-color: #0a0a0c !important;
    background: #0a0a0c !important;
    color: #cbd5e1 !important;
    border-color: rgba(59,130,246,0.2) !important;
}
select:focus {
    outline: none !important;
    border-color: rgba(59,130,246,0.5) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15) !important;
}
/* Specifically target market sort select */
#market-sort-select {
    background-color: #0a0a0c !important;
    color: #cbd5e1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
    cursor: pointer !important;
}

/* ─── 18. SIDEBAR MENÜ — CLEAN INSTAGRAM STYLE ─────────────────────── */
/* Sadece aktif öğe hafif highlight */
#sidebar .tab-btn.active {
    background: rgba(255,255,255,0.07) !important;
    color: #ffffff !important;
}
/* Sidebar arka plan siyah */
#sidebar {
    background: #000000 !important;
}

/* ─── 19. LOGOUT BUTONU (Kırmızı) ──────────────────────────────────── */
#profile-logout-btn {
    background-color: rgba(127,29,29,0.15) !important;
    background: rgba(127,29,29,0.15) !important;
    border-color: rgba(239,68,68,0.35) !important;
    color: #f87171 !important;
}
#profile-logout-btn:hover {
    background-color: rgba(239,68,68,0.2) !important;
    background: rgba(239,68,68,0.2) !important;
    border-color: rgba(239,68,68,0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(239,68,68,0.25) !important;
    transform: none !important;
}

/* ─── 20. AI HUB BOTTOM NAV — Mavi ─────────────────────────────────── */
#bnav-ai {
    color: #60a5fa !important;
}
#bnav-ai:hover, #bnav-ai.active {
    color: #93c5fd !important;
}

/* ─── 21. NATIVE APP / WEBVIEW DAVRANIŞ KURALLARI ──────────────────── */
/* Not: static/css/style.css index.html'den hiç linklenmiyor (ölü dosya,
   yüklenmiyor) — bu yüzden bu kurallar gerçekten yüklenen bu dosyaya
   eklendi. Amaç: Android WebView içinde %100 native app hissi. */

/* Metin seçimini kapat — UI kabuğu (buton/kart/nav/avatar). Aşağıdaki
   input/textarea/contenteditable/kullanıcı-içeriği kuralı bunu geri açar. */
body, button, .card, .nav-item, .avatar, #bottom-nav, #sidebar,
h1, h2, h3, h4, h5, h6, .btn-primary, .btn-secondary, .btn-ghost {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable="true"],
.chat-msg, .message-text, .selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* Resim/link/medyada uzun-basınca çıkan "Resmi Kaydet/Kopyala" menüsünü kapat */
img, a, video, .media-item, .avatar {
    -webkit-touch-callout: none;
}

/* Dokunma highlight flaşını kapat (varsayılan mavi/gri tarayıcı efekti) */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Kaydırma çubuklarını gizle — native app hissi (kaydırma işlevi korunur) */
.main-content, #chat-messages, .scroll-area, .modal-scroll,
.overflow-y-auto, .overflow-x-auto {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.main-content::-webkit-scrollbar, #chat-messages::-webkit-scrollbar,
.scroll-area::-webkit-scrollbar, .modal-scroll::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar {
    display: none;
}

/* Input/textarea/select odak — tarayıcı outline yerine mavi glow */
input:focus, textarea:focus {
    outline: none !important;
    border-color: rgba(59,130,246,0.6) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

/* iOS/Android'de klavye açılırken otomatik yakınlaştırmayı engelle */
input, textarea, select {
    font-size: 16px !important;
}