/* ============================================================
NexTR Digital — Design System
Hand-crafted, premium, warm.
============================================================ */
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* ---------- Tokens ---------- */
:root {
/* Palette — soft midnight (lighter than pure black, hint of violet/blue),
vivid electric coral accent. Premium tech-agency, breathable. */
--canvas: #14141f;
--canvas-2: #1a1a28;
--surface: #20202d;
--surface-2: #27273a;
--ink: #f5f5fa;
--ink-2: #d8d8e2;
--espresso: #0e0e16;
--espresso-2: #18182a;
--muted: #8a8aa0;
--muted-2: #a8a8ba;
--line: #2e2e42;
--line-2: #3a3a52;
--accent: #00e88f;
--accent-2: #5af2b0;
--dark: #0e0e16;
/* Typography */
--font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
--font-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
/* Scale */
--fs-display: clamp(3rem, 8.4vw, 7.5rem);
--fs-h1: clamp(2.5rem, 6vw, 5rem);
--fs-h2: clamp(2.25rem, 4.6vw, 4.25rem);
--fs-h3: clamp(1.5rem, 2.4vw, 2.125rem);
--fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem);
--fs-body: 1rem;
--fs-sm: 0.875rem;
--fs-xs: 0.75rem;
/* Spacing */
--sp-1: 0.5rem;
--sp-2: 1rem;
--sp-3: 1.5rem;
--sp-4: 2rem;
--sp-5: 3rem;
--sp-6: 4rem;
--sp-7: 6rem;
--sp-8: 8rem;
--sp-9: 10rem;
/* Radius */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
/* Easing */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* Misc */
--container: 1320px;
--strip-h: 34px;
--nav-h: 72px;
}
/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
background: var(--canvas);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
font-feature-settings: "ss01", "ss02", "cv11";
line-height: 1.55;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Background subtle warmth (dark theme: vibrant aurora) */
body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(1200px 800px at 85% -10%, rgba(0,232,143, 0.12), transparent 60%),
radial-gradient(1000px 700px at -10% 30%, rgba(140, 90, 220, 0.10), transparent 60%),
radial-gradient(900px 600px at 50% 110%, rgba(60, 110, 220, 0.08), transparent 65%);
pointer-events: none;
z-index: 0;
}
/* Skip link */
.skip-link {
position: absolute;
top: -40px;
left: 16px;
background: var(--ink);
color: var(--canvas);
padding: 8px 12px;
border-radius: var(--r-sm);
z-index: 100;
font-size: var(--fs-sm);
}
.skip-link:focus { top: 16px; }
/* Container */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 56px);
position: relative;
z-index: 1;
}
/* ---------- Typography helpers ---------- */
em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.section-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(15,179,122, 0.12);
}
.section-eyebrow--light { color: rgba(245, 241, 232, 0.7); }
.section-eyebrow--light .dot { background: var(--canvas); box-shadow: 0 0 0 4px rgba(245, 241, 232, 0.12); }
.section-head {
max-width: 880px;
margin-bottom: clamp(48px, 7vw, 96px);
}
.section-head .section-eyebrow { margin-bottom: 20px; }
.section-title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 500;
color: var(--ink);
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.section-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.section-title .line { display: block; }
.section-sub {
margin-top: 24px;
font-size: var(--fs-lead);
color: var(--muted);
line-height: 1.55;
max-width: 680px;
}
/* ---------- Buttons ---------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border-radius: var(--r-pill);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1;
transition: transform 0.4s var(--ease-out), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
white-space: nowrap;
will-change: transform;
}
.btn svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary {
background: var(--ink);
color: var(--canvas);
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 30px -10px rgba(26,23,20,0.4);
}
.btn--primary:hover { background: #000; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px -10px rgba(26,23,20,0.55); }
.btn--ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-2);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn--lg { padding: 17px 28px; font-size: 1rem; }
.btn--sm { padding: 10px 16px; font-size: 0.86rem; }
.btn--block { width: 100%; }
/* ---------- TOP STRIP — Status & Language ---------- */
.top-strip {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 51;
background: var(--ink);
color: var(--canvas);
border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}
.top-strip__inner {
max-width: var(--container);
margin: 0 auto;
padding: 7px clamp(20px, 4vw, 56px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: 0.74rem;
letter-spacing: 0.02em;
}
.top-strip__left {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(245, 241, 232, 0.85);
}
.ts-pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: #2bd16e;
box-shadow: 0 0 0 3px rgba(43, 209, 110, 0.22), 0 0 12px rgba(43, 209, 110, 0.5);
animation: tsPulse 2.2s ease-in-out infinite;
}
.ts-pulse[data-status="open"] {
background: #2bd16e;
box-shadow: 0 0 0 3px rgba(43, 209, 110, 0.22), 0 0 12px rgba(43, 209, 110, 0.5);
animation: tsPulse 2.2s ease-in-out infinite;
}
.ts-pulse[data-status="closed"] {
background: #ff3a3a;
box-shadow: 0 0 0 3px rgba(255,58,58, 0.24), 0 0 10px rgba(255,58,58, 0.55);
animation: tsPulseClosed 3s ease-in-out infinite;
}
@keyframes tsPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(43, 209, 110, 0.22), 0 0 12px rgba(43, 209, 110, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(43, 209, 110, 0.05), 0 0 18px rgba(43, 209, 110, 0.7); }
}
@keyframes tsPulseClosed {
0%, 100% { box-shadow: 0 0 0 3px rgba(255,58,58, 0.24), 0 0 10px rgba(255,58,58, 0.55); }
50% { box-shadow: 0 0 0 6px rgba(255,58,58, 0.06), 0 0 16px rgba(255,58,58, 0.75); }
}
.ts-status { font-weight: 500; color: var(--canvas); }
.ts-sep { opacity: 0.3; padding: 0 2px; }
.ts-promise { color: rgba(245, 241, 232, 0.7); }
.top-strip__right {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ts-lang {
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(245, 241, 232, 0.5);
padding: 3px 6px;
border-radius: 4px;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.ts-lang:hover { color: var(--canvas); }
.ts-lang--active {
color: var(--canvas);
background: rgba(245, 241, 232, 0.1);
}
.ts-lang-sep { color: rgba(245, 241, 232, 0.2); font-size: 0.7rem; }
/* ---------- Navigation ---------- */
.nav {
position: fixed;
top: 34px; left: 0; right: 0; /* sit below top-strip */
z-index: 50;
transition: backdrop-filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, top 0.3s ease;
border-bottom: 1px solid transparent;
}
.nav--scrolled {
background: rgba(245, 241, 232, 0.78);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom-color: var(--line);
}
.nav__container {
max-width: var(--container);
margin: 0 auto;
padding: 14px clamp(20px, 4vw, 56px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav__logo {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
text-decoration: none;
}
.nav__logo-mark {
position: relative;
display: inline-flex;
width: 36px; height: 36px;
color: var(--ink);
transition: transform 0.6s var(--ease-out);
border-radius: 10px;
overflow: visible;
}
.nav__logo-mark svg {
width: 100%; height: 100%;
border-radius: 10px;
display: block;
filter: drop-shadow(0 4px 12px rgba(26, 23, 20, 0.18)) drop-shadow(0 1px 2px rgba(26, 23, 20, 0.12));
}
.nav__logo-mark::before {
content: "";
position: absolute;
inset: 1px;
border-radius: 9px;
background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, transparent 50%);
pointer-events: none;
}
.nav__logo-glow {
position: absolute;
inset: -8px;
background: radial-gradient(circle, rgba(15,179,122, 0.55), transparent 70%);
filter: blur(12px);
opacity: 0;
z-index: -1;
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
border-radius: 50%;
}
.nav__logo:hover .nav__logo-mark { transform: rotate(-8deg) scale(1.05); }
.nav__logo:hover .nav__logo-glow { opacity: 1; transform: scale(1.3); }
.nav__logo-wordmark {
display: flex;
flex-direction: column;
line-height: 1;
gap: 5px;
}
.nav__logo-name {
font-family: var(--font-display);
font-size: 1.28rem;
font-weight: 500;
letter-spacing: -0.028em;
color: var(--ink);
line-height: 1;
font-variation-settings: "wdth" 96, "opsz" 24;
}
.nav__logo-dot {
color: var(--accent);
display: inline-block;
transition: transform 0.5s var(--ease-out);
}
.nav__logo:hover .nav__logo-dot {
transform: translateY(-3px) scale(1.2);
animation: dotBounce 0.6s var(--ease-out);
}
@keyframes dotBounce {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.3); }
100% { transform: translateY(-3px) scale(1.2); }
}
/* Tag: DIGITAL with flanking lines */
.nav__logo-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.34em;
color: var(--muted);
line-height: 1;
text-transform: uppercase;
padding-left: 1px;
transition: color 0.3s ease;
}
.nav__logo-tag-text {
display: inline-block;
transition: letter-spacing 0.5s var(--ease-out), color 0.3s ease;
}
.nav__logo-tag-line {
display: inline-block;
width: 12px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--muted-2) 50%, transparent);
transition: width 0.5s var(--ease-out), background 0.3s ease;
}
.nav__logo-tag-line:first-child { display: none; } /* show only the right line */
.nav__logo:hover .nav__logo-tag { color: var(--ink-2); }
.nav__logo:hover .nav__logo-tag-text { letter-spacing: 0.42em; }
.nav__logo:hover .nav__logo-tag-line { width: 20px; background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); }
.nav__menu {
display: flex;
align-items: center;
gap: 2px;
background: rgba(255, 252, 245, 0.7);
border: 1px solid var(--line);
padding: 5px;
border-radius: var(--r-pill);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 16px -8px rgba(26,23,20,0.08);
}
.nav__link {
position: relative;
padding: 8px 16px 9px;
border-radius: var(--r-pill);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink-2);
transition: color 0.3s ease;
z-index: 1;
}
.nav__link::before {
content: "";
position: absolute;
inset: 0;
background: var(--ink);
border-radius: var(--r-pill);
opacity: 0;
transform: scale(0.92);
transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
z-index: -1;
}
.nav__link::after {
content: "";
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
transition: transform 0.4s var(--ease-out);
}
.nav__link:hover {
color: var(--canvas);
}
.nav__link:hover::before {
opacity: 1;
transform: scale(1);
}
.nav__link.is-active {
color: var(--ink);
}
.nav__link.is-active::after {
transform: translateX(-50%) scale(1);
}
.nav__actions {
display: flex;
align-items: center;
gap: 12px;
}
.nav__toggle {
display: none;
width: 40px; height: 40px;
border-radius: var(--r-md);
border: 1px solid var(--line-2);
position: relative;
}
.nav__toggle span {
position: absolute;
left: 10px;
width: 20px; height: 1.5px;
background: var(--ink);
transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }
.nav__mobile {
display: none;
flex-direction: column;
gap: 4px;
padding: 20px clamp(20px, 4vw, 56px) 28px;
background: rgba(245, 241, 232, 0.96);
backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
}
.nav__mobile-link {
padding: 16px 0;
font-size: 1.1rem;
font-weight: 500;
border-bottom: 1px solid var(--line);
}
.nav__mobile .btn { margin-top: 16px; }
/* ---------- HERO — CINEMATIC ---------- */
.hero {
position: relative;
min-height: 100vh;
padding-top: calc(var(--strip-h) + var(--nav-h) + 32px);
padding-bottom: 140px;
display: flex;
align-items: stretch;
overflow: hidden;
isolation: isolate;
}
.hero__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.85;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(26,23,20,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,23,20,0.04) 1px, transparent 1px);
background-size: 90px 90px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 80%);
opacity: 0.7;
}
.hero__glow {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.55;
will-change: transform;
}
.hero__glow--1 {
width: 580px; height: 580px;
top: -160px; left: -120px;
background: radial-gradient(circle, rgba(15,179,122, 0.32), transparent 70%);
animation: floatA 22s ease-in-out infinite;
}
.hero__glow--2 {
width: 700px; height: 700px;
top: 30%; right: -200px;
background: radial-gradient(circle, rgba(140,235,200, 0.45), transparent 70%);
animation: floatB 26s ease-in-out infinite;
}
@keyframes floatA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, -40px) scale(1.06); }
}
@keyframes floatB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, 30px) scale(0.94); }
}
.hero__orb {
position: absolute;
width: 720px;
height: 720px;
right: -8%;
top: 8%;
pointer-events: none;
will-change: transform;
filter: blur(0.5px);
opacity: 0.85;
animation: orbSpin 80s linear infinite;
}
@keyframes orbSpin {
to { transform: rotate(360deg); }
}
.hero__noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.07;
mix-blend-mode: multiply;
}
.hero__inner {
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 0;
align-content: stretch;
width: 100%;
z-index: 2;
}
.hero__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: clamp(48px, 9vh, 96px);
flex-wrap: wrap;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 9px 16px 9px 14px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.6);
border-radius: var(--r-pill);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--ink-2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap;
max-width: 100%;
}
.hero__eyebrow .he-label { display: inline-flex; align-items: baseline; gap: 6px; }
.hero__eyebrow .he-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.86rem;
letter-spacing: -0.02em;
color: var(--accent);
line-height: 1;
padding-right: 2px;
border-right: 1px solid var(--line-2);
padding-right: 8px;
margin-right: 2px;
}
.hero__eyebrow .he-sep { opacity: 0.3; padding: 0 4px; font-weight: 400; }
.hero__eyebrow .he-loc {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink-2);
}
.hero__eyebrow .he-flag {
display: inline-flex;
border-radius: 3px;
overflow: hidden;
border: 1px solid rgba(26,23,20,0.14);
box-shadow: 0 1px 3px rgba(26,23,20,0.1);
flex-shrink: 0;
transition: transform 0.4s var(--ease-out);
}
.hero__eyebrow:hover .he-flag--tr { transform: scale(1.08); }
.hero__eyebrow .he-flag svg { width: 100%; height: 100%; display: block; }
.hero__eyebrow .he-flag--tr { width: 32px; height: 22px; border-radius: 4px; box-shadow: 0 2px 6px rgba(227, 10, 23, 0.18), 0 1px 3px rgba(26,23,20,0.12); }
.hero__eyebrow .he-flag--us { width: 18px; height: 13px; opacity: 0.75; }
.hero__eyebrow .he-cn { letter-spacing: 0.16em; font-weight: 500; }
.hero__eyebrow .he-cn--us { opacity: 0.7; font-size: 0.62rem; }
.hero__eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(15,179,122, 0.14);
animation: pulse 2.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(15,179,122, 0.14); }
50% { box-shadow: 0 0 0 8px rgba(15,179,122, 0.04); }
}
.hero__locations {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-feature-settings: "tnum";
}
.hero__locations .sep { opacity: 0.35; }
/* ============================================================
HERO TITLE — Kinetic premium display
Escalating size + gradient on serif climax + smooth reveal
============================================================ */
.hero__title {
font-family: var(--font-display);
font-size: clamp(2.6rem, 8.6vw, 8.2rem);
line-height: 0.9;
letter-spacing: -0.05em;
font-weight: 500;
font-variation-settings: "wdth" 96, "opsz" 96;
color: var(--ink);
margin: 0;
position: relative;
/* subtle vertical accent on the left edge */
padding-left: clamp(14px, 1.4vw, 22px);
}
.hero__title::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.2em;
width: 2px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 30%, transparent 100%);
border-radius: 2px;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
transition: opacity 0.8s 0.6s ease, transform 1.2s 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__title.is-revealed::before {
opacity: 1;
transform: scaleY(1);
}
.hero__title .line {
display: block;
padding-bottom: 0.02em;
}
.hero__title .line--accent {
margin-top: 0.06em;
letter-spacing: -0.03em;
font-size: 1.08em; /* climactic line — visually bigger */
}
.hero__title .word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding: 0.14em 0 0.1em;
margin: -0.14em 0.22em -0.1em 0;
line-height: 0.9;
}
.hero__title .word-inner {
display: inline-block;
transform: translateY(110%) skewY(3deg) scale(1.04);
opacity: 0;
transition:
transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
.hero__title.is-revealed .word-inner {
transform: translateY(0) skewY(0) scale(1);
opacity: 1;
}
/* Italic serif climax line — gradient text fill */
.hero__title em {
font-family: var(--font-serif);
font-weight: 400;
font-style: italic;
letter-spacing: -0.018em;
line-height: 0.88;
font-size: 1em;
background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 38%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Fallback */
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero__lower {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: end;
margin-top: clamp(40px, 8vh, 88px);
}
.hero__sub {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--muted);
max-width: 580px;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }
/* Hero proof list — concrete trust signals */
.hero__proof {
list-style: none;
margin: 18px 0 0;
padding: 16px 18px;
background: linear-gradient(180deg, rgba(255,252,245,0.85) 0%, rgba(247,240,226,0.7) 100%);
border: 1px solid var(--line);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 9px;
max-width: 580px;
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 16px -10px rgba(26,23,20,0.1);
}
.hero__proof-item {
display: grid;
grid-template-columns: 24px 1fr;
align-items: center;
gap: 11px;
font-size: 0.93rem;
line-height: 1.4;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.hero__proof-item strong { font-weight: 600; color: var(--ink); }
.hero__proof-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 7px;
background: var(--ink);
color: var(--canvas);
flex-shrink: 0;
box-shadow: 0 2px 6px -2px rgba(26,23,20,0.25);
}
.hero__proof-icon svg { width: 13px; height: 13px; }
.hero__proof-item:nth-child(1) .hero__proof-icon { background: var(--accent); color: var(--canvas); }
.hero__proof-item:nth-child(2) .hero__proof-icon { background: var(--ink); }
.hero__proof-item:nth-child(3) .hero__proof-icon { background: #e30a17; color: #fff; }
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-self: end;
}
.btn .play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--ink);
color: var(--canvas);
}
.btn .play svg { width: 8px; height: 8px; }
.btn--ghost .play { background: var(--ink); color: var(--canvas); }
.btn__ic, .btn__sparkle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px; height: 17px;
color: rgba(245, 241, 232, 0.92);
transition: transform 0.4s var(--ease-out);
}
.btn__ic svg, .btn__sparkle svg { width: 100%; height: 100%; }
.btn--primary:hover .btn__ic,
.btn--primary:hover .btn__sparkle { transform: scale(1.08) rotate(-4deg); }
.btn__time {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
color: var(--accent);
}
.btn__time svg { width: 100%; height: 100%; }
/* ========== Hero service chips — premium conversion teasers ========== */
.hero__chips {
grid-column: 1 / -1; /* span across hero__lower grid */
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 32px;
max-width: 880px;
}
.hero-chip {
/* Stagger reveal */
opacity: 0;
transform: translateY(14px);
animation: chipIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(0.1s + var(--chip-i, 0) * 0.08s);
position: relative;
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 8px;
background: linear-gradient(180deg, rgba(255, 252, 245, 0.92) 0%, rgba(247, 240, 226, 0.78) 100%);
border: 1px solid rgba(216, 205, 184, 0.7);
border-radius: 14px;
color: var(--ink);
font-family: var(--font-sans);
text-decoration: none;
cursor: pointer;
overflow: hidden;
isolation: isolate;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 16px -8px rgba(26, 23, 20, 0.08);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.4s ease, background 0.35s ease;
}
@keyframes chipIn {
to { opacity: 1; transform: translateY(0); }
}
/* Shimmer sweep on hover */
.hero-chip::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
transform: translateX(-110%);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 1;
}
.hero-chip:hover::before {
transform: translateX(110%);
}
/* Subtle glow underlay per-chip in brand accent on hover */
.hero-chip::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: var(--chip-glow, radial-gradient(80% 100% at 0% 50%, rgba(15,179,122, 0.18), transparent 70%));
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.hero-chip:hover::after { opacity: 1; }
.hero-chip:hover {
transform: translateY(-3px);
border-color: rgba(15,179,122, 0.4);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 18px 36px -16px rgba(26, 23, 20, 0.22),
0 0 0 1px rgba(15,179,122, 0.08);
}
/* Icon */
.hero-chip__icon {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 11px;
background: var(--chip-icon-bg, rgba(15,179,122, 0.12));
color: var(--chip-icon-color, var(--accent));
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
animation: chipIconBreathe 4s ease-in-out infinite;
animation-delay: calc(var(--chip-i, 0) * 0.4s);
}
.hero-chip__icon svg { width: 17px; height: 17px; }
@keyframes chipIconBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.hero-chip:hover .hero-chip__icon {
transform: scale(1.08) rotate(-6deg);
background: var(--ink);
color: var(--canvas);
animation-play-state: paused;
}
/* Per-chip color palette */
.hero-chip:nth-child(1) { --chip-icon-bg: rgba(15,179,122, 0.14); --chip-icon-color: #0fb37a; --chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(15,179,122, 0.2), transparent 70%); }
.hero-chip:nth-child(2) { --chip-icon-bg: rgba(54, 80, 130, 0.12); --chip-icon-color: #3a5586; --chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(54, 80, 130, 0.18), transparent 70%); }
.hero-chip:nth-child(3) { --chip-icon-bg: rgba(184, 130, 60, 0.18); --chip-icon-color: #4a7a26; --chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(140,235,200, 0.3), transparent 70%); }
.hero-chip:nth-child(4) { --chip-icon-bg: rgba(27, 130, 80, 0.14); --chip-icon-color: #1b8550; --chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(27, 130, 80, 0.18), transparent 70%); }
/* Body (text + sub) */
.hero-chip__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hero-chip__text {
font-size: 0.92rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-chip__sub {
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.005em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Arrow */
.hero-chip__arrow {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(26, 23, 20, 0.06);
color: var(--ink);
transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
}
.hero-chip__arrow svg { width: 9px; height: 9px; }
.hero-chip:hover .hero-chip__arrow {
background: var(--accent);
color: var(--canvas);
transform: translateX(2px) rotate(0);
}
.hero__ticker {
margin-top: clamp(56px, 10vh, 104px);
padding-top: 28px;
border-top: 1px solid var(--line);
}
.hero__ticker-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 32px;
}
.hero__meta-item {
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
}
.hero__meta-num {
font-size: 1.65rem;
font-weight: 500;
letter-spacing: -0.035em;
color: var(--ink);
font-feature-settings: "tnum";
line-height: 1;
}
.hero__meta-label {
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.hero__meta-sep {
width: 1px; height: 36px;
background: var(--line-2);
flex-shrink: 0;
}
/* Mobile marquee mode (set by JS at <820px) */
.hero__ticker.is-marquee-host,
body .hero__ticker { /* future-friendly */ }
.hero__scroll {
position: absolute;
bottom: 28px;
left: clamp(20px, 4vw, 56px);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--muted);
z-index: 3;
writing-mode: horizontal-tb;
}
.hero__scroll-line {
width: 50px; height: 1px;
background: linear-gradient(to right, var(--muted), transparent);
position: relative;
overflow: hidden;
}
.hero__scroll-line::after {
content: "";
position: absolute;
left: -30px; top: 0;
height: 1px; width: 30px;
background: var(--ink);
animation: scrollRight 2.4s ease-in-out infinite;
}
@keyframes scrollRight {
0% { left: -30px; opacity: 0; }
50% { opacity: 1; }
100% { left: 50px; opacity: 0; }
}
.hero__live {
position: absolute;
bottom: 28px;
right: clamp(20px, 4vw, 56px);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(255,255,255,0.55);
border: 1px solid var(--line);
border-radius: var(--r-pill);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 0.78rem;
color: var(--ink-2);
z-index: 3;
font-feature-settings: "tnum";
}
.live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #1b9d4f;
box-shadow: 0 0 0 4px rgba(27, 157, 79, 0.18);
animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(27, 157, 79, 0.18); }
50% { box-shadow: 0 0 0 8px rgba(27, 157, 79, 0.05); }
}
/* ---------- LOGOS ---------- */
.logos {
padding: 80px 0 96px;
background: linear-gradient(180deg, #fbf7ec 0%, #faf5e7 100%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
/* Isolate the section — perf hint to browser */
contain: layout style paint;
}
.logos__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
margin-bottom: 44px;
padding: 0 16px;
}
.logos__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
padding: 6px 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-pill);
}
.logos__eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #1b9d4f;
box-shadow: 0 0 0 3px rgba(27, 157, 79, 0.18);
animation: pulse 2.2s ease-in-out infinite;
}
.logos__title {
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.65rem);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.25;
color: var(--ink);
max-width: 760px;
}
.logos__title em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
letter-spacing: -0.005em;
font-size: 1.12em;
padding: 0 2px;
}
@media (max-width: 820px) {
.logos { padding: 40px 0 56px; }
.logos__header { gap: 12px; margin-bottom: 28px; }
.logos__eyebrow { font-size: 0.62rem; letter-spacing: 0.16em; padding: 5px 11px; }
.logos__title { font-size: clamp(1.05rem, 4.8vw, 1.35rem); line-height: 1.3; }
}
.logos__title span { color: var(--ink); font-weight: 500; }
.logos__marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
/* Isolate marquee area — prevent paint cascade outside */
contain: layout style paint;
}
.logos__track {
display: flex;
gap: 72px;
width: max-content;
align-items: center;
/* GPU layer + perf hints (animation disabled by default, JS turns it on after fonts settle) */
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.logos__track.is-marquee {
animation: marquee 50s linear infinite;
}
.logos__marquee:hover .logos__track.is-marquee { animation-play-state: paused; }
.logo {
flex-shrink: 0;
color: var(--muted-2);
opacity: 0.7;
transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
display: inline-flex;
align-items: center;
}
.logo:hover { color: var(--ink); opacity: 1; transform: scale(1.05); }
.logo svg { height: 30px; width: auto; display: block; }
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* ============================================================
COMPARISON — NexTR vs Klasik Ajanslar
Compact side-by-side comparison, conversion-focused
============================================================ */
.compare {
padding: clamp(80px, 12vw, 160px) 0;
background: linear-gradient(160deg, #efe4d0 0%, #ebdcbf 50%, #eee3cd 100%);
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
position: relative;
overflow: hidden;
isolation: isolate;
}
.compare::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 450px at 12% 0%, rgba(15,179,122, 0.06), transparent 60%),
radial-gradient(600px 400px at 88% 100%, rgba(140,235,200, 0.18), transparent 60%);
pointer-events: none;
z-index: 0;
}
.compare .container { position: relative; z-index: 1; }
.compare__grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 16px;
align-items: stretch;
}
.compare__col {
border-radius: var(--r-xl);
padding: 28px 26px;
display: flex;
flex-direction: column;
gap: 22px;
position: relative;
overflow: hidden;
transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
}
.compare__col--us {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--line-2);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 30px 60px -30px rgba(26, 23, 20, 0.22),
0 12px 28px -14px rgba(15,179,122, 0.12);
}
.compare__col--us::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.compare__col--them {
background: var(--canvas-2);
border: 1px solid var(--line);
opacity: 0.92;
}
.compare__col-head {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.compare__mark {
width: 36px; height: 36px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
overflow: hidden;
}
.compare__mark svg { width: 100%; height: 100%; display: block; }
.compare__mark--neutral {
background: var(--line-2);
color: var(--muted);
font-family: var(--font-serif);
font-style: italic;
font-size: 1.4rem;
font-weight: 400;
}
.compare__col-title {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.compare__col-title strong {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.1;
}
.compare__col-title span {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.005em;
}
.compare__col--them .compare__col-title strong { color: var(--muted); font-weight: 500; }
.compare__col--them .compare__col-title span { color: var(--muted-2); }
.compare__badge {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.compare__badge svg { width: 14px; height: 14px; }
.compare__badge--good {
background: #1b8550;
color: var(--canvas);
box-shadow: 0 4px 10px -4px rgba(27, 133, 80, 0.45);
}
.compare__badge--bad {
background: rgba(26, 23, 20, 0.08);
color: var(--muted);
}
.compare__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.compare__list li {
display: grid;
grid-template-columns: 22px 1fr;
align-items: flex-start;
gap: 11px;
font-size: 0.95rem;
line-height: 1.4;
color: var(--ink-2);
}
.compare__col--them .compare__list li {
color: var(--muted);
text-decoration: line-through 1px;
text-decoration-color: rgba(26, 23, 20, 0.15);
text-underline-offset: 2px;
}
.compare__list li strong {
font-weight: 600;
color: var(--ink);
}
.compare__ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 6px;
flex-shrink: 0;
margin-top: 1px;
}
.compare__ic svg { width: 12px; height: 12px; }
.compare__ic--check {
background: rgba(27, 133, 80, 0.14);
color: #1b8550;
}
.compare__ic--x {
background: rgba(26, 23, 20, 0.06);
color: var(--muted-2);
}
/* Bottom CTA */
.compare__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 44px;
text-align: center;
}
.compare__cta .btn { padding: 18px 30px; font-size: 1.02rem; }
.compare__cta-note {
font-size: 0.84rem;
color: var(--muted);
letter-spacing: 0.01em;
}
/* Mobile — stack, NexTR on top */
@media (max-width: 820px) {
.compare { padding: 60px 0 70px; }
.compare__grid { grid-template-columns: 1fr; gap: 14px; }
.compare__col { padding: 22px 20px; gap: 16px; border-radius: 18px; }
.compare__col-head { padding-bottom: 14px; }
.compare__col-title strong { font-size: 1.05rem; }
.compare__col-title span { font-size: 0.74rem; }
.compare__list { gap: 10px; }
.compare__list li { font-size: 0.88rem; gap: 10px; }
.compare__ic { width: 20px; height: 20px; }
.compare__ic svg { width: 11px; height: 11px; }
.compare__cta { margin-top: 28px; }
}
/* ============================================================
SERVICES — Horizontal Carousel (user-controlled, no scroll-pin)
============================================================ */
.svc {
padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 9vw, 110px);
background: var(--canvas-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
/* Hint + arrows row above scroller */
.svc__head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.svc__hint {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.svc__hint svg { width: 18px; height: 18px; opacity: 0.7; }
.svc__arrows {
display: inline-flex;
align-items: center;
gap: 8px;
}
.svc__arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-out), border-color 0.25s ease, opacity 0.25s ease;
}
.svc__arrow svg { width: 14px; height: 14px; }
.svc__arrow:hover {
background: var(--ink);
color: var(--canvas);
border-color: var(--ink);
}
.svc__arrow:active { transform: scale(0.94); }
.svc__arrow[disabled] {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* Viewport + track */
.svc__viewport {
/* break out of container so cards can scroll edge to edge */
margin-left: calc((100vw - min(100vw, var(--container))) / 2 * -1);
margin-right: calc((100vw - min(100vw, var(--container))) / 2 * -1);
/* hard fallback if calc above misbehaves */
margin-inline: calc(50% - 50vw);
position: relative;
}
.svc__track {
display: flex;
gap: 16px;
padding: 8px clamp(20px, 4vw, 56px) 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: clamp(20px, 4vw, 56px);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
}
.svc__track::-webkit-scrollbar { height: 6px; }
.svc__track::-webkit-scrollbar-track { background: transparent; }
.svc__track::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 3px;
}
.svc__track::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
/* Card */
.svc-card {
flex: 0 0 360px;
scroll-snap-align: start;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 26px 24px 24px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.3s ease;
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 24px -16px rgba(26,23,20,0.12);
}
.svc-card:hover {
transform: translateY(-4px);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 28px 50px -24px rgba(26,23,20,0.22);
border-color: var(--line-2);
}
.svc-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--ink);
border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.svc-card[data-tone="accent"]::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.svc-card[data-tone="green"]::before { background: linear-gradient(90deg, #1b8550, #2bd16e); }
.svc-card[data-tone="amber"]::before { background: linear-gradient(90deg, #84c44a, #9be5b8); }
.svc-card[data-tone="ink"]::before { background: linear-gradient(90deg, #1a1714, #3b2e22); }
.svc-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.svc-card__num {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.4rem;
color: var(--muted-2);
letter-spacing: -0.02em;
line-height: 1;
}
.svc-card[data-tone="accent"] .svc-card__num { color: var(--accent); }
.svc-card[data-tone="green"] .svc-card__num { color: #1b8550; }
.svc-card[data-tone="amber"] .svc-card__num { color: #84c44a; }
.svc-card__icon {
width: 42px; height: 42px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--canvas-2);
color: var(--ink);
flex-shrink: 0;
border: 1px solid var(--line);
margin-left: auto;
}
.svc-card[data-tone="accent"] .svc-card__icon { background: rgba(15,179,122,0.12); color: var(--accent); border-color: rgba(15,179,122,0.2); }
.svc-card[data-tone="green"] .svc-card__icon { background: rgba(27,133,80,0.12); color: #1b8550; border-color: rgba(27,133,80,0.2); }
.svc-card[data-tone="amber"] .svc-card__icon { background: rgba(155,229,184,0.18); color: #4a7a26; border-color: rgba(132,196,74,0.25); }
.svc-card[data-tone="ink"] .svc-card__icon { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.svc-card__icon svg { width: 22px; height: 22px; }
.svc-card__tag {
position: absolute;
top: 14px;
right: 14px;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: 4px 9px;
background: var(--canvas);
border: 1px solid var(--line);
border-radius: var(--r-pill);
}
.svc-card[data-tone="accent"] .svc-card__tag { background: rgba(15,179,122,0.1); color: var(--accent); border-color: rgba(15,179,122,0.2); }
.svc-card[data-tone="green"] .svc-card__tag.svc-card__tag--new { background: #1b8550; color: var(--canvas); border-color: #1b8550; }
.svc-card[data-tone="ink"] .svc-card__tag.svc-card__tag--new { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.svc-card__title {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--ink);
margin-top: 6px;
}
.svc-card__hook {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
line-height: 1.35;
color: var(--muted);
letter-spacing: -0.005em;
margin-top: -2px;
}
.svc-card__promise {
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-2);
}
.svc-card__promise strong { color: var(--ink); font-weight: 600; }
.svc-card__list {
list-style: none;
margin: 6px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 8px;
}
.svc-card__list li {
position: relative;
padding-left: 20px;
font-size: 0.86rem;
line-height: 1.4;
color: var(--ink-2);
}
.svc-card__list li::before {
content: "";
position: absolute;
left: 0; top: 0.5em;
width: 12px; height: 1.5px;
background: var(--accent);
border-radius: 1px;
}
.svc-card[data-tone="green"] .svc-card__list li::before { background: #1b8550; }
.svc-card[data-tone="amber"] .svc-card__list li::before { background: #84c44a; }
.svc-card[data-tone="ink"] .svc-card__list li::before { background: var(--ink); }
.svc-card__cta {
margin-top: auto;
padding-top: 16px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
padding: 12px 16px;
border-radius: var(--r-pill);
border: 1px solid var(--line-2);
background: var(--canvas);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.svc-card__cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.svc-card__cta:hover {
background: var(--ink);
color: var(--canvas);
border-color: var(--ink);
}
.svc-card__cta:hover svg { transform: translateX(3px); }
/* Dots indicator */
.svc__dots {
display: inline-flex;
gap: 8px;
margin-top: 6px;
justify-content: center;
width: 100%;
}
.svc__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--line-2);
transition: background-color 0.3s ease, width 0.4s var(--ease-out);
cursor: pointer;
}
.svc__dot.is-active {
background: var(--accent);
width: 22px;
border-radius: 3px;
}
/* === Guarantee bar (4 trust signals above carousel) === */
.svc__bar {
list-style: none;
margin: 24px 0 32px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 10px -6px rgba(26,23,20,0.06);
}
.svc__bar li {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.83rem;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.svc__bar li svg {
width: 18px; height: 18px;
color: var(--accent);
flex-shrink: 0;
}
.svc__bar li strong { font-weight: 600; color: var(--ink); }
/* === Card: paket label (Paket · A) === */
.svc-card__label {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.86rem;
color: var(--muted);
letter-spacing: 0.02em;
margin-top: 8px;
}
.svc-card[data-tone="accent"] .svc-card__label { color: var(--accent); }
.svc-card[data-tone="green"] .svc-card__label { color: #1b8550; }
.svc-card[data-tone="amber"] .svc-card__label { color: #4a7a26; }
/* === Card: "Bu pakette ne var?" block === */
.svc-card__includes {
background: var(--canvas-2);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-card__includes-head {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.svc-card__includes .svc-card__list {
margin: 0;
padding: 0;
border-top: 0;
gap: 7px;
}
.svc-card__includes .svc-card__list li {
font-size: 0.84rem;
padding-left: 18px;
}
.svc-card__includes .svc-card__list li::before {
width: 10px;
height: 1.5px;
top: 0.55em;
}
/* === Card: guarantee badge === */
.svc-card__guarantee {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(27,133,80,0.1), rgba(27,133,80,0.04));
border: 1px solid rgba(27,133,80,0.25);
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
color: #1b6f44;
letter-spacing: -0.005em;
align-self: flex-start;
}
.svc-card__guarantee svg {
width: 14px; height: 14px;
color: #1b8550;
flex-shrink: 0;
}
/* === Card: hot tag variant === */
.svc-card__tag--hot {
background: var(--accent) !important;
color: var(--canvas) !important;
border-color: var(--accent) !important;
box-shadow: 0 4px 10px -4px rgba(15,179,122, 0.45);
}
.svc-card[data-tone="accent"] .svc-card__tag--hot { background: var(--accent) !important; color: var(--canvas) !important; }
/* === SEE-ALL card (last card in carousel) === */
.svc-card--all {
background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 60%, var(--espresso) 100%);
color: var(--canvas);
border-color: var(--ink);
position: relative;
overflow: hidden;
}
.svc-card--all::before {
background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}
.svc-card--all::after {
content: "";
position: absolute;
top: -30%;
right: -20%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(15,179,122,0.4), transparent 60%);
filter: blur(40px);
pointer-events: none;
}
.svc-card--all .svc-card__num {
font-size: 2rem;
color: var(--accent);
font-style: normal;
font-family: var(--font-display);
}
.svc-card--all .svc-card__icon {
background: rgba(245, 241, 232, 0.1);
color: var(--canvas);
border-color: rgba(245, 241, 232, 0.15);
}
.svc-card--all .svc-card__title { color: var(--canvas); margin-top: 14px; }
.svc-card__promise--lg {
font-size: 1rem;
line-height: 1.5;
color: rgba(245, 241, 232, 0.78);
}
.svc-card--all .svc-card__promise strong { color: var(--canvas); }
.svc-card__chips {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0;
padding: 0;
}
.svc-card__chips li {
font-size: 0.74rem;
padding: 6px 11px;
background: rgba(245, 241, 232, 0.08);
border: 1px solid rgba(245, 241, 232, 0.14);
border-radius: var(--r-pill);
color: rgba(245, 241, 232, 0.85);
letter-spacing: -0.005em;
}
.svc-card__cta--filled {
background: var(--accent) !important;
color: var(--canvas) !important;
border-color: var(--accent) !important;
justify-content: center !important;
}
.svc-card__cta--filled:hover {
background: var(--accent-2) !important;
border-color: var(--accent-2) !important;
color: var(--canvas) !important;
}
/* === BOTTOM CTA SECTION (Size özel paket) === */
.svc__bottom {
margin-top: 48px;
background: linear-gradient(160deg, var(--surface) 0%, var(--canvas) 100%);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 0;
overflow: hidden;
position: relative;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 30px 60px -30px rgba(26,23,20,0.18);
}
.svc__bottom::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.svc__bottom-inner {
display: grid;
grid-template-columns: 1.4fr auto;
align-items: center;
gap: 40px;
padding: 36px 38px;
}
.svc__bottom-copy {
display: flex;
flex-direction: column;
gap: 12px;
}
.svc__bottom-eye {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.svc__bottom-eye .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(15,179,122, 0.14);
animation: pulse 2.2s ease-in-out infinite;
}
.svc__bottom-copy h3 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--ink);
}
.svc__bottom-copy h3 em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.svc__bottom-copy p {
font-size: 1rem;
line-height: 1.55;
color: var(--muted);
}
.svc__bottom-copy p strong { color: var(--ink); font-weight: 600; }
.svc__bottom-perks {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.svc__bottom-perks li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.86rem;
color: var(--ink-2);
font-weight: 500;
}
.svc__bottom-perks li svg {
width: 14px; height: 14px;
color: #1b8550;
flex-shrink: 0;
}
.svc__bottom-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.svc__bottom-action .btn { white-space: nowrap; }
.svc__bottom-meta {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
color: var(--muted);
}
.svc__bottom-meta svg { width: 13px; height: 13px; color: var(--muted); }
/* === Mobile responsive — bottom CTA === */
@media (max-width: 820px) {
.svc__bar {
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin: 18px 0 22px;
padding: 12px 14px;
}
.svc__bar li { font-size: 0.76rem; }
.svc__bar li svg { width: 16px; height: 16px; }
.svc-card__includes { padding: 12px 13px; }
.svc-card__includes .svc-card__list li { font-size: 0.8rem; }
.svc-card__guarantee { font-size: 0.72rem; padding: 7px 11px; }
.svc-card__label { font-size: 0.8rem; }
.svc-card__chips li { font-size: 0.68rem; padding: 5px 9px; }
.svc__bottom { margin-top: 32px; border-radius: 18px; }
.svc__bottom-inner {
grid-template-columns: 1fr;
gap: 22px;
padding: 26px 22px;
}
.svc__bottom-action { align-items: stretch; }
.svc__bottom-action .btn { width: 100%; justify-content: center; }
.svc__bottom-meta { justify-content: center; }
.svc__bottom-copy h3 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.svc__bottom-perks { gap: 10px 14px; }
.svc__bottom-perks li { font-size: 0.8rem; }
}
/* Hide legacy scroll-pinned section completely */
.service-pin--hidden,
.service-pin[hidden] { display: none !important; }
/* Mobile carousel — cards slightly smaller, edge padding tighter */
@media (max-width: 820px) {
.svc__hint { font-size: 0.7rem; letter-spacing: 0.12em; }
.svc__arrows { display: none; } /* mobile: native swipe handles navigation */
.svc__track { gap: 12px; padding: 6px clamp(20px, 4vw, 56px) 22px; }
.svc-card { flex-basis: min(310px, 86vw); padding: 22px 20px 20px; gap: 12px; border-radius: 18px; }
.svc-card__title { font-size: 1.22rem; }
.svc-card__hook { font-size: 0.92rem; }
.svc-card__promise { font-size: 0.88rem; }
.svc-card__list li { font-size: 0.82rem; }
.svc-card__icon { width: 38px; height: 38px; }
.svc-card__icon svg { width: 20px; height: 20px; }
}
/* ---------- SERVICES — SCROLL-PINNED ---------- */
.service-pin {
background: var(--canvas-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
}
.service-pin__intro {
padding: clamp(80px, 12vw, 160px) 0 clamp(40px, 6vw, 80px);
}
.service-pin__stage {
position: relative;
min-height: 100vh;
height: 100vh;
display: flex;
align-items: center;
}
.service-pin__layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 64px;
width: 100%;
align-items: center;
padding-block: clamp(60px, 8vh, 100px);
}
.service-pin__side {
display: flex;
flex-direction: column;
gap: 28px;
position: relative;
}
.service-pin__count {
font-family: var(--font-serif);
font-style: italic;
font-size: 3rem;
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.service-pin__count-now { color: var(--accent); }
.service-pin__count-sep { color: var(--muted-2); font-size: 1.6rem; }
.service-pin__count-tot { color: var(--muted-2); font-size: 1.6rem; }
.service-pin__nav {
display: flex;
flex-direction: column;
gap: 2px;
border-top: 1px solid var(--line);
padding-top: 18px;
}
.service-pin__label {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
font-size: 0.95rem;
font-weight: 500;
color: var(--muted-2);
transition: color 0.3s ease, padding 0.3s ease;
}
.service-pin__bullet {
width: 18px; height: 1px;
background: var(--line-2);
transition: width 0.4s var(--ease-out), background-color 0.3s ease;
}
.service-pin__label.is-active { color: var(--ink); padding-left: 4px; }
.service-pin__label.is-active .service-pin__bullet { width: 32px; background: var(--accent); }
.service-pin__progress {
position: absolute;
left: -28px;
top: 96px;
bottom: 0;
width: 2px;
background: var(--line-2);
border-radius: 2px;
overflow: hidden;
}
.service-pin__progress-fill {
position: absolute;
inset: 0;
background: var(--accent);
transform-origin: top;
transform: scaleY(0);
transition: transform 0.2s ease;
}
.service-pin__viewport {
position: relative;
height: 100%;
min-height: 540px;
}
.service-pin__item {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
.service-pin__visual {
position: relative;
width: 100%;
height: 100%;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.service-pin__body {
display: flex;
flex-direction: column;
gap: 18px;
}
.service-pin__num {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
color: var(--accent);
letter-spacing: 0.04em;
}
.service-pin__body h3 {
font-size: clamp(2rem, 3.2vw, 2.8rem);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--ink);
}
.service-pin__body p {
font-size: 1.05rem;
color: var(--muted);
line-height: 1.55;
max-width: 480px;
}
.service-pin__body ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.service-pin__body ul li {
font-size: 0.82rem;
padding: 6px 12px;
background: var(--canvas);
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--ink-2);
}
.service-pin__body .btn { align-self: flex-start; margin-top: 8px; }
/* ===== Service visual cards (bespoke per service) ===== */
.sv-card {
width: 100%;
max-width: 480px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 22px;
box-shadow: 0 40px 80px -40px rgba(26,23,20,0.25), 0 10px 30px -20px rgba(26,23,20,0.15);
display: flex;
flex-direction: column;
gap: 16px;
}
.sv-card__head {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.02em;
}
.sv-card__head span { font-feature-settings: "tnum"; }
.sv-card__time { margin-left: auto; color: var(--ink); font-weight: 500; }
.sv-card__meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.sv-card__meta > div { display: flex; flex-direction: column; gap: 2px; }
.sv-card__meta strong { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.sv-card__meta span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dot.dot--green {
width: 7px; height: 7px; border-radius: 50%;
background: #1b9d4f;
box-shadow: 0 0 0 3px rgba(27, 157, 79, 0.18);
}
/* AI flow card */
.sv-flow {
display: flex;
flex-direction: column;
gap: 10px;
}
.sv-node {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: var(--r-md);
background: var(--canvas);
border: 1px solid var(--line);
font-size: 0.92rem;
font-weight: 500;
}
.sv-node small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.sv-node--ai { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.sv-node--ai svg { width: 14px; height: 14px; color: var(--accent); }
.sv-arrow {
width: 1px; height: 14px; margin-left: 18px;
background: var(--line-2);
position: relative;
}
.sv-arrow::after { content: ""; position: absolute; bottom: -2px; left: -3px; width: 7px; height: 7px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg); }
/* Growth graph card */
.sv-graph { height: 140px; }
.sv-graph svg { width: 100%; height: 100%; }
/* Ad-tech channels card */
.sv-channels { display: flex; flex-direction: column; gap: 10px; }
.sv-ch {
display: grid;
grid-template-columns: 70px 1fr 50px;
align-items: center;
gap: 12px;
font-size: 0.86rem;
}
.sv-ch > span { color: var(--muted); }
.sv-ch__bar {
height: 6px;
border-radius: 3px;
background: var(--canvas);
overflow: hidden;
border: 1px solid var(--line);
}
.sv-ch__bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 3px;
}
.sv-ch > b { font-weight: 500; text-align: right; font-feature-settings: "tnum"; }
.sv-card__foot {
font-size: 0.78rem;
color: var(--muted);
padding-top: 12px;
border-top: 1px solid var(--line);
letter-spacing: 0.02em;
}
/* Funnel card */
.sv-funnel { display: flex; flex-direction: column; gap: 12px; }
.sv-step {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 12px 14px;
background: var(--canvas);
border: 1px solid var(--line);
border-radius: var(--r-md);
align-items: center;
overflow: hidden;
}
.sv-step span { font-size: 0.85rem; color: var(--muted); position: relative; z-index: 1; }
.sv-step b { font-weight: 500; font-feature-settings: "tnum"; position: relative; z-index: 1; }
.sv-step__bar {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15,179,122,0.08), rgba(15,179,122,0.02));
border-right: 1px solid rgba(15,179,122,0.25);
}
/* Brand browser card */
.sv-browser {
width: 100%;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
background: var(--canvas);
}
.sv-browser__head {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #ece4d3;
border-bottom: 1px solid var(--line);
}
.sv-browser__head > span:not(.sv-browser__url) {
width: 10px; height: 10px; border-radius: 50%; background: var(--line-2);
}
.sv-browser__url {
margin-left: 12px;
padding: 4px 14px;
background: var(--canvas);
border-radius: var(--r-pill);
font-size: 0.78rem;
color: var(--muted);
flex: 1;
max-width: 240px;
}
.sv-browser__body {
padding: 36px 28px;
background: var(--canvas);
position: relative;
min-height: 220px;
}
.sv-browser__hero { display: flex; flex-direction: column; gap: 14px; }
.sv-eye {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.sv-h1 {
font-size: 1.8rem;
letter-spacing: -0.03em;
line-height: 1.05;
font-weight: 500;
color: var(--ink);
}
.sv-h1 em { font-family: var(--font-serif); font-style: italic; }
.sv-cta {
align-self: flex-start;
padding: 10px 16px;
background: var(--ink);
color: var(--canvas);
border-radius: var(--r-pill);
font-size: 0.85rem;
font-weight: 500;
}
.sv-card__meta--brand { padding-top: 16px; }
/* Mobile: stack vertically, no pinning */
@media (max-width: 900px) {
.service-pin__stage { height: auto; min-height: 0; padding: 0 0 60px; }
.service-pin__layout { grid-template-columns: 1fr; gap: 32px; padding-block: 0; }
.service-pin__side { display: none; }
.service-pin__viewport { min-height: 0; height: auto; display: flex; flex-direction: column; gap: 80px; }
.service-pin__item { position: relative; inset: auto; grid-template-columns: 1fr; gap: 28px; opacity: 1 !important; visibility: visible !important; }
.service-pin__visual { min-height: 0; }
.sv-card { max-width: none; }
}
/* ============================================================
WALL OF LOVE — Doğrulanmış Müşteri Yorumları (User-Controlled Carousel)
============================================================ */
.wall {
position: relative;
padding: clamp(80px, 11vw, 140px) 0 clamp(70px, 9vw, 110px);
background: linear-gradient(180deg, #ede4d3 0%, #e8dec8 45%, #ede4d3 100%);
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
overflow: hidden;
isolation: isolate;
contain: layout style;
}
.wall__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(800px 500px at 15% 0%, rgba(15,179,122,0.07), transparent 60%),
radial-gradient(700px 500px at 85% 100%, rgba(140,235,200,0.12), transparent 60%);
}
.wall .container { position: relative; z-index: 1; }
/* Stats strip (4 trust signals) */
.wall__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: clamp(32px, 5vw, 56px);
margin-bottom: clamp(28px, 4vw, 44px);
padding: 22px 26px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px -16px rgba(26,23,20,0.12);
}
.wall__stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.wall__stat-num {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
}
.wall__stat-num strong {
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 500;
font-feature-settings: "tnum";
}
.wall__stat-of {
font-size: 0.9rem;
color: var(--muted-2);
}
.wall__stars {
display: inline-flex;
gap: 1px;
color: #f5a623;
margin-top: 1px;
}
.wall__stars svg { width: 13px; height: 13px; }
.wall__stat-label {
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--muted);
margin-top: 2px;
}
/* Controls row (counter + hint + arrows) */
.wall__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 8px 0 18px;
flex-wrap: wrap;
}
.wall__counter {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-display);
letter-spacing: -0.02em;
color: var(--ink);
}
.wall__counter-now {
font-size: 1.7rem;
font-weight: 500;
color: var(--accent);
font-feature-settings: "tnum";
line-height: 1;
}
.wall__counter-sep {
font-size: 1.1rem;
color: var(--muted-2);
padding: 0 4px;
}
.wall__counter-tot {
font-size: 1.2rem;
color: var(--muted-2);
font-feature-settings: "tnum";
}
.wall__counter-label {
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
margin-left: 8px;
}
.wall__hint {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.wall__hint svg { width: 17px; height: 17px; opacity: 0.7; }
.wall__arrows {
display: inline-flex;
align-items: center;
gap: 8px;
}
.wall__arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-out), border-color 0.25s ease, opacity 0.25s ease;
}
.wall__arrow svg { width: 14px; height: 14px; }
.wall__arrow:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.wall__arrow:active { transform: scale(0.94); }
.wall__arrow[disabled] {
opacity: 0.32;
cursor: not-allowed;
pointer-events: none;
}
/* Viewport + track (native scroll-snap carousel) */
.wall__viewport {
position: relative;
margin-left: calc((100vw - min(100vw, var(--container))) / 2 * -1);
margin-right: calc((100vw - min(100vw, var(--container))) / 2 * -1);
margin-inline: calc(50% - 50vw);
}
.wall__track {
display: flex;
gap: 16px;
padding: 8px clamp(20px, 4vw, 56px) 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: clamp(20px, 4vw, 56px);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Hide native scrollbar — we have our own progress */
}
.wall__track::-webkit-scrollbar { display: none; }
/* Review card — refined for trust + readability */
.rcard {
flex: 0 0 380px;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 24px 20px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
position: relative;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 10px 26px -14px rgba(26,23,20,0.16),
0 2px 6px -2px rgba(26,23,20,0.06);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.rcard:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 22px 44px -18px rgba(26,23,20,0.22),
0 4px 10px -3px rgba(26,23,20,0.08);
}
.rcard__head {
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
align-items: center;
}
.rcard__avatar {
width: 42px; height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.02em;
background: var(--av-bg, #6d645a);
box-shadow: 0 2px 6px -2px rgba(26,23,20,0.28);
flex-shrink: 0;
}
.rcard__who {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rcard__who strong {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.96rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.rcard__who span {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: -0.005em;
}
.rcard__verified {
width: 16px; height: 16px;
flex-shrink: 0;
}
.rcard__stars {
font-size: 1.05rem;
color: #f5a623;
letter-spacing: 2px;
line-height: 1;
}
.rcard__text {
font-size: 0.94rem;
line-height: 1.55;
color: var(--ink-2);
letter-spacing: -0.005em;
flex: 1;
}
.rcard__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.74rem;
color: var(--muted);
padding-top: 12px;
border-top: 1px solid var(--line);
margin-top: 2px;
}
.rcard__source {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 500;
color: var(--ink-2);
}
.rcard__source svg { width: 13px; height: 13px; }
.rcard__tag {
position: absolute;
top: 16px;
right: 18px;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
padding: 3px 9px;
background: rgba(15,179,122, 0.1);
border: 1px solid rgba(15,179,122, 0.2);
border-radius: var(--r-pill);
}
/* Progress bar — visual position indicator */
.wall__progress {
margin: 16px auto 0;
height: 3px;
width: 100%;
max-width: 320px;
background: rgba(26, 23, 20, 0.08);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.wall__progress-fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 2px;
width: 5%;
transition: width 0.4s var(--ease-out);
}
/* KVKK / Doğrulama disclaimer */
.wall__disclaimer {
margin-top: 26px;
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: flex-start;
max-width: 760px;
margin-inline: auto;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.55);
border: 1px dashed var(--line-2);
border-radius: 12px;
font-size: 0.8rem;
line-height: 1.55;
color: var(--muted);
letter-spacing: -0.005em;
}
.wall__disclaimer strong {
color: var(--ink);
font-weight: 600;
}
.wall__disclaimer-ic {
width: 18px;
height: 18px;
color: var(--accent);
margin-top: 1px;
flex-shrink: 0;
}
/* "See all on Google" link */
.wall__bottom {
margin-top: 28px;
display: flex;
justify-content: center;
}
.wall__more {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px 14px 14px;
background: linear-gradient(180deg, var(--ink) 0%, var(--espresso) 100%);
border: 1px solid var(--ink);
border-radius: var(--r-pill);
font-size: 0.94rem;
font-weight: 600;
color: var(--canvas);
text-decoration: none;
letter-spacing: -0.005em;
transition: transform 0.4s var(--ease-out), box-shadow 0.3s ease, padding 0.3s ease;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 30px -12px rgba(26, 23, 20, 0.35), 0 0 0 4px rgba(15,179,122, 0.08);
position: relative;
overflow: hidden;
}
.wall__more::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(245, 241, 232, 0.12) 50%, transparent 70%);
transform: translateX(-110%);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.wall__more:hover::before { transform: translateX(110%); }
.wall__more:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 22px 44px -14px rgba(26, 23, 20, 0.5), 0 0 0 6px rgba(15,179,122, 0.15);
}
.wall__more-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #f5a623, #0fb37a);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--canvas);
flex-shrink: 0;
box-shadow: 0 0 16px rgba(245, 166, 35, 0.5);
animation: wallMorePulse 2.4s ease-in-out infinite;
}
.wall__more-icon svg { width: 15px; height: 15px; }
@keyframes wallMorePulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 16px rgba(245, 166, 35, 0.5); }
50% { transform: scale(1.06); box-shadow: 0 0 22px rgba(245, 166, 35, 0.7); }
}
.wall__more-arrow {
width: 14px; height: 14px;
transition: transform 0.3s var(--ease-out);
color: rgba(245, 241, 232, 0.8);
}
.wall__more:hover .wall__more-arrow { transform: translateX(4px); color: var(--canvas); }
@media (max-width: 720px) {
.wall__more {
font-size: 0.82rem;
padding: 11px 16px 11px 11px;
gap: 10px;
line-height: 1.3;
text-align: left;
}
.wall__more-icon { width: 28px; height: 28px; }
.wall__more-icon svg { width: 13px; height: 13px; }
}
/* Mobile responsive */
@media (max-width: 820px) {
.wall { padding: 60px 0 56px; }
.wall__stats {
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
padding: 18px 20px;
margin-top: 26px;
margin-bottom: 22px;
border-radius: 18px;
}
.wall__stat-num strong { font-size: 1.5rem; }
.wall__stars svg { width: 11px; height: 11px; }
.wall__stat-label { font-size: 0.7rem; }
.wall__controls {
gap: 12px;
padding: 4px 0 14px;
justify-content: space-between;
}
.wall__counter-now { font-size: 1.4rem; }
.wall__counter-sep, .wall__counter-tot { font-size: 1rem; }
.wall__counter-label { display: none; }
.wall__hint { display: none; }
.wall__arrow { width: 40px; height: 40px; }
.wall__track {
gap: 12px;
padding: 6px clamp(20px, 4vw, 56px) 22px;
}
.rcard {
flex-basis: 86vw;
max-width: 340px;
padding: 18px 18px 16px;
gap: 11px;
border-radius: 14px;
}
.rcard__avatar { width: 38px; height: 38px; font-size: 0.82rem; }
.rcard__head { grid-template-columns: 38px 1fr; gap: 10px; }
.rcard__who strong { font-size: 0.9rem; }
.rcard__who span { font-size: 0.72rem; }
.rcard__text { font-size: 0.86rem; line-height: 1.48; }
.rcard__stars { font-size: 0.95rem; }
.rcard__foot { font-size: 0.68rem; padding-top: 10px; }
.rcard__source svg { width: 11px; height: 11px; }
.rcard__tag {
font-size: 0.56rem;
padding: 2px 7px;
top: 12px;
right: 14px;
letter-spacing: 0.08em;
}
.wall__progress { max-width: 220px; }
.wall__disclaimer {
font-size: 0.74rem;
padding: 12px 14px;
grid-template-columns: 18px 1fr;
gap: 9px;
margin-top: 22px;
}
.wall__disclaimer-ic { width: 15px; height: 15px; }
.wall__bottom { margin-top: 22px; }
.wall__more { font-size: 0.84rem; padding: 12px 18px; }
}
/* ---------- CTA / CONTACT ---------- */
.cta {
padding: clamp(80px, 12vw, 160px) 0;
background: linear-gradient(180deg, var(--espresso) 0%, var(--espresso-2) 100%);
color: var(--canvas);
position: relative;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 600px at 15% 0%, rgba(140,235,200,0.18), transparent 60%),
radial-gradient(700px 500px at 85% 100%, rgba(15,179,122,0.22), transparent 60%);
pointer-events: none;
}
.cta::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(245,241,232,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,241,232,0.025) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 75%);
pointer-events: none;
}
.cta__inner {
position: relative;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.cta__title {
font-size: var(--fs-h2);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.02;
margin: 24px 0 24px;
color: var(--canvas);
}
.cta__sub {
font-size: var(--fs-lead);
color: rgba(245,241,232,0.75);
line-height: 1.55;
max-width: 680px;
margin: 0 auto 40px;
}
/* CTA Perks list (above form) */
.cta__perks {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 20px;
margin: 0 auto 36px;
padding: 0;
max-width: 700px;
}
.cta__perks li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.88rem;
color: rgba(245, 241, 232, 0.85);
letter-spacing: -0.005em;
}
.cta__perks li strong { color: var(--canvas); font-weight: 600; }
.cta__perks li svg {
width: 16px; height: 16px;
color: #2bd16e;
flex-shrink: 0;
padding: 3px;
background: rgba(43, 209, 110, 0.12);
border-radius: 50%;
box-sizing: content-box;
}
.cta__form {
text-align: left;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(245,241,232,0.12);
border-radius: var(--r-xl);
padding: 28px 32px 30px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.cta__form-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(245, 241, 232, 0.1);
}
.cta__form-head-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.cta__form-head-text strong {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--canvas);
}
.cta__form-head-text span {
font-size: 0.82rem;
color: rgba(245, 241, 232, 0.6);
}
.cta__form-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(43, 209, 110, 0.12);
border: 1px solid rgba(43, 209, 110, 0.25);
border-radius: var(--r-pill);
font-size: 0.7rem;
font-weight: 600;
color: #6fe093;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.cta__form-badge svg { width: 12px; height: 12px; }
.cta__fields {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(245,241,232,0.65);
}
.field input, .field select, .field textarea {
background: rgba(245,241,232,0.06);
border: 1px solid rgba(245,241,232,0.16);
color: var(--canvas);
padding: 14px 16px;
border-radius: var(--r-md);
font-size: 0.98rem;
width: 100%;
transition: border-color 0.25s ease, background-color 0.25s ease;
font-family: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(245,241,232,0.4); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(245,241,232,0.1);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5f1e8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.cta__fields .btn { grid-column: 1 / -1; margin-top: 8px; }
.cta__legal {
grid-column: 1 / -1;
font-size: 0.76rem;
color: rgba(245,241,232,0.55);
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0;
padding-top: 4px;
}
.cta__legal svg {
width: 14px; height: 14px;
color: rgba(245, 241, 232, 0.65);
flex-shrink: 0;
}
.cta__legal strong { color: var(--canvas); font-weight: 600; }
.cta__legal a { color: rgba(245,241,232,0.8); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.field__req { color: var(--accent-2); margin-left: 2px; }
.field__opt { color: rgba(245, 241, 232, 0.45); font-weight: 400; font-size: 0.7rem; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.cta__success {
text-align: center;
padding: 40px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.cta__success[hidden] { display: none !important; }
.cta__fields[hidden] { display: none !important; }
.cta__success svg { width: 56px; height: 56px; color: #2bd16e; filter: drop-shadow(0 0 14px rgba(43, 209, 110, 0.4)); }
.cta__success h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--canvas);
}
.cta__success-meta {
margin-top: 14px;
padding: 8px 14px;
background: rgba(245, 241, 232, 0.06);
border: 1px solid rgba(245, 241, 232, 0.12);
border-radius: var(--r-pill);
font-size: 0.78rem;
color: rgba(245, 241, 232, 0.7);
letter-spacing: 0.04em;
font-feature-settings: "tnum";
}
.cta__success-meta strong { color: var(--canvas); font-weight: 600; }
.cta__success p {
color: rgba(245,241,232,0.7);
max-width: 460px;
}
/* ---------- FOOTER ---------- */
.footer {
background: linear-gradient(180deg, var(--ink) 0%, var(--espresso) 100%);
color: var(--canvas);
position: relative;
padding: 80px 0 0;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(15,179,122, 0.4) 30%, rgba(140,235,200, 0.4) 70%, transparent);
}
/* TOP — Brand + 4 link columns */
.footer__top {
display: grid;
grid-template-columns: 1.1fr 2fr;
gap: 60px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(245, 241, 232, 0.1);
}
.footer__logo .nav__logo-name { color: var(--canvas); }
.footer__logo .nav__logo-mark { color: var(--canvas); }
.footer__logo .nav__logo-tag { color: rgba(245, 241, 232, 0.5); }
.footer__logo .nav__logo-tag-line { background: linear-gradient(90deg, transparent, rgba(245, 241, 232, 0.4) 50%, transparent); }
.footer__mission {
margin-top: 22px;
font-size: 0.94rem;
line-height: 1.6;
color: rgba(245, 241, 232, 0.7);
max-width: 380px;
}
.footer__mission strong { color: var(--canvas); font-weight: 600; }
/* Social icons */
.footer__social {
display: flex;
gap: 8px;
margin-top: 24px;
}
.footer__social a {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(245, 241, 232, 0.06);
border: 1px solid rgba(245, 241, 232, 0.12);
color: rgba(245, 241, 232, 0.85);
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.footer__social a:hover {
background: var(--accent);
color: var(--canvas);
border-color: var(--accent);
transform: translateY(-2px);
}
.footer__social svg { width: 17px; height: 17px; }
/* Columns */
.footer__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.footer__col h4 {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 241, 232, 0.5);
font-weight: 600;
margin-bottom: 18px;
}
.footer__col a, .footer__col span {
display: block;
font-size: 0.9rem;
color: rgba(245, 241, 232, 0.78);
padding: 5px 0;
letter-spacing: -0.005em;
transition: color 0.2s ease, transform 0.2s ease;
}
.footer__col a:hover {
color: var(--canvas);
transform: translateX(2px);
}
.footer__col--contact .footer__contact {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 0;
}
.footer__contact svg { width: 14px; height: 14px; color: rgba(245, 241, 232, 0.55); flex-shrink: 0; }
.footer__contact:hover svg { color: var(--accent); }
/* OFFICES — 3 location cards */
.footer__offices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 36px 0 32px;
border-bottom: 1px solid rgba(245, 241, 232, 0.1);
}
.footer__office {
display: grid;
grid-template-columns: 30px 1fr;
gap: 12px;
align-items: flex-start;
}
.footer__office-flag {
width: 30px;
height: 20px;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
border: 1px solid rgba(245, 241, 232, 0.15);
flex-shrink: 0;
margin-top: 2px;
}
.footer__office-flag svg { width: 100%; height: 100%; display: block; }
.footer__office-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.footer__office-info strong {
font-family: var(--font-display);
font-size: 0.94rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--canvas);
margin-bottom: 3px;
}
.footer__office-info span {
font-size: 0.78rem;
color: rgba(245, 241, 232, 0.6);
letter-spacing: -0.005em;
padding: 0;
}
/* TRUST badges */
.footer__trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 18px;
padding: 28px 0;
border-bottom: 1px solid rgba(245, 241, 232, 0.1);
}
.footer__trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgba(245, 241, 232, 0.04);
border: 1px solid rgba(245, 241, 232, 0.12);
border-radius: var(--r-pill);
font-size: 0.78rem;
color: rgba(245, 241, 232, 0.75);
letter-spacing: -0.005em;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.footer__trust-item:hover {
border-color: rgba(245, 241, 232, 0.25);
background: rgba(245, 241, 232, 0.07);
}
.footer__trust-item svg {
width: 16px; height: 16px;
color: rgba(245, 241, 232, 0.55);
flex-shrink: 0;
}
.footer__trust-item strong {
color: var(--canvas);
font-weight: 600;
}
/* BOTTOM bar */
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
font-size: 0.8rem;
color: rgba(245, 241, 232, 0.55);
flex-wrap: wrap;
gap: 14px;
}
.footer__bottom-left {
display: inline-flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.footer__bottom-left strong { color: var(--canvas); font-weight: 600; }
.footer__bottom-tag {
font-size: 0.74rem;
color: rgba(245, 241, 232, 0.42);
letter-spacing: 0.02em;
}
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a {
color: rgba(245, 241, 232, 0.55);
font-size: 0.78rem;
transition: color 0.2s ease;
}
.footer__legal a:hover { color: var(--canvas); }
.footer__mega {
font-family: var(--font-display);
font-size: clamp(8rem, 22vw, 22rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 1px rgba(245, 241, 232, 0.09);
text-align: center;
margin: 30px -6% -7% -6%;
user-select: none;
white-space: nowrap;
}
.footer__mega span {
color: transparent;
-webkit-text-stroke: 1px var(--accent);
}
/* Footer responsive */
@media (max-width: 1080px) {
.footer__top { grid-template-columns: 1fr; gap: 40px; }
.footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.footer__offices { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 820px) {
.footer { padding: 56px 0 0; }
.footer__top { padding-bottom: 36px; gap: 32px; }
.footer__mission { font-size: 0.88rem; }
.footer__social { gap: 7px; margin-top: 18px; }
.footer__social a { width: 34px; height: 34px; }
.footer__cols { gap: 24px 18px; }
.footer__col h4 { font-size: 0.66rem; margin-bottom: 14px; }
.footer__col a, .footer__col span { font-size: 0.84rem; padding: 4px 0; }
.footer__contact svg { width: 13px; height: 13px; }
.footer__offices { padding: 28px 0 24px; gap: 12px; }
.footer__office-info strong { font-size: 0.86rem; }
.footer__office-info span { font-size: 0.72rem; }
.footer__trust { padding: 22px 0; gap: 8px 12px; }
.footer__trust-item {
font-size: 0.7rem;
padding: 5px 11px;
gap: 6px;
}
.footer__trust-item svg { width: 14px; height: 14px; }
.footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px 0;
font-size: 0.74rem;
}
.footer__bottom-left { flex-direction: column; align-items: flex-start; gap: 4px; }
.footer__bottom-tag { font-size: 0.7rem; }
.footer__legal { gap: 14px; }
.footer__legal a { font-size: 0.72rem; }
.footer__mega { margin: 20px -10% -7% -10%; }
}
@media (max-width: 520px) {
.footer__cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
}
/* ---------- Custom cursor ---------- */
.has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
.has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor input, .has-custom-cursor textarea, .has-custom-cursor select { cursor: none !important; }
.cursor-dot, .cursor-ring {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
will-change: transform;
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--ink);
mix-blend-mode: difference;
filter: invert(1);
}
.cursor-ring {
width: 32px; height: 32px;
border: 1px solid rgba(26,23,20,0.5);
background: rgba(245,241,232,0.02);
backdrop-filter: blur(1px);
transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease;
}
.cursor-ring[data-mode="link"] {
border-color: var(--ink);
background: rgba(26,23,20,0.06);
}
.cursor-ring[data-mode="cta"] {
border-color: var(--accent);
background: rgba(15,179,122, 0.12);
}
/* Hide on touch/coarse pointers */
@media (hover: none), (pointer: coarse) {
.cursor-dot, .cursor-ring { display: none !important; }
}
/* ---------- Reveal animations ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
[data-split] {
overflow: hidden;
}
[data-split] .line {
display: block;
overflow: hidden;
}
[data-split] .line > span {
display: inline-block;
transform: translateY(110%);
transition: transform 1s var(--ease-out);
}
[data-split].is-visible .line > span { transform: translateY(0); }
[data-split] .line:nth-child(2) > span { transition-delay: 0.12s; }
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
.edge__grid { grid-template-columns: repeat(2, 1fr); }
.process__rail { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
.process__line { display: none; }
.results__grid { grid-template-columns: 1fr 1fr; }
.case--lg { grid-row: span 1; grid-column: span 2; }
.testimonial__small-grid { grid-template-columns: 1fr; }
.about__grid { grid-template-columns: 1fr; gap: 48px; }
.footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.nav__menu { display: none; }
.nav__toggle { display: block; }
.nav__actions .btn--primary { display: none; }
.nav.is-open .nav__mobile { display: flex; }
.hero { padding-top: calc(var(--strip-h) + var(--nav-h) + 20px); min-height: auto; padding-bottom: 36px; }
/* Top strip — compact on mobile (full text kept, font tightened) */
.top-strip__inner { padding: 6px 14px; font-size: 0.62rem; gap: 8px; letter-spacing: 0.01em; }
.top-strip__left { gap: 6px; flex: 1 1 auto; min-width: 0; }
.ts-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-sep { padding: 0 1px; }
.ts-promise { white-space: nowrap; }
.ts-lang { padding: 2px 4px; font-size: 0.62rem; letter-spacing: 0.04em; }
.ts-pulse { width: 6px; height: 6px; }
/* Logo — compact but DIGITAL stays visible */
.nav__logo { gap: 10px; }
.nav__logo-mark { width: 32px; height: 32px; }
.nav__logo-name { font-size: 1.05rem; }
.nav__logo-wordmark { gap: 4px; }
.nav__logo-tag {
font-size: 0.52rem;
letter-spacing: 0.28em;
gap: 5px;
}
.nav__logo-tag-line { width: 8px; }
.nav__logo:hover .nav__logo-tag-line { width: 14px; }
.hero__top { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
.hero__locations { display: none; }
.hero__eyebrow { font-size: 0.68rem; padding: 8px 13px; gap: 10px; letter-spacing: 0.16em; }
.hero__eyebrow .he-num { font-size: 0.78rem; padding-right: 7px; }
.hero__eyebrow .he-mid { display: none; }
.hero__eyebrow .he-sep { padding: 0 2px; }
.hero__eyebrow .he-flag--tr {
width: 36px; height: 25px; border-radius: 4.5px;
box-shadow: 0 3px 8px rgba(227, 10, 23, 0.22), 0 1px 3px rgba(26,23,20,0.15);
}
.hero__eyebrow .he-flag--us { width: 18px; height: 13px; opacity: 0.7; }
.hero__eyebrow .he-cn--us { display: none; }
/* Hero ticker → horizontal auto-marquee on mobile */
.hero__ticker {
margin-top: 48px;
padding-top: 20px;
margin-inline: calc(clamp(20px, 4vw, 56px) * -1);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.hero__ticker-row {
flex-wrap: nowrap;
width: max-content;
gap: 10px;
padding: 4px clamp(20px, 4vw, 56px);
/* GPU layer for smooth scroll */
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.hero__ticker {
contain: layout style paint;
}
.hero__ticker-row.is-marquee {
animation: marquee 36s linear infinite;
}
.hero__ticker-row.is-marquee:hover { animation-play-state: paused; }
.hero__meta-sep { display: none; }
.hero__meta-item {
flex-direction: row;
align-items: baseline;
gap: 8px;
padding: 11px 16px;
background: rgba(255,255,255,0.7);
border: 1px solid var(--line);
border-radius: var(--r-pill);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: nowrap;
}
.hero__meta-num { font-size: 1.05rem; }
.hero__meta-label { font-size: 0.62rem; letter-spacing: 0.12em; }
.hero__lower { grid-template-columns: 1fr; gap: 24px; }
.hero__ticker-row { gap: 18px; }
.hero__meta-sep { display: none; }
.hero__meta-item { flex: 1 1 38%; }
.hero__scroll { display: none; }
.hero__live { display: none; }
.hero__orb { width: 480px; height: 480px; right: -40%; }
.service { grid-template-columns: 60px 1fr; gap: 20px; }
.service__visual { display: none; }
.service:hover { padding: 40px 0; }
.results__grid { grid-template-columns: 1fr; }
.case--lg { grid-column: span 1; }
.footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
.footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
/* CTA section — compact mobile */
.cta { padding: 56px 0 60px; }
.cta__inner { text-align: left; }
.cta__title { font-size: clamp(1.7rem, 7vw, 2.2rem); margin: 14px 0 12px; line-height: 1.08; letter-spacing: -0.025em; }
.cta__sub { font-size: 0.95rem; line-height: 1.5; margin: 0 0 22px; max-width: 100%; }
/* Perks list — stack on mobile, no horizontal slide */
.cta__perks {
flex-direction: column;
align-items: flex-start;
gap: 9px;
margin: 0 0 22px;
max-width: 100%;
}
.cta__perks li {
font-size: 0.84rem;
line-height: 1.4;
gap: 9px;
width: 100%;
}
.cta__perks li svg { width: 14px; height: 14px; padding: 3px; }
/* Form head — stack on narrow */
.cta__form-head { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.cta__form-head-text strong { font-size: 0.94rem; }
.cta__form-head-text span { font-size: 0.74rem; }
.cta__form-badge { font-size: 0.62rem; padding: 4px 8px; }
.cta__form { padding: 18px 16px 16px; border-radius: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.05); }
.cta__fields { grid-template-columns: 1fr; gap: 12px; }
.field { gap: 6px; }
.field label { font-size: 0.7rem; letter-spacing: 0.08em; }
.field input, .field select, .field textarea { padding: 11px 13px; font-size: 0.92rem; border-radius: 10px; }
.field select { padding-right: 36px; background-position: right 12px center; }
.field textarea { rows: 2; }
.cta__fields .btn { margin-top: 4px; padding: 14px 20px; font-size: 0.96rem; }
.cta__legal { font-size: 0.72rem; margin-top: -2px; }
.cta__success { padding: 24px 0; }
.cta__success svg { width: 44px; height: 44px; }
.cta__success h3 { font-size: 1.35rem; }
.cta__success p { font-size: 0.88rem; }
}
@media (max-width: 520px) {
:root {
--fs-h2: clamp(1.85rem, 7.5vw, 2.6rem);
--strip-h: 30px;
}
/* Top strip — very compact on phone */
.top-strip__inner { padding: 5px 14px; font-size: 0.64rem; }
.ts-pulse { width: 6px; height: 6px; }
.ts-status { letter-spacing: 0; }
/* Eyebrow — hide flag labels, keep flags */
.hero__eyebrow .he-cn { display: none; }
.hero__eyebrow .he-loc { gap: 5px; }
.hero__title { font-size: clamp(1.95rem, 9vw, 3rem); letter-spacing: -0.035em; line-height: 1.04; padding-left: 10px; }
.hero__title em {
font-size: 1em;
/* mobile: solid color (gradient text-fill clashes with per-char animation) */
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: var(--accent) !important;
color: var(--accent) !important;
}
.hero__title .line--accent { font-size: 0.78em; margin-top: 0.18em; letter-spacing: -0.025em; }
.hero__title .word { margin-right: 0.2em; }
/* Proof list — mobile tweaks */
.hero__proof { padding: 14px 14px; gap: 8px; margin-top: 16px; border-radius: 12px; }
.hero__proof-item { font-size: 0.84rem; grid-template-columns: 22px 1fr; gap: 10px; }
.hero__proof-icon { width: 22px; height: 22px; border-radius: 6px; }
.hero__proof-icon svg { width: 11px; height: 11px; }
/* === Mobile typewriter mode === */
.hero__title.is-typewriter .word {
overflow: visible;
padding: 0;
margin: 0 0.2em 0 0;
line-height: inherit;
}
.hero__title.is-typewriter .word-inner {
transform: none !important;
opacity: 1 !important;
transition: none !important;
display: inline;
}
.hero__title.is-typewriter .char {
display: inline-block;
opacity: 0;
transform: translateY(2px);
transition: opacity 0.06s linear, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
white-space: pre;
}
.hero__title.is-typewriter.is-revealed .char {
opacity: 1;
transform: translateY(0);
}
/* Blinking caret after the last line (appears when typing finishes) */
.hero__title.is-typewriter .line:last-child::after {
content: "";
display: inline-block;
width: 0.08em;
min-width: 3px;
height: 0.78em;
margin-left: 0.1em;
background: var(--accent);
border-radius: 1.5px;
vertical-align: -0.06em;
opacity: 0;
box-shadow: 0 0 8px rgba(15,179,122, 0.45);
}
.hero__title.is-typewriter.is-revealed .line:last-child::after {
animation: caretAppearBlink 1.1s steps(2) infinite;
animation-delay: var(--type-duration, 2s);
}
@keyframes caretAppearBlink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* The left accent bar grows AFTER typewriter finishes */
.hero__title.is-typewriter::before {
transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--type-duration, 2s);
}
.hero__sub { font-size: 1rem; }
.hero__eyebrow { font-size: 0.62rem; padding: 7px 11px; gap: 8px; letter-spacing: 0.14em; }
.hero__eyebrow .he-cn { display: none; }
.hero__eyebrow .he-loc { gap: 5px; }
.hero__eyebrow .he-flag { width: 18px; height: 12px; }
.hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
.hero__ctas .btn { width: 100%; }
.hero__meta-item { padding: 10px 14px; }
.hero__meta-num { font-size: 1rem; }
/* Service chips — 2x2 grid on tablet/mobile */
.hero__chips {
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 22px;
max-width: 100%;
}
.hero-chip {
grid-template-columns: 32px 1fr;
padding: 9px 12px 9px 7px;
border-radius: 12px;
gap: 9px;
}
.hero-chip__icon { width: 32px; height: 32px; border-radius: 10px; }
.hero-chip__icon svg { width: 15px; height: 15px; }
.hero-chip__text { font-size: 0.82rem; }
.hero-chip__sub { font-size: 0.66rem; }
.hero-chip__arrow { display: none; }
.section-head { margin-bottom: 40px; }
.section-sub { font-size: 1rem; }
.edge__grid { grid-template-columns: 1fr; gap: 12px; }
.edge__card { min-height: 0; padding: 22px 20px; gap: 12px; }
.edge__card h3 { font-size: 1.1rem; }
.edge__card p { font-size: 0.92rem; }
.process__rail { grid-template-columns: 1fr; }
.about__stats { grid-template-columns: 1fr 1fr; }
.footer__cols { grid-template-columns: 1fr 1fr; }
}
/* Global overflow safety for all very narrow screens */
@media (max-width: 380px) {
:root { --fs-h2: clamp(1.7rem, 8vw, 2.2rem); }
.container { padding-inline: 18px; }
/* Chips: tighter on very narrow */
.hero__chips { gap: 6px; }
.hero-chip {
grid-template-columns: 28px 1fr;
padding: 8px 10px 8px 6px;
gap: 7px;
border-radius: 11px;
}
.hero-chip__icon { width: 28px; height: 28px; border-radius: 9px; }
.hero-chip__icon svg { width: 13px; height: 13px; }
.hero-chip__text { font-size: 0.74rem; letter-spacing: -0.02em; }
.hero-chip__sub { font-size: 0.6rem; }
}
/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
[data-split] .line > span { transform: none; }
}
/* ============================================================
MOBILE PERFORMANCE SURGERY (≤900px)
Kill backdrop-filter, infinite animations, heavy blurs,
3D transforms. Mobile GPUs choke on these.
============================================================ */
@media (max-width: 900px) {
/* Kill backdrop-filter everywhere — biggest mobile perf win */
.nav--scrolled,
.nav__mobile,
.hero__eyebrow,
.hero__live,
.hero__meta-item,
.hero-chip,
.cta__form,
.cs-stat,
.manifesto__sign {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Make scrolled nav solid instead of blur */
.nav--scrolled { background: rgba(245, 241, 232, 0.97); }
.nav__mobile { background: var(--canvas); }
.hero__eyebrow { background: var(--surface); }
.hero__live { background: var(--surface); }
.hero__meta-item { background: var(--surface); }
.hero-chip {
background: var(--surface);
box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 2px 6px -3px rgba(26,23,20,0.08);
}
/* Stop infinite continuous animations on mobile (huge battery + jank win) */
.hero__glow,
.hero__orb,
.cs-product,
.cs-stat,
.btn__sparkle,
.hero-chip__icon {
animation: none !important;
}
/* Reduce blur radii — blur is paint-heavy on mobile */
.hero__glow--1, .hero__glow--2 { filter: blur(40px); opacity: 0.35; }
.hero__noise { display: none; } /* noise overlay = wasted paint */
/* Hide heavy decorative elements on mobile */
.hero__orb { display: none; } /* big 720px SVG = perf cost */
.hero__canvas { display: none !important; } /* canvas painted nothing on mobile, JS skips, CSS fallback */
.hero__grid { opacity: 0.4; } /* lighten grid lines */
/* Kill 3D perspective + tilt (was causing reflow on every move) */
.results__row, .testimonial__small-grid, .edge__grid { perspective: none; }
.case-story--sm, .quote-card, .edge__card { transform-style: flat; }
/* Reduce shimmer/sweep on chips */
.hero-chip::before, .hero-chip::after { display: none; }
/* Slow down marquees on mobile (less GPU thrash on slow devices) */
.logos__track.is-marquee { animation-duration: 60s; }
/* Content-visibility: skip rendering offscreen sections */
.service-pin, .results, .testimonial, .manifesto, .about, .cta, .footer {
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}
/* will-change cleanup — leave only on actively interactive elements */
[data-parallax], .footer__mega { will-change: auto; }
}
/* Also disable on coarse pointer touch devices regardless of width */
@media (pointer: coarse) {
.hero-chip::before, .hero-chip::after { display: none; }
.hero-chip__icon { animation: none !important; }
}
/* ============================================================
████████████████████████████████████████████████████████████
PREMIUM POLISH LAYER — Deep Midnight + Electric Coral
Global tech-agency theme. Hard-overrides every legacy light
surface (cream/white glass) to dark glass; refreshes accent
gradients; restores contrast on every component.
████████████████████████████████████████████████████████████
============================================================ */
/* ── Refresh accent + gradient tokens to match new dark palette ── */
:root {
--grad-accent: linear-gradient(135deg, #5af2b0 0%, #00e88f 45%, #009a5c 100%);
--grad-accent-soft: linear-gradient(135deg, rgba(90,242,176,0.18) 0%, rgba(0,232,143,0.10) 100%);
--grad-ink: linear-gradient(160deg, #16161f 0%, #1d1d28 55%, #11111c 100%);
--grad-aurora: conic-gradient(from 220deg at 70% 30%,
rgba(0,232,143,0.22),
rgba(90,242,176,0.12),
rgba(140,90,220,0.16),
rgba(60,110,220,0.14),
rgba(0,232,143,0.22));
--grad-glass: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
--grad-glass-dark: linear-gradient(180deg, rgba(22,22,31,0.92) 0%, rgba(10,10,18,0.85) 100%);
--grad-shine: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.18) 50%, transparent 62%, transparent 100%);
--grad-section-divider: linear-gradient(90deg, transparent 0%, var(--line-2) 20%, var(--accent) 50%, var(--line-2) 80%, transparent 100%);
--shadow-glow-accent: 0 0 0 1px rgba(0,232,143,0.25), 0 12px 32px -8px rgba(0,232,143,0.45), 0 4px 12px -2px rgba(0,232,143,0.3);
}
/* ── theme-color flip for browser chrome ── */
html[data-theme="light"] { color-scheme: dark; }
/* ── HERO grid + noise — light lines on dark, lighter noise ── */
.hero__grid {
background-image:
linear-gradient(rgba(245,245,250,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,245,250,0.05) 1px, transparent 1px);
}
.hero__noise {
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: screen;
opacity: 0.12;
}
/* Hero orb — more vibrant gradient stops */
.hero__orb svg #orbGrad stop:nth-child(1) { stop-color: #ffffff; stop-opacity: 0.6; }
.hero__orb svg #orbGrad stop:nth-child(2) { stop-color: #5af2b0; stop-opacity: 0.35; }
.hero__orb svg #orbGrad stop:nth-child(3) { stop-color: #00e88f; stop-opacity: 0; }
/* ── HERO glow orbs — stronger neon ── */
.hero__glow--1 {
background: radial-gradient(circle,
rgba(0,232,143,0.42) 0%,
rgba(90,242,176,0.22) 40%,
transparent 70%) !important;
filter: blur(80px);
}
.hero__glow--2 {
background: radial-gradient(circle,
rgba(140,90,220,0.36) 0%,
rgba(60,110,220,0.22) 40%,
rgba(0,232,143,0.10) 70%,
transparent 85%) !important;
filter: blur(90px);
}
/* ── Hero eyebrow chip — dark glass ── */
.hero__eyebrow {
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
color: var(--ink-2) !important;
}
.hero__eyebrow::before {
background: linear-gradient(135deg,
rgba(0,232,143,0.55) 0%,
rgba(140,90,220,0.35) 30%,
rgba(60,110,220,0.35) 70%,
rgba(0,232,143,0.45) 100%) !important;
}
.hero__eyebrow .he-num {
color: var(--accent) !important;
border-right-color: var(--line-2) !important;
}
.hero__eyebrow .he-flag {
border-color: rgba(245,245,250,0.18) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
/* ── Hero title — vibrant gradient italic ── */
.hero__title em {
background: linear-gradient(180deg,
var(--ink) 0%,
var(--ink) 20%,
#5af2b0 60%,
var(--accent) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 4px 24px rgba(0,232,143,0.4)) !important;
}
.hero__title::before {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 30%, transparent 100%) !important;
box-shadow: 0 0 16px rgba(0,232,143,0.6);
}
/* ── Hero proof — dark glass ── */
.hero__proof {
background: linear-gradient(180deg, rgba(22,22,31,0.85) 0%, rgba(17,17,28,0.65) 100%) !important;
border: 1px solid var(--line) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 2px 4px rgba(0,0,0,0.3),
0 16px 32px -12px rgba(0,0,0,0.5),
0 4px 12px -4px rgba(0,232,143,0.12) !important;
}
.hero__proof::before {
background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) !important;
}
.hero__proof-item { color: var(--ink-2) !important; }
.hero__proof-item strong { color: var(--ink) !important; }
.hero__proof-item:nth-child(1) .hero__proof-icon { background: var(--accent) !important; color: #fff !important; }
.hero__proof-item:nth-child(2) .hero__proof-icon { background: linear-gradient(135deg, #6e6efb, #4040d4) !important; color: #fff !important; }
.hero__proof-item:nth-child(3) .hero__proof-icon { background: #e30a17 !important; color: #fff !important; }
/* ── Hero chips — dark glass with accent glow ── */
.hero-chip {
background: linear-gradient(180deg, rgba(22,22,31,0.85) 0%, rgba(17,17,28,0.7) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--ink) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 1px 2px rgba(0,0,0,0.3),
0 10px 24px -10px rgba(0,0,0,0.55) !important;
}
.hero-chip:hover {
border-color: rgba(0,232,143,0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 2px 4px rgba(0,0,0,0.4),
0 24px 48px -16px rgba(0,232,143,0.45),
0 12px 24px -8px rgba(0,0,0,0.5) !important;
}
.hero-chip::before {
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%) !important;
}
.hero-chip__text { color: var(--ink) !important; }
.hero-chip__sub { color: var(--muted-2) !important; }
.hero-chip__arrow { background: rgba(255,255,255,0.06) !important; color: var(--ink) !important; }
.hero-chip:hover .hero-chip__arrow {
background: var(--accent) !important;
color: #fff !important;
box-shadow: 0 4px 12px -2px rgba(0,232,143,0.6) !important;
}
/* Per-chip color palette refreshed */
.hero-chip:nth-child(1) {
--chip-icon-bg: rgba(0,232,143,0.18);
--chip-icon-color: #5af2b0;
--chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(0,232,143,0.32), transparent 70%);
}
.hero-chip:nth-child(2) {
--chip-icon-bg: rgba(110,110,251,0.18);
--chip-icon-color: #9b9bff;
--chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(110,110,251,0.32), transparent 70%);
}
.hero-chip:nth-child(3) {
--chip-icon-bg: rgba(168,245,90,0.18);
--chip-icon-color: #a8f55a;
--chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(168,245,90,0.32), transparent 70%);
}
.hero-chip:nth-child(4) {
--chip-icon-bg: rgba(60,210,140,0.18);
--chip-icon-color: #5ee0a0;
--chip-glow: radial-gradient(80% 100% at 0% 50%, rgba(60,210,140,0.32), transparent 70%);
}
/* ── Hero ticker — dark divider line ── */
.hero__ticker { border-top-color: var(--line) !important; }
.hero__ticker::before {
background: linear-gradient(90deg,
transparent 0%,
var(--line-2) 15%,
var(--accent) 50%,
var(--line-2) 85%,
transparent 100%) !important;
}
.hero__meta-num {
background: linear-gradient(180deg, var(--ink) 0%, #b8b8c2 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.hero__meta-sep { background: var(--line) !important; }
/* ── Hero live + scroll badges — dark glass ── */
.hero__live {
background: linear-gradient(180deg, rgba(22,22,31,0.78) 0%, rgba(17,17,28,0.55) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--ink-2) !important;
}
.hero__scroll {
background: linear-gradient(180deg, rgba(22,22,31,0.6) 0%, rgba(17,17,28,0.4) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--muted-2) !important;
}
.hero__scroll-line {
background: linear-gradient(to right, var(--muted-2), transparent) !important;
}
.hero__scroll-line::after { background: var(--accent) !important; }
/* ── Navigation glass — dark ── */
.nav__menu {
background: linear-gradient(180deg, rgba(22,22,31,0.7) 0%, rgba(17,17,28,0.5) 100%) !important;
border-color: var(--line) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 1px 2px rgba(0,0,0,0.3),
0 6px 20px -10px rgba(0,0,0,0.55) !important;
}
.nav__link { color: var(--ink-2) !important; }
.nav__link:hover { color: #fff !important; }
.nav__link::before {
background: linear-gradient(135deg, var(--accent) 0%, #009a5c 100%) !important;
}
.nav__link.is-active { color: var(--ink) !important; }
.nav__link.is-active::after { background: var(--accent) !important; }
.nav--scrolled {
background: rgba(10,10,18,0.78) !important;
backdrop-filter: saturate(180%) blur(24px) !important;
border-bottom-color: var(--line) !important;
}
.nav__logo,
.nav__logo-name,
.nav__logo-mark { color: var(--ink) !important; }
.nav__logo-mark svg rect { fill: var(--ink) !important; }
.nav__logo-mark svg path { fill: var(--canvas) !important; }
.nav__logo-dot { color: var(--accent) !important; }
.nav__logo-tag { color: var(--muted-2) !important; }
.nav__logo-tag-line { background: linear-gradient(90deg, transparent, var(--muted-2) 50%, transparent) !important; }
/* ── Top strip — keep dark, refine ── */
.top-strip {
background: linear-gradient(180deg, #14141f 0%, #0e0e15 100%) !important;
border-bottom-color: var(--line) !important;
}
/* ── LOGOS section — dark background ── */
.logos {
background: linear-gradient(180deg, var(--canvas) 0%, #0e0e18 50%, var(--canvas) 100%) !important;
border-top-color: var(--line) !important;
border-bottom-color: var(--line) !important;
}
.logo { color: var(--ink-2) !important; opacity: 0.45; }
.logo:hover { color: var(--accent) !important; opacity: 1; }
.logos__eyebrow { color: var(--muted-2) !important; }
.logos__title { color: var(--ink) !important; }
/* ── COMPARE section — dark cards ── */
.compare__col--us {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--ink) !important;
}
.compare__col--us:hover {
border-color: rgba(0,232,143,0.55) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 2px 4px rgba(0,0,0,0.3),
0 32px 64px -16px rgba(0,232,143,0.38),
0 16px 32px -12px rgba(0,0,0,0.5) !important;
}
.compare__col--them {
background: linear-gradient(180deg, rgba(22,22,31,0.5) 0%, rgba(17,17,28,0.35) 100%) !important;
border: 1px dashed var(--line) !important;
color: var(--muted-2) !important;
}
.compare__col--us .compare__col-title strong { color: var(--ink) !important; }
.compare__col--us .compare__col-title span { color: var(--muted-2) !important; }
.compare__col--them .compare__col-title strong { color: var(--muted) !important; }
.compare__col--them .compare__col-title span { color: var(--muted) !important; }
.compare__list li { color: var(--ink-2) !important; }
.compare__col--them .compare__list li { color: var(--muted) !important; }
.compare__col--us .compare__list li strong { color: var(--ink) !important; }
.compare__mark svg rect { fill: var(--accent) !important; }
.compare__mark svg path { fill: var(--canvas) !important; }
.compare__mark--neutral { background: rgba(255,255,255,0.05) !important; color: var(--muted-2) !important; }
.compare__badge--good { background: rgba(60,210,140,0.18) !important; color: #5ee0a0 !important; }
.compare__badge--bad { background: rgba(150,150,170,0.12) !important; color: var(--muted-2) !important; }
/* ── SERVICES section — dark cards ── */
.svc-card {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--ink) !important;
}
.svc-card[data-tone="accent"] .svc-card__num { color: var(--accent) !important; }
.svc-card[data-tone="green"] .svc-card__num { color: #5ee0a0 !important; }
.svc-card[data-tone="amber"] .svc-card__num { color: #a8f55a !important; }
.svc-card[data-tone="ink"] .svc-card__num { color: var(--ink) !important; }
.svc-card[data-tone="accent"] .svc-card__icon { background: rgba(0,232,143,0.18) !important; color: #5af2b0 !important; border-color: rgba(0,232,143,0.3) !important; }
.svc-card[data-tone="green"] .svc-card__icon { background: rgba(60,210,140,0.18) !important; color: #5ee0a0 !important; border-color: rgba(60,210,140,0.3) !important; }
.svc-card[data-tone="amber"] .svc-card__icon { background: rgba(168,245,90,0.18) !important; color: #a8f55a !important; border-color: rgba(168,245,90,0.3) !important; }
.svc-card[data-tone="ink"] .svc-card__icon { background: var(--ink) !important; color: var(--canvas) !important; border-color: var(--ink) !important; }
.svc-card[data-tone="accent"] .svc-card__tag { background: rgba(0,232,143,0.14) !important; color: #5af2b0 !important; border-color: rgba(0,232,143,0.3) !important; }
.svc-card__tag--hot { background: linear-gradient(135deg, var(--accent), #009a5c) !important; color: #fff !important; border-color: rgba(0,232,143,0.5) !important; box-shadow: 0 4px 12px -2px rgba(0,232,143,0.4) !important; }
.svc-card__title { color: var(--ink) !important; }
.svc-card__hook { color: var(--muted-2) !important; }
.svc-card__label { color: var(--muted-2) !important; }
.svc__bar { background: linear-gradient(180deg, rgba(22,22,31,0.7) 0%, rgba(17,17,28,0.5) 100%) !important; border-color: var(--line) !important; color: var(--ink-2) !important; }
.svc__bar li strong { color: var(--ink) !important; }
.svc__bar li svg { color: var(--accent) !important; }
.svc__hint { color: var(--muted-2) !important; }
/* ── Section eyebrow — dark glass ── */
.section-eyebrow {
background: linear-gradient(180deg, rgba(22,22,31,0.75) 0%, rgba(17,17,28,0.55) 100%) !important;
border-color: var(--line) !important;
color: var(--muted-2) !important;
}
.section-eyebrow .dot { background: var(--accent) !important; }
.section-title { color: var(--ink) !important; }
.section-title em {
background: linear-gradient(180deg,
var(--ink) 0%,
var(--ink) 30%,
#5af2b0 70%,
var(--accent) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.section-sub { color: var(--muted-2) !important; }
.section-sub strong { color: var(--ink) !important; }
/* ── Buttons on dark — primary becomes accent gradient ── */
.btn--primary {
background: linear-gradient(180deg, #5af2b0 0%, #00e88f 55%, #009a5c 100%) !important;
color: #fff !important;
border-color: rgba(0,232,143,0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 2px 4px rgba(0,0,0,0.4),
0 12px 32px -8px rgba(0,232,143,0.55),
0 6px 16px -4px rgba(0,0,0,0.45) !important;
}
.btn--primary:hover {
background: linear-gradient(180deg, #ffa078 0%, #ff7048 55%, #d8442a 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 2px 4px rgba(0,0,0,0.45),
0 22px 48px -8px rgba(0,232,143,0.7),
0 12px 24px -4px rgba(0,0,0,0.55) !important;
}
.btn--ghost {
background: linear-gradient(180deg, rgba(22,22,31,0.7) 0%, rgba(17,17,28,0.5) 100%) !important;
color: var(--ink) !important;
border-color: var(--line) !important;
}
.btn--ghost:hover {
background: linear-gradient(180deg, rgba(29,29,40,0.85) 0%, rgba(22,22,31,0.7) 100%) !important;
border-color: var(--accent) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 2px 4px rgba(0,0,0,0.3),
0 12px 28px -8px rgba(0,232,143,0.28) !important;
}
/* ── Compare check icons — refreshed ── */
.compare__ic--check {
background: linear-gradient(135deg, #5ee0a0 0%, #3cb87a 100%) !important;
color: #14141f !important;
}
.compare__ic--x {
background: rgba(150,150,170,0.12) !important;
color: var(--muted-2) !important;
border-color: rgba(150,150,170,0.18) !important;
}
/* ── Service arrow buttons ── */
.svc__arrow {
background: linear-gradient(180deg, rgba(22,22,31,0.7) 0%, rgba(17,17,28,0.5) 100%) !important;
border-color: var(--line) !important;
color: var(--ink) !important;
}
.svc__arrow:hover {
background: linear-gradient(180deg, var(--accent) 0%, #009a5c 100%) !important;
color: #fff !important;
border-color: var(--accent) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 8px 20px -4px rgba(0,232,143,0.55) !important;
}
/* ── Body backdrop aurora (dark version) ── */
body::after {
background:
radial-gradient(60% 40% at 20% 15%, rgba(0,232,143,0.10), transparent 60%),
radial-gradient(50% 35% at 85% 25%, rgba(140,90,220,0.09), transparent 60%),
radial-gradient(55% 40% at 70% 85%, rgba(60,110,220,0.08), transparent 60%),
radial-gradient(45% 30% at 15% 75%, rgba(90,242,176,0.06), transparent 60%) !important;
}
/* ── Selection ── */
::selection { background: rgba(0,232,143,0.4); color: #fff; }
::-moz-selection { background: rgba(0,232,143,0.4); color: #fff; }
/* ── Scrollbar ── */
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--line-2), var(--muted)) !important;
border-color: var(--canvas) !important;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--accent), #009a5c) !important;
}
/* ── Skip link ── */
.skip-link { background: var(--accent); color: #fff; }
/* ── Edge cards (if surfaced) ── */
.edge__card {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
border-color: var(--line) !important;
color: var(--ink) !important;
}
.edge__card h3 { color: var(--ink) !important; }
.edge__card p { color: var(--muted-2) !important; }
.edge__icon { background: rgba(0,232,143,0.18) !important; color: #5af2b0 !important; }
.edge__num { color: var(--muted) !important; }
.edge__metric { color: var(--ink-2) !important; }
.edge__metric b { color: var(--accent) !important; }
/* ── Manifesto + results + testimonials text on dark ── */
.manifesto__line { color: var(--ink-2) !important; }
.manifesto__line em { color: var(--accent) !important; }
.manifesto__line--1,
.manifesto__line--3,
.manifesto__line--5 { color: var(--muted-2) !important; }
.manifesto__line--final { color: var(--ink) !important; }
.manifesto__big span { color: rgba(255,255,255,0.04) !important; }
.manifesto__sign-mark { color: var(--ink) !important; }
.manifesto__sign-meta { color: var(--muted-2) !important; }
/* ── Footer top divider — vivid ── */
.footer::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(0,232,143,0.6) 20%,
rgba(90,242,176,0.7) 50%,
rgba(0,232,143,0.6) 80%,
transparent 100%) !important;
}
.footer { background: linear-gradient(180deg, #14141f 0%, #0a0a12 100%) !important; }
.footer__col h4 { color: var(--ink) !important; }
.footer__col a,
.footer__col span { color: var(--muted-2) !important; }
.footer__contact svg { color: var(--accent) !important; }
/* ── CTA section already dark — refresh accents only ── */
.cta { background: linear-gradient(180deg, #14141f 0%, #0e0e18 55%, #14141f 100%) !important; }
.cta::before {
background:
radial-gradient(50% 35% at 20% 20%, rgba(0,232,143,0.32), transparent 60%),
radial-gradient(40% 30% at 80% 30%, rgba(140,90,220,0.22), transparent 60%),
radial-gradient(55% 40% at 70% 90%, rgba(60,110,220,0.20), transparent 60%) !important;
}
.cta__form-badge {
background: linear-gradient(180deg, rgba(60,210,140,0.2) 0%, rgba(40,180,110,0.12) 100%) !important;
border-color: rgba(60,210,140,0.35) !important;
color: #5ee0a0 !important;
}
.cta .btn--primary {
background: linear-gradient(180deg, #5af2b0 0%, #00e88f 55%, #009a5c 100%) !important;
}
.cta .btn--primary:hover {
background: linear-gradient(180deg, #ffa078 0%, #ff7048 55%, #d8442a 100%) !important;
}
/* ── Logos eyebrow dot ── */
.logos__eyebrow-dot { background: var(--accent) !important; box-shadow: 0 0 10px rgba(0,232,143,0.6) !important; }
/* ── Misc small bits ── */
.compare__badge--good svg,
.compare__badge--bad svg { width: 14px; height: 14px; }
.svc__bar svg { color: var(--accent) !important; }
/* ============================================================ */
/* End dark-theme uniformity patch */
/* ============================================================ */
/* ============================================================
COMPREHENSIVE DARK-THEME SWEEP
Catches every remaining section that still had warm light
surfaces, transparent whites, or hardcoded light text.
============================================================ */
/* ─── SVC BAR (guarantees strip above carousel) ─── */
.svc__bar {
background: linear-gradient(180deg, rgba(22,22,31,0.85) 0%, rgba(17,17,28,0.65) 100%) !important;
border: 1px solid var(--line) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 2px 4px rgba(0,0,0,0.3),
0 10px 24px -10px rgba(0,0,0,0.45) !important;
color: var(--ink-2) !important;
}
.svc__bar li svg { color: var(--accent) !important; }
.svc__bar li strong { color: var(--ink) !important; }
.svc__bar li { color: var(--ink-2) !important; }
/* ─── SVC card detail blocks ─── */
.svc-card__includes {
background: linear-gradient(180deg, rgba(10,10,18,0.6) 0%, rgba(17,17,28,0.4) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--ink-2) !important;
}
.svc-card__includes-head { color: var(--muted-2) !important; }
.svc-card__includes .svc-card__list li { color: var(--ink-2) !important; }
.svc-card__guarantee {
background: linear-gradient(180deg, rgba(60,210,140,0.18) 0%, rgba(40,180,110,0.08) 100%) !important;
border-color: rgba(60,210,140,0.35) !important;
color: #5ee0a0 !important;
}
.svc-card__guarantee svg { color: #5ee0a0 !important; }
.svc-card__list li { color: var(--ink-2) !important; }
.svc-card__list li::before { background: var(--accent) !important; }
.svc-card__promise { color: var(--muted-2) !important; }
.svc-card__promise strong { color: var(--ink) !important; }
/* SEE-ALL card already dark by design — refresh accent only */
.svc-card--all {
background: linear-gradient(160deg, #11111c 0%, #16161f 60%, #14141f 100%) !important;
color: var(--ink) !important;
border-color: var(--line-2) !important;
}
.svc-card--all .svc-card__icon {
background: rgba(0,232,143,0.15) !important;
color: #5af2b0 !important;
border-color: rgba(0,232,143,0.3) !important;
}
.svc-card--all::after {
background: radial-gradient(circle, rgba(0,232,143,0.5), transparent 60%) !important;
}
/* ─── SVC bottom CTA ─── */
.svc__bottom {
background: linear-gradient(160deg, var(--surface) 0%, var(--canvas-2) 100%) !important;
border: 1px solid var(--line) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 1px 2px rgba(0,0,0,0.3),
0 30px 60px -30px rgba(0,0,0,0.6) !important;
}
.svc__bottom-copy h3 { color: var(--ink) !important; }
.svc__bottom-copy h3 em { color: var(--accent) !important; }
.svc__bottom-copy p { color: var(--muted-2) !important; }
.svc__bottom-copy p strong { color: var(--ink) !important; }
.svc__bottom-eye { color: var(--muted-2) !important; }
.svc__bottom-perks li { color: var(--ink-2) !important; }
.svc__bottom-perks li svg { color: #5ee0a0 !important; }
.svc__bottom-meta { color: var(--muted-2) !important; }
.svc__bottom-meta svg { color: var(--muted) !important; }
/* ─── SVC dots ─── */
.svc__dot {
background: var(--line-2) !important;
}
.svc__dot.is-active {
background: var(--accent) !important;
}
/* ─── WALL OF LOVE — Reviews section ─── */
.wall {
background: linear-gradient(180deg, #0e0e18 0%, var(--canvas) 50%, #0e0e18 100%) !important;
border-top-color: var(--line) !important;
border-bottom-color: var(--line) !important;
}
.wall__bg {
background:
radial-gradient(800px 500px at 15% 0%, rgba(0,232,143,0.12), transparent 60%),
radial-gradient(700px 500px at 85% 100%, rgba(140,90,220,0.14), transparent 60%) !important;
}
.wall__stats {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
border: 1px solid var(--line) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 2px 4px rgba(0,0,0,0.3),
0 18px 40px -16px rgba(0,0,0,0.55) !important;
}
.wall__stat-num { color: var(--ink) !important; }
.wall__stat-of { color: var(--muted-2) !important; }
.wall__stat-label { color: var(--muted-2) !important; }
.wall__stars { color: #ffb840 !important; }
.wall__counter { color: var(--ink) !important; }
.wall__counter-now { color: var(--accent) !important; }
.wall__counter-sep,
.wall__counter-tot { color: var(--muted-2) !important; }
.wall__counter-label { color: var(--muted) !important; }
.wall__hint { color: var(--muted-2) !important; }
.wall__arrow {
background: linear-gradient(180deg, rgba(22,22,31,0.85) 0%, rgba(17,17,28,0.65) 100%) !important;
border-color: var(--line-2) !important;
color: var(--ink) !important;
}
.wall__arrow:hover {
background: linear-gradient(180deg, var(--accent) 0%, #009a5c 100%) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
/* ─── Review card (rcard) ─── */
.rcard {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
border: 1px solid var(--line) !important;
color: var(--ink) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 1px 2px rgba(0,0,0,0.3),
0 12px 28px -14px rgba(0,0,0,0.55) !important;
}
.rcard:hover {
border-color: rgba(0,232,143,0.4) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 2px 4px rgba(0,0,0,0.4),
0 22px 48px -16px rgba(0,232,143,0.32),
0 12px 24px -10px rgba(0,0,0,0.55) !important;
}
.rcard__who strong { color: var(--ink) !important; }
.rcard__who span { color: var(--muted-2) !important; }
.rcard__text { color: var(--ink-2) !important; }
.rcard__foot { color: var(--muted) !important; border-top-color: var(--line) !important; }
.rcard__source { color: var(--ink-2) !important; }
.rcard__tag {
background: rgba(0,232,143,0.18) !important;
border-color: rgba(0,232,143,0.35) !important;
color: #5af2b0 !important;
}
.rcard__stars { color: #ffb840 !important; }
.rcard__avatar { box-shadow: 0 4px 12px -2px rgba(0,0,0,0.55) !important; }
/* ─── Wall progress + disclaimer ─── */
.wall__progress {
background: rgba(255,255,255,0.06) !important;
}
.wall__progress-fill {
background: linear-gradient(90deg, var(--accent), #5af2b0) !important;
}
.wall__disclaimer {
background: linear-gradient(180deg, rgba(22,22,31,0.6) 0%, rgba(17,17,28,0.4) 100%) !important;
border: 1px dashed var(--line-2) !important;
color: var(--muted-2) !important;
}
.wall__disclaimer strong { color: var(--ink) !important; }
.wall__disclaimer-ic { color: var(--accent) !important; }
.wall__more {
background: linear-gradient(180deg, rgba(22,22,31,0.85) 0%, rgba(17,17,28,0.65) 100%) !important;
border: 1px solid var(--line-2) !important;
color: var(--ink) !important;
}
.wall__more:hover {
background: linear-gradient(180deg, var(--accent) 0%, #009a5c 100%) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
/* ─── Logo mark fills (path inside rect) keep light ─── */
.nav__logo-mark svg rect { fill: var(--ink) !important; }
.nav__logo-mark svg path { fill: var(--canvas) !important; }
.compare__mark svg rect { fill: var(--accent) !important; }
.compare__mark svg path { fill: #fff !important; }
.footer__logo .nav__logo-mark svg rect { fill: var(--ink) !important; }
.footer__logo .nav__logo-mark svg path { fill: var(--canvas) !important; }
/* ─── Hero ticker numbers + meta seperator ─── */
.hero__meta-num { color: var(--ink) !important; }
.hero__meta-label { color: var(--muted-2) !important; }
/* ─── Service-pin section (legacy, may still render briefly) ─── */
.service-pin { background: var(--canvas-2) !important; border-top-color: var(--line) !important; border-bottom-color: var(--line) !important; }
.service-pin__count { color: var(--ink) !important; }
.service-pin__count-now { color: var(--accent) !important; }
.service-pin__count-sep,
.service-pin__count-tot { color: var(--muted-2) !important; }
/* ─── Hero locations text ─── */
.hero__locations { color: var(--muted-2) !important; }
.hero__locations .sep { color: var(--muted) !important; }
/* ─── Top strip text ─── */
.ts-status { color: var(--ink) !important; }
.ts-promise { color: var(--muted-2) !important; }
.ts-lang { color: var(--muted) !important; }
.ts-lang:hover { color: var(--ink) !important; }
.ts-lang--active { color: var(--ink) !important; background: rgba(255,255,255,0.08) !important; }
.ts-lang-sep { color: var(--muted) !important; }
/* ─── Hero sub paragraph + strong ─── */
.hero__sub { color: var(--muted-2) !important; }
.hero__sub strong { color: var(--ink) !important; }
/* ─── Buttons reset for any small variant on dark surfaces ─── */
.btn--sm.btn--primary { color: #fff !important; }
/* ─── Mobile carousel scrollbar (svc track) ─── */
.svc__track::-webkit-scrollbar-thumb { background: var(--line-2) !important; }
.svc__track::-webkit-scrollbar-thumb:hover { background: var(--muted) !important; }
/* ─── Section eyebrow inside dark CTA/footer needs to stay readable ─── */
.cta .section-eyebrow,
.cta__eye {
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
color: var(--muted-2) !important;
}
/* ─── CTA content text ─── */
.cta__title { color: var(--ink) !important; }
.cta__title em {
background: linear-gradient(180deg, var(--ink) 0%, #5af2b0 60%, var(--accent) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.cta__sub { color: var(--muted-2) !important; }
.cta__perks li { color: var(--ink-2) !important; }
.cta__perks li strong { color: var(--ink) !important; }
.cta__perks li svg { color: #5ee0a0 !important; }
.cta__legal { color: var(--muted-2) !important; }
.cta__legal strong { color: var(--ink) !important; }
.cta__legal a { color: var(--muted-2) !important; }
.cta__form-head-text strong { color: var(--ink) !important; }
.cta__form-head-text span { color: var(--muted-2) !important; }
.cta__fields input,
.cta__fields textarea,
.cta__fields select,
.cta__fields .field input,
.cta__fields .field textarea {
background: rgba(255,255,255,0.04) !important;
border: 1px solid var(--line-2) !important;
color: var(--ink) !important;
}
.cta__fields input::placeholder,
.cta__fields textarea::placeholder { color: var(--muted) !important; }
.cta__fields label,
.field label { color: var(--ink-2) !important; }
/* ─── Footer top bg + bottom bg ─── */
.footer { color: var(--ink-2) !important; }
.footer__mission { color: var(--ink-2) !important; }
.footer__mission strong { color: var(--ink) !important; }
.footer__social a {
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
border: 1px solid var(--line-2) !important;
color: var(--ink-2) !important;
}
.footer__contact { color: var(--ink-2) !important; }
.footer__bottom,
.footer__legal { color: var(--muted-2) !important; border-top-color: var(--line) !important; }
/* ─── Misc small fix-ups ─── */
.field input, .field textarea, .field select { background: rgba(255,255,255,0.04) !important; color: var(--ink) !important; border-color: var(--line-2) !important; }
.skip-link { background: var(--accent) !important; color: #fff !important; }
/* ─── Logos eyebrow dot pulse ─── */
.logos__eyebrow-dot {
animation: pulseAccent 2.4s ease-in-out infinite !important;
}
/* ─── Final catch: ensure any element fills using --canvas hex stays visible ─── */
[fill="#f5f1e8"]:not(.nav__logo-mark *):not(.compare__mark *):not(.footer__logo *) {
fill: var(--ink) !important;
}
/* ───────────────────────────────────────────────────────────
END comprehensive sweep
─────────────────────────────────────────────────────────── */
/* ============================================================
PER-SECTION PREMIUM AURORAS
Each section gets its own subtle color signature so the
page never feels like a flat black slab. Premium feel.
============================================================ */
/* === Compare section — coral aurora === */
.compare {
background:
linear-gradient(180deg, var(--canvas) 0%, #0d0d18 50%, var(--canvas) 100%) !important;
border-top: 1px solid var(--line) !important;
border-bottom: 1px solid var(--line) !important;
position: relative;
}
.compare::before {
background:
radial-gradient(800px 500px at 12% 0%, rgba(0,232,143,0.18), transparent 60%),
radial-gradient(700px 480px at 88% 100%, rgba(140,90,220,0.16), transparent 60%) !important;
z-index: 0 !important;
}
.compare::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(0,232,143,0.5) 50%, transparent 100%);
z-index: 5;
}
/* === Services section — violet+coral split aurora === */
.svc {
position: relative;
background:
linear-gradient(180deg, var(--canvas) 0%, #0e0e1c 50%, var(--canvas) 100%) !important;
}
.svc::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 600px at 80% 10%, rgba(140,90,220,0.14), transparent 60%),
radial-gradient(700px 500px at 10% 90%, rgba(0,232,143,0.12), transparent 60%);
pointer-events: none;
z-index: 0;
}
.svc::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(140,90,220,0.45) 50%, transparent 100%);
z-index: 5;
}
.svc .container { position: relative; z-index: 1; }
.svc__viewport { position: relative; z-index: 1; }
/* === Wall (reviews) — amber+coral aurora === */
.wall {
background:
linear-gradient(180deg, #0e0e18 0%, var(--canvas) 40%, var(--canvas) 60%, #0e0e18 100%) !important;
}
.wall__bg {
background:
radial-gradient(900px 600px at 15% 5%, rgba(168,245,90,0.16), transparent 60%),
radial-gradient(800px 550px at 85% 95%, rgba(0,232,143,0.14), transparent 60%) !important;
}
.wall::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: rgba(0,232,143,0.42);
z-index: 5;
}
/* === Logos section — refined === */
.logos {
background:
linear-gradient(180deg, var(--canvas) 0%, #0d0d18 50%, var(--canvas) 100%) !important;
position: relative;
}
/* === Hero meta dividers ──────────────────────────────────── */
.hero__meta-sep { background: var(--line) !important; }
/* === Compare list bg-hover row === */
.compare__col--us .compare__list li:hover {
background: rgba(0,232,143,0.06);
border-radius: 6px;
}
.compare__col--them .compare__list li:hover {
background: rgba(255,255,255,0.03);
border-radius: 6px;
}
/* === Compare us card — refined glow border === */
.compare__col--us {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 60%, #0e0e18 100%) !important;
border: 1px solid var(--line-2) !important;
}
.compare__col--us::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg,
rgba(0,232,143,0.5) 0%,
rgba(90,242,176,0.3) 30%,
rgba(140,90,220,0.3) 70%,
rgba(0,232,143,0.4) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
transition: opacity 0.5s var(--ease-smooth);
}
.compare__col--us:hover::before { opacity: 1; }
/* === The compare__col--us:hover override that referenced #ffffff === */
.compare__col--us:hover {
background: linear-gradient(180deg, var(--surface-2) 0%, #1d1d28 60%, #11111c 100%) !important;
}
/* === Section transitions: gradient strip BETWEEN sections === */
section + section {
position: relative;
}
section + section::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--grad-section-divider) !important;
opacity: 0.5;
z-index: 6;
}
/* === Force any remaining hardcoded warm colors into dark === */
[style*="background: #efe4d0"],
[style*="background:#efe4d0"],
[style*="background-color: #efe4d0"] {
background: var(--canvas) !important;
}
/* === Reviews stat strip stat numbers stay readable === */
.wall__stat-num strong { color: var(--ink) !important; }
/* ───────────────────────────────────────────────────────────
END per-section auroras
─────────────────────────────────────────────────────────── */
/* ============================================================
VISIBILITY FIX-UP + DYNAMIC MOTION LAYER
1) Catches remaining low-contrast text/icons
2) Adds movement so page never feels static
============================================================ */
/* ── SVG fix-ups for icons that broke on dark ── */
/* Logo cutout fills (VERTEX, lumos.io etc) — were var(--canvas) (now dark) */
.logo svg [fill="var(--canvas)"] { fill: var(--canvas) !important; }
/* That intentionally keeps them DARK because the parent is currentColor (also DARK on dark);
instead we make the parent shapes light-ish */
.logos__track .logo {
color: var(--ink-2) !important;
opacity: 0.55;
}
.logos__track .logo:hover { color: #5af2b0 !important; opacity: 1; }
/* Footer office flags — add a faint outline so dark stripes are visible */
.footer__office-flag {
border-radius: 4px;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.18),
0 2px 6px -1px rgba(0,0,0,0.4);
}
.footer__office-flag svg {
display: block;
width: 100%;
height: 100%;
}
/* ── Force minimum contrast on common text colors used on dark surfaces ── */
.compare__list li,
.compare__col--us .compare__list li,
.svc-card__list li,
.cta__perks li,
.footer__col a,
.footer__col span,
.rcard__text,
.svc__bar li,
.hero__proof-item,
.hero__sub,
.section-sub,
.svc-card__hook,
.svc__bottom-perks li,
.cs-bar__row > span,
.manifesto__line,
.about p,
.testimonial p,
.wall__stat-label,
.cta__form-head-text span,
.case-story__desc {
color: var(--ink-2) !important;
}
.compare__col--them .compare__list li { color: var(--muted-2) !important; }
/* Headings, strongs, labels - keep brightest */
h1, h2, h3, h4, h5, h6,
.section-title,
.case-story__brand,
.case-story__num,
.svc-card__title,
.svc__bottom-copy h3,
.about h2, .about h3,
.testimonial h3,
.wall__stat-num strong,
.rcard__who strong,
.compare__col-title strong,
.footer__col h4,
.footer__logo .nav__logo-name,
.hero__title {
color: var(--ink) !important;
}
/* Strong/bold inside paragraphs */
strong { color: var(--ink) !important; }
.compare__col--them strong { color: var(--muted) !important; }
.compare__col--them .compare__col-title strong { color: var(--muted) !important; }
/* Muted small text */
.section-eyebrow,
.section-eyebrow-light,
.hero__locations,
.svc-card__label,
.svc__bottom-eye,
.svc__bottom-meta,
.case-story__period,
.case-story__label,
.process__step-time,
.footer__bottom,
.footer__legal,
.wall__hint,
.wall__counter-label,
.rcard__foot,
.cs-product__type,
.cs-product__vol,
.manifesto__sign-meta {
color: var(--muted-2) !important;
}
/* ── Animated gradient text (eyebrows, key labels) — subtle hue shift ── */
@keyframes hueShift {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(15deg); }
}
.section-eyebrow .dot,
.logos__eyebrow-dot,
.svc__bottom-eye .dot {
animation: pulseAccent 2.4s ease-in-out infinite, hueShift 8s ease-in-out infinite;
}
/* ── Animated gradient borders on premium cards ── */
@property --grad-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes spinBorder {
to { --grad-angle: 360deg; }
}
/* Hero proof: animated subtle conic border */
.hero__proof {
position: relative;
}
.hero__proof::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--grad-angle, 0deg),
rgba(0,232,143,0.4),
rgba(140,90,220,0.3),
rgba(60,120,220,0.3),
rgba(0,232,143,0.4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: spinBorder 12s linear infinite;
pointer-events: none;
opacity: 0.7;
}
/* ── Floating animation on hero chips (gentle Y bob staggered) ── */
@keyframes chipFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.hero-chip {
animation: chipIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards,
chipFloat 5s ease-in-out infinite;
animation-delay: calc(0.1s + var(--chip-i, 0) * 0.08s),
calc(1s + var(--chip-i, 0) * 0.6s);
}
}
/* ── Scroll progress bar at top of viewport ── */
body::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background:
radial-gradient(1200px 800px at 85% -10%, rgba(0,232,143,0.12), transparent 60%),
radial-gradient(1000px 700px at -10% 30%, rgba(140,90,220,0.10), transparent 60%),
radial-gradient(900px 600px at 50% 110%, rgba(60,110,220,0.08), transparent 65%);
/* Kept original radial backdrop, plus stacked progress strip via gradient */
pointer-events: none;
z-index: 0;
}
/* Dedicated scroll progress as a new fixed bar — leverage transform-based progress */
html {
--scroll-progress: 0;
}
body::after {
/* Keep original aurora pattern (defined earlier) */
}
/* New scroll-progress indicator (top edge) */
.scroll-progress,
body > .scroll-progress {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 2px;
z-index: 100;
background: linear-gradient(90deg, var(--accent), #5af2b0, #b585ff, var(--accent));
background-size: 300% 100%;
transform-origin: left;
transform: scaleX(var(--scroll-progress, 0));
animation: gradientShift 4s linear infinite;
pointer-events: none;
}
@keyframes gradientShift {
0% { background-position: 0% 0%; }
100% { background-position: 300% 0%; }
}
/* ── Animated section divider strips (gradient travel) ── */
@keyframes dividerSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
section + section::before {
background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, #b585ff 50%, var(--accent) 70%, transparent 100%) !important;
opacity: 0.7 !important;
}
/* ── Pulsing glow ring on primary CTAs ── */
@keyframes ctaGlow {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 2px 4px rgba(0,0,0,0.4),
0 12px 32px -8px rgba(0,232,143,0.55),
0 6px 16px -4px rgba(0,0,0,0.45);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 2px 4px rgba(0,0,0,0.4),
0 18px 44px -8px rgba(0,232,143,0.75),
0 10px 24px -4px rgba(90,242,176,0.4);
}
}
.hero__ctas .btn--primary,
.cta .btn--primary {
animation: ctaGlow 3.2s ease-in-out infinite;
}
/* ── Aurora drift on body backdrop (stronger animation) ── */
body::after {
animation: auroraDrift 18s ease-in-out infinite alternate !important;
}
/* ── Animated grain noise overlay on body ── */
.hero__noise {
animation: noiseShift 8s steps(8) infinite;
}
@keyframes noiseShift {
0% { transform: translate(0,0); }
10% { transform: translate(-1%,1%); }
20% { transform: translate(1%,-1%); }
30% { transform: translate(-2%,0); }
40% { transform: translate(2%,1%); }
50% { transform: translate(-1%,-2%); }
60% { transform: translate(0,2%); }
70% { transform: translate(1%,-1%); }
80% { transform: translate(-1%,0); }
90% { transform: translate(0,1%); }
100% { transform: translate(0,0); }
}
/* ── Animated link underline (footer, body links) ── */
.footer__col a,
.cta__legal a {
position: relative;
background-image: linear-gradient(90deg, var(--accent), #5af2b0);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.5s var(--ease-smooth), color 0.3s ease, transform 0.4s var(--ease-smooth), padding-left 0.4s var(--ease-smooth);
}
.footer__col a:hover,
.cta__legal a:hover {
background-size: 100% 1px;
}
/* ── Section eyebrow chip — animated coral dot orbit ── */
.section-eyebrow {
position: relative;
overflow: hidden;
}
.section-eyebrow::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background: conic-gradient(from var(--grad-angle, 0deg),
rgba(0,232,143,0.55),
transparent 30%,
transparent 70%,
rgba(0,232,143,0.55));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: spinBorder 6s linear infinite;
pointer-events: none;
opacity: 0.8;
}
/* ── Stat numbers count-pulse on hero ticker ── */
@keyframes statBreath {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1px); text-shadow: 0 0 24px rgba(0,232,143,0.4); }
}
.hero__meta-num { animation: statBreath 6s ease-in-out infinite; }
.hero__meta-item:nth-child(odd) .hero__meta-num { animation-delay: -3s; }
/* ── Hero glow orbs — slightly faster + larger amplitude ── */
@keyframes floatA2 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
33% { transform: translate(80px, -60px) scale(1.12); opacity: 0.85; }
66% { transform: translate(-40px, 40px) scale(0.95); opacity: 0.7; }
}
@keyframes floatB2 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
33% { transform: translate(-70px, 50px) scale(0.9); opacity: 0.8; }
66% { transform: translate(50px, -30px) scale(1.08); opacity: 0.65; }
}
.hero__glow--1 { animation: floatA2 18s ease-in-out infinite !important; }
.hero__glow--2 { animation: floatB2 22s ease-in-out infinite !important; }
/* ── Cursor glow follower (subtle ambient) ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
body {
background-image: radial-gradient(circle 400px at var(--cx, 50%) var(--cy, 50%), rgba(0,232,143,0.04), transparent 70%);
background-attachment: fixed;
}
}
/* ── Aurora rings around hero ── */
.hero {
position: relative;
}
.hero::after {
content: "";
position: absolute;
bottom: -1px;
left: 0; right: 0;
height: 80px;
background: linear-gradient(180deg, transparent 0%, var(--canvas) 100%);
pointer-events: none;
z-index: 4;
}
/* ── Reveal animation refinement ── */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
filter: blur(4px);
transition:
opacity 1.2s var(--ease-smooth),
transform 1.2s var(--ease-smooth),
filter 1.2s var(--ease-smooth);
}
[data-reveal].is-revealed,
[data-reveal].is-visible,
[data-reveal][data-revealed="true"] {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* ── Vibrate-free reduced-motion handling ── */
@media (prefers-reduced-motion: reduce) {
.hero__glow--1, .hero__glow--2,
.hero__meta-num,
.hero-chip,
body::after,
.hero__noise,
.hero__ctas .btn--primary,
.cta .btn--primary,
.section-eyebrow::before,
.hero__proof::after,
.logos__eyebrow-dot,
.section-eyebrow .dot {
animation: none !important;
}
}
/* Mobile: kill heavy motion */
@media (max-width: 900px) {
.hero__proof::after,
.section-eyebrow::before { display: none; }
.hero-chip { animation: chipIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards !important; }
body { background-image: none !important; }
}
/* ───────────────────────────────────────────────────────────
END motion + visibility layer
─────────────────────────────────────────────────────────── */
/* ============================================================
FIX: "Tahmin edilebilir büyüme." italic line invisible
Root cause: background-clip:text + text-fill-color:transparent
sometimes flickers/breaks; hero::after overlay (z-index 4)
could overlap. Use solid coral + glow as bulletproof fallback.
============================================================ */
/* Reset hero::after — it was covering content at z-index 4 */
.hero::after {
display: none !important;
}
/* Hero italic em — solid coral with subtle gradient glow + drop-shadow */
.hero__title em,
.hero__title .line--accent em {
/* Remove the clip-text technique entirely */
background: none !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
color: #5af2b0 !important;
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.018em !important;
filter: drop-shadow(0 4px 28px rgba(0,232,143,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important;
text-shadow: 0 0 1px rgba(255,255,255,0.05);
}
/* Section title italic em — same reliable approach */
.section-title em,
.compare__col .compare__col-title em,
.svc-card__title em,
.svc__bottom-copy h3 em,
.cta__title em,
.manifesto__line em {
background: none !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
color: #5af2b0 !important;
filter: drop-shadow(0 2px 12px rgba(0,232,143,0.4));
}
/* Ensure word-inner ALWAYS has fallback opacity even if JS doesn't fire */
.hero__title .word-inner {
/* Keep transition for kinetic reveal */
opacity: 1;
transform: translateY(0) skewY(0) scale(1);
}
/* But still animate IN when initial state present (only when JS adds .pre-reveal) */
.hero__title:not(.is-revealed) .word-inner {
/* No-op — we don't hide by default anymore; JS reveal will still trigger transitions */
}
/* Make sure the accent climax line is bold enough to be unmistakable */
.hero__title .line--accent {
text-shadow: 0 4px 40px rgba(0,232,143,0.25);
}
/* Reveal animations stay smooth for those who run JS */
.hero__title.is-revealed .word-inner {
opacity: 1;
}
/* ───────────────────────────────────────────────────────────
END fix-up
─────────────────────────────────────────────────────────── */
/* ============================================================
FLAG CLUSTER (US + UAE + DE) + MOBILE TR ENLARGE
============================================================ */
.hero__eyebrow .he-cluster {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 4px;
padding-left: 10px;
border-left: 1px solid var(--line-2);
flex-shrink: 0;
}
/* Secondary flags — same compact size, full opacity, subtle hover lift */
.hero__eyebrow .he-flag--us,
.hero__eyebrow .he-flag--ae,
.hero__eyebrow .he-flag--de {
width: 18px;
height: 13px;
opacity: 0.88;
border-radius: 2.5px;
border: 1px solid rgba(245,245,250,0.16);
box-shadow: 0 1px 3px rgba(0,0,0,0.45);
transition: transform 0.4s var(--ease-spring), opacity 0.3s ease;
}
.hero__eyebrow .he-cluster .he-flag:hover {
opacity: 1;
transform: translateY(-2px) scale(1.08);
}
/* TR flag enhanced shadow on dark theme */
.hero__eyebrow .he-flag--tr {
box-shadow:
0 2px 8px rgba(227, 10, 23, 0.35),
0 1px 3px rgba(0,0,0,0.5),
inset 0 0 0 1px rgba(245,245,250,0.12) !important;
border-radius: 4px;
}
/* Hide old he-cn--us label if browser still has stale cache referencing it */
.he-cn--us { display: none !important; }
/* MOBILE — TR flag +50% larger */
@media (max-width: 820px) {
.hero__eyebrow .he-flag--tr {
width: 48px !important;
height: 33px !important;
border-radius: 5px;
}
.hero__eyebrow .he-cn {
font-size: 0.78rem;
letter-spacing: 0.14em;
}
.hero__eyebrow .he-cluster {
gap: 5px;
padding-left: 8px;
margin-left: 2px;
}
.hero__eyebrow {
flex-wrap: wrap;
padding: 9px 14px 9px 12px;
gap: 10px;
}
.hero__eyebrow .he-label {
flex: 0 0 auto;
}
.hero__eyebrow .he-sep {
display: none;
}
.hero__eyebrow .he-loc {
gap: 10px;
flex-wrap: wrap;
}
}
/* ============================================================
SERVICE CARD PRICE — premium pill above includes
============================================================ */
.svc-card__price {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: linear-gradient(180deg, rgba(0,232,143,0.12) 0%, rgba(90,242,176,0.06) 100%);
border: 1px solid rgba(0,232,143,0.32);
border-radius: 10px;
font-size: 0.85rem;
color: var(--ink-2);
letter-spacing: -0.005em;
margin-top: 2px;
align-self: flex-start;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 2px 6px -2px rgba(0,232,143,0.18);
transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-smooth), border-color 0.3s ease;
}
.svc-card__price::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(0,232,143,0.18), 0 0 10px rgba(0,232,143,0.55);
animation: pulseAccent 2.4s ease-in-out infinite;
flex-shrink: 0;
}
.svc-card__price strong {
color: #5af2b0 !important;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
font-size: 0.92rem;
}
.svc-card:hover .svc-card__price {
transform: translateY(-1px);
border-color: rgba(0,232,143,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 6px 16px -4px rgba(0,232,143,0.35);
}
/* Tone-specific price tint */
.svc-card[data-tone="green"] .svc-card__price {
background: linear-gradient(180deg, rgba(60,210,140,0.12) 0%, rgba(60,210,140,0.06) 100%);
border-color: rgba(60,210,140,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px -2px rgba(60,210,140,0.18);
}
.svc-card[data-tone="green"] .svc-card__price::before {
background: #5ee0a0;
box-shadow: 0 0 0 3px rgba(60,210,140,0.18), 0 0 10px rgba(60,210,140,0.55);
}
.svc-card[data-tone="green"] .svc-card__price strong { color: #5ee0a0 !important; }
.svc-card[data-tone="amber"] .svc-card__price {
background: linear-gradient(180deg, rgba(168,245,90,0.12) 0%, rgba(168,245,90,0.06) 100%);
border-color: rgba(168,245,90,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px -2px rgba(168,245,90,0.18);
}
.svc-card[data-tone="amber"] .svc-card__price::before {
background: #a8f55a;
box-shadow: 0 0 0 3px rgba(168,245,90,0.18), 0 0 10px rgba(168,245,90,0.55);
}
.svc-card[data-tone="amber"] .svc-card__price strong { color: #a8f55a !important; }
.svc-card[data-tone="ink"] .svc-card__price {
background: linear-gradient(180deg, rgba(155,155,255,0.12) 0%, rgba(155,155,255,0.06) 100%);
border-color: rgba(155,155,255,0.32);
}
.svc-card[data-tone="ink"] .svc-card__price::before {
background: #9b9bff;
box-shadow: 0 0 0 3px rgba(155,155,255,0.18), 0 0 10px rgba(155,155,255,0.55);
}
.svc-card[data-tone="ink"] .svc-card__price strong { color: #9b9bff !important; }
/* Mobile — price chip slightly tighter */
@media (max-width: 820px) {
.svc-card__price {
font-size: 0.78rem;
padding: 8px 12px;
}
.svc-card__price strong { font-size: 0.86rem; }
}
/* ───────────────────────────────────────────────────────────
END flag cluster + price element
─────────────────────────────────────────────────────────── */
/* ============================================================
AMBIENT LIGHT LAYER — Kill black-monotony
Every section gets a much brighter, more visible glow wash;
floating light orbs travel between sections for "lit room"
feel; cards lift off bg with a soft surface contrast.
============================================================ */
/* ── Body backdrop — stronger, more vivid ambient aurora ── */
body::after {
background:
radial-gradient(60% 40% at 20% 15%, rgba(0,232,143,0.22), transparent 60%),
radial-gradient(50% 35% at 85% 25%, rgba(140,90,220,0.20), transparent 60%),
radial-gradient(55% 40% at 70% 85%, rgba(60,120,220,0.18), transparent 60%),
radial-gradient(45% 30% at 15% 75%, rgba(168,245,90,0.16), transparent 60%) !important;
filter: blur(40px) !important;
opacity: 1 !important;
}
/* ── Compare section — vivid coral + violet ── */
.compare {
background:
linear-gradient(180deg, var(--canvas) 0%, #1a1a2a 50%, var(--canvas) 100%) !important;
}
.compare::before {
background:
radial-gradient(900px 600px at 12% 0%, rgba(0,232,143,0.38), transparent 60%),
radial-gradient(800px 550px at 88% 100%, rgba(140,90,220,0.34), transparent 60%),
radial-gradient(700px 500px at 50% 50%, rgba(60,120,220,0.18), transparent 65%) !important;
}
/* ── Services — violet + coral much brighter ── */
.svc {
background:
linear-gradient(180deg, var(--canvas) 0%, #1c1c30 50%, var(--canvas) 100%) !important;
}
.svc::before {
background:
radial-gradient(1000px 700px at 80% 10%, rgba(140,90,220,0.32), transparent 60%),
radial-gradient(800px 600px at 10% 90%, rgba(0,232,143,0.28), transparent 60%),
radial-gradient(600px 500px at 50% 50%, rgba(168,245,90,0.14), transparent 65%) !important;
}
/* ── Wall (reviews) — amber + coral vivid ── */
.wall {
background:
linear-gradient(180deg, #1a1a28 0%, var(--canvas) 40%, var(--canvas) 60%, #1a1a28 100%) !important;
}
.wall__bg {
background:
radial-gradient(1000px 700px at 15% 5%, rgba(168,245,90,0.32), transparent 60%),
radial-gradient(900px 650px at 85% 95%, rgba(0,232,143,0.30), transparent 60%),
radial-gradient(700px 500px at 50% 50%, rgba(140,90,220,0.16), transparent 65%) !important;
}
/* ── Logos — subtle but visible ── */
.logos {
background:
linear-gradient(180deg, var(--canvas) 0%, #1a1a28 50%, var(--canvas) 100%) !important;
position: relative;
}
.logos::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 500px at 20% 50%, rgba(0,232,143,0.12), transparent 60%),
radial-gradient(700px 450px at 80% 50%, rgba(140,90,220,0.10), transparent 60%);
pointer-events: none;
z-index: 0;
}
.logos > * { position: relative; z-index: 1; }
/* ── CTA — vivid aurora ── */
.cta {
background:
linear-gradient(180deg, #0e0e1a 0%, #1c1c2e 55%, #0e0e1a 100%) !important;
}
.cta::before {
background:
radial-gradient(700px 550px at 20% 20%, rgba(0,232,143,0.50), transparent 60%) !important,
radial-gradient(600px 500px at 80% 30%, rgba(140,90,220,0.40), transparent 60%) !important,
radial-gradient(650px 550px at 70% 90%, rgba(60,120,220,0.32), transparent 60%) !important;
}
.cta::before {
background:
radial-gradient(700px 550px at 20% 20%, rgba(0,232,143,0.50), transparent 60%),
radial-gradient(600px 500px at 80% 30%, rgba(140,90,220,0.40), transparent 60%),
radial-gradient(650px 550px at 70% 90%, rgba(60,120,220,0.32), transparent 60%) !important;
}
/* ── Hero glow orbs — much brighter & larger ── */
.hero__glow--1 {
background: radial-gradient(circle,
rgba(0,232,143,0.65) 0%,
rgba(90,242,176,0.32) 40%,
transparent 70%) !important;
filter: blur(70px) !important;
width: 700px !important;
height: 700px !important;
}
.hero__glow--2 {
background: radial-gradient(circle,
rgba(140,90,220,0.55) 0%,
rgba(60,120,220,0.30) 40%,
rgba(0,232,143,0.15) 70%,
transparent 85%) !important;
filter: blur(80px) !important;
width: 800px !important;
height: 800px !important;
}
/* ── FLOATING LIGHT ORBS between sections (decorative ambient) ── */
@keyframes orbDrift {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
33% { transform: translate(30px, -40px) scale(1.1); opacity: 0.75; }
66% { transform: translate(-20px, 30px) scale(0.9); opacity: 0.6; }
}
.compare::after,
.svc::after,
.wall::after,
.results::after,
.testimonial::after,
.about::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
filter: blur(80px);
z-index: 0;
animation: orbDrift 18s ease-in-out infinite;
}
.compare::after {
width: 400px; height: 400px;
top: 30%; right: -5%;
background: radial-gradient(circle, rgba(90,242,176,0.35), transparent 70%);
}
.svc::after {
width: 500px; height: 500px;
top: 50%; left: -10%;
background: radial-gradient(circle, rgba(140,90,220,0.32), transparent 70%);
animation-delay: -6s;
}
.wall::after {
content: "";
position: absolute;
width: 450px; height: 450px;
top: 20%; right: -8%;
border-radius: 50%;
background: radial-gradient(circle, rgba(168,245,90,0.32), transparent 70%);
filter: blur(80px);
pointer-events: none;
z-index: 0;
animation: orbDrift 22s ease-in-out infinite;
animation-delay: -10s;
/* DON'T override the section divider line ::after — see below */
}
.results::after {
width: 480px; height: 480px;
top: 60%; right: -5%;
background: radial-gradient(circle, rgba(60,210,140,0.28), transparent 70%);
animation-delay: -8s;
}
.testimonial::after {
width: 460px; height: 460px;
top: 25%; left: -10%;
background: radial-gradient(circle, rgba(60,120,220,0.30), transparent 70%);
animation-delay: -4s;
}
.about::after {
width: 420px; height: 420px;
top: 40%; right: -8%;
background: radial-gradient(circle, rgba(0,232,143,0.28), transparent 70%);
animation-delay: -12s;
}
/* Reset compare::after to NOT conflict with section divider — give it a wrapper class */
/* Actually keep them — the section + section::before handles the top divider, ::after is now the floating orb. They don't conflict because ::before vs ::after */
/* ── Cards lift off background with brighter surface ── */
.compare__col--us,
.svc-card:not(.svc-card--all),
.rcard,
.case-story,
.case-story--sm,
.quote-card,
.wall__stats {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
border: 1px solid var(--line-2) !important;
}
/* Compare us card — keep premium iridescent border on top */
.compare__col--us {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 60%, #20202e 100%) !important;
}
/* Service cards on tone variants — soft tint over surface */
.svc-card[data-tone="accent"]:not(.svc-card--all) {
background: linear-gradient(180deg, var(--surface) 0%, #2a2230 100%) !important;
border-color: rgba(0,232,143,0.18) !important;
}
.svc-card[data-tone="green"]:not(.svc-card--all) {
background: linear-gradient(180deg, var(--surface) 0%, #1f2a2e 100%) !important;
border-color: rgba(60,210,140,0.18) !important;
}
.svc-card[data-tone="amber"]:not(.svc-card--all) {
background: linear-gradient(180deg, var(--surface) 0%, #2a262a 100%) !important;
border-color: rgba(168,245,90,0.18) !important;
}
.svc-card[data-tone="ink"]:not(.svc-card--all) {
background: linear-gradient(180deg, var(--surface) 0%, #1f1f30 100%) !important;
border-color: rgba(155,155,255,0.16) !important;
}
/* ── Hero ambient glow — extra layer behind content ── */
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 700px at 50% 50%, rgba(0,232,143,0.10), transparent 70%);
pointer-events: none;
z-index: 0;
animation: orbDrift 25s ease-in-out infinite;
}
/* ── Subtle "lit fog" between sections — fades into next section ── */
section + section {
background-image: linear-gradient(180deg,
rgba(0,232,143,0.04) 0%,
transparent 8%,
transparent 92%,
rgba(140,90,220,0.04) 100%);
}
/* ── Top strip + nav softer dark ── */
.top-strip {
background: linear-gradient(180deg, #0e0e16 0%, #18182a 100%) !important;
}
.nav--scrolled {
background: rgba(20, 20, 31, 0.78) !important;
backdrop-filter: saturate(180%) blur(28px) !important;
-webkit-backdrop-filter: saturate(180%) blur(28px) !important;
}
/* ── Footer — softer dark with gradient ── */
.footer {
background: linear-gradient(180deg, #18182a 0%, #0e0e18 100%) !important;
}
.footer::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(600px 400px at 10% 50%, rgba(0,232,143,0.08), transparent 60%),
radial-gradient(500px 350px at 90% 50%, rgba(140,90,220,0.08), transparent 60%);
pointer-events: none;
z-index: 0;
}
.footer > * { position: relative; z-index: 1; }
/* ── Sections need overflow hidden for orb effect ── */
.compare, .svc, .wall, .results, .testimonial, .about, .logos, .manifesto, .footer, .hero, .cta {
overflow: hidden;
isolation: isolate;
}
/* ── Mobile — kill heavy orbs ── */
@media (max-width: 900px) {
.compare::after,
.svc::after,
.wall::after,
.results::after,
.testimonial::after,
.about::after,
.hero::before {
animation: none !important;
filter: blur(50px);
opacity: 0.5;
}
body::after { opacity: 0.7 !important; }
}
@media (prefers-reduced-motion: reduce) {
.compare::after,
.svc::after,
.wall::after,
.results::after,
.testimonial::after,
.about::after,
.hero::before {
animation: none !important;
}
}
/* ───────────────────────────────────────────────────────────
END ambient light layer
─────────────────────────────────────────────────────────── */
/* ============================================================
HERO TITLE TYPEWRITER (premium code-editor cycle)
============================================================ */
/* Inline-block container — stable baseline + stable height regardless
of cycling text state. Width reserved by JS to longest-rendered word. */
.type-wrap {
display: inline-block !important;
position: relative;
white-space: nowrap;
overflow: hidden;
contain: layout style;
min-width: 0.6em;
/* CRITICAL: stable line-height and baseline */
line-height: 1;
vertical-align: baseline;
text-align: left;
/* visual */
color: #5af2b0;
filter: drop-shadow(0 4px 28px rgba(0,232,143,0.45));
}
/* Zero-width baseline keeper — preserves baseline even when text is empty.
Without this the wrap's baseline drops to margin-bottom during empty cycles
and the line "jumps" vertically. */
.type-wrap::before {
content: "\200B";
display: inline-block;
width: 0;
visibility: hidden;
}
.type-text {
display: inline;
white-space: pre;
line-height: 1;
vertical-align: baseline;
}
/* Caret as a simple inline-block bar that sits on the text baseline */
.type-caret {
display: inline-block;
width: 2px;
height: 0.78em;
background: currentColor;
vertical-align: -0.04em;
margin-left: 0.05em;
border-radius: 1px;
box-shadow: 0 0 12px rgba(0,232,143,0.55), 0 0 4px rgba(0,232,143,0.4);
animation: caretBlink 1s steps(1, end) infinite;
flex-shrink: 0;
}
/* Force the parent kinetic containers to remain layout-stable */
.hero__title .word:has(.type-wrap),
.hero__title .word-inner:has(.type-wrap) {
contain: layout style;
line-height: 0.9;
vertical-align: baseline;
}
.type-wrap--accent {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.018em;
}
.type-text {
display: inline-block;
white-space: nowrap;
}
.type-caret {
display: inline-block;
width: 0.06em;
height: 0.85em;
margin-left: 0.04em;
background: currentColor;
border-radius: 1px;
vertical-align: baseline;
align-self: center;
transform: translateY(0.04em);
animation: caretBlink 1s steps(1, end) infinite;
box-shadow: 0 0 12px rgba(0,232,143,0.6), 0 0 4px rgba(0,232,143,0.45);
flex-shrink: 0;
}
.type-wrap--accent .type-caret {
width: 0.08em;
background: #5af2b0;
}
@keyframes caretBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* While typing — solid caret, no blink for clarity */
.type-wrap.is-typing .type-caret {
animation: none;
opacity: 1;
}
/* While paused (full word) — blink */
.type-wrap.is-paused .type-caret {
animation: caretBlink 0.9s steps(1, end) infinite;
}
/* Subtle scale-in on each character typed */
.type-text {
letter-spacing: -0.02em;
}
/* On the accent (italic) line — use serif and slightly larger */
.line--accent .type-wrap {
font-size: 1em;
}
/* Make sure the original .hero__title em styles don't fight type-wrap--accent */
.hero__title em.type-wrap--accent {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: #5af2b0 !important;
}
/* Reveal animation — type-wrap reveals along with its containing word-inner */
.hero__title.is-revealed .word-inner .type-wrap {
/* nothing additional; inherited reveal handles it */
}
/* Reduced motion: kill caret blink + show first word fully */
@media (prefers-reduced-motion: reduce) {
.type-caret { animation: none !important; opacity: 1 !important; }
}
/* Mobile — tighter caret on smaller fonts */
@media (max-width: 820px) {
.type-caret { width: 0.08em; }
.type-wrap { min-width: 0.5em; }
}
/* ───────────────────────────────────────────────────────────
END typewriter
─────────────────────────────────────────────────────────── */
/* ============================================================
HERO TITLE LINE ALIGNMENT FIX
- Same sans font for "Daha çok" / "Daha az" prefixes (was mixed
sans + italic-serif — caused alignment drift).
- Open vertical gap between the two lines.
- Italic drama reserved for the cycling word only.
============================================================ */
.hero__title .line--accent {
margin-top: 0.22em !important;
font-size: 1em !important; /* same as line 1; no upscale */
letter-spacing: -0.05em !important;
}
/* Static prefix in line 2 — kept sans like line 1 (no em wrapping in HTML anymore) */
.hero__title .line--accent .word-inner {
font-family: var(--font-display) !important;
font-style: normal !important;
font-weight: 500 !important;
}
/* The italic serif drama only on the cycling word */
.hero__title .line--accent .word-inner > .type-wrap--accent {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: -0.018em !important;
}
/* Bigger breathing room between line 1 and line 2 on narrow screens too */
@media (max-width: 820px) {
.hero__title .line--accent { margin-top: 0.30em !important; }
}
/* ───────────────────────────────────────────────────────────
END line alignment fix
─────────────────────────────────────────────────────────── */
/* ============================================================
WORD SWITCHER (.wsw) — replaces typewriter
CSS Grid stack: all words occupy same grid area → container
intrinsic width = widest word, baseline auto-aligned with
surrounding text. ZERO layout shift physically possible.
============================================================ */
.wsw {
display: inline-grid;
grid-template-areas: "cycle";
align-items: baseline;
justify-items: start;
vertical-align: baseline;
position: relative;
text-align: left;
white-space: nowrap;
line-height: 1;
color: #5af2b0;
filter: drop-shadow(0 6px 32px rgba(0,232,143,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
/* No min-width / measurements needed — grid sizes to max-content of items */
}
.wsw__item {
grid-area: cycle;
display: inline-block;
white-space: nowrap;
opacity: 0;
transform: translateY(0.5em);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.55s ease;
will-change: opacity, transform;
pointer-events: none;
}
.wsw__item.is-active {
opacity: 1;
transform: translateY(0);
filter: none;
}
.wsw__item.is-exiting {
opacity: 0;
transform: translateY(-0.5em);
filter: blur(2px);
}
/* Italic serif drama only on the accent line items */
.wsw--accent .wsw__item {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.018em;
}
/* Reduced motion → show first word, no rotation */
@media (prefers-reduced-motion: reduce) {
.wsw__item.is-active { transition: none; }
.wsw__item:not(.is-active) { display: none; }
}
/* Disable the old typewriter (.type-wrap) styling — neutralized in case
any HTML still references it */
.type-wrap { display: none !important; }
/* ───────────────────────────────────────────────────────────
END word switcher
─────────────────────────────────────────────────────────── */
/* ============================================================
HERO CHIPS — Decorative only (no click, no navigation)
============================================================ */
.hero-chip {
cursor: default !important;
pointer-events: none !important;
}
/* If user mouses into chip area, no link cursor and no click. Hover
visuals still apply because they're CSS :hover on the same element —
but since pointer-events:none disables hover too, we need to selectively
re-enable visual hover via the parent. */
.hero__chips {
pointer-events: auto;
}
/* Reapply hover visuals when user mouses over the wrapper */
.hero__chips:hover .hero-chip { transition-duration: 0.5s; }
/* Remove the arrow indicator since these aren't actionable */
.hero-chip .hero-chip__arrow { display: none !important; }
/* Give icon + body a bit more room since arrow is gone */
.hero-chip {
grid-template-columns: 36px 1fr !important;
}
/* ───────────────────────────────────────────────────────────
END hero chips decorative mode
─────────────────────────────────────────────────────────── */
/* ============================================================
HERO TICKER — Premium mobile pill cards
Refined gradients, accent top-line, gradient num text,
consistent width, premium depth and breath.
============================================================ */
@media (max-width: 820px) {
/* Wider gutter between pills, smoother scroll */
.hero__ticker-row {
gap: 10px !important;
padding: 6px clamp(20px, 4vw, 56px) 10px !important;
}
/* Hide vertical separators on mobile (we use pills now) */
.hero__meta-sep { display: none !important; }
.hero__meta-item {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 14px 14px !important;
background:
linear-gradient(180deg, rgba(36,36,52,0.95) 0%, rgba(20,20,32,0.85) 100%) !important;
border: 1px solid rgba(58,58,82,0.7) !important;
border-radius: 16px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.45),
0 2px 4px rgba(0,0,0,0.35),
0 12px 28px -12px rgba(0,0,0,0.6),
0 4px 12px -4px rgba(0,232,143,0.10) !important;
min-width: 140px !important;
min-height: 78px !important;
text-align: center !important;
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 0.4s var(--ease-spring), border-color 0.3s ease, box-shadow 0.4s ease;
}
/* Subtle premium accent line on top edge */
.hero__meta-item::before {
content: "";
position: absolute;
top: 0; left: 14px; right: 14px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,232,143,0.55) 30%,
rgba(90,242,176,0.65) 50%,
rgba(0,232,143,0.55) 70%,
transparent 100%);
opacity: 0.85;
pointer-events: none;
z-index: 1;
}
/* Very subtle radial glow from top-center */
.hero__meta-item::after {
content: "";
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(0,232,143,0.22), transparent 70%);
filter: blur(22px);
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
/* Number — premium light gradient (matches Apple/Linear ticker numbers) */
.hero__meta-num {
position: relative;
z-index: 2;
font-family: var(--font-display) !important;
font-size: 1.32rem !important;
line-height: 1 !important;
letter-spacing: -0.04em !important;
font-weight: 600 !important;
margin: 0 !important;
background: linear-gradient(180deg, #ffffff 0%, #cfcfdc 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
font-feature-settings: "tnum" !important;
font-variant-numeric: tabular-nums;
text-align: center !important;
width: 100%;
}
/* Label — wrappable, refined small caps */
.hero__meta-label {
position: relative;
z-index: 2;
display: block;
font-family: var(--font-sans) !important;
font-size: 0.58rem !important;
letter-spacing: 0.14em !important;
line-height: 1.25 !important;
margin: 0 !important;
color: rgba(216,216,226,0.78) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
white-space: normal !important; /* allow wrap */
word-break: keep-all !important;
text-align: center !important;
width: 100%;
max-width: 120px;
}
/* Long labels — auto-tighten letter-spacing and font-size */
.hero__meta-item:has(.hero__meta-label) .hero__meta-label {
/* This rule applies only when the meta-label exists; safe noop fallback */
}
/* If label text is long (>14 chars typical), label may wrap to 2 lines — that's fine */
/* Marquee animation refinement */
.hero__ticker-row.is-marquee {
animation-duration: 48s !important;
}
}
/* Very small screens — tighten pills */
@media (max-width: 400px) {
.hero__meta-item {
min-width: 118px !important;
padding: 12px 16px !important;
}
.hero__meta-num { font-size: 1.18rem !important; }
.hero__meta-label { font-size: 0.56rem !important; }
}
/* ───────────────────────────────────────────────────────────
END mobile ticker cleanup
─────────────────────────────────────────────────────────── */
/* ============================================================
PREMIUM LANGUAGE SWITCHER — iOS-style segmented control
============================================================ */
.top-strip__right {
position: relative;
display: inline-flex !important;
align-items: center;
gap: 0 !important;
padding: 3px;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.10);
border-radius: 999px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 2px 6px -2px rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Hide the " / " separators — pill already segments visually */
.ts-lang-sep {
display: none !important;
}
.ts-lang {
position: relative;
z-index: 1;
font-family: var(--font-sans) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.10em !important;
color: rgba(245, 241, 232, 0.55) !important;
padding: 5px 11px !important;
border-radius: 999px !important;
background: none !important;
border: none !important;
cursor: pointer;
transition:
color 0.35s var(--ease-snap),
transform 0.4s var(--ease-spring) !important;
min-width: 32px;
line-height: 1;
}
.ts-lang:hover {
color: rgba(245, 241, 232, 0.92) !important;
transform: translateY(-1px);
}
/* Active pill — coral gradient + glow */
.ts-lang--active {
color: #fff !important;
background: linear-gradient(180deg, #5af2b0 0%, #00e88f 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.18),
0 2px 6px -1px rgba(0,232,143,0.55),
0 0 12px rgba(0,232,143,0.32) !important;
}
.ts-lang--active:hover { transform: none; }
/* Mobile: bigger touch targets, more breathing room */
@media (max-width: 820px) {
.top-strip__right {
padding: 2px;
gap: 0 !important;
}
.ts-lang {
font-size: 0.74rem !important;
padding: 6px 12px !important;
min-width: 36px;
letter-spacing: 0.08em !important;
}
}
@media (max-width: 480px) {
.ts-lang { font-size: 0.7rem !important; padding: 5px 10px !important; min-width: 32px; }
}
/* ───────────────────────────────────────────────────────────
END language switcher polish
─────────────────────────────────────────────────────────── */
/* ============================================================
COMPARE "THEM" COLUMN — Strikethrough on every bullet text
Visual cue: "we cross out what other agencies do"
============================================================ */
.compare__col--them .compare__list li span:last-child {
text-decoration: line-through;
text-decoration-color: rgba(255, 100, 75, 0.55);
text-decoration-thickness: 1.6px;
text-decoration-skip-ink: none;
text-underline-offset: 1px;
color: rgba(216, 216, 226, 0.78) !important;
}
/* Inside strong tags (if any) — keep line-through but slightly bolder */
.compare__col--them .compare__list li span:last-child strong {
text-decoration: line-through;
text-decoration-color: rgba(255, 100, 75, 0.7);
text-decoration-thickness: 1.8px;
color: rgba(232, 232, 240, 0.88) !important;
}
/* Hover: line gets a touch more vivid for a subtle reveal */
.compare__col--them .compare__list li:hover span:last-child {
text-decoration-color: rgba(0,232,143, 0.85);
}
/* ───────────────────────────────────────────────────────────
END strikethrough effect
─────────────────────────────────────────────────────────── */
/* ============================================================
SERVICE CARDS V2 — Premium, compact, color-distinct, mobile-first
Each card gets a unique color signature; layout tightened so
content doesn't overflow or feel cramped on mobile.
============================================================ */
/* Compact card layout */
.svc-card {
padding: 22px 22px 20px !important;
gap: 10px !important;
border-radius: 20px !important;
}
.svc-card__top {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 4px !important;
}
.svc-card__num {
font-family: var(--font-display) !important;
font-size: 1rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
opacity: 0.65;
font-feature-settings: "tnum" !important;
}
.svc-card__icon {
width: 38px !important;
height: 38px !important;
border-radius: 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-width: 1px !important;
flex-shrink: 0;
}
.svc-card__icon svg { width: 18px !important; height: 18px !important; }
.svc-card__tag {
margin-left: auto !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
padding: 4px 9px !important;
border-radius: 999px !important;
text-transform: uppercase;
}
.svc-card__title {
font-family: var(--font-display) !important;
font-size: 1.28rem !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
font-weight: 500 !important;
margin: 6px 0 0 !important;
}
.svc-card__hook {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 0.92rem !important;
line-height: 1.4 !important;
color: var(--muted-2) !important;
letter-spacing: -0.005em !important;
margin: 0 !important;
}
.svc-card__promise {
font-size: 0.92rem !important;
line-height: 1.5 !important;
color: var(--ink-2) !important;
letter-spacing: -0.005em !important;
margin: 4px 0 0 !important;
}
/* Includes block — compact + benefit-driven */
.svc-card__includes {
padding: 14px 16px !important;
border-radius: 12px !important;
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)) !important;
border: 1px solid var(--line) !important;
gap: 8px !important;
}
.svc-card__includes-head {
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
color: var(--muted-2) !important;
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.svc-card__list {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
border-top: 0 !important;
list-style: none;
}
.svc-card__list li {
display: grid !important;
grid-template-columns: 14px 1fr !important;
gap: 8px !important;
align-items: start;
font-size: 0.87rem !important;
line-height: 1.4 !important;
color: var(--ink-2) !important;
padding: 0 !important;
letter-spacing: -0.005em !important;
}
.svc-card__list li::before {
content: "" !important;
width: 14px !important;
height: 14px !important;
margin-top: 3px;
border-radius: 50% !important;
background: var(--card-accent, var(--accent)) !important;
flex-shrink: 0;
position: relative;
box-shadow: 0 0 0 0 transparent !important;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
}
.svc-card__list li strong {
color: var(--ink) !important;
font-weight: 600 !important;
}
/* Price pill — tighter, per-tone tinted */
.svc-card__price {
padding: 9px 12px !important;
font-size: 0.82rem !important;
margin: 0 !important;
}
.svc-card__price strong { font-size: 0.88rem !important; }
/* Guarantee badge — compact */
.svc-card__guarantee {
font-size: 0.74rem !important;
padding: 7px 12px !important;
align-self: flex-start;
}
/* CTA — full width, prominent */
.svc-card__cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
padding: 12px 16px !important;
border-radius: 999px !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
background: linear-gradient(180deg, var(--card-accent, var(--accent)) 0%, var(--card-accent-dark, #009a5c) 100%) !important;
color: #fff !important;
border: 1px solid var(--card-accent, var(--accent)) !important;
transition: transform 0.4s var(--ease-spring), box-shadow 0.4s, filter 0.3s !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.22),
0 8px 20px -8px var(--card-accent, var(--accent)) !important;
}
.svc-card__cta:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
.svc-card__cta svg { width: 14px !important; height: 14px !important; }
/* ── PER-TONE COLOR SCHEMES ── */
/* Default vars (overridden per-tone below) */
.svc-card { --card-accent: #00e88f; --card-accent-dark: #009a5c; --card-accent-soft: rgba(0,232,143,0.18); --card-accent-text: #5af2b0; }
/* CORAL (accent) — 01 */
.svc-card[data-tone="accent"] { --card-accent: #00e88f; --card-accent-dark: #009a5c; --card-accent-soft: rgba(0,232,143,0.18); --card-accent-text: #5af2b0; }
.svc-card[data-tone="accent"] .svc-card__icon { background: rgba(0,232,143,0.18) !important; color: #5af2b0 !important; border-color: rgba(0,232,143,0.4) !important; }
.svc-card[data-tone="accent"] .svc-card__tag { background: rgba(0,232,143,0.14) !important; color: #5af2b0 !important; border: 1px solid rgba(0,232,143,0.32) !important; }
.svc-card[data-tone="accent"] .svc-card__num { color: #5af2b0 !important; }
/* VIOLET — 02 AI */
.svc-card[data-tone="violet"] { --card-accent: #b585ff; --card-accent-dark: #6e3ed6; --card-accent-soft: rgba(181,133,255,0.18); --card-accent-text: #c8a8ff; background: linear-gradient(180deg, var(--surface) 0%, #1f1a2c 100%) !important; border-color: rgba(181,133,255,0.22) !important; }
.svc-card[data-tone="violet"] .svc-card__icon { background: rgba(181,133,255,0.18) !important; color: #c8a8ff !important; border-color: rgba(181,133,255,0.4) !important; }
.svc-card[data-tone="violet"] .svc-card__tag { background: rgba(181,133,255,0.14) !important; color: #c8a8ff !important; border: 1px solid rgba(181,133,255,0.32) !important; }
.svc-card[data-tone="violet"] .svc-card__num { color: #c8a8ff !important; }
/* GREEN (emerald) — 03 */
.svc-card[data-tone="green"] { --card-accent: #5ee0a0; --card-accent-dark: #2b9b66; --card-accent-soft: rgba(94,224,160,0.18); --card-accent-text: #80ebb6; background: linear-gradient(180deg, var(--surface) 0%, #1a2820 100%) !important; border-color: rgba(94,224,160,0.22) !important; }
.svc-card[data-tone="green"] .svc-card__icon { background: rgba(94,224,160,0.18) !important; color: #80ebb6 !important; border-color: rgba(94,224,160,0.4) !important; }
.svc-card[data-tone="green"] .svc-card__tag { background: rgba(94,224,160,0.14) !important; color: #80ebb6 !important; border: 1px solid rgba(94,224,160,0.32) !important; }
.svc-card[data-tone="green"] .svc-card__num { color: #80ebb6 !important; }
.svc-card[data-tone="green"] .svc-card__cta { color: #14141f !important; }
/* AMBER — 04 SEO */
.svc-card[data-tone="amber"] { --card-accent: #a8f55a; --card-accent-dark: #6fa838; --card-accent-soft: rgba(168,245,90,0.18); --card-accent-text: #c4f88c; background: linear-gradient(180deg, var(--surface) 0%, #2a2418 100%) !important; border-color: rgba(168,245,90,0.22) !important; }
.svc-card[data-tone="amber"] .svc-card__icon { background: rgba(168,245,90,0.18) !important; color: #c4f88c !important; border-color: rgba(168,245,90,0.4) !important; }
.svc-card[data-tone="amber"] .svc-card__tag { background: rgba(168,245,90,0.14) !important; color: #c4f88c !important; border: 1px solid rgba(168,245,90,0.32) !important; }
.svc-card[data-tone="amber"] .svc-card__num { color: #c4f88c !important; }
.svc-card[data-tone="amber"] .svc-card__cta { color: #14141f !important; }
/* AZURE — 05 Performans */
.svc-card[data-tone="azure"] { --card-accent: #60a8ff; --card-accent-dark: #2c6bd6; --card-accent-soft: rgba(96,168,255,0.18); --card-accent-text: #93c4ff; background: linear-gradient(180deg, var(--surface) 0%, #1a2030 100%) !important; border-color: rgba(96,168,255,0.22) !important; }
.svc-card[data-tone="azure"] .svc-card__icon { background: rgba(96,168,255,0.18) !important; color: #93c4ff !important; border-color: rgba(96,168,255,0.4) !important; }
.svc-card[data-tone="azure"] .svc-card__tag { background: rgba(96,168,255,0.14) !important; color: #93c4ff !important; border: 1px solid rgba(96,168,255,0.32) !important; }
.svc-card[data-tone="azure"] .svc-card__num { color: #93c4ff !important; }
/* MAGENTA — 06 Sosyal */
.svc-card[data-tone="magenta"] { --card-accent: #ff5e9c; --card-accent-dark: #c8347c; --card-accent-soft: rgba(255,94,156,0.18); --card-accent-text: #ff8bbb; background: linear-gradient(180deg, var(--surface) 0%, #2a1c26 100%) !important; border-color: rgba(255,94,156,0.22) !important; }
.svc-card[data-tone="magenta"] .svc-card__icon { background: rgba(255,94,156,0.18) !important; color: #ff8bbb !important; border-color: rgba(255,94,156,0.4) !important; }
.svc-card[data-tone="magenta"] .svc-card__tag { background: rgba(255,94,156,0.14) !important; color: #ff8bbb !important; border: 1px solid rgba(255,94,156,0.32) !important; }
.svc-card[data-tone="magenta"] .svc-card__num { color: #ff8bbb !important; }
/* PLATINUM — 07 Premium Web */
.svc-card[data-tone="platinum"] { --card-accent: #e0e0ea; --card-accent-dark: #b0b0c0; --card-accent-soft: rgba(224,224,234,0.14); --card-accent-text: #ededf2; background: linear-gradient(180deg, #20202d 0%, #16161f 100%) !important; border-color: rgba(224,224,234,0.18) !important; }
.svc-card[data-tone="platinum"] .svc-card__icon { background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important; color: #ededf2 !important; border-color: rgba(224,224,234,0.4) !important; }
.svc-card[data-tone="platinum"] .svc-card__tag { background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important; color: #ededf2 !important; border: 1px solid rgba(224,224,234,0.3) !important; }
.svc-card[data-tone="platinum"] .svc-card__num { color: #ededf2 !important; }
.svc-card[data-tone="platinum"] .svc-card__cta { color: #14141f !important; background: linear-gradient(180deg, #f4f4fa 0%, #c8c8d2 100%) !important; border-color: rgba(224,224,234,0.5) !important; }
.svc-card[data-tone="platinum"] .svc-card__price { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important; border-color: rgba(224,224,234,0.32) !important; }
.svc-card[data-tone="platinum"] .svc-card__price strong { color: #ededf2 !important; }
.svc-card[data-tone="platinum"] .svc-card__price::before { background: #ededf2 !important; box-shadow: 0 0 0 3px rgba(224,224,234,0.2), 0 0 10px rgba(224,224,234,0.5) !important; }
/* FOREST — 08 E-Ticaret */
.svc-card[data-tone="forest"] { --card-accent: #3cb87a; --card-accent-dark: #1f7d54; --card-accent-soft: rgba(60,184,122,0.18); --card-accent-text: #5ed094; background: linear-gradient(180deg, var(--surface) 0%, #182820 100%) !important; border-color: rgba(60,184,122,0.22) !important; }
.svc-card[data-tone="forest"] .svc-card__icon { background: rgba(60,184,122,0.18) !important; color: #5ed094 !important; border-color: rgba(60,184,122,0.4) !important; }
.svc-card[data-tone="forest"] .svc-card__tag { background: rgba(60,184,122,0.14) !important; color: #5ed094 !important; border: 1px solid rgba(60,184,122,0.32) !important; }
.svc-card[data-tone="forest"] .svc-card__num { color: #5ed094 !important; }
.svc-card[data-tone="forest"] .svc-card__cta { color: #14141f !important; }
/* Price pill — color matches card accent */
.svc-card .svc-card__price {
background: linear-gradient(180deg, var(--card-accent-soft), rgba(255,255,255,0.02)) !important;
border: 1px solid var(--card-accent-soft) !important;
border-color: var(--card-accent-soft) !important;
}
.svc-card .svc-card__price strong { color: var(--card-accent-text) !important; }
.svc-card .svc-card__price::before {
background: var(--card-accent) !important;
box-shadow: 0 0 0 3px rgba(255,255,255,0.05), 0 0 10px var(--card-accent) !important;
}
/* Top accent line on each card */
.svc-card::before {
background: linear-gradient(90deg, transparent, var(--card-accent), transparent) !important;
opacity: 0.85;
}
/* Hover — match the card's accent color */
.svc-card:hover {
border-color: var(--card-accent) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 2px 4px rgba(0,0,0,0.3),
0 28px 56px -16px rgba(0,0,0,0.55),
0 16px 32px -12px var(--card-accent-soft) !important;
}
/* ── MOBILE — bigger fonts + comfortable touch + readable ── */
@media (max-width: 820px) {
.svc-card {
padding: 20px 20px 18px !important;
flex-basis: min(330px, 88vw) !important;
gap: 10px !important;
}
.svc-card__title { font-size: 1.22rem !important; }
.svc-card__hook { font-size: 0.95rem !important; }
.svc-card__promise { font-size: 0.94rem !important; line-height: 1.5 !important; }
.svc-card__includes { padding: 13px 14px !important; }
.svc-card__list li { font-size: 0.88rem !important; line-height: 1.42 !important; }
.svc-card__cta { padding: 13px 16px !important; font-size: 0.94rem !important; }
.svc-card__price { font-size: 0.84rem !important; }
.svc-card__icon { width: 36px !important; height: 36px !important; }
.svc-card__icon svg { width: 17px !important; height: 17px !important; }
.svc-card__tag { font-size: 0.6rem !important; padding: 4px 8px !important; }
}
/* ───────────────────────────────────────────────────────────
END service cards v2
─────────────────────────────────────────────────────────── */
/* ============================================================
"SIZE ÖZEL PAKET" CTA BLOCK — Psychologically irresistible
Aurora glow, animated border, urgency badge, social proof,
pulsing CTA, premium polished surface
============================================================ */
.svc__bottom--hero {
position: relative !important;
margin-top: clamp(48px, 7vw, 80px) !important;
padding: 0 !important;
background:
radial-gradient(900px 600px at 0% 0%, rgba(0,232,143,0.20), transparent 60%),
radial-gradient(800px 550px at 100% 100%, rgba(140,90,220,0.18), transparent 60%),
linear-gradient(180deg, #14141f 0%, #1a1a28 50%, #0e0e1a 100%) !important;
border: 1px solid rgba(0,232,143,0.35) !important;
border-radius: 28px !important;
overflow: hidden !important;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 1px 2px rgba(0,0,0,0.4),
0 40px 80px -20px rgba(0,0,0,0.6),
0 20px 40px -12px rgba(0,232,143,0.32) !important;
}
/* Animated aurora layer behind content */
.svc__bottom-aura {
position: absolute;
inset: -10%;
background:
radial-gradient(40% 40% at 30% 30%, rgba(0,232,143,0.30), transparent 60%),
radial-gradient(35% 35% at 70% 70%, rgba(90,242,176,0.22), transparent 60%),
radial-gradient(30% 30% at 80% 20%, rgba(140,90,220,0.18), transparent 60%);
filter: blur(40px);
z-index: 0;
pointer-events: none;
animation: ctaAuraDrift 14s ease-in-out infinite alternate;
}
@keyframes ctaAuraDrift {
0% { transform: translate(0, 0) scale(1); opacity: 0.85; }
50% { transform: translate(2%, -1%) scale(1.05); opacity: 1; }
100% { transform: translate(-2%, 1%) scale(0.96); opacity: 0.88; }
}
/* Animated rotating gradient border */
.svc__bottom--hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,232,143,0.85) 20%,
rgba(90,242,176,1) 50%,
rgba(0,232,143,0.85) 80%,
transparent 100%);
z-index: 5;
animation: barShine 3.6s linear infinite;
}
@keyframes barShine {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.svc__bottom-inner {
position: relative !important;
z-index: 1;
padding: clamp(28px, 4vw, 44px) !important;
display: grid !important;
grid-template-columns: 1.4fr auto !important;
gap: 40px !important;
align-items: center !important;
}
@media (max-width: 820px) {
.svc__bottom-inner {
grid-template-columns: 1fr !important;
gap: 26px !important;
padding: 28px 22px !important;
}
}
/* Urgency badge — scarcity signal */
.svc__bottom-urgency {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 11px;
background: linear-gradient(180deg, rgba(0,232,143,0.18), rgba(0,232,143,0.08));
border: 1px solid rgba(0,232,143,0.45);
border-radius: 999px;
font-size: 0.74rem;
letter-spacing: 0.02em;
color: var(--ink-2);
align-self: flex-start;
margin-bottom: 4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 0 1px rgba(0,232,143,0.18),
0 4px 16px -4px rgba(0,232,143,0.32);
}
.svc__bottom-urgency strong {
color: #5af2b0;
font-weight: 700;
}
.urg-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: #00e88f;
box-shadow: 0 0 0 3px rgba(0,232,143,0.25), 0 0 12px rgba(0,232,143,0.75);
animation: urgPulse 1.6s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes urgPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(0,232,143,0.25), 0 0 10px rgba(0,232,143,0.65); }
50% { box-shadow: 0 0 0 6px rgba(0,232,143,0.05), 0 0 18px rgba(0,232,143,0.95); }
}
/* Eyebrow refined */
.svc__bottom--hero .svc__bottom-eye {
font-size: 0.72rem !important;
letter-spacing: 0.18em !important;
color: var(--muted-2) !important;
font-weight: 600;
margin-bottom: 0;
}
/* Title — bigger, more confident */
.svc__bottom--hero .svc__bottom-copy h3 {
font-family: var(--font-display) !important;
font-size: clamp(1.65rem, 3vw, 2.4rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.03em !important;
font-weight: 500 !important;
color: var(--ink) !important;
margin: 6px 0 0 !important;
}
.svc__bottom--hero .svc__bottom-copy h3 em {
font-family: var(--font-serif) !important;
font-style: italic !important;
font-weight: 400 !important;
color: #5af2b0 !important;
filter: drop-shadow(0 4px 18px rgba(0,232,143,0.4));
}
/* Description */
.svc__bottom--hero .svc__bottom-copy p {
font-size: clamp(0.95rem, 1.2vw, 1.05rem) !important;
line-height: 1.55 !important;
color: var(--ink-2) !important;
letter-spacing: -0.005em !important;
margin: 14px 0 0 !important;
max-width: 620px;
}
.svc__bottom--hero .svc__bottom-copy p strong {
color: var(--ink) !important;
font-weight: 600;
}
/* Perks — 2x2 grid, bigger checks */
.svc__bottom--hero .svc__bottom-perks {
list-style: none;
margin: 18px 0 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px 22px;
}
@media (max-width: 520px) {
.svc__bottom--hero .svc__bottom-perks { grid-template-columns: 1fr; gap: 8px; }
}
.svc__bottom--hero .svc__bottom-perks li {
display: inline-flex !important;
align-items: center;
gap: 8px !important;
font-size: 0.9rem !important;
color: var(--ink-2) !important;
letter-spacing: -0.005em !important;
font-weight: 500 !important;
}
.svc__bottom--hero .svc__bottom-perks li strong { color: var(--ink) !important; font-weight: 600; }
.svc__bottom--hero .svc__bottom-perks li svg {
width: 16px !important;
height: 16px !important;
color: #5ee0a0 !important;
flex-shrink: 0 !important;
filter: drop-shadow(0 0 6px rgba(94,224,160,0.45));
}
/* Social proof line */
.svc__bottom-proof {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 0.85rem;
color: var(--ink-2);
letter-spacing: -0.005em;
}
.svc__bottom-proof strong { color: var(--ink); font-weight: 600; }
.svc__bottom-proof-avs {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.svc__bottom-proof-avs .av {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
border: 2px solid #14141f;
margin-left: -8px;
box-shadow: 0 2px 6px -1px rgba(0,0,0,0.4);
letter-spacing: 0;
}
.svc__bottom-proof-avs .av:first-child { margin-left: 0; }
.av--1 { background: linear-gradient(135deg, #00e88f, #009a5c); z-index: 4; }
.av--2 { background: linear-gradient(135deg, #b585ff, #6e3ed6); z-index: 3; }
.av--3 { background: linear-gradient(135deg, #5ee0a0, #2b9b66); z-index: 2; }
.av--4 { background: linear-gradient(135deg, #60a8ff, #2c6bd6); z-index: 1; font-size: 0.86rem; }
/* Action area — bigger, more prominent, pulsing */
.svc__bottom-action {
display: flex;
flex-direction: column;
gap: 10px;
align-self: stretch;
justify-content: center;
min-width: 280px;
}
@media (max-width: 820px) {
.svc__bottom-action { min-width: 0; }
}
.svc__bottom-cta {
width: 100% !important;
padding: 18px 28px !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
background: linear-gradient(180deg, #5af2b0 0%, #00e88f 50%, #009a5c 100%) !important;
border: 1px solid rgba(0,232,143,0.7) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 2px 6px rgba(0,0,0,0.4),
0 18px 44px -10px rgba(0,232,143,0.7),
0 0 0 0 rgba(0,232,143,0.4) !important;
animation: ctaBigGlow 2.4s ease-in-out infinite !important;
}
@keyframes ctaBigGlow {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 2px 6px rgba(0,0,0,0.4),
0 18px 44px -10px rgba(0,232,143,0.7),
0 0 0 0 rgba(0,232,143,0.4);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 2px 6px rgba(0,0,0,0.4),
0 26px 56px -10px rgba(0,232,143,0.85),
0 0 0 8px rgba(0,232,143,0);
}
}
.svc__bottom-cta:hover {
background: linear-gradient(180deg, #ffa078 0%, #ff7048 50%, #d8442a 100%) !important;
transform: translateY(-3px) scale(1.01);
animation-play-state: paused;
}
/* Meta lines below CTA */
.svc__bottom--hero .svc__bottom-meta,
.svc__bottom-guarantee {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
color: var(--muted-2);
letter-spacing: -0.005em;
justify-content: center;
text-align: center;
padding: 8px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 10px;
}
.svc__bottom-guarantee {
background: linear-gradient(180deg, rgba(94,224,160,0.10), rgba(94,224,160,0.03));
border-color: rgba(94,224,160,0.28);
color: #80ebb6;
}
.svc__bottom-guarantee strong { color: #5ee0a0; font-weight: 600; }
.svc__bottom-guarantee svg { color: #5ee0a0; flex-shrink: 0; width: 14px; height: 14px; }
.svc__bottom--hero .svc__bottom-meta svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--accent); }
/* Mobile refinements */
@media (max-width: 820px) {
.svc__bottom--hero .svc__bottom-copy h3 { font-size: clamp(1.55rem, 6.4vw, 2.05rem) !important; }
.svc__bottom--hero .svc__bottom-copy p { font-size: 0.94rem !important; }
.svc__bottom-cta { padding: 16px 24px !important; font-size: 1rem !important; }
.svc__bottom-proof { font-size: 0.82rem; gap: 10px; }
.svc__bottom-proof-avs .av { width: 24px; height: 24px; font-size: 0.68rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.svc__bottom-aura,
.svc__bottom-cta,
.urg-pulse,
.svc__bottom--hero::before { animation: none !important; }
}
/* ───────────────────────────────────────────────────────────
END custom-package CTA block polish
─────────────────────────────────────────────────────────── */
/* ============================================================
SERVICE CARDS — Layout fix-up
1) List items: grid → block + absolute check (prevents
word-per-line wrap that was happening on mobile)
2) Tag (EN ÇOK TERCİH EDİLEN): re-positioned so it never
overlaps the icon on narrow viewports
============================================================ */
/* ── LIST ITEMS — proper text flow with absolute check ── */
.svc-card__list li {
display: block !important;
position: relative !important;
grid-template-columns: none !important;
padding-left: 24px !important;
font-size: 0.88rem !important;
line-height: 1.5 !important;
color: var(--ink-2) !important;
letter-spacing: -0.005em !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
.svc-card__list li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0.45em !important;
width: 14px !important;
height: 14px !important;
background: var(--card-accent, var(--accent)) !important;
flex: none !important;
margin-top: 0 !important;
border-radius: 0 !important;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
filter: drop-shadow(0 0 4px var(--card-accent-soft, rgba(0,232,143,0.25)));
}
.svc-card__list li strong {
color: var(--ink) !important;
font-weight: 600 !important;
margin-right: 2px;
}
/* ── TOP ROW — re-arrange so tag never overlaps icon ── */
.svc-card__top {
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 6px !important;
margin-top: 0 !important;
/* Number first, icon next, tag pushed to own area */
}
.svc-card__num {
grid-column: 1 !important;
grid-row: 1 !important;
font-size: 1rem !important;
font-weight: 600 !important;
opacity: 0.55;
font-feature-settings: "tnum" !important;
align-self: center !important;
}
.svc-card__icon {
grid-column: 1 !important;
grid-row: 2 !important;
margin-top: 2px;
}
.svc-card__tag {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
justify-self: end !important;
align-self: start !important;
margin: 0 !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
padding: 5px 9px !important;
border-radius: 999px !important;
white-space: nowrap !important;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
/* Mobile — tag stays at top right but shrinks comfortably */
@media (max-width: 820px) {
.svc-card__top {
grid-template-columns: 44px 1fr;
grid-template-rows: auto auto;
gap: 8px 12px !important;
}
.svc-card__num {
font-size: 0.94rem !important;
}
.svc-card__icon {
grid-column: 1 !important;
grid-row: 2 !important;
width: 40px !important;
height: 40px !important;
}
.svc-card__tag {
font-size: 0.56rem !important;
letter-spacing: 0.10em !important;
padding: 4px 8px !important;
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
}
}
/* Very small screen — shorten tag visually by tightening */
@media (max-width: 380px) {
.svc-card__tag {
font-size: 0.52rem !important;
letter-spacing: 0.08em !important;
padding: 4px 7px !important;
}
}
/* Strong text inside promise: ensure no awkward wrap */
.svc-card__promise strong { white-space: normal; }
/* ───────────────────────────────────────────────────────────
END card layout fix-up
─────────────────────────────────────────────────────────── */
:root {
/* ── Premium gradient tokens ── */
--grad-accent: linear-gradient(135deg, #5af2b0 0%, #00e88f 45%, #009a5c 100%);
--grad-accent-soft: linear-gradient(135deg, rgba(90,242,176,0.18) 0%, rgba(0,232,143,0.10) 100%);
--grad-ink: linear-gradient(160deg, #1a1714 0%, #2a2018 55%, #1a1714 100%);
--grad-aurora: conic-gradient(from 220deg at 70% 30%,
rgba(0,232,143,0.18),
rgba(140,235,200,0.10),
rgba(140,90,180,0.10),
rgba(60,90,150,0.08),
rgba(0,232,143,0.18));
--grad-glass: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,252,245,0.55) 100%);
--grad-glass-dark: linear-gradient(180deg, rgba(42,32,24,0.92) 0%, rgba(26,23,20,0.85) 100%);
--grad-shine: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.65) 50%, transparent 62%, transparent 100%);
--grad-section-divider: linear-gradient(90deg, transparent 0%, var(--line-2) 20%, var(--accent) 50%, var(--line-2) 80%, transparent 100%);
/* ── Layered shadow scale ── */
--shadow-xs: 0 1px 2px rgba(26,23,20,0.06);
--shadow-sm: 0 2px 4px rgba(26,23,20,0.06), 0 1px 2px rgba(26,23,20,0.04);
--shadow-md: 0 4px 8px -2px rgba(26,23,20,0.08), 0 2px 4px -1px rgba(26,23,20,0.05);
--shadow-lg: 0 12px 24px -8px rgba(26,23,20,0.14), 0 4px 8px -2px rgba(26,23,20,0.06);
--shadow-xl: 0 24px 48px -12px rgba(26,23,20,0.22), 0 8px 16px -4px rgba(26,23,20,0.08);
--shadow-2xl: 0 40px 80px -16px rgba(26,23,20,0.30), 0 16px 32px -8px rgba(26,23,20,0.12);
--shadow-glow-accent: 0 0 0 1px rgba(15,179,122,0.18), 0 12px 32px -8px rgba(15,179,122,0.35), 0 4px 12px -2px rgba(15,179,122,0.25);
--shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(26,23,20,0.04);
/* ── Premium easings ── */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ── Body backdrop: subtle animated aurora mesh ── */
body::after {
content: "";
position: fixed;
inset: -20%;
background:
radial-gradient(60% 40% at 20% 15%, rgba(0,232,143,0.07), transparent 60%),
radial-gradient(50% 35% at 85% 25%, rgba(140,235,200,0.06), transparent 60%),
radial-gradient(55% 40% at 70% 85%, rgba(140,90,180,0.04), transparent 60%),
radial-gradient(45% 30% at 15% 75%, rgba(60,90,150,0.03), transparent 60%);
pointer-events: none;
z-index: 0;
animation: auroraDrift 32s ease-in-out infinite alternate;
filter: blur(20px);
}
@keyframes auroraDrift {
0% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(-2%, 1%, 0) rotate(1deg); }
100% { transform: translate3d(2%, -1%, 0) rotate(-1deg); }
}
/* ── Sharper focus ring ── */
:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent), 0 8px 24px -6px rgba(15,179,122,0.4);
border-radius: 6px;
}
/* ── Refined text selection ── */
::selection { background: rgba(15,179,122,0.22); color: var(--ink); }
::-moz-selection { background: rgba(15,179,122,0.22); color: var(--ink); }
/* ── Premium scrollbar ── */
@media (hover: hover) {
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(26,23,20,0.18), rgba(26,23,20,0.28));
border: 3px solid var(--canvas);
border-radius: 999px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--accent), var(--accent-2));
border-color: var(--canvas);
}
}
/* ============================================================
PREMIUM BUTTON SYSTEM
Gradient depth + sheen sweep + magnetic feel
============================================================ */
.btn {
position: relative;
transition:
transform 0.5s var(--ease-smooth),
background-color 0.35s var(--ease-snap),
color 0.35s var(--ease-snap),
box-shadow 0.45s var(--ease-smooth),
border-color 0.35s var(--ease-snap);
isolation: isolate;
overflow: hidden;
}
/* Sheen sweep — invisible until hover */
.btn::after {
content: "";
position: absolute;
inset: 0;
background: var(--grad-shine);
transform: translateX(-110%) skewX(-12deg);
transition: transform 0.9s var(--ease-smooth);
pointer-events: none;
z-index: 1;
mix-blend-mode: overlay;
opacity: 0.9;
}
.btn:hover::after { transform: translateX(120%) skewX(-12deg); }
/* Keep button content above sheen */
.btn > * { position: relative; z-index: 2; }
/* Primary — premium ink with gradient depth */
.btn--primary {
background: linear-gradient(180deg, #2a2520 0%, #1a1714 100%);
color: var(--canvas);
border: 1px solid rgba(26,23,20,0.9);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 1px 2px rgba(26,23,20,0.08),
0 8px 24px -8px rgba(26,23,20,0.45),
0 4px 12px -4px rgba(26,23,20,0.3);
}
.btn--primary::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% -10%, rgba(0,232,143,0.35), transparent 60%);
opacity: 0;
transition: opacity 0.45s var(--ease-smooth);
pointer-events: none;
z-index: 0;
}
.btn--primary:hover {
background: linear-gradient(180deg, #2a2520 0%, #0d0a08 100%);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 2px 4px rgba(26,23,20,0.1),
0 18px 40px -10px rgba(26,23,20,0.55),
0 8px 20px -6px rgba(15,179,122,0.35);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:active { transform: translateY(0); transition-duration: 0.15s; }
/* Ghost — refined glass surface */
.btn--ghost {
background: var(--grad-glass);
color: var(--ink);
border: 1px solid var(--line-2);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 1px 2px rgba(26,23,20,0.04),
0 4px 12px -4px rgba(26,23,20,0.08);
}
.btn--ghost:hover {
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,252,245,0.85) 100%);
border-color: var(--ink);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 2px 4px rgba(26,23,20,0.06),
0 12px 28px -8px rgba(26,23,20,0.18);
}
.btn--ghost:active { transform: translateY(0); transition-duration: 0.15s; }
/* Arrow icon enhanced micro-interaction */
.btn svg {
transition: transform 0.5s var(--ease-spring);
}
.btn:hover svg { transform: translateX(4px) scale(1.05); }
/* Btn lg refined */
.btn--lg {
padding: 18px 30px;
font-size: 1rem;
letter-spacing: -0.01em;
}
/* Btn small enhanced */
.btn--sm {
padding: 11px 17px;
font-size: 0.86rem;
font-weight: 500;
}
/* ============================================================
HERO CINEMATIC UPGRADE
Stronger aurora backdrop, refined chips, premium ticker
============================================================ */
/* Stronger glow orbs with iridescent tint */
.hero__glow--1 {
background: radial-gradient(circle,
rgba(0,232,143,0.42) 0%,
rgba(15,179,122,0.22) 40%,
transparent 70%);
filter: blur(80px);
}
.hero__glow--2 {
background: radial-gradient(circle,
rgba(140,235,200,0.5) 0%,
rgba(140,235,200,0.35) 40%,
rgba(140,90,180,0.12) 70%,
transparent 85%);
filter: blur(90px);
}
/* Premium eyebrow chip with gradient border + sheen */
.hero__eyebrow {
position: relative;
background: var(--grad-glass);
border: 1px solid transparent;
background-clip: padding-box;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 2px 6px -2px rgba(26,23,20,0.05),
0 8px 24px -10px rgba(26,23,20,0.12);
overflow: hidden;
isolation: isolate;
}
.hero__eyebrow::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg,
rgba(15,179,122,0.5) 0%,
rgba(216,205,184,0.4) 30%,
rgba(216,205,184,0.3) 70%,
rgba(15,179,122,0.4) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
opacity: 0.6;
}
/* Hero title — refined gradient + subtle text shadow */
.hero__title em {
background: linear-gradient(180deg,
var(--ink) 0%,
var(--ink) 25%,
#6a3324 55%,
var(--accent) 85%,
#00e88f 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 12px rgba(15,179,122,0.18));
}
/* Hero proof — premium glass card with shine */
.hero__proof {
position: relative;
background: linear-gradient(180deg,
rgba(255,255,255,0.92) 0%,
rgba(250,246,236,0.78) 100%);
border: 1px solid rgba(216,205,184,0.7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 2px 4px -1px rgba(26,23,20,0.05),
0 12px 28px -10px rgba(26,23,20,0.14);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
overflow: hidden;
transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
}
.hero__proof::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(15,179,122,0.4) 50%, transparent 100%);
}
.hero__proof:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 4px 8px -2px rgba(26,23,20,0.06),
0 20px 40px -12px rgba(26,23,20,0.2);
}
.hero__proof-icon {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
0 2px 6px -1px rgba(26,23,20,0.28),
0 4px 12px -2px rgba(15,179,122,0.18);
transition: transform 0.45s var(--ease-spring);
}
.hero__proof-item:hover .hero__proof-icon { transform: scale(1.12) rotate(-6deg); }
/* Hero ticker — premium border + stat hover */
.hero__ticker {
border-top: 1px solid transparent;
position: relative;
}
.hero__ticker::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line-2) 15%,
rgba(15,179,122,0.4) 50%,
var(--line-2) 85%,
transparent 100%);
}
.hero__meta-item {
position: relative;
padding: 2px 8px 2px 0;
transition: transform 0.4s var(--ease-spring);
}
.hero__meta-item:hover { transform: translateY(-2px); }
.hero__meta-num {
background: linear-gradient(180deg, var(--ink) 0%, var(--espresso) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.04em;
font-weight: 600;
}
/* Live badge — refined glow */
.hero__live {
background: var(--grad-glass);
border: 1px solid var(--line);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 4px 12px -4px rgba(26,23,20,0.1),
0 0 0 1px rgba(27,157,79,0.06);
transition: transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}
.hero__live:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 10px 24px -8px rgba(26,23,20,0.18),
0 0 0 1px rgba(27,157,79,0.18);
}
/* Hero chips upgraded — gradient border on hover */
.hero-chip {
background: linear-gradient(180deg,
rgba(255,255,255,0.95) 0%,
rgba(250,246,236,0.82) 100%);
border: 1px solid rgba(216,205,184,0.65);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 1px 2px rgba(26,23,20,0.04),
0 8px 20px -10px rgba(26,23,20,0.12);
transition:
transform 0.5s var(--ease-spring),
border-color 0.4s var(--ease-snap),
box-shadow 0.5s var(--ease-smooth);
}
.hero-chip:hover {
transform: translateY(-4px);
border-color: rgba(15,179,122,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 2px 4px rgba(26,23,20,0.05),
0 22px 44px -16px rgba(15,179,122,0.32),
0 12px 24px -8px rgba(26,23,20,0.18);
}
.hero-chip__icon {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(26,23,20,0.04),
0 2px 6px -2px rgba(26,23,20,0.08);
}
.hero-chip:hover .hero-chip__icon {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.2),
0 6px 16px -4px rgba(15,179,122,0.5);
}
.hero-chip__arrow {
background: rgba(26,23,20,0.05);
transition:
background-color 0.35s var(--ease-snap),
color 0.35s var(--ease-snap),
transform 0.5s var(--ease-spring),
box-shadow 0.4s var(--ease-smooth);
}
.hero-chip:hover .hero-chip__arrow {
background: var(--accent);
color: var(--canvas);
transform: translateX(4px);
box-shadow: 0 4px 12px -2px rgba(15,179,122,0.5);
}
/* Top strip premium polish */
.top-strip {
background: linear-gradient(180deg, #1a1714 0%, #221c17 100%);
border-bottom: 1px solid rgba(245,241,232,0.06);
box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.ts-lang--active {
background: linear-gradient(180deg, rgba(245,241,232,0.14) 0%, rgba(245,241,232,0.08) 100%);
box-shadow: inset 0 1px 0 rgba(245,241,232,0.1);
}
/* Nav menu — refined glass */
.nav__menu {
background: var(--grad-glass);
border: 1px solid rgba(216,205,184,0.65);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 1px 2px rgba(26,23,20,0.04),
0 6px 20px -10px rgba(26,23,20,0.12);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
}
.nav--scrolled {
background: rgba(245, 241, 232, 0.72);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 24px -8px rgba(26,23,20,0.08);
}
/* ============================================================
SECTION TRANSITIONS & DIVIDERS
Subtle gradient breaks + refined section eyebrows
============================================================ */
/* Section eyebrow — glow on dot, refined chip */
.section-eyebrow {
position: relative;
padding: 6px 14px 6px 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(250,246,236,0.55) 100%);
border: 1px solid rgba(216,205,184,0.55);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 1px 2px rgba(26,23,20,0.03),
0 4px 12px -6px rgba(26,23,20,0.08);
transition: transform 0.4s var(--ease-smooth);
}
.section-eyebrow .dot {
animation: pulseAccent 2.4s ease-in-out infinite;
}
@keyframes pulseAccent {
0%, 100% {
box-shadow: 0 0 0 4px rgba(15,179,122,0.14), 0 0 12px rgba(15,179,122,0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(15,179,122,0.04), 0 0 18px rgba(15,179,122,0.6);
}
}
/* Section title — refined italic with gradient + drop-shadow */
.section-title em {
background: linear-gradient(180deg,
var(--ink) 0%,
var(--ink) 35%,
#6a3324 70%,
var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 8px rgba(15,179,122,0.14));
}
/* Section divider — subtle gradient line between sections */
section + section { position: relative; }
section + section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(80%, 1200px);
height: 1px;
background: var(--grad-section-divider);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 5;
}
.compare::before,
.svc::before,
.results::before { opacity: 0.4; }
/* Refined reveal animation — softer + more cinematic */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition:
opacity 1.1s var(--ease-smooth),
transform 1.1s var(--ease-smooth),
filter 1.1s var(--ease-smooth);
filter: blur(4px);
}
[data-reveal].is-revealed,
[data-reveal].is-visible,
[data-reveal][data-revealed="true"] {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Logos section — refined gradient */
.logos {
background: linear-gradient(180deg,
var(--canvas) 0%,
#fbf7ec 35%,
#fbf7ec 65%,
var(--canvas) 100%);
position: relative;
}
.logos::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line-2) 20%,
rgba(15,179,122,0.3) 50%,
var(--line-2) 80%,
transparent 100%);
}
.logos::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--line-2) 20%,
rgba(15,179,122,0.3) 50%,
var(--line-2) 80%,
transparent 100%);
}
.logo {
transition: opacity 0.4s ease, transform 0.5s var(--ease-spring), color 0.4s ease;
opacity: 0.55;
}
.logo:hover {
opacity: 1;
transform: translateY(-2px) scale(1.04);
color: var(--accent);
}
/* ============================================================
PREMIUM CARD HOVER EFFECTS
3D tilt, gradient borders, sheen overlays
============================================================ */
/* Compare cards — premium glass + gradient border on hover */
.compare__col {
position: relative;
transition:
transform 0.55s var(--ease-smooth),
box-shadow 0.55s var(--ease-smooth),
border-color 0.4s var(--ease-snap);
overflow: hidden;
isolation: isolate;
}
.compare__col::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 60% at 50% 0%, rgba(15,179,122,0.08), transparent 70%);
opacity: 0;
transition: opacity 0.5s var(--ease-smooth);
pointer-events: none;
z-index: 0;
}
.compare__col > * { position: relative; z-index: 1; }
.compare__col--us {
background: linear-gradient(180deg, #ffffff 0%, #faf6ec 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 1px 2px rgba(26,23,20,0.04),
0 12px 32px -12px rgba(26,23,20,0.18);
}
.compare__col--us:hover {
transform: translateY(-6px);
border-color: rgba(15,179,122,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 2px 4px rgba(26,23,20,0.06),
0 32px 64px -16px rgba(15,179,122,0.28),
0 16px 32px -12px rgba(26,23,20,0.16);
}
.compare__col--us:hover::after { opacity: 1; }
.compare__col--them {
transition: transform 0.55s var(--ease-smooth), opacity 0.4s ease;
opacity: 0.85;
}
.compare__col--them:hover {
transform: translateY(-3px);
opacity: 1;
}
/* Service cards — premium 3D tilt-ready */
.svc-card {
position: relative;
transition:
transform 0.55s var(--ease-smooth),
box-shadow 0.55s var(--ease-smooth),
border-color 0.4s var(--ease-snap);
overflow: hidden;
isolation: isolate;
}
.svc-card::after {
content: "";
position: absolute;
inset: 0;
background: var(--grad-shine);
transform: translateX(-110%) skewX(-12deg);
transition: transform 1.1s var(--ease-smooth);
pointer-events: none;
z-index: 1;
opacity: 0.5;
mix-blend-mode: overlay;
}
.svc-card:hover::after { transform: translateX(120%) skewX(-12deg); }
.svc-card:hover {
transform: translateY(-8px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 2px 4px rgba(26,23,20,0.05),
0 32px 64px -16px rgba(26,23,20,0.28),
0 16px 32px -12px rgba(15,179,122,0.22);
}
.svc-card__icon {
transition: transform 0.5s var(--ease-spring), background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 6px -2px rgba(26,23,20,0.1);
}
.svc-card:hover .svc-card__icon {
transform: scale(1.1) rotate(-6deg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 8px 20px -4px rgba(15,179,122,0.32);
}
.svc-card__num {
transition: transform 0.5s var(--ease-spring), letter-spacing 0.4s ease;
}
.svc-card:hover .svc-card__num {
transform: translateX(2px);
letter-spacing: -0.02em;
}
/* Magnetic chip / pill hover */
[data-magnetic] {
transition: transform 0.4s var(--ease-spring);
}
/* Navigation link refined hover with gradient */
.nav__link::before {
background: linear-gradient(180deg, #2a2520 0%, #1a1714 100%);
}
.nav__link:hover::before {
opacity: 1;
transform: scale(1);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.1),
0 4px 12px -2px rgba(26,23,20,0.3);
}
/* Compare list icons — premium gradient backgrounds */
.compare__ic--check {
background: linear-gradient(135deg, #2bd16e 0%, #1b9d4f 100%);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 2px 6px -2px rgba(27,157,79,0.4);
}
.compare__ic--x {
background: linear-gradient(135deg, rgba(150,138,122,0.18) 0%, rgba(150,138,122,0.1) 100%);
color: var(--muted-2);
border: 1px solid rgba(150,138,122,0.22);
}
/* Comparison list items — refined hover row */
.compare__list li {
position: relative;
transition: transform 0.35s var(--ease-smooth), color 0.3s ease;
}
.compare__list li:hover {
transform: translateX(4px);
}
/* Service paginate arrows */
.svc__arrow {
position: relative;
background: var(--grad-glass);
border: 1px solid var(--line-2);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 2px 6px -2px rgba(26,23,20,0.05);
transition:
transform 0.45s var(--ease-spring),
background-color 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease,
color 0.3s ease;
}
.svc__arrow:hover {
background: linear-gradient(180deg, #2a2520 0%, #1a1714 100%);
color: var(--canvas);
border-color: var(--ink);
transform: scale(1.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.1),
0 8px 20px -4px rgba(26,23,20,0.35);
}
/* ============================================================
CTA / CONTACT — Premium dark surface with aurora glow
============================================================ */
.cta {
background: linear-gradient(180deg, #1a1714 0%, #221c17 55%, #1a1714 100%);
position: relative;
overflow: hidden;
isolation: isolate;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(50% 35% at 20% 20%, rgba(0,232,143,0.22), transparent 60%),
radial-gradient(40% 30% at 80% 30%, rgba(140,90,180,0.14), transparent 60%),
radial-gradient(55% 40% at 70% 90%, rgba(140,235,200,0.12), transparent 60%);
pointer-events: none;
z-index: 0;
animation: auroraDrift 28s ease-in-out infinite alternate;
}
.cta::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(245,241,232,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,241,232,0.025) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 80%);
pointer-events: none;
z-index: 0;
}
.cta__inner { position: relative; z-index: 1; }
.cta__form {
position: relative;
background:
linear-gradient(180deg, rgba(245,241,232,0.06) 0%, rgba(245,241,232,0.02) 100%);
border: 1px solid rgba(245,241,232,0.1);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(245,241,232,0.12),
0 1px 2px rgba(0,0,0,0.4),
0 32px 80px -16px rgba(0,0,0,0.55),
0 16px 32px -8px rgba(15,179,122,0.2);
overflow: hidden;
}
.cta__form::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(0,232,143,0.4) 30%,
rgba(140,235,200,0.4) 50%,
rgba(0,232,143,0.4) 70%,
transparent 100%);
}
.cta__fields input,
.cta__fields textarea,
.cta__fields select {
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.cta__fields input:focus,
.cta__fields textarea:focus,
.cta__fields select:focus {
border-color: rgba(0,232,143,0.55) !important;
box-shadow:
0 0 0 3px rgba(0,232,143,0.18),
inset 0 1px 0 rgba(245,241,232,0.08) !important;
outline: none;
}
.cta__form-badge {
background: linear-gradient(180deg, rgba(43,209,110,0.18) 0%, rgba(27,157,79,0.1) 100%);
border: 1px solid rgba(43,209,110,0.3);
box-shadow:
inset 0 1px 0 rgba(245,241,232,0.08),
0 4px 12px -4px rgba(43,209,110,0.25);
}
/* CTA primary button override — ride on dark surface */
.cta .btn--primary {
background: linear-gradient(180deg, #00e88f 0%, #0fb37a 100%);
border-color: rgba(0,232,143,0.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
inset 0 -1px 0 rgba(0,0,0,0.2),
0 2px 4px rgba(15,179,122,0.4),
0 12px 32px -8px rgba(15,179,122,0.55),
0 6px 16px -4px rgba(0,0,0,0.4);
}
.cta .btn--primary:hover {
background: linear-gradient(180deg, #e57a4e 0%, #16c08f 100%);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 2px 4px rgba(15,179,122,0.45),
0 24px 48px -8px rgba(15,179,122,0.6),
0 10px 24px -4px rgba(0,0,0,0.5);
}
/* ============================================================
FOOTER — Premium polish
============================================================ */
.footer {
position: relative;
background: linear-gradient(180deg, #0d0a08 0%, #1a1714 100%);
overflow: hidden;
}
.footer::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(15,179,122,0.45) 20%,
rgba(140,235,200,0.55) 50%,
rgba(15,179,122,0.45) 80%,
transparent 100%) !important;
height: 1px !important;
opacity: 0.9;
}
.footer__social a {
position: relative;
transition:
background-color 0.35s ease,
color 0.35s ease,
transform 0.45s var(--ease-spring),
box-shadow 0.4s ease,
border-color 0.35s ease;
overflow: hidden;
}
.footer__social a::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 80% at 50% 50%, rgba(0,232,143,0.55), transparent 70%);
opacity: 0;
transition: opacity 0.45s ease;
}
.footer__social a:hover {
background: linear-gradient(180deg, #00e88f 0%, #0fb37a 100%);
border-color: rgba(0,232,143,0.55);
color: var(--canvas);
transform: translateY(-3px) scale(1.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 12px 24px -6px rgba(15,179,122,0.55);
}
.footer__col a {
position: relative;
transition: color 0.3s ease, transform 0.4s var(--ease-smooth), padding-left 0.4s var(--ease-smooth);
}
.footer__col a:hover {
color: var(--canvas) !important;
padding-left: 14px;
}
.footer__col a::before {
content: "→";
position: absolute;
left: 0;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.3s ease, transform 0.4s var(--ease-smooth);
color: var(--accent);
}
.footer__col a:hover::before {
opacity: 1;
transform: translateX(0);
}
/* ============================================================
MICRO-ANIMATIONS — Subtle premium details
============================================================ */
/* Smooth letter-spacing breath on section titles when revealed */
.section-title {
transition: letter-spacing 1.2s var(--ease-smooth);
}
/* Subtle elevation lift on any link with data-cursor on hover */
[data-cursor="link"]:hover {
filter: brightness(1.05);
}
/* Premium glow ring around the scroll indicator */
.hero__scroll {
position: absolute;
bottom: 28px;
left: clamp(20px, 4vw, 56px);
padding: 8px 14px 8px 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(250,246,236,0.4) 100%);
border: 1px solid rgba(216,205,184,0.5);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 1px 2px rgba(26,23,20,0.04),
0 4px 12px -4px rgba(26,23,20,0.1);
}
/* ============================================================
MOBILE OVERRIDES — Disable heavy effects
============================================================ */
@media (max-width: 900px) {
body::after { display: none; }
.cta::before { display: none; }
.svc-card::after,
.btn::after { display: none; }
.compare__col::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body::after,
.cta::before { animation: none !important; }
.btn::after,
.svc-card::after,
.hero-chip::before { display: none !important; }
}
/* ============================================================
████████████████████████████████████████████████████████████
PREMIUM CONVERSION LAYER — v3
- Top strip: mobil tamamen sığar (Açık · 10-19)
- Floating WhatsApp + Instagram FAB
- Mobile sticky bottom action bar
- Footer mobil okunabilirlik
- Paket kartları taşma fixleri
- Performans: mobilde ağır animasyonları kapat
- Palet rafinasyonu: şampanya/altın accent
████████████████████████████████████████████████████████████
============================================================ */
/* === Top strip mobil — kompakt ve okunaklı === */
@media (max-width: 820px) {
.top-strip__inner {
padding: 6px 12px;
font-size: 0.7rem;
gap: 8px;
letter-spacing: 0;
}
.ts-status {
font-weight: 600;
color: #fff;
letter-spacing: 0.01em;
white-space: nowrap;
}
.ts-promise {
color: rgba(245,245,250,0.68);
letter-spacing: 0.01em;
white-space: nowrap;
}
.ts-sep { padding: 0 1px; opacity: 0.35; }
.top-strip__right { gap: 4px; flex-shrink: 0; }
.ts-lang { padding: 2px 5px; font-size: 0.64rem; letter-spacing: 0.06em; }
.ts-lang-sep { font-size: 0.6rem; }
}
@media (max-width: 420px) {
.top-strip__inner { padding: 6px 10px; font-size: 0.66rem; gap: 6px; }
.ts-lang { padding: 2px 4px; font-size: 0.6rem; }
.ts-lang-sep { opacity: 0.25; }
.top-strip__right .ts-lang:not(.ts-lang--active),
.top-strip__right .ts-lang-sep { display: none; }
.ts-lang--active {
background: rgba(245,245,250,0.14);
padding: 2px 7px;
border-radius: 5px;
}
}
@media (max-width: 360px) {
.top-strip__inner { font-size: 0.62rem; gap: 5px; }
.ts-promise { font-size: 0.6rem; }
}
/* Kapalıyken status metni hafif kırmızıya kayar (görsel kanıt) */
#officeStatus .ts-pulse[data-status="closed"] ~ .ts-status {
color: #ffaaaa;
}
/* === Palet rafinasyonu — şampanya/altın accent toklarına === */
:root {
--gold: #d8b070;
--gold-2: #f0c987;
--gold-soft: rgba(216, 176, 112, 0.14);
--champagne: #e8c89a;
--grad-premium: linear-gradient(135deg, #f0c987 0%, #d8b070 50%, #b8894a 100%);
--grad-warm: linear-gradient(135deg, #5af2b0 0%, #d8b070 50%, #b8894a 100%);
--shadow-gold-glow: 0 0 0 1px rgba(216,176,112,0.22), 0 12px 32px -8px rgba(216,176,112,0.42), 0 4px 12px -2px rgba(216,176,112,0.25);
}
/* Garanti rozetlerinde altın hissi */
.svc-card__guarantee {
background: linear-gradient(135deg, rgba(216,176,112,0.15) 0%, rgba(216,176,112,0.08) 100%) !important;
border: 1px solid rgba(216,176,112,0.32) !important;
color: var(--gold-2) !important;
}
.svc-card__guarantee svg { color: var(--gold-2) !important; }
.svc__bottom-guarantee {
background: linear-gradient(135deg, rgba(216,176,112,0.18) 0%, rgba(216,176,112,0.08) 100%) !important;
border-color: rgba(216,176,112,0.32) !important;
color: var(--gold-2) !important;
}
.svc__bottom-guarantee svg { color: var(--gold-2) !important; }
/* ============================================================
FLOATING ACTION BUTTONS — WhatsApp + Instagram
============================================================ */
/* === FAB FINAL — Sadece ikon, premium, hizalı === */
.fab {
position: fixed;
right: 20px;
bottom: 24px;
z-index: 70;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
pointer-events: none;
}
/* Eski label varsa tamamen gizle (HTML'de kaldı diye) */
.fab__label { display: none !important; }
.fab__btn {
pointer-events: auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
padding: 0;
border-radius: 50%;
text-decoration: none;
overflow: visible;
isolation: isolate;
background: transparent;
border: none;
transition: transform 0.35s var(--ease-out), filter 0.3s ease;
will-change: transform;
filter:
drop-shadow(0 14px 26px rgba(0,0,0,0.32))
drop-shadow(0 6px 12px rgba(0,0,0,0.22));
-webkit-tap-highlight-color: transparent;
}
.fab__btn:hover { transform: translateY(-3px) scale(1.04); }
.fab__btn:active { transform: translateY(-1px) scale(0.96); }
/* SVG ikonun kendisi tüm butonu kaplar */
.fab__ic {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
/* WhatsApp button — gradient glow halo */
.fab__btn--wa::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(37,215,109,0.55) 0%, transparent 70%);
filter: blur(16px);
z-index: -1;
opacity: 0.45;
animation: fabGlow 3.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes fabGlow {
0%, 100% { opacity: 0.35; transform: scale(0.92); }
50% { opacity: 0.7; transform: scale(1.1); }
}
/* Instagram — kendi halosu */
.fab__btn--ig::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(214,36,159,0.4) 0%, transparent 70%);
filter: blur(16px);
z-index: -1;
opacity: 0.4;
pointer-events: none;
}
/* Notification pulse — sağ üst köşe (sadece WhatsApp) */
.fab__pulse {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff4d4d;
border: 2px solid rgba(8,8,14,0.95);
box-shadow: 0 0 0 2px rgba(255,77,77,0.28);
animation: fabPulse 2s ease-in-out infinite;
z-index: 5;
}
@keyframes fabPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(255,77,77,0.28); }
50% { box-shadow: 0 0 0 8px rgba(255,77,77,0); }
}
/* Mobil — biraz daha küçük, sticky bar üstünde dur */
@media (max-width: 820px) {
.fab {
right: 14px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
gap: 10px;
}
.fab__btn { width: 52px; height: 52px; }
.fab__pulse { width: 11px; height: 11px; }
}
@media (max-width: 380px) {
.fab__btn { width: 48px; height: 48px; }
}
/* ============================================================
FOOTER — mobil okunabilirlik fix
============================================================ */
.footer { isolation: isolate; }
.footer__mega {
/* dev metin overflow yaratıyor, mobilde gizle */
pointer-events: none;
}
@media (max-width: 820px) {
.footer { padding: 48px 0 40px; }
/* Dev filigran dar ekranda taşıp yeşil noktayı kesiyordu; tablet/mobilde gizle */
.footer__mega { display: none !important; }
.footer__mission { font-size: 0.86rem; line-height: 1.55; }
.footer__col h4 { font-size: 0.62rem; letter-spacing: 0.16em; }
.footer__col a, .footer__col span { font-size: 0.82rem; padding: 5px 0; }
/* daha güçlü kontrast */
.footer__col a { color: rgba(255,255,255,0.82); }
.footer__col--contact .footer__contact span { color: rgba(255,255,255,0.82); }
.footer__office-info strong { color: #fff; }
.footer__office-info span { color: rgba(255,255,255,0.7); font-size: 0.74rem; }
.footer__trust-item { color: rgba(255,255,255,0.85); }
.footer__trust-item strong { color: #fff; }
.footer__bottom { font-size: 0.74rem; color: rgba(255,255,255,0.65); }
.footer__bottom-left { color: rgba(255,255,255,0.7); }
.footer__bottom-tag { color: rgba(255,255,255,0.55); }
.footer__legal a { color: rgba(255,255,255,0.7); }
}
@media (max-width: 480px) {
.footer__mega { display: none; }
.footer__offices { gap: 14px; padding: 24px 0 20px; }
.footer__trust { gap: 8px 10px; padding: 18px 0; }
.footer__trust-item { font-size: 0.7rem; padding: 6px 10px; }
}
/* ============================================================
PAKET KARTLARI — mobil sığma rafinasyonu
============================================================ */
@media (max-width: 820px) {
.svc-card {
flex-basis: min(308px, 84vw) !important;
padding: 20px 18px 18px !important;
gap: 11px !important;
border-radius: 18px !important;
}
.svc-card__top { align-items: center; }
.svc-card__num { font-size: 1.45rem; }
.svc-card__tag {
font-size: 0.58rem;
padding: 4px 9px;
letter-spacing: 0.08em;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.svc-card__title { font-size: 1.18rem; letter-spacing: -0.025em; line-height: 1.15; }
.svc-card__hook { font-size: 0.86rem; line-height: 1.4; }
.svc-card__promise { font-size: 0.84rem; line-height: 1.45; }
.svc-card__price {
font-size: 0.78rem;
line-height: 1.4;
padding: 9px 11px;
border-radius: 9px;
flex-wrap: wrap;
}
.svc-card__price strong { font-size: 0.84rem; white-space: nowrap; }
.svc-card__includes-head { font-size: 0.62rem; letter-spacing: 0.12em; }
.svc-card__includes .svc-card__list li {
font-size: 0.78rem !important;
line-height: 1.42;
padding-left: 16px;
}
.svc-card__guarantee {
font-size: 0.7rem !important;
padding: 6px 10px !important;
gap: 6px;
}
.svc-card__guarantee svg { width: 12px; height: 12px; flex-shrink: 0; }
.svc-card__cta {
font-size: 0.86rem;
padding: 11px 14px;
margin-top: 4px;
}
.svc-card__cta svg { width: 12px; height: 12px; }
/* "Aradığınız paket burada yok mu" kartı */
.svc-card--all { padding: 22px 20px 20px !important; }
.svc-card__promise--lg { font-size: 0.9rem; line-height: 1.45; }
.svc-card__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.svc-card__chips li {
font-size: 0.66rem !important;
padding: 4px 8px !important;
border-radius: 5px;
}
/* CTA bottom — perks 2 sütun */
.svc__bottom-perks {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.svc__bottom-perks li {
font-size: 0.82rem !important;
padding: 8px 10px;
background: rgba(255,255,255,0.04);
border-radius: 8px;
}
.svc__bottom-urgency {
font-size: 0.72rem;
padding: 6px 10px;
flex-wrap: wrap;
text-align: center;
justify-content: center;
}
.svc__bottom-copy h3 {
font-size: clamp(1.35rem, 5.4vw, 1.7rem) !important;
line-height: 1.15;
letter-spacing: -0.025em;
}
.svc__bottom-copy p {
font-size: 0.9rem;
line-height: 1.5;
}
.svc__bottom-proof {
font-size: 0.78rem;
line-height: 1.45;
}
/* svc bar — daha rahat */
.svc__bar {
grid-template-columns: 1fr 1fr !important;
gap: 10px 12px !important;
padding: 12px 12px !important;
border-radius: 12px;
}
.svc__bar li {
font-size: 0.72rem !important;
line-height: 1.35;
gap: 7px;
}
.svc__bar li strong { display: block; }
.svc__bar li svg { width: 16px; height: 16px; flex-shrink: 0; }
}
@media (max-width: 420px) {
.svc-card {
flex-basis: min(288px, 82vw) !important;
padding: 18px 16px 16px !important;
}
.svc-card__title { font-size: 1.1rem; }
.svc-card__hook { font-size: 0.82rem; }
.svc-card__promise { font-size: 0.8rem; }
.svc-card__includes .svc-card__list li { font-size: 0.74rem !important; }
.svc-card__chips li { font-size: 0.62rem !important; padding: 3px 7px !important; }
}
/* ============================================================
HERO — mobil rafinasyon
============================================================ */
@media (max-width: 820px) {
.hero {
padding-top: calc(var(--strip-h) + var(--nav-h) + 14px) !important;
padding-bottom: 28px !important;
}
.hero__bg .hero__glow--1,
.hero__bg .hero__glow--2 {
/* mobil GPU yormamak için blur azalt */
filter: blur(50px) !important;
opacity: 0.55 !important;
}
.hero__orb { opacity: 0.7; }
.hero__sub {
font-size: 0.96rem !important;
line-height: 1.5 !important;
}
.hero__ctas {
display: flex !important;
flex-direction: column;
gap: 10px;
width: 100%;
}
.hero__ctas .btn {
width: 100%;
justify-content: center;
padding: 14px 18px;
font-size: 0.95rem;
}
.hero__chips {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.hero-chip { padding: 11px 12px !important; gap: 9px; }
.hero-chip__text { font-size: 0.78rem !important; }
.hero-chip__sub { font-size: 0.64rem !important; line-height: 1.3; }
.hero-chip__arrow { width: 24px; height: 24px; }
.hero-chip__arrow svg { width: 10px; height: 10px; }
}
@media (max-width: 480px) {
.hero__chips {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
NAV — mobil temizlik
============================================================ */
@media (max-width: 820px) {
.nav__container { padding: 10px 14px; gap: 12px; }
.nav__actions { gap: 8px; }
}
/* ============================================================
PERFORMANS — mobilde ağır efektleri tamamen kapat
============================================================ */
@media (max-width: 900px) {
body::before {
/* heavy radial gradient layer — mobil için sadelefltir */
background:
radial-gradient(800px 600px at 85% -10%, rgba(0,232,143,0.10), transparent 60%),
radial-gradient(600px 500px at -10% 80%, rgba(140,90,220,0.06), transparent 60%) !important;
}
/* hero ticker scroll perf */
.hero__ticker-row.is-marquee { animation-duration: 60s !important; }
/* tüm backdrop-filter kullanan elementlerde mobile fallback */
.nav__menu, .nav__mobile, .cta__form {
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
}
@media (max-width: 600px) {
/* küçük telefonlar: tüm parallax/blur efektlerini de iptal */
.hero__glow--1, .hero__glow--2 {
display: none !important;
}
.hero__noise { opacity: 0.06 !important; }
body::after { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.fab__pulse, .fab__btn--wa::after,
.mab__primary::after,
.ts-pulse,
.urg-pulse {
animation: none !important;
}
}
/* ============================================================
COMPARE — mobil basitleştirme
============================================================ */
@media (max-width: 820px) {
.compare__list li {
font-size: 0.86rem !important;
line-height: 1.45;
padding-left: 26px;
}
.compare__col-head { gap: 10px; }
.compare__col-title strong { font-size: 1.05rem; }
.compare__col-title span { font-size: 0.72rem; }
}
/* ============================================================
WALL (testimonials) — mobil
============================================================ */
@media (max-width: 820px) {
.wall__stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px;
}
.wall__stat-num strong { font-size: 1.6rem; }
.wall__stat-label { font-size: 0.7rem; line-height: 1.3; }
.rcard { padding: 18px 16px !important; }
.rcard__text { font-size: 0.88rem !important; line-height: 1.5; }
}
/* ============================================================
CTA contact form — mobil rafinasyon (önceki üstünde)
============================================================ */
@media (max-width: 820px) {
.cta__form-head {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
}
/* === Hero title gradient bug — küçük ekranda renk her zaman güvenli === */
@media (max-width: 480px) {
.hero__title { padding-left: 0 !important; }
}
/* ============================================================
TRUST BAND — Hero altı yüksek dikkat noktası
============================================================ */
.tband {
position: relative;
padding: 26px 0 22px;
background: linear-gradient(180deg, var(--canvas) 0%, rgba(14,14,22,0.92) 100%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.tband::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
height: 1px;
width: min(680px, 80%);
background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
opacity: 0.5;
}
.tband__row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
align-items: center;
}
.tband__cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
text-align: center;
padding: 4px 8px;
}
.tband__cell + .tband__cell::before {
content: "";
position: absolute;
left: -10px;
top: 18%;
bottom: 18%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--line-2) 50%, transparent);
}
.tband__num {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 1.95rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 4px;
}
.tband__num span {
font-size: 0.62em;
font-weight: 400;
color: var(--muted-2);
letter-spacing: 0;
}
.tband__num--gold { color: var(--gold-2); }
.tband__num--gold svg { width: 18px; height: 18px; }
.tband__num--g {
background: linear-gradient(135deg, var(--gold-2), var(--gold));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tband__txt {
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--muted-2);
line-height: 1.3;
}
.tband__cell--guarantee .tband__shield {
position: absolute;
top: -4px;
right: 8px;
width: 22px;
height: 22px;
color: var(--gold-2);
opacity: 0.6;
}
@media (max-width: 900px) {
.tband { padding: 20px 0 18px; }
.tband__row { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.tband__cell:nth-child(4) { grid-column: span 1; }
.tband__cell:nth-child(5) {
grid-column: 1 / -1;
flex-direction: row;
justify-content: center;
gap: 10px;
padding: 10px 14px;
margin-top: 4px;
background: linear-gradient(135deg, rgba(216,176,112,0.10), rgba(216,176,112,0.04));
border: 1px solid rgba(216,176,112,0.22);
border-radius: 12px;
}
.tband__cell--guarantee .tband__shield {
position: static;
width: 18px; height: 18px;
opacity: 0.9;
}
.tband__cell + .tband__cell::before { display: none; }
}
@media (max-width: 520px) {
.tband__row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tband__num { font-size: 1.2rem; }
.tband__txt { font-size: 0.66rem; }
.tband__cell:nth-child(5) { grid-column: 1 / -1; }
}
/* === FAB butonları — body padding fix === */
@media (max-width: 820px) {
/* sticky bar 64px, ekstra safe-area dahil */
body { padding-bottom: 0; }
}
/* === Hero ticker mobil — daha sessiz === */
@media (max-width: 600px) {
.hero__ticker-row.is-marquee {
animation-duration: 70s !important;
}
}
/* ============================================================
████████████████████████████████████████████████████████████
PREMIUM ELITE LAYER — "Vay be" katmanı
- Scroll progress bar
- Primary CTA: yeşil gradient + halo + animasyon
- Trust band: aurora glow + count-up + premium hover
- svc ribbon (gerçek kurdele, altın gradient)
- svc-card: animated gradient border + güçlü hover halo
- Hero: arka aurora glow, italic premium
- Section dividers
- FAB tooltip
- Tipografi: line-height + drop shadow rafinasyonu
████████████████████████████████████████████████████████████
============================================================ */
/* === Premium token ekleri === */
:root {
--elite-glow: 0 0 0 1px rgba(0,232,143,0.28), 0 20px 48px -12px rgba(0,232,143,0.42), 0 8px 20px -8px rgba(0,232,143,0.28);
--elite-glow-soft: 0 0 0 1px rgba(0,232,143,0.18), 0 12px 32px -10px rgba(0,232,143,0.28), 0 4px 12px -4px rgba(0,232,143,0.18);
--grad-cta: linear-gradient(135deg, #5af2b0 0%, #00e88f 45%, #009a5c 100%);
--grad-cta-hover: linear-gradient(135deg, #7af8c2 0%, #1fff9c 45%, #00b370 100%);
--grad-gold: linear-gradient(135deg, #f6d18a 0%, #d8b070 50%, #b8894a 100%);
--grad-text-premium: linear-gradient(135deg, #ffffff 0%, #f0f8f4 100%);
}
/* ============================================================
SCROLL PROGRESS BAR — Sayfanın en üstünde ince yeşil çizgi
============================================================ */
.spr {
position: fixed;
top: 0; left: 0; right: 0;
height: 2.5px;
z-index: 100;
background: rgba(0,0,0,0.18);
pointer-events: none;
}
.spr__fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00e88f 0%, #5af2b0 50%, #00e88f 100%);
background-size: 200% 100%;
box-shadow: 0 0 12px rgba(0,232,143,0.65), 0 1px 0 rgba(255,255,255,0.18);
transition: width 0.08s linear;
animation: sprShimmer 3s linear infinite;
}
@keyframes sprShimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
/* ============================================================
PRIMARY CTA — Premium gradient + halo + animated arrow
============================================================ */
.btn--primary,
.svc-card__cta--filled,
.svc__bottom-cta {
background: var(--grad-cta) !important;
color: #0a1f14 !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
position: relative;
isolation: isolate;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.42),
inset 0 -1px 0 rgba(0,90,55,0.35),
0 14px 32px -8px rgba(0,232,143,0.55),
0 6px 14px -4px rgba(0,232,143,0.32),
0 1px 2px rgba(0,0,0,0.25) !important;
transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, background 0.35s ease, filter 0.3s ease !important;
}
.btn--primary::before,
.svc-card__cta--filled::before,
.svc__bottom-cta::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: radial-gradient(circle, rgba(0,232,143,0.6), transparent 70%);
filter: blur(14px);
z-index: -1;
opacity: 0.55;
transition: opacity 0.4s ease, filter 0.4s ease;
}
.btn--primary::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
transform: translateX(-110%);
transition: transform 0.9s var(--ease-out);
pointer-events: none;
}
.btn--primary:hover,
.svc-card__cta--filled:hover,
.svc__bottom-cta:hover {
background: var(--grad-cta-hover) !important;
transform: translateY(-2px) scale(1.01);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(0,90,55,0.4),
0 24px 48px -10px rgba(0,232,143,0.78),
0 10px 22px -6px rgba(0,232,143,0.45),
0 2px 4px rgba(0,0,0,0.3) !important;
}
.btn--primary:hover::before {
opacity: 0.85;
filter: blur(20px);
}
.btn--primary:hover::after {
transform: translateX(110%);
}
.btn--primary:active,
.svc-card__cta--filled:active {
transform: translateY(0) scale(0.99);
}
.btn--primary svg,
.svc-card__cta--filled svg {
color: #0a1f14;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35));
}
/* Ghost button refinement */
.btn--ghost {
background: rgba(255,255,255,0.03) !important;
color: #f5f5fa !important;
border: 1px solid rgba(0,232,143,0.32) !important;
position: relative;
overflow: hidden;
transition: all 0.35s var(--ease-out) !important;
}
.btn--ghost::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 100%, rgba(0,232,143,0.18), transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.btn--ghost:hover {
background: rgba(0,232,143,0.06) !important;
border-color: rgba(0,232,143,0.6) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(0,232,143,0.32) !important;
}
.btn--ghost:hover::before { opacity: 1; }
.btn--ghost svg { color: #5af2b0; transition: color 0.3s ease, transform 0.3s ease; }
.btn--ghost:hover svg { color: #fff; }
/* Nav primary button (top right) — match style */
.nav__actions .btn--primary {
background: var(--grad-cta) !important;
color: #0a1f14 !important;
}
/* ============================================================
TRUST BAND — Aurora glow + count-up + premium hover
============================================================ */
.tband {
position: relative;
isolation: isolate;
overflow: hidden;
}
.tband__aura {
position: absolute;
inset: -20% -10%;
z-index: -1;
background:
radial-gradient(50% 60% at 20% 50%, rgba(0,232,143,0.18), transparent 60%),
radial-gradient(40% 50% at 80% 50%, rgba(216,176,112,0.12), transparent 60%);
filter: blur(40px);
opacity: 0.7;
pointer-events: none;
}
.tband__cell {
transition: transform 0.4s var(--ease-out), background-color 0.3s ease;
border-radius: 14px;
cursor: default;
}
.tband__cell:hover {
transform: translateY(-3px);
background: linear-gradient(180deg, rgba(0,232,143,0.05) 0%, transparent 100%);
}
.tband__num {
font-feature-settings: "tnum", "lnum";
font-variant-numeric: tabular-nums;
color: #f5f5fa !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: 0 0 24px rgba(0,232,143,0.28), 0 1px 0 rgba(0,0,0,0.25);
}
.tband__num--gold {
color: #f6d18a !important;
text-shadow: 0 0 24px rgba(216,176,112,0.5), 0 1px 0 rgba(0,0,0,0.25);
}
.tband__num--g {
color: #5af2b0 !important;
text-shadow: 0 0 26px rgba(0,232,143,0.6), 0 1px 0 rgba(0,0,0,0.25);
}
.tband__count {
font-variant-numeric: tabular-nums;
color: inherit;
-webkit-text-fill-color: currentColor;
}
/* ============================================================
SVC RIBBON — Gerçek kurdele (altın gradient)
============================================================ */
.svc-card--featured {
position: relative;
overflow: visible;
border: 1px solid rgba(0,232,143,0.42) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 2px 4px rgba(0,0,0,0.3),
0 32px 64px -16px rgba(0,232,143,0.32),
0 16px 32px -12px rgba(0,0,0,0.55) !important;
}
.svc-card--featured::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(246,209,138,0.5) 0%, rgba(0,232,143,0.5) 50%, rgba(246,209,138,0.5) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 1;
pointer-events: none;
opacity: 0.7;
}
.svc-ribbon {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 14px 5px 11px;
background: var(--grad-gold);
color: #2a1d08;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.16em;
border-radius: 999px;
white-space: nowrap;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba(120,80,30,0.3),
0 6px 16px -4px rgba(216,176,112,0.6),
0 2px 4px rgba(0,0,0,0.3);
text-transform: uppercase;
font-family: var(--font-sans);
}
.svc-ribbon svg {
width: 11px;
height: 11px;
color: #2a1d08;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4));
}
.svc-ribbon::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
transform: translateX(-110%);
animation: ribbonShine 3.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes ribbonShine {
0%, 25% { transform: translateX(-110%); }
50%, 100% { transform: translateX(110%); }
}
/* ============================================================
SVC CARDS — animated border + güçlü halo
============================================================ */
.svc-card {
position: relative;
transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.35s ease !important;
}
.svc-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(0,232,143,0.55) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 2px 4px rgba(0,0,0,0.3),
0 36px 72px -16px rgba(0,232,143,0.4),
0 18px 36px -12px rgba(0,0,0,0.55) !important;
}
.svc-card:hover .svc-card__icon {
transform: scale(1.08) rotate(-3deg);
transition: transform 0.5s var(--ease-out);
}
/* Tag refinement — daha okunaklı, daha modern */
.svc-card__tag {
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
padding: 4px 10px !important;
border-radius: 6px;
font-size: 0.62rem !important;
border: 1px solid currentColor;
opacity: 0.92;
}
.svc-card[data-tone="accent"] .svc-card__tag {
background: rgba(0,232,143,0.14) !important;
color: #5af2b0 !important;
border-color: rgba(0,232,143,0.35) !important;
}
.svc-card[data-tone="violet"] .svc-card__tag {
background: rgba(155,155,255,0.14) !important;
color: #b8b8ff !important;
border-color: rgba(155,155,255,0.35) !important;
}
.svc-card[data-tone="green"] .svc-card__tag {
background: rgba(94,224,160,0.14) !important;
color: #8ef0b8 !important;
border-color: rgba(94,224,160,0.35) !important;
}
.svc-card[data-tone="amber"] .svc-card__tag {
background: rgba(168,245,90,0.14) !important;
color: #c4f88c !important;
border-color: rgba(168,245,90,0.35) !important;
}
/* ============================================================
HERO — arka aurora glow + premium italic + numara halosu
============================================================ */
.hero {
position: relative;
}
.hero::after {
content: "";
position: absolute;
top: 30%;
left: 8%;
width: 50%;
height: 40%;
background: radial-gradient(closest-side, rgba(0,232,143,0.16), transparent 70%);
filter: blur(80px);
pointer-events: none;
z-index: 0;
animation: heroAuroraPulse 8s ease-in-out infinite;
}
@keyframes heroAuroraPulse {
0%, 100% { opacity: 0.6; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.08); }
}
.hero__inner { position: relative; z-index: 1; }
.hero__title {
text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.hero__title em {
background: linear-gradient(180deg,
#ffffff 0%,
#c8e8d6 30%,
#5af2b0 60%,
#00e88f 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 4px 24px rgba(0,232,143,0.55)) drop-shadow(0 0 6px rgba(0,232,143,0.25)) !important;
}
/* Hero meta nums — Bloomberg-vibe monospace tabular */
.hero__meta-num,
.tband__num,
.svc-card__price strong {
font-feature-settings: "tnum", "lnum", "ss01";
font-variant-numeric: tabular-nums;
}
/* Hero proof items — glow on hover */
.hero__proof-item {
transition: transform 0.35s var(--ease-out);
}
.hero__proof-item:hover {
transform: translateX(3px);
}
.hero__proof-item:nth-child(1) .hero__proof-icon {
box-shadow: 0 0 0 3px rgba(0,232,143,0.18), 0 4px 12px -2px rgba(0,232,143,0.42) !important;
animation: proofPulse 2.4s ease-in-out infinite;
}
@keyframes proofPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(0,232,143,0.18), 0 4px 12px -2px rgba(0,232,143,0.42); }
50% { box-shadow: 0 0 0 6px rgba(0,232,143,0.08), 0 6px 18px -2px rgba(0,232,143,0.55); }
}
/* Hero eyebrow — daha premium */
.hero__eyebrow {
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.hero__eyebrow::before {
background: linear-gradient(135deg,
rgba(0,232,143,0.55) 0%,
rgba(246,209,138,0.35) 30%,
rgba(155,155,255,0.35) 70%,
rgba(0,232,143,0.45) 100%) !important;
}
/* Hero ticker — premium tabular */
.hero__ticker {
position: relative;
}
.hero__ticker::after {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 12px rgba(0,232,143,0.7);
margin-top: -3px;
}
/* SECTION DIVIDERS — Kaldırıldı (mevcut border-top/bottom yeterli) */
/* ============================================================
FAB tooltip — 10s sonra otomatik açılan WhatsApp davetiyesi
============================================================ */
.fab__tip {
position: relative;
margin-bottom: 4px;
pointer-events: auto;
display: inline-flex;
flex-direction: column;
gap: 2px;
max-width: 260px;
padding: 12px 32px 12px 14px;
background: linear-gradient(180deg, #ffffff 0%, #f0f8f4 100%);
color: #0a1f14;
border-radius: 14px;
font-family: var(--font-sans);
line-height: 1.35;
box-shadow:
0 18px 38px -10px rgba(0,0,0,0.45),
0 8px 16px -4px rgba(0,232,143,0.28),
inset 0 1px 0 rgba(255,255,255,0.9);
border: 1px solid rgba(0,232,143,0.18);
transform-origin: bottom right;
transform: scale(0.6) translateY(20px);
opacity: 0;
transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
position: relative;
}
.fab__tip.is-open {
opacity: 1;
transform: scale(1) translateY(0);
}
.fab__tip::after {
content: "";
position: absolute;
right: 22px;
bottom: -7px;
width: 14px; height: 14px;
background: linear-gradient(135deg, #ffffff 0%, #f0f8f4 100%);
transform: rotate(45deg);
border-right: 1px solid rgba(0,232,143,0.18);
border-bottom: 1px solid rgba(0,232,143,0.18);
border-radius: 0 0 4px 0;
}
.fab__tip strong {
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #0a1f14;
}
.fab__tip em {
font-style: normal;
font-size: 0.76rem;
color: #3a4a3f;
letter-spacing: 0;
}
.fab__tip-x {
position: absolute;
top: 6px;
right: 8px;
font-size: 18px;
line-height: 1;
color: #8aa097;
cursor: pointer;
font-weight: 300;
padding: 2px 6px;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.fab__tip-x:hover { background: rgba(0,0,0,0.06); color: #0a1f14; }
@media (max-width: 820px) {
.fab__tip {
max-width: 210px;
padding: 10px 28px 10px 12px;
font-size: 0.86rem;
}
.fab__tip strong { font-size: 0.84rem; }
.fab__tip em { font-size: 0.7rem; }
}
/* ============================================================
COMPARE — Premium hover for "NexTR" column
============================================================ */
.compare__col--us:hover {
transform: translateY(-4px);
border-color: rgba(0,232,143,0.6) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 2px 4px rgba(0,0,0,0.3),
0 40px 80px -16px rgba(0,232,143,0.42),
0 20px 40px -12px rgba(0,0,0,0.6) !important;
}
.compare__mark {
box-shadow: 0 0 0 1px rgba(0,232,143,0.32), 0 8px 22px -6px rgba(0,232,143,0.4);
}
/* ============================================================
WALL (testimonials) — premium card hover
============================================================ */
.rcard {
transition: transform 0.4s var(--ease-out), border-color 0.3s ease, box-shadow 0.4s ease;
}
.rcard:hover {
transform: translateY(-4px);
border-color: rgba(0,232,143,0.32) !important;
box-shadow: 0 28px 56px -16px rgba(0,232,143,0.18), 0 12px 24px -10px rgba(0,0,0,0.4) !important;
}
.rcard__verified { color: #5af2b0; }
.rcard__tag {
background: rgba(0,232,143,0.10) !important;
color: #8ef0b8 !important;
border: 1px solid rgba(0,232,143,0.22);
}
/* ============================================================
CTA FORM — Premium glass + green accents
============================================================ */
.cta__form {
background: linear-gradient(180deg, rgba(22,22,31,0.85) 0%, rgba(14,14,22,0.92) 100%) !important;
border: 1px solid rgba(0,232,143,0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 30px 60px -16px rgba(0,232,143,0.18),
0 16px 32px -10px rgba(0,0,0,0.45) !important;
position: relative;
overflow: hidden;
}
.cta__form::before {
content: "";
position: absolute;
top: -1px; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
opacity: 0.6;
}
.cta__form-badge {
background: rgba(0,232,143,0.14) !important;
color: #5af2b0 !important;
border: 1px solid rgba(0,232,143,0.32);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: rgba(0,232,143,0.55) !important;
box-shadow: 0 0 0 3px rgba(0,232,143,0.18) !important;
outline: none;
}
/* ============================================================
FOOTER — Premium social hover + sharper trust badges
============================================================ */
.footer__social a:hover {
background: var(--accent) !important;
color: #0a1f14 !important;
border-color: var(--accent) !important;
box-shadow: 0 8px 18px -4px rgba(0,232,143,0.55);
}
.footer__trust-item {
transition: all 0.3s ease;
}
.footer__trust-item:hover {
background: rgba(0,232,143,0.08) !important;
border-color: rgba(0,232,143,0.4) !important;
color: #fff !important;
transform: translateY(-1px);
}
.footer__contact:hover { color: #5af2b0 !important; }
/* ============================================================
TYPOGRAPHY POLISH — okunabilirlik
============================================================ */
.section-sub {
line-height: 1.65 !important;
color: #b8b8ca !important;
}
.section-sub strong {
color: #fff !important;
font-weight: 600;
}
.svc-card__hook {
font-style: italic;
color: #5af2b0 !important;
font-family: var(--font-serif);
font-size: 1.05rem !important;
line-height: 1.4;
}
.svc-card__promise {
color: #d8d8e2 !important;
line-height: 1.55 !important;
}
.svc-card__promise strong {
color: #fff !important;
font-weight: 600;
}
.svc-card__price {
background: rgba(0,232,143,0.07) !important;
border: 1px solid rgba(0,232,143,0.22) !important;
color: #b8b8ca !important;
}
.svc-card__price strong {
color: #5af2b0 !important;
text-shadow: 0 0 12px rgba(0,232,143,0.42);
}
.svc-card__list li {
color: #c8c8d8 !important;
}
.svc-card__list li strong {
color: #fff !important;
font-weight: 600;
}
/* Hero subtitle — sharp readability */
.hero__sub {
color: #d8d8e2 !important;
line-height: 1.6 !important;
letter-spacing: -0.005em;
}
.hero__sub strong {
color: #fff !important;
font-weight: 600;
background: linear-gradient(180deg, #fff 0%, #c8e8d6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Compare list — daha okunabilir */
.compare__col--us .compare__list li strong {
color: #fff !important;
background: linear-gradient(180deg, #fff 0%, #c8e8d6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ============================================================
FLAGS in hero — make TR more vibrant
============================================================ */
.hero__eyebrow .he-flag--tr {
box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 4px 12px -2px rgba(227,10,23,0.45);
}
/* ============================================================
Bottom CTA on svc — premium aura
============================================================ */
.svc__bottom {
position: relative;
overflow: visible !important;
}
.svc__bottom-aura {
position: absolute;
inset: -10%;
z-index: -1;
background:
radial-gradient(50% 60% at 30% 50%, rgba(0,232,143,0.22), transparent 70%),
radial-gradient(40% 50% at 80% 50%, rgba(246,209,138,0.12), transparent 70%);
filter: blur(40px);
opacity: 0.8;
pointer-events: none;
}
.svc__bottom-urgency {
background: rgba(0,232,143,0.10) !important;
border: 1px solid rgba(0,232,143,0.32) !important;
color: #5af2b0 !important;
}
.svc__bottom-urgency strong { color: #5af2b0; }
.urg-pulse {
background: var(--accent);
box-shadow: 0 0 0 3px rgba(0,232,143,0.18), 0 0 8px rgba(0,232,143,0.55);
}
/* Bottom action — secondary metric line */
.svc__bottom-action {
align-items: stretch !important;
gap: 14px;
}
.svc__bottom-meta {
color: #b8b8ca !important;
}
/* ============================================================
MOBILE — premium elite refinements
============================================================ */
@media (max-width: 820px) {
/* Scroll progress slightly thicker on mobile for visibility */
.spr { height: 3px; }
/* Trust band aura softened */
.tband__aura { filter: blur(30px); opacity: 0.5; }
/* Hero aurora softened */
.hero::after {
width: 80%;
height: 30%;
top: 20%;
left: 10%;
filter: blur(50px);
opacity: 0.5;
}
/* Ribbon: smaller text but still premium */
.svc-ribbon {
top: -8px;
font-size: 0.6rem;
padding: 4px 11px 4px 9px;
letter-spacing: 0.12em;
}
.svc-ribbon svg { width: 9px; height: 9px; }
/* CTA buttons stay premium but trimmed */
.btn--primary { padding: 14px 22px !important; }
/* svc-card hover disabled on mobile (no hover) */
.svc-card:hover { transform: none !important; }
}
@media (max-width: 480px) {
.hero::after {
width: 100%;
left: 0;
opacity: 0.35;
}
.tband__aura { display: none; }
}
/* ============================================================
ACCESSIBILITY — reduce motion friendly
============================================================ */
@media (prefers-reduced-motion: reduce) {
.spr__fill, .svc-ribbon::after, .btn--primary::after,
.hero::after, .proofPulse, .ribbonShine,
.sprShimmer, .heroAuroraPulse {
animation: none !important;
}
.fab__tip { transition: opacity 0.2s ease; }
}
/* ============================================================
FOCUS RINGS — premium green ring
============================================================ */
:focus-visible {
outline: 2px solid var(--accent) !important;
outline-offset: 3px;
border-radius: 4px;
box-shadow: 0 0 0 6px rgba(0,232,143,0.15);
}
/* ============================================================
████████████████████████████████████████████████████████████
MAB FINAL — Mobile Sticky CTA (definitive, premium)
- Tek aksiyon: "Ücretsiz İşletme Analizi Al" → analiz.html
- Telefon butonu kaldırıldı (FAB ve footer'da zaten var)
- 320px → 1024px her ekranda kusursuz hizalanır
- Premium fintech CTA hissi (Stripe, Linear, Apple Pay seviyesi)
████████████████████████████████████████████████████████████
============================================================ */
/* Desktop'ta gizli */
.mab { display: none; }
@media (max-width: 820px) {
.mab {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 65;
padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
background: linear-gradient(180deg, rgba(8,8,14,0.78) 0%, rgba(8,8,14,0.96) 60%);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-top: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 -12px 32px -12px rgba(0,0,0,0.5);
transform: translateY(120%);
opacity: 0;
transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
pointer-events: none;
}
.mab.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Primary CTA — tek button, full-width, text gerçekten ortada */
.mab__primary {
position: relative;
display: block;
width: 100%;
padding: 13px 50px 13px 50px;
border-radius: 14px;
text-decoration: none;
color: #06160e;
background:
linear-gradient(135deg, #00ec92 0%, #00c87a 55%, #009458 100%);
box-shadow:
0 12px 32px -6px rgba(0,232,143,0.55),
0 4px 10px -2px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.36),
inset 0 -1px 0 rgba(0,80,50,0.38);
overflow: hidden;
isolation: isolate;
-webkit-tap-highlight-color: transparent;
transition: transform 0.25s var(--ease-out), box-shadow 0.3s ease;
min-height: 56px;
}
.mab__primary:active {
transform: scale(0.985);
box-shadow:
0 6px 18px -4px rgba(0,232,143,0.6),
0 2px 6px -2px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.36);
}
/* Subtle shine — 6 saniyede bir, doğal premium hissi */
.mab__primary::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg,
transparent 35%,
rgba(255,255,255,0.22) 50%,
transparent 65%);
transform: translateX(-110%);
animation: mabShine 6s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes mabShine {
0%, 55% { transform: translateX(-110%); }
80%, 100% { transform: translateX(110%); }
}
/* Live dot — sol mutlak pozisyonda, dikey ortalı */
.mab__dot {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 0 4px rgba(255,255,255,0.22),
0 0 14px rgba(255,255,255,0.55);
animation: mabDotPulse 2s ease-in-out infinite;
z-index: 2;
}
@keyframes mabDotPulse {
0%, 100% {
box-shadow:
0 0 0 4px rgba(255,255,255,0.22),
0 0 14px rgba(255,255,255,0.55);
}
50% {
box-shadow:
0 0 0 8px rgba(255,255,255,0.04),
0 0 22px rgba(255,255,255,0.85);
}
}
/* Text block — full-width, gerçekten dead-center */
.mab__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
line-height: 1.16;
text-align: center;
width: 100%;
min-width: 0;
position: relative;
z-index: 2;
}
.mab__text strong {
font-family: var(--font-display), var(--font-sans);
font-size: 0.96rem;
font-weight: 600;
letter-spacing: -0.018em;
color: #06160e;
text-shadow: 0 1px 0 rgba(255,255,255,0.22);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-variation-settings: "wdth" 96, "opsz" 18;
}
.mab__text em {
font-family: var(--font-sans);
font-style: normal;
font-size: 0.7rem;
font-weight: 500;
color: rgba(6,22,14,0.74);
letter-spacing: 0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mab__text em span {
opacity: 0.45;
padding: 0 4px;
}
/* Arrow — sağ mutlak pozisyonda, dikey ortalı */
.mab__arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.24);
color: #06160e;
display: inline-flex;
align-items: center;
justify-content: center;
transition: right 0.3s var(--ease-out), background-color 0.25s ease, transform 0.3s var(--ease-out);
z-index: 2;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}
.mab__arrow svg {
width: 11px;
height: 11px;
color: #06160e;
stroke: #06160e;
}
.mab__primary:active .mab__arrow {
transform: translateY(-50%) translateX(2px);
background: rgba(255,255,255,0.36);
}
}
/* Tablet & büyük telefon (414px+) — biraz daha rahat */
@media (min-width: 414px) and (max-width: 820px) {
.mab__text strong { font-size: 1.02rem; }
.mab__text em { font-size: 0.74rem; }
.mab__primary { padding: 14px 52px 14px 52px; min-height: 60px; }
}
/* Standart telefon (360-413px) */
@media (max-width: 413px) {
.mab__primary { padding: 12px 48px 12px 48px; min-height: 54px; }
.mab__text strong { font-size: 0.92rem; }
.mab__text em { font-size: 0.68rem; }
.mab__arrow { width: 28px; height: 28px; right: 12px; }
.mab__dot { left: 16px; }
}
/* Küçük telefon (340-359px) */
@media (max-width: 359px) {
.mab__primary { padding: 11px 44px 11px 44px; min-height: 52px; }
.mab__text strong { font-size: 0.88rem; letter-spacing: -0.02em; }
.mab__text em { font-size: 0.64rem; }
.mab__arrow { width: 26px; height: 26px; right: 11px; }
.mab__dot { width: 8px; height: 8px; left: 13px; }
}
/* iPhone SE 1. nesil veya çok eski (320-339px) — minimum konfig */
@media (max-width: 339px) {
.mab { padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); }
.mab__primary { padding: 10px 40px 10px 40px; min-height: 50px; border-radius: 12px; }
.mab__text strong { font-size: 0.84rem; }
.mab__text em { font-size: 0.6rem; }
.mab__arrow { width: 24px; height: 24px; right: 10px; }
.mab__arrow svg { width: 10px; height: 10px; }
.mab__dot { left: 11px; width: 7px; height: 7px; }
}
/* Footer'a content çakışmasın */
@media (max-width: 820px) {
.footer { padding-bottom: 88px !important; }
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.mab__dot, .mab__primary::after { animation: none !important; }
}
/* ============================================================
PACKAGES — WhatsApp CTA visual style
============================================================ */
.svc-card__cta--wa {
background: linear-gradient(135deg, #29d76d 0%, #10a64b 100%) !important;
color: #062a17 !important;
border: 1px solid rgba(255,255,255,0.18) !important;
font-weight: 700 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.32),
inset 0 -1px 0 rgba(0,90,55,0.32),
0 10px 24px -6px rgba(37,211,102,0.5),
0 4px 10px -2px rgba(0,0,0,0.3) !important;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, background 0.3s ease !important;
}
.svc-card__cta--wa:hover {
background: linear-gradient(135deg, #34e078 0%, #14b855 100%) !important;
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.42),
inset 0 -1px 0 rgba(0,90,55,0.32),
0 14px 32px -6px rgba(37,211,102,0.7),
0 6px 14px -2px rgba(0,0,0,0.35) !important;
}
.svc-card__cta--wa .svc-card__cta-wa {
width: 16px;
height: 16px;
color: #062a17;
fill: #062a17;
flex-shrink: 0;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.2));
}
.svc-card__cta--wa svg:last-child {
color: #062a17;
stroke: #062a17;
}
/* Bottom mega CTA uses same WA style */
.svc__bottom-cta {
background: linear-gradient(135deg, #29d76d 0%, #10a64b 100%) !important;
color: #062a17 !important;
}
.svc__bottom-cta svg { color: #062a17 !important; stroke: #062a17 !important; }
.svc__bottom-cta .btn__ic svg { fill: #062a17 !important; }
/* "Size özel paket" filled card */
.svc-card__cta--filled.svc-card__cta {
background: linear-gradient(135deg, #29d76d 0%, #10a64b 100%) !important;
color: #062a17 !important;
}
.svc-card__cta--filled svg { color: #062a17 !important; stroke: #062a17 !important; }
.svc-card__cta--filled .svc-card__cta-wa { fill: #062a17 !important; }
/* Fiyat satırı — TL kullanımına uygun rafinasyon */
.svc-card__price {
font-feature-settings: "tnum", "lnum";
font-variant-numeric: tabular-nums;
}
.svc-card__price span {
opacity: 0.4;
padding: 0 4px;
}
/* ============================================================
WALL — Doğrulanabilir yorumlar (güvenilirlik artışı)
============================================================ */
.wall__verify {
display: flex;
flex-direction: column;
gap: 12px;
margin: -8px 0 36px;
padding: 18px 20px;
background: linear-gradient(135deg, rgba(0,232,143,0.04) 0%, rgba(0,232,143,0.08) 100%);
border: 1px solid rgba(0,232,143,0.22);
border-radius: 14px;
position: relative;
z-index: 2;
}
.wall__verify-badges {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.wall__verify-badge {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 11px;
color: var(--ink);
text-decoration: none;
transition: all 0.3s var(--ease-out);
position: relative;
}
.wall__verify-badge:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(0,232,143,0.4);
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4), 0 4px 8px -2px rgba(0,232,143,0.18);
}
.wall__verify-badge > svg:first-child {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.wall__verify-badge > span {
display: inline-flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
line-height: 1.2;
}
.wall__verify-badge strong {
font-size: 0.96rem;
color: var(--ink);
font-weight: 700;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.wall__verify-badge em {
font-style: normal;
font-size: 0.7rem;
color: var(--muted-2);
letter-spacing: 0;
}
.wall__verify-arrow {
width: 13px;
height: 13px;
color: var(--muted-2);
flex-shrink: 0;
transition: transform 0.3s ease, color 0.3s ease;
}
.wall__verify-badge:hover .wall__verify-arrow {
color: #5af2b0;
transform: translateX(3px);
}
.wall__verify-note {
display: inline-flex;
align-items: flex-start;
gap: 8px;
font-size: 0.78rem;
color: var(--muted-2);
line-height: 1.45;
}
.wall__verify-note svg {
width: 14px;
height: 14px;
color: var(--accent);
flex-shrink: 0;
margin-top: 1px;
}
.wall__verify-note strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
.wall__verify-badges { grid-template-columns: 1fr; gap: 8px; }
.wall__verify { padding: 14px 16px; margin: 0 0 28px; }
.wall__verify-badge { padding: 10px 12px; }
.wall__verify-badge strong { font-size: 0.88rem; }
.wall__verify-badge em { font-size: 0.66rem; }
}
/* 4-star reviews — beşinci yıldız soluk (gerçekçilik) */
.rcard__stars--4 span {
opacity: 0.25;
color: var(--muted-2);
}
.rcard__stars--4 {
color: #ffb800;
}
.rcard__stars {
color: #ffb800;
font-size: 0.95rem;
letter-spacing: 0.04em;
}
/* "Yararlı" sayacı — Google review benzeri */
.rcard__helpful {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: var(--muted-2);
letter-spacing: 0;
margin-left: auto;
padding-left: 12px;
border-left: 1px solid var(--line);
}
.rcard__helpful svg {
width: 12px;
height: 12px;
color: var(--muted-2);
}
/* Dual bottom links — Google + Trustpilot */
.wall__bottom--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.wall__bottom--split .wall__more {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid var(--line);
border-radius: 14px;
color: var(--ink);
text-decoration: none;
transition: all 0.35s var(--ease-out);
}
.wall__bottom--split .wall__more:hover {
background: linear-gradient(180deg, rgba(0,232,143,0.07) 0%, rgba(0,232,143,0.03) 100%);
border-color: rgba(0,232,143,0.42);
transform: translateY(-2px);
box-shadow: 0 16px 32px -10px rgba(0,232,143,0.22), 0 6px 14px -4px rgba(0,0,0,0.4);
}
.wall__bottom--split .wall__more-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255,255,255,0.06);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wall__bottom--split .wall__more-icon svg { width: 20px; height: 20px; }
.wall__bottom--split .wall__more > span {
display: inline-flex;
flex-direction: column;
gap: 2px;
flex: 1;
line-height: 1.25;
}
.wall__bottom--split .wall__more strong {
font-size: 0.94rem;
font-weight: 600;
color: var(--ink);
}
.wall__bottom--split .wall__more em {
font-style: normal;
font-size: 0.74rem;
color: var(--muted-2);
}
.wall__bottom--split .wall__more-arrow {
width: 14px;
height: 14px;
color: var(--muted-2);
flex-shrink: 0;
transition: transform 0.3s ease, color 0.3s ease;
}
.wall__bottom--split .wall__more:hover .wall__more-arrow {
color: var(--accent);
transform: translateX(3px);
}
@media (max-width: 720px) {
.wall__bottom--split {
grid-template-columns: 1fr;
gap: 10px;
}
.wall__bottom--split .wall__more { padding: 13px 14px; }
.wall__bottom--split .wall__more-icon { width: 34px; height: 34px; }
.wall__bottom--split .wall__more strong { font-size: 0.88rem; }
.wall__bottom--split .wall__more em { font-size: 0.7rem; }
}
/* ============================================================
SVC CLOSE — Paketler sonu sade kapanış CTA (yeni)
Eski "Size özel paket" mega CTA yerine
============================================================ */
.svc__close {
margin: clamp(40px, 7vw, 80px) auto 0;
max-width: 880px;
padding: clamp(28px, 5vw, 44px) clamp(24px, 4vw, 40px);
background:
linear-gradient(180deg, rgba(0,232,143,0.06) 0%, rgba(0,232,143,0.02) 100%),
linear-gradient(180deg, rgba(22,22,31,0.65) 0%, rgba(14,14,22,0.85) 100%);
border: 1px solid rgba(0,232,143,0.28);
border-radius: 20px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 24px 56px -16px rgba(0,232,143,0.18),
0 12px 28px -10px rgba(0,0,0,0.45);
position: relative;
overflow: hidden;
}
.svc__close::before {
content: "";
position: absolute;
top: -1px; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
opacity: 0.7;
}
.svc__close-inner {
display: grid;
grid-template-columns: 1.5fr auto;
gap: clamp(20px, 4vw, 36px);
align-items: center;
}
.svc__close-copy { display: flex; flex-direction: column; gap: 8px; }
.svc__close-eye {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted-2);
}
.svc__close-eye .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(0,232,143,0.18), 0 0 10px rgba(0,232,143,0.55);
}
.svc__close-copy h3 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--ink);
margin: 4px 0 6px;
}
.svc__close-copy h3 em {
background: linear-gradient(180deg, #ffffff 0%, #5af2b0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
}
.svc__close-copy p {
font-size: 0.96rem;
color: var(--muted-2);
line-height: 1.55;
max-width: 480px;
}
.svc__close-copy p strong { color: var(--ink); font-weight: 600; }
.svc__close-cta { flex-shrink: 0; }
/* Örnek hizmet etiketleri */
.svc__close-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 14px;
}
.svc__close-tags li {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 5px 11px;
border-radius: 999px;
color: var(--ink-2);
background: rgba(0,232,143,0.07);
border: 1px solid rgba(0,232,143,0.22);
white-space: nowrap;
}
.svc__close-tags li:last-child {
color: #5af2b0;
font-weight: 600;
background: rgba(0,232,143,0.12);
border-color: rgba(0,232,143,0.4);
}
@media (max-width: 720px) {
.svc__close-inner {
grid-template-columns: 1fr;
gap: 18px;
}
.svc__close-cta { width: 100%; justify-content: center; }
.svc__close-tags li { font-size: 0.68rem; padding: 4px 9px; }
}
/* ============================================================
CTA SECTION v2 — 2 kolon: değer + WhatsApp + form
Soğuk kitleyi dönüştürmek için güven + netlik + düşük friction
============================================================ */
.cta__inner--split {
max-width: 1100px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(28px, 4vw, 56px);
align-items: start;
text-align: left;
}
.cta__inner--split .cta__title {
font-size: clamp(2rem, 4vw, 3.2rem);
margin: 18px 0 16px;
text-align: left;
}
.cta__inner--split .cta__sub {
margin: 0 0 26px;
text-align: left;
max-width: 100%;
}
.cta__inner--split .cta__perks {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin: 0 0 28px;
max-width: 100%;
}
.cta__inner--split .cta__perks li {
font-size: 0.92rem;
line-height: 1.45;
align-items: flex-start;
}
.cta__inner--split .cta__perks li svg { margin-top: 2px; }
/* 3 adım timeline */
.cta__steps {
display: flex;
align-items: stretch;
gap: 4px;
margin: 0 0 26px;
padding: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(245,241,232,0.1);
border-radius: 16px;
}
.cta__step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
flex: 1;
}
.cta__step-num {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--grad-cta, linear-gradient(135deg,#00e88f,#009a5c));
color: #06160e;
font-weight: 700;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px -2px rgba(0,232,143,0.45);
}
.cta__step-txt { display: flex; flex-direction: column; gap: 2px; }
.cta__step-txt strong {
font-size: 0.8rem;
color: var(--canvas);
font-weight: 600;
line-height: 1.2;
}
.cta__step-txt span {
font-size: 0.68rem;
color: rgba(245,241,232,0.55);
line-height: 1.2;
}
.cta__step-line {
flex: 0 0 auto;
width: 18px;
height: 1px;
background: rgba(245,241,232,0.18);
align-self: flex-start;
margin-top: 15px;
}
/* WhatsApp hızlı yol butonu */
.cta__wa {
display: flex;
align-items: center;
gap: 13px;
padding: 15px 18px;
border-radius: 16px;
background: linear-gradient(135deg, #29d76d 0%, #10a64b 100%);
color: #06160e;
text-decoration: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.32),
inset 0 -1px 0 rgba(0,80,50,0.32),
0 14px 32px -8px rgba(37,211,102,0.55),
0 4px 10px -2px rgba(0,0,0,0.3);
margin-bottom: 22px;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.cta__wa::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
transform: translateX(-110%);
animation: ctaWaShine 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes ctaWaShine {
0%, 55% { transform: translateX(-110%); }
80%, 100% { transform: translateX(110%); }
}
.cta__wa:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.42),
inset 0 -1px 0 rgba(0,80,50,0.32),
0 20px 44px -8px rgba(37,211,102,0.7),
0 6px 14px -2px rgba(0,0,0,0.35);
}
.cta__wa-ic {
width: 38px;
height: 38px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.22);
border-radius: 11px;
color: #06160e;
position: relative;
z-index: 1;
}
.cta__wa-ic svg { width: 24px; height: 24px; }
.cta__wa-txt {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
.cta__wa-txt strong {
font-size: 1rem;
font-weight: 700;
color: #06160e;
letter-spacing: -0.01em;
}
.cta__wa-txt span {
font-size: 0.74rem;
color: rgba(6,22,14,0.72);
}
.cta__wa-arrow {
width: 16px;
height: 16px;
color: #06160e;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.cta__wa:hover .cta__wa-arrow { transform: translateX(3px); }
/* Güven satırı */
.cta__trust {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
}
.cta__trust-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
color: rgba(245,241,232,0.65);
}
.cta__trust-item svg {
width: 15px;
height: 15px;
color: #5af2b0;
flex-shrink: 0;
}
.cta__trust-item strong { color: var(--canvas); font-weight: 600; }
/* Form sağ kolon — biraz daha kompakt */
.cta__inner--split .cta__form {
margin: 0;
height: 100%;
}
/* Responsive — tek kolona düş */
@media (max-width: 920px) {
.cta__inner--split {
grid-template-columns: 1fr;
gap: 32px;
max-width: 640px;
}
.cta__inner--split .cta__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}
@media (max-width: 560px) {
.cta__steps {
flex-direction: column;
gap: 0;
padding: 14px 16px;
}
.cta__step {
flex-direction: row;
align-items: center;
text-align: left;
gap: 12px;
width: 100%;
padding: 8px 0;
}
.cta__step-txt { align-items: flex-start; }
.cta__step-txt strong { font-size: 0.86rem; }
.cta__step-txt span { font-size: 0.72rem; }
.cta__step-line {
width: 1px;
height: 12px;
margin: 0 0 0 15px;
align-self: flex-start;
}
.cta__wa { padding: 13px 14px; }
.cta__wa-txt strong { font-size: 0.92rem; }
.cta__wa-txt span { font-size: 0.7rem; }
.cta__wa-ic { width: 34px; height: 34px; }
.cta__wa-ic svg { width: 20px; height: 20px; }
}
/* ============================================================
████████████████████████████████████████████████████████████
TRUST LAYERS v2 — Soğuk kitle dönüşüm katmanları
- Wall CTA (sahte link yerine gerçek görüşme daveti)
- Garanti / Risk tersine çevirme bölümü
- SSS / itiraz kıran sorular
████████████████████████████████████████████████████████████
============================================================ */
/* Ortalı section başlığı */
.section-head--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-head--center .section-eyebrow { justify-content: center; }
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }
/* ── WALL CTA (yorumlar sonu, gerçek davet) ── */
.wall__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 28px;
padding: 22px 26px;
background: linear-gradient(135deg, rgba(0,232,143,0.06) 0%, rgba(0,232,143,0.1) 100%);
border: 1px solid rgba(0,232,143,0.24);
border-radius: 18px;
position: relative;
z-index: 2;
}
.wall__cta-text { display: flex; flex-direction: column; gap: 4px; }
.wall__cta-text strong {
font-family: var(--font-display);
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
}
.wall__cta-text span { font-size: 0.92rem; color: var(--muted-2); }
.wall__cta-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 14px 22px;
border-radius: 999px;
background: linear-gradient(135deg, #29d76d 0%, #10a64b 100%);
color: #06160e;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 12px 28px -8px rgba(37,211,102,0.55);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
flex-shrink: 0;
}
.wall__cta-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 18px 38px -8px rgba(37,211,102,0.7); }
.wall__cta-btn svg:first-child { width: 18px; height: 18px; }
.wall__cta-btn svg:last-child { width: 14px; height: 14px; transition: transform 0.3s ease; }
.wall__cta-btn:hover svg:last-child { transform: translateX(3px); }
@media (max-width: 640px) {
.wall__cta { flex-direction: column; align-items: stretch; text-align: center; padding: 20px; }
.wall__cta-btn { justify-content: center; }
}
/* ============================================================
GARANTİ — Risk tersine çevirme
============================================================ */
.guarantee {
position: relative;
padding: clamp(70px, 10vw, 120px) 0;
background: linear-gradient(180deg, var(--canvas) 0%, #0e0e18 100%);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
isolation: isolate;
}
.guarantee__bg {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(700px 450px at 50% 0%, rgba(0,232,143,0.12), transparent 60%),
radial-gradient(600px 400px at 85% 100%, rgba(216,176,112,0.08), transparent 60%);
pointer-events: none;
}
/* Eşit kartlar — paketler gibi yan yana (3 sütun) */
.guarantee__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: clamp(36px, 5vw, 56px);
}
.guarantee__card {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--line);
border-radius: 18px;
padding: 26px 24px;
transition: transform 0.4s var(--ease-out), border-color 0.3s ease, box-shadow 0.4s ease;
}
.guarantee__card:hover {
transform: translateY(-4px);
border-color: rgba(0,232,143,0.4);
box-shadow: 0 28px 56px -16px rgba(0,232,143,0.22), 0 12px 24px -10px rgba(0,0,0,0.5);
}
/* Para iade kartı — vurgulu ama aynı boyutta */
.guarantee__card--accent {
background: linear-gradient(165deg, rgba(0,232,143,0.1) 0%, var(--surface) 60%);
border: 1px solid rgba(0,232,143,0.34);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 40px -18px rgba(0,232,143,0.28);
}
.guarantee__card--accent .guarantee__ic {
background: var(--grad-cta, linear-gradient(135deg,#00e88f,#009a5c));
color: #06160e;
border-color: transparent;
box-shadow: 0 8px 20px -4px rgba(0,232,143,0.5);
}
.guarantee__badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: var(--grad-cta, linear-gradient(135deg,#00e88f,#009a5c));
color: #06160e;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
margin-top: 14px;
}
.guarantee__ic {
display: inline-flex;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border-radius: 13px;
background: rgba(0,232,143,0.12);
color: #5af2b0;
border: 1px solid rgba(0,232,143,0.24);
margin-bottom: 16px;
flex-shrink: 0;
}
.guarantee__ic svg { width: 23px; height: 23px; }
.guarantee__card h4 {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 9px;
line-height: 1.2;
}
.guarantee__card p {
font-size: 0.92rem;
line-height: 1.55;
color: var(--muted-2);
}
.guarantee__card p strong { color: var(--ink); font-weight: 600; }
.guarantee__card--accent p strong { color: #5af2b0; }
@media (max-width: 900px) {
.guarantee__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.guarantee__grid { grid-template-columns: 1fr; gap: 10px; }
.guarantee__card {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 14px;
align-items: start;
padding: 15px 16px;
border-radius: 14px;
}
.guarantee__ic {
grid-column: 1;
grid-row: 1 / span 3;
width: 38px;
height: 38px;
margin-bottom: 0;
border-radius: 11px;
}
.guarantee__ic svg { width: 19px; height: 19px; }
.guarantee__card h4 {
grid-column: 2;
font-size: 1.02rem;
margin-bottom: 4px;
}
.guarantee__card p {
grid-column: 2;
font-size: 0.85rem;
line-height: 1.45;
}
.guarantee__badge {
grid-column: 2;
margin-top: 9px;
font-size: 0.6rem;
padding: 4px 10px;
}
}
/* ============================================================
SSS / FAQ — İtiraz kıran sorular
============================================================ */
.faq {
position: relative;
padding: clamp(70px, 10vw, 120px) 0;
background: var(--canvas-2);
border-bottom: 1px solid var(--line);
}
.faq__list {
max-width: 820px;
margin: clamp(32px, 5vw, 48px) auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* 2 sütunlu kompakt grid — daha çok soru, daha az yükseklik */
.faq__grid {
max-width: 1020px;
margin: clamp(32px, 5vw, 48px) auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
}
.faq__col {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq__item {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq__item[open] {
border-color: rgba(0,232,143,0.35);
box-shadow: 0 12px 28px -12px rgba(0,232,143,0.18);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: clamp(0.98rem, 1.6vw, 1.12rem);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
transition: color 0.2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #5af2b0; }
.faq__icon {
position: relative;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(0,232,143,0.12);
border: 1px solid rgba(0,232,143,0.3);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 1.8px;
background: #5af2b0;
transform: translate(-50%, -50%);
transition: transform 0.3s var(--ease-out);
border-radius: 2px;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--accent); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: #06160e; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer {
padding: 0 22px 20px;
animation: faqReveal 0.4s var(--ease-out);
}
.faq__answer p {
font-size: 0.94rem;
line-height: 1.65;
color: var(--muted-2);
}
.faq__answer p strong { color: var(--ink); font-weight: 600; }
@keyframes faqReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.faq__foot {
max-width: 820px;
margin: 28px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
padding: 18px 24px;
background: rgba(0,232,143,0.05);
border: 1px solid rgba(0,232,143,0.2);
border-radius: 14px;
}
.faq__foot > span { font-size: 0.95rem; color: var(--ink-2); }
.faq__wa {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #29d76d 0%, #10a64b 100%);
color: #06160e;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px -6px rgba(37,211,102,0.5);
transition: transform 0.3s var(--ease-out);
}
.faq__wa:hover { transform: translateY(-2px); }
.faq__wa svg { width: 16px; height: 16px; }
@media (max-width: 820px) {
/* index iki sütunlu SSS — tek çerçeveli bağlı liste (kompakt) */
.faq__grid {
grid-template-columns: 1fr;
gap: 0;
max-width: 640px;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.faq__grid .faq__col { gap: 0; }
.faq__grid .faq__item {
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
border-radius: 0;
}
.faq__grid .faq__col:last-child .faq__item:last-child { border-bottom: none; }
.faq__grid .faq__item[open] {
background: rgba(0, 232, 143, 0.05);
box-shadow: none;
}
}
@media (max-width: 560px) {
.faq__item summary { padding: 15px 16px; font-size: 0.95rem; }
.faq__answer { padding: 0 16px 16px; }
.faq__foot { flex-direction: column; text-align: center; padding: 16px; }
/* index bağlı listede satırları biraz daha sıkı */
.faq__grid .faq__item summary { padding: 14px 16px; font-size: 0.92rem; gap: 12px; }
.faq__grid .faq__answer { padding: 0 16px 15px; }
.faq__grid .faq__answer p { font-size: 0.88rem; }
}
/* ============================================================
HERO MICRO-TRUST — CTA altı güven satırı (soğuk kitle)
============================================================ */
.hero__microtrust {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
}
.hero__microtrust-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
color: var(--muted-2);
letter-spacing: 0.01em;
}
.hero__microtrust-item svg {
width: 14px;
height: 14px;
color: #5af2b0;
flex-shrink: 0;
}
@media (max-width: 600px) {
/* Kutucuk/pill görünümü dandik duruyordu; sade, sola hizalı, yeşil işaretli liste */
.hero__microtrust {
flex-direction: column;
align-items: flex-start;
gap: 9px;
margin-top: 16px;
}
.hero__microtrust-item {
font-size: 0.85rem;
padding: 0;
background: none;
border: none;
border-radius: 0;
backdrop-filter: none;
}
}
/* ============================================================
████████████████████████████████████████████████████████████
RESPONSIVE SAFETY + FINAL POLISH (a–z denetim sonrası)
- Hiçbir ekranda yatay taşma / üst üste binme olmaz
- 320px en küçük cihaza kadar güvenli
████████████████████████████████████████████████████████████
============================================================ */
/* Yatay taşma kilidi — global güvence */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
/* NOT: svg'lere height:auto verilmez — ikonlar CSS'te sabit boyutlu, bozulur.
*{min-width:0} da kaldırıldı — flex/grid hizalamalarını bozabiliyordu. */
/* En küçük telefonlar (≤360px) — hero başlığı taşmasın */
@media (max-width: 360px) {
.hero__title { font-size: clamp(1.7rem, 8.5vw, 2.4rem) !important; }
.wsw, .wsw__item { white-space: nowrap; }
.hero__eyebrow { flex-wrap: wrap; }
.section-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
}
/* Çok küçük (≤340px) — paket kartı ve grid güvenlik */
@media (max-width: 340px) {
.container { padding-inline: 14px; }
.svc-card { flex-basis: min(270px, 80vw) !important; }
}
/* Tüm dönen kelime satırları taşarsa kelime kır */
.hero__title .line { max-width: 100%; }
/* Footer mega yazısı asla yatay taşma yapmasın */
.footer__mega { max-width: 100vw; overflow: hidden; }
/* Güvenli odak halkası taşması engelle */
:focus-visible { outline-offset: 2px; }
/* ============================================================
NAV DROPDOWN + GENİŞLETİLMİŞ MENÜ
============================================================ */
.nav__drop { position: relative; }
.nav__drop-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: 0;
cursor: pointer;
font: inherit;
}
.nav__drop-caret { width: 11px; height: 11px; transition: transform 0.3s var(--ease-out); opacity: 0.7; }
.nav__drop:hover .nav__drop-caret,
.nav__drop-toggle[aria-expanded="true"] .nav__drop-caret { transform: rotate(180deg); }
.nav__drop-menu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(8px);
width: 320px;
max-width: calc(100vw - 32px);
padding: 8px;
background: linear-gradient(180deg, rgba(22,22,31,0.96) 0%, rgba(12,12,20,0.98) 100%);
border: 1px solid var(--line-2);
border-radius: 16px;
box-shadow: 0 30px 60px -18px rgba(0,0,0,0.7), 0 12px 24px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, transform 0.32s var(--ease-out), visibility 0.28s;
z-index: 60;
max-height: 70vh;
overflow-y: auto;
}
.nav__drop:hover .nav__drop-menu,
.nav__drop-toggle[aria-expanded="true"] + .nav__drop-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* köprü — hover boşluğu kapanır */
.nav__drop::after {
content: "";
position: absolute;
top: 100%;
left: 0; right: 0;
height: 16px;
}
.nav__drop-menu a {
display: flex;
flex-direction: column;
gap: 1px;
padding: 10px 12px;
border-radius: 10px;
color: var(--ink-2);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav__drop-menu a strong {
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.nav__drop-menu a span {
font-size: 0.74rem;
color: var(--muted);
}
.nav__drop-menu a:hover {
background: rgba(0,232,143,0.1);
transform: translateX(2px);
}
.nav__drop-menu a:hover strong { color: #5af2b0; }
.nav__drop-all {
margin-top: 4px;
border-top: 1px solid var(--line);
border-radius: 0 0 10px 10px !important;
color: #5af2b0 !important;
font-weight: 600;
font-size: 0.86rem;
}
.nav__drop-all:hover { background: rgba(0,232,143,0.14) !important; }
/* Mobil menü grupları */
.nav__mobile-group {
display: block;
padding: 14px 0 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.nav__mobile-sub {
display: block;
padding: 11px 0 11px 14px;
font-size: 0.96rem;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
}
.nav__mobile-sub--all { color: #5af2b0; font-weight: 600; }
/* Aktif sayfa vurgusu */
.nav__link[aria-current="page"],
.nav__mobile-link[aria-current="page"] { color: #5af2b0 !important; }
@media (max-width: 1080px) {
.nav__menu { gap: 0; }
.nav__link { padding: 8px 12px 9px; font-size: 0.84rem; }
}
/* ============================================================
MOBİL PERFORMANS + MENÜ YENİDEN TASARIM (faz 4b)
ISINMA: dev bulanık (blur 40-90px) dekoratif katmanlar mobilde
GPU'yu kaydırırken yakıyordu -> gizlendi. Sonsuz animasyonlar tek
tura iner, backdrop-filter kapatılır. Reveal'lar transition tabanlı
olduğu için içerik GİZLENMEZ. Yükleme (.anloader) muaf.
============================================================ */
@media (max-width: 900px) {
*, *::before, *::after {
animation-iteration-count: 1 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.anloader, .anloader *, .anloader *::before, .anloader *::after {
animation-iteration-count: infinite !important;
}
/* Isınmanın asıl kaynağı: animasyonlu DEV blur katmanları (kaydırınca sürekli yeniden çizilir).
body::before (statik renk ışıltısı, ucuz) AÇIK kalır = mobilde derinlik/nefes verir,
düz siyahlığı kırar. Sadece blur-ağır ve animasyonlu katmanlar gizlenir. */
body::after,
.hero__bg, .hero__glow, .hero__glow--1, .hero__glow--2, .hero__orb,
.subhero__aura, .pcta__aura, .cta__aura, .ctaband__aura {
display: none !important;
}
}
/* ---- MOBİL MENÜ: premium, yeşil aksanlı, kontrastlı, dokunmatik dostu ---- */
@media (max-width: 820px) {
.nav__mobile {
max-height: 82vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
gap: 7px;
padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, #1d1d2c 0%, #15151f 100%) !important;
border-top: 2px solid var(--accent);
box-shadow: inset 0 16px 30px -22px rgba(0, 232, 143, 0.4);
}
.nav__mobile-group {
margin: 14px 4px 2px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-2);
}
.nav__mobile-group:first-child { margin-top: 2px; }
.nav__mobile-link,
.nav__mobile-sub {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 13px;
background: rgba(255, 255, 255, 0.025);
color: var(--ink-2);
font-weight: 500;
line-height: 1.2;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.nav__mobile-link { font-size: 1.02rem; }
.nav__mobile-sub { font-size: 0.95rem; color: var(--muted-2); }
.nav__mobile-link::after,
.nav__mobile-sub::after {
content: "›";
font-size: 1.25rem;
line-height: 1;
color: var(--muted);
margin-left: 12px;
}
.nav__mobile-link:active,
.nav__mobile-sub:active {
transform: scale(0.985);
background: rgba(0, 232, 143, 0.08);
}
.nav__mobile-link[aria-current="page"],
.nav__mobile-sub[aria-current="page"] {
background: rgba(0, 232, 143, 0.13);
border-color: rgba(0, 232, 143, 0.45);
color: var(--accent-2);
font-weight: 600;
}
.nav__mobile-link[aria-current="page"]::after,
.nav__mobile-sub[aria-current="page"]::after { color: var(--accent); }
.nav__mobile-sub--all {
background: rgba(0, 232, 143, 0.1) !important;
border-color: rgba(0, 232, 143, 0.4) !important;
color: var(--accent-2) !important;
font-weight: 600;
justify-content: center;
}
.nav__mobile-sub--all::after { content: ""; margin: 0; }
.nav__mobile .btn {
margin-top: 14px;
width: 100%;
justify-content: center;
padding: 15px;
font-size: 1.02rem;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-iteration-count: 1 !important; }
.anloader, .anloader *, .anloader *::before, .anloader *::after { animation-iteration-count: infinite !important; }
}
/* ============================================================
Mobil menü AÇIKKEN: yüzen WhatsApp/Instagram (fab) + sticky CTA (mab) gizle.
Menü kapanınca geri gelir. Üst üste binip "spam" görünmesini önler.
============================================================ */
.nav.is-open ~ .fab,
.nav.is-open ~ .mab {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* ════════════════════════════════════════════════════════════
ANASAYFA — Sıcak karanlık + ritim
Soğuk mavi-siyah zemini sıcak antrasite çevirir; çok renkli
(yeşil/mor/mavi) neon aurora'yı tek sıcak tona indirir. Amaç:
uzun sayfada boğuculuğu ve "AI kalıbı" hissini kırmak.
Sadece anasayfa (body.page-home) kapsamında, diğer sayfalara
dokunmaz. Marka yeşili accent olarak korunur.
════════════════════════════════════════════════════════════ */
body.page-home {
--canvas: #16130f;
--canvas-2: #1d1813;
--surface: #261f17;
--surface-2: #30271c;
--espresso: #110d09;
--espresso-2: #1b1510;
--line: #332b20;
--line-2: #43382a;
}
/* Sayfa geneli ambient: soğuk mor/mavi neon aurora → yumuşak sıcak ışık (+ ince marka yeşili) */
body.page-home::after {
background:
radial-gradient(60% 42% at 18% 14%, rgba(255,150,80,0.07), transparent 60%),
radial-gradient(52% 36% at 86% 24%, rgba(0,232,143,0.045), transparent 60%),
radial-gradient(58% 46% at 74% 88%, rgba(255,128,66,0.055), transparent 62%) !important;
}
/* Hero ışıltıları: mor/mavi + yoğun neon yeşil → sönük sıcak ambient.
Yeşil artık halede değil, sadece buton/rozet gibi UI öğelerinde. */
body.page-home .hero__glow--1 {
background: radial-gradient(circle,
rgba(255,150,80,0.16) 0%,
rgba(216,110,50,0.09) 40%,
transparent 70%) !important;
}
body.page-home .hero__glow--2 {
background: radial-gradient(circle,
rgba(255,170,95,0.16) 0%,
rgba(220,120,60,0.10) 45%,
transparent 78%) !important;
}
/* Hero merkez haleleri (yeşil radyaller) → sıcak, sakin */
body.page-home .hero::before {
background: radial-gradient(900px 700px at 50% 50%, rgba(255,140,70,0.08), transparent 70%) !important;
}
body.page-home .hero::after {
background: radial-gradient(closest-side, rgba(255,150,80,0.13), transparent 70%) !important;
}
/* Bölümler arası "ışık sisi": yeşil/mor → çok hafif sıcak (ritmi korur, neon gider) */
body.page-home section + section {
background-image: linear-gradient(180deg,
rgba(255,140,70,0.035) 0%,
transparent 8%,
transparent 92%,
rgba(255,140,70,0.028) 100%);
}
/* Başlıktaki dönen vurgu kelimesi: yoğun neon yeşil parıltı → sakin, sönük.
Marka yeşili korunur ama hero'yu boğan neon hale gider. */
body.page-home .wsw {
filter: drop-shadow(rgba(0,232,143,0.20) 0 3px 14px) drop-shadow(rgba(0,0,0,0.3) 0 2px 4px) !important;
}
/* Masaüstü hero orb (yeşil SVG halesi) → sıcak */
body.page-home .hero__orb svg #orbGrad stop:nth-child(2) { stop-color: #ffb46e !important; }
body.page-home .hero__orb svg #orbGrad stop:nth-child(3) { stop-color: #ff8a3d !important; }
/* ════════════════════════════════════════════════════════════
Yorum kartı: kategori etiketi (tag) sağ-üst köşede absolute idi
ve uzun isim + mavi tik onunla çakışıyordu. Etiketi köşeden alıp
kartın altına akan bir çipe çevirdik; isim artık tam genişlikte,
hiçbir kartta çakışma olmaz. Tüm sayfalarda geçerli.
════════════════════════════════════════════════════════════ */
.rcard__tag {
position: static;
align-self: flex-start;
margin-top: 2px;
}
/* WhatsApp balonu: başlık global "strong → açık renk" kuralı yüzünden beyaz
balonda beyaz kalıp okunmuyordu. Koyu renge sabitle. */
.fab__tip strong {
color: #0a1f14 !important;
-webkit-text-fill-color: #0a1f14 !important;
}
/* ════════════════════════════════════════════════════════════
MASAÜSTÜ HERO DENGE — yalnızca ≥901px (mobil ≤900 HİÇ etkilenmez)
Düzeltilen: (1) soluk/hayalet rozet şeridi, (2) aşırı büyük orb,
(3) sağda yüzen güven kutusu, (4) dengesiz dikey boşluk.
En sonda olduğu için kaynak sırasıyla kazanır.
════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
/* 1) Rozet şeridi: okunur, premium, marka rengi pill */
body.page-home .hero__eyebrow {
background: linear-gradient(180deg, rgba(42,34,24,0.95) 0%, rgba(27,21,15,0.95) 100%) !important;
border: 1px solid rgba(216,176,112,0.32) !important;
color: #efe7d8 !important;
box-shadow: 0 10px 26px -16px rgba(0,0,0,0.7) !important;
}
body.page-home .hero__eyebrow .he-num { color: var(--accent) !important; }
body.page-home .hero__eyebrow .he-cn { color: #efe7d8 !important; }
/* 2) Orb: küçült + yumuşat + köşeye it (başlıkla çakışmasın, hafiflesin) */
.hero__orb {
width: 500px !important;
height: 500px !important;
right: -9% !important;
top: 15% !important;
opacity: 0.5 !important;
}
/* 3) Güven kutusu: sağ sütunda üstten hizalı, yüzme hissi gitsin */
.hero__lower { align-items: start !important; }
.hero__proof { align-self: start !important; margin-top: 6px !important; }
/* 4) Dikey ritim: başlık ile alt blok arası aşırı boşluğu topla */
.hero__top { margin-bottom: clamp(32px, 5.5vh, 60px) !important; }
.hero__lower { margin-top: clamp(28px, 5vh, 52px) !important; }
.hero { padding-bottom: 96px !important; }
}