/* Tailwind CSS CDN */ @import url("https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"); /* Custom CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* Enhanced Theme Variables */ :root { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #64748b; --border-color: #e2e8f0; --shadow-color: rgba(0, 0, 0, 0.1); } html.dark { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --border-color: #334155; --shadow-color: rgba(0, 0, 0, 0.3); } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Enhanced Code Rain Animation */ .code-rain { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; } .code-rain::before { content: " function() { return 'innovation'; } class Software { }
React.js Vue.js Angular Python JavaScript PHP Laravel MySQL MongoDB Docker AWS Git API JSON CSS3 HTML5"; position: absolute; top: -100px; left: 0; width: 100%; height: 120%; font-family: "JetBrains Mono", "Fira Code", "Roboto Mono", "Courier New", monospace; color: rgba(236, 72, 153, 0.3); animation: fall 15s linear infinite; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.5; text-shadow: 0 0 8px rgba(236, 72, 153, 0.6); } html:not(.dark) .code-rain::before { color: rgba(236, 72, 153, 0.2); text-shadow: 0 0 8px rgba(236, 72, 153, 0.3); } @keyframes fall { 0% { transform: translateY(-100px) scale(0.8); opacity: 0; } 5% { opacity: 0.8; transform: translateY(0px) scale(1); } 95% { opacity: 0.8; transform: translateY(calc(100vh - 50px)) scale(1); } 100% { transform: translateY(100vh) scale(0.8); opacity: 0; } } /* Enhanced Circuit Pattern */ .circuit-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(236, 72, 153, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px), radial-gradient(circle at 15% 25%, rgba(168, 85, 247, 0.12) 0px, transparent 3px), radial-gradient(circle at 85% 75%, rgba(34, 211, 238, 0.12) 0px, transparent 3px); background-size: 80px 80px, 80px 80px, 300px 300px, 300px 300px; animation: circuitPulse 20s ease-in-out infinite alternate; z-index: 0; } html:not(.dark) .circuit-pattern { background-image: linear-gradient(rgba(236, 72, 153, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px), radial-gradient(circle at 15% 25%, rgba(168, 85, 247, 0.06) 0px, transparent 3px), radial-gradient(circle at 85% 75%, rgba(34, 211, 238, 0.06) 0px, transparent 3px); } @keyframes circuitPulse { 0% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.02); } 100% { opacity: 0.15; transform: scale(1); } } /* Enhanced Processor Core */ .processor-core { position: absolute; top: 50%; left: 50%; width: 35vw; height: 35vw; max-width: 500px; max-height: 500px; transform: translate(-50%, -50%); z-index: 2; } .processor-core::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle, rgba(34, 211, 238, 0.2) 0%, rgba(168, 85, 247, 0.15) 30%, rgba(236, 72, 153, 0.1) 60%, transparent 80% ); animation: coreGlow 8s ease-in-out infinite; pointer-events: none; } html:not(.dark) .processor-core::before { background: radial-gradient( circle, rgba(34, 211, 238, 0.1) 0%, rgba(168, 85, 247, 0.08) 30%, rgba(236, 72, 153, 0.05) 60%, transparent 80% ); } @keyframes coreGlow { 0%, 100% { transform: scale(0.9) rotate(0deg); opacity: 0.4; } 25% { transform: scale(1.05) rotate(90deg); opacity: 0.7; } 50% { transform: scale(1.1) rotate(180deg); opacity: 0.8; } 75% { transform: scale(1.05) rotate(270deg); opacity: 0.7; } } /* Circuit Lines */ .circuit-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 3; } /* Tracer Lines */ .tracer-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 4; } /* Enhanced Theme Toggle */ #theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1000; padding: 0.75rem; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(226, 232, 240, 0.5); border-radius: 50%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } html.dark #theme-toggle { background: rgba(30, 41, 59, 0.9); border-color: rgba(51, 65, 85, 0.5); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } #theme-toggle:hover { transform: scale(1.1) rotate(10deg); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } html.dark #theme-toggle:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); } /* Enhanced Button Styles */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; font-weight: 700; font-size: 1.125rem; border-radius: 0.75rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 25px var(--shadow-color); position: relative; overflow: hidden; border: none; cursor: pointer; } .btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 40px var(--shadow-color); } .btn-primary { background: linear-gradient(135deg, #ec4899, #8b5cf6); color: white; } .btn-primary:hover { background: linear-gradient(135deg, #db2777, #7c3aed); box-shadow: 0 15px 35px rgba(236, 72, 153, 0.4); } .btn-outline-cyan { background: transparent; color: #22d3ee; border: 2px solid #22d3ee; } .btn-outline-cyan:hover { background: rgba(34, 211, 238, 0.1); color: #06b6d4; box-shadow: 0 15px 35px rgba(34, 211, 238, 0.3); } html:not(.dark) .btn-outline-cyan { color: #0891b2; border-color: #0891b2; } html:not(.dark) .btn-outline-cyan:hover { background: rgba(8, 145, 178, 0.1); color: #0e7490; } /* Enhanced Card Styles */ .card { transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; backdrop-filter: blur(8px); } .card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; z-index: 1; } .card:hover::before { transform: translateX(100%); } .card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px var(--shadow-color); } /* Light Theme Card Adjustments */ html:not(.dark) .card { background: rgba(248, 250, 252, 0.8) !important; border-color: rgba(226, 232, 240, 0.5) !important; } /* Enhanced Tech Card Styles */ .tech-card-item { transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; } .tech-card-item:hover { transform: translateY(-15px) rotateX(8deg) rotateY(5deg) scale(1.08); } .tech-card-glow { position: absolute; inset: -3px; border-radius: inherit; background: conic-gradient( from 180deg at 50% 50%, #ec489900 0deg, #ec4899aa 60deg, #8b5cf6aa 120deg, #22d3eeaa 180deg, #ec489900 240deg, #8b5cf6aa 300deg, #ec4899aa 360deg ); filter: blur(25px); opacity: 0; transition: opacity 0.5s ease-out; z-index: -1; animation: rotateGlow 6s linear infinite; } .tech-card-item:hover .tech-card-glow { opacity: 0.8; } html:not(.dark) .tech-card-item:hover .tech-card-glow { opacity: 0.4; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } /* Phone Mockup */ .phone-mockup-container { display: flex; justify-content: center; align-items: center; perspective: 2000px; padding: 3rem 0; } .phone-mockup { width: 320px; height: 650px; background: linear-gradient(145deg, #2d3748, #1a202c); border-radius: 45px; padding: 15px; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.4); position: relative; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: rotateX(15deg) rotateY(-8deg) scale(0.9); } .phone-mockup:hover { transform: rotateX(8deg) rotateY(0deg) scale(1); } .phone-screen { width: 100%; height: 100%; border-radius: 35px; overflow: hidden; position: relative; } /* Store Button Styles */ .store-button { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 12px; background: linear-gradient(135deg, #ffffff, #f8fafc); color: #1e293b; text-decoration: none; font-family: inherit; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); min-width: 220px; max-width: 260px; position: relative; overflow: hidden; } .store-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; } .store-text-small { font-size: 0.8rem; color: #64748b; font-weight: 500; transition: color 0.3s ease; } .store-text-large { font-size: 1.2rem; font-weight: 700; color: #1e293b; transition: color 0.3s ease; } /* Enhanced Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes pulseSlow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } } @keyframes gradient { 0%, 100% { background-size: 200% 200%; background-position: left center; } 50% { background-size: 200% 200%; background-position: right center; } } /* Animation Classes */ .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-slow { animation: pulseSlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-gradient { animation: gradient 8s linear infinite; } .animate-hero-badge-fade-in { animation: fadeInUp 1s ease-out 0.1s forwards; opacity: 0; } .animate-hero-title-slide-up { animation: fadeInUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s forwards; opacity: 0; } .animate-hero-subtitle-fade-in { animation: fadeInUp 1s ease-out 0.4s forwards; opacity: 0; } .animate-hero-description-fade-in { animation: fadeInUp 1s ease-out 0.6s forwards; opacity: 0; } .animate-hero-buttons-fade-in { animation: fadeInUp 1s ease-out 0.8s forwards; opacity: 0; } .animate-hero-stats-fade-in { animation: fadeInUp 1s ease-out 1s forwards; opacity: 0; } /* Enhanced Scrollbar */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 6px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ec4899, #8b5cf6, #22d3ee); border-radius: 6px; border: 2px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d946ef, #7c3aed, #06b6d4); box-shadow: 0 0 10px rgba(236, 72, 153, 0.5); } /* Responsive Design Enhancements */ @media (max-width: 768px) { .tech-card-item:hover { transform: translateY(-8px) scale(1.03); } #theme-toggle { top: 0.5rem; right: 0.5rem; padding: 0.5rem; } } @media (max-width: 640px) { .btn { padding: 0.875rem 2rem; font-size: 1rem; } } /* Print Styles */ @media print { .code-rain, .circuit-pattern, .processor-core, .circuit-lines, .tracer-lines, #theme-toggle { display: none; } } .kqd-tech-section { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 42px; margin-bottom: 42px; } .kqd-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; justify-items: center; align-items: end; /* Kartların altını hizada tutar */ max-width: 1100px; margin: 0 auto; } .kqd-tech-card { position: relative; background: rgba(24, 24, 41, 0.84); border-radius: 22px; box-shadow: 0 6px 28px 0 #6400ff1a; width: 170px; height: 150px; /* YÜKSEKLİĞİ AZALTILDI */ padding: 18px 14px 16px 14px; /* padding küçüldü */ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: visible; border: 2.3px solid transparent; transition: transform 0.32s cubic-bezier(.55,.01,.48,.99), box-shadow 0.28s, filter 0.2s; z-index: 1; } .kqd-tech-card::before { content: ""; position: absolute; inset: 0; border-radius: 22px; background: radial-gradient(circle at 50% 70%, #5dfcffb9 0%, #bc59ff6c 60%, transparent 100%); filter: blur(18px); opacity: 0.46; z-index: 0; pointer-events: none; transition: opacity .3s; } .kqd-tech-card:hover::before { opacity: 0.84; } .kqd-tech-card:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 18px 48px 0 #a444ff80, 0 2px 8px 0 #2b0043a1; filter: brightness(1.10) drop-shadow(0 0 16px #a444ff33); } /* Fotoğrafı kartın tam ortasına sabitler */ .kqd-tech-img { display: block; width: 78px; /* FOTOĞRAF BÜYÜTÜLDÜ */ height: 78px; /* FOTOĞRAF BÜYÜTÜLDÜ */ object-fit: contain; margin: 0 auto; margin-bottom: 12px; /* az daha yakın dursun */ margin-top: -2px; z-index: 1; position: relative; transition: transform 0.3s cubic-bezier(.55,.01,.48,.99), filter 0.2s; } .kqd-tech-card:hover .kqd-tech-img { transform: scale(1.09) rotate(-3deg); filter: drop-shadow(0 0 20px #bc59ff66); } /* Yazı daima altta, ortalanır, responsive ve aynı hizada */ .kqd-tech-title { color: #fff; font-weight: 700; font-size: 1.05rem; margin: 0; margin-top: auto; text-align: center; letter-spacing: 0.5px; padding-bottom: 4px; z-index: 1; position: relative; width: 100%; line-height: 1.3; text-shadow: 0 2px 8px #6600ff10; background: transparent; } /* Responsive düzeltmeler */ @media (max-width: 900px) { .kqd-tech-grid { grid-template-columns: 1fr 1fr; /* İkili grid, taş gibi hizalanır */ gap: 16px; max-width: 98vw; padding: 0 2vw; } .kqd-tech-card { width: 98vw; /* Ekrana neredeyse tam oturur */ max-width: 165px; /* İki kart yan yana, büyük ve okunaklı */ min-width: 140px; height: 120px; /* Yüksekliği de arttırdık */ padding: 10px 6px 8px 6px; border-radius: 18px; } .kqd-tech-img { width: 48px; /* İkon/foto büyük */ height: 48px; margin-bottom: 4px; } .kqd-tech-title { font-size: 1.01rem; padding-bottom: 1px; } } @media (max-width: 520px) { .kqd-tech-grid { grid-template-columns: 1fr 1fr; gap: 18px; max-width: 98vw; padding: 0 2vw; justify-items: stretch; } .kqd-tech-card { width: 95vw; max-width: 170px; min-width: 125px; height: 110px; padding: 14px 6px 12px 6px; border-radius: 14px; } .kqd-tech-img { width: 36px; height: 36px; margin-bottom: 5px; } .kqd-tech-title { font-size: 0.89rem; padding-bottom: 2px; } } .dark\:bg-black\/75:is(.dark *) { background-color: rgb(0 0 0 / 0%) !important; } .bg-black\/80 { background-color: rgb(0 0 0 / 0%) !important; } .dark\:bg-black\/90:is(.dark *) { background-color: rgb(31 9 105 / 56%) !important; }