/* ========================================================= MMFS GLOBAL YAZILIM — Kurumsal Site Ortak Stil Dosyası Not: Google Fonts artık CSS @import ile değil, HTML içinde doğrudan ile yükleniyor (paralel indirme, render-blocking'i azaltır). ========================================================= */ :root { /* Marka renkleri (logo referans alınarak) */ --navy-950: #060b1a; --navy-900: #0a1330; --navy-800: #0d1b3f; --navy-700: #12275a; --navy-600: #17346f; --blue-600: #1f5bb8; --blue-500: #2f6fdb; --blue-400: #4f8ff7; --blue-300: #82b1fb; --ink: #0d1b3f; --muted: #5b6478; --muted-soft: #8891a5; --bg-light: #f5f7fb; --bg-panel: #ffffff; --line: #e4e8f2; --white: #ffffff; --gradient-brand: linear-gradient(135deg, var(--navy-800) 0%, var(--blue-600) 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(13,27,63,0.06) 0%, rgba(31,91,184,0.10) 100%); --gradient-text: linear-gradient(120deg, var(--navy-800) 0%, var(--blue-500) 60%, var(--blue-400) 100%); --shadow-sm: 0 2px 10px rgba(10, 19, 48, 0.06); --shadow-md: 0 10px 30px rgba(10, 19, 48, 0.10); --shadow-lg: 0 25px 60px rgba(10, 19, 48, 0.18); --shadow-glow: 0 20px 50px rgba(31, 91, 184, 0.25); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --container: 1200px; --header-h: 84px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Görsel olarak gizli ama ekran okuyucular ve arama motorları için erişilebilir başlık */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { font-family: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: var(--bg-light); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } section { position: relative; } /* Perspektif katmanı - 3D efektler için */ .perspective-layer { perspective: 1600px; perspective-origin: 50% 40%; } /* ========================================================= Arka plan dekorları (derinlik hissi) ========================================================= */ .bg-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; pointer-events: none; z-index: 0; } .bg-orb.orb-blue { background: radial-gradient(circle, var(--blue-500), transparent 70%); } .bg-orb.orb-navy { background: radial-gradient(circle, var(--navy-700), transparent 70%); } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(13, 27, 63, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 27, 63, 0.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%); pointer-events: none; } /* ========================================================= Header / Navigasyon ========================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 1000; display: flex; align-items: center; background: rgba(248, 249, 252, 0.96); border-bottom: 1px solid transparent; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* Note: backdrop-filter is intentionally avoided here — it would create a new containing block for position:fixed descendants (the mobile nav panel), collapsing it to the header's own height. */ .site-header.scrolled { background: rgba(255, 255, 255, 0.97); border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(10, 19, 48, 0.06); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { height: 34px; width: auto; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { position: relative; padding: 10px 18px; font-weight: 600; font-size: 15px; color: var(--navy-800); border-radius: 999px; transition: color 0.25s ease, background 0.25s ease; } .nav-links a:hover { background: rgba(13, 27, 63, 0.06); } .nav-links a.active { color: var(--white); background: var(--gradient-brand); box-shadow: var(--shadow-glow); } /* .btn already sets its own color; .nav-links a was overriding it with navy text. This restores white text on the mobile "Teklif Al" pill (was unreadable). */ .nav-links a.btn { color: var(--white); } .nav-links a.btn:hover { background: var(--gradient-brand); } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--gradient-brand); color: var(--white); font-weight: 700; font-size: 14.5px; box-shadow: var(--shadow-glow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 26px 55px rgba(31,91,184,0.32); } a.nav-cta-mobile { display: none; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; } .nav-toggle span { width: 24px; height: 2.5px; background: var(--navy-800); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* ========================================================= Butonlar ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 15.5px; border: none; white-space: nowrap; flex-shrink: 0; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.3s ease; } .btn-primary { background: var(--gradient-brand); color: var(--white); box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 30px 60px rgba(31,91,184,0.35); } .btn-outline { background: var(--white); color: var(--navy-800); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); } .btn-outline:hover { border-color: var(--blue-400); transform: translateY(-3px); box-shadow: var(--shadow-md); } .btn-ghost-light { background: rgba(255,255,255,0.12); color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); } .btn-ghost-light:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); } /* ========================================================= Etiket / Eyebrow ========================================================= */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--gradient-brand-soft); color: var(--blue-600); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(47,111,219,0.18); } /* ========================================================= Başlıklar ========================================================= */ h1, h2, h3, h4 { font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; } .section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; } .section-head h2 { font-size: clamp(30px, 4vw, 44px); margin: 16px 0 14px; line-height: 1.15; } .section-head p { color: var(--muted); font-size: 17px; } .text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-pad { padding: 110px 0; } @media (max-width: 768px) { .section-pad { padding: 74px 0; } } /* ========================================================= HERO ========================================================= */ .hero { position: relative; padding: calc(var(--header-h) + 74px) 0 100px; background: var(--navy-900); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 15% 15%, rgba(31,91,184,0.35), transparent 60%), radial-gradient(ellipse 50% 60% at 85% 30%, rgba(79,143,247,0.22), transparent 60%), linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 40%, var(--navy-800) 100%); } .hero .grid-overlay { background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } /* Mobilde önce metin, sonra görsel/animasyon — slider daha az yer kaplar */ .hero-visual { margin-top: 26px; margin-bottom: 0; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: var(--blue-300); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; } .hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-400); box-shadow: 0 0 0 4px rgba(79,143,247,0.25); } .hero h1 { color: var(--white); font-size: clamp(36px, 5.2vw, 60px); line-height: 1.08; margin: 22px 0 22px; } .hero h1 span { color: var(--blue-300); } .hero p.lead { color: rgba(255,255,255,0.72); font-size: 18px; max-width: 540px; margin-bottom: 34px; } @media (max-width: 980px) { .hero p.lead { margin-left: auto; margin-right: auto; } } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; } @media (max-width: 980px) { .hero-actions { justify-content: center; } } .hero-stats { display: flex; gap: 38px; flex-wrap: wrap; } @media (max-width: 980px) { .hero-stats { justify-content: center; } } .hero-stats .stat b { display: block; font-size: 30px; color: var(--white); font-weight: 800; } .hero-stats .stat span { color: rgba(255,255,255,0.55); font-size: 13.5px; font-weight: 600; } /* ========================================================= Hero görsel — animasyonlu "AI ağı" (neural network) kompozisyonu ========================================================= */ .hero-visual { position: relative; height: 400px; } /* Hizmet sayfalarında hero-visual, sabit yükseklik yerine mockup kartına göre şekillenir */ .hero-visual.svc-visual { height: auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 0 6px; } .network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: var(--radius-lg); } .network-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 26px; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; color: #fff; z-index: 2; box-shadow: 0 0 0 14px rgba(79,143,247,0.09), 0 25px 60px rgba(6,11,26,0.55), 0 0 50px rgba(47,111,219,0.45); animation: corePulse 3.4s ease-in-out infinite; } .network-core svg { width: 40px; height: 40px; } @keyframes corePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } } .network-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(10, 19, 48, 0.55); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); font-size: 12.5px; font-weight: 700; animation: floatY 5s ease-in-out infinite; } .network-badge svg { width: 15px; height: 15px; color: var(--blue-300); flex-shrink: 0; } .network-badge.nb1 { top: 12%; left: 6%; animation-delay: 0.2s; } .network-badge.nb2 { bottom: 12%; right: 6%; animation-delay: 1.4s; } @keyframes floatY { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } /* ========================================================= Kartlar (genel) + 3D Tilt ========================================================= */ .tilt-card { transform-style: preserve-3d; transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease; will-change: transform; } .service-card { position: relative; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 34px 28px; box-shadow: var(--shadow-sm); height: 100%; } .service-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(31,91,184,0.25); } .service-card .icon-box { width: 58px; height: 58px; border-radius: 16px; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 22px; box-shadow: var(--shadow-glow); transform: translateZ(30px); } .service-card .icon-box svg { width: 27px; height: 27px; } .service-card h3 { font-size: 20px; margin-bottom: 10px; transform: translateZ(20px); } .service-card p { color: var(--muted); font-size: 15px; transform: translateZ(15px); } .service-card .tag-list { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; transform: translateZ(15px); } .service-card .tag-list span { font-size: 12px; font-weight: 700; color: var(--blue-600); background: var(--gradient-brand-soft); padding: 5px 11px; border-radius: 999px; } .service-card .more-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--navy-800); transform: translateZ(15px); } .service-card .more-link svg { width: 16px; height: 16px; transition: transform 0.25s ease; } .service-card:hover .more-link svg { transform: translateX(4px); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } /* Kart sayısı tek olduğunda (ör. 3 kartlık "Neler Sunuyoruz" listesi), son kart yalnız kalıp yarım boş satır bırakmasın diye tam genişliğe yayılır. */ .services-grid > .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ========================================================= Neden Biz / Özellik listesi ========================================================= */ .feature-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; } @media (max-width: 640px) { .feature-row { grid-template-columns: 1fr; } } .feature-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius-sm); transition: background 0.3s ease, transform 0.3s ease; } .feature-item:hover { background: var(--white); box-shadow: var(--shadow-sm); transform: translateY(-3px); } .feature-item .f-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--gradient-brand-soft); color: var(--blue-600); display: flex; align-items: center; justify-content: center; } .feature-item .f-icon svg { width: 22px; height: 22px; } .feature-item h3 { font-size: 16.5px; margin-bottom: 6px; font-weight: 700; } .feature-item p { font-size: 14.5px; color: var(--muted); } /* ========================================================= İstatistik bandı ========================================================= */ .stats-band { background: var(--gradient-brand); border-radius: var(--radius-lg); padding: 50px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-glow); } @media (max-width: 780px) { .stats-band { grid-template-columns: repeat(2, 1fr); } } .stats-band .stat-item { text-align: center; color: white; position: relative; z-index: 1; } .stats-band .stat-item b { display: block; font-size: 38px; font-weight: 800; } .stats-band .stat-item span { font-size: 13.5px; color: rgba(255,255,255,0.7); font-weight: 600; } /* ========================================================= CTA bandı ========================================================= */ .cta-band { position: relative; border-radius: var(--radius-lg); padding: 64px 50px; background: var(--navy-900); overflow: hidden; text-align: center; isolation: isolate; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 20%, rgba(31,91,184,0.4), transparent 60%), radial-gradient(ellipse 60% 80% at 85% 90%, rgba(79,143,247,0.28), transparent 60%); z-index: -1; } .cta-band h2 { color: white; font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 16px; } .cta-band p { color: rgba(255,255,255,0.68); max-width: 520px; margin: 0 auto 32px; } .cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } /* ========================================================= Footer ========================================================= */ .site-footer { background: var(--navy-950); color: rgba(255,255,255,0.65); padding: 70px 0 26px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,0.08); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h3 { color: white; font-size: 15px; margin-bottom: 18px; font-weight: 700; } .footer-grid ul li { margin-bottom: 11px; font-size: 14.5px; } .footer-grid ul li a:hover { color: white; } .footer-logo-link { display: inline-block; } .footer-brand img { height: 30px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); } .footer-brand p { font-size: 14px; line-height: 1.7; max-width: 300px; } .footer-contact-item { display: flex; gap: 10px; margin-bottom: 14px; font-size: 14.5px; align-items: flex-start; } .footer-contact-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--blue-400); } .footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; flex-wrap: wrap; gap: 10px; } .footer-bottom a:hover { color: white; } /* ========================================================= Sayfa Hero (iç sayfalar) ========================================================= */ .page-hero { position: relative; padding: calc(var(--header-h) + 64px) 0 74px; background: var(--navy-900); overflow: hidden; text-align: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(31,91,184,0.32), transparent 65%), linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%); } .page-hero .grid-overlay { background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); } .page-hero .inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .page-hero h1 { color: white; font-size: clamp(32px, 4.6vw, 50px); margin: 20px 0 16px; } .page-hero p { color: rgba(255,255,255,0.68); font-size: 17px; } .breadcrumb { display: flex; justify-content: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: rgba(255,255,255,0.5); } .breadcrumb a:hover { color: white; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } .reveal-delay-5 { transition-delay: 0.4s; } .reveal-delay-6 { transition-delay: 0.48s; } /* Mobile nav */ @media (max-width: 900px) { .nav-links { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: #ffffff; box-shadow: 0 12px 30px rgba(10,19,48,0.18); flex-direction: column; align-items: stretch; padding: 24px; gap: 4px; transform: translateX(100%); transition: transform 0.35s ease; z-index: 999; } .nav-links.open { transform: translateX(0); } .nav-links a { text-align: center; padding: 16px; font-size: 17px; } .nav-cta { display: none; } .nav-links .nav-cta-mobile { display: inline-flex; margin-top: 12px; justify-content: center; } .nav-toggle { display: flex; } } .section-pad-sm { padding: 70px 0; } /* ========================================================= Hizmet Detay Satırları (hizmetler.html) ========================================================= */ .detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .detail-row + .detail-row { margin-top: 120px; } .detail-row.reverse .detail-visual { order: 2; } .detail-row.reverse .detail-copy { order: 1; } @media (max-width: 900px) { .detail-row, .detail-row.reverse { grid-template-columns: 1fr; gap: 36px; } .detail-row.reverse .detail-visual, .detail-row.reverse .detail-copy { order: initial; } .detail-row + .detail-row { margin-top: 70px; } } .detail-index { position: absolute; font-size: 130px; font-weight: 800; color: rgba(13,27,63,0.05); top: -50px; left: -10px; z-index: 0; line-height: 1; user-select: none; } .detail-copy { position: relative; z-index: 1; } .detail-copy h2, .detail-copy h3 { font-size: clamp(24px, 3vw, 32px); margin: 14px 0 16px; } .contact-info-card h2 { font-size: 22px; margin-bottom: 8px; } .detail-copy > p { color: var(--muted); font-size: 16px; margin-bottom: 24px; } .check-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink); font-weight: 500; } .check-list li svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; color: var(--blue-600); background: var(--gradient-brand-soft); border-radius: 50%; padding: 3px; box-sizing: content-box; } .detail-visual { position: relative; border-radius: var(--radius-lg); background: linear-gradient(160deg, #ffffff, #eef2fb 60%, #e6ecfa); border: 1px solid var(--line); min-height: 340px; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1200px; } .detail-visual .grid-overlay { opacity: 0.6; } .detail-visual .icon-giant { width: 150px; height: 150px; border-radius: 36px; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; color: white; box-shadow: var(--shadow-glow); transform: rotate(-8deg); position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); } .detail-visual:hover .icon-giant { transform: rotate(0deg) scale(1.05); } .detail-visual .icon-giant svg { width: 68px; height: 68px; } .detail-visual .mini-badge { position: absolute; background: white; border-radius: 14px; box-shadow: var(--shadow-md); padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--navy-800); display: flex; align-items: center; gap: 8px; z-index: 1; animation: floatY 5s ease-in-out infinite; } .detail-visual .mini-badge svg { width: 16px; height: 16px; color: var(--blue-600); } .detail-visual .mini-badge.b1 { top: 14%; left: 8%; animation-delay: 0.3s; } .detail-visual .mini-badge.b2 { bottom: 12%; right: 8%; animation-delay: 1s; } /* ========================================================= Hizmete özel "mockup" görselleri Her hizmetin kendi ürününü andıran, canlı animasyonlu bir önizleme kartı — jenerik ikon kutusu yerine. ========================================================= */ .mockup-card { position: relative; width: 100%; max-width: 400px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(6,11,26,0.45), 0 0 0 1px rgba(255,255,255,0.08); transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); animation: mockupFloat 6s ease-in-out infinite; } @keyframes mockupFloat { 0%, 100% { transform: perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(0px); } 50% { transform: perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(-9px); } } .detail-visual .mockup-card { max-width: 340px; } .mockup-topbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef1f8; border-bottom: 1px solid var(--line); } .mockup-topbar .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mockup-topbar .dot.red { background: #ff5f57; } .mockup-topbar .dot.yellow { background: #febc2e; } .mockup-topbar .dot.green { background: #28c840; } .mockup-topbar .mockup-url { margin-left: 6px; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 3px 10px; font-size: 10.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes shimmerSweep { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } /* ---- 1) Web & E-Ticaret: mini web sitesi / mağaza önizlemesi ---- */ .mb-body { padding: 15px; background: linear-gradient(180deg,#fff,#f7f9fd); } .mb-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; } .mb-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--gradient-brand); flex-shrink: 0; } .mb-link { height: 7px; width: 30px; border-radius: 4px; background: #e2e7f3; } .mb-cart { margin-left: auto; position: relative; width: 24px; height: 24px; border-radius: 50%; background: #eef2fb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mb-cart svg { width: 13px; height: 13px; color: var(--blue-600); } .mb-cart-badge { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ff5f57; color: #fff; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; animation: badgePulse 2.4s ease-in-out infinite; } .mb-hero { display: flex; gap: 10px; align-items: center; background: var(--gradient-brand); border-radius: 12px; padding: 14px; margin-bottom: 12px; overflow: hidden; position: relative; } .mb-hero-text { flex: 1; display: flex; flex-direction: column; gap: 7px; } .mb-line { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.35); position: relative; overflow: hidden; } .mb-line.w70 { width: 70%; } .mb-line.w50 { width: 50%; } .mb-line.w80 { width: 80%; } .mb-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); transform: translateX(-120%); animation: shimmerSweep 2.6s ease-in-out infinite; } .mb-btn { margin-top: 2px; width: 52px; height: 14px; border-radius: 999px; background: #fff; } .mb-hero-art { width: 46px; height: 46px; border-radius: 8px; background: rgba(255,255,255,0.2); flex-shrink: 0; } .mb-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mb-product { border: 1px solid var(--line); border-radius: 10px; padding: 7px; opacity: 0; transform: translateY(10px); animation: productIn 6s ease-in-out infinite; } .mb-product.p1 { animation-delay: 0s; } .mb-product.p2 { animation-delay: 0.4s; } .mb-product.p3 { animation-delay: 0.8s; } .mb-thumb { height: 30px; border-radius: 6px; background: linear-gradient(135deg,#e6ecfa,#cfe0fb); margin-bottom: 6px; } .mb-product .mb-line { background: #e2e7f3; margin-bottom: 5px; } .mb-product .mb-line::after { display: none; } .mb-price { display: block; height: 7px; width: 45%; border-radius: 4px; background: var(--blue-400); } @keyframes productIn { 0%, 8% { opacity: 0; transform: translateY(10px); } 20%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } } .mb-toast { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--navy-900); color: #fff; font-size: 10.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; white-space: nowrap; opacity: 0; box-shadow: var(--shadow-md); animation: toastPop 6s ease-in-out infinite; } @keyframes toastPop { 0%, 62% { opacity: 0; transform: translateX(-50%) translateY(8px); } 70%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); } 97%, 100% { opacity: 0; transform: translateX(-50%) translateY(8px); } } /* ---- 2) Mobil Uygulama: telefon çerçevesi + uygulama ekranı ---- */ .mockup-phone { max-width: 210px; border-radius: 32px; background: #0d1b3f; padding: 9px; } .mp-notch { width: 64px; height: 16px; background: #0d1b3f; border-radius: 0 0 12px 12px; margin: 0 auto 5px; position: relative; z-index: 2; } .mp-screen { background: #fff; border-radius: 22px; overflow: hidden; padding-bottom: 8px; } .mp-statusbar { display: flex; justify-content: space-between; padding: 9px 15px 2px; font-size: 9.5px; font-weight: 700; color: var(--navy-800); } .mp-appbar { padding: 9px 15px 12px; } .mp-appbar-title { display: block; width: 58%; height: 11px; border-radius: 5px; background: var(--gradient-brand); } .mp-cards { padding: 0 13px; display: flex; flex-direction: column; gap: 8px; } .mp-card { height: 46px; border-radius: 11px; background: linear-gradient(135deg,#eef2fb,#e2e9fa); opacity: 0; transform: translateY(12px); animation: mpCardIn 5s ease-in-out infinite; } .mp-card.c1 { animation-delay: 0s; } .mp-card.c2 { animation-delay: 0.3s; } .mp-card.c3 { animation-delay: 0.6s; } @keyframes mpCardIn { 0%, 6% { opacity: 0; transform: translateY(12px); } 22%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } } .mp-tabbar { display: flex; justify-content: space-around; padding: 13px 10px 3px; border-top: 1px solid var(--line); margin-top: 10px; } .mp-tab { width: 16px; height: 16px; border-radius: 6px; background: #e2e7f3; } .mp-tab.active { background: var(--blue-500); animation: badgePulse 2.4s ease-in-out infinite; } /* ---- 3) Uygulama Geliştirme: kod editörü ---- */ .mockup-code { background: #0d1224; } .mockup-code .mockup-topbar { background: #171f38; border-bottom-color: rgba(255,255,255,0.06); } .mockup-code .mockup-url { background: #0d1224; border-color: rgba(255,255,255,0.1); color: #8891a5; } .mc-body { padding: 15px 17px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 11.5px; line-height: 1.95; } .mc-line { white-space: nowrap; color: #cfe0ff; } .mc-num { display: inline-block; width: 16px; color: #454f70; user-select: none; } .mc-kw { color: #82b1fb; } .mc-fn { color: #8ee6c2; } .mc-str { color: #f2c879; } .mc-type { overflow: hidden; white-space: nowrap; display: inline-block; vertical-align: bottom; width: 0; } .mc-type.l1 { animation: type1 8s steps(20,end) infinite; } .mc-type.l2 { animation: type2 8s steps(20,end) infinite; } .mc-type.l3 { animation: type3 8s steps(20,end) infinite; } .mc-type.l4 { animation: type4 8s steps(12,end) infinite; } @keyframes type1 { 0%, 3% { width: 0; } 13%, 92% { width: 19ch; } 100% { width: 19ch; } } @keyframes type2 { 0%, 17% { width: 0; } 27%, 92% { width: 20ch; } 100% { width: 20ch; } } @keyframes type3 { 0%, 31% { width: 0; } 41%, 92% { width: 18ch; } 100% { width: 18ch; } } @keyframes type4 { 0%, 45% { width: 0; } 52%, 92% { width: 10ch; } 100% { width: 10ch; } } .mc-cursor { display: inline-block; width: 5px; height: 12px; background: #82b1fb; vertical-align: -2px; animation: blink 0.9s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .mc-terminal { border-top: 1px solid rgba(255,255,255,0.08); padding: 10px 17px; font-size: 10.5px; color: #8ee6c2; font-weight: 700; display: flex; align-items: center; gap: 7px; opacity: 0; animation: termIn 8s ease-in-out infinite; } .mc-terminal svg { width: 13px; height: 13px; flex-shrink: 0; } @keyframes termIn { 0%, 78% { opacity: 0; } 86%, 100% { opacity: 1; } } /* ---- 4) SEO & SEA: arama sonuçları / performans önizlemesi ---- */ .ms-body { padding: 15px; } .ms-searchbar { display: flex; align-items: center; gap: 8px; background: #f2f4fa; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; margin-bottom: 13px; } .ms-searchbar svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; } .ms-searchbar span { font-size: 11px; color: var(--navy-800); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-result { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); animation: rankShift 4.5s ease-in-out infinite; } .ms-result:last-child { border-bottom: none; } .ms-rank { width: 20px; height: 20px; border-radius: 50%; background: var(--gradient-brand); color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ms-result-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ms-rline { height: 6px; border-radius: 4px; background: #e2e7f3; } .ms-rline.title { background: var(--blue-300); width: 72%; } .ms-rline.w90 { width: 90%; } .ms-trend { color: #1fbf75; font-weight: 800; font-size: 13px; flex-shrink: 0; } @keyframes rankShift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .ms-chart { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-top: 13px; padding: 0 2px; } .ms-chart .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--gradient-brand); transform-origin: bottom; animation: barGrow 2.4s ease-in-out infinite; } .ms-chart .bar:nth-child(1) { height: 45%; animation-delay: 0s; } .ms-chart .bar:nth-child(2) { height: 65%; animation-delay: 0.15s; } .ms-chart .bar:nth-child(3) { height: 40%; animation-delay: 0.3s; } .ms-chart .bar:nth-child(4) { height: 85%; animation-delay: 0.45s; } .ms-chart .bar:nth-child(5) { height: 60%; animation-delay: 0.6s; } @keyframes barGrow { 0%, 100% { transform: scaleY(0.75); } 50% { transform: scaleY(1); } } /* ---- 5) Dijital Reklam: sosyal medya reklam kartı ---- */ .mockup-social { max-width: 260px; } .ms2-header { display: flex; align-items: center; gap: 9px; padding: 13px 15px; } .ms2-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-brand); flex-shrink: 0; } .ms2-meta { flex: 1; min-width: 0; } .ms2-name { display: block; width: 64px; height: 7px; border-radius: 4px; background: #e2e7f3; margin-bottom: 5px; } .ms2-sponsored { font-size: 9px; color: var(--muted-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .ms2-media { margin: 0 15px 11px; height: 118px; border-radius: 12px; background: linear-gradient(135deg,#dbe6fb,#bcd2f7); position: relative; overflow: hidden; } .ms2-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-120%); animation: shimmerSweep 3.4s ease-in-out infinite; } .ms2-roi { position: absolute; top: 12px; right: 12px; background: #0d1b3f; color: #fff; font-size: 10.5px; font-weight: 800; padding: 6px 11px; border-radius: 999px; box-shadow: var(--shadow-md); animation: floatY 5s ease-in-out infinite; } .ms2-actions { display: flex; align-items: center; gap: 14px; padding: 0 15px 9px; } .ms2-actions svg { width: 16px; height: 16px; color: var(--muted); } .ms2-actions svg.ms2-heart { color: #ff5f57; animation: heartBeat 2.2s ease-in-out infinite; } @keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } } .ms2-stats { padding: 0 15px 13px; font-size: 11.5px; font-weight: 700; color: var(--navy-800); } /* ---- 6) AI Destekli Yazılım: sohbet / asistan önizlemesi ---- */ .mockup-chat { max-width: 260px; background: #0d1224; } .ma-header { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,0.08); } .ma-avatar { width: 28px; height: 28px; border-radius: 9px; background: var(--gradient-brand); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ma-name { color: #fff; font-size: 12px; font-weight: 700; flex: 1; } .ma-status { color: #8ee6c2; font-size: 9.5px; font-weight: 700; white-space: nowrap; } .ma-body { padding: 15px; display: flex; flex-direction: column; gap: 9px; } .ma-msg { max-width: 82%; padding: 8px 12px; border-radius: 13px; font-size: 11px; font-weight: 600; line-height: 1.5; } .ma-msg.user { align-self: flex-end; background: var(--gradient-brand); color: #fff; border-bottom-right-radius: 4px; } .ma-msg.bot { align-self: flex-start; background: rgba(255,255,255,0.08); color: #cfe0ff; border-bottom-left-radius: 4px; } .ma-typing { display: inline-flex; gap: 4px; padding: 2px 0; } .ma-typing span { width: 5px; height: 5px; border-radius: 50%; background: #82b1fb; animation: typingDot 1.2s ease-in-out infinite; } .ma-typing span:nth-child(2) { animation-delay: 0.2s; } .ma-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .ma-swap { position: relative; min-height: 34px; } .ma-swap .ma-msg { position: absolute; top: 0; left: 0; margin: 0; } .ma-msg.typing-msg { animation: msgSwapOut 7s ease-in-out infinite; } .ma-msg.final-msg { opacity: 0; animation: msgSwapIn 7s ease-in-out infinite; } @keyframes msgSwapOut { 0%, 48% { opacity: 1; } 56%, 100% { opacity: 0; } } @keyframes msgSwapIn { 0%, 56% { opacity: 0; transform: translateY(6px); } 66%, 100% { opacity: 1; transform: translateY(0); } } .process-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 780px) { .process-strip { grid-template-columns: repeat(2, 1fr); } } .process-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 22px; position: relative; } .process-step .step-num { font-size: 34px; font-weight: 800; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; display: block; } .process-step h3 { font-size: 16.5px; margin-bottom: 8px; font-weight: 700; } .process-step p { font-size: 14px; color: var(--muted); } /* ========================================================= Hizmet detay sayfaları — hızlı geçişler ========================================================= */ .related-grid { display: flex; flex-wrap: wrap; gap: 12px; } .related-pill { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-weight: 700; font-size: 14.5px; color: var(--navy-800); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .related-pill:hover { border-color: var(--blue-400); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .related-pill svg { width: 17px; height: 17px; color: var(--blue-600); flex-shrink: 0; } .hero-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } @media (max-width: 980px) { .hero-badge-row { justify-content: center; } } .hero-mini-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; } .hero-mini-badge svg { width: 15px; height: 15px; color: var(--blue-300); } /* ========================================================= Hizmet detay: "Detayları İnceleyin" / "Teklif İsteyin" ikilisi ========================================================= */ .detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .detail-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; margin: 0; font-family: inherit; } .detail-toggle svg { width: 16px; height: 16px; transition: transform 0.3s ease; } .detail-row.is-open .detail-toggle svg { transform: rotate(180deg); } .detail-row.is-open .detail-toggle .toggle-label-closed { display: none; } .detail-row:not(.is-open) .detail-toggle .toggle-label-open { display: none; } .detail-extra { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease, margin 0.4s ease; } .detail-row.is-open .detail-extra { max-height: 600px; opacity: 1; margin-bottom: 22px; } /* Icon her zaman hafifçe hareket etsin (3D / canlı his) */ .icon-giant { animation: iconFloat 4.5s ease-in-out infinite; } @keyframes iconFloat { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-10px); } } .detail-visual:hover .icon-giant { animation-play-state: paused; transform: rotate(0deg) scale(1.06); } /* ========================================================= Yukarı çık butonu ========================================================= */ .scroll-top-btn { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-brand); color: white; border: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; z-index: 900; } .scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top-btn svg { width: 22px; height: 22px; } .scroll-top-btn:hover { transform: translateY(-3px); } /* ========================================================= Mobil sıkılaştırma — gerçek bir mobil deneyim ========================================================= */ @media (max-width: 640px) { :root { --header-h: 68px; } .container { padding: 0 20px; } .section-pad { padding: 52px 0; } .section-pad-sm { padding: 40px 0; } .section-head { margin-bottom: 36px; } .hero { padding: calc(var(--header-h) + 26px) 0 44px; } .hero h1 { font-size: 30px; margin: 16px 0 16px; } .hero p.lead { font-size: 15.5px; margin-bottom: 26px; } .hero-stats { gap: 22px; } .hero-stats .stat b { font-size: 24px; } /* "Teklif İsteyin" / "Diğer Hizmetler" yan yana, eşit genişlikte */ .hero-actions { flex-wrap: nowrap; gap: 10px; margin-bottom: 26px; } .hero-actions .btn { flex: 1 1 0; padding: 13px 8px; font-size: 13.5px; justify-content: center; white-space: nowrap; } .hero-actions .btn svg { width: 15px; height: 15px; } .hero-visual { height: 220px; } .network-core { width: 66px; height: 66px; border-radius: 18px; } .network-core svg { width: 28px; height: 28px; } .network-badge { padding: 6px 10px; font-size: 10px; gap: 6px; } .network-badge svg { width: 13px; height: 13px; } .network-badge.nb1 { top: 8%; left: 4%; } .network-badge.nb2 { bottom: 8%; right: 4%; } .hero-badge-row { margin-top: 18px; } /* Hizmet sayfası mockup kartları mobilde daha küçük */ .mockup-card { max-width: 250px; } .mockup-phone { max-width: 190px; } .mockup-code .mc-body { font-size: 10.5px; padding: 13px 15px; line-height: 1.75; } .mockup-search .ms-chart { height: 32px; } .mockup-social { max-width: 230px; } .mockup-chat { max-width: 230px; } /* Hizmet / kart grid'leri mobilde 2 sütun — daha az aşağı kaydırma */ .services-grid { gap: 12px; } .service-card { padding: 16px 13px; } .service-card .icon-box { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px; } .service-card .icon-box svg { width: 19px; height: 19px; } .service-card h3 { font-size: 14.5px; margin-bottom: 6px; line-height: 1.3; } .service-card p { font-size: 12px; line-height: 1.5; } .service-card .tag-list { margin-top: 8px; gap: 5px; } .service-card .tag-list span { font-size: 10px; padding: 3px 8px; } .service-card .more-link { margin-top: 10px; font-size: 12px; gap: 4px; } .service-card .more-link svg { width: 13px; height: 13px; } .service-card .detail-actions { margin-top: 10px !important; flex-direction: column; gap: 7px; } .service-card .detail-actions .btn { width: 100%; padding: 9px 10px; font-size: 11.5px; } .stats-band { padding: 30px 20px; gap: 22px 14px; border-radius: var(--radius-md); } .stats-band .stat-item b { font-size: 28px; } .cta-band { padding: 40px 22px; border-radius: var(--radius-md); } .detail-row + .detail-row { margin-top: 46px; } .detail-visual { min-height: 240px; } .detail-index { font-size: 90px; top: -30px; } .page-hero { padding: calc(var(--header-h) + 34px) 0 46px; } .page-hero h1 { font-size: 28px; } .page-hero p { font-size: 15px; } /* Footer — mobilde minimal: sadece ortalanmış logo + açıklama. Nav'da zaten olan "Kurumsal" / "Hizmetler" listeleri ve İletişim bloğu tekrar edilmeden tamamen gizlenir. */ .site-footer { padding: 28px 0 16px; } .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 18px; border-bottom: none; } .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3), .footer-grid > div:nth-child(4) { display: none; } .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-brand img { height: 26px; width: auto; margin-bottom: 10px; } .footer-brand p { max-width: 320px; margin-bottom: 0; font-size: 13px; line-height: 1.5; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 12px; font-size: 11.5px; } .footer-bottom span:nth-child(2) { display: none; } .scroll-top-btn { right: 14px; bottom: 14px; width: 44px; height: 44px; } }