:root { --blue: #0057FF; --blue-light: #3D7FFF; --blue-pale: #EBF1FF; --cyan: #00C2FF; --navy: #050A18; --navy-mid: #0D1530; --white: #FFFFFF; --off-white: #F4F7FF; --off-white-2: #EAF0FB; /* kap: gri kartları toplayan alan, bir ton koyu */ --gray: #6B7280; --gray-light: #E5EAFF; --border: rgba(0,87,255,0.12); /* ARKA PLAN KURALI (tek kural, bütün sayfa) — BEYAZ AZ, GRİ ÇOK (kullanıcı kararı, 10 Eylül 2026): kart (içerik kutusu) → --off-white (özellik, SSS, fiyat kartı, Kurumsal) kap (kartları toplayan alan) → --off-white-2 (fiyat, takvim) kart içindeki küçük kutu → --blue-pale Beyaz yalnızca zorunlu yerde: navbar, koyu video çerçevesinin üstündeki yüzen kartlar, takvim çerçevesi (Google sayfası zaten beyaz). */ /* Başlık ve gövde AYRI yüz: tek yazı tipiyle kurulan sayfa şablon gibi okunuyordu (eskiden her şey Lexend). */ --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* `hidden` her zaman gizler. Tarayıcının kendi kuralı zayıf: bir sınıf `display: flex` verince eziliyor ve içerik bekleyen bölüm (kurucu, sesli demo) yer tutucusuyla birlikte görünüyordu. */ [hidden] { display: none !important; } /* Yalnızca ekran okuyucuya: görünmez ama okunur. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* scroll-padding keeps anchor targets clear of the 66px sticky navbar, so a nav click lands on the section heading instead of hiding it behind the bar */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: var(--font-body); background: var(--white); color: var(--navy); min-height: 100vh; /* `clip`, `hidden` değil: `hidden` body'yi bir kaydırma kabına çevirebiliyor ve o zaman position: sticky (özellikler bölümünün kaydırmalı sahnesi) çalışmıyor. */ overflow-x: clip; /* iOS Safari yatay moda dönerken gövde metnini kendiliğinden büyütüyor; bu satır tipografiyi tasarlandığı ölçekte tutar */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* uzun kelimeler / kesintisiz URL'ler dar ekranda kutudan taşmasın */ h1, h2, h3, h4, p, li, td, th, a { overflow-wrap: break-word; } /* menü açıkken arkadaki sayfa kaymasın — kilit üzerinde: kaydırılan kök o, body'ye konan overflow bazı mobil tarayıcılarda sayfayı tutmuyor */ html.menu-open { overflow: hidden; } /* ambient blue wash behind the whole page — sits under .page (z-index 1) so it tints the white without touching any component's own background */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 520px at 12% -6%, rgba(0,87,255,0.09), transparent 62%), radial-gradient(760px 480px at 92% 14%, rgba(0,194,255,0.08), transparent 60%), radial-gradient(1000px 600px at 50% 108%, rgba(0,87,255,0.07), transparent 65%); } a { color: inherit; text-decoration: none; } ::selection { background: rgba(0,87,255,0.18); color: var(--navy); } /* blue scrollbar so even the chrome of the page reads as part of the palette */ * { scrollbar-color: var(--blue-light) var(--blue-pale); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--blue-pale); } ::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid var(--blue-pale); background: var(--blue-light); } ::-webkit-scrollbar-thumb:hover { background: var(--blue); } /* ══════════════════════════════════ STICKY NAVBAR ══════════════════════════════════ */ .navbar { position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); /* blue glow around the bar so it sits on the page instead of cutting it */ box-shadow: 0 6px 28px rgba(0,87,255,0.18), 0 2px 10px rgba(0,87,255,0.10); } /* gradient hairline under the bar, brightest in the middle */ .navbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--blue), transparent); opacity: 0.55; } .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Bağlantı blok: satır içi kalınca tıklama alanı logonun değil satırın yüksekliğinde (20px) kalıyordu. */ .navbar-logo a { display: block; } .navbar-logo img { height: 52px; width: auto; display: block; } .navbar-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .navbar-links a { padding: 6px 14px; border-radius: 999px; font-size: 0.88rem; color: var(--navy-mid); font-weight: 500; transition: 0.2s; } .navbar-links a:hover { background: var(--blue-pale); color: var(--blue); } .navbar-actions { display: flex; align-items: center; gap: 8px; } /* Ücretsiz Başla'nın yanında ama onunla yarışmıyor: dolu mavi CTA ziyaretçinin, çerçeveli bağlantı mevcut müşterinin. */ .navbar-login { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(0,87,255,0.3); color: var(--blue); font-weight: 500; font-size: 0.88rem; white-space: nowrap; transition: 0.2s; } .navbar-login:hover { background: var(--blue-pale); border-color: var(--blue); } .navbar-cta { padding: 9px 20px; border-radius: 999px; background: var(--blue); color: var(--white) !important; font-weight: 600; font-size: 0.88rem; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 18px rgba(0,87,255,0.35); transition: 0.2s; } .navbar-cta:hover { background: var(--blue-light); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,87,255,0.45); } /* ── Hamburger + mobil menü ────────────────────────────────────────────── 1024px ve altında .navbar-links gizleniyor; navigasyon buradan yürüyor. Kırılım 768'di: 769–1024 arası (dikey ve yatay tablet) altı bağlantı + iki düğme tek satıra sığmıyor, bar iki satıra düşüyordu. Düğme 44x44 — dokunmatik hedef alt sınırı. */ .navbar-burger { display: none; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--white); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; -webkit-tap-highlight-color: transparent; } .navbar-burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--blue); transition: transform 0.25s ease, opacity 0.2s ease; } .navbar-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .navbar-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; flex-direction: column; padding: 10px 16px 18px; background: rgba(255,255,255,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); max-height: calc(100dvh - 66px); overflow-y: auto; } .mobile-menu[hidden] { display: none; } .mobile-menu a { padding: 13px 12px; border-radius: 12px; font-size: 1rem; font-weight: 500; color: var(--navy-mid); border-bottom: 1px solid rgba(0,87,255,0.07); } .mobile-menu a:last-of-type { border-bottom: none; } /* Tablette "Müşteri Girişi" barda duruyor; menüde ikinci kez gösterilmiyor. Telefonda bar dar, orada yalnızca menüde (768px bloğu). */ .mobile-menu .mobile-menu-login { display: none; } .mobile-menu a:active { background: var(--blue-pale); } .mobile-menu-cta { margin-top: 12px; text-align: center; background: var(--blue); color: var(--white) !important; font-weight: 600 !important; border-radius: 999px !important; border-bottom: none !important; box-shadow: 0 6px 18px rgba(0,87,255,0.35); } .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(5,10,24,0.35); } .mobile-menu-backdrop[hidden] { display: none; } /* ══════════════════════════════════ PAGE WRAPPER ══════════════════════════════════ */ .page { max-width: 1200px; margin: 0 auto; padding: 90px 20px 60px; position: relative; z-index: 1; } /* ══════════════════════════════════ BLUE WASH One full-bleed vertical gradient spanning the entire page: white at the top, deepest blue around the middle, white again at the bottom. The stops follow an ease curve (dense near the peak, sparse at the ends) so the scroll reads as a continuous fade with no visible banding or hard edge. ══════════════════════════════════ */ .page::before { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; background: linear-gradient( 180deg, rgba(0,87,255,0) 0%, rgba(0,87,255,0.015) 6%, rgba(0,87,255,0.045) 12%, rgba(0,87,255,0.09) 19%, rgba(0,90,255,0.15) 26%, rgba(0,94,255,0.22) 33%, rgba(0,98,255,0.29) 40%, rgba(0,102,255,0.35) 46%, rgba(0,105,255,0.38) 52%, rgba(0,120,255,0.35) 58%, rgba(0,135,255,0.29) 65%, rgba(0,150,255,0.22) 72%, rgba(0,165,255,0.15) 79%, rgba(0,180,255,0.09) 86%, rgba(0,190,255,0.045) 92%, rgba(0,194,255,0.015) 97%, rgba(0,194,255,0) 100% ); } /* ══════════════════════════════════ BAŞLIK TİPOGRAFİSİ Eskiden h1/h2'ler mavi→camgöbeği hareketli gradient'ti; en tanıdık şablon sinyallerinden biri olduğu için kaldırıldı, başlıklar düz lacivert. Boyutlar bilerek modüler bir diziye (16/24/32/48) oturtulmadı; elle seçildi. Büyük başlıkta sıkı harf aralığı ve 1.05 satır yüksekliği: display yüzü büyük punto için çizilmiş, varsayılan aralıkla dağınık durur. ══════════════════════════════════ */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); /* OPTİK BOYUT SABİT: Bricolage'ın "opsz" ekseni var ve varsayılan (auto) ayarda küçük puntoda kendini sadeleştiriyor — 18px'lik kart başlığı gövde yazı tipinden (Geist) gözle ayrılmıyordu, fark yalnızca büyük başlıkta görünüyordu. 96'ya sabitlemek her boyutta aynı karakterli çizimi kullandırıyor. */ font-optical-sizing: none; font-variation-settings: "opsz" 96; } h1 { letter-spacing: -0.03em; line-height: 1.05; } h2 { letter-spacing: -0.025em; line-height: 1.1; } h3 { letter-spacing: -0.01em; line-height: 1.25; } /* ══════════════════════════════════ HERO Sola dayalı. Ekran görüntüsü gelince iki sütun (metin + panel); görüntü `hidden` iken tek sütun, satır boyu okunabilir genişlikte. ══════════════════════════════════ */ .hero { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; } .hero:has(.hero-demo:not([hidden])) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 14px 7px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--navy-mid); background: var(--off-white); border: 1px solid var(--gray-light); box-shadow: 0 4px 14px rgba(0,87,255,0.06); } /* yanıp sönen yeşil nokta: "hat açık" */ .hero-kicker-dot, .hero-float-live { width: 9px; height: 9px; border-radius: 50%; background: #22A05A; box-shadow: 0 0 0 0 rgba(34,160,90,0.5); animation: canli 2s ease-out infinite; flex-shrink: 0; } @keyframes canli { 0% { box-shadow: 0 0 0 0 rgba(34,160,90,0.5); } 70% { box-shadow: 0 0 0 8px rgba(34,160,90,0); } 100% { box-shadow: 0 0 0 0 rgba(34,160,90,0); } } .hero h1 { font-size: 3.6rem; font-weight: 800; margin-bottom: 20px; max-width: 15ch; } /* Vurgu: düz marka mavisi + altında elle çizilmiş gibi bir çizgi. Gradient değil — kaldırdığımız şablon sinyalini geri getirmesin. */ .hero-accent { position: relative; color: var(--blue); white-space: nowrap; } .hero-underline { position: absolute; left: 0; right: 0; bottom: -0.12em; width: 100%; height: 0.28em; color: var(--cyan); opacity: 0.7; z-index: -1; } .hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 0.88rem; color: var(--navy-mid); } .hero-facts li::before { content: "✓"; margin-right: 7px; font-weight: 700; color: var(--blue); } .hero-sub { font-size: 1.08rem; color: var(--navy-mid); opacity: 0.8; max-width: 60ch; margin: 0 0 26px; line-height: 1.65; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; } /* Demo videosu: kendi en-boy oranını alıyor (width/height yok, height:auto). Dikey videoda sütunu doldurup ekrandan taşmasın diye yüksekliği pencereyle sınırlı. */ /* "Demo videomuzu izleyin" — CTA'ların altında, düğme değil bağlantı: birincil eylem görüşme; demo ikincil. */ .hero-watch { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 0.95rem; font-weight: 600; color: var(--navy); } .hero-watch-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 0.75rem; padding-left: 2px; color: #fff; background: var(--blue); box-shadow: 0 0 0 5px var(--blue-pale); transition: transform 0.2s ease; } .hero-watch:hover { color: var(--blue); } .hero-watch:hover .hero-watch-icon { transform: scale(1.08); } .hero-demo { position: relative; scroll-margin-top: 90px; margin: 0; justify-self: center; width: 100%; max-width: 420px; } .hero-demo-video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: 20px; background: var(--navy); box-shadow: 0 24px 60px rgba(5,10,24,0.18); } /* Çerçevenin kenarına taşan kartlar */ .hero-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--gray-light); box-shadow: 0 14px 34px rgba(5,10,24,0.16); font-size: 0.85rem; color: var(--navy-mid); white-space: nowrap; } .hero-float strong { color: var(--navy); } .hero-float--call { top: 26px; left: -34px; } .hero-float--booking { bottom: 70px; right: -30px; flex-direction: column; align-items: flex-start; gap: 4px; } .hero-float-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6e6e66; } .hero-float-row { font-variant-numeric: tabular-nums; } .hero-float-row b { color: var(--navy); margin-right: 4px; } .hero-float-row em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #e7f4ed; color: #106143; } /* 1240px'in altında sayfanın kenar boşluğu 20px'e iniyor; sağa taşan kart pencereden çıkıyordu (960px'te 10px). */ @media (max-width: 1240px) { .hero-float--booking { right: -12px; } } @media (prefers-reduced-motion: reduce) { .hero-kicker-dot, .hero-float-live { animation: none; } } /* Video gelene kadar yer tutucu: 4:5 lacivert çerçeve, ortada oynat simgesi. Video da aynı kutuya oturacak, yerleşim değişmeyecek. */ .hero-demo-empty { aspect-ratio: 4 / 5; max-height: 78vh; border-radius: 20px; background: radial-gradient(420px 320px at 80% 0%, rgba(0,194,255,0.22), transparent 65%), linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%); box-shadow: 0 24px 60px rgba(5,10,24,0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .hero-demo-play { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; padding-left: 5px; font-size: 1.4rem; color: var(--navy); background: #fff; box-shadow: 0 0 0 10px rgba(255,255,255,0.12); } .hero-demo-soon { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.7); } .hero-demo figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--gray); text-align: center; } /* ══════════════════════════════════ SHARED SECTION STYLES ══════════════════════════════════ */ .section { margin-top: 72px; } .section-header { text-align: center; margin-bottom: 36px; } .section-header h2 { font-size: 2.15rem; font-weight: 700; margin-bottom: 10px; } .section-header p { font-size: 0.97rem; color: var(--gray); max-width: 560px; margin: 0 auto; } .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); background: linear-gradient(135deg, var(--blue-pale), #F5FAFF); box-shadow: inset 0 0 0 1px rgba(0,87,255,0.16), 0 4px 12px rgba(0,87,255,0.08); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; } /* Sola dayalı bölüm: her bölüm "ortada başlık + grid" olmasın diye. Uzun paragraf ortalanmıyor; yalnızca kısa başlıklar ortada kalıyor. */ .section--left .section-header { text-align: left; } .section--left .section-header p { margin: 0; max-width: 60ch; } /* ══════════════════════════════════ NELER YAPAR — sabit kartlar, eşit olmayan ızgara 3 sütun; geniş kartlar 2 sütun kaplıyor → satırlar (2+1), (1+2), (1+1+1). Eski 8 eşit çevrilen kartın yerine: görünüm eskisine yakın, ama ızgara eşit değil ve metin tıklamadan okunuyor. ══════════════════════════════════ */ /* Üstte üç ana kart: ortadaki (pratik görünüm) daha geniş, çünkü içinde iki panel kartı yan yana duruyor. */ .feature-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; } /* Altta beş destekleyici madde: küçük simge + başlık + tek cümle, iz yok. Beş madde üç sütunda son sırayı yarım bırakırdı; 6'lık ızgarada ilk üçü 2'şer, son ikisi 3'er sütun kaplıyor → iki dolu sıra (3 + 2). */ .feature-minis { list-style: none; margin-top: 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 20px; } .feature-mini { grid-column: span 2; } .feature-mini:nth-child(n+4) { grid-column: span 3; } .feature-mini { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--off-white); border: 1px solid var(--gray-light); box-shadow: 0 4px 14px rgba(0,87,255,0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .feature-mini:hover { border-color: rgba(0,87,255,0.25); box-shadow: 0 10px 24px rgba(0,87,255,0.08); } .feature-mini h3 { font-size: 1rem; font-weight: 700; margin-bottom: 3px; } .feature-mini p { font-size: 0.86rem; color: var(--gray); line-height: 1.5; } .feature-icon--sm { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; } .feature-icon--sm svg { width: 20px; height: 20px; } .feature-mini:hover .feature-icon--sm { background: linear-gradient(135deg, var(--blue), var(--cyan)); border-color: var(--blue); color: #fff; } .feature-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; border-radius: 20px; background: var(--off-white); box-shadow: 0 6px 20px rgba(0,87,255,0.05); border: 1px solid var(--gray-light); transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } /* "7/24" rozeti: sayfanın en önemli vaadi, ilk kartın sağ üst köşesinde. */ .feature-badge { position: absolute; top: 24px; right: 24px; padding: 5px 14px; border-radius: 999px; font-family: var(--font-display); font-variation-settings: "opsz" 96; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 6px 16px rgba(0,87,255,0.25); } .feature-card:hover { border-color: rgba(0,87,255,0.30); box-shadow: 0 12px 30px rgba(0,87,255,0.10); } .feature-card h3 { font-size: 1.2rem; font-weight: 700; margin-top: 6px; } .feature-card > p:not(.trace) { font-size: 0.93rem; color: var(--gray); line-height: 1.6; max-width: 60ch; } /* --- kenarda dolaşan ışık (eski çevrilen kartlardan) -------------------- @property ile döndürülen konik degrade, 2px'lik bir halkaya maskeleniyor (kenar kutusu boyanıyor, içerik kutusu oyuluyor); yalnızca çerçeve yanıyor. Parlak kısım koninin kısa bir dilimi, bu yüzden kenarda tek bir kıvılcım gibi koşuyor. İmleç gelince bir tur, sonra sönüyor. */ @property --edge-angle { syntax: ''; initial-value: 0deg; inherits: false; } .feature-card::before, .feature-mini::before { content: ''; position: absolute; inset: -1px; border-radius: 21px; padding: 2px; z-index: 2; pointer-events: none; opacity: 0; background: conic-gradient( from var(--edge-angle), transparent 0turn, transparent 0.58turn, rgba(0,194,255,0.45) 0.74turn, var(--cyan) 0.86turn, #FFFFFF 0.91turn, var(--blue) 0.96turn, rgba(0,87,255,0.35) 0.99turn, transparent 1turn ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* açı ease-out ile (fırlıyor, yavaşlayarak duruyor), sönme doğrusal — iki ayrı animasyon, tek anahtar kare seti yumuşamayı her durakta sıfırlardı */ .feature-card:hover::before, .feature-mini:hover::before { animation: edgeTravel 1.3s cubic-bezier(0.35, 0.45, 0.1, 1) 1, edgeFade 1.3s linear 1; } /* kompakt maddelerde köşe 16px, ışık halkası da ona uyuyor */ .feature-mini::before { border-radius: 17px; } @keyframes edgeTravel { from { --edge-angle: 0deg; } to { --edge-angle: 400deg; } } @keyframes edgeFade { 0% { opacity: 0; } 4% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } } /* Simge kutusu: uçuk degrade zemin, net çerçeve, markanın mavisiyle çizgi. Karta gelince dolu degradeye, simge beyaza dönüyor. */ .feature-icon { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, rgba(0,87,255,0.14), rgba(0,194,255,0.16)); border: 1px solid #C9DAFF; background-clip: padding-box; color: var(--blue); display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .feature-icon svg { width: 25px; height: 25px; display: block; } .feature-card:hover .feature-icon { background: linear-gradient(135deg, var(--blue), var(--cyan)); border-color: var(--blue); color: #fff; } /* Kartın "izi": işin gerçekte nasıl göründüğü. Kartın dibine yaslı. */ .trace { margin-top: auto; font-size: 0.88rem; line-height: 1.5; } .trace--say { color: var(--navy-mid); font-style: italic; border-left: 3px solid var(--blue); padding: 4px 0 4px 12px; } /* Pratik görünüm — panelin kapı kartlarının kopyası (açık tema). Değerler panelin globals.css'inden: --olumlu-zemin #e7f4ed, --olumlu-metin #106143, --uyari-zemin #fbf1dd, --uyari-metin #7c5807, --bilgi-metin #2a5580, --metin #1a1a19, --metin-ikincil #57574f. */ /* İki kutu HER CİHAZDA aynı boyda: sütunlar eşit (1fr), satırlar eşit (grid-auto-rows: 1fr — tek sütuna düşünce de), kart sütununu dolduruyor. Önceden sarı kutu notu iki satıra kırıldığı için daha uzun duruyordu. */ .door { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; } .door-col { display: flex; flex-direction: column; } .door-col .door-card { flex: 1; } .door-bucket { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #6e6e66; margin-bottom: 6px; } .door-card { padding: 12px; border-radius: 8px; border: 1px solid #e5e5e1; background: #fff; font-family: var(--font-body); } .door-card--now { background: #e7f4ed; border-color: rgba(16,97,67,0.4); } .door-card--soon { background: #fbf1dd; border-color: rgba(124,88,7,0.5); } .door-time { font-size: 1.5rem; line-height: 1; font-weight: 600; color: #1a1a19; font-variant-numeric: tabular-nums; } .door-time span { font-size: 0.75rem; font-weight: 400; color: #57574f; margin-left: 10px; } .door-name { margin-top: 6px; font-size: 1rem; font-weight: 500; color: #1a1a19; } .door-meta { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 0.875rem; color: #57574f; } .door-first { padding: 1px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; background: #2a5580; color: #e9f0f7; } .door-note { margin-top: 6px; font-size: 0.875rem; color: #57574f; } /* iz ile üstündeki metin arasında nefes payı */ .feature-card > p:not(.trace) { margin-bottom: 12px; } /* Hareketi azaltmayı seçen kullanıcıda kenar ışığı dönmüyor. */ @media (prefers-reduced-motion: reduce) { .feature-card:hover::before, .feature-mini:hover::before { animation: none; } } /* ══════════════════════════════════ SESLİ DEMO — başlık + tek cümle + oynatıcı. Grid yok. ══════════════════════════════════ */ .demo-audio { max-width: 640px; } .demo-audio h2 { font-size: 2rem; margin-bottom: 8px; } .demo-audio > p { color: var(--gray); margin-bottom: 18px; } .demo-audio audio { width: 100%; } .demo-audio .demo-call { margin-top: 14px; font-size: 0.95rem; } .demo-call a { color: var(--blue); font-weight: 600; } /* ══════════════════════════════════ BİZ KİMİZ — fotoğraf + kısa metin (içerik gelince görünür) ══════════════════════════════════ */ .founder { display: flex; gap: 28px; align-items: flex-start; max-width: 760px; } .founder-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .founder h2 { font-size: 1.8rem; margin-bottom: 10px; } .founder p { line-height: 1.7; color: var(--navy-mid); max-width: 60ch; } /* ══════════════════════════════════ KURULUM — eski düzen: üç numara, aralarında çizgi ══════════════════════════════════ */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } .how-grid::before { content: ''; position: absolute; top: 36px; left: calc(16.66% + 28px); right: calc(16.66% + 28px); height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue)); z-index: 0; } .how-card { text-align: center; position: relative; z-index: 1; } .how-num { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(150deg, var(--navy) 0%, #0B1D52 55%, #0A2A7A 100%); color: #fff; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border: 3px solid var(--blue); box-shadow: 0 0 0 6px var(--blue-pale), 0 12px 26px rgba(0,87,255,0.28); } .step-when { display: block; font-size: 0.8rem; font-weight: 600; color: var(--blue); margin-bottom: 4px; } .how-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; } .how-card p { font-size: 0.93rem; color: var(--gray); line-height: 1.6; max-width: 34ch; margin: 0 auto; } /* ══════════════════════════════════ PRICING ══════════════════════════════════ */ .pricing-wrapper { background: radial-gradient(620px 320px at 8% 0%, rgba(0,87,255,0.07), transparent 68%), radial-gradient(560px 300px at 96% 100%, rgba(0,194,255,0.08), transparent 68%), var(--off-white-2); border-radius: 24px; padding: 40px 32px; border: 1px solid var(--gray-light); box-shadow: 0 18px 44px rgba(0,87,255,0.07); } /* Deneme / kurulum / vazgeçme: her pakette aynı olduğu için kartların üstünde bir kez. Kartın içinde üç kez tekrar etseydi hiçbiri okunmazdı. */ .pricing-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 0.86rem; font-weight: 500; color: var(--navy-mid); } .pricing-perk { white-space: nowrap; } .pricing-perk::before { content: "✓"; margin-right: 6px; color: var(--blue); font-weight: 700; } .pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; /* Öne çıkan kartın büyütmesi (scale) komşusunun üstüne binmesin diye kartlar ortada hizalı değil, gerilerek eşit boyda. */ align-items: stretch; } .pricing-card { background: var(--off-white); border: 1px solid var(--gray-light); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; } .pricing-card.pro { background: var(--navy); border-color: var(--blue); box-shadow: 0 16px 40px rgba(0,87,255,0.25); position: relative; overflow: hidden; /* "Hafif büyütülmüş kart": orta seçenek öne çıksın. %3'ün üstü, iki kartlık düzende komşusuyla arasındaki boşluğu gözle görülür yiyor. */ transform: scale(1.03); } .pricing-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pricing-card.pro::before { content: ''; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(0,87,255,0.3), transparent 70%); } .pricing-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--cyan); color: var(--navy); width: fit-content; } .pricing-tier { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); } .pricing-card.pro .pricing-tier { color: #93C5FD; } .pricing-price { font-family: var(--font-display); letter-spacing: -0.02em; font-size: 2.05rem; font-weight: 700; color: var(--navy); } .pricing-card.pro .pricing-price { color: #fff; } .pricing-price span { font-family: var(--font-body); letter-spacing: 0; font-size: 0.95rem; font-weight: 400; color: var(--gray); } .pricing-card.pro .pricing-price span { color: #93C5FD; } .pricing-desc { font-size: 0.88rem; color: var(--gray); font-style: italic; } .pricing-card.pro .pricing-desc { color: rgba(255,255,255,0.6); } /* Dahil dakika + aşım ücreti. Aşım küçük puntoyla ama GÖRÜNÜR: faturada sürpriz olmasın, fiyatı açık göstermekle tutarlı olsun. */ .pricing-quota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--blue-pale); font-size: 0.9rem; color: var(--navy-mid); } .pricing-quota strong { color: var(--navy); font-weight: 700; } .pricing-quota span { font-size: 0.78rem; color: var(--gray); margin-left: auto; } .pricing-card.pro .pricing-quota { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); } .pricing-card.pro .pricing-quota strong { color: #fff; } .pricing-card.pro .pricing-quota span { color: #93C5FD; } .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; color: var(--navy-mid); flex: 1; } .pricing-card.pro .pricing-features { color: rgba(255,255,255,0.85); } .pricing-features li { padding-left: 20px; position: relative; } .pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; } .pricing-card.pro .pricing-features li::before { color: var(--cyan); } /* "+ Başlangıç'taki her şey": bir özellik değil, bir önceki kartın tamamı — tik yerine artı ve kalın, gözle ayrışsın. */ .pricing-features li.pricing-features-all { font-weight: 600; } .pricing-features li.pricing-features-all::before { content: "+"; } /* ── Kurumsal şeridi ───────────────────────────────────── Kartların altında tam genişlik, yatay. Fiyat yok, tek eylem görüşme. Koyu kartla aynı dilde değil, açık zeminde kenarlıklı: "üçüncü kademe" değil "başka bir ölçek" olarak okunsun. */ .pricing-enterprise { margin-top: 22px; display: grid; grid-template-columns: 1.1fr 1.2fr auto; align-items: center; gap: 20px 32px; padding: 30px 32px; border-radius: 20px; position: relative; overflow: hidden; isolation: isolate; /* Petrol mavisi: Profesyonel kartın lacivertiyle (--navy) aynı renk DEĞİL, bir tık yeşile çalan koyu ton. Kurumsal "üçüncü kademe" değil "başka bir ölçek"; fiyatsız kutu açık zeminde silinip gidiyordu. */ background: radial-gradient(120% 140% at 12% 0%, #10394F 0%, #0A2637 45%, #071B28 100%); border: 1px solid rgba(0,194,255,0.28); box-shadow: 0 18px 44px rgba(7,27,40,0.35); color: var(--white); } /* İZOMETRİK ÇİZGİ DOKUSU (kullanıcı seçimi, altı desen karşılaştırıldı). İki kopya üst üste: açık olan 0/0'da, koyu olan 1px kaydırılmış — gofre / hafif kabartma etkisini veren şey bu kayma. Desen ::after'ta, içerik z-index ile üstünde kalıyor. */ .pricing-enterprise::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M-12 12 L12 -12 M0 48 L48 0 M36 60 L60 36'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg stroke='%23000000' stroke-width='1'%3E%3Cpath d='M-12 12 L12 -12 M0 48 L48 0 M36 60 L60 36'/%3E%3C/g%3E%3C/svg%3E"); background-position: 0 0, 1px 1px; background-size: 48px 48px, 48px 48px; opacity: 0.28; /* Desen sağ kenara doğru sönüyor: metnin arkasında en zayıf yerinde. */ -webkit-mask-image: radial-gradient(120% 130% at 100% 0%, #000 0%, rgba(0,0,0,0.25) 55%, transparent 85%); mask-image: radial-gradient(120% 130% at 100% 0%, #000 0%, rgba(0,0,0,0.25) 55%, transparent 85%); } .pricing-enterprise .pricing-tier { color: var(--cyan); } /* Slogan: bölümün en güçlü satırı. */ .pricing-enterprise-intro h3 { font-size: 1.3rem; line-height: 1.3; color: var(--white); margin: 8px 0 8px; } .pricing-enterprise-intro p { font-size: 0.88rem; color: rgba(255,255,255,0.72); line-height: 1.55; } .pricing-enterprise-features { flex: none; color: rgba(255,255,255,0.88); } .pricing-enterprise-features li::before { color: var(--cyan); } /* .btn-primary bu dosyada daha sonra geliyor; tek sınıfla yazınca mavi düğme kazanıyordu. Ebeveynle özgüllük artırıldı. */ .pricing-enterprise .pricing-enterprise-cta { white-space: nowrap; background: var(--cyan); color: #062231; box-shadow: 0 10px 26px rgba(0,194,255,0.3); } .pricing-enterprise .pricing-enterprise-cta:hover { background: #3ad2ff; box-shadow: 0 16px 34px rgba(0,194,255,0.42); } .pricing-note { margin-top: 18px; text-align: center; font-size: 0.8rem; color: var(--gray); } .divider { border: none; border-top: 1px solid var(--gray-light); margin: 4px 0; } .pricing-card.pro .divider { border-color: rgba(255,255,255,0.1); } /* ══════════════════════════════════ BUTTONS ══════════════════════════════════ */ .btn-primary { padding: 12px 24px; border-radius: 999px; border: none; background: var(--blue); color: var(--white); font-weight: 600; font-size: 0.95rem; box-shadow: 0 8px 24px rgba(0,87,255,0.35); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; font-family: var(--font-body); } .btn-primary:hover { background: var(--blue-light); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,87,255,0.45); } .btn-ghost { padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(0,87,255,0.3); background: var(--off-white); color: var(--blue); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); } .btn-ghost:hover { background: var(--blue); color: var(--white); border-color: var(--blue); } .btn-small { padding: 10px 18px; border-radius: 999px; border: none; background: var(--blue); color: var(--white); font-size: 0.87rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 6px 18px rgba(0,87,255,0.35); transition: 0.2s; font-family: var(--font-body); } .btn-small:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,87,255,0.45); } .btn-small-outline { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font-size: 0.87rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; font-family: var(--font-body); } .btn-small-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } .btn-small-outline-dark { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(0,87,255,0.35); background: transparent; color: var(--blue); font-size: 0.87rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; font-family: var(--font-body); } .btn-small-outline-dark:hover { background: var(--blue); color: var(--white); border-color: var(--blue); } .btn-full { width: 100%; } /* ══════════════════════════════════ CTA STRIP ══════════════════════════════════ */ .strip-cta { margin-top: 72px; padding: 36px 36px; border-radius: 22px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #0D2060 100%); color: rgba(255,255,255,0.85); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 20px 50px rgba(0,87,255,0.3); position: relative; overflow: hidden; } .strip-cta::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(0,194,255,0.2), transparent 70%); pointer-events: none; } .strip-cta::after { content: ''; position: absolute; bottom: -40px; left: 10%; width: 160px; height: 160px; background: radial-gradient(circle, rgba(0,87,255,0.25), transparent 70%); pointer-events: none; } .strip-cta-text { font-size: 1.05rem; max-width: 600px; position: relative; z-index: 1; } .strip-cta-text strong { color: #fff; font-size: 1.2rem; display: block; margin-bottom: 6px; } .strip-cta .btn-primary { background: var(--white); color: var(--navy); box-shadow: 0 10px 28px rgba(0,0,0,0.3); position: relative; z-index: 1; } .strip-cta .btn-primary:hover { background: var(--blue-pale); } /* ══════════════════════════════════ RAKAMLAR — tam genişlikte koyu bant Sayfanın ritmini kıran tek koyu blok. Arka plan ::before ile pencere kenarına kadar uzanıyor; body'deki overflow-x: hidden taşmayı kesiyor. ══════════════════════════════════ */ .stats-band { position: relative; padding: 64px 0 60px; color: #fff; } .stats-band::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--navy); z-index: -1; } .stats-band { isolation: isolate; } .stats-band h2 { color: #fff; font-size: 2.4rem; max-width: 18ch; margin-bottom: 36px; } .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-bottom: 44px; } .stat-card { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18); } .stat-num { font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: #fff; } /* "21×": Bricolage çarpı işaretini küçük harf boyunda çiziyor, yanındaki % işaretleri ise rakam boyunda — optik denge bozuluyordu. İşaret kendi kutusunda büyütülüp rakamın ortasına hizalanıyor. */ .stat-times { display: inline-block; margin-left: 0.04em; transform: scale(1.45) translateY(-0.02em); transform-origin: center; } .stat-card h3 { font-size: 1rem; font-weight: 600; color: #fff; } .stat-card p { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.6; flex-grow: 1; } /* kaynak satırı bilerek sessiz — güven için orada, önce okunmak için değil */ .stat-source { font-size: 0.75rem; color: rgba(255,255,255,0.45); line-height: 1.4; } /* --- comparison table ------------------------------------------------- */ .compare-wrap { /* the table is the one element that cannot reflow on a narrow screen, so it scrolls inside its own box instead of stretching the page */ overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); } .compare-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9rem; } .compare-table caption { text-align: left; padding: 20px 22px 4px; font-weight: 600; color: #fff; } .compare-table thead th { text-align: left; padding: 14px 22px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.14); } .compare-table thead th:last-child { color: var(--cyan); } .compare-table tbody th { text-align: left; font-weight: 600; color: #fff; } .compare-table th, .compare-table td { padding: 21px 22px; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,0.08); } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table tbody tr:hover { background: rgba(255,255,255,0.04); } .cell-bad, .cell-good { color: rgba(255,255,255,0.6); } .cell-bad::before { content: "✕ "; color: #E0574B; font-weight: 700; } .cell-good { color: #fff; font-weight: 500; } .cell-good::before { content: "✓ "; color: var(--cyan); font-weight: 700; } /* ══════════════════════════════════ FAQ ══════════════════════════════════ */ .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { /* kart → gri (sayfanın arka plan kuralı, :root) */ background: var(--off-white); border: 1px solid var(--gray-light); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,87,255,0.05); transition: 0.2s; } .faq-item:hover { border-color: var(--blue); } .faq-item.open { border-color: var(--blue); box-shadow: 0 6px 20px rgba(0,87,255,0.1); } .faq-q { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 12px; } .faq-q span { font-size: 0.97rem; font-weight: 600; color: var(--navy); } .faq-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); font-size: 1.1rem; font-weight: 600; transition: 0.3s; } .faq-item.open .faq-icon { background: var(--blue); color: #fff; transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.3s; font-size: 0.92rem; color: var(--gray); line-height: 1.7; padding: 0 20px; } /* 200px dar ekranda uzun cevapları kırpıyordu (WhatsApp maddesi ~10 satır); max-height sadece geçişin çalışması için var, üst sınır cömert olmalı */ .faq-a.open { max-height: 640px; padding: 0 20px 18px; } /* ══════════════════════════════════ CALENDAR ══════════════════════════════════ */ .calendar-section { margin-top: 72px; } .calendar-wrapper { background: var(--off-white-2); border-radius: 22px; padding: 32px 28px 36px; border: 1px solid var(--gray-light); box-shadow: 0 16px 40px rgba(0,87,255,0.08); } .calendar-wrapper h2 { font-size: 1.8rem; margin-bottom: 8px; } .calendar-wrapper p { font-size: 0.95rem; color: var(--gray); margin-bottom: 20px; } /* Google'ın randevu sayfası beyaz zeminli ve yüksekliğini iframe'e bildirmiyor; sabit yükseklik veriliyor, sayfa kendi içinde kayıyor. 720px masaüstünde saat listesi ve formun tamamını kaydırmadan gösteriyor. */ .calendar-frame { background: var(--white); border: 1px solid var(--gray-light); border-radius: 16px; overflow: hidden; } .calendar-iframe { display: block; width: 100%; height: 720px; border: 0; } .calendar-wrapper p.calendar-fallback { margin: 14px 0 0; font-size: 0.85rem; text-align: center; } .calendar-fallback a { color: var(--blue); font-weight: 600; } .calendar-fallback a:hover { text-decoration: underline; } /* ══════════════════════════════════ RANDEVU BİLEŞENİ — gün + saat → bilgiler → başarı Kart gri (sayfanın arka plan kuralı), içindeki seçilebilir öğeler beyaz değil gri-mavi; seçilen öğe dolu marka mavisi. ══════════════════════════════════ */ .booking { background: var(--off-white); border: 1px solid var(--gray-light); border-radius: 20px; padding: 26px; box-shadow: 0 10px 30px rgba(0,87,255,0.06); } .booking-step[data-adim="saat"] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; } .booking-step[data-adim="saat"][hidden] { display: none; } /* yükleniyor: takvim ve saatler hafifçe titreşiyor */ .booking.is-loading .booking-days, .booking.is-loading .booking-slots { min-height: 220px; border-radius: 14px; background: linear-gradient(90deg, var(--blue-pale), #F7F9FF, var(--blue-pale)); background-size: 200% 100%; animation: bookingYuk 1.2s linear infinite; } @keyframes bookingYuk { to { background-position: -200% 0; } } .booking-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .booking-month { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-size: 1.15rem; font-weight: 700; color: var(--navy); text-transform: capitalize; } .booking-nav { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--gray-light); background: var(--off-white-2); color: var(--navy); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: 0.2s; } .booking-nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); } .booking-nav:disabled { opacity: 0.35; cursor: default; } .booking-weekdays, .booking-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .booking-weekdays span { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--gray); padding-bottom: 6px; } .booking-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 12px; background: transparent; font: inherit; font-size: 0.92rem; color: #A8B1C7; cursor: default; position: relative; } .booking-day--open { background: var(--off-white-2); border-color: var(--gray-light); color: var(--navy); font-weight: 600; cursor: pointer; transition: 0.15s; } /* açık günün altında küçük nokta: "bu günde boş saat var" */ .booking-day--open::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); } .booking-day--open:hover { border-color: var(--blue); color: var(--blue); } .booking-day--today { text-decoration: underline; text-underline-offset: 3px; } .booking-day.is-selected { background: var(--blue); border-color: var(--blue); color: #fff; } .booking-day.is-selected::after { background: #fff; } .booking-times-title { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 8px 0 14px; text-transform: capitalize; } .booking-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; /* kaydırma yok: bir günde en fazla 16 saat var (09:00-17:00, 30 dk) ve hepsi takvim sütunundan kısa kalıyor. Kural değişirse (arka uç lib/demo-randevu.mjs KURAL) yükseklik yeniden ölçülmeli. */ } .booking-slot { padding: 11px 0; border-radius: 10px; border: 1px solid rgba(0,87,255,0.35); background: var(--off-white-2); color: var(--blue); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: 0.15s; } .booking-slot:hover:not(:disabled) { background: var(--blue); color: #fff; } /* dolu saat: gri ve üstü çizili — "o saat alınmış" */ .booking-slot:disabled { border-color: var(--gray-light); background: transparent; color: #A8B1C7; text-decoration: line-through; cursor: not-allowed; } .booking-tz { margin-top: 14px; font-size: 0.8rem; color: var(--gray); } .booking-status { margin-top: 12px; font-size: 0.9rem; color: #B4441F; font-weight: 500; } .booking-status:empty { display: none; } /* 2. adım */ .booking-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; margin-bottom: 18px; border-radius: 14px; background: var(--blue-pale); border: 1px solid #C9DAFF; } .booking-summary-label { font-size: 0.78rem; color: var(--gray); } .booking-summary-when { font-weight: 700; color: var(--navy); text-transform: capitalize; } .booking-change { border: 0; background: none; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .booking-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .booking-field { display: flex; flex-direction: column; gap: 6px; } .booking-field--wide { grid-column: 1 / -1; } .booking-field span { font-size: 0.86rem; font-weight: 600; color: var(--navy-mid); } .booking-field small { font-weight: 400; color: var(--gray); } .booking-field input, .booking-field textarea { font: inherit; font-size: 0.95rem; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--gray-light); background: var(--off-white-2); color: var(--navy); transition: border-color 0.15s, box-shadow 0.15s; } .booking-field textarea { resize: vertical; min-height: 84px; } .booking-field input:focus, .booking-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,87,255,0.15); } .booking-field [aria-invalid="true"] { border-color: #D2553A; } .booking-err { font-style: normal; font-size: 0.8rem; color: #B4441F; } .booking-err:empty { display: none; } /* bal küpü: ekran dışında (display:none değil — bazı botlar onu atlıyor) */ .booking-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .booking-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 0.86rem; color: var(--navy-mid); line-height: 1.5; } .booking-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blue); flex-shrink: 0; } .booking-consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .booking-form-msg { font-size: 0.88rem; color: #B4441F; margin-top: 8px; } .booking-form-msg:empty { display: none; } .booking-submit { margin-top: 18px; } .booking-submit:disabled { opacity: 0.7; cursor: progress; } /* 3. adım */ .booking-done { text-align: center; padding: 18px 0 8px; } .booking-done-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #22A05A, #3CC47C); box-shadow: 0 0 0 8px rgba(34,160,90,0.12); } .booking-done h3 { font-size: 1.5rem; margin-bottom: 6px; } .booking-done-when { font-weight: 700; color: var(--blue); text-transform: capitalize; margin-bottom: 10px; } .booking-done-note { max-width: 46ch; margin: 0 auto 18px; color: var(--gray); line-height: 1.6; } /* ══════════════════════════════════ FOOTER ══════════════════════════════════ */ footer { /* stays above the fixed body::before wash */ position: relative; z-index: 1; margin-top: 80px; background: radial-gradient(700px 300px at 20% 0%, rgba(0,87,255,0.22), transparent 70%), radial-gradient(600px 280px at 85% 10%, rgba(0,194,255,0.14), transparent 70%), var(--navy); color: rgba(255,255,255,0.6); border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue)) 1; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 28px; } .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; } .footer-brand img { height: 48px; margin-bottom: 10px; filter: brightness(0) invert(1); opacity: 0.85; } .footer-brand p { font-size: 0.85rem; max-width: 280px; line-height: 1.6; } /* Satır içi style="" idi; CSP'de style-src'yi 'unsafe-inline'sız tutabilmek için sınıfa taşındı. */ .footer-brand p.footer-email { margin-top: 10px; font-size: 0.82rem; } .footer-email a { color: rgba(255,255,255,0.5); transition: 0.2s; } .footer-email a:hover { color: rgba(255,255,255,0.9); } .footer-links { display: flex; gap: 36px; flex-wrap: wrap; } .footer-link-group h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); margin-bottom: 12px; } .footer-link-group a { display: block; font-size: 0.88rem; color: rgba(255,255,255,0.5); margin-bottom: 8px; transition: 0.2s; } .footer-link-group a:hover { color: rgba(255,255,255,0.9); } .footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin-bottom: 20px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; } .footer-bottom a { color: rgba(255,255,255,0.5); margin-left: 16px; transition: 0.2s; } .footer-bottom a:hover { color: rgba(255,255,255,0.9); } /* ══════════════════════════════════ DOKUNMATİK CİHAZLAR Fare olmayan cihazlarda :hover, dokunuştan sonra parmak çekilse bile elemanın üzerinde "takılı" kalır — satır vurgulu, düğme kalkık kalır. Bu blok o durumları geri alır. ══════════════════════════════════ */ @media (hover: none) { .feature-card:hover { border-color: var(--gray-light); box-shadow: 0 6px 20px rgba(0,87,255,0.05); } .feature-card:hover::before, .feature-mini:hover::before { animation: none; opacity: 0; } .feature-mini:hover { border-color: var(--gray-light); box-shadow: 0 4px 14px rgba(0,87,255,0.04); } .feature-mini:hover .feature-icon--sm { background: linear-gradient(135deg, rgba(0,87,255,0.14), rgba(0,194,255,0.16)); border-color: #C9DAFF; color: var(--blue); } .feature-card:hover .feature-icon { background: linear-gradient(135deg, rgba(0,87,255,0.14), rgba(0,194,255,0.16)); border-color: #C9DAFF; color: var(--blue); } .compare-table tbody tr:hover { background: transparent; } .faq-item:hover { border-color: var(--gray-light); } .faq-item.open:hover { border-color: var(--blue); } .btn-primary:hover, .btn-small:hover, .navbar-cta:hover { transform: none; } .btn-ghost:hover { background: var(--off-white); color: var(--blue); border-color: rgba(0,87,255,0.3); } } /* ══════════════════════════════════ RESPONSIVE ══════════════════════════════════ */ @media (max-width: 1100px) { /* 1025–1100 px: bağlantılar tam sığmıyor. "Ana Sayfa" gizleniyor çünkü logo zaten #home'a gidiyor — aynı işi yapan iki öğeden biri. Kalan boşluk bağlantı dolgusundan geliyor. Bunun altında hamburger devrede. */ .navbar-inner { gap: 10px; } .navbar-links { gap: 2px; } .navbar-links a { padding: 6px 10px; } .navbar-links a[href="#home"] { display: none; } .navbar-login { padding: 8px 12px; } .navbar-cta { padding: 9px 16px; white-space: nowrap; } } /* Tablet ve altı: hamburger. Barda logo · Müşteri Girişi · CTA · ☰ */ @media (max-width: 1024px) { .navbar-links { display: none; } .navbar-burger { display: flex; } .navbar.is-open .mobile-menu { display: flex; } .navbar-actions { margin-left: auto; } /* Dokunmatik ekran: iki düğme de hamburgerle aynı boyda, 44px — parmakla basılabilir hedefin alt sınırı. */ .navbar-login, .navbar-cta { min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 900px) { /* hero ve büyük özellik: görsel metnin altına iner */ .hero:has(.hero-demo:not([hidden])) { grid-template-columns: minmax(0, 1fr); } /* tek sütunda kartlar çerçevenin içine alınıyor, ekrandan taşmasın */ .hero-float--call { left: 12px; top: 14px; } .hero-float--booking { right: 12px; bottom: 56px; } /* tablet: pratik görünüm üstte tam satır, diğer iki ana kart yan yana; kompakt maddeler iki sütun */ .feature-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-card--wide { grid-column: 1 / -1; order: -1; } /* tablette 2 sütun: 2 + 2 + son madde tam satır */ .feature-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-mini, .feature-mini:nth-child(n+4) { grid-column: auto; } .feature-mini:last-child { grid-column: 1 / -1; } .how-grid { grid-template-columns: 1fr; gap: 32px; } .how-grid::before { display: none; } /* Tablet: kartlar yan yana kalıyor (700px'e kadar, aşağıda), Kurumsal şeridi iki sütun — açıklama ve maddeler yan yana, düğme altta tam genişlik. Tek sütuna düşürmek 820px'lik iPad'de kartları 740px'e yayıyor, satırlar boş kalıyordu. */ .pricing-enterprise { grid-template-columns: 1fr 1fr; } .pricing-enterprise-cta { grid-column: 1 / -1; width: 100%; } .footer-top { flex-direction: column; } } @media (max-width: 700px) { /* üç rakam tablette yan yana sığıyor; telefonda alt alta */ .stat-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .pricing-cards { grid-template-columns: 1fr; } /* tek sütunda büyütme anlamını yitiriyor ve kenardan taşıyor */ .pricing-card.pro { transform: none; } } @media (max-width: 768px) { html { scroll-padding-top: 78px; } .page { padding: 40px 16px 40px; } .section, .strip-cta, .calendar-section { margin-top: 52px; } /* navbar → hamburger */ .navbar-inner { padding: 0 14px; height: 62px; gap: 10px; } .navbar-logo img { height: 42px; } .navbar-cta { padding: 9px 14px; font-size: 0.8rem; } /* dar ekranda logo + CTA + hamburger'a yer kalmıyor; giriş mobil menüde */ .navbar-login { display: none; } .mobile-menu .mobile-menu-login { display: block; } .hero { margin-top: 8px; } .hero h1 { font-size: 2.5rem; } .hero-sub { font-size: 0.98rem; } /* tek sütun buton: yarım genişlikte iki buton yan yana sıkışıyordu */ .hero-cta-row { flex-direction: column; align-items: stretch; margin-bottom: 28px; } .hero-cta-row .btn-primary, .hero-cta-row .btn-ghost { width: 100%; padding: 14px 20px; } .section-header { margin-bottom: 26px; } .section-header h2 { font-size: 1.7rem; } .pricing-wrapper { padding: 24px 16px; border-radius: 20px; } .pricing-card { padding: 22px 18px; } .pricing-enterprise { padding: 22px 18px; } .pricing-perks { justify-content: flex-start; flex-direction: column; gap: 6px; } .pricing-perk { white-space: normal; } .strip-cta { flex-direction: column; text-align: center; padding: 28px 20px; } .strip-cta .btn-primary { width: 100%; } /* yatay kaydırılabilir olduğunu belli etsin */ .compare-wrap { -webkit-overflow-scrolling: touch; } .compare-table { min-width: 560px; font-size: 0.85rem; } .compare-table th, .compare-table td { padding: 17px 16px; } .faq-q { padding: 15px 16px; } .faq-q span { font-size: 0.93rem; } .calendar-wrapper { padding: 24px 16px 28px; border-radius: 18px; } .booking { padding: 18px 14px; } .booking-step[data-adim="saat"] { grid-template-columns: minmax(0, 1fr); gap: 20px; } .booking-fields { grid-template-columns: minmax(0, 1fr); } .booking-summary { flex-wrap: wrap; } .booking-submit { width: 100%; } .calendar-wrapper h2 { font-size: 1.45rem; } /* telefonda Google sayfası takvimi ve saatleri alt alta diziyor */ .calendar-iframe { height: 820px; } .footer-inner { padding: 32px 18px 24px; } .footer-links { gap: 24px; } .footer-bottom { flex-direction: column; text-align: center; } .footer-bottom a { margin: 0 8px; } } @media (max-width: 560px) { .feature-top, .feature-minis { grid-template-columns: minmax(0, 1fr); } .feature-mini:last-child { grid-column: auto; } .feature-card--wide { order: 0; } .door { grid-template-columns: minmax(0, 1fr); } /* dar telefonda gün düğmeleri parmakla basılabilir kalsın: boşluk dar */ .booking { padding: 14px 10px; } .booking-weekdays, .booking-days { gap: 3px; } .booking-day { border-radius: 10px; } .hero-accent { white-space: normal; } .hero-float { font-size: 0.78rem; padding: 8px 11px; } .feature-card { padding: 22px 20px 20px; } .stats-band h2 { font-size: 1.8rem; } .hero h1 { font-size: 2.15rem; } .stat-num { font-size: 2.5rem; } .pricing-price { font-size: 1.7rem; } /* iki satırlık başlık + rozet dar ekranda sıkışıyordu */ .pricing-card-head { flex-wrap: wrap; } .pricing-quota span { margin-left: 0; } .pricing-enterprise { grid-template-columns: 1fr; } } @media (max-width: 380px) { .page { padding: 36px 12px 32px; } .hero h1 { font-size: 1.85rem; } .navbar-cta { display: none; } /* mobil menüdeki CTA yeterli */ .navbar-logo img { height: 38px; } }