@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap'); /* ============================================================================= style2.css — Toparlanmış / Düzenlenmiş Sürüm ----------------------------------------------------------------------------- - Tema sistemi CSS değişkenleriyle yönetilir. Varsayılan: DARK (":root") - Light tema için sayfada: veya (projedeki JS'in hangi elementi değiştirdiğine göre ikisinden biri yeterli). - Bu dosya, header / hero / arama wizard / ilan kartları / footer / popup vb. tüm ana bileşenlerin stillerini içerir. - Amaç: Aynı görsel sonucu korurken tekrarları azaltmak, yorumları açıklamak ve küçük çakışmaları (ör: @keyframes isimleri) temizlemek. ============================================================================= */ /* ========================= 1) GLOBAL VARIABLES & THEMES ========================= */ html, body { overflow-x: hidden; } /* DARK DEFAULT */ :root { /* MAIN PALETTE */ --primary-color: #2563eb; --secondary-color: #22c55e; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #facc15; /* BACKGROUNDS */ --bg-primary: rgba(15, 23, 42, 0.92); /* kart arkaplanı */ --bg-secondary: #020617; /* sayfa arkaplanı */ /* TEXT */ --text-primary: #e5e7eb; --text-secondary: #9ca3af; /* BORDER */ --border-color: rgba(148, 163, 184, 0.35); /* SHADOWS */ --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.7); --shadow-md: 0 10px 26px rgba(15, 23, 42, 0.85); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.9); --shadow-xl: 0 26px 70px rgba(0, 0, 0, 0.95); /* RADIUS */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --transition: all 0.2s ease-out; /* BODY GRADIENT (DARK) */ --body-bg-start: #020617; --body-bg-mid: #020617; --body-bg-end: #020617; /* EXTRA VARS (duyuru popup + eski stil2 için) */ --primary: #2563eb; --primary-glow: rgba(37, 99, 235, 0.8); --bg-body: var(--bg-secondary); --surface-border: var(--border-color); /* Gold theme used on bazı yazılar */ --color-gold-500: #d4af37; } /* LIGHT THEME OVERRIDE */ /* LIGHT THEME OVERRIDE (Professional & Darker Tone) */ [data-theme="light"] { --primary-color: #2563eb; --secondary-color: #1e40af; /* Darker, more professional light theme background */ --bg-primary: #ffffff; --bg-secondary: #f1f5f9; --text-primary: #0f172a; /* Darker slate */ --text-secondary: #475569; --border-color: #cbd5e1; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12); /* Richer/Darker Gradient for Professional Look */ --body-bg-start: #f8fafc; --body-bg-mid: #e2e8f0; --body-bg-end: #cbd5e1; } /* ============================================================================= PREMIUM HERO SECTION (Dual Theme Backgrounds) ============================================================================= */ .hero-premium { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; } /* Dual Background Layers */ .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.6s ease-in-out; z-index: 0; } /* Dark Theme Background - Visible by default (or when dark) */ .hero-bg-dark { opacity: 0; } [data-theme="dark"] .hero-bg-dark { opacity: 1; } [data-theme="light"] .hero-bg-dark { opacity: 0; } /* Light Theme Background */ .hero-bg-light { opacity: 1; } [data-theme="dark"] .hero-bg-light { opacity: 0; } [data-theme="light"] .hero-bg-light { opacity: 1; } .hero-premium .container { position: relative; z-index: 2; width: 100%; } /* Hero Layout - Left Text, Right Wizard */ .hero-layout { display: grid; grid-template-columns: 1.2fr 400px; gap: 40px; align-items: center; } /* Hero Text Section - Left Aligned */ .hero-text-section { text-align: left; } .hero-title-premium { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.15; margin-bottom: 40px; letter-spacing: -1.5px; color: #ffffff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } [data-theme="light"] .hero-title-premium { color: #1e293b; text-shadow: none; } /* Stats Row */ .hero-stats-row { display: flex; gap: 16px; } .hero-stat { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 18px 24px; border-radius: 20px; } [data-theme="light"] .hero-stat { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08); } .stat-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #ffffff; flex-shrink: 0; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); } [data-theme="light"] .stat-icon { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #ffffff; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35); } .stat-info { display: flex; flex-direction: column; } .stat-number { font-size: 20px; font-weight: 800; color: #ffffff; } [data-theme="light"] .stat-number { color: #1e293b; } .stat-label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } [data-theme="light"] .stat-label { color: #64748b; } /* ============================================================================= PREMIUM SEARCH WIZARD (Glassmorphism - Theme Aware) ============================================================================= */ .search-wizard-premium { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 28px; padding: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2); margin-left: 30px; } [data-theme="light"] .search-wizard-premium { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } /* Wizard Form - Flexbox Container */ .wizard-form { display: flex; flex-direction: column; gap: 14px; } /* Full width items are default in flex column */ .wizard-field-full { width: 100%; } /* Row container for 2-column layout */ .wizard-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px; } /* Input Wrapper */ .input-wrapper { position: relative; } .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; pointer-events: none; } .wizard-field input { width: 100%; height: 50px; padding: 0 16px 0 44px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; font-size: 14px; color: #ffffff; font-weight: 500; transition: all 0.2s; } .wizard-field input::placeholder { color: #94a3b8; } .wizard-field input:focus { outline: none; border-color: #3b82f6; background: rgba(15, 23, 42, 0.7); } [data-theme="light"] .wizard-field input { background: #ffffff; border-color: #e2e8f0; color: #1e293b; } [data-theme="light"] .wizard-field input::placeholder { color: #94a3b8; } [data-theme="light"] .wizard-field input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Select Wrapper */ .select-wrapper { position: relative; } .select-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 12px; pointer-events: none; } .wizard-field select { width: 100%; height: 50px; padding: 0 36px 0 16px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; font-size: 14px; color: #ffffff; font-weight: 500; cursor: pointer; appearance: none; transition: all 0.2s; } .wizard-field select:focus { outline: none; border-color: #3b82f6; } [data-theme="light"] .wizard-field select { background: #ffffff; border-color: #e2e8f0; color: #1e293b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } [data-theme="light"] .wizard-field select:focus { border-color: #3b82f6; } /* Multi-select styling */ .wizard-field select.multi-select { height: auto; min-height: 50px; padding: 8px 12px; } .wizard-field select.multi-select option { padding: 6px 8px; } /* Type Selector (Satılık / Kiralık) */ .type-selector { display: flex; gap: 8px; } .type-option { flex: 1; cursor: pointer; } .type-option input { display: none; } .type-btn { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #64748b; background: transparent; border: 2px solid rgba(100, 116, 139, 0.3); transition: all 0.25s; } .type-option input:checked+.type-btn { background: #3b82f6; color: #ffffff; border-color: #3b82f6; } [data-theme="light"] .type-btn { background: #ffffff; border-color: #e2e8f0; color: #64748b; } [data-theme="light"] .type-option input:checked+.type-btn { background: #2563eb; color: #ffffff; border-color: #2563eb; } /* Search Button */ .wizard-search-btn { width: 100%; height: 50px; background: #3b82f6; color: #ffffff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.25s; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); } .wizard-search-btn:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(59, 130, 246, 0.4); } /* ============================================================================= HERO RESPONSIVE ============================================================================= */ @media (max-width: 1024px) { .hero-layout { grid-template-columns: 1fr; gap: 40px; } .hero-text-section { text-align: center; } .hero-title-premium { font-size: 42px; } .hero-stats-row { justify-content: center; flex-wrap: wrap; } .search-wizard-premium { max-width: 500px; margin: 0 auto; } } @media (max-width: 640px) { .hero-premium { min-height: auto; padding: 60px 0; } .hero-title-premium { font-size: 32px; margin-bottom: 30px; } .hero-stats-row { gap: 12px; } .hero-stat { padding: 10px 14px; } .stat-icon { width: 36px; height: 36px; font-size: 14px; } .stat-number { font-size: 16px; } /* Mobile: Maintain 2-column layout for rows */ .wizard-row { grid-template-columns: 1fr 1fr !important; gap: 12px; } .wizard-field-full { width: 100%; } } /* ========================= 2) GLOBAL BASE ========================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: radial-gradient(circle at top, var(--body-bg-start) 0%, var(--body-bg-mid) 45%, var(--body-bg-end) 100%); color: var(--text-primary); line-height: 1.6; min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; } /* Hafif glass hissi overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.12), transparent 55%), radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.16), transparent 55%); z-index: -1; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--text-primary); } /* AI Chatbot button */ .ai-chatbot-trigger { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 25px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); overflow: hidden; } .ai-chatbot-trigger::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .ai-chatbot-trigger:hover::before { left: 100%; } .ai-chatbot-trigger:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); } .ai-chatbot-trigger .ai-icon { font-size: 18px; animation: pulseScale 2s infinite; } .ai-chatbot-trigger .ai-status-dot { width: 8px; height: 8px; background: #4ade80; border-radius: 50%; animation: blink 2s infinite; } /* Header mobile helpers */ .mobile-only { display: none; } /* ========================================================= HERO (i.php) — Corporate Glass / Dark-Light Compatible - Aynı class isimleri korunur - Daha kurumsal renk/kontrast, daha temiz gölge hiyerarşisi - Backdrop-filter fallback + erişilebilir focus ring ========================================================= */ /* ---------- 1) HERO: Background + Overlay ---------- */ .hero { /* Tasarım token'ları (sadece bu bölüm için) */ --hero-radius: clamp(18px, 3.6vw, 28px); --hero-gap: clamp(18px, 3.6vw, 36px); --hero-pad: clamp(20px, 4.5vw, 38px); /* Cam yüzey tonları */ --hero-surface: rgba(15, 23, 42, 0.45); --hero-surface-2: rgba(15, 23, 42, 0.28); --hero-border: rgba(255, 255, 255, 0.10); /* Gölge hiyerarşisi (kurumsal, abartısız) */ --hero-shadow: 0 18px 50px rgba(0, 0, 0, .38); --hero-shadow-soft: 0 10px 28px rgba(0, 0, 0, .22); /* Focus ring (tüm input/button/radio için) */ --focus-ring: 0 0 0 4px rgba(99, 102, 241, .16); position: relative; overflow: hidden; color: var(--text-primary); /* İç boşluklar */ padding: clamp(56px, 11vw, 112px) 0 clamp(44px, 9vw, 92px); /* Arka plan görseli */ background-image: url("https://images.unsplash.com/photo-1580587771525-78b9dba3b914?auto=format&fit=crop&w=1920&q=80"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; } /* Kurumsal overlay: daha temiz kontrast + daha az “renk patlaması” */ .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; /* Üstten alta kurumsal geçiş + çok hafif renk vurguları */ background: radial-gradient(70% 50% at 18% 22%, rgba(99, 102, 241, .14), transparent 60%), radial-gradient(60% 45% at 82% 78%, rgba(14, 165, 233, .10), transparent 62%), linear-gradient(180deg, rgba(2, 6, 23, .86) 0%, rgba(15, 23, 42, .94) 40%, rgba(2, 6, 23, .92) 100%); } /* Light tema */ [data-theme="light"] .hero { --hero-surface: rgba(255, 255, 255, 0.78); --hero-surface-2: rgba(255, 255, 255, 0.55); --hero-border: rgba(15, 23, 42, 0.08); --hero-shadow: 0 18px 50px rgba(15, 23, 42, .10); --hero-shadow-soft: 0 10px 28px rgba(15, 23, 42, .08); --focus-ring: 0 0 0 4px rgba(99, 102, 241, .10); background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1920&q=80"); } [data-theme="light"] .hero::before { background: radial-gradient(70% 50% at 18% 22%, rgba(99, 102, 241, .08), transparent 60%), radial-gradient(60% 45% at 82% 78%, rgba(14, 165, 233, .06), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 250, 252, .96) 45%, rgba(255, 255, 255, .94) 100%); } /* ---------- 2) HERO LAYOUT: Frosted Glass Container ---------- */ .hero-layout { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: var(--hero-gap); /* Bigger container with more padding */ padding: 50px 60px; border-radius: 40px; overflow: hidden; /* Merkezlenmiş daha kurumsal “container” hissi */ width: min(1320px, 100%); margin-inline: auto; /* Transparent glass effect */ background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); /* Glass blur */ backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); /* Daha hafif giriş animasyonu */ opacity: 0; transform: translateY(14px) scale(0.99); animation: heroIn 0.65s cubic-bezier(.16, 1, .3, 1) 0.08s forwards; } /* Backdrop-filter olmayan tarayıcılar için daha iyi fallback */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-layout { background: rgba(15, 23, 42, 0.78); } [data-theme="light"] .hero-layout { background: rgba(255, 255, 255, 0.92); } } @keyframes heroIn { to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile: dikey */ @media (max-width: 768px) { .hero { background-attachment: scroll; } .hero-layout { flex-direction: column; gap: 22px; padding: 0; border-radius: 0; box-shadow: none; background: transparent; border: none; width: 100%; } .hero { padding: 16px 0 12px; } } /* ---------- 3) HERO TEXT: Content Card ---------- */ .hero-text { flex: 1; border-radius: clamp(14px, 3vw, 22px); padding: clamp(18px, 3.6vw, 26px); background: var(--hero-surface-2); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--hero-shadow-soft); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); color: var(--text-primary); opacity: 0; transform: translateX(-14px); animation: heroLeft 0.60s cubic-bezier(.16, 1, .3, 1) 0.18s forwards; } [data-theme="light"] .hero-text { border-color: rgba(15, 23, 42, .08); } @keyframes heroLeft { to { opacity: 1; transform: translateX(0); } } /* Durum rozeti (daha kurumsal) */ .hero-highlight-row { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-theme="light"] .hero-highlight-row { background: rgba(255, 255, 255, .92); border-color: rgba(15, 23, 42, .10); } .hero-highlight-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); animation: pulseOpacity 2.2s cubic-bezier(.4, 0, .6, 1) infinite; } /* Opacity pulse: küçük durum noktaları için */ @keyframes pulseOpacity { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } .hero-highlight-row span { font-size: clamp(10px, 1.8vw, 11px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--text-primary); } .hero-text h1 { font-size: clamp(28px, 6vw, 46px); line-height: 1.12; margin: 14px 0 10px; letter-spacing: -0.02em; font-weight: 750; color: var(--text-primary); } .hero-text .subtitle { font-size: clamp(14px, 2.5vw, 16px); line-height: 1.65; max-width: 560px; margin-bottom: 22px; color: var(--text-secondary); } /* ---------- 4) HERO FEATURES: Pills ---------- */ .hero-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 600px; } @media (max-width: 480px) { .hero-features { grid-template-columns: 1fr; } } .hero-feature { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: clamp(12px, 2vw, 13px); color: var(--text-primary); transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s cubic-bezier(.16, 1, .3, 1), border-color .22s cubic-bezier(.16, 1, .3, 1), background .22s cubic-bezier(.16, 1, .3, 1); cursor: default; } .hero-feature:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .10); border-color: rgba(99, 102, 241, .28); box-shadow: 0 12px 26px rgba(0, 0, 0, .28); } .hero-feature i { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; background: linear-gradient(135deg, rgba(99, 102, 241, .20), rgba(139, 92, 246, .18)); border: 1px solid rgba(99, 102, 241, .28); color: rgba(199, 210, 254, 1); } [data-theme="light"] .hero-feature { background: rgba(255, 255, 255, .86); border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .hero-feature i { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #c7d2fe; color: #4f46e5; } /* ---------- 5) SEARCH WIZARD: Form Card ---------- */ .search-wizard { flex: 1; position: relative; z-index: 3; border-radius: clamp(14px, 3vw, 22px); padding: clamp(18px, 3.6vw, 26px); background: var(--hero-surface-2); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--hero-shadow-soft); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); opacity: 0; transform: translateX(14px); animation: heroRight 0.60s cubic-bezier(.16, 1, .3, 1) 0.18s forwards; } [data-theme="light"] .search-wizard { border-color: rgba(15, 23, 42, .08); } @keyframes heroRight { to { opacity: 1; transform: translateX(0); } } /* Wizard header */ .search-wizard h3 { color: var(--text-primary); font-size: clamp(14px, 2.5vw, 16px); font-weight: 750; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; } .search-wizard h3 span { font-size: clamp(10px, 1.8vw, 11px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); } [data-theme="light"] .search-wizard h3 span { background: rgba(248, 250, 252, .95); border-color: rgba(15, 23, 42, .10); } /* Form grid */ .wizard-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-bottom: 14px; } .wizard-step { display: flex; flex-direction: column; gap: 6px; } .wizard-step--full { grid-column: 1 / -1; } .wizard-step label { font-weight: 750; color: var(--text-secondary); font-size: clamp(10px, 1.8vw, 11px); text-transform: uppercase; letter-spacing: 0.08em; } /* Inputs / Selects — daha kurumsal */ .wizard-step select, .wizard-step input { width: 100%; padding: 11px 14px; border-radius: 12px; font-size: clamp(13px, 2vw, 14px); font-weight: 560; background: rgba(2, 6, 23, .38); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, .12); transition: border-color .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s cubic-bezier(.16, 1, .3, 1), background .18s cubic-bezier(.16, 1, .3, 1); -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Placeholder */ .wizard-step input::placeholder { color: rgba(148, 163, 184, .70); } /* Focus ring (klavye) */ .wizard-step select:focus, .wizard-step input:focus { outline: none; border-color: rgba(99, 102, 241, .55); background: rgba(2, 6, 23, .52); box-shadow: var(--focus-ring), 0 6px 18px rgba(0, 0, 0, .20); } /* Light input */ [data-theme="light"] .wizard-step select, [data-theme="light"] .wizard-step input { background: rgba(248, 250, 252, .95); border-color: rgba(15, 23, 42, .10); color: #0f172a; } [data-theme="light"] .wizard-step input::placeholder { color: rgba(100, 116, 139, .70); } [data-theme="light"] .wizard-step select:focus, [data-theme="light"] .wizard-step input:focus { background: #ffffff; border-color: rgba(99, 102, 241, .38); box-shadow: var(--focus-ring), 0 10px 22px rgba(15, 23, 42, .06); } /* Radio group */ .radio-group { display: flex; gap: 10px; } .radio-option { flex: 1; position: relative; } .radio-option input { position: absolute; opacity: 0; pointer-events: none; } .radio-option label { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--text-secondary); font-size: clamp(12px, 2vw, 13px); font-weight: 650; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s cubic-bezier(.16, 1, .3, 1), border-color .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s cubic-bezier(.16, 1, .3, 1); } .radio-option label:hover { background: rgba(255, 255, 255, .08); border-color: rgba(99, 102, 241, .30); } .radio-option input:checked+label { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #ffffff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 18px rgba(79, 70, 229, .28); } /* Radio: focus görünürlüğü */ .radio-option input:focus-visible+label { box-shadow: var(--focus-ring); } /* Light radio */ [data-theme="light"] .radio-option label { background: rgba(248, 250, 252, .95); border-color: rgba(15, 23, 42, .10); color: #64748b; } /* Submit button — kurumsal, daha temiz */ .search-button { width: 100%; margin-top: 8px; padding: 13px 28px; border-radius: 999px; border: none; font-size: clamp(14px, 2.5vw, 15px); font-weight: 800; letter-spacing: .01em; color: #ffffff; background: linear-gradient(135deg, #4f46e5, #7c3aed); cursor: pointer; position: relative; overflow: hidden; transition: transform .20s cubic-bezier(.16, 1, .3, 1), box-shadow .20s cubic-bezier(.16, 1, .3, 1), filter .20s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 12px 24px rgba(79, 70, 229, .28), inset 0 1px 0 rgba(255, 255, 255, .20); } .search-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 55%); opacity: 0; transition: opacity .20s cubic-bezier(.16, 1, .3, 1); } .search-button:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(79, 70, 229, .32), inset 0 1px 0 rgba(255, 255, 255, .25); } .search-button:hover::before { opacity: 1; } .search-button:active { transform: translateY(0); filter: saturate(1.05); box-shadow: 0 10px 18px rgba(79, 70, 229, .26), inset 0 1px 0 rgba(255, 255, 255, .20); } .search-button:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 18px 32px rgba(79, 70, 229, .28); } /* ---------- 6) MOBILE OPTIMIZATION (mevcut davranış korunur) ---------- */ @media (max-width: 768px) { /* Hero bölümünü mobilde sadeleştir (senin mevcut mantığın) */ .hero-text, .hero-features { display: none !important; } /* Search wizard mobilde ana kart */ .search-wizard { width: 100%; max-width: 100%; margin: 0; border-radius: 0; box-shadow: none; border: none; padding: 20px 16px; background: rgba(2, 6, 23, .58); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: none; opacity: 1; transform: none; } [data-theme="light"] .search-wizard { background: rgba(255, 255, 255, .90); } .search-wizard h3 { margin-bottom: 18px; font-size: 15px; } .search-wizard h3 span { font-size: 10px; padding: 4px 10px; } /* Form alanları dikey */ .wizard-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; grid-template-columns: none; } .wizard-step { width: 100%; order: 3; } /* Eğer HTML’de bu class’lar varsa mobil sıralama */ .wizard-step--keyword { order: 1; } .wizard-step--deal { order: 2; } .wizard-step--keyword input { padding: 13px 16px; border-radius: 999px; font-size: 15px; font-weight: 650; } .wizard-step--deal .radio-group { gap: 10px; } .wizard-step--deal .radio-option label { padding: 11px 10px; font-size: 14px; font-weight: 750; border-radius: 999px; } .wizard-step label { font-size: 11px; margin-bottom: 2px; } .wizard-step select, .wizard-step input { padding: 12px 14px; font-size: 15px; border-radius: 12px; -webkit-tap-highlight-color: transparent; } .radio-option label { min-height: 44px; padding: 12px 10px; font-size: 14px; } .search-button { margin-top: 12px; padding: 14px 28px; font-size: 16px; border-radius: 999px; min-height: 48px; } } /* Küçük ekranlar */ @media (max-width: 480px) { .search-wizard { padding: 18px 14px; } .wizard-steps { gap: 10px; } .wizard-step--keyword input { padding: 12px 14px; font-size: 14px; } .radio-group { gap: 8px; } .radio-option label { padding: 10px 8px; font-size: 13px; } .search-button { padding: 13px 24px; font-size: 15px; } } /* Touch cihazlarda hover “abartı” olmasın */ @media (hover: none) and (pointer: coarse) { .hero-feature:hover, .search-button:hover { transform: none; } .search-button::before { display: none; } } /* Hareket azaltma */ @media (prefers-reduced-motion: reduce) { .hero-layout, .hero-text, .search-wizard, .hero-feature, .search-button { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } .hero-highlight-dot { animation: none !important; } } /* ========================= 6) LISTING GRID (Glass Kartlar) ========================= */ .listing-card { background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition); position: relative; border: 1px solid rgba(148, 163, 184, 0.28); backdrop-filter: blur(18px); /* Kartlar sayfaya yüklenirken yumuşak giriş animasyonu */ animation: fadeIn 0.5s ease both; } /* Her kart için ufak delay */ .listing-card:nth-child(2) { animation-delay: 0.05s; } .listing-card:nth-child(3) { animation-delay: 0.1s; } .listing-card:nth-child(4) { animation-delay: 0.15s; } .listing-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.15), transparent 60%); opacity: 0; transition: opacity 0.2s ease-out; pointer-events: none; } .listing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(129, 140, 248, 0.95); } .listing-card:hover::before { opacity: 1; } .listing-image { position: relative; height: 220px; overflow: hidden; } .listing-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; } /* Listing styles removed - see assets/css/listing-card.css */ .listing-detail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); } .listing-footer { display: flex; justify-content: space-between; align-items: center; } .listing-price { font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; } .listing-agent { display: flex; align-items: center; gap: 8px; } .agent-avatar { width: 38px; height: 38px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(148, 163, 184, 0.7); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.9); } /* ========================= 7) BUTTONS (global) ========================= */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; text-align: center; justify-content: center; font-size: 14px; } .btn-primary { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: #ffffff; box-shadow: 0 12px 30px rgba(37, 99, 235, 0.7), 0 0 0 1px rgba(15, 118, 110, 0.9); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(37, 99, 235, 0.85), 0 0 0 1px rgba(15, 118, 110, 1); } .btn-outline { border: 1px solid rgba(148, 163, 184, 0.7); color: var(--text-primary); background: rgba(15, 23, 42, 0.9); } .btn-outline:hover { background: rgba(30, 64, 175, 0.9); border-color: #60a5fa; } /* ========================= ADMIN / ABOUT CARD ========================= */ .admin-section { padding: 72px 0 54px; position: relative; } .admin-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22), transparent 60%), radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.22), transparent 60%); opacity: 0.7; } .admin-card { background: var(--bg-primary); border-radius: 28px; padding: 32px 40px; display: grid; grid-template-columns: auto minmax(0, 1.6fr); align-items: center; gap: 28px; border: 1px solid var(--border-color); box-shadow: var(--shadow-xl); position: relative; overflow: hidden; animation: floatUp 0.7s ease both; } .admin-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.25), transparent 60%); opacity: .7; pointer-events: none; } .admin-photo { display: flex; justify-content: center; position: relative; z-index: 1; } .admin-photo img { width: 190px; height: 190px; border-radius: 999px; object-fit: cover; border: 5px solid #e5e7eb; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85); background: #fff; } [data-theme="light"] .admin-photo img { border-color: #e5e7eb; } .admin-info { position: relative; z-index: 1; color: var(--text-primary); } .admin-info .admin-title { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #1e40af; margin-bottom: 6px; } .admin-info h3 { font-size: 26px; margin-bottom: 10px; } .admin-info p { font-size: 14px; color: var(--text-secondary); max-width: 560px; margin-bottom: 18px; } .admin-contact { display: flex; flex-wrap: wrap; gap: 10px; } .admin-contact a { padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-color); background: rgba(15, 23, 42, 0.96); color: #e5e7eb; transition: var(--transition); } .admin-contact a:first-child { background: #22c55e; border-color: #16a34a; color: #022c22; } [data-theme="light"] .admin-contact a { background: #f9fafb; color: #111827; } [data-theme="light"] .admin-contact a:first-child { color: #064e3b; } .admin-contact a i { font-size: 14px; } .admin-contact a:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.35); } /* ========================= STATS SECTION ========================= */ /* ========================= STATS SECTION – Pro Glass & Colorful ========================= */ .stats-section { position: relative; padding: 60px 0 80px; } /* Arka planda hafif renkli glow */ .stats-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.25), transparent 55%), radial-gradient(circle at 100% 100%, rgba(34, 197, 94, 0.25), transparent 55%); opacity: 0.9; } /* Light tema için daha yumuşak */ [data-theme="light"] .stats-section::before { background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.12), transparent 55%), radial-gradient(circle at 100% 100%, rgba(34, 197, 94, 0.12), transparent 55%); opacity: 1; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } /* Ana kartlar – cam + gradient border */ .stat-item { position: relative; border-radius: 22px; padding: 20px 20px 18px; overflow: hidden; background: rgba(15, 23, 42, 0.88); border: 1px solid rgba(148, 163, 184, 0.55); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transform: translateY(10px) scale(0.98); opacity: 0; animation: statPopIn 0.7s cubic-bezier(.25, .8, .25, 1) forwards; } /* Kart üzerinde gradient highlight */ .stat-item::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(59, 130, 246, 0.55), rgba(45, 212, 191, 0.5), rgba(56, 189, 248, 0.4)); opacity: 0; z-index: -1; transition: opacity 0.25s ease-out; } /* İç cam yüzey */ .stat-item::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 60%); opacity: 0.9; z-index: -1; } /* Light tema kart */ [data-theme="light"] .stat-item { background: rgba(255, 255, 255, 0.78); border-color: rgba(209, 213, 219, 0.95); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(148, 163, 184, 0.18); } /* Hover efekti – hafif kaldır + glow */ .stat-item:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(59, 130, 246, 0.75); } .stat-item:hover::before { opacity: 0.85; } /* Sayı kısmı */ .stat-number { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; color: #e5e7eb; margin-bottom: 6px; } /* Light tema text */ [data-theme="light"] .stat-number { color: #0f172a; } /* Icon badge */ .stat-number i { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: radial-gradient(circle at 30% 0%, #22c55e, #1d4ed8); color: #f9fafb; border: 1px solid rgba(191, 219, 254, 0.9); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.95), 0 0 0 4px rgba(37, 99, 235, 0.45); } /* Light temada ikon biraz daha soft */ [data-theme="light"] .stat-number i { box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25), 0 0 0 4px rgba(191, 219, 254, 0.9); } /* Label */ .stat-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .18em; } /* Giriş animasyonu – her karta ufak delay */ .stat-item:nth-child(1) { animation-delay: 0.05s; } .stat-item:nth-child(2) { animation-delay: 0.12s; } .stat-item:nth-child(3) { animation-delay: 0.19s; } .stat-item:nth-child(4) { animation-delay: 0.26s; } @keyframes statPopIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* RESPONSIVE */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; gap: 14px; } .stat-item { padding: 18px 16px 16px; } } /* ========================= 10) FLOATING ACTION BUTTONS (whatsapp / phone) ========================= */ .floating-actions { position: fixed; bottom: 70px; right: 24px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; } .floating-btn { width: 50px; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7); cursor: pointer; transition: var(--transition); border: none; } .floating-btn:hover { transform: translateY(-3px) scale(1.03); } .whatsapp-btn { background: #25D366; } .phone-btn { background: var(--primary-color); } /* ========================= 11) FOOTER (main.css + seo block) ========================= */ .footer { background: rgba(15, 23, 42, 0.96); border-top: 1px solid rgba(55, 65, 81, 0.9); padding: 40px 0 24px; margin-top: 60px; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.9); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-bottom: 24px; } .footer-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #e5e7eb; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); } .footer-section a:hover { color: #bfdbfe; } .social-links { display: flex; gap: 10px; margin-top: 10px; } .social-link { width: 36px; height: 36px; border-radius: 999px; background: rgba(15, 23, 42, 0.9); display: flex; align-items: center; justify-content: center; transition: var(--transition); border: 1px solid rgba(75, 85, 99, 0.9); color: #e5e7eb; } .social-link:hover { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: #0b1120; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.9); } .footer-bottom { text-align: center; padding-top: 14px; border-top: 1px solid rgba(31, 41, 55, 0.9); color: var(--text-secondary); font-size: 12px; } /* SEO Footer Sections */ .footer-seo-section, .footer-neighborhoods-section { margin-top: 50px; padding-top: 40px; border-top: 2px solid rgba(255, 255, 255, 0.1); } .seo-title { font-size: 22px; font-weight: 700; margin-bottom: 25px; color: var(--text-primary); text-align: center; } .seo-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 20px; } .seo-district-group { background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s; } .seo-district-group:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--primary-color); transform: translateY(-3px); } .district-name { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: var(--primary-color); padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); } .seo-links { list-style: none; padding: 0; margin: 0; } .seo-links li { margin-bottom: 8px; } .seo-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; transition: all 0.2s; display: block; padding: 5px 0; } .seo-links a:hover { color: var(--primary-color); padding-left: 8px; } .neighborhoods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .neighborhood-links { background: rgba(255, 255, 255, 0.03); padding: 15px; border-radius: 10px; border-left: 3px solid var(--primary-color); } .neighborhood-name { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .neighborhood-name i { color: var(--primary-color); font-size: 12px; } .seo-links.compact li { margin-bottom: 5px; } .seo-links.compact a { font-size: 13px; padding: 3px 0; } .footer-seo-text { margin-top: 15px; font-size: 13px; color: var(--text-secondary); text-align: center; line-height: 1.6; } /* ========================= 12) ALERTS (flash mesaj) ========================= */ .alert { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; } .alert-success { background: rgba(22, 163, 74, 0.1); color: #bbf7d0; border: 1px solid rgba(22, 163, 74, 0.9); } .alert-error, .alert-danger { background: rgba(248, 113, 113, 0.08); color: #fecaca; border: 1px solid rgba(239, 68, 68, 0.9); } .alert-info { background: rgba(59, 130, 246, 0.08); color: #bfdbfe; border: 1px solid rgba(59, 130, 246, 0.9); } /* ========================= 13) ANNOUNCEMENT MODAL (popup) ========================= */ .announcement-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .announcement-modal.show { opacity: 1; visibility: visible; } .announcement-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); } .announcement-popup { position: relative; background: var(--bg-primary); color: var(--text-primary); border-radius: 20px; padding: 40px; max-width: 500px; width: 90%; box-shadow: var(--shadow-xl); text-align: center; transform: scale(0.9); transition: 0.3s; border: 1px solid var(--surface-border); } .announcement-modal.show .announcement-popup { transform: scale(1); } .announcement-icon { width: 70px; height: 70px; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 30px; box-shadow: 0 0 20px var(--primary-glow); } .announcement-close { position: absolute; top: 15px; right: 15px; background: transparent; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; } .announcement-buttons { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .announcement-btn { width: 100%; padding: 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; } .announcement-btn-primary { background: var(--primary-color); color: white; } .announcement-btn-dismiss { background: transparent; color: var(--text-secondary); border: 1px solid var(--surface-border); } /* ========================= ANIMASYONLAR ========================= */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatUp { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulseScale { /* Nabız (scale) — ikon / buton gibi öğelerde hafif büyüyüp küçülme efekti */ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ========================= 15) RESPONSIVE ========================= */ @media (max-width: 1024px) { .hero-layout { /* .hero-layout flex olduğu için grid-template-columns burada etkisizdi. Sadece aralıkları (gap) koruyoruz. */ gap: 32px; } .search-wizard { max-width: 100%; margin: 0; } .admin-card { grid-template-columns: 1fr; text-align: center; } .admin-info p { margin-left: auto; margin-right: auto; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile-toggle { display: flex; } .nav-menu { position: fixed; top: 64px; left: -100%; width: 100%; height: calc(100vh - 64px); background: var(--bg-primary); flex-direction: column; padding: 26px 24px; transition: left 0.25s ease-out; box-shadow: var(--shadow-lg); } .nav-menu.active { left: 0; } .mobile-only { display: block; } .desktop-only { display: none !important; } .nav-menu .header-socials.mobile-only { display: flex; justify-content: center; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border-color); } .nav-menu .header-socials.mobile-only a { width: 50px; height: 50px; font-size: 1.4rem; } .nav-menu .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 20px; display: none; } .hero-text h1 { font-size: 32px; } } @media (max-width: 768px) { .hero { padding: 60px 0 40px; } .hero-text .subtitle { max-width: 100%; } .hero-features { grid-template-columns: 1fr; } .listings-grid { grid-template-columns: 1fr; gap: 18px; } .section { padding: 32px 0; } .section-header h2 { font-size: 22px; } .stats-grid { grid-template-columns: 1fr; } .seo-links-grid, .neighborhoods-grid { grid-template-columns: 1fr; gap: 15px; } .seo-title { font-size: 18px; margin-bottom: 20px; } .footer-seo-section, .footer-neighborhoods-section { margin-top: 30px; padding-top: 30px; } .district-name { font-size: 16px; } .neighborhood-name { font-size: 14px; } } /* ========================= 16) LIGHT THEME COMPONENT OVERRIDES ========================= */ [data-theme="light"] .header { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #e5e7eb; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); } [data-theme="light"] .logo { color: #111827; } [data-theme="light"] .nav-menu a { color: #1f2937; opacity: 0.9; } [data-theme="light"] .theme-toggle { background: #e5e7eb; border-color: #cbd5f5; color: #111827; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } [data-theme="light"] .hero { color: #111827; } [data-theme="light"] .hero::before { background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.15), transparent 55%), radial-gradient(circle at 80% 100%, rgba(34, 197, 94, 0.12), transparent 55%); opacity: 1; } [data-theme="light"] .wizard-step label { color: #4b5563; } [data-theme="light"] .wizard-step input, [data-theme="light"] .wizard-step select { background: rgba(255, 255, 255, 0.18); /* hero-text ile aynı transparanlık */ border-color: #d1d5db; } /* Başlıktaki etiket çok beyaz durmasın */ [data-theme="light"] .search-wizard h3 span { background: rgba(255, 255, 255, 0.70); border-color: rgba(209, 213, 219, 0.9); } [data-theme="light"] .form-control { background: #f9fafb; color: #111827; border-color: #d1d5db; } [data-theme="light"] .wizard-step input:focus, [data-theme="light"] .wizard-step select:focus, [data-theme="light"] .form-control:focus { background: #ffffff; border-color: #60a5fa; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.6); } [data-theme="light"] .radio-option label { background: rgba(249, 250, 251, 0.18); /* cam hissi */ color: #1e40af; border-color: #d1d5db; } [data-theme="light"] .radio-option input:checked+label { color: #ffffff; } [data-theme="light"] .pagination a, [data-theme="light"] .pagination span { background: #ffffff; border-color: #e5e7eb; color: #111827; } [data-theme="light"] .footer { background: #0f172a; border-top-color: #1f2937; box-shadow: 0 -18px 40px rgba(15, 23, 42, 0.7); } [data-theme="light"] .footer-section h3 { color: #e5e7eb; } [data-theme="light"] .footer-section ul li { color: #9ca3af; } [data-theme="light"] .social-link { background: #020617; border-color: #1f2937; color: #e5e7eb; } @media (max-width: 768px) { [data-theme="light"] .nav-menu { background: #ffffff; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); } [data-theme="light"] .hero-highlight-row { background: rgba(255, 255, 255, 0.9); border-color: #e5e7eb; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } [data-theme="light"] .hero-highlight-row span { color: #1f2937; } [data-theme="light"] .hero-feature { background: #ffffff; border-color: #e5e7eb; color: #4b5563; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06); } [data-theme="light"] .hero-feature i { background: #eef2ff; border-color: #c7d2fe; color: #1d4ed8; } } .section-header { text-align: center; /* Ortala */ margin-bottom: 26px; /* Daha ferah */ } .section-header h2 { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 36px; font-weight: 800; letter-spacing: 0.7px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); } @media (max-width: 768px) { .section-header h2 { font-size: 26px; } } /* Floating buttons fix */ .floating-actions { bottom: 135px !important; /* Yukarı taşıyoruz */ right: 24px; z-index: 99999 !important; /* Her şeyin üstünde */ } .scroll-to-top { z-index: 900 !important; /* Arkada kalacak */ } .back-to-top { position: fixed; bottom: 75px; right: 25px; width: 50px; height: 50px; border-radius: 50%; /* Görseldeki mavi renk #2563EB, değişken tanımlı değilse bu kodu kullanabilirsin */ background: var(--primary-color, #2563EB); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; /* Değişken tanımlı değilse standart bir gölge ekler */ box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)); z-index: 999; /* Değişken tanımlı değilse standart bir geçiş süresi ekler */ transition: var(--transition, all 0.3s ease); } /* Kullanıcı üzerine geldiğinde (Hover) daha iyi görünmesi için ufak bir efekt */ .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.2); } /* Unified listing styles moved to assets/css/listing-card.css */