/* * GlomaxGPT — ChatGPT UI Fix (token-uyumlu) * ============================================================ * Hardcoded renkler kaldırıldı, tüm renkler token'dan gelir. * ============================================================ */ /* ── 1. TOPBAR TABS — pill stili ── */ /* ══════════════════════════════════════════════════════════════════════ IMAGE-GEN — ChatGPT Images Style Redesign ══════════════════════════════════════════════════════════════════════ */ /* ── Topbar gizle (masaüstünde image-gen sayfasında yok) ── */ @media (min-width: 769px) { body.image-gen-page .inner-topbar, body.image-gen-page .topbar, body.image-gen-page #topbar { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════ IMAGE-GEN WELCOME — ChatGPT Images Style v2 (SVG ikonlu) ══════════════════════════════════════════════════════════════════════ */ /* ── Welcome container ── */ body.image-gen-page .ig-welcome { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; flex: 1 !important; min-height: 0 !important; padding: 36px 24px 24px !important; text-align: center !important; gap: 32px !important; } /* ── Hero bölümü ── */ .ig-welcome-hero { display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left; } /* Logo: favicon img */ body.image-gen-page .ig-welcome-logo { width: 56px !important; height: 56px !important; border-radius: 16px !important; background: var(--surface2) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px var(--border) !important; overflow: hidden !important; padding: 0 !important; } body.image-gen-page .ig-welcome-logo img { width: 40px !important; height: 40px !important; display: block !important; border-radius: 6px !important; object-fit: contain !important; } .ig-welcome-title-wrap { display: flex; flex-direction: column; gap: 5px; } body.image-gen-page .ig-welcome h1 { font-size: 1.85rem !important; font-weight: 700 !important; letter-spacing: -.03em !important; margin: 0 !important; line-height: 1.1 !important; } html[data-theme="dark"] body.image-gen-page .ig-welcome h1 { color: #fff !important; } html[data-theme="light"] body.image-gen-page .ig-welcome h1 { color: #111 !important; } body.image-gen-page .ig-welcome p.ig-welcome-sub { font-size: .88rem !important; color: var(--text3) !important; margin: 0 !important; line-height: 1.55 !important; } /* ── Suggestion Grid 2×2 ── */ .ig-suggestion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; width: 100%; max-width: 560px; } /* Kart */ .ig-suggestion-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); cursor: pointer; transition: border-color .18s, background .18s, transform .16s, box-shadow .18s; text-align: left; font-family: inherit; color: var(--text); position: relative; -webkit-tap-highlight-color: transparent; outline: none; } .ig-suggestion-card:hover { border-color: rgba(99,102,241,.38); background: var(--surface3); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.13); } .ig-suggestion-card:active { transform: translateY(0) scale(.975); box-shadow: none; } /* Thumbnail: gradient arka plan + SVG ikon */ .ig-suggestion-thumb { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, var(--card-from), var(--card-to)); color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18); } .ig-suggestion-thumb svg { width: 20px; height: 20px; stroke: rgba(255,255,255,.95); } /* Metin grubu */ .ig-suggestion-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ig-suggestion-label { font-size: .83rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.35; } .ig-suggestion-sub { font-size: .73rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.35; } /* Ok ikonu */ .ig-suggestion-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--text4); opacity: 0; transition: opacity .15s, transform .15s; transform: translateX(-4px); } .ig-suggestion-card:hover .ig-suggestion-arrow { opacity: 1; transform: translateX(0); } /* Light tema */ [data-theme="light"] .ig-suggestion-card { background: linear-gradient(135deg, #01757b00, #63006514); border-color: rgb(164 255 0); } [data-theme="light"] .ig-suggestion-card:hover { background: #f0f0f8; border-color: rgba(99,102,241,.3); box-shadow: 0 6px 22px rgba(0,0,0,.09); } /* ── Input wrapper ── */ body.image-gen-page .ig-input-wrapper { padding: 0 20px 20px !important; } body.image-gen-page .ig-input-area { border-radius: 20px !important; box-shadow: 0 2px 16px rgba(0,0,0,.07) !important; } [data-theme="dark"] body.image-gen-page .ig-input-area { box-shadow: 0 2px 20px rgba(0,0,0,.32) !important; } /* ── Mobile ── */ @media (max-width: 600px) { .ig-suggestion-grid { grid-template-columns: 1fr; max-width: 100%; } body.image-gen-page .ig-welcome { padding: 24px 14px 18px !important; gap: 22px !important; } .ig-welcome-hero { gap: 12px; } body.image-gen-page .ig-welcome-logo { width: 46px !important; height: 46px !important; } body.image-gen-page .ig-welcome h1 { font-size: 1.45rem !important; } .ig-suggestion-thumb { width: 40px; height: 40px; border-radius: 10px; } .ig-suggestion-thumb svg { width: 18px; height: 18px; } .ig-suggestion-card { padding: 10px 12px 10px 10px; gap: 10px; } .ig-suggestion-arrow { display: none; } } /* ── tb-tabs: ayrı oval pill butonlar, wrapper'da arka plan/border yok ── */ .tb-tabs { border-radius: 0 !important; background: none !important; border: none !important; gap: 6px !important; padding: 0 !important; display: flex !important; align-items: center !important; } .tb-tab { border-radius: 999px !important; padding: 6px 20px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text2, rgba(255,255,255,.55)) !important; background: transparent !important; border: 1px solid transparent !important; transition: background .15s, color .15s, border-color .15s !important; white-space: nowrap !important; line-height: 1.5 !important; cursor: pointer !important; min-width: 0 !important; flex-shrink: 0 !important; font-family: inherit !important; } .tb-tab.active { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.18) !important; color: rgba(255,255,255,.95) !important; font-weight: 600 !important; box-shadow: 0 1px 6px rgba(0,0,0,.2) !important; } .tb-tab:hover:not(.active) { color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; } /* Light tema */ [data-theme="light"] .tb-tab { color: rgba(0,0,0,.5) !important; } [data-theme="light"] .tb-tab.active { background: rgba(0,0,0,.07) !important; border-color: rgba(0,0,0,.14) !important; color: rgba(0,0,0,.9) !important; } [data-theme="light"] .tb-tab:hover:not(.active) { background: rgba(0,0,0,.04) !important; color: rgba(0,0,0,.75) !important; } /* Eski class uyumluluÄŸu */ .topbar-tabs { border-radius: 999px !important; } .topbar-tab { border-radius: 999px !important; padding: 5px 18px !important; } /* ── 2. TOPBAR / SIDEBAR her zaman görünür ── */ .topbar, #topbar, .inner-topbar { display: flex !important; position: sticky !important; top: 0 !important; z-index: 400 !important; flex-shrink: 0 !important; width: 100% !important; background: var(--bg-main) !important; } .sidebar, #sidebar, nav.sidebar { display: flex !important; flex-direction: column !important; } /* ── 3. LIGHT MOD MESAJ RENKLERÄ° ── */ [data-theme="light"] .msg-bubble.assistant { color: var(--text-primary) !important; } [data-theme="light"] .stream-cursor { color: var(--text-primary) !important; } [data-theme="light"] .msg-wrapper { color: var(--text-primary) !important; } /* ── 4. ÇALIÅžMA PANELÄ° ENTEGRASYONu ── */ .work-integration-card { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; transition: background .12s; } .work-integration-card:hover { background: var(--bg-elevated) !important; } .work-integration-icon { background: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; } .work-integration-icon svg { color: var(--icon-default) !important; stroke: var(--icon-default) !important; } .work-integration-name { color: var(--text-primary) !important; } .work-integration-desc { color: var(--text-secondary) !important; } .work-tool-btn { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; transition: background .12s, color .12s; } .work-tool-btn:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; } .work-welcome-title { color: var(--text-primary) !important; } /* ── 5. SPACE ORBS — gizli ── */ .space-orbs, .space-orb { opacity: 0 !important; pointer-events: none !important; } /* ── 6. CHAT SAYFA LAYOUT ── */ body.chat-page { height: 100vh !important; overflow: hidden !important; margin: 0 !important; } body.chat-page #main.app-with-sidebar { display: flex !important; width: 100% !important; height: 100vh !important; overflow: hidden !important; } body.chat-page .sidebar { flex-shrink: 0 !important; width: var(--sidebar-width, 260px) !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; position: relative !important; display: flex !important; flex-direction: column !important; } body.chat-page.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width, 60px) !important; } body.chat-page .main-content, body.chat-page #main-content { flex: 1 !important; min-width: 0 !important; height: 100vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } body.chat-page .topbar { position: sticky !important; top: 0 !important; z-index: 400 !important; flex-shrink: 0 !important; height: 48px !important; min-height: 48px !important; width: 100% !important; } body.chat-page #chat-main { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } body.chat-page #messages { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; min-height: 0 !important; scroll-behavior: smooth !important; } body.chat-page #input-area { flex-shrink: 0 !important; width: 100% !important; z-index: 10 !important; background: #00010a00 !important; } body.chat-page #welcome-screen, body.chat-page .welcome-screen { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; overflow-y: auto !important; } /* ── 7. TOPBAR BLUR GRADIENT ── */ body.chat-page .topbar::after { content: ''; position: absolute; bottom: -12px; left: 0; right: 0; height: 12px; background: linear-gradient(to bottom, var(--bg-main), transparent); pointer-events: none; z-index: 1; } /* ── 8. İÇ SAYFA LAYOUT (chat dışı) ── */ body:not(.chat-page) #main-content, body.explore-page #main-content, body.history-page #main-content, body.images-page #main-content, body.settings-page #main-content, body.profile-page #main-content, body.pricing-page #main-content, body.projects-page #main-content, body.support-page #main-content, body.stats-page #main-content, body.voice-page #main-content, body.models-page #main-content, body.tools-page #main-content, body.plugins-page #main-content, body.music-page #main-content, body.video-page #main-content, body.prompt-library-page #main-content, body.notifications-page #main-content, body.shared-page #main-content, body.subscription-page #main-content, body.help-page #main-content { overflow-y: auto !important; overflow-x: hidden !important; height: 100dvh !important; } body:not(.chat-page) .app-with-sidebar .page-main, body:not(.chat-page) .page-main { flex: 1 1 0 !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; } body:not(.chat-page) .app-with-sidebar { height: 100dvh !important; overflow: hidden !important; } body:not(.chat-page) .app-with-sidebar > .main-content, body:not(.chat-page) #main-content { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* ── image-gen-page özel layout ── */ body.image-gen-page #main-content { overflow: hidden !important; display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; height: 100dvh !important; } body.image-gen-page .ig-main { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } body.image-gen-page .ig-messages { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; } body.image-gen-page .ig-input-wrapper { flex-shrink: 0 !important; overflow: visible !important; } /* Dropdown'lar overflow:hidden'dan etkilenmesin */ body.image-gen-page .ig-input-area, body.image-gen-page .ig-options-bar, body.image-gen-page .ig-options-center, body.image-gen-page .ig-dropdown-wrap { overflow: visible !important; } body.image-gen-page .ig-quota-bar { flex-shrink: 0 !important; } body.image-gen-page .ig-active-bar { flex-shrink: 0 !important; } @media (max-width: 768px) { body.image-gen-page #main-content { width: 100% !important; } /* Topbar görünür — inner-topbar.php yönetiyor */ body.image-gen-page .topbar, body.image-gen-page .inner-topbar { display: flex !important; } body.image-gen-page .ig-mobile-header { display: none !important; } /* ig-main: tüm alanı doldur */ body.image-gen-page .ig-main { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; } body.image-gen-page .ig-messages { padding: 10px 0 4px !important; } } @media (min-width: 769px) { /* Masaüstünde mobil header kesinlikle gizli */ body.image-gen-page .ig-mobile-header { display: none !important; } body.image-gen-page .sidebar-overlay { display: none !important; } } /* ── 9. MOBÄ°L sidebar overlay ── */ @media (max-width: 768px) { body.chat-page .sidebar { position: fixed !important; left: 0 !important; top: 0 !important; height: 100vh !important; z-index: 200 !important; transform: translateX(-100%) !important; transition: transform .25s ease !important; width: 85vw !important; max-width: 360px !important; } body.chat-page .sidebar.open, body.chat-page.sidebar-open .sidebar { transform: translateX(0) !important; } body.chat-page .main-content, body.chat-page #main-content { width: 100% !important; } } /* ══════════════════════════════════════════════════════ 10. KOD BLOÄžU — Modern header + scroll + dark/light ══════════════════════════════════════════════════════ */ /* Pre wrapper */ .msg-bubble pre, #messages pre { background: #0f0f1a !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; overflow: hidden !important; margin: 12px 0 !important; position: relative !important; padding: 0 !important; } [data-theme="light"] .msg-bubble pre, [data-theme="light"] #messages pre { background: #f6f8fa !important; border-color: #d0d7de !important; } /* Code içeriÄŸi — sadece yatay scroll, dikey scroll #messages'a bırak */ .msg-bubble pre code, #messages pre code { display: block !important; background: none !important; padding: 14px 16px !important; font-size: .82em !important; line-height: 1.65 !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; color: #c9d1d9 !important; font-family: 'JetBrains Mono','Fira Code','Consolas','Monaco',monospace !important; /* Yatay scroll eventlerini yakala, dikey olanları #messages'a bırak */ overscroll-behavior-x: contain !important; } [data-theme="light"] .msg-bubble pre code, [data-theme="light"] #messages pre code { color: #24292f !important; } /* Yatay scrollbar — ince */ .msg-bubble pre code::-webkit-scrollbar, #messages pre code::-webkit-scrollbar { width: 0; height: 5px; } .msg-bubble pre code::-webkit-scrollbar-track, #messages pre code::-webkit-scrollbar-track { background: transparent; } .msg-bubble pre code::-webkit-scrollbar-thumb, #messages pre code::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; } [data-theme="light"] .msg-bubble pre code::-webkit-scrollbar-thumb, [data-theme="light"] #messages pre code::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); } /* Kod Header */ .code-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px 8px 14px !important; background: rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; gap: 8px !important; min-height: 36px !important; } [data-theme="light"] .code-header { background: #eaedf0 !important; border-bottom-color: #d0d7de !important; } .code-header-left { display: flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; } /* Dil rozeti */ .code-lang-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: .69rem !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 5px !important; padding: 2px 7px !important; white-space: nowrap !important; } [data-theme="light"] .code-lang-badge { color: #57606a !important; background: #fff !important; border-color: #d0d7de !important; } /* Aksiyon butonları grubu */ .code-header-actions { display: flex !important; align-items: center !important; gap: 2px !important; flex-shrink: 0 !important; } /* Ortak buton stili */ .btn-copy-code, .btn-download-code, .btn-edit-code, .btn-preview-code { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 4px 9px !important; height: 26px !important; border-radius: 6px !important; border: 1px solid transparent !important; background: none !important; color: rgba(255,255,255,.45) !important; font-size: .72rem !important; font-weight: 500 !important; cursor: pointer !important; transition: background .12s, color .12s, border-color .12s !important; white-space: nowrap !important; font-family: inherit !important; line-height: 1 !important; } .btn-copy-code:hover, .btn-download-code:hover, .btn-edit-code:hover, .btn-preview-code:hover { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.1) !important; } .btn-copy-code.copied { color: #4ade80 !important; background: rgba(74,222,128,.1) !important; border-color: rgba(74,222,128,.2) !important; } .btn-preview-code.active { color: #60a5fa !important; background: rgba(96,165,250,.1) !important; border-color: rgba(96,165,250,.2) !important; } [data-theme="light"] .btn-copy-code, [data-theme="light"] .btn-download-code, [data-theme="light"] .btn-edit-code, [data-theme="light"] .btn-preview-code { color: #57606a !important; } [data-theme="light"] .btn-copy-code:hover, [data-theme="light"] .btn-download-code:hover, [data-theme="light"] .btn-edit-code:hover, [data-theme="light"] .btn-preview-code:hover { background: rgba(0,0,0,.07) !important; color: #24292f !important; border-color: #d0d7de !important; } [data-theme="light"] .btn-copy-code.copied { color: #166534 !important; background: rgba(22,163,74,.1) !important; } /* SVG ikon */ .btn-icon-only { display: block; flex-shrink: 0; } /* Mobilde buton etiketleri gizle */ @media (max-width: 600px) { .btn-label { display: none !important; } .btn-copy-code, .btn-download-code, .btn-edit-code, .btn-preview-code { padding: 4px 6px !important; gap: 0 !important; } .code-lang-badge { font-size: .65rem !important; padding: 2px 5px !important; } } /* ── Önizleme çerçevesi ── */ .code-block-wrap { position: relative; } .code-preview-frame { border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; background: #0d0d14; } [data-theme="light"] .code-preview-frame { background: #fff; border-color: #d0d7de; } .code-preview-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); } [data-theme="light"] .code-preview-bar { background: #eaedf0; border-bottom-color: #d0d7de; } .code-preview-dots { display: flex; gap: 5px; align-items: center; } .cpd { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .cpd-red { background: #ff5f57; } .cpd-yellow { background: #febc2e; } .cpd-green { background: #28c840; } .code-preview-bar-label { flex: 1; font-size: .72rem; color: rgba(255,255,255,.4); text-align: center; } [data-theme="light"] .code-preview-bar-label { color: #57606a; } .code-preview-close { background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; padding: 2px; display: flex; align-items: center; border-radius: 4px; transition: color .12s, background .12s; } .code-preview-close:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); } [data-theme="light"] .code-preview-close { color: #57606a; } [data-theme="light"] .code-preview-close:hover { color: #24292f; background: rgba(0,0,0,.08); } .code-preview-frame iframe { width: 100%; min-height: 220px; border: none; display: block; } /* ── Inline code (backtick) ── */ .msg-bubble code:not(pre code), #messages .msg-bubble code:not(pre code) { font-family: 'JetBrains Mono','Fira Code','Consolas',monospace !important; font-size: .84em !important; background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.1) !important; padding: 2px 6px !important; border-radius: 5px !important; color: #e2b96b !important; } [data-theme="light"] .msg-bubble code:not(pre code), [data-theme="light"] #messages .msg-bubble code:not(pre code) { background: rgba(175,184,193,.2) !important; border-color: rgba(175,184,193,.4) !important; color: #953800 !important; } /* ── Eski .code-copy-btn gizle ── */ .code-copy-btn { display: none !important; } /* ══════════════════════════════════════════════════════ 11. MESAJ KARTI — beyaz/gri arka planı kaldır ══════════════════════════════════════════════════════ */ .msg-content-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; position: relative !important; } .msg-content-card .message-content.in-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .msg-card-copy-btn { position: absolute !important; top: 0 !important; right: 0 !important; opacity: 0 !important; transition: opacity .15s !important; background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: 7px !important; padding: 4px 8px !important; color: var(--text2) !important; cursor: pointer !important; z-index: 2 !important; } .msg-content-card:hover .msg-card-copy-btn { opacity: 1 !important; } [data-theme="light"] .msg-card-copy-btn { background: #f0f0f0 !important; border-color: #ddd !important; color: #444 !important; } /* ══════════════════════════════════════════════════════ 12. WEB ARAMA GÖSTERGESÄ° — favicon + animasyon ══════════════════════════════════════════════════════ */ /* Arama durum container */ .gx-search-indicator { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 2px 0 6px; background: var(--surface, rgba(255,255,255,.04)); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; font-size: .79rem; color: var(--text2, #aaa); max-width: 520px; animation: gxSearchIn .2s ease; overflow: hidden; } [data-theme="light"] .gx-search-indicator { background: #f6f8fa; border-color: #d0d7de; color: #57606a; } @keyframes gxSearchIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Dönen küre ikonu */ .gx-search-globe { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: gxGlobeSpin 1.6s linear infinite; color: var(--accent, #7c3aed); } @keyframes gxGlobeSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Favicon ÅŸeridi */ .gx-search-favicons { display: flex; align-items: center; gap: 3px; flex-shrink: 0; } .gx-fav-img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; opacity: 0; animation: gxFavIn .3s ease forwards; border: 1px solid rgba(255,255,255,.1); } [data-theme="light"] .gx-fav-img { border-color: #d0d7de; } @keyframes gxFavIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } } .gx-fav-img:nth-child(1) { animation-delay: .0s; } .gx-fav-img:nth-child(2) { animation-delay: .12s; } .gx-fav-img:nth-child(3) { animation-delay: .24s; } .gx-fav-img:nth-child(4) { animation-delay: .36s; } .gx-fav-img:nth-child(5) { animation-delay: .48s; } /* Metin */ .gx-search-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .79rem; } /* Pulse nokta */ .gx-search-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #7c3aed); flex-shrink: 0; animation: gxPulse 1s ease-in-out infinite; } @keyframes gxPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } /* Tamamlandı durumu */ .gx-search-indicator.done { opacity: .6; animation: none; } .gx-search-indicator.done .gx-search-globe { animation: none; color: #4ade80; } .gx-search-indicator.done .gx-search-pulse { background: #4ade80; animation: none; } /* ── AraÅŸtırma sonrası "Yanıt hazırlanıyor..." adım göstergesi ── */ .gx-think-step { display: flex; align-items: center; gap: 7px; padding: 4px 2px; font-size: .78rem; color: var(--text3, #888); animation: gxSearchIn .2s ease; } [data-theme="light"] .gx-think-step { color: #888; } .gx-think-step-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #7c3aed); flex-shrink: 0; animation: gxPulse 1s ease-in-out infinite; } .gx-think-step-text { font-size: .78rem; color: var(--text3, #888); } /* ══════════════════════════════════════════════════════ 13. ZIP / HTML Ä°NDÄ°R — inline link (yanıt içinde) ══════════════════════════════════════════════════════ */ .gx-zip-offer { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; } .gx-zip-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent, #7c3aed) !important; font-size: .85rem; font-weight: 500; text-decoration: underline !important; text-underline-offset: 2px; cursor: pointer; transition: opacity .12s; } .gx-zip-link:hover { opacity: .75; } [data-theme="light"] .gx-zip-link { color: #2563eb !important; } .gx-zip-sub { font-size: .75rem; color: var(--text3, #888); white-space: nowrap; }