/* ========================================================================== AYMET OTOMOTİV — Linear & Apple HIG Design System Refactored via web-design-engineer principles ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* Linear Palette Tokens — Dark (default) */ --bg-ground: #08090A; --bg-base-alt: #0B0C0E; --bg-footer: #050607; --bg-surface-1: #111215; --bg-surface-2: #18191E; --bg-surface-3: #22232B; --border-hairline: rgba(255, 255, 255, 0.08); --border-hairline-soft: rgba(255, 255, 255, 0.05); --border-hairline-strong: rgba(255, 255, 255, 0.20); --border-hairline-hover: rgba(255, 255, 255, 0.16); --border-hairline-active: rgba(59, 130, 246, 0.4); --text-primary: #F7F8F8; --text-primary-soft: #E5E7EB; --text-secondary: #9CA3AF; --text-secondary-soft: #CBD5E1; --text-muted: #6B7280; --accent-blue: #3B82F6; --accent-blue-hover: #2563EB; --accent-blue-subtle: rgba(59, 130, 246, 0.1); --accent-emerald: #10B981; --accent-emerald-subtle: rgba(16, 185, 129, 0.1); --accent-blue-text: #60A5FA; --accent-blue-text-hover: #93C5FD; --accent-emerald-text: #34D399; --accent-emerald-text-hover: #6EE7B7; --accent-rose-text: #FB7185; --accent-rose-text-hover: #FDA4AF; --accent-amber-text: #FBBF24; --glass-nav-bg: rgba(8, 9, 10, 0.82); --grid-line-color: rgba(255, 255, 255, 0.025); --surface-tint: rgba(255, 255, 255, 0.045); --chip-overlay-bg: rgba(8, 9, 10, 0.9); --select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); --shadow-color: rgba(0, 0, 0, 0.5); --shadow-color-strong: rgba(0, 0, 0, 0.6); --modal-backdrop: rgba(4, 5, 6, 0.82); --scrollbar-thumb: var(--bg-surface-3); --scrollbar-thumb-hover: #32333d; --map-filter: grayscale(1) invert(1) contrast(1.25); /* Typography */ --font-heading: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Motion: Snappy Quint Easing */ --ease-quint: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 150ms var(--ease-quint); --transition-smooth: 250ms var(--ease-quint); --transition-layout: 400ms var(--ease-quint); /* Radius Rules: 8px (small), 12px (cards), 16px (panels) — Never above 16 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; color-scheme: dark; } /* Light Theme — activated via [data-theme="light"] on , or system preference */ :root[data-theme="light"] { --bg-ground: #F7F8FA; --bg-base-alt: #EEF0F3; --bg-footer: #E7E9ED; --bg-surface-1: #FFFFFF; --bg-surface-2: #F3F4F6; --bg-surface-3: #E5E7EB; --border-hairline: rgba(15, 23, 42, 0.09); --border-hairline-soft: rgba(15, 23, 42, 0.06); --border-hairline-strong: rgba(15, 23, 42, 0.16); --border-hairline-hover: rgba(15, 23, 42, 0.18); --border-hairline-active: rgba(37, 99, 235, 0.4); --text-primary: #0F1115; --text-primary-soft: #1F2430; --text-secondary: #52585F; --text-secondary-soft: #3B4048; --text-muted: #6B7280; --accent-blue: #2563EB; --accent-blue-hover: #1D4ED8; --accent-blue-subtle: rgba(37, 99, 235, 0.08); --accent-emerald: #059669; --accent-emerald-subtle: rgba(5, 150, 105, 0.1); --accent-blue-text: #2563EB; --accent-blue-text-hover: #1D4ED8; --accent-emerald-text: #059669; --accent-emerald-text-hover: #047857; --accent-rose-text: #E11D48; --accent-rose-text-hover: #BE123C; --accent-amber-text: #B45309; --glass-nav-bg: rgba(247, 248, 250, 0.78); --grid-line-color: rgba(15, 23, 42, 0.035); --shadow-color: rgba(15, 23, 42, 0.08); --shadow-color-strong: rgba(15, 23, 42, 0.14); --modal-backdrop: rgba(15, 23, 42, 0.42); --scrollbar-thumb: #D6D9DE; --scrollbar-thumb-hover: #BFC3C9; --map-filter: contrast(0.98) saturate(0.85); --surface-tint: rgba(15, 23, 42, 0.04); --chip-overlay-bg: rgba(247, 248, 250, 0.9); --select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2352585F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg-ground: #F7F8FA; --bg-base-alt: #EEF0F3; --bg-footer: #E7E9ED; --bg-surface-1: #FFFFFF; --bg-surface-2: #F3F4F6; --bg-surface-3: #E5E7EB; --border-hairline: rgba(15, 23, 42, 0.09); --border-hairline-soft: rgba(15, 23, 42, 0.06); --border-hairline-strong: rgba(15, 23, 42, 0.16); --border-hairline-hover: rgba(15, 23, 42, 0.18); --border-hairline-active: rgba(37, 99, 235, 0.4); --text-primary: #0F1115; --text-primary-soft: #1F2430; --text-secondary: #52585F; --text-secondary-soft: #3B4048; --text-muted: #6B7280; --accent-blue: #2563EB; --accent-blue-hover: #1D4ED8; --accent-blue-subtle: rgba(37, 99, 235, 0.08); --accent-emerald: #059669; --accent-emerald-subtle: rgba(5, 150, 105, 0.1); --accent-blue-text: #2563EB; --accent-blue-text-hover: #1D4ED8; --accent-emerald-text: #059669; --accent-emerald-text-hover: #047857; --accent-rose-text: #E11D48; --accent-rose-text-hover: #BE123C; --accent-amber-text: #B45309; --glass-nav-bg: rgba(247, 248, 250, 0.78); --grid-line-color: rgba(15, 23, 42, 0.035); --shadow-color: rgba(15, 23, 42, 0.08); --shadow-color-strong: rgba(15, 23, 42, 0.14); --modal-backdrop: rgba(15, 23, 42, 0.42); --scrollbar-thumb: #D6D9DE; --scrollbar-thumb-hover: #BFC3C9; --map-filter: contrast(0.98) saturate(0.85); color-scheme: light; } } /* Base Resets & Global Styles */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--bg-ground); color: var(--text-secondary); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--transition-smooth), color var(--transition-smooth); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); letter-spacing: -0.025em; font-weight: 700; line-height: 1.18; } /* Linear Subtle Ambient Background (Low Opacity Mesh, < 8%) */ .linear-ambient { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; height: 520px; background: radial-gradient(55% 60% at 50% 0%, rgba(59, 130, 246, 0.08) 0%, rgba(79, 70, 229, 0.03) 45%, transparent 100%); pointer-events: none; z-index: 0; } .bg-grid-subtle { background-size: 32px 32px; background-image: linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px); } /* Glass Navigation — Apple HIG Translucent Precision */ .glass-nav { background: var(--glass-nav-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border-hairline); transition: padding var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } /* Linear Precision Hairline Panels & Cards */ .linear-card { background-color: var(--bg-surface-1); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } .linear-card:hover { border-color: var(--border-hairline-hover); background-color: var(--bg-surface-2); transform: translateY(-2px); box-shadow: 0 4px 20px -4px var(--shadow-color); } /* Lift Kartları — Teknik & Hassas Gösterge Tasarımı */ .lift-card { position: relative; background-color: var(--bg-surface-1); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 1.75rem; transition: all var(--transition-fast); display: flex; flex-direction: column; justify-content: space-between; } .lift-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; pointer-events: none; transition: border-color var(--transition-fast); } .lift-card:hover { background-color: var(--bg-surface-2); border-color: var(--border-hairline-hover); transform: translateY(-3px); box-shadow: 0 12px 32px -8px var(--shadow-color-strong); } .lift-card:hover::after { border-color: rgba(59, 130, 246, 0.25); } /* Marka Filtre Butonları — Linear Segmented Control */ .brand-tab-btn { background-color: var(--bg-surface-1); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); color: var(--text-secondary); padding: 0.65rem 1.1rem; font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: all var(--transition-fast); cursor: pointer; } .brand-tab-btn:hover { color: var(--text-primary); border-color: var(--border-hairline-hover); background-color: var(--bg-surface-2); } .brand-tab-btn.active { background-color: var(--bg-surface-3); border-color: rgba(59, 130, 246, 0.45); color: var(--text-primary); box-shadow: 0 1px 2px var(--shadow-color); } /* Linear-Grade Primary Action Buttons (No Neon Glows, Pure Craft) */ .btn-primary { background-color: var(--accent-blue); color: #ffffff; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .btn-primary:hover { background-color: var(--accent-blue-hover); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-primary:active { transform: translateY(0); } /* Secondary Ghost Button */ .btn-secondary { background-color: var(--bg-surface-1); color: var(--text-primary); font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .btn-secondary:hover { background-color: var(--bg-surface-2); border-color: var(--border-hairline-hover); color: var(--text-primary); } /* WhatsApp Accent Button */ .btn-whatsapp { background-color: #059669; color: #ffffff; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .btn-whatsapp:hover { background-color: #047857; transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3); } /* FAQ Accordion — Minimal Hairline Rows */ .faq-item { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--bg-surface-1); transition: all var(--transition-fast); margin-bottom: 0.625rem; overflow: hidden; } .faq-header { cursor: pointer; padding: 1.15rem 1.35rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--text-primary); font-size: 0.9375rem; user-select: none; transition: color var(--transition-fast); } .faq-header:hover { color: var(--accent-blue-text); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease-quint), padding 300ms var(--ease-quint); padding: 0 1.35rem; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; } .faq-item.active { border-color: var(--border-hairline-strong); background: var(--bg-surface-2); } .faq-item.active .faq-answer { max-height: 500px; padding: 0 1.35rem 1.15rem 1.35rem; } .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--accent-blue); } .faq-icon { transition: transform var(--transition-smooth), color var(--transition-fast); font-size: 0.8125rem; color: var(--text-muted); } /* Custom Form Elements (Inputs & Selects) */ .custom-input { background: var(--bg-ground); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.875rem; padding: 0.65rem 0.9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .custom-input::placeholder { color: var(--text-muted); } .custom-input:hover { border-color: var(--border-hairline-hover); } .custom-input:focus { outline: none; background-color: var(--bg-surface-1); border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue), 0 0 0 4px rgba(59, 130, 246, 0.15); } .custom-select { background-image: var(--select-caret, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.25em 1.25em; padding-right: 2.25rem; -webkit-appearance: none; appearance: none; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-ground); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Modals & Backdrops */ .modal-backdrop { position: fixed; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); } .modal-backdrop.active { opacity: 1; pointer-events: auto; } .modal-container { background: var(--bg-surface-1); border: 1px solid var(--border-hairline-hover); border-radius: var(--radius-lg); max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto; transform: scale(0.97); transition: transform var(--transition-smooth); box-shadow: 0 24px 48px -12px var(--shadow-color-strong), 0 0 0 1px var(--border-hairline-soft); } .modal-backdrop.active .modal-container { transform: scale(1); } /* Toast Notifications */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; min-width: 300px; max-width: 400px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--bg-surface-2); border: 1px solid var(--border-hairline-hover); box-shadow: 0 16px 32px var(--shadow-color); display: flex; align-items: center; gap: 12px; color: var(--text-primary); font-size: 0.875rem; transform: translateX(120%); opacity: 0; transition: all var(--transition-smooth); } .toast.show { transform: translateX(0); opacity: 1; } /* Mobile Bottom Bar */ @media (max-width: 768px) { .mobile-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--glass-nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border-hairline); z-index: 900; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } } /* Status Indicator Dot (Subtle, Not Loud Ping) */ .status-indicator { display: inline-flex; align-items: center; gap: 6px; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--accent-emerald); } /* Eyebrow Label — Linear Keyboard / Technical Style */ .eyebrow-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); background-color: var(--bg-surface-1); border: 1px solid var(--border-hairline); padding: 0.25rem 0.65rem; border-radius: 9999px; } /* Google Maps Embed — Theme-Aware Tint */ .map-frame { filter: var(--map-filter); opacity: 0.85; transition: opacity var(--transition-fast), filter var(--transition-smooth); } .map-frame:hover { opacity: 1; } /* Theme Toggle — Sun/Moon Sliding Switch */ .theme-toggle { position: relative; width: 44px; height: 26px; border-radius: 9999px; background-color: var(--bg-surface-2); border: 1px solid var(--border-hairline); cursor: pointer; flex-shrink: 0; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .theme-toggle:hover { border-color: var(--border-hairline-hover); } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--bg-surface-1); border: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--accent-amber-text); transition: transform var(--transition-smooth) , color var(--transition-fast), background-color var(--transition-fast); } :root[data-theme="light"] .theme-toggle-thumb { transform: translateX(18px); color: var(--accent-blue-text); } .theme-toggle-thumb i { pointer-events: none; } .theme-toggle-thumb .fa-sun { display: none; } .theme-toggle-thumb .fa-moon { display: inline-block; } :root[data-theme="light"] .theme-toggle-thumb .fa-sun { display: inline-block; } :root[data-theme="light"] .theme-toggle-thumb .fa-moon { display: none; } /* Marka Logo Şeridi — Kayan Marquee */ .marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: marquee-scroll 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.03em; color: var(--text-muted); white-space: nowrap; transition: color var(--transition-fast); } .marquee-item i { font-size: 0.85rem; color: var(--accent-blue-text); opacity: 0.7; } .marquee:hover .marquee-item { color: var(--text-secondary); } /* Araç Galerisi — Hero Slider */ .js-hero-slider { background-color: var(--bg-surface-2); } .slider-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-quint); z-index: 1; } .slider-slide.active { opacity: 1; visibility: visible; z-index: 2; } .slider-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s linear; } .slider-slide.active .slider-img { transform: scale(1.1); } .slider-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.25); background: radial-gradient(60% 80% at 30% 20%, rgba(59, 130, 246, 0.25) 0%, transparent 60%), linear-gradient(135deg, var(--bg-surface-3) 0%, var(--bg-surface-1) 100%); } .slider-gradient { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(2, 4, 8, 0.85) 0%, rgba(2, 4, 8, 0.35) 38%, rgba(2, 4, 8, 0) 65%); } .slider-caption { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .slider-caption h3 { font-size: 1.375rem; font-weight: 800; color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } @media (min-width: 640px) { .slider-caption h3 { font-size: 1.75rem; } } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 40px; height: 40px; border-radius: 9999px; background: rgba(8, 9, 10, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .slider-arrow:hover { background: rgba(8, 9, 10, 0.75); transform: translateY(-50%) scale(1.06); } .slider-arrow-left { left: 1rem; } .slider-arrow-right { right: 1rem; } .slider-dots { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 4; display: flex; align-items: center; gap: 0.4rem; } .slider-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.35); border: none; padding: 0; cursor: pointer; transition: all var(--transition-fast); } .slider-dot.active { width: 22px; background: #ffffff; } /* Accessibility: Visible Focus Indicators */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-ground), 0 0 0 4px var(--accent-blue) !important; } /* Accessibility: Respect Reduced Motion Preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }