/* Nexa — modern teknoloji teması: çivit-camgöbeği gradyan, ızgara deseni, cam efektli kartlar, uygulama penceresi */
:root {
    --ink: #0f1130; --text: #474a6b; --muted: #7d80a0;
    --bg: #fff; --bg-alt: #f6f7fe; --line: #e6e8f5; --card: #fff;
    --r: 16px; --r-sm: 10px; --r-lg: 24px; --btn-r: 12px;
    --shadow: 0 12px 34px rgba(79, 70, 229, .08); --shadow-lg: 0 30px 70px rgba(79, 70, 229, .18);
    --head: 'Outfit', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --head-w: 700; --header: 78px;
    --grad: linear-gradient(135deg, #4f46e5, #06b6d4);
}
h1 { font-size: clamp(2.5rem, 5vw, 4.1rem); letter-spacing: -.035em; line-height: 1.05; }
h2, .h2 { letter-spacing: -.03em; }
.kicker { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .14em; }
.btn { font-weight: 700; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 12px 26px rgba(79, 70, 229, .3); }
.btn-primary:hover { color: #fff; filter: brightness(1.08); background: var(--grad); }
.btn-accent { background: var(--grad); }
.btn-accent:hover { filter: brightness(1.08); background: var(--grad); }
.btn-soft { background: var(--bg-alt); color: var(--primary); }
.btn-outline { background: #fff; }

.site-header { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand-mark { background: var(--grad); border-radius: 12px; }
.brand-text strong { letter-spacing: -.03em; font-size: 1.55rem; }
.brand-text small { color: var(--primary); }
.nav-list > li > a { font-weight: 600; font-size: .92rem; }
.nav-list > li > a.on { color: var(--primary); }
.nav-cta { background: var(--ink); }
.nav-cta:hover { background: var(--primary); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 70px 0 50px; background:
    radial-gradient(600px 400px at 85% 10%, rgba(6, 182, 212, .16), transparent 70%),
    radial-gradient(600px 400px at 10% 90%, rgba(79, 70, 229, .14), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px, #fbfbff; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .84rem; color: var(--ink); margin-bottom: 22px; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.hero-visual { position: relative; }
.window { border-radius: var(--r-lg); overflow: hidden; background: #0f1130; box-shadow: var(--shadow-lg); border: 1px solid rgba(79, 70, 229, .2); transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #1a1d45; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { margin-left: 12px; font-size: .78rem; color: #a5a8d0; font-family: ui-monospace, monospace; }
.window img { width: 100%; aspect-ratio: 14 / 10; object-fit: cover; }
.float-card { position: absolute; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.float-card .ic { color: var(--primary); }
.float-card strong { display: block; font-size: .9rem; color: var(--ink); }
.float-card small { color: var(--muted); font-size: .76rem; }
.fc1 { left: -30px; bottom: 40px; } .fc2 { right: -10px; top: -18px; }
.stack { display: flex; align-items: center; gap: 24px; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); }
.stack > span { flex-shrink: 0; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stack-list { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-list b { padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink); font-family: ui-monospace, monospace; }

/* Kartlar */
.card { border: 1px solid var(--line); box-shadow: none; }
.card:hover { box-shadow: var(--shadow-lg); border-color: rgba(79, 70, 229, .3); }
.c-ic { background: var(--grad); color: #fff; border-radius: 12px; }
.svc-card.has-img .c-ic { background: var(--grad); color: #fff; border: 4px solid #fff; }
.c-meta { background: var(--bg-alt); }
.c-more { color: var(--primary); }
.c-badge { background: var(--grad); }
.c-cat { color: var(--accent); }
.c-loc .ic { color: var(--accent); }
.stats-band { background: var(--ink); background-image: radial-gradient(500px 200px at 20% 0, rgba(79, 70, 229, .5), transparent), radial-gradient(500px 200px at 80% 100%, rgba(6, 182, 212, .35), transparent); }
.stat-item strong { background: linear-gradient(135deg, #a5b4fc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps li { border-color: var(--line); }
.st-ic, .f-ic { background: var(--grad); color: #fff; }
.st-no { color: #eceefe; }
.about-media img { border-radius: var(--r-lg); }
.about-badge { background: var(--grad); }
.tick-list li > span { background: var(--grad); }
.quote-card { border: 1px solid var(--line); }
.q-stars { color: #f59e0b; }
.team-card .c-media { aspect-ratio: 1; }
.c-role { color: var(--primary); }
.form-card { border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.faq { border-color: var(--line); }
.faq[open] summary i { background: var(--primary); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }

.page-hero { background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px, #fbfbff; }
.ph-deco { color: rgba(79, 70, 229, .1); }
.filter-pills a.on, .filter-pills a:hover { background: var(--primary); border-color: var(--primary); }
.spec-box { background: var(--bg-alt); border: 1px solid var(--line); }
.cta-band { background: var(--ink); }
.cta-band.has-img::before { background: linear-gradient(90deg, rgba(15, 17, 48, .95), rgba(79, 70, 229, .7)); }
.site-footer { background: var(--ink); }
.site-footer .brand-mark { background: var(--grad); }
.float-bar .fb-main { background: var(--grad); }

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .window { transform: none; }
    .fc1 { left: 10px; } .fc2 { right: 10px; }
    .stack { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .float-card { padding: 9px 12px; }
    .float-card strong { font-size: .8rem; }
    .fc2 { top: -30px; }
}