/* Fontlar icinde preconnect + preload ile yukleniyor —
render-blocking @import bilincli olarak kaldirildi. */
/* ═══════════════════════════════════════════════════════════
AETERNIX — DESIGN SYSTEM v6
Light / kurumsal. Ink + Cobalt. Kağıt yüzey, gerçek gölge.
═══════════════════════════════════════════════════════════ */
/* ── TOKENS ──────────────────────────────────────────────── */
:root {
/* Yüzeyler — kağıt hiyerarşisi */
--paper: #ffffff;
--bg: #ffffff;
--bg2: #f8f9fb;
--bg3: #eef1f6;
--surface: #ffffff;
--surface2: #f7f9fc;
--wash: #f4f6fa;
/* Çizgiler */
--border: #e4e8ef;
--border-2: #d3dae4;
--border-hi: #b6c9ee;
/* Metin — mürekkep skalası */
--ink: #0d1420;
--text: #0d1420;
--soft: #313d4f;
--muted: #616d82;
--faint: #8a95a6;
/* Vurgu — kobalt */
--accent: #1d4ed8;
--accent-deep: #16389f;
--accent-soft: #4a76e8;
--accent-wash: #eef3fe;
--accent-line: #cfdcfa;
/* Uyum katmanı — eski değişken adları korunur */
--blue: #1d4ed8;
--blue-hi: #4a76e8;
--sky: #1d4ed8;
--green: #05784f;
--green-wash: #e8f6f0;
--amber: #9a5b06;
/* Gölge skalası */
--sh-1: 0 1px 2px rgba(13,20,32,.05);
--sh-2: 0 1px 3px rgba(13,20,32,.07), 0 1px 2px rgba(13,20,32,.04);
--sh-3: 0 6px 16px rgba(13,20,32,.07), 0 1px 3px rgba(13,20,32,.05);
--sh-4: 0 18px 44px rgba(13,20,32,.11), 0 3px 10px rgba(13,20,32,.05);
--sh-accent: 0 1px 2px rgba(29,78,216,.24), 0 8px 22px rgba(29,78,216,.26);
--sh-ink: 0 1px 2px rgba(29,78,216,.24), 0 8px 22px rgba(29,78,216,.26);
/* Geometri */
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
/* Hareket dili — süre + eğri token'ları */
--dur-fast: 120ms;
--dur-base: 240ms;
--dur-slow: 420ms;
--dur-deliberate: 760ms;
--ease-productive: cubic-bezier(.2,0,.38,.9);
--ease-expressive: cubic-bezier(.4,.14,.3,1);
--ease-entrance: cubic-bezier(0,0,.3,1);
--ease-exit: cubic-bezier(.4,.14,1,1);
/* Uzam — bento taban birimi ve oluk */
--u: 4px;
--gutter: 22px;
/* Tipografi */
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--display: 'Inter Tight', 'Inter', system-ui, sans-serif;
--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
--nav-h: 78px;
}
/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
font-size: 16px;
overflow-x: hidden;
scroll-padding-top: calc(var(--nav-h) + 16px);
scrollbar-width: thin;
scrollbar-color: #c6ccd8 transparent;
}
body {
font-family: var(--font);
font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1, 'calt' 1;
font-optical-sizing: auto;
color: var(--text);
background: var(--bg);
overflow-x: hidden;
min-width: 320px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
padding-top: var(--nav-h);
line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: #fff; }
/* Odak halkası — kurumsal erişilebilirlik standardı */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* İnce, kurumsal scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: #c8ceda;
border-radius: 99px;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:hover { background: #aab3c2; }
.container > *, .cards > *, .values > *, .steps > *, .split > *, .footer-grid > * { min-width: 0; }
/* ── MALZEME: film grenli doku katmanı ──────────────────
Düz degradeleri dokulu hale getirir; premium baskı hissi. */
.grain::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
opacity: .32;
mix-blend-mode: soft-light;
pointer-events: none;
}
/* ── İKON SİSTEMİ ────────────────────────────────────────── */
/* Tüm ikonlar 24 viewBox, stroke tabanlı, currentColor devralır */
.ic {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
.ic-sm { width: 14px; height: 14px; stroke-width: 1.75; }
.ic-md { width: 18px; height: 18px; }
.ic-lg { width: 21px; height: 21px; stroke-width: 1.5; }
/* Cümle içi akış oku — "lead → görüşme → teklif" gösterimleri */
.flow-arrow {
width: 15px;
height: 15px;
margin: 0 5px;
color: var(--accent);
vertical-align: -2px;
stroke-width: 1.8;
}
/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
width: min(1440px, 100% - 88px);
margin-inline: auto;
position: relative;
z-index: 1;
}
.section { padding: 88px 0; position: relative; }
/* Sayfa başlığından hemen sonra daha sıkı geçiş */
.pageHero + .section { padding-top: 68px; }
/* Tonlu bant — bölümleri ada gibi değil, akış gibi okutur */
.section-tint {
background: linear-gradient(180deg, #fafbfd 0%, #f6f8fc 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.section.section-tint,
.section + .section.section-tint { padding: 88px 0; }
.section-tint + .section { padding-top: 88px; }
.section + .section { padding-top: 0; }
/* ── NAVİGASYON ──────────────────────────────────────────── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 80;
background: rgba(255,255,255,.86);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border);
transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled {
background: rgba(255,255,255,.95);
box-shadow: 0 10px 30px -22px rgba(13,20,32,.5);
}
.navin {
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* Marka */
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; min-width: 0; }
.brand img {
width: 46px;
height: 46px;
object-fit: contain;
flex-shrink: 0;
transition: transform var(--dur-slow) var(--ease-expressive);
}
.brand:hover img { transform: scale(1.05); }
.brand > div {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 1px;
}
.brand b {
font-family: var(--display);
font-weight: 600;
letter-spacing: .155em;
font-size: 15.5px;
line-height: 1;
color: var(--ink);
}
.brand span {
display: block;
color: var(--faint);
font-size: 8.5px;
letter-spacing: .235em;
font-weight: 600;
margin-top: 5px;
line-height: 1;
text-transform: uppercase;
}
/* Footer markasi biraz daha sakin */
.footer-brand .brand img { width: 42px; height: 42px; }
/* Masaüstü linkleri */
.links { display: flex; align-items: center; gap: 2px; }
.links a:not(.btn) {
position: relative;
padding: 8px 13px;
border-radius: 7px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
transition: color .18s var(--ease), background .18s var(--ease);
}
.links a:not(.btn):hover { color: var(--ink); background: var(--wash); }
.links a:not(.btn).active { color: var(--ink); font-weight: 600; }
.links a:not(.btn).active::after {
content: '';
position: absolute;
left: 13px; right: 13px;
bottom: 1px;
height: 2px;
border-radius: 2px;
background: var(--accent);
}
.links .btn { margin-left: 10px; }
/* Hamburger */
.menu {
display: none;
width: 40px; height: 40px;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid var(--border-2);
background: var(--surface);
color: var(--ink);
flex-shrink: 0;
transition: background .18s, border-color .18s, color .18s;
}
.menu:hover { background: var(--wash); }
.menu[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.menu .ic { width: 19px; height: 19px; }
.menu .ic-close { display: none; }
.menu[aria-expanded="true"] .ic-open { display: none; }
.menu[aria-expanded="true"] .ic-close { display: block; }
/* Mobil perde */
.nav-backdrop {
position: fixed; inset: 0;
z-index: 70;
background: rgba(13,20,32,.32);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity .26s var(--ease);
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
/* ── BUTON ───────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
border-radius: 9px;
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
font-family: var(--font);
font-size: 14px;
font-weight: 600;
letter-spacing: -.006em;
white-space: nowrap;
position: relative;
box-shadow: var(--sh-2);
transition: background .2s var(--ease), border-color .2s var(--ease),
box-shadow .2s var(--ease), transform .12s var(--ease), color .2s;
}
.btn { overflow: hidden; }
.btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
transform: translateX(-120%);
transition: transform var(--dur-deliberate) var(--ease-expressive);
pointer-events: none;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: var(--sh-accent); }
.btn:hover::after { transform: translateX(120%); }
.btn.ghost::after { display: none; }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-1); }
.btn .ic { width: 15px; height: 15px; opacity: .92; }
.btn.ghost {
background: var(--surface);
border-color: var(--border-2);
color: var(--ink);
box-shadow: var(--sh-1);
}
.btn.ghost:hover { background: var(--wash); border-color: var(--border-2); box-shadow: var(--sh-2); }
.btn.ghost .ic { color: var(--accent); opacity: 1; }
.btn.sm { padding: 8px 15px; font-size: 13px; border-radius: 8px; }
/* Ok bağlantısı */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: var(--accent);
transition: color .2s;
}
.link-arrow .ic { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.link-arrow:hover { color: var(--accent-deep); }
.link-arrow:hover .ic { transform: translateX(3px); }
/* ── TİPOGRAFİ ÖLÇEĞİ ────────────────────────────────────── */
.h1 {
font-family: var(--display);
font-size: clamp(40px, 4.3vw, 70px);
line-height: 1.04;
letter-spacing: -.035em;
font-weight: 600;
color: var(--ink);
margin-bottom: 24px;
text-wrap: balance;
}
.grad { color: var(--accent); }
/* Kinetik başlık — satırlar maskenin altından yükselir */
/* Satir maskesi alt kenarda ş/ç/ğ/y kuyruklarini kesmesin:
kirpma alani asagi genisletilir, negatif margin ile satir
araligi aynen korunur. */
/* Satir maskesi harfleri kirpmasin:
ustte İ/Ö/Ü noktasi ve umlaut, altta ş/ç/ğ/y kuyrugu icin
kirpma alani iki yonde de genisletilir; negatif margin ile
satir araligi birebir korunur. */
.h1 .line {
display: block;
overflow: hidden;
padding-top: .20em;
margin-top: -.20em;
padding-bottom: .22em;
margin-bottom: -.18em;
}
.h1 .line > span {
display: inline-block;
transform: translateY(135%);
transition: transform var(--dur-deliberate) var(--ease-expressive);
}
.h1.reveal { transform: none; }
.h1.on .line > span { transform: translateY(0); }
.h1.on .line:nth-child(2) > span { transition-delay: 90ms; }
.h1.on .line:nth-child(3) > span { transition-delay: 180ms; }
.lead {
font-size: 17px;
line-height: 1.72;
color: var(--muted);
max-width: 580px;
font-weight: 400;
margin-bottom: 34px;
letter-spacing: -.004em;
}
/* Bölüm etiketi — kurumsal, kılavuz çizgili */
.eyebrow,
.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.eyebrow::before,
.section-label::before {
content: '';
width: 20px;
height: 1.5px;
background: var(--accent);
border-radius: 2px;
flex: 0 0 auto;
}
.eyebrow {
padding: 0;
border: 0;
background: none;
color: var(--muted);
margin-bottom: 20px;
}
.eyebrow::before { background: var(--border-2); }
/* ── HERO ────────────────────────────────────────────────── */
.hero {
padding: 72px 0 78px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border);
/* Katmanli kagit — alti kademe. En altta mimari cam dokusu
durur; uzerindeki kagit katmani %93–96 opak oldugu icin
fotograf yalnizca fisildar: kurumsal bir derinlik verir,
metnin kontrastini hic dusurmez.
1) sag ust: urun yuzeyini aydinlatan ana kobalt huzme
2) sag orta: ikincil dolgu, huzmeyi asagi tasir
3) sol alt: karsi agirlik, kompozisyonu dengeler
4) sol ust: metnin arkasinda cok soluk bir isik havuzu
5) taban: alt kenarda yumusak oturma
6) kagit perdesi + mimari doku */
background-color: #ffffff;
background-image:
radial-gradient(ellipse 56% 52% at 79% -8%, rgba(29,78,216,.135), transparent 62%),
radial-gradient(ellipse 42% 48% at 104% 46%, rgba(96,140,246,.10), transparent 64%),
radial-gradient(ellipse 52% 46% at -8% 86%, rgba(29,78,216,.065), transparent 66%),
radial-gradient(ellipse 40% 34% at 14% 16%, rgba(120,158,248,.05), transparent 70%),
radial-gradient(ellipse 74% 26% at 50% 104%, rgba(230,236,248,.75), transparent 72%),
linear-gradient(178deg,
rgba(250,252,255,.955) 0%,
rgba(255,255,255,.945) 46%,
rgba(248,250,254,.935) 100%),
url('img/hero-texture.webp');
background-size: auto, auto, auto, auto, auto, cover, cover;
background-position: center, center, center, center, center, center, center 32%;
background-repeat: no-repeat;
/* Fotografi renksizlestirip kagida karistirir */
background-blend-mode: normal, normal, normal, normal, normal, normal, luminosity;
}
/* Blueprint dokusu — kaba ızgara + ince nokta matrisi, iki katman */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(29,78,216,.13) 1px, transparent 0),
linear-gradient(to right, rgba(29,78,216,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(29,78,216,.05) 1px, transparent 1px);
background-size: 24px 24px, 96px 96px, 96px 96px;
mask-image: radial-gradient(ellipse 82% 74% at 54% 26%, #000 12%, transparent 76%);
-webkit-mask-image: radial-gradient(ellipse 82% 74% at 54% 26%, #000 12%, transparent 76%);
pointer-events: none;
}
/* Izgaranin uzerinden gecen yumusak isik huzmesi + tabanda kagit gecisi.
Dokuyu tek duze olmaktan cikarir, yuzeye derinlik verir. */
.hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(106deg,
transparent 22%,
rgba(255,255,255,.55) 40%,
rgba(255,255,255,.58) 56%,
transparent 76%),
radial-gradient(ellipse 120% 60% at 50% 50%, transparent 52%, rgba(226,232,244,.30) 100%),
linear-gradient(180deg, transparent 84%, rgba(246,248,252,.92) 100%);
}
.hero .container {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
gap: 88px;
align-items: start;
}
/* Metin blogu ustten hizalanir; kucuk bir pay basligi panelin
krom cubugu yerine icerik alaniyla ayni hizaya getirir. */
.hero-body {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 34px;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Güven şeridi */
.trust-row {
display: flex;
gap: 22px;
flex-wrap: wrap;
margin-top: 36px;
padding-top: 26px;
border-top: 1px solid var(--border);
width: 100%;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--soft);
padding: 0;
border: 0;
background: none;
}
.trust-badge .ic { width: 15px; height: 15px; color: var(--green); stroke-width: 2; }
.trust-badge .dot-green {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 3px var(--green-wash);
flex: 0 0 auto;
animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
50% { box-shadow: 0 0 0 6px rgba(5,120,79,.10); }
}
/* ══ SAHNE: GİRİŞ KADEMESİ + İMLEÇ GERİ BİLDİRİMİ ═════════
1) Pencere belirdikten sonra ic ogeler kisa bir kademeyle
yerine oturur — tek parca "yapistirilmis" his kalkar.
2) Uzerine gelindiginde hangi ogenin hedeflendigi net olur:
yuzey yukselir, kobalt imza guclenir, rakam canlanir.
Tumu (hover: hover) ardinda; dokunmatikte hicbiri calismaz.
════════════════════════════════════════════════════════ */
/* ── Giriş kademesi ── */
.aw-kpi,
.aw-row,
.aw-chart,
.sat-list li,
.fstep {
opacity: 0;
transform: translateY(8px);
transition: opacity .5s var(--ease-entrance),
transform .5s var(--ease-expressive);
}
.stage.on .aw-kpi,
.stage.on .aw-row,
.stage.on .aw-chart,
.stage.on .sat-list li,
.stage.on .fstep { opacity: 1; transform: none; }
.stage.on .aw-kpi:nth-child(1) { transition-delay: .26s; }
.stage.on .aw-kpi:nth-child(2) { transition-delay: .32s; }
.stage.on .aw-kpi:nth-child(3) { transition-delay: .38s; }
.stage.on .aw-chart { transition-delay: .44s; }
.stage.on .aw-row:nth-child(1) { transition-delay: .60s; }
.stage.on .aw-row:nth-child(2) { transition-delay: .66s; }
.stage.on .sat-list li:nth-child(1) { transition-delay: .46s; }
.stage.on .sat-list li:nth-child(2) { transition-delay: .52s; }
.stage.on .sat-list li:nth-child(3) { transition-delay: .58s; }
.stage.on .fstep:nth-child(2) { transition-delay: .44s; }
.stage.on .fstep:nth-child(3) { transition-delay: .52s; }
.stage.on .fstep:nth-child(4) { transition-delay: .60s; }
/* Aktif ray ikonu belirince kisa bir kez nefes alir */
.stage.on .aw-rail-i.is-active { animation: rail-wake 1.1s var(--ease-out) .5s both; }
@keyframes rail-wake {
0% { box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 0 rgba(29,78,216,.28); }
55% { box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 7px rgba(29,78,216,0); }
100% { box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 0 rgba(29,78,216,0); }
}
/* Canlı rozetinin noktası hafifçe soluklaşıp döner */
.aw-live i { animation: live-blink 2.6s var(--ease) infinite; }
@keyframes live-blink {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(5,120,79,.30); }
50% { opacity: .55; box-shadow: 0 0 0 5px rgba(5,120,79,0); }
}
/* ── İmleç geri bildirimi ── */
@media (hover: hover) and (pointer: fine) {
/* Karo yüzeyi: parallax korunur, üstüne yükselme + hafif buyume.
scale() translate3d'den SONRA gelmeli; aksi halde parallax
kaymasi da olceklenir ve karo hoverda yerinden oynar. */
.stage.on .tile:hover {
transform:
translate3d(calc(var(--px, 0) * var(--d, 1) * 2.2px),
calc(var(--py, 0) * var(--d, 1) * 2.2px - 5px), 0)
scale(1.018);
}
/* KPI kartı: yüzey kalkar, üst kobalt imza genişleyip parlar */
.aw-kpi {
cursor: default;
transition: opacity .5s var(--ease-entrance),
transform .28s var(--ease-out),
border-color .28s var(--ease-productive),
box-shadow .28s var(--ease-productive);
}
.aw-kpi::before {
transition: opacity .28s var(--ease-productive),
left .32s var(--ease-out),
right .32s var(--ease-out);
}
.aw-kpi:hover {
transform: translateY(-3px);
border-color: var(--accent-line);
box-shadow: 0 8px 20px rgba(29,78,216,.14), 0 1px 2px rgba(13,20,32,.05);
}
.aw-kpi:hover::before { opacity: 1; left: 0; right: 0; }
.aw-kpi .k-v { transition: color .28s var(--ease-productive); }
.aw-kpi:hover .k-v { color: var(--accent-deep); }
/* Kayıt satırı: hafif tint, avatar büyür, satır sağa doğru nefes alır */
.aw-row {
transition: opacity .5s var(--ease-entrance),
transform .26s var(--ease-out),
background .26s var(--ease-productive),
border-color .26s var(--ease-productive);
}
.aw-row:hover {
transform: translateX(3px);
background: var(--accent-wash);
border-color: var(--accent-line);
}
.r-av { transition: transform .26s var(--ease-out); }
.aw-row:hover .r-av { transform: scale(1.12); }
/* Yan ray ikonları */
.aw-rail-i:hover:not(.is-active) {
color: var(--accent);
background: var(--accent-wash);
}
/* Segment düğmeleri */
.aw-seg span { transition: color .2s var(--ease-productive); }
.aw-seg span:not(.on):hover { color: var(--soft); }
/* Grafik paneli: üzerine gelince işaretçi belirginleşir */
.aw-chart { transition: opacity .5s var(--ease-entrance), transform .5s var(--ease-expressive), border-color .3s var(--ease-productive); }
.aw-chart:hover { border-color: var(--accent-line); }
.aw-marker i { transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.aw-chart:hover .aw-marker i {
transform: scale(1.25);
box-shadow: 0 0 0 5px rgba(29,78,216,.20), 0 3px 10px rgba(13,20,32,.26);
}
.aw-tip { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.aw-chart:hover .aw-tip {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(13,20,32,.16);
}
/* Adres hapı ve canlı rozeti */
.aw-tab { transition: border-color .24s var(--ease-productive), color .24s var(--ease-productive); }
.app-window:hover .aw-tab { border-color: var(--border-2); color: var(--soft); }
/* Mobil uydu: telefon yükselir, madde noktaları canlanır */
.mini-phone { transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out); }
.sat-mobile:hover .mini-phone {
transform: translateY(-5px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 -8px 26px rgba(8,20,58,.34);
}
.sat-list li { transition: opacity .5s var(--ease-entrance), transform .28s var(--ease-out), color .28s var(--ease-productive); }
.sat-mobile:hover .sat-list li { color: #dfe9fb; }
.sat-list li:hover { transform: translateX(4px); }
.sl-d { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); }
.sat-list li:hover .sl-d.ok {
transform: scale(1.35);
box-shadow: 0 0 0 5px rgba(74,222,159,.22);
}
/* Otomasyon adımı: nokta büyür, başlık kobalta döner */
.fstep {
transition: opacity .5s var(--ease-entrance), transform .26s var(--ease-out);
cursor: default;
}
.fstep:hover { transform: translateX(4px); }
.fdot { transition: transform .26s var(--ease-out), border-color .26s var(--ease-productive), box-shadow .26s var(--ease-out); }
.fstep:hover .fdot {
transform: scale(1.3);
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-wash);
}
.fstep b { transition: color .26s var(--ease-productive); }
.fstep:hover b { color: var(--accent-deep); }
}
/* ══ SAHNE: DAR EKRAN DAVRANIŞI ═══════════════════════════ */
@media (max-width: 1080px) {
.aw-tab { max-width: 190px; }
.sat-mobile-in { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.mini-phone { width: 96px; }
}
@media (max-width: 1000px) {
.aw-body { grid-template-columns: 48px minmax(0, 1fr); }
.aw-rail-i { width: 28px; height: 28px; }
.aw-graph { height: 104px; }
.aw-kpi .k-v { font-size: 18px; }
}
/* ══ ≤900px — SAHNE KAPANIR ════════════════════════════════
Dar ekranda hareketli urun mozaigi gosterilmez: küçültülmüs
bir panel taklidi hem okunmaz hem amatorce durur, ustelik
surekli hareket mobilde gereksiz yuk. Onun yerine hero
yalin ve keskin bir tipografi bloguna indirgenir; kaniti
tam genislikteki olcum seridi tasir.
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.stage { display: none; }
.marquee { display: none; }
/* Sahne yokken isik kompozisyonu ortaya toplanir */
.hero {
background-color: #ffffff;
background-image:
radial-gradient(ellipse 90% 42% at 50% -6%, rgba(29,78,216,.11), transparent 66%),
radial-gradient(ellipse 80% 38% at 100% 42%, rgba(96,140,246,.07), transparent 68%),
radial-gradient(ellipse 84% 34% at 0% 92%, rgba(29,78,216,.05), transparent 70%),
linear-gradient(178deg,
rgba(250,252,255,.965) 0%,
rgba(255,255,255,.955) 52%,
rgba(248,250,254,.95) 100%),
url('img/hero-texture.webp');
background-size: auto, auto, auto, cover, cover;
background-position: center, center, center, center, center 28%;
background-repeat: no-repeat;
background-blend-mode: normal, normal, normal, normal, luminosity;
}
.hero::before {
mask-image: radial-gradient(ellipse 100% 58% at 50% 16%, #000 6%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 100% 58% at 50% 16%, #000 6%, transparent 78%);
}
.hero::after { background-image: linear-gradient(180deg, transparent 86%, rgba(246,248,252,.92) 100%); }
.hero .container { display: block; }
/* Hizalanacak panel yok — ust pay kalkar */
.hero-body { max-width: 620px; padding-top: 0; }
.hero .lead { font-size: 16.5px; }
.trust-row { margin-top: 30px; padding-top: 22px; gap: 14px 22px; }
}
@media (max-width: 620px) {
.actions { width: 100%; gap: 9px; }
.actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
.trust-row { flex-direction: row; flex-wrap: wrap; gap: 9px 16px; }
}
/* Hareket tercihi kısıtlıysa her şey son karesinde sabit durur */
@media (prefers-reduced-motion: reduce) {
.h1 .line > span { transform: none; transition: none; }
.links > * { opacity: 1; transform: none; transition: none; }
.aw-kpi, .aw-row, .aw-chart, .sat-list li, .fstep {
opacity: 1; transform: none; transition: none;
}
.aw-rail-i.is-active, .aw-live i { animation: none; }
.tile { opacity: 1; transform: none; }
.aw-line { stroke-dashoffset: 0; animation: none; }
.aw-area, .aw-ghost, .aw-marker, .aw-tip, .aw-toast { opacity: 1; transform: none; animation: none; }
.frail i { animation: none; opacity: 0; }
}
/* Kanıt paneli */
.proof-grid {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--border);
gap: 1px;
}
.proof-item {
background: var(--surface);
padding: 26px 24px;
transition: background .2s var(--ease);
}
.proof-item:hover { background: var(--bg2); }
.proof-item strong {
display: block;
font-family: var(--display);
font-size: 38px;
font-weight: 600;
letter-spacing: -.04em;
line-height: 1;
color: var(--ink);
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.proof-item span {
font-size: 12.5px;
color: var(--muted);
font-weight: 500;
line-height: 1.4;
}
/* ── BÖLÜM BAŞLIĞI ───────────────────────────────────────── */
.section-header { margin-bottom: 30px; max-width: 900px; }
.section-title {
font-family: var(--display);
font-size: clamp(28px, 3.1vw, 48px);
letter-spacing: -.032em;
line-height: 1.1;
font-weight: 600;
color: var(--ink);
margin-bottom: 16px;
text-wrap: balance;
}
.section-sub {
font-size: 16px;
line-height: 1.75;
color: var(--muted);
max-width: 660px;
font-weight: 400;
}
/* Ayraç çizgisi */
.line-reveal {
height: 1px;
background: var(--border);
transform: scaleX(0);
transform-origin: left;
transition: transform 1s var(--ease-out);
margin-bottom: 40px;
}
.line-reveal.on { transform: scaleX(1); }
/* ── KARTLAR ─────────────────────────────────────────────── */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.wide { grid-template-columns: repeat(2, 1fr); }
/* Genis ekran: 2'li izgaralar 3'e cikar, kenar boslugu kapanir */
@media (min-width: 1200px) {
.wide { grid-template-columns: repeat(3, 1fr); }
.values { gap: 22px; }
}
.card {
padding: 32px 30px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
position: relative;
isolation: isolate;
overflow: hidden;
box-shadow: var(--sh-1);
transition: border-color var(--dur-base) var(--ease-productive),
transform var(--dur-base) var(--ease-productive),
box-shadow var(--dur-base) var(--ease-productive);
}
/* İmleci izleyen yumuşak ışık — JS yalnızca --mx/--my yazar */
.card::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
rgba(29,78,216,.07), transparent 62%);
opacity: 0;
transition: opacity var(--dur-slow) var(--ease-productive);
}
/* Üst kenarda açılan vurgu çizgisi */
.card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-soft));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-slow) var(--ease-expressive);
}
.card:hover {
border-color: var(--border-hi);
transform: translateY(-4px);
box-shadow: var(--sh-3);
}
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scaleX(1); }
.icon {
width: 48px; height: 48px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--accent-wash);
border: 1px solid var(--accent-line);
color: var(--accent);
margin-bottom: 20px;
transition: background .28s var(--ease), border-color .28s var(--ease);
}
.icon .ic { width: 23px; height: 23px; stroke-width: 1.5; }
.card:hover .icon { background: #e1eafd; border-color: var(--accent); color: var(--accent-deep); }
.card h3 {
font-family: var(--display);
font-size: 18px;
font-weight: 600;
letter-spacing: -.022em;
color: var(--ink);
margin-bottom: 10px;
line-height: 1.3;
}
.card p { color: var(--muted); line-height: 1.7; font-size: 14.5px; font-weight: 400; }
/* Kontrol listesi */
.checklist {
list-style: none;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 9px;
}
.checklist li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 13.5px;
color: var(--soft);
font-weight: 450;
line-height: 1.5;
}
.checklist li::before {
content: '';
width: 16px; height: 16px;
margin-top: 2px;
flex-shrink: 0;
background-color: var(--green);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 13px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 13px no-repeat;
}
/* ══ KAPAK GÖRSELİ SİSTEMİ ════════════════════════════════
Kartların üstünde duran soyut ürün motifleri. 10 varyant,
tek bir çizim diliyle: hairline çizgi + kobalt vurgu.
Tümü inline SVG — dış görsel yok, boyama CSS'ten gelir.
═══════════════════════════════════════════════════════════ */
.cover {
position: relative;
overflow: hidden;
height: 168px;
border-bottom: 1px solid var(--border);
background:
radial-gradient(ellipse 80% 70% at 50% 115%, rgba(29,78,216,.10), transparent 68%),
linear-gradient(165deg, #f9fbff 0%, #eef2fa 100%);
display: grid;
place-items: center;
}
.cover-tall { height: 210px; }
/* Motif başına zemin karakteri — aynı kobalt ailesi, farklı ışık */
.cv-route {
background:
radial-gradient(ellipse 78% 76% at 22% 112%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(158deg, #f9fbff 0%, #eaf0fa 100%);
}
.cv-gantt {
background:
radial-gradient(ellipse 78% 76% at 78% 116%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(196deg, #fafbff 0%, #edf1f9 100%);
}
.cv-grid {
background:
radial-gradient(ellipse 78% 76% at 50% 118%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(175deg, #f9fbff 0%, #ebeff8 100%);
}
.cv-slots {
background:
radial-gradient(ellipse 78% 76% at 30% 108%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(205deg, #fbfcff 0%, #eef2fb 100%);
}
.cv-pulse {
background:
radial-gradient(ellipse 78% 76% at 70% 112%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(150deg, #f9fbfe 0%, #eaeff8 100%);
}
.cv-wave {
background:
radial-gradient(ellipse 78% 76% at 88% 118%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(168deg, #fafcff 0%, #e9eef9 100%);
}
.cv-stack {
background:
radial-gradient(ellipse 78% 76% at 38% 116%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(188deg, #f9fbff 0%, #ecf0fa 100%);
}
.cv-nodes {
background:
radial-gradient(ellipse 78% 76% at 50% 110%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(160deg, #fafbff 0%, #eaeff9 100%);
}
.cv-flow {
background:
radial-gradient(ellipse 78% 76% at 18% 114%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(182deg, #f9fbff 0%, #edf1fa 100%);
}
.cv-blocks {
background:
radial-gradient(ellipse 78% 76% at 82% 110%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(172deg, #fafcff 0%, #ebeff9 100%);
}
/* Blueprint ızgara */
.cover::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(29,78,216,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(29,78,216,.06) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 30%, transparent 82%);
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, #000 30%, transparent 82%);
pointer-events: none;
}
.cover-art {
position: relative;
height: 74%;
width: auto;
max-width: 84%;
display: block;
overflow: visible;
}
/* ── Fotoğraf kapağı ── */
.cover-img,
.cover-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.01);
transition: transform 1.2s var(--ease-expressive), filter var(--dur-slow) var(--ease-productive);
filter: saturate(.92) contrast(1.02);
}
/* Okunabilirlik ve marka uyumu için ince perde */
.cover:has(.cover-img)::after,
.cover:has(.cover-photo)::after,
.cover--photo::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(13,20,32,.02) 0%, rgba(13,20,32,.20) 100%),
linear-gradient(140deg, rgba(29,78,216,.16) 0%, transparent 58%);
pointer-events: none;
}
/* Fotoğraf varken blueprint ızgara kapanır */
.cover:has(.cover-img)::before,
.cover:has(.cover-photo)::before,
.cover--photo::before { display: none; }
.project-card:hover .cover-img, .project-card:hover .cover-photo,
.blog-card:hover .cover-img, .blog-card:hover .cover-photo,
.card:hover .cover-img, .card:hover .cover-photo { transform: scale(1.07); filter: saturate(1) contrast(1.04); }
/* Köşe etiketi */
.cover-tag {
position: absolute;
top: 12px;
left: 14px;
z-index: 2;
padding: 4px 10px;
border-radius: 6px;
background: rgba(255,255,255,.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border);
font-size: 10px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--accent-deep);
z-index: 3;
}
/* ── Çizim dili ── */
.cover-art .cv-rail,
.cover-art .cv-guide,
.cover-art .cv-pulse-line {
fill: none;
stroke: #c3cfe4;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.cover-art .cv-guide { stroke-width: 1.4; stroke-dasharray: 3 5; }
.cover-art .cv-node { fill: #fff; stroke: #b9c7de; stroke-width: 2; }
.cover-art .cv-node.hi { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.cover-art .cv-cell,
.cover-art .cv-layer,
.cover-art .cv-chip,
.cover-art .cv-row,
.cover-art .cv-bar {
fill: #fff;
stroke: #d3ddec;
stroke-width: 1.5;
}
.cover-art .cv-cell.hi,
.cover-art .cv-layer.hi,
.cover-art .cv-chip.hi,
.cover-art .cv-bar.hi {
fill: var(--accent);
stroke: var(--accent);
}
.cover-art .cv-frame { fill: rgba(255,255,255,.72); stroke: #d3ddec; stroke-width: 1.5; }
.cover-art .cv-line-s { fill: #ccd7e8; }
.cover-art .cv-cell.hi + .cv-line-s { fill: #fff; }
.cover-art .cv-dot { fill: #dde5f1; }
.cover-art .cv-dot.hi { fill: var(--accent); }
.cover-art .cv-dot.ok { fill: var(--green); }
.cover-art .cv-area { fill: rgba(29,78,216,.13); }
/* Akan vurgu darbesi */
.cover-art .cv-pulse {
fill: none;
stroke: var(--accent);
stroke-width: 2.6;
stroke-linecap: round;
stroke-dasharray: 14 86;
animation: cover-flow 3.6s linear infinite;
}
.cover-art .cv-pulse.d2 { animation-delay: -1.8s; }
@keyframes cover-flow { to { stroke-dashoffset: -100; } }
/* Kart hover'ında motif hafifçe yaklaşır */
.cover-art { transition: transform var(--dur-deliberate) var(--ease-expressive); }
.project-card:hover .cover-art,
.blog-card:hover .cover-art,
.card:hover .cover-art { transform: scale(1.035); }
/* Kapaklı kartlarda gövde ayrı sarmalayıcıda */
.card-body {
padding: 26px 28px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.has-cover { padding: 0 !important; }
/* Kapaklı kartta üst vurgu çizgisi kapağın altına iner */
.has-cover::after { top: auto; bottom: 0; transform-origin: right; }
/* ── İnce kapak bandı: ikon kapağın kenarına biner ── */
.cover-slim { height: 118px; }
.has-cover .card-body { padding-top: 22px; }
.has-cover .icon {
margin-top: -36px;
margin-bottom: 18px;
background: #fff;
border-color: var(--border);
color: var(--accent);
box-shadow: var(--sh-3);
position: relative;
z-index: 2;
}
.card.has-cover:hover .icon {
background: #fff;
border-color: var(--accent);
color: var(--accent-deep);
}
@media (max-width: 900px) {
.cover { height: 156px; }
.cover-tall { height: 176px; }
}
@media (max-width: 480px) {
.cover { height: 146px; }
.cover-tall { height: 160px; }
.card-body { padding: 22px 22px 24px; }
}
/* Hareket tercihi kısıtlıysa akış durur */
@media (prefers-reduced-motion: reduce) {
.cover-art .cv-pulse { animation: none; stroke-dasharray: none; opacity: .55; }
}
/* ── PROJE KARTLARI ──────────────────────────────────────── */
.project-card {
padding: 30px 28px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
position: relative;
box-shadow: var(--sh-1);
transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.project-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-soft));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-slow) var(--ease-expressive);
}
.project-card:hover {
border-color: var(--border-hi);
transform: translateY(-4px);
box-shadow: var(--sh-3);
}
.project-card:hover::after { transform: scaleX(1); }
.project-header { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 5px;
font-family: var(--font);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .01em;
border: 1px solid var(--border);
background: var(--wash);
color: var(--muted);
}
.badge.accent {
background: var(--accent-wash);
border-color: var(--accent-line);
color: var(--accent-deep);
}
.project-card h3 {
font-family: var(--display);
font-size: 18px;
font-weight: 600;
letter-spacing: -.022em;
color: var(--ink);
margin-bottom: 10px;
line-height: 1.3;
}
.project-card p { color: var(--muted); font-size: 14px; line-height: 1.68; margin-bottom: 18px; }
.project-impact {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 600;
color: var(--green);
background: var(--green-wash);
border: 1px solid rgba(5,120,79,.16);
padding: 6px 11px;
border-radius: 7px;
margin-bottom: 18px;
}
.project-impact::before {
content: '';
width: 14px; height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.project-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.project-tags span {
font-family: var(--mono);
font-size: 11px;
font-weight: 400;
padding: 3px 8px;
border-radius: 4px;
background: var(--wash);
color: var(--muted);
border: 1px solid var(--border);
}
/* ── BLOG KARTLARI ───────────────────────────────────────── */
.blog-card {
padding: 30px 28px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
display: flex;
flex-direction: column;
box-shadow: var(--sh-1);
transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.blog-card:hover {
border-color: var(--border-hi);
transform: translateY(-4px);
box-shadow: var(--sh-3);
}
.blog-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.blog-cat {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
}
.blog-date { font-size: 12.5px; color: var(--faint); }
.blog-read { font-size: 12.5px; color: var(--faint); margin-left: auto; }
.blog-card h3 {
font-family: var(--display);
font-size: 19px;
font-weight: 600;
letter-spacing: -.024em;
color: var(--ink);
margin-bottom: 12px;
line-height: 1.28;
}
.blog-card p { color: var(--muted); font-size: 14px; line-height: 1.7; flex: 1; margin-bottom: 22px; }
.blog-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 600;
color: var(--accent);
transition: color .2s;
}
.blog-link .ic { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.blog-link:hover { color: var(--accent-deep); }
.blog-link:hover .ic { transform: translateX(3px); }
/* ══ REFERANSLAR ══════════════════════════════════════════
Her referans, sunum dosyasindaki 16:9 artboard'un tamami
olarak gosterilir; altindaki metin blogu ayni icerigi
makine okunur ve erisilebilir halde tasir.
════════════════════════════════════════════════════════ */
/* Marka duvari — kapak artboard'u tam genislikte */
.ref-cover {
display: block;
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--sh-4);
background: var(--bg2);
aspect-ratio: 16 / 9;
}
.ref-cover img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--ease-expressive);
}
.ref-brands {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.ref-brands span {
font-family: var(--display);
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
padding: 9px 15px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
transition: color .22s var(--ease-productive),
border-color .22s var(--ease-productive);
}
/* Kart izgarasi */
.ref-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
.ref-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--sh-2);
overflow: hidden;
transition: border-color .3s var(--ease-productive),
box-shadow .3s var(--ease-productive),
transform .3s var(--ease-out);
}
/* Artboard — sunumdaki hali birebir, kirpilmadan */
.rc-shot {
display: block;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg3);
border-bottom: 1px solid var(--border);
}
.rc-shot img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.1s var(--ease-expressive);
}
/* Buyutme rozeti */
.rc-zoom {
position: absolute;
right: 14px; bottom: 14px;
width: 38px; height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.92);
color: var(--accent-deep);
box-shadow: 0 4px 14px rgba(13,20,32,.24);
opacity: 0;
transform: translateY(6px) scale(.9);
transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
pointer-events: none;
}
.rc-zoom .ic { width: 17px; height: 17px; stroke-width: 1.9; }
/* Kart govdesi */
.rc-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 24px 26px 26px;
}
.rc-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.rc-brand {
font-family: var(--display);
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink);
}
.rc-num {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--faint);
white-space: nowrap;
}
.rc-cat {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.ref-card h3 {
font-family: var(--display);
font-size: 20px;
font-weight: 600;
letter-spacing: -.026em;
line-height: 1.22;
color: var(--ink);
margin-bottom: 11px;
text-wrap: balance;
}
.ref-card p {
font-size: 14.5px;
line-height: 1.68;
color: var(--muted);
margin-bottom: 20px;
}
/* Etiket satiri — sunumdaki uc kolon */
.rc-tags {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.rc-tag { position: relative; min-width: 0; }
.rc-tag + .rc-tag::before {
content: '';
position: absolute;
left: -7px; top: 1px; bottom: 1px;
width: 1px;
background: linear-gradient(180deg, var(--border), transparent);
}
.rc-tag b {
display: block;
font-family: var(--display);
font-size: 13px;
font-weight: 700;
letter-spacing: -.008em;
color: var(--accent-deep);
margin-bottom: 3px;
}
.rc-tag span {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--faint);
line-height: 1.4;
}
/* Teslim rozeti */
.rc-status {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--green);
}
.rc-status i {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px var(--green-wash);
flex: 0 0 auto;
}
/* İmleç geri bildirimi */
@media (hover: hover) and (pointer: fine) {
.ref-card:hover {
transform: translateY(-4px);
border-color: var(--border-hi);
box-shadow: 0 2px 6px rgba(13,20,32,.06), 0 22px 48px rgba(29,78,216,.15);
}
.ref-card:hover .rc-shot img,
.ref-cover:hover img { transform: scale(1.045); }
.rc-shot:hover .rc-zoom,
.ref-cover:hover .rc-zoom { opacity: 1; transform: none; }
.ref-brands span:hover { color: var(--accent); border-color: var(--accent-line); }
}
.rc-shot:focus-visible .rc-zoom,
.ref-cover:focus-visible .rc-zoom { opacity: 1; transform: none; }
/* ── Dar ekran ── */
@media (max-width: 1000px) {
.ref-grid { gap: 22px; }
.rc-body { padding: 20px 20px 22px; }
.ref-card h3 { font-size: 18px; }
}
@media (max-width: 820px) {
.ref-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
.rc-tags { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.rc-tag:nth-child(3) { grid-column: 1 / -1; }
.rc-tag:nth-child(3)::before { content: none; }
.ref-card p { font-size: 14px; }
.ref-brands { gap: 8px; }
.ref-brands span { font-size: 11px; padding: 8px 12px; }
}
/* ══ GÖRSEL BÜYÜTME (LIGHTBOX) ════════════════════════════
Referans artboard'lari yeni sekme yerine sayfa icinde acilir.
Kapatma: sag ustteki carpi, perdeye tiklama veya Esc.
════════════════════════════════════════════════════════ */
.lb {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
background: rgba(8, 14, 28, .86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .26s var(--ease-out), visibility 0s linear .26s;
}
.lb.is-open {
opacity: 1;
visibility: visible;
transition: opacity .26s var(--ease-out), visibility 0s;
}
.lb-box {
position: relative;
max-width: min(1360px, 100%);
max-height: 100%;
display: flex;
flex-direction: column;
gap: 14px;
transform: scale(.965) translateY(10px);
transition: transform .3s var(--ease-out);
}
.lb.is-open .lb-box { transform: none; }
.lb-img {
display: block;
max-width: 100%;
max-height: calc(100vh - 150px);
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
background: #0d1420;
box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
/* Görsel altındaki açıklama */
.lb-cap {
margin: 0;
text-align: center;
font-size: 13px;
line-height: 1.6;
color: #c3cede;
max-width: 760px;
margin-inline: auto;
}
/* Kapatma — görselin sağ üst köşesinde */
.lb-x {
position: absolute;
top: -14px;
right: -14px;
width: 42px; height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
color: var(--ink);
box-shadow: 0 6px 20px rgba(0,0,0,.34);
transition: background .2s var(--ease-productive), transform .2s var(--ease-out);
}
.lb-x svg {
width: 17px; height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
.lb-x:hover { background: #eef2f8; transform: scale(1.06); }
.lb-x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Sayfa arkada kaymasin */
.lb-lock, .lb-lock body { overflow: hidden; }
/* Kart üzerindeki büyütme rozeti dokunmatikte de görünsün */
@media (hover: none) {
.rc-zoom { opacity: 1; transform: none; }
}
@media (max-width: 620px) {
.lb { padding: 14px; }
.lb-box { gap: 12px; }
.lb-img { max-height: calc(100vh - 130px); border-radius: 10px; }
/* Dar ekranda çarpı köşeden taşmasın */
.lb-x { top: 8px; right: 8px; width: 38px; height: 38px; }
.lb-cap { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.lb, .lb-box { transition: none; }
.lb.is-open .lb-box { transform: none; }
}
/* ── SSS AKORDİYONU ──────────────────────────────────────
Native ; JS gerekmez, klavye ve ekran okuyucu
erişimi tarayıcıdan gelir. Yükseklik geçişi destekleyen
tarayıcılarda yumuşak, desteklemeyende anında açılır. */
.faq {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--sh-2);
overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 28px;
cursor: pointer;
list-style: none;
font-family: var(--display);
font-size: 17px;
font-weight: 600;
letter-spacing: -.02em;
color: var(--ink);
transition: background var(--dur-fast) var(--ease-productive),
color var(--dur-fast) var(--ease-productive);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg2); color: var(--accent-deep); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.faq-chevron {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: var(--muted);
transition: transform var(--dur-base) var(--ease-expressive),
color var(--dur-base) var(--ease-productive);
}
.faq-item[open] summary { color: var(--accent-deep); background: var(--accent-wash); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-body { padding: 0 28px 26px; }
.faq-body p {
font-size: 15.5px;
line-height: 1.76;
color: var(--muted);
max-width: 74ch;
}
/* Yumuşak açılma — destekleyen tarayıcılarda */
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
.faq-item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size var(--dur-slow) var(--ease-productive),
content-visibility var(--dur-slow) allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
}
/* ── SPLIT / PANEL ───────────────────────────────────────── */
.split {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: 28px;
align-items: stretch;
}
/* Uzun sağ kolon kaydırılırken sol panel yapışık kalır */
@media (min-width: 901px) {
.split > .glass {
position: sticky;
top: calc(var(--nav-h) + 28px);
}
}
.glass {
padding: 40px 36px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--sh-2);
}
.glass h2 {
font-family: var(--display);
font-size: clamp(24px, 2.7vw, 34px);
font-weight: 600;
letter-spacing: -.03em;
line-height: 1.13;
color: var(--ink);
margin-bottom: 16px;
text-wrap: balance;
}
.glass p { color: var(--muted); line-height: 1.75; font-size: 15px; margin-bottom: 18px; }
.glass p:last-of-type { margin-bottom: 26px; }
/* ── ADIMLAR ─────────────────────────────────────────────── */
.steps { display: grid; gap: 12px; }
.step {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 22px 24px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--sh-1);
transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.step:hover { border-color: var(--border-2); transform: translateX(4px); box-shadow: var(--sh-3); }
.num {
width: 40px; height: 40px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--accent-wash);
border: 1px solid var(--accent-line);
color: var(--accent);
font-family: var(--display);
font-size: 13.5px;
font-weight: 600;
letter-spacing: .02em;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}
.num .ic { width: 17px; height: 17px; stroke-width: 1.7; }
.step h3 {
font-family: var(--display);
font-size: 16px;
font-weight: 600;
letter-spacing: -.02em;
color: var(--ink);
margin-bottom: 5px;
}
.step p { color: var(--muted); font-size: 14px; line-height: 1.65; }
/* ── ZAMAN ÇİZELGESİ ─────────────────────────────────────
Dikey eksen ve noktalar tek bir merkezden (--tl-x) turetilir.
Kirilim noktalarinda yalnizca --tl-pad ve --tl-x degisir;
hizalama kendiliginden korunur.
════════════════════════════════════════════════════════ */
.timeline {
--tl-pad: 46px; /* icerigin eksenden uzakligi */
--tl-x: 16px; /* dikey eksenin merkezi */
--tl-dot: 11px; /* nokta capi */
--tl-top: 4px; /* ilk noktanin ust ofseti */
position: relative;
padding-left: var(--tl-pad);
display: flex;
flex-direction: column;
}
.timeline::before {
content: '';
position: absolute;
left: var(--tl-x);
transform: translateX(-50%);
top: calc(var(--tl-top) + var(--tl-dot) / 2);
bottom: 14px;
width: 1px;
/* Alt uc keskin kesilmek yerine erir */
background: linear-gradient(180deg,
var(--border-2) 0%, var(--border-2) 84%, transparent 100%);
}
.timeline-item {
position: relative;
padding: 0 0 38px;
opacity: 0;
transform: translateY(12px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.timeline-item.on { opacity: 1; transform: none; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
position: absolute;
left: calc(var(--tl-x) - var(--tl-pad));
transform: translateX(-50%);
top: var(--tl-top);
width: var(--tl-dot); height: var(--tl-dot);
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--accent);
box-shadow: 0 0 0 4px var(--bg);
}
.timeline-num {
display: inline-block;
font-family: var(--display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.timeline-item h3 {
font-family: var(--display);
font-size: 19px;
font-weight: 600;
letter-spacing: -.024em;
color: var(--ink);
margin-bottom: 8px;
}
.timeline-item p { color: var(--muted); font-size: 14.5px; line-height: 1.72; }
/* ── DEĞERLER ────────────────────────────────────────────── */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.value-item {
padding: 32px 28px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--sh-1);
transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.value-item:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--sh-3); }
.value-num {
display: block;
font-family: var(--display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .12em;
color: var(--accent);
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.value-item h3 {
font-family: var(--display);
font-size: 18px;
font-weight: 600;
letter-spacing: -.024em;
color: var(--ink);
margin-bottom: 11px;
line-height: 1.32;
}
.value-item p { color: var(--muted); font-size: 14.5px; line-height: 1.72; }
/* ── Değer karosu: dev hayalet numara ── */
.value-item { position: relative; overflow: hidden; isolation: isolate; }
.value-ghost {
position: absolute;
right: -12px;
bottom: -34px;
z-index: -1;
font-family: var(--display);
font-size: 132px;
font-weight: 700;
line-height: 1;
letter-spacing: -.06em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(29,78,216,.13);
pointer-events: none;
user-select: none;
transition: transform var(--dur-deliberate) var(--ease-expressive),
-webkit-text-stroke-color var(--dur-slow) var(--ease-productive);
}
.value-item:hover .value-ghost {
transform: translate(-6px, -8px) scale(1.04);
-webkit-text-stroke-color: rgba(29,78,216,.22);
}
/* ── Kanıt karoları: hero mozaiğiyle aynı dil ── */
.proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
}
.proof-item {
position: relative;
padding: 26px 22px;
border: 1px solid var(--border);
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
box-shadow: var(--sh-1);
overflow: hidden;
transition: transform var(--dur-base) var(--ease-productive),
box-shadow var(--dur-base) var(--ease-productive),
border-color var(--dur-base) var(--ease-productive);
}
.proof-item::after {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-soft));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-slow) var(--ease-expressive);
}
.proof-item:hover {
transform: translateY(-3px);
box-shadow: var(--sh-3);
border-color: var(--border-hi);
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.proof-item:hover::after { transform: scaleX(1); }
/* ── Panel filigranı: glass içinde soluk motif ── */
/* Yan sutun daha uzun oldugunda panel de ayni boya uzar; icerik
dipte bosluk birakmasin diye dikeyde ortalanir. section-label ve
.btn inline-flex oldugundan gerilmemeleri ayrica belirtilir. */
.glass {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: center;
}
.glass > .section-label,
.glass > .btn { align-self: flex-start; }
.glass-mark {
position: absolute;
right: -56px;
bottom: -52px;
width: 320px;
z-index: -1;
opacity: .45;
pointer-events: none;
/* Panel kenarinda sert kesilmek yerine yumusakca erir */
mask-image: linear-gradient(135deg, #000 6%, rgba(0,0,0,.55) 44%, transparent 78%);
-webkit-mask-image: linear-gradient(135deg, #000 6%, rgba(0,0,0,.55) 44%, transparent 78%);
}
.glass-mark .cv-rail,
.glass-mark .cv-guide,
.glass-mark .cv-pulse-line { stroke: #dbe3f0; }
.glass-mark .cv-node { fill: #fff; stroke: #dbe3f0; }
.glass-mark .cv-node.hi { fill: var(--accent-line); stroke: #fff; }
.glass-mark .cv-cell,
.glass-mark .cv-layer,
.glass-mark .cv-chip,
.glass-mark .cv-row,
.glass-mark .cv-bar,
.glass-mark .cv-frame { fill: #fff; stroke: #e1e8f3; }
.glass-mark .cv-cell.hi,
.glass-mark .cv-layer.hi,
.glass-mark .cv-chip.hi,
.glass-mark .cv-bar.hi { fill: var(--accent-wash); stroke: var(--accent-line); }
.glass-mark .cv-line-s { fill: #e6ecf6; }
.glass-mark .cv-dot { fill: #e6ecf6; }
.glass-mark .cv-dot.hi, .glass-mark .cv-dot.ok { fill: var(--accent-line); }
.glass-mark .cv-area { fill: rgba(29,78,216,.06); }
.glass-mark .cv-pulse { stroke: var(--accent-line); stroke-width: 2.2; }
@media (max-width: 900px) {
.proof-grid { grid-template-columns: repeat(2, 1fr); }
.glass-mark { display: none; }
}
@media (max-width: 480px) {
.value-ghost { font-size: 108px; }
}
/* ── KARŞILAŞTIRMA TABLOSU ───────────────────────────────── */
.compare-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--sh-2);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th,
.compare-table td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.compare-table th {
background: var(--wash);
font-family: var(--display);
font-size: 13.5px;
letter-spacing: -.012em;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.compare-table th.hi {
background: var(--accent-wash);
color: var(--accent-deep);
border-bottom-color: var(--accent-line);
}
.compare-table td { color: var(--muted); }
.compare-table td.hi { background: rgba(238,243,254,.5); color: var(--soft); font-weight: 500; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: var(--bg2); }
.compare-table tbody tr:hover td.hi { background: var(--accent-wash); }
.good { color: var(--green) !important; font-weight: 600 !important; }
.bad { color: var(--faint) !important; }
/* ── CTA BÖLÜMÜ ──────────────────────────────────────────── */
.cta-section {
padding: 76px 0;
position: relative;
background: linear-gradient(180deg, #f6f8fc 0%, #f8f9fb 100%);
border-top: 1px solid var(--border);
}
/* Tonlu bandın hemen ardından gelirse çift çizgi olmasın */
.section-tint + .cta-section { border-top: 0; }
.cta-section .container > div {
border: 1px solid rgba(120,160,255,.20);
border-radius: var(--radius-lg);
/* Fotograf, yari saydam marka katmaninin ALTINDA durur:
doku ve derinlik hissi gelir ama sahne kobalt kalir.
Ust katmanlar %84–92 opaklikta — fotograf hayalet gibi okunur,
beyaz metnin kontrasti hic dusmez. */
background-color: #0b163f;
background-image:
radial-gradient(ellipse 76% 108% at 14% -16%, rgba(74,124,246,.34) 0%, transparent 60%),
radial-gradient(ellipse 62% 96% at 90% 112%, rgba(32,74,196,.40) 0%, transparent 62%),
linear-gradient(152deg,
rgba(20,42,116,.86) 0%,
rgba(14,29,85,.90) 46%,
rgba(7,15,49,.93) 100%),
url('img/cta-ekip.jpg');
background-size: cover, cover, cover, cover;
background-position: center, center, center, center;
/* Fotografi marka rengine kaynastirir — ham stok goruntu hissi kalkar */
background-blend-mode: normal, normal, normal, luminosity;
padding: 84px 56px;
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: var(--sh-4);
}
.cta-section .container > div::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(ellipse 76% 96% at 50% 0%, #000 10%, transparent 76%);
-webkit-mask-image: radial-gradient(ellipse 76% 96% at 50% 0%, #000 10%, transparent 76%);
pointer-events: none;
}
/* Gren + üstten gelen yumuşak ışık huzmesi */
.cta-section .container > div::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background-image:
radial-gradient(ellipse 60% 55% at 50% -8%, rgba(255,255,255,.16), transparent 68%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: auto, 180px 180px;
opacity: .55;
mix-blend-mode: soft-light;
pointer-events: none;
}
.cta-section h2 {
font-family: var(--display);
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 600;
letter-spacing: -.034em;
line-height: 1.08;
color: #fff;
margin-bottom: 18px;
position: relative;
z-index: 2;
text-wrap: balance;
}
.cta-section p {
color: #c5d6fb;
font-size: 16px;
margin-inline: auto;
max-width: 480px;
line-height: 1.72;
margin-bottom: 34px;
position: relative;
z-index: 2;
}
.cta-actions { display: flex; gap: 10px; justify-content: center; position: relative; z-index: 2; flex-wrap: wrap; }
.cta-section .btn {
background: #fff;
border-color: #fff;
color: var(--accent-deep);
}
.cta-section .btn:hover { background: #eaf0ff; border-color: #eaf0ff; box-shadow: 0 10px 30px rgba(6,22,66,.34); }
.cta-section .btn .ic { color: var(--accent); }
.cta-section .btn.ghost {
background: transparent;
border-color: rgba(255,255,255,.26);
color: #fff;
box-shadow: none;
}
.cta-section .btn.ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.46); }
.cta-section .btn.ghost .ic { color: #fff; }
/* ── SAYFA BAŞLIĞI ───────────────────────────────────────── */
.pageHero {
padding: 72px 0 64px;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
}
.pageHero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(29,78,216,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(29,78,216,.055) 1px, transparent 1px);
background-size: 76px 76px;
mask-image: radial-gradient(ellipse 70% 100% at 30% 0%, #000, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 100% at 30% 0%, #000, transparent 75%);
pointer-events: none;
}
/* Iki kolonlu sayfa basligi YALNIZCA yan paneli olan sayfalarda */
.pageHero .container.pagehero-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
gap: 64px;
align-items: start;
}
.pagehero-main { min-width: 0; padding-top: 2px; }
/* Sayfa basligi ust omuz cizgisi — tum sayfalarda ayni giris ritmi */
.pageHero .eyebrow { margin-bottom: 18px; }
/* Hızlı bakış paneli — sayfa başlığının sağ omzu */
.pagehero-aside {
border: 1px solid var(--border);
border-radius: var(--radius);
background: rgba(255,255,255,.74);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--sh-2);
padding: 24px 26px;
}
.aside-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.aside-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 13px;
margin-bottom: 20px;
}
.aside-list li {
display: flex;
gap: 11px;
align-items: flex-start;
font-size: 14px;
line-height: 1.55;
color: var(--soft);
font-weight: 500;
}
.aside-list .ic {
width: 16px; height: 16px;
color: var(--accent);
stroke-width: 1.9;
margin-top: 2px;
}
.pageHero h1 {
font-family: var(--display);
font-size: clamp(38px, 4.6vw, 58px);
font-weight: 600;
letter-spacing: -.036em;
line-height: 1.04;
color: var(--ink);
margin-bottom: 18px;
text-wrap: balance;
}
.pageHero .lead { max-width: 620px; font-size: 17px; margin-bottom: 0; }
/* ══ ANA SAYFA BAŞLIĞI ════════════════════════════════════
Ic sayfalarla ayni sakin duzen (pageHero); farki: daha
guclu baslik olcegi, aksiyon butonlari, guven seridi ve
arka planda cok soluk mimari doku. Hareketli oge yok.
════════════════════════════════════════════════════════ */
.pageHero--home {
/* Kisa ve derli toplu: altindaki bolum ilk ekranda gorunur */
padding: 52px 0 0;
background-color: #ffffff;
background-image:
/* Yatay perde yalnizca metin sutununu korur: sol taraf
okunurluk icin neredeyse opak, %44'ten sonra acilir ve
fotograf kendi renkleriyle gorunur. Sag kart kendi cam
yuzeyini (backdrop-filter) tasidigi icin ayrica perde
gerektirmez. */
linear-gradient(90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.93) 36%,
rgba(255,255,255,.86) 46%,
rgba(255,255,255,.36) 58%,
rgba(255,255,255,.06) 74%,
rgba(255,255,255,0) 100%),
/* Alt kenarda Hizmetler bolumune yumusak gecis */
linear-gradient(180deg,
rgba(255,255,255,0) 72%,
rgba(255,255,255,.55) 100%),
url('img/hero-office.webp');
background-size: auto, auto, cover;
background-position: center, center, center 58%;
background-repeat: no-repeat;
}
/* Blueprint dokusu ana sayfada biraz daha genis nefes alir */
.pageHero--home::before {
background-size: 104px 104px;
/* Fotograf uzerinde ızgara cizgi olarak belirmesin */
opacity: .22;
mask-image: radial-gradient(ellipse 78% 74% at 38% 6%, #000 8%, transparent 74%);
-webkit-mask-image: radial-gradient(ellipse 78% 74% at 38% 6%, #000 8%, transparent 74%);
}
.pageHero--home .container.pagehero-split { padding-bottom: 54px; }
/* Baslik olcegi: ic sayfalardan bir kademe yukarida */
.pageHero--home h1 {
font-size: clamp(36px, 4.1vw, 56px);
line-height: 1.06;
letter-spacing: -.038em;
margin-bottom: 17px;
}
.pageHero--home h1 .grad { color: var(--accent); }
.pageHero--home .lead {
max-width: 545px;
font-size: 17px;
margin-bottom: 26px;
}
/* Sag kolon — kart ve hemen altinda aksiyon butonlari.
Butonlar kart genisligini paylasir; iki kolon simetrik biter. */
.pagehero-side {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
/* Sol kolon daha uzun; sag kolon satirin ortasina hizalanir
boylece kart ve butonlar asagi iner, iki kolon simetrik durur.
Sabit bir margin yerine align-self kullanmak, metin uzunlugu
degistiginde hizayi kendiliginden korur. */
align-self: center;
}
.pagehero-side .actions { margin: 0; gap: 10px; flex-wrap: nowrap; }
.pagehero-side .actions .btn {
flex: 1 1 0;
min-width: 0;
justify-content: center;
white-space: nowrap;
}
.pageHero--home .trust-row { margin-top: 26px; padding-top: 20px; }
@media (max-width: 900px) {
/* Kart ve altindaki butonlar dar ekranda gizlenir; kazanilan
yer sayesinde Hizmetler bolumunun basi ilk ekrana girer.
Teklif yolu nav'daki "Teklif Al" ve WhatsApp dugmesiyle acik. */
.pageHero--home .pagehero-side { display: none; }
/* Tek kolonda metin tam genisligi kapladigi icin yatay perde
ise yaramaz; yerini her yeri esit ortan dusey perde alir.
Fotograf mobilde daha soluk kalir — okunabilirlik once gelir. */
.pageHero--home {
background-image:
linear-gradient(180deg,
rgba(255,255,255,.90) 0%,
rgba(255,255,255,.86) 50%,
rgba(255,255,255,.93) 100%),
url('img/hero-office-mobile.webp');
background-size: auto, cover;
background-position: center, center 58%;
}
/* Kart gizlenince bosalan yeri Hizmetler bolumu doldursun:
hero alt dolgusu ve bolum ust dolgusu birlikte kisalir.
.pageHero + .section kuralini ezmek icin ayni ozgulukte
ama daha sonra gelen bir kural gerekiyor. */
.pageHero--home { padding-top: 22px; padding-bottom: 22px; }
.pageHero--home .container.pagehero-split { padding-bottom: 16px; }
.pageHero--home + .section { padding-top: 34px; }
.pageHero--home h1 { font-size: clamp(30px, 8.4vw, 44px); margin-bottom: 16px; }
.pageHero--home .lead { font-size: 16px; margin-bottom: 22px; }
.pageHero--home .trust-row { margin-top: 20px; padding-top: 15px; }
}
@media (max-width: 480px) {
.pageHero--home { padding-top: 16px; padding-bottom: 18px; }
.pageHero--home .container.pagehero-split { padding-bottom: 12px; }
.pageHero--home + .section { padding-top: 30px; }
.pageHero--home h1 { font-size: 30px; }
.pageHero--home .lead { font-size: 15px; margin-bottom: 20px; }
}
/* ── İLETİŞİM ────────────────────────────────────────────── */
.contactBox { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--soft);
margin-bottom: 7px;
letter-spacing: -.002em;
}
.input {
display: block;
width: 100%;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-2);
background: var(--surface);
color: var(--text);
font-family: var(--font);
font-size: 14.5px;
font-weight: 400;
outline: none;
margin-bottom: 16px;
transition: border-color .18s, box-shadow .18s;
-webkit-appearance: none;
resize: vertical;
}
.input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(29,78,216,.12);
outline: none;
}
.input::placeholder { color: var(--faint); }
.field { margin-bottom: 2px; }
.contact-detail {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg2);
margin-bottom: 10px;
}
.contact-detail:last-child { margin-bottom: 0; }
.contact-icon {
width: 38px; height: 38px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--surface);
border: 1px solid var(--border-2);
color: var(--accent);
flex-shrink: 0;
}
.contact-icon .ic { width: 18px; height: 18px; }
.contact-detail strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.contact-detail p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
/* Beklenti listesi */
.expect-list { display: flex; flex-direction: column; gap: 13px; margin-top: 8px; }
.expect-list li,
.expect-item {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 14px;
line-height: 1.6;
color: var(--soft);
list-style: none;
}
.expect-list .ic,
.expect-item .ic {
width: 17px; height: 17px;
color: var(--green);
stroke-width: 2;
margin-top: 2px;
}
/* ── Teklif formu: gönderim durumu ─────────────────────── */
.form-submit {
position: relative;
width: 100%;
justify-content: center;
margin-top: 2px;
padding: 13px 20px;
font-size: 14px;
}
.form-submit .fs-label { line-height: 1.3; }
.form-submit .fs-spin {
width: 15px; height: 15px;
margin-left: 9px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
display: none;
animation: fs-spin .7s linear infinite;
}
@keyframes fs-spin { to { transform: rotate(360deg); } }
.form-submit.is-busy .fs-spin { display: inline-block; }
.form-submit:disabled { opacity: .72; cursor: progress; }
/* Hatalı alan */
.input.is-invalid {
border-color: #c0392b;
background: #fdf6f5;
box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
/* Sonuç mesajı */
.form-note {
margin: 14px 0 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--muted);
min-height: 0;
}
.form-note:empty { display: none; }
/* Not içindeki yedek bağlantı (kendi e-posta uygulaması vb.) */
.form-note a {
color: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.form-note a:hover { opacity: .78; }
.form-note.is-ok {
color: var(--green);
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--green-wash);
border: 1px solid rgba(5,120,79,.18);
}
.form-note.is-error {
color: #a5342a;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: #fdf3f2;
border: 1px solid rgba(192,57,43,.20);
}
.form-note.is-warn {
color: var(--amber);
padding: 12px 14px;
border-radius: var(--radius-sm);
background: #fdf8ef;
border: 1px solid rgba(154,91,6,.20);
}
/* ══ WHATSAPP WIDGET ══════════════════════════════════════
Sag altta sabit dugme; tiklaninca uzerinde iki numarali
panel acilir. Masaustunde 320px, dar ekranda kenar
bosluklarina gore daralir. Marka rengi disinda kalir —
WhatsApp'in kendi yesili taninirligi tasir.
════════════════════════════════════════════════════════ */
.wa {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 85;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
/* iOS'ta alt cubugun altinda kalmasin */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ── Yuvarlak dugme ── */
.wa-fab {
position: relative;
width: 58px; height: 58px;
flex: 0 0 auto;
/* Oval kare (squircle) — daire degil */
border-radius: 19px;
display: grid;
place-items: center;
background: #25d366;
color: #fff;
box-shadow: 0 6px 18px rgba(37,211,102,.38), 0 2px 8px rgba(13,20,32,.18);
transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out),
background .26s var(--ease-productive);
}
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.wa-fab .wa-fab-close { display: none; }
.wa-fab .wa-fab-close svg {
width: 22px; height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
/* Panel acikken kapatma kimligine burunur */
.wa.is-open .wa-fab .wa-fab-open { display: none; }
.wa.is-open .wa-fab .wa-fab-close { display: block; }
.wa.is-open .wa-fab .wa-dot { display: none; }
/* Cevrimici noktasi */
.wa-dot {
position: absolute;
top: -4px; right: -4px;
width: 14px; height: 14px;
border-radius: 50%;
background: #4ade80;
border: 3px solid #fff;
}
/* ── Panel ── */
.wa-panel {
width: min(320px, calc(100vw - 44px));
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 48px rgba(13,20,32,.24), 0 2px 8px rgba(13,20,32,.10);
transform-origin: 100% 100%;
opacity: 0;
transform: translateY(12px) scale(.96);
transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.wa-panel[hidden] { display: none; }
.wa.is-open .wa-panel { opacity: 1; transform: none; }
.wa-head {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 14px 13px;
background: #f7f9f8;
border-bottom: 1px solid #e6ebe8;
}
.wa-avatar {
width: 38px; height: 38px;
flex: 0 0 auto;
border-radius: 12px;
display: grid;
place-items: center;
background: #25d366;
color: #fff;
}
.wa-avatar svg { width: 22px; height: 22px; fill: currentColor; }
.wa-id { flex: 1; min-width: 0; }
.wa-id b {
display: block;
font-family: var(--display);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -.012em;
color: #111b21;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wa-id em {
display: flex;
align-items: center;
gap: 5px;
font-style: normal;
font-size: 11px;
color: #667781;
margin-top: 2px;
}
.wa-id em i {
width: 6px; height: 6px;
border-radius: 50%;
background: #25d366;
flex: 0 0 auto;
}
.wa-x {
width: 26px; height: 26px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 50%;
color: #667781;
transition: background .2s var(--ease-productive), color .2s var(--ease-productive);
}
.wa-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wa-body { padding: 15px 14px 16px; background: #fff; }
/* Karşılama balonu */
.wa-bubble {
position: relative;
margin: 0 0 14px;
padding: 11px 13px;
border-radius: 4px 12px 12px 12px;
background: #f0f2f5;
font-size: 13px;
line-height: 1.58;
color: #3b4a54;
}
/* Numara satirlari */
.wa-num {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
font-family: var(--display);
font-size: 14.5px;
font-weight: 600;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
border: 1px solid #cdeed9;
background: #eefaf2;
color: #0f7a3d;
transition: background .2s var(--ease-productive), border-color .2s var(--ease-productive),
transform .2s var(--ease-out);
}
.wa-num + .wa-num { margin-top: 9px; }
.wa-num.is-primary {
background: #25d366;
border-color: #25d366;
color: #fff;
box-shadow: 0 3px 10px rgba(37,211,102,.28);
}
.wa-num .wa-go {
width: 17px; height: 17px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .9;
}
/* ── İmleç geri bildirimi ── */
@media (hover: hover) and (pointer: fine) {
.wa-fab:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 10px 26px rgba(37,211,102,.46), 0 3px 10px rgba(13,20,32,.2);
}
.wa-x:hover { background: #e6ebe8; color: #111b21; }
.wa-num:hover { transform: translateX(2px); }
.wa-num:not(.is-primary):hover { background: #e2f6ea; border-color: #a9e3c1; }
.wa-num.is-primary:hover { background: #1fbe5b; border-color: #1fbe5b; }
}
/* ── Dar ekran ── */
@media (max-width: 620px) {
.wa { right: 16px; bottom: 16px; gap: 12px; }
.wa-fab { width: 54px; height: 54px; border-radius: 17px; }
.wa-fab svg { width: 28px; height: 28px; }
.wa-panel { width: min(310px, calc(100vw - 32px)); }
.wa-num { font-size: 14px; padding: 12px 13px; }
}
@media (max-width: 380px) {
.wa-panel { width: calc(100vw - 28px); }
.wa-bubble { font-size: 12.5px; }
}
/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
.wa-panel, .wa-fab, .wa-num { transition: none; }
.wa.is-open .wa-panel { transform: none; }
}
/* Baskıda görünmez */
@media print { .wa { display: none !important; } }
/* ── ALT BİLGİ ───────────────────────────────────────────── */
.footer {
padding: 60px 0 30px;
border-top: 1px solid var(--border);
background: var(--bg2);
position: relative;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 40px 48px;
margin-bottom: 48px;
}
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p {
font-size: 13.5px;
color: var(--muted);
line-height: 1.72;
max-width: 250px;
}
.footer-col h3 {
font-size: 11.5px;
font-weight: 700;
color: var(--ink);
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 14px;
color: var(--muted);
margin-bottom: 11px;
transition: color .18s;
font-weight: 400;
}
.footer-col a {
position: relative;
width: fit-content;
}
.footer-col a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-productive);
}
.footer-col a:hover { color: var(--accent); }
.footer-col a:hover::after { transform: scaleX(1); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 26px;
border-top: 1px solid var(--border);
gap: 14px;
flex-wrap: wrap;
}
.footer-bottom p { font-size: 13px; color: var(--faint); }
/* ── GİRİŞ ANİMASYONU ────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.on { opacity: 1; transform: none; }
.cards > .reveal:nth-child(2) { transition-delay: .07s; }
.cards > .reveal:nth-child(3) { transition-delay: .14s; }
.cards > .reveal:nth-child(4) { transition-delay: .05s; }
.cards > .reveal:nth-child(5) { transition-delay: .11s; }
.cards > .reveal:nth-child(6) { transition-delay: .17s; }
.values > .reveal:nth-child(2) { transition-delay: .07s; }
.values > .reveal:nth-child(3) { transition-delay: .14s; }
.steps > .reveal:nth-child(2) { transition-delay: .06s; }
.steps > .reveal:nth-child(3) { transition-delay: .12s; }
.steps > .reveal:nth-child(4) { transition-delay: .18s; }
.steps > .reveal:nth-child(5) { transition-delay: .24s; }
/* ── Yazı kapağı ─────────────────────────────────────────
Tam genislikte kirpilmis bant yerine, kompozisyonu bozulmayan
cerceveli editoryal kapak. Gorsel butun halinde okunur.
════════════════════════════════════════════════════════ */
.post-cover {
width: min(1040px, 100% - 88px);
margin: 48px auto 0;
aspect-ratio: 16 / 9;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: var(--sh-4);
background:
radial-gradient(ellipse 70% 80% at 50% 118%, rgba(29,78,216,.12), transparent 66%),
linear-gradient(168deg, #f9fbff 0%, #eaeff9 100%);
}
.post-cover::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(29,78,216,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(29,78,216,.055) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 25%, transparent 82%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 25%, transparent 82%);
pointer-events: none;
}
.post-cover .cover-art { height: 74%; max-width: 560px; }
.post-cover .cover-img,
.post-cover .cover-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
.post-cover:has(.cover-img)::before,
.post-cover:has(.cover-photo)::before,
.post-cover--photo::before { display: none; }
/* Fotograf uzerinde agir perde yok — sadece ince bir ic cerceve ve
alt kenarda okunabilirligi koruyan yumusak bir vinyet. */
.post-cover:has(.cover-img)::after,
.post-cover:has(.cover-photo)::after,
.post-cover--photo::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(13,20,32,.07);
background:
linear-gradient(180deg, transparent 58%, rgba(13,20,32,.16) 100%),
linear-gradient(148deg, rgba(29,78,216,.10) 0%, transparent 46%);
}
/* Kapaktan metne gecis — bolum bosluğu yeniden dengelenir */
.post-cover + .section { padding-top: 56px; }
@media (max-width: 900px) {
.post-cover { width: min(100% - 40px, 1040px); margin-top: 36px; border-radius: var(--radius); }
.post-cover + .section { padding-top: 44px; }
}
@media (max-width: 480px) {
.post-cover { margin-top: 26px; aspect-ratio: 3 / 2; }
.post-cover + .section { padding-top: 34px; }
}
/* Kapaklı blog kartında kategori bir kez görünür */
.has-cover .blog-meta .blog-cat { display: none; }
/* ── Editoryal ayrıntılar ── */
.post-content > p:first-of-type::first-letter {
float: left;
font-family: var(--display);
font-size: 3.5em;
line-height: .84;
font-weight: 600;
color: var(--accent);
padding: .06em .12em 0 0;
margin-top: .04em;
}
.post-content > p:first-of-type { margin-bottom: 30px; }
/* Vurgulu ara söz */
.pull-quote {
margin: 44px 0;
padding: 28px 32px;
border-radius: var(--radius);
background: linear-gradient(165deg, #f8fafe 0%, #f2f6fd 100%);
border: 1px solid var(--accent-line);
position: relative;
}
.pull-quote p {
font-family: var(--display);
font-size: clamp(19px, 2.2vw, 23px);
font-weight: 600;
letter-spacing: -.024em;
line-height: 1.36;
color: var(--accent-deep);
margin: 0;
}
/* ── BLOG YAZI GÖVDESİ ───────────────────────────────────── */
.post-meta-bar,
.post-meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
margin-bottom: 44px;
}
.post-meta-bar .blog-cat { font-size: 11px; letter-spacing: .1em; color: var(--accent); }
.post-meta-bar .blog-date,
.post-meta-bar .blog-read { font-size: 13.5px; color: var(--muted); margin-left: 0; }
.post-meta-bar .sep,
.post-meta .dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--border-2);
flex-shrink: 0;
}
.post-meta .badge { font-size: 11.5px; }
.post-meta span { font-size: 13.5px; color: var(--muted); }
.post-body { max-width: 720px; margin-inline: auto; }
.post-content {
font-family: var(--serif);
font-size: 18.5px;
line-height: 1.78;
color: #26313f;
font-weight: 400;
letter-spacing: -.002em;
}
.post-content p { margin-bottom: 26px; }
.post-content h2 {
font-family: var(--display);
font-size: clamp(23px, 2.6vw, 30px);
font-weight: 600;
letter-spacing: -.028em;
line-height: 1.2;
color: var(--ink);
margin: 52px 0 18px;
}
.post-content h3 {
font-family: var(--display);
font-size: clamp(18px, 2.1vw, 22px);
font-weight: 600;
letter-spacing: -.022em;
line-height: 1.3;
color: var(--ink);
margin: 38px 0 14px;
}
.post-content ul,
.post-content ol { padding-left: 24px; margin-bottom: 26px; display: flex; flex-direction: column; gap: 11px; }
.post-content li { color: #26313f; line-height: 1.72; }
.post-content li::marker { color: var(--accent); }
.post-content strong { color: var(--ink); font-weight: 600; }
.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-content blockquote {
margin: 38px 0;
padding: 4px 0 4px 28px;
border-left: 3px solid var(--accent);
color: var(--soft);
font-size: 20px;
line-height: 1.62;
font-style: italic;
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content .highlight-box,
.blog-highlight {
font-family: var(--font);
padding: 24px 26px;
border: 1px solid var(--accent-line);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--accent-wash);
margin: 36px 0;
font-size: 15.5px;
line-height: 1.7;
color: var(--soft);
}
.post-content .highlight-box p,
.blog-highlight p { margin-bottom: 0; font-weight: 400; font-family: var(--font); font-size: 15.5px; }
.post-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding-top: 44px;
margin-top: 48px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.post-nav a:not(.btn) {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
transition: color .2s;
}
.post-nav a:not(.btn) .ic { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.post-nav a:not(.btn):hover { color: var(--accent); }
.post-nav a:not(.btn):hover .ic { transform: translateX(-3px); }
/* Geri bağlantısı */
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
margin-bottom: 28px;
transition: color .2s;
}
.back-link .ic { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.back-link:hover { color: var(--accent); }
.back-link:hover .ic { transform: translateX(-3px); }
/* Eski blog düzeni — kenar çubuklu */
.blog-post-wrap {
display: grid;
grid-template-columns: 1fr 288px;
gap: 56px;
align-items: start;
}
.blog-content { max-width: 720px; font-family: var(--serif); }
.blog-content h2 {
font-family: var(--display);
font-size: clamp(23px, 2.6vw, 30px);
font-weight: 600;
letter-spacing: -.028em;
line-height: 1.2;
margin: 48px 0 16px;
color: var(--ink);
}
.blog-content h3 {
font-family: var(--display);
font-size: clamp(18px, 2.1vw, 22px);
font-weight: 600;
letter-spacing: -.022em;
margin: 34px 0 12px;
color: var(--ink);
}
.blog-content p {
font-size: 18.5px;
line-height: 1.78;
color: #26313f;
margin-bottom: 24px;
}
.blog-content p strong { color: var(--ink); font-weight: 600; }
.blog-content ul,
.blog-content ol { padding-left: 24px; margin-bottom: 24px; }
.blog-content li { font-size: 18px; line-height: 1.75; color: #26313f; margin-bottom: 9px; }
.blog-content li::marker { color: var(--accent); }
.blog-content blockquote {
border-left: 3px solid var(--accent);
padding: 4px 0 4px 28px;
margin: 32px 0;
}
.blog-content blockquote p { font-style: italic; font-size: 20px; color: var(--soft); margin: 0; }
.blog-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.blog-sidebar .glass { margin-bottom: 16px; padding: 26px 24px; }
.blog-sidebar h3 {
font-family: var(--display);
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 14px;
color: var(--ink);
}
.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar-list a {
display: block;
font-size: 13.5px;
color: var(--muted);
padding: 9px 11px;
border-radius: var(--radius-sm);
transition: background .18s, color .18s;
line-height: 1.45;
}
.sidebar-list a:hover { background: var(--wash); color: var(--ink); }
.sidebar-list a.active-post { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }
/* ═══ RESPONSIVE ══════════════════════════════════════════ */
/* ── ≤1080px ── */
@media (max-width: 1320px) {
.container { width: min(1180px, 100% - 72px); }
.hero .container { gap: 64px; }
}
@media (max-width: 1080px) {
.container { width: min(100% - 56px, 1180px); }
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
.cards { grid-template-columns: repeat(2, 1fr); }
.hero .container { grid-template-columns: 1fr 1fr; gap: 48px; }
}
/* Masaustu navin en dar araligi (901–1100px): yedi baglanti +
teklif butonu sigsin diye oluk ve dolgular kademeli daralir. */
@media (min-width: 901px) and (max-width: 1100px) {
.navin { gap: 12px; }
.links a:not(.btn) { padding: 8px 9px; font-size: 13.5px; }
.links a:not(.btn).active::after { left: 9px; right: 9px; }
.links .btn { margin-left: 6px; }
.brand img { width: 40px; height: 40px; }
}
/* ── ≤900px — tek kolon + mobil nav ── */
@media (max-width: 900px) {
.container { width: min(100% - 40px, 1180px); }
.pageHero .container.pagehero-split { grid-template-columns: 1fr; gap: 32px; align-items: start; }
.section { padding: 68px 0; }
.section + .section { padding-top: 0; }
.hero { padding: 60px 0 68px; }
.hero .container { grid-template-columns: 1fr; gap: 44px; }
/* Mobilde once deger onermesi, sonra urun mozaigi */
.stage { order: 0; }
.split { grid-template-columns: 1fr; gap: 16px; }
.contactBox { grid-template-columns: 1fr; gap: 16px; }
.values { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.cta-section { padding: 76px 0; }
.cta-section .container > div { padding: 52px 32px; }
.blog-post-wrap { grid-template-columns: 1fr; }
.blog-sidebar { display: none; }
/* ── Mobil nav: tam ekran paneli ──────────────────────────
Panel viewport'un tamamini kaplar. Ust seride marka ve
kapatma dugmesi gorunur kalsin diye nav (z-index 80)
panelin (78) uzerindedir; panel de nav yuksekligi kadar
ust dolgu alir. Perde gereksizlesir, kapatilir.
══════════════════════════════════════════════════════ */
.links {
position: fixed;
inset: 0;
z-index: 78;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: calc(var(--nav-h) + 22px) 22px calc(28px + env(safe-area-inset-bottom, 0px));
border: 0;
border-radius: 0;
box-shadow: none;
background:
radial-gradient(ellipse 110% 42% at 50% 0%, rgba(29,78,216,.07), transparent 68%),
linear-gradient(180deg, #ffffff 0%, #fbfcff 62%, #f7f9fe 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .26s var(--ease), visibility 0s linear .26s;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.links.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .26s var(--ease), visibility 0s;
}
/* Panel acikken ust serit panelle kaynasir */
.menu-open .nav {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Tam ekranda perde gorunmez kalir — bosuna blur maliyeti */
.nav-backdrop { display: none; }
/* Baglantilar: buyuk tipografi, sac teli ayiraclar */
.links a:not(.btn) {
position: relative;
display: flex;
align-items: center;
padding: 17px 2px;
border-radius: 0;
border-bottom: 1px solid var(--border);
font-family: var(--display);
font-size: 19px;
font-weight: 600;
letter-spacing: -.022em;
color: var(--ink);
background: none;
}
.links a:not(.btn):hover { background: none; color: var(--accent); }
.links a:not(.btn).active { background: none; color: var(--accent); padding-left: 16px; }
.links a:not(.btn).active::after { display: none; }
/* Aktif sayfa: solda kisa kobalt cubuk */
.links a:not(.btn).active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 20px;
margin-top: -10px;
border-radius: 2px;
background: linear-gradient(180deg, var(--accent), var(--accent-soft));
}
.links .btn {
margin: 30px 0 0;
width: 100%;
justify-content: center;
font-size: 15.5px;
padding: 15px;
}
/* Ogeler panelle birlikte kisa bir kademeyle gelir */
.links > * {
opacity: 0;
transform: translateY(9px);
transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
.links.open > * { opacity: 1; transform: none; }
.links.open > *:nth-child(1) { transition-delay: .05s; }
.links.open > *:nth-child(2) { transition-delay: .09s; }
.links.open > *:nth-child(3) { transition-delay: .13s; }
.links.open > *:nth-child(4) { transition-delay: .17s; }
.links.open > *:nth-child(5) { transition-delay: .21s; }
.links.open > *:nth-child(6) { transition-delay: .25s; }
.links.open > *:nth-child(7) { transition-delay: .29s; }
.links.open > *:nth-child(8) { transition-delay: .33s; }
.menu { display: flex; }
/* .links, .nav'in yigin baglami ICINDE oldugu icin z-index 78
onu kardeslerinin altina atmaz — marka ve kapatma dugmesi
acikca panelin uzerine cikarilir. */
.navin > .brand,
.navin > .menu { position: relative; z-index: 82; }
/* Panel acikken dugme kapatma kimligine burunur */
.menu-open .menu {
background: var(--surface);
border-color: var(--border-2);
color: var(--ink);
}
/* Panel acikken arka plan kaymaz */
.menu-open, .menu-open body { overflow: hidden; }
}
/* ── ≤768px ── */
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr; }
.wide { grid-template-columns: 1fr; }
.values { grid-template-columns: 1fr; }
.timeline { --tl-pad: 34px; --tl-x: 12px; }
.compare-table th,
.compare-table td { padding: 13px 16px; font-size: 13.5px; }
.glass { padding: 30px 26px; }
.trust-row { gap: 14px 22px; }
}
/* ── ≤480px ── */
@media (max-width: 480px) {
.container { width: min(100% - 32px, 1180px); }
.section { padding: 60px 0; }
.section + .section { padding-top: 0; }
.h1 { font-size: 34px; letter-spacing: -.032em; }
.lead { font-size: 15.5px; }
.hero { padding: 44px 0 56px; }
.actions { flex-direction: column; width: 100%; }
.actions .btn { width: 100%; }
.trust-row { gap: 12px; flex-direction: column; margin-top: 28px; padding-top: 22px; }
.trust-badge { font-size: 12.5px; }
.proof-item { padding: 20px 16px; }
.proof-item strong { font-size: 29px; }
.proof-item span { font-size: 11.5px; }
.card, .project-card, .blog-card { padding: 24px 22px; }
.glass { padding: 26px 22px; }
.step { padding: 18px; gap: 14px; }
.btn { font-size: 13.5px; padding: 12px 18px; }
.cta-actions { flex-direction: column; align-items: stretch; }
.cta-actions .btn { width: 100%; }
.cta-section { padding: 60px 0; }
.cta-section .container > div { padding: 44px 22px; border-radius: var(--radius); }
.cta-section h2 { font-size: clamp(26px, 7.4vw, 36px); }
.pageHero { padding: 60px 0 46px; }
.pageHero h1 { font-size: clamp(30px, 8.4vw, 42px); }
.footer { padding: 52px 0 26px; }
.footer-grid { grid-template-columns: 1fr; gap: 30px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
.section-header { margin-bottom: 36px; }
.section-title { font-size: clamp(24px, 6.8vw, 34px); }
.timeline { --tl-pad: 28px; --tl-x: 10px; }
.timeline-item h3 { font-size: 17px; }
.timeline-item p { font-size: 14px; }
.timeline-item { padding-bottom: 30px; }
.post-content,
.blog-content p { font-size: 17px; }
.post-content blockquote,
.blog-content blockquote p { font-size: 18px; }
.post-content blockquote { padding-left: 20px; }
.compare-table th,
.compare-table td { padding: 11px 13px; font-size: 12.5px; }
}
/* ── ≤360px ── */
@media (max-width: 360px) {
.container { width: min(100% - 24px, 1180px); }
.h1 { font-size: 30px; }
.proof-grid { grid-template-columns: 1fr; }
}
/* ══ DAR EKRAN: KAYDIRMA ÇUBUĞU ══════════════════════════
Mobil duzende cubuk gizlenir — dokunmatikte zaten katman
olarak gelip kayboluyor, dar masaustu penceresinde de
gereksiz yer kapliyordu. Kaydirma islevi aynen surer.
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
html {
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
}
/* ══ MOBİL DİKEY RİTİM ════════════════════════════════════
Dar ekranda hero ve ilk bölüm arasındaki boşluklar,
masaüstü ölçeğinden devraldıkları için orantısız büyüktü;
ilk hizmet kartı ekranın çok altında kalıyordu. Aşağıdaki
değerler yalnızca boşlukları kısar — yazı boyutları ve
hiyerarşi korunur.
Bu blok, kırılım kurallarından SONRA gelir ki son sözü
bunlar söylesin.
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.hero { padding-top: 34px; padding-bottom: 30px; }
.hero .eyebrow,
.pageHero--home .eyebrow { margin-bottom: 12px; }
.hero .h1 { margin-bottom: 17px; }
.hero .lead { line-height: 1.6; margin-bottom: 22px; }
/* Güven şeridi tek satırda kalsın; sığmazsa kendi sarar */
.trust-row {
flex-direction: row;
flex-wrap: wrap;
gap: 10px 20px;
margin-top: 20px;
padding-top: 15px;
}
/* Bölüm girişi: etiket → başlık → alt yazı → ayraç → kart */
.section { padding-top: 36px; padding-bottom: 46px; }
.section-label { margin-bottom: 11px; }
.section-title { margin-bottom: 10px; }
.section-sub { font-size: 15px; line-height: 1.62; }
.section-header { margin-bottom: 16px; }
.line-reveal { margin-bottom: 20px; }
}
@media (max-width: 480px) {
.hero { padding-top: 28px; padding-bottom: 26px; }
.hero .h1 { font-size: 30px; }
.hero .lead { font-size: 15px; margin-bottom: 20px; }
.trust-row { flex-direction: row; flex-wrap: wrap; gap: 9px 16px; margin-top: 18px; padding-top: 14px; }
.trust-badge { font-size: 12px; }
/* Butonlar yan yana: alt alta dizmek hero'yu ~65px uzatip ilk
hizmet kartini ekran disina itiyordu. align-items: center sart,
aksi halde flex kutusu butonlari dikeyde gerip bozuyor. */
.actions {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
gap: 8px;
}
.actions .btn {
flex: 1 1 0;
min-width: 0;
width: auto;
padding-inline: 10px;
font-size: 13px;
white-space: nowrap;
}
.section { padding-top: 32px; padding-bottom: 40px; }
.section-header { margin-bottom: 14px; }
.line-reveal { margin-bottom: 18px; }
}
/* ≤360px: iki buton yan yana sigmaz, dikey dizilim geri gelir */
@media (max-width: 360px) {
.actions { flex-direction: column; align-items: stretch; }
.actions .btn { width: 100%; flex: none; white-space: normal; font-size: 13.5px; }
}
/* ── Dokunmatik: hover dönüşümlerini kapat ── */
@media (hover: none) {
.card:hover,
.step:hover,
.project-card:hover,
.blog-card:hover,
.value-item:hover { transform: none; box-shadow: var(--sh-1); }
.btn:hover { box-shadow: var(--sh-2); }
.card:hover .icon { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent); }
}
/* ── Hareket azaltma tercihi ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
.line-reveal { transform: scaleX(1); }
.timeline-item { opacity: 1; transform: none; }
}
/* ── KAYDIRMA TABANLI HAREKET (aşamalı geliştirme) ─────────
Destekleyen tarayıcılarda ana iş parçacığına yük binmez;
desteklemeyenlerde hiçbir şey bozulmaz, sadece görünmez. */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
/* Üst çubuğun alt kenarında okuma ilerlemesi */
.nav::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-soft));
transform: scaleX(0);
transform-origin: left;
animation: scroll-progress linear;
animation-timeline: scroll(root block);
}
@keyframes scroll-progress { to { transform: scaleX(1); } }
/* Süreç çizgisi kaydırdıkça dolar */
.timeline::after {
content: '';
position: absolute;
left: var(--tl-x);
transform: translateX(-50%);
top: calc(var(--tl-top) + var(--tl-dot) / 2);
width: 1px;
height: calc(100% - 24px);
background: linear-gradient(180deg, var(--accent), var(--accent-soft));
transform: translateX(-50%) scaleY(0);
transform-origin: top;
animation: timeline-fill linear both;
animation-timeline: view();
animation-range: entry 42% cover 78%;
}
@keyframes timeline-fill { to { transform: translateX(-50%) scaleY(1); } }
/* Konum --tl-x'ten gelir; kirilim icin ek kural gerekmez */
}
}
/* ── Baskı ── */
@media print {
.nav, .footer, .cta-section, .marquee, .nav-backdrop { display: none !important; }
body { padding-top: 0; color: #000; }
.reveal, .timeline-item { opacity: 1 !important; transform: none !important; }
.card, .glass, .project-card, .blog-card { box-shadow: none; break-inside: avoid; }
}