/* =========================================================
FlowTech ? main.css
Palet: --ft-primary (mavi) --ft-accent (k?rm?z?) --ft-surface (beyaz)
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
:root {
--ft-primary: #0b3d91;
--ft-primary-700: #082c6b;
--ft-primary-50: #eaf0fb;
--ft-accent: #e1261c;
--ft-accent-700: #b31a12;
--ft-surface: #ffffff;
--ft-ink: #0a1124;
--ft-muted: #5a6578;
--ft-border: #e6eaf0;
--ft-bg-soft: #f6f8fc;
--ft-radius: 16px;
--ft-radius-sm: 10px;
--ft-shadow-xs: 0 2px 8px rgba(10, 17, 36, .04);
--ft-shadow-sm: 0 6px 16px rgba(10, 17, 36, .06);
--ft-shadow: 0 12px 30px rgba(10, 17, 36, .08);
--ft-shadow-lg: 0 30px 60px -20px rgba(10, 17, 36, .18);
--ft-shell: 1240px;
--ft-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--ft-display: 'Rajdhani', var(--ft-font);
--ft-ease: cubic-bezier(.2, .8, .2, 1);
}
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; text-rendering: optimizeLegibility; }
body {
background: var(--ft-surface);
color: var(--ft-ink);
font-family: var(--ft-font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
}
/* ----- Eri?ilebilirlik & performans ----- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Below-the-fold b?l?mleri lazy-render et (kasmay? azalt?r) */
.ft-section, .ft-cta, .ft-brandstrip, .ft-trust, .ft-footer {
content-visibility: auto;
contain-intrinsic-size: 1px 600px;
}
/* Sekme arka planda ? s?rekli animasyonlar? durdur */
.ft-hidden-tab .ft-brandstrip__list,
.ft-hidden-tab .ft-hero__ring::before,
.ft-hidden-tab .ft-fab-wa__pulse,
.ft-hidden-tab .ft-hero__pulse { animation-play-state: paused; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ft-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ft-accent); }
h1, h2, h3, h4 { font-family: var(--ft-display); letter-spacing: .3px; color: var(--ft-ink); line-height: 1.15; }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
.ft-shell { width: 100%; max-width: var(--ft-shell); margin: 0 auto; padding: 0 24px; }
.ft-shell-wide { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .ft-shell-wide { padding: 0 16px; } }
.ft-skip { position: absolute; left: -9999px; top: 0; background: var(--ft-ink); color: #fff; padding: 8px 12px; z-index: 999; }
.ft-skip:focus { left: 8px; top: 8px; }
/* ----- BUTONLAR ----- */
.ft-btn {
position: relative; overflow: hidden; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 22px; border-radius: 999px;
font-weight: 600; font-size: 14px; letter-spacing: .2px;
border: 2px solid transparent; cursor: pointer;
background: var(--ft-primary); color: #fff;
transition: transform .2s var(--ft-ease), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
white-space: nowrap;
box-shadow: 0 6px 14px -6px rgba(11,61,145,.4);
}
.ft-btn::before {
content: ""; position: absolute; top: 0; left: -40%;
width: 40%; height: 100%;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
transform: skewX(-20deg); transition: left .6s var(--ft-ease);
pointer-events: none; z-index: 1;
}
.ft-btn:hover { background: var(--ft-primary-700); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(11,61,145,.55); }
.ft-btn:hover::before { left: 140%; }
.ft-btn:active { transform: translateY(0); }
.ft-btn > * { position: relative; z-index: 2; }
.ft-btn--accent { background: var(--ft-accent); box-shadow: 0 6px 14px -6px rgba(225,38,28,.45); }
.ft-btn--accent:hover { background: var(--ft-accent-700); box-shadow: 0 14px 30px -12px rgba(225,38,28,.6); }
.ft-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); box-shadow: none; }
.ft-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.7); box-shadow: none; }
.ft-btn--light { background: #fff; color: var(--ft-primary); box-shadow: 0 6px 14px -6px rgba(10,17,36,.15); }
.ft-btn--light:hover { background: var(--ft-primary-50); color: var(--ft-primary-700); }
.ft-btn--lg { padding: 15px 26px; font-size: 15.5px; }
.ft-icon { flex-shrink: 0; }
/* ============================================================
HEADER
============================================================ */
.ft-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: var(--ft-shadow-sm); }
.ft-topbar { background: var(--ft-primary); color: #fff; font-size: 13px; }
.ft-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 32px; min-height: 36px; }
@media (max-width: 640px) { .ft-topbar__inner { padding: 8px 16px; } }
.ft-topbar__msg { margin: 0; display: inline-flex; align-items: center; gap: 8px; opacity: .95; }
.ft-topbar__links { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 18px; }
.ft-topbar__links li { display: inline-flex; align-items: center; gap: 6px; }
.ft-topbar__links a { color: #fff; font-weight: 500; }
.ft-topbar__links a:hover { color: #fff; opacity: .85; }
.ft-header__main { background: #fff; }
.ft-header__bar { display: flex; align-items: center; gap: 28px; padding: 16px 32px; }
.ft-header__bar .ft-nav { flex: 0 1 auto; }
.ft-header__bar .ft-tools { margin-left: auto; }
@media (max-width: 640px) { .ft-header__bar { padding: 14px 16px; gap: 12px; } }
/* Marka */
.ft-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ft-ink); font-family: var(--ft-display); font-size: 24px; line-height: 1; }
.ft-brand__mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ft-accent); color: #fff; box-shadow: 0 6px 16px rgba(225,38,28,.35); }
.ft-brand__text strong { font-weight: 700; color: var(--ft-primary); }
.ft-brand__text em { font-style: normal; font-weight: 700; color: var(--ft-accent); }
.ft-brand--invert .ft-brand__text strong { color: #fff; }
.ft-brand--invert .ft-brand__text em { color: var(--ft-accent); }
/* Logo g?rseli ? header / footer
WooCommerce shop sayfas? gibi yerlerde img ?zerindeki global stiller override edebiliyor.
Bu y?zden birden ?ok se?ici + !important ile kesin sabitliyoruz. */
.ft-brand__logo,
.ft-brand img,
.ft-header .ft-brand img {
display: block !important;
height: 44px !important;
width: auto !important;
max-width: 200px !important;
max-height: 44px !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: contain !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
user-select: none;
-webkit-user-drag: none;
}
.ft-brand__logo--footer,
.ft-footer .ft-brand img {
height: 56px !important;
max-width: 220px !important;
max-height: 56px !important;
}
@media (max-width: 640px) {
.ft-brand__logo,
.ft-brand img,
.ft-header .ft-brand img {
height: 38px !important;
max-width: 160px !important;
max-height: 38px !important;
}
.ft-brand__logo--footer,
.ft-footer .ft-brand img {
height: 48px !important;
max-width: 180px !important;
max-height: 48px !important;
}
}
/* ft-brand link de sar?c? olarak kutulanmas?n */
.ft-brand,
.ft-header .ft-brand,
.ft-footer .ft-brand {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Ana men? */
.ft-nav { min-width: 0; }
.ft-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
.ft-nav__list > li { position: relative; }
.ft-nav__list > li > a { display: inline-block; padding: 10px 14px; color: var(--ft-ink); font-weight: 600; font-size: 14px; border-radius: 8px; }
.ft-nav__list > li > a:hover, .ft-nav__list .current-menu-item > a { color: var(--ft-accent); background: var(--ft-primary-50); }
.ft-nav__list .sub-menu { position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; padding: 8px; margin: 0; list-style: none; border-radius: var(--ft-radius-sm); box-shadow: var(--ft-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s ease; z-index: 20; }
.ft-nav__list > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ft-nav__list .sub-menu a { display: block; padding: 8px 12px; color: var(--ft-ink); font-size: 14px; border-radius: 6px; }
.ft-nav__list .sub-menu a:hover { background: var(--ft-primary-50); color: var(--ft-primary); }
/* Ara?lar (arama, sepet, hesap) */
.ft-tools { display: inline-flex; align-items: center; gap: 12px; }
.ft-search { display: inline-flex; align-items: center; gap: 6px; background: var(--ft-bg-soft); border: 1px solid var(--ft-border); border-radius: 999px; padding: 6px 18px; min-width: 340px; }
.ft-search input { border: 0; background: transparent; outline: none; flex: 1; padding: 6px 2px; font-size: 14px; color: var(--ft-ink); }
.ft-search .ft-icon { color: var(--ft-muted); }
.ft-tool { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: var(--ft-ink); border: 1px solid transparent; }
.ft-tool:hover { color: var(--ft-accent); background: var(--ft-primary-50); border-color: var(--ft-border); }
.ft-cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ft-accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.ft-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ft-ink); }
.ft-mobile-nav { background: #fff; border-top: 1px solid var(--ft-border); padding: 12px 24px; }
.ft-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ft-mobile-nav__list a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ft-ink); font-weight: 600; }
.ft-mobile-nav__list a:hover { background: var(--ft-primary-50); color: var(--ft-accent); }
@media (max-width: 1024px) {
.ft-nav { display: none; }
.ft-search { min-width: 180px; }
.ft-burger { display: inline-flex; }
}
@media (max-width: 640px) {
.ft-topbar__links li:not(:first-child) { display: none; }
.ft-search { display: none; }
}
/* ============================================================
HERO ? modernize + performant
============================================================ */
.ft-hero {
position: relative; overflow: hidden; color: #fff; isolation: isolate;
min-height: 680px; display: flex; align-items: center;
/* Gradient + radial glow'u tek background'a topla (daha ucuz) */
background:
radial-gradient(900px 500px at 85% 10%, rgba(225, 38, 28, .28), transparent 60%),
radial-gradient(900px 600px at 15% 110%, rgba(43, 108, 255, .34), transparent 55%),
linear-gradient(135deg, #050b24 0%, #0a1a4a 45%, #061b52 100%);
content-visibility: visible; /* above the fold */
}
.ft-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ft-hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
/* Glow'lar ? filter:blur yerine radial-gradient (compositor'a ucuz) */
.ft-hero__glow { display: none; }
.ft-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 96px 24px 110px; position: relative; z-index: 1; }
.ft-hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px; border-radius: 999px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
}
.ft-hero__pulse {
width: 8px; height: 8px; border-radius: 50%; background: #25d366;
box-shadow: 0 0 10px rgba(37,211,102,.6);
}
/* Pulse SVG kullanmadan, tek hafif nefes alma animasyonu */
.ft-hero__pulse { animation: ft-breathe 2s ease-in-out infinite; }
@keyframes ft-breathe {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.3); opacity: 1; }
}
.ft-hero__title {
margin: 20px 0 20px; color: #fff;
font-size: clamp(40px, 5.6vw, 68px);
line-height: 1.03; letter-spacing: -1.5px; font-weight: 700;
}
.ft-hero__grad {
background: linear-gradient(90deg, #ff6a3d 0%, var(--ft-accent) 60%, #ffb02e 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.ft-hero__subtitle { max-width: 54ch; color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.6; }
.ft-hero__ctas { display: inline-flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ft-hero__stats { list-style: none; margin: 44px 0 0; padding: 28px 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 0; border-top: 1px solid rgba(255,255,255,.15); }
.ft-hero__stats li { display: flex; flex-direction: column; padding-right: 36px; position: relative; }
.ft-hero__stats li + li { padding-left: 36px; }
.ft-hero__stats li + li::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.12); }
.ft-hero__stats strong { font-family: var(--ft-display); font-size: 38px; font-weight: 700; color: #fff; line-height: 1; }
.ft-hero__stats strong em { font-style: normal; color: #ff9c5a; font-size: .7em; margin-left: 2px; }
.ft-hero__stats span { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 6px; }
/* Hero visual ? tek statik ring + kart. Hover'da nazik?e d?ner (s?rekli d?nmez) */
.ft-hero__visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.ft-hero__ring {
position: absolute; width: 480px; height: 480px;
border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
pointer-events: none;
}
.ft-hero__ring::before {
content: ""; position: absolute; inset: -1px; border-radius: 50%;
border: 1px dashed rgba(255,255,255,.14);
-webkit-mask: conic-gradient(from 0deg, #000 0deg 100deg, transparent 100deg 360deg);
mask: conic-gradient(from 0deg, #000 0deg 100deg, transparent 100deg 360deg);
animation: ft-spin 28s linear infinite;
transform: translateZ(0);
}
.ft-hero__ring::after { content: ""; position: absolute; inset: 56px; border: 1px solid rgba(225,38,28,.18); border-radius: 50%; }
.ft-hero__ring--outer { display: none; } /* ikinci ring kald?r?ld? ? kasmay? azalt?r */
@keyframes ft-spin { to { transform: rotate(360deg) translateZ(0); } }
.ft-hero__card {
position: relative; width: min(380px, 90%);
background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 100%);
border: 1px solid rgba(255,255,255,.18); border-radius: 20px;
padding: 24px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.55);
transform: translateZ(0); /* GPU layer */
transition: transform .5s var(--ft-ease);
}
.ft-hero__visual:hover .ft-hero__card { transform: translateY(-4px) translateZ(0); }
.ft-hero__card-head { display: flex; align-items: center; gap: 10px; color: #ff9c5a; font-size: 15px; font-weight: 600; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ft-hero__card-head span { color: #fff; font-family: var(--ft-display); font-size: 20px; font-weight: 700; }
.ft-hero__card-head span em { color: var(--ft-accent); font-style: normal; }
.ft-hero__card-body { padding-top: 18px; display: grid; gap: 12px; }
.ft-hero__card-stat { display: flex; justify-content: space-between; align-items: baseline; color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.ft-hero__card-stat strong { color: #fff; font-family: var(--ft-display); font-size: 28px; letter-spacing: -.5px; }
.ft-hero__card-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.ft-hero__card-bar span { display: block; width: var(--pct, 80%); height: 100%; background: linear-gradient(90deg, var(--ft-accent), #ff9c5a); border-radius: 3px; animation: ft-barfill 1.4s var(--ft-ease) .3s both; }
@keyframes ft-barfill { from { width: 0; } }
.ft-hero__card-body p { color: rgba(255,255,255,.78); margin: 0; font-size: 13.5px; line-height: 1.5; }
.ft-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-hero__badges span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 5px 10px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; letter-spacing: .6px; }
/* Floating chips ? sadece statik duru?, s?rekli animasyon yok */
.ft-hero__chip {
position: absolute; background: #fff; color: var(--ft-primary);
padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 13px;
box-shadow: 0 14px 30px -12px rgba(0,0,0,.4);
transform: translateZ(0);
}
.ft-hero__chip--1 { top: 14%; right: 2%; background: var(--ft-accent); color: #fff; }
.ft-hero__chip--2 { bottom: 16%; left: -2%; }
@media (max-width: 1100px) {
.ft-hero__ring { width: 380px; height: 380px; }
}
@media (max-width: 900px) {
.ft-hero { min-height: auto; }
.ft-hero__inner { grid-template-columns: 1fr; padding: 60px 24px 80px; gap: 48px; }
.ft-hero__visual { order: -1; min-height: 320px; }
.ft-hero__ring { width: 300px; height: 300px; }
.ft-hero__stats { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.ft-hero__stats li { padding-right: 16px; }
.ft-hero__stats li + li { padding-left: 16px; }
.ft-hero__stats strong { font-size: 30px; }
.ft-hero__chip { display: none; }
}
/* ============================================================
ARA? SE??C? ? modern / glass card
============================================================ */
.ft-vsection {
position: relative;
z-index: 2;
padding: 40px 0 28px;
}
.ft-vsection--top {
padding: 20px 0 22px !important;
margin: 0 !important;
background:
radial-gradient(1200px 240px at 50% -20%, rgba(11,61,145,.10), transparent 60%),
linear-gradient(180deg, #f4f7fd 0%, #e9eff8 100%);
}
.ft-vsection--top .ft-shell {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.ft-vsection--top .ft-vpicker { margin: 0 !important; }
/* Banner altta ayr? dursun ? arada hafif dinlenme bo?lu?u */
.ft-vsection--top + .ft-banner {
margin-top: 0 !important;
padding-top: 0 !important;
background: #000;
}
/* Banner'?n ALTINDA duran ara? se?ici ? yeni konum */
.ft-vsection--below-banner {
padding: 24px 0 28px !important;
margin: 0 !important;
background:
radial-gradient(1200px 240px at 50% 120%, rgba(11,61,145,.08), transparent 60%),
linear-gradient(0deg, #f4f7fd 0%, #e9eff8 100%);
}
.ft-vsection--below-banner .ft-shell {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.ft-vsection--below-banner .ft-vpicker { margin: 0 !important; }
/* Banner ile ara? se?ici aras?nda bo?luk b?rakma */
.ft-banner + .ft-vsection--below-banner {
margin-top: 0 !important;
padding-top: 24px !important;
}
/* Kart: lacivert ?st ?erit + beyaz zemin */
.ft-vpicker {
position: relative;
padding: 24px 22px 22px;
background: #fff;
border: 1px solid #e3e9f3;
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 12px 30px -14px rgba(11,30,70,.22),
0 4px 12px -6px rgba(11,30,70,.10);
isolation: isolate;
overflow: hidden;
}
/* ?stte lacivert gradyan ?erit (brand accent) */
.ft-vpicker::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #0b3d91 0%, #1e5fd1 50%, #0b3d91 100%);
z-index: 1;
}
/* Sa? ?st soft lacivert glow */
.ft-vpicker::after {
content: "";
position: absolute; top: -60%; right: -10%;
width: 320px; height: 320px;
background: radial-gradient(closest-side, rgba(11,61,145,.10), transparent 70%);
filter: blur(6px);
pointer-events: none;
z-index: 0;
}
.ft-vpicker > * { position: relative; z-index: 2; }
/* Ba?l?k ? lacivert rozet */
.ft-vpicker__head {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
margin-bottom: 18px;
border-radius: 999px;
background: linear-gradient(135deg, #0b3d91 0%, #1e5fd1 100%);
color: #fff;
font-family: var(--ft-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .3px;
box-shadow: 0 6px 16px -8px rgba(11,61,145,.45);
}
.ft-vpicker__head svg { color: #fff; }
.ft-vpicker__head strong { font-weight: 700; color: #fff; }
/* Alan d?zeni */
.ft-vpicker__fields {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: end;
}
.ft-field { display: flex; flex-direction: column; gap: 8px; }
.ft-field span {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.3px; color: var(--ft-muted);
}
.ft-field select,
.ft-field input {
width: 100%;
appearance: none; -webkit-appearance: none;
padding: 16px 48px 16px 18px;
border: 1.5px solid var(--ft-border);
border-radius: 14px;
font-size: 15px; font-weight: 500;
background: #fff; color: var(--ft-ink);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center;
transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.ft-field select:hover,
.ft-field input:hover { border-color: #b8c3d6; }
.ft-field select:focus,
.ft-field input:focus {
outline: none;
border-color: var(--ft-primary);
box-shadow: 0 0 0 4px rgba(11,61,145,.14);
}
/* CTA */
.ft-vpicker__submit {
position: relative;
padding: 16px 26px;
border-radius: 14px;
font-weight: 700;
letter-spacing: .2px;
white-space: nowrap;
box-shadow:
0 10px 22px -10px rgba(230,30,50,.55),
0 4px 10px -4px rgba(230,30,50,.35);
transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.ft-vpicker__submit:hover {
transform: translateY(-1px);
filter: brightness(1.03);
box-shadow:
0 14px 28px -10px rgba(230,30,50,.6),
0 6px 14px -4px rgba(230,30,50,.4);
}
.ft-vpicker__submit:active { transform: translateY(0); }
@media (max-width: 800px) {
.ft-vpicker { padding: 18px; border-radius: 16px; }
.ft-vpicker__fields { grid-template-columns: 1fr; gap: 12px; }
.ft-vpicker__submit { grid-column: 1 / -1; justify-content: center; padding: 15px 20px; }
}
/* ============================================================
SECTION GENEL
============================================================ */
.ft-section { padding: 72px 0; }
.ft-section--muted { background: var(--ft-bg-soft); }
.ft-section__head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.ft-section__head h2 { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.5px; }
.ft-section__head h2::after {
content: ""; display: block; width: 60px; height: 4px;
background: linear-gradient(90deg, var(--ft-primary), var(--ft-accent));
margin: 14px auto 0; border-radius: 2px;
}
.ft-section__head p { color: var(--ft-muted); margin: 0; font-size: 16px; }
.ft-section__kicker {
display: inline-block; font-size: 12px; font-weight: 700;
letter-spacing: 2px; color: var(--ft-accent);
padding: 6px 14px; border-radius: 999px;
background: rgba(225,38,28,.08); margin-bottom: 12px;
}
.ft-section__kicker--light { background: rgba(255,255,255,.1); color: #ff9c5a; }
.ft-section__head--row { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; max-width: 100%; gap: 24px; flex-wrap: wrap; }
.ft-section__head--row h2::after { margin-left: 0; }
.ft-section__head--light h2 { color: #fff; }
.ft-section__head--light p { color: rgba(255,255,255,.75); }
.ft-section__link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--ft-primary); font-weight: 700; font-size: 14px;
padding: 10px 0; position: relative; transition: gap .2s ease;
}
.ft-section__link:hover { gap: 10px; color: var(--ft-accent); }
/* Kategori kartlar? */
.ft-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ft-cat {
display: flex; align-items: center; gap: 16px; padding: 20px;
background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
transition: transform .25s var(--ft-ease), box-shadow .25s var(--ft-ease), border-color .25s ease;
color: var(--ft-ink);
contain: layout style paint;
transform: translateZ(0);
}
.ft-cat:hover { transform: translateY(-4px) translateZ(0); box-shadow: var(--ft-shadow-lg); border-color: transparent; color: var(--ft-primary); }
.ft-cat__img { width: 96px; height: 96px; border-radius: 12px; background: var(--ft-primary-50) center/cover no-repeat; display: grid; place-items: center; color: var(--ft-primary); flex-shrink: 0; }
.ft-cat__img--placeholder { background: linear-gradient(135deg, var(--ft-primary-50), #fff); }
.ft-cat__body { display: flex; flex-direction: column; gap: 4px; }
.ft-cat__body strong { font-family: var(--ft-display); font-size: 20px; font-weight: 700; }
.ft-cat__body em { font-style: normal; font-size: 13px; color: var(--ft-muted); }
@media (max-width: 900px) { .ft-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ft-cat-grid { grid-template-columns: 1fr; } }
/* ?zel filtre CTA kart? */
.ft-cat--cta {
grid-column: span 2;
align-items: flex-start;
background: linear-gradient(135deg, var(--ft-primary) 0%, #052a66 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 18px 40px -18px rgba(11, 61, 145, .55);
}
.ft-cat--cta:hover { transform: translateY(-4px); color: #fff; box-shadow: 0 22px 46px -16px rgba(11, 61, 145, .65); }
.ft-cat__img--cta {
background: rgba(255, 255, 255, .12);
color: #25d366;
}
.ft-cat__body--cta { gap: 10px; }
.ft-cat__body--cta strong { color: #fff; }
.ft-cat__body--cta em { color: rgba(255, 255, 255, .85); line-height: 1.5; font-size: 14px; }
/* WhatsApp butonu */
.ft-btn--wa {
align-self: flex-start;
background: #25d366;
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .2s ease, transform .2s ease;
margin-top: 4px;
text-decoration: none;
}
.ft-btn--wa:hover { background: #1ebe57; color: #fff; transform: translateY(-2px); }
.ft-btn--wa .ft-icon { color: #fff; }
@media (max-width: 900px) {
.ft-cat--cta { grid-column: span 2; }
}
@media (max-width: 540px) {
.ft-cat--cta { grid-column: 1; }
.ft-cat--cta { flex-direction: column; align-items: flex-start; text-align: left; }
}
/* Kategori kart ok iyile?tirme */
.ft-cat { position: relative; overflow: hidden; }
.ft-cat::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(11,61,145,.03), rgba(225,38,28,.04));
opacity: 0; transition: opacity .3s ease;
}
.ft-cat:hover::before { opacity: 1; }
.ft-cat__arrow { margin-left: auto; color: var(--ft-muted); transition: transform .2s ease, color .2s ease; position: relative; z-index: 1; }
.ft-cat:hover .ft-cat__arrow { color: var(--ft-accent); transform: translateX(4px); }
.ft-cat__body { position: relative; z-index: 1; }
/* ============================================================
MARKA ?ER?D? (marquee)
============================================================ */
.ft-brandstrip { padding: 28px 0; border-top: 1px solid var(--ft-border); border-bottom: 1px solid var(--ft-border); background: #fff; position: relative; z-index: 2; }
.ft-brandstrip .ft-shell { display: flex; align-items: center; gap: 36px; }
.ft-brandstrip__label {
flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: 2px;
color: var(--ft-muted); padding-right: 24px; border-right: 1px solid var(--ft-border);
}
.ft-brandstrip__track {
flex: 1 1 0; min-width: 0; width: 100%;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ft-brandstrip__list {
display: flex; gap: 56px; padding: 0; margin: 0; list-style: none;
animation: ft-marquee 45s linear infinite;
width: max-content;
will-change: transform; transform: translateZ(0);
}
.ft-brandstrip:hover .ft-brandstrip__list { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ft-brandstrip__list { animation: none; } }
.ft-brandstrip__list li { flex-shrink: 0; }
.ft-brandstrip__list a {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--ft-ink);
opacity: .55;
transition: opacity .2s ease, color .2s ease, transform .2s ease;
white-space: nowrap;
text-decoration: none;
}
.ft-brandstrip__list a:hover { opacity: 1; color: var(--ft-primary); transform: translateY(-2px); }
.ft-brand-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
color: inherit;
}
.ft-brand-logo svg,
.ft-brand-logo img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
filter: grayscale(100%);
transition: filter .25s ease;
}
.ft-brandstrip__list a:hover .ft-brand-logo img,
.ft-brandstrip__list a:hover .ft-brand-logo svg {
filter: grayscale(0%);
}
.ft-brand-name {
font-family: var(--ft-display);
font-size: 16px;
font-weight: 700;
letter-spacing: .5px;
}
@keyframes ft-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Mobilde: label ?stte, ?erit altta tam geni?lik, animasyon akmaya devam eder */
@media (max-width: 640px) {
.ft-brandstrip { padding: 20px 0; }
.ft-brandstrip .ft-shell { flex-direction: column; gap: 14px; align-items: stretch; padding: 0; }
.ft-brandstrip__label { border-right: none; border-bottom: 1px solid var(--ft-border); padding: 0 0 12px; text-align: center; }
.ft-brandstrip__track { width: 100%; flex: 0 0 auto; }
.ft-brandstrip__list {
gap: 36px;
animation: ft-marquee 32s linear infinite;
}
.ft-brand-logo { width: 40px; height: 40px; }
.ft-brand-name { font-size: 14px; }
}
/* ============================================================
NEDEN FLOWTECH
============================================================ */
.ft-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ft-why__card {
background: #fff; border: 1px solid var(--ft-border); border-radius: 20px;
padding: 32px 26px; position: relative; overflow: hidden;
transition: transform .25s var(--ft-ease), box-shadow .25s var(--ft-ease), border-color .25s ease;
contain: layout style paint;
transform: translateZ(0);
}
.ft-why__card::before {
content: ""; position: absolute; top: -80px; right: -80px;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, var(--ft-primary-50) 0%, transparent 70%);
opacity: 0; transition: opacity .3s ease;
pointer-events: none;
}
.ft-why__card:hover { transform: translateY(-6px) translateZ(0); box-shadow: var(--ft-shadow-lg); border-color: transparent; }
.ft-why__card:hover::before { opacity: 1; }
.ft-why__icon {
width: 56px; height: 56px; border-radius: 14px;
background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-primary-700) 100%);
color: #fff; display: grid; place-items: center;
margin-bottom: 18px; position: relative; z-index: 1;
box-shadow: 0 16px 30px -10px rgba(11,61,145,.45);
}
.ft-why__card:nth-child(2) .ft-why__icon { background: linear-gradient(135deg, var(--ft-accent) 0%, #a8100a 100%); box-shadow: 0 16px 30px -10px rgba(225,38,28,.45); }
.ft-why__card:nth-child(3) .ft-why__icon { background: linear-gradient(135deg, #25d366 0%, #0fa553 100%); box-shadow: 0 16px 30px -10px rgba(37,211,102,.45); }
.ft-why__card:nth-child(4) .ft-why__icon { background: linear-gradient(135deg, #7a3dff 0%, #4a23b0 100%); box-shadow: 0 16px 30px -10px rgba(122,61,255,.45); }
.ft-why__card h3 { margin: 0 0 10px; font-size: 20px; font-family: var(--ft-display); position: relative; z-index: 1; }
.ft-why__card p { color: var(--ft-muted); margin: 0; font-size: 14.5px; line-height: 1.6; position: relative; z-index: 1; }
@media (max-width: 900px) { .ft-why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ft-why__grid { grid-template-columns: 1fr; } }
/* ============================================================
NASIL ?ALI?IYOR
============================================================ */
.ft-section--dark {
color: #fff; position: relative; overflow: hidden;
background:
radial-gradient(600px 400px at 10% 30%, rgba(225,38,28,.22), transparent 60%),
radial-gradient(500px 400px at 90% 70%, rgba(43,108,255,.22), transparent 60%),
#06143d;
}
.ft-howit__bg { display: none; }
.ft-howit .ft-shell { position: relative; z-index: 1; }
.ft-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.ft-step {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px; padding: 32px 28px;
position: relative; overflow: hidden;
transition: transform .25s var(--ft-ease), background .25s ease;
contain: layout style paint;
transform: translateZ(0);
}
.ft-step:hover { transform: translateY(-6px) translateZ(0); background: rgba(255,255,255,.09); }
.ft-step__num {
display: block; font-family: var(--ft-display); font-size: 48px;
font-weight: 800; line-height: 1;
background: linear-gradient(135deg, var(--ft-accent), #ff9c5a);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
margin-bottom: 18px;
}
.ft-step h3 { margin: 0 0 10px; color: #fff; font-size: 22px; }
.ft-step p { margin: 0; color: rgba(255,255,255,.75); line-height: 1.6; }
.ft-step:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -12px;
width: 24px; height: 2px; background: rgba(255,255,255,.2);
}
@media (max-width: 900px) {
.ft-steps { grid-template-columns: 1fr; }
.ft-step:not(:last-child)::after { display: none; }
}
/* Blog kartlar? */
.ft-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ft-post-card { background: #fff; border-radius: var(--ft-radius); overflow: hidden; border: 1px solid var(--ft-border); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.ft-post-card:hover { transform: translateY(-3px); box-shadow: var(--ft-shadow); }
.ft-post-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ft-primary-50); }
.ft-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ft-post-card:hover .ft-post-card__thumb img { transform: scale(1.05); }
.ft-post-card__placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; color: var(--ft-primary); }
.ft-post-card__body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.ft-post-card__meta { display: inline-flex; gap: 8px; font-size: 12px; color: var(--ft-muted); margin-bottom: 8px; flex-wrap: wrap; }
.ft-post-card__meta a { color: var(--ft-accent); }
.ft-post-card h2, .ft-post-card h3 { margin: 0 0 8px; font-size: 20px; }
.ft-post-card h2 a, .ft-post-card h3 a { color: var(--ft-ink); }
.ft-post-card h2 a:hover, .ft-post-card h3 a:hover { color: var(--ft-primary); }
.ft-post-card__body p { color: var(--ft-muted); margin: 0 0 14px; }
.ft-post-card__link { margin-top: auto; color: var(--ft-accent); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ft-post-card__link:hover { color: var(--ft-accent-700); gap: 10px; transition: gap .2s ease; }
@media (max-width: 900px) { .ft-posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ft-posts { grid-template-columns: 1fr; } }
/* CTA b?y?k banner ? modern, blur'suz */
.ft-cta {
position: relative;
background:
radial-gradient(600px 400px at 85% 10%, rgba(225, 38, 28, .32), transparent 60%),
radial-gradient(600px 400px at 15% 110%, rgba(43, 108, 255, .28), transparent 55%),
linear-gradient(135deg, #06143d 0%, var(--ft-primary-700) 50%, var(--ft-primary) 100%);
color: #fff; padding: 96px 0; overflow: hidden; isolation: isolate;
}
.ft-cta__bg, .ft-cta__stripe { display: none; }
.ft-cta__inner { display: grid; grid-template-columns: 1fr; gap: 18px; justify-items: start; position: relative; z-index: 1; }
.ft-cta__kicker {
font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700;
background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
}
.ft-cta h2 { color: #fff; max-width: 20ch; font-size: clamp(30px, 4vw, 52px); letter-spacing: -1px; }
.ft-cta p { color: rgba(255,255,255,.85); max-width: 60ch; font-size: 18px; line-height: 1.6; }
.ft-cta__ctas { display: inline-flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
/* Sabit WhatsApp butonu (FAB) */
.ft-fab-wa {
position: fixed; bottom: 24px; right: 24px; z-index: 90;
width: 60px; height: 60px; border-radius: 50%;
background: #25d366; color: #fff;
display: grid; place-items: center;
box-shadow: 0 20px 40px -8px rgba(37,211,102,.55), 0 8px 20px -6px rgba(0,0,0,.3);
transition: transform .2s ease, box-shadow .2s ease;
}
.ft-fab-wa { transform: translateZ(0); }
.ft-fab-wa:hover { transform: scale(1.08) rotate(-4deg) translateZ(0); color: #fff; }
.ft-fab-wa__pulse {
position: absolute; inset: 0; border-radius: 50%;
border: 2px solid #25d366; animation: ft-fab-pulse 2.4s ease-out infinite;
pointer-events: none; will-change: transform, opacity;
}
@keyframes ft-fab-pulse {
0% { transform: scale(1) translateZ(0); opacity: .75; }
100% { transform: scale(1.55) translateZ(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ft-fab-wa__pulse { animation: none; } }
@media (max-width: 640px) {
.ft-fab-wa { width: 54px; height: 54px; bottom: 16px; right: 16px; }
}
/* Trust band? */
.ft-trust { border-top: 1px solid var(--ft-border); border-bottom: 1px solid var(--ft-border); background: #fff; padding: 28px 0; }
.ft-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ft-trust__item { display: flex; align-items: center; gap: 14px; color: var(--ft-ink); }
.ft-trust__item svg { color: var(--ft-accent); }
.ft-trust__item strong { font-family: var(--ft-display); font-size: 18px; display: block; }
.ft-trust__item p { margin: 0; color: var(--ft-muted); font-size: 13px; }
@media (max-width: 900px) { .ft-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ft-trust__grid { grid-template-columns: 1fr; } }
/* ============================================================
FOOTER
============================================================ */
.ft-footer { background: #0a1124; color: #c9d1e1; margin-top: 0; }
.ft-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding: 64px 24px 40px; }
.ft-footer__brand .ft-brand { color: #fff; }
.ft-footer__tagline { color: rgba(255,255,255,.7); margin-top: 12px; }
.ft-social { display: inline-flex; gap: 8px; margin-top: 16px; }
.ft-social a { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.1); }
.ft-social a:hover { background: var(--ft-accent); border-color: var(--ft-accent); }
.ft-footer__col h4, .ft-footer__col .widget-title { color: #fff; font-family: var(--ft-display); font-size: 18px; margin: 0 0 14px; }
.ft-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ft-footer__col ul a { color: rgba(255,255,255,.75); font-size: 14px; }
.ft-footer__col ul a:hover { color: var(--ft-accent); }
.ft-newsletter { display: flex; gap: 8px; margin-top: 8px; }
.ft-newsletter input { flex: 1; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; border-radius: 10px; }
.ft-newsletter input::placeholder { color: rgba(255,255,255,.55); }
/* ============================================================
FOOTER ? Alt bar (K&N benzeri iki sat?rl? yasal alan)
============================================================ */
.ft-footer__bar {
background: #0b1324;
border-top: 1px solid rgba(255,255,255,.06);
padding: 24px 0 22px;
color: rgba(255,255,255,.72);
font-size: 13px;
}
/* ?st sat?r: k???k logo + yasal linkler + telefon */
.ft-footer__legalrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.ft-footer__smalllogo {
display: inline-flex; align-items: center;
line-height: 0;
}
.ft-footer__smalllogo img {
height: 42px; width: auto; max-width: 160px;
object-fit: contain;
filter: brightness(1.08);
}
.ft-footer__legalnav {
display: inline-flex;
align-items: center;
gap: 26px;
flex-wrap: wrap;
justify-content: flex-end;
}
.ft-footer__legalnav a {
color: rgba(255,255,255,.75);
font-size: 13px;
font-weight: 500;
letter-spacing: .2px;
transition: color .15s ease;
}
.ft-footer__legalnav a:hover { color: #fff; }
.ft-footer__phone {
display: inline-flex !important;
align-items: center;
gap: 8px;
color: #fff !important;
font-weight: 600 !important;
}
.ft-footer__phone svg { color: var(--ft-accent); }
/* ?nce ay?r?c? ?izgi */
.ft-footer__divider {
border: 0;
border-top: 1px solid rgba(255,255,255,.08);
margin: 18px 0 14px;
}
/* Alt sat?r: copyright + linkler + ?deme ikonlar? */
.ft-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(255,255,255,.58);
}
.ft-footer__copy { margin: 0; }
.ft-footer__copy strong { color: rgba(255,255,255,.85); font-weight: 700; }
.ft-footer__menu {
list-style: none; padding: 0; margin: 0;
display: inline-flex; gap: 22px; flex-wrap: wrap;
}
.ft-footer__menu a {
color: rgba(255,255,255,.58);
font-size: 12.5px;
transition: color .15s ease;
}
.ft-footer__menu a:hover { color: #fff; }
/* ?deme ikonlar? ? ger?ek VISA / Mastercard PNG */
.ft-footer__pay {
list-style: none; padding: 0; margin: 0;
display: inline-flex; align-items: center; gap: 10px;
}
.ft-footer__pay li {
display: inline-flex; align-items: center;
background: #fff;
border-radius: 6px;
padding: 4px 10px;
box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}
.ft-footer__pay img {
height: 22px; width: auto;
object-fit: contain;
display: block;
}
@media (max-width: 820px) {
.ft-footer__legalrow { flex-direction: column; align-items: flex-start; gap: 16px; }
.ft-footer__legalnav { gap: 16px 20px; justify-content: flex-start; }
.ft-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
.ft-footer__pay { align-self: flex-start; }
}
@media (max-width: 1100px) { .ft-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ft-footer__grid { grid-template-columns: 1fr; } }
/* ============================================================
BANNER + ??ER?K
============================================================ */
.ft-banner { background: linear-gradient(135deg, var(--ft-primary-700), var(--ft-primary)); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.ft-banner::after { content: ""; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border: 2px solid rgba(255,255,255,.08); border-radius: 50%; }
.ft-banner__title { color: #fff; margin: 0; }
.ft-banner__subtitle { color: rgba(255,255,255,.85); margin: 6px 0 0; }
.ft-content { padding: 56px 24px; }
.ft-grid--2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
@media (max-width: 900px) { .ft-grid--2-1 { grid-template-columns: 1fr; } }
.ft-entry h2, .ft-entry h3, .ft-entry h4 { margin-top: 1.4em; }
.ft-entry img { border-radius: var(--ft-radius-sm); box-shadow: var(--ft-shadow-sm); }
.ft-entry blockquote { border-left: 4px solid var(--ft-accent); padding: 8px 18px; margin: 1.4em 0; color: var(--ft-ink); background: var(--ft-primary-50); border-radius: 0 var(--ft-radius-sm) var(--ft-radius-sm) 0; }
.ft-pagination { margin-top: 32px; display: flex; justify-content: center; }
.ft-pagination .nav-links { display: inline-flex; gap: 6px; }
.ft-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ft-border); color: var(--ft-ink); font-weight: 600; }
.ft-pagination .page-numbers:hover, .ft-pagination .page-numbers.current { background: var(--ft-primary); color: #fff; border-color: var(--ft-primary); }
.widget-title { font-family: var(--ft-display); font-size: 18px; margin: 0 0 12px; }
.widget { margin-bottom: 28px; padding: 20px; background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius-sm); }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.widget a { color: var(--ft-ink); }
.widget a:hover { color: var(--ft-accent); }
/* 404 */
.ft-404 { padding: 120px 0; text-align: center; background: linear-gradient(180deg, var(--ft-bg-soft), #fff); }
.ft-404__code { font-family: var(--ft-display); font-size: clamp(120px, 20vw, 240px); font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--ft-primary), var(--ft-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-404__ctas { display: inline-flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
/* ============================================================
WOOCOMMERCE
============================================================ */
.ft-shop-wrap { padding: 40px 24px 80px; }
.ft-shop-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.ft-shop-grid--with-sidebar { grid-template-columns: 1fr 280px; }
.ft-shop-main { min-width: 0; }
.ft-shop-sidebar { position: sticky; top: 120px; align-self: start; }
@media (max-width: 900px) {
.ft-shop-grid--with-sidebar { grid-template-columns: 1fr; }
.ft-shop-sidebar { position: static; }
}
/* WooCommerce Ma?aza ba?l??? */
.woocommerce-products-header { margin-bottom: 24px; }
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
font-family: var(--ft-display);
font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem) !important;
color: var(--ft-ink);
margin: 0 0 6px !important;
}
.woocommerce-breadcrumb { color: var(--ft-muted); font-size: 13px; margin-bottom: 20px; }
.ft-sep { color: var(--ft-border); margin: 0 4px; }
/* Sonu? say?s? + s?ralama */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
margin: 0 0 16px !important;
color: var(--ft-muted);
font-size: 14px;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
margin: 0 0 20px !important;
float: right;
}
.woocommerce .woocommerce-ordering select {
padding: 10px 36px 10px 14px;
border: 1px solid var(--ft-border);
border-radius: 999px;
background-color: #fff;
font-size: 14px;
color: var(--ft-ink);
cursor: pointer;
}
.woocommerce .woocommerce-ordering select:focus { outline: none; border-color: var(--ft-primary); box-shadow: 0 0 0 3px rgba(11,61,145,.15); }
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
clear: both;
}
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
background: #fff; border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
padding: 16px !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative;
display: flex; flex-direction: column;
text-align: left;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--ft-shadow); border-color: transparent; }
.woocommerce ul.products li.product a { display: block; color: var(--ft-ink); }
.woocommerce ul.products li.product a img {
width: 100% !important; height: auto;
aspect-ratio: 1 / 1; object-fit: cover;
border-radius: var(--ft-radius-sm); margin: 0 0 16px !important; background: var(--ft-bg-soft);
display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--ft-display) !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--ft-ink) !important;
padding: 0 !important;
margin: 0 0 10px !important;
line-height: 1.25 !important;
min-height: 2.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.woocommerce ul.products li.product .price {
color: var(--ft-primary) !important;
font-size: 18px !important;
font-weight: 700 !important;
margin: 0 0 14px !important;
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.woocommerce ul.products li.product .price del { color: var(--ft-muted) !important; opacity: .7; font-weight: 500; font-size: 14px; text-decoration: line-through; }
.woocommerce ul.products li.product .price ins { background: transparent; color: var(--ft-accent) !important; text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: 0 0 8px !important; font-size: 12px !important; }
.woocommerce ul.products li.product .button {
margin-top: auto !important;
width: 100%;
justify-content: center;
text-align: center;
}
/* Rozetler ? tek kaynak bizim .ft-badges'imiz */
.ft-badges {
position: absolute; top: 24px; left: 24px;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
z-index: 2; pointer-events: none;
}
.ft-badge {
display: inline-block;
padding: 3px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: #fff;
border-radius: 999px;
background: var(--ft-muted);
line-height: 1.6;
}
.ft-badge--sale { background: var(--ft-accent); }
.ft-badge--new { background: var(--ft-primary); }
/* WooCommerce'un kendi Sale! rozetini gizle (filter ile de kald?rd?k ama CSS emniyet kemeri) */
.woocommerce span.onsale,
.woocommerce-page span.onsale { display: none !important; }
.woocommerce .star-rating { color: var(--ft-accent); }
/* Woo buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button {
background: var(--ft-primary) !important; color: #fff !important;
border-radius: 999px !important; font-weight: 600 !important;
padding: 10px 18px !important; border: 2px solid transparent !important;
transition: all .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button:hover { background: var(--ft-primary-700) !important; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button, .ft-btn--accent.button { background: var(--ft-accent) !important; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button:hover { background: var(--ft-accent-700) !important; }
/* Woo single product */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.single-product div.product .images, .single-product div.product .summary { width: auto !important; margin: 0 !important; float: none !important; }
.single-product div.product .product_title { font-size: 2rem !important; }
.single-product div.product .price { color: var(--ft-primary) !important; font-size: 1.6rem !important; font-weight: 700 !important; }
.single-product div.product .price ins { color: var(--ft-accent) !important; background: transparent; }
.single-product .woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--ft-border) !important; padding: 0 !important; margin: 32px 0 20px !important; }
.single-product .woocommerce-tabs ul.tabs::before { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; }
.single-product .woocommerce-tabs ul.tabs li a { color: var(--ft-muted) !important; padding: 10px 18px !important; font-weight: 600 !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--ft-primary) !important; border-bottom-color: var(--ft-accent) !important; }
.single-product .woocommerce-tabs .panel { padding: 0 !important; }
@media (max-width: 800px) { .single-product div.product { grid-template-columns: 1fr; gap: 24px; } }
/* Woo forms */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single {
border: 1px solid var(--ft-border) !important; border-radius: 10px !important; padding: 12px 14px !important; height: auto !important; background: #fff;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 13px; color: var(--ft-ink); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--ft-primary) !important; background: var(--ft-primary-50) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--ft-primary) !important; }
.woocommerce-error { border-top-color: var(--ft-accent) !important; background: #fde9e8 !important; }
.woocommerce-error::before { color: var(--ft-accent) !important; }
.woocommerce ul.products li.product .ft-products,
.woocommerce-page ul.products { }
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } }
/* Products shortcode wrapper */
.ft-products .woocommerce { background: transparent; }
.ft-products ul.products { margin: 0 !important; }
/* ============================================================
F?LTRE SIDEBAR (ma?aza)
============================================================ */
.ft-shop-grid--with-sidebar { grid-template-columns: 300px 1fr; }
@media (max-width: 1100px) { .ft-shop-grid--with-sidebar { grid-template-columns: 260px 1fr; } }
@media (max-width: 900px) { .ft-shop-grid--with-sidebar { grid-template-columns: 1fr; } }
.ft-filters {
background: #fff;
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
padding: 20px;
position: sticky;
top: 120px;
align-self: start;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
@media (max-width: 900px) { .ft-filters { position: static; max-height: none; } }
.ft-filters__head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 14px; margin-bottom: 14px;
border-bottom: 2px solid var(--ft-border);
}
.ft-filters__head h3 {
margin: 0; font-family: var(--ft-display); font-size: 20px; font-weight: 700;
display: inline-flex; align-items: center; gap: 8px;
color: var(--ft-ink);
}
.ft-filters__head h3 svg { color: var(--ft-accent); }
.ft-filters__clear {
font-size: 13px; font-weight: 600; color: var(--ft-accent);
padding: 6px 10px; border-radius: 8px;
}
.ft-filters__clear:hover { background: #fde9e8; color: var(--ft-accent-700); }
.ft-filters__active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ft-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px;
background: var(--ft-primary-50); color: var(--ft-primary);
font-size: 12px; font-weight: 600; line-height: 1.4;
border: 1px solid transparent;
}
.ft-chip:hover { background: #fde9e8; color: var(--ft-accent); border-color: var(--ft-accent); }
.ft-chip strong { font-weight: 700; }
.ft-chip svg { flex-shrink: 0; }
.ft-filters__group { padding: 14px 0; border-top: 1px solid var(--ft-border); }
.ft-filters__group:first-of-type { border-top: 0; padding-top: 0; }
.ft-filters__group h4 {
margin: 0 0 12px;
font-family: var(--ft-font);
font-size: 13px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--ft-muted);
}
.ft-filters__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ft-filters__list--scroll { max-height: 260px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--ft-primary) transparent; }
.ft-filters__list--scroll::-webkit-scrollbar { width: 6px; }
.ft-filters__list--scroll::-webkit-scrollbar-thumb { background: var(--ft-primary); border-radius: 3px; }
.ft-filters__list--scroll::-webkit-scrollbar-track { background: transparent; }
.ft-filters__group--brands h4 { display: inline-flex; align-items: center; gap: 8px; }
/* Custom checkbox */
.ft-checkbox {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
color: var(--ft-ink);
padding: 6px 8px;
border-radius: 8px;
transition: background .15s ease;
user-select: none;
}
.ft-checkbox:hover { background: var(--ft-bg-soft); }
.ft-checkbox input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.ft-checkbox__box {
width: 20px; height: 20px;
border: 2px solid var(--ft-border);
border-radius: 5px;
background: #fff;
position: relative;
transition: all .15s ease;
flex-shrink: 0;
}
.ft-checkbox:hover .ft-checkbox__box { border-color: var(--ft-primary); }
.ft-checkbox input:checked + .ft-checkbox__box {
background: var(--ft-accent);
border-color: var(--ft-accent);
}
.ft-checkbox input:checked + .ft-checkbox__box::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ft-checkbox input:focus-visible + .ft-checkbox__box { box-shadow: 0 0 0 3px rgba(11,61,145,.25); }
.ft-checkbox__text { line-height: 1.3; }
.ft-checkbox__count {
font-size: 11px; font-weight: 600;
color: var(--ft-muted);
background: var(--ft-bg-soft);
padding: 2px 8px;
border-radius: 999px;
min-width: 22px;
text-align: center;
}
.ft-checkbox input:checked ~ .ft-checkbox__count {
background: var(--ft-primary-50);
color: var(--ft-primary);
}
/* Price range slider */
.ft-price { padding: 4px 0; }
.ft-price__slider {
position: relative;
height: 28px;
margin: 4px 6px 14px;
}
.ft-price__track {
position: absolute; left: 0; right: 0; top: 50%;
height: 4px; transform: translateY(-50%);
background: var(--ft-border); border-radius: 999px;
}
.ft-price__range {
position: absolute; top: 50%; transform: translateY(-50%);
height: 4px; background: var(--ft-accent); border-radius: 999px;
left: 0; right: 0;
}
.ft-price__input {
position: absolute; top: 0; left: 0; width: 100%; height: 28px;
background: transparent;
appearance: none; -webkit-appearance: none;
pointer-events: none;
margin: 0;
}
.ft-price__input::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; border-radius: 50%;
background: #fff; border: 3px solid var(--ft-accent);
cursor: pointer; pointer-events: auto;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
transition: transform .15s ease;
}
.ft-price__input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ft-price__input::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%;
background: #fff; border: 3px solid var(--ft-accent);
cursor: pointer; pointer-events: auto;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.ft-price__input::-webkit-slider-runnable-track { background: transparent; }
.ft-price__input::-moz-range-track { background: transparent; }
.ft-price__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ft-price__fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ft-muted); font-weight: 600; }
.ft-price__fields input {
padding: 10px 12px;
border: 1px solid var(--ft-border);
border-radius: 8px;
font-size: 14px;
color: var(--ft-ink);
background: #fff;
width: 100%;
}
.ft-price__fields input:focus {
outline: none;
border-color: var(--ft-primary);
box-shadow: 0 0 0 3px rgba(11,61,145,.15);
}
.ft-filters__apply {
width: 100%;
justify-content: center;
margin-top: 14px;
padding: 14px 20px !important;
}
/* ============================================================
CHECKOUT ? gizli ?lke alan? (yaln?z TR)
============================================================ */
.woocommerce-billing-fields .ft-hidden-country,
.woocommerce-shipping-fields .ft-hidden-country,
.woocommerce-address-fields .ft-hidden-country,
#billing_country_field.ft-hidden-country,
#shipping_country_field.ft-hidden-country {
display: none !important;
}
.woocommerce form .form-row .select2-container { width: 100% !important; }
/* ============================================================
SEPET ? kupon formu, tablo ve toplam kart? (tek kolon, birle?ik)
============================================================ */
.woocommerce-cart .woocommerce {
display: flex;
flex-direction: column;
gap: 0;
max-width: 1040px;
margin: 0 auto;
}
.woocommerce-cart .woocommerce > * { width: 100%; min-width: 0; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { margin-bottom: 16px; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-cart .woocommerce > .cart-collaterals {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
/* Sepet tablosu */
.woocommerce table.shop_table {
background: #fff;
border: 1px solid var(--ft-border) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: var(--ft-radius) !important;
overflow: hidden;
box-shadow: 0 1px 2px rgba(11,22,40,.04);
width: 100% !important;
}
/* Sepet formu toplam kart?yla birle?ik g?r?ns?n: alt? d?z k??e */
.woocommerce-cart form.woocommerce-cart-form table.shop_table {
border-radius: var(--ft-radius) var(--ft-radius) 0 0 !important;
border-bottom: 0 !important;
}
.woocommerce-cart form.woocommerce-cart-form { margin: 0 !important; }
.woocommerce table.shop_table th {
background: var(--ft-primary-50) !important;
color: var(--ft-primary-700) !important;
font-size: 12px !important;
letter-spacing: .04em;
text-transform: uppercase;
padding: 14px 16px !important;
border: 0 !important;
}
.woocommerce table.shop_table td {
padding: 16px !important;
border-top: 1px solid var(--ft-border) !important;
vertical-align: middle;
}
.woocommerce table.shop_table img {
width: 64px !important;
height: 64px !important;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--ft-border);
}
.woocommerce .product-remove a.remove {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: #fde9e8 !important;
color: var(--ft-accent) !important;
border-radius: 50%;
font-size: 18px !important;
transition: all .2s ease;
}
.woocommerce .product-remove a.remove:hover {
background: var(--ft-accent) !important;
color: #fff !important;
}
.woocommerce .quantity input.qty {
width: 72px !important;
border: 1px solid var(--ft-border) !important;
border-radius: 10px !important;
padding: 10px !important;
text-align: center;
}
/* Kupon + sepeti g?ncelle sat?r? */
.woocommerce .cart .actions {
padding: 20px !important;
background: var(--ft-primary-50) !important;
}
.woocommerce .cart .actions .coupon {
display: inline-flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
background: #fff;
border: 1px solid var(--ft-border);
border-radius: 999px;
padding: 6px 6px 6px 18px;
box-shadow: 0 1px 2px rgba(11,22,40,.05);
}
.woocommerce .cart .actions .coupon label { display: none !important; }
.woocommerce .cart .actions .coupon input.input-text,
.woocommerce .cart .actions .coupon #coupon_code {
min-width: 200px;
border: 0 !important;
padding: 10px 8px !important;
background: transparent !important;
font-size: 14px;
box-shadow: none !important;
outline: none !important;
}
.woocommerce .cart .actions .coupon button.button {
border-radius: 999px !important;
padding: 10px 22px !important;
background: var(--ft-primary) !important;
white-space: nowrap;
}
.woocommerce .cart .actions button[name="update_cart"] {
background: #fff !important;
color: var(--ft-primary) !important;
border: 2px solid var(--ft-border) !important;
margin-left: 10px;
}
.woocommerce .cart .actions button[name="update_cart"]:hover {
border-color: var(--ft-primary) !important;
background: var(--ft-primary-50) !important;
}
@media (max-width: 640px) {
.woocommerce .cart .actions .coupon { width: 100%; border-radius: 14px; padding: 10px; flex-direction: column; align-items: stretch; }
.woocommerce .cart .actions .coupon input.input-text { min-width: 0; width: 100%; padding: 12px 14px !important; border: 1px solid var(--ft-border) !important; border-radius: 10px !important; }
.woocommerce .cart .actions button[name="update_cart"] { width: 100%; margin: 10px 0 0 !important; }
}
/* Sepet toplam kart? */
.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals {
width: 100% !important;
float: none !important;
}
/* cart-collaterals ? WooCommerce'un float:right / 48% geni?lik stilini ezer */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals,
.woocommerce-cart .cart-collaterals {
width: 100% !important;
float: none !important;
display: block;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
width: 100% !important;
float: none !important;
}
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
display: none !important;
}
/* Toplam kart? ? sepet tablosunun alt?na yap???k, geni? iki kolon */
.woocommerce .cart_totals {
background: #fff;
border: 1px solid var(--ft-border);
border-radius: 0 0 var(--ft-radius) var(--ft-radius);
padding: 28px 32px;
box-shadow: 0 4px 14px rgba(11,22,40,.06);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
column-gap: 40px;
row-gap: 0;
align-items: center;
}
@media (max-width: 720px) {
.woocommerce .cart_totals { grid-template-columns: 1fr; column-gap: 0; row-gap: 20px; padding: 22px; }
}
.woocommerce .cart_totals h2 {
grid-column: 1 / -1;
margin: 0 0 8px !important;
font-size: 15px !important;
color: var(--ft-primary) !important;
padding-bottom: 10px;
border-bottom: 2px solid var(--ft-border);
letter-spacing: .02em;
text-transform: uppercase;
}
/* Her sat?r flex: etiket sola, fiyat sa?a; d??ar? ta?maz */
.woocommerce .cart_totals table {
border: 0 !important;
box-shadow: none;
width: 100% !important;
margin: 0 !important;
display: block;
}
.woocommerce .cart_totals table tbody { display: block; }
.woocommerce .cart_totals table tr {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px dashed var(--ft-border);
}
.woocommerce .cart_totals table tr:last-child { border-bottom: 0; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
text-transform: none !important;
font-size: 13px !important;
letter-spacing: 0 !important;
color: var(--ft-ink) !important;
vertical-align: baseline;
width: auto !important;
display: block;
}
.woocommerce .cart_totals table th {
font-weight: 600 !important;
color: var(--ft-muted) !important;
white-space: nowrap;
flex: 0 0 auto;
}
.woocommerce .cart_totals table td {
text-align: right !important;
font-weight: 700 !important;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
}
.woocommerce .cart_totals .order-total {
border-top: 2px solid var(--ft-border);
border-bottom: 0 !important;
margin-top: 6px;
padding-top: 12px;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ft-primary) !important;
}
/* "?demeye Ge?" butonu ? sa? kolonda b?y?k CTA */
.woocommerce .wc-proceed-to-checkout {
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 13px 20px !important;
font-size: 14px !important;
font-weight: 700 !important;
background: var(--ft-accent) !important;
color: #fff !important;
border-radius: 12px !important;
white-space: nowrap;
letter-spacing: .02em;
box-shadow: 0 10px 22px rgba(197,31,42,.24);
transition: all .2s ease;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
background: var(--ft-accent-700) !important;
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(197,31,42,.32);
}
/* ============================================================
CHECKOUT ? modern grid + ?deme kart?
============================================================ */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 32px;
align-items: flex-start;
}
@media (max-width: 900px) {
.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
}
.woocommerce-checkout #customer_details { margin: 0 !important; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
width: 100% !important;
float: none !important;
margin: 0 0 20px !important;
}
.woocommerce-checkout h3 {
font-size: 18px !important;
color: var(--ft-primary) !important;
padding-bottom: 12px;
border-bottom: 2px solid var(--ft-border);
margin: 0 0 18px !important;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
background: #fff;
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
padding: 24px;
box-shadow: 0 1px 3px rgba(11,22,40,.04);
}
.woocommerce-checkout #order_review_heading {
margin: 0 !important;
border-radius: var(--ft-radius) var(--ft-radius) 0 0 !important;
padding-bottom: 16px !important;
border-bottom: 0 !important;
}
.woocommerce-checkout #order_review {
border-radius: 0 0 var(--ft-radius) var(--ft-radius) !important;
margin-top: -1px;
padding-top: 0 !important;
position: sticky;
top: 120px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin: 0 0 16px !important; }
.woocommerce-checkout #payment {
background: var(--ft-primary-50) !important;
border-radius: 14px !important;
padding: 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods { padding: 0 !important; border: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li {
background: #fff !important;
border: 1px solid var(--ft-border);
border-radius: 12px;
padding: 14px 16px !important;
margin: 0 0 10px !important;
list-style: none !important;
}
.woocommerce-checkout #payment div.payment_box {
background: transparent !important;
border: 0 !important;
padding: 12px 4px 4px !important;
font-size: 13px;
color: var(--ft-muted);
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment #place_order {
width: 100%;
padding: 16px !important;
font-size: 15px !important;
background: var(--ft-accent) !important;
border-radius: 999px !important;
}
/* ============================================================
HESABIM ? yan men?, kullan?c? kart?, dashboard, sipari? tablosu
============================================================ */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: flex-start;
}
@media (max-width: 900px) {
.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}
/* Kullan?c? kart? (yan men?n?n ?st?) */
.ft-account-card {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, var(--ft-primary), #1458b5);
color: #fff;
padding: 20px;
border-radius: var(--ft-radius);
margin-bottom: 16px;
box-shadow: 0 10px 30px rgba(11,61,145,.22);
}
.ft-account-card .ft-account-card__avatar,
.ft-account-card img.avatar {
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
border: 3px solid rgba(255,255,255,.3);
flex-shrink: 0;
}
.ft-account-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-account-card__hello { font-size: 12px; opacity: .85; letter-spacing: .03em; text-transform: uppercase; }
.ft-account-card__name { font-size: 16px; font-weight: 700; color: #fff; }
.ft-account-card__email { font-size: 12px; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yan men? */
.woocommerce-MyAccount-navigation {
width: 100% !important;
float: none !important;
background: #fff;
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
padding: 10px;
box-shadow: 0 1px 2px rgba(11,22,40,.04);
position: sticky;
top: 120px;
}
.woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.woocommerce-MyAccount-navigation ul li a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
color: var(--ft-ink);
font-weight: 500;
border-radius: 12px;
text-decoration: none;
transition: all .18s ease;
position: relative;
}
.woocommerce-MyAccount-navigation ul li a::before {
content: "";
width: 20px;
height: 20px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: .75;
transition: opacity .18s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
background: var(--ft-primary-50);
color: var(--ft-primary);
}
.woocommerce-MyAccount-navigation ul li a:hover::before { opacity: 1; }
.woocommerce-MyAccount-navigation ul li.is-active > a {
background: var(--ft-primary);
color: #fff;
box-shadow: 0 6px 18px rgba(11,61,145,.25);
}
.woocommerce-MyAccount-navigation ul li.is-active > a::before { opacity: 1; }
/* Her endpoint i?in SVG ikon (mask ile tek renk) */
.ft-account-nav__item--dashboard a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--orders a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--downloads a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--edit-address a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--payment-methods a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--edit-account a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--customer-logout a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.ft-account-nav__item--customer-logout a { color: var(--ft-accent); }
.ft-account-nav__item--customer-logout a:hover { background: #fde9e8; color: var(--ft-accent-700); }
.ft-account-nav__item--customer-logout.is-active a { background: var(--ft-accent); box-shadow: 0 6px 18px rgba(197,31,42,.25); }
/* ??erik alan? */
.woocommerce-MyAccount-content {
width: 100% !important;
float: none !important;
background: #fff;
border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
padding: 28px;
box-shadow: 0 1px 3px rgba(11,22,40,.05);
}
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
margin: 0 0 18px !important;
color: var(--ft-primary) !important;
font-size: 20px !important;
padding-bottom: 14px;
border-bottom: 2px solid var(--ft-border);
}
/* Dashboard ? kar??lama + istatistik kartlar? */
.ft-dashboard__greeting h2 {
margin: 0 0 6px !important;
font-size: 24px !important;
color: var(--ft-ink) !important;
border: 0 !important;
padding: 0 !important;
}
.ft-dashboard__greeting h2 span { color: var(--ft-primary); }
.ft-dashboard__greeting p {
margin: 0 0 24px !important;
color: var(--ft-muted);
}
.ft-dashboard__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 28px;
}
@media (max-width: 600px) { .ft-dashboard__stats { grid-template-columns: 1fr; } }
.ft-stat-card {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, #fff, #f8fafc);
border: 1px solid var(--ft-border);
border-radius: 14px;
padding: 16px 18px;
transition: all .2s ease;
}
.ft-stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,22,40,.08); }
.ft-stat-card--wide { grid-column: 1 / -1; }
.ft-stat-card__icon {
width: 48px; height: 48px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ft-primary-50);
color: var(--ft-primary);
flex-shrink: 0;
}
.ft-stat-card__icon svg { width: 22px; height: 22px; }
.ft-stat-card__icon--spent { background: #fde9e8; color: var(--ft-accent); }
.ft-stat-card__icon--last { background: #ecfdf5; color: #059669; }
.ft-stat-card__label {
display: block;
font-size: 12px;
color: var(--ft-muted);
letter-spacing: .03em;
text-transform: uppercase;
}
.ft-stat-card__value {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--ft-ink);
line-height: 1.2;
margin-top: 2px;
}
.ft-stat-card__value .woocommerce-Price-amount { font-size: 20px; color: var(--ft-ink); }
.ft-stat-card__meta { display: block; font-size: 12px; color: var(--ft-muted); margin-top: 4px; }
.ft-stat-card__link {
margin-left: auto;
background: var(--ft-primary);
color: #fff !important;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background .2s ease;
white-space: nowrap;
}
.ft-stat-card__link:hover { background: var(--ft-primary-700); }
/* H?zl? i?lemler ?zgaras? */
.ft-dashboard__quick h3 {
margin: 0 0 14px !important;
font-size: 16px !important;
color: var(--ft-ink) !important;
padding: 0 !important;
border: 0 !important;
}
.ft-quick-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 600px) { .ft-quick-grid { grid-template-columns: 1fr; } }
.ft-quick-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid var(--ft-border);
border-radius: 14px;
background: #fff;
color: var(--ft-ink);
text-decoration: none;
transition: all .18s ease;
}
.ft-quick-card:hover {
border-color: var(--ft-primary);
background: var(--ft-primary-50);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(11,61,145,.12);
}
.ft-quick-card__icon {
width: 42px; height: 42px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ft-primary-50);
color: var(--ft-primary);
flex-shrink: 0;
}
.ft-quick-card__icon svg { width: 20px; height: 20px; }
.ft-quick-card strong { display: block; font-size: 14px; color: var(--ft-ink); }
.ft-quick-card span { display: block; font-size: 12px; color: var(--ft-muted); margin-top: 2px; }
.ft-quick-card--danger .ft-quick-card__icon { background: #fde9e8; color: var(--ft-accent); }
.ft-quick-card--danger:hover { border-color: var(--ft-accent); background: #fde9e8; }
/* Sipari?ler tablosu */
.woocommerce-MyAccount-content table.shop_table_responsive,
.woocommerce-MyAccount-content table.woocommerce-orders-table {
border: 1px solid var(--ft-border) !important;
border-radius: 12px !important;
overflow: hidden;
box-shadow: none;
}
.woocommerce-MyAccount-content table.shop_table_responsive th { background: var(--ft-primary-50) !important; color: var(--ft-primary-700) !important; font-size: 12px !important; padding: 14px !important; }
.woocommerce-MyAccount-content table.shop_table_responsive td { padding: 14px !important; font-size: 14px; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button {
margin: 2px 4px 2px 0;
padding: 8px 14px !important;
font-size: 13px !important;
}
/* Adres kartlar? */
.woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 0 !important;
}
@media (max-width: 700px) { .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; } }
.woocommerce-MyAccount-content .woocommerce-Address {
width: 100% !important;
float: none !important;
padding: 0 !important;
background: #fff;
border: 1px solid var(--ft-border);
border-radius: 14px;
overflow: hidden;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
display: flex; align-items: center; justify-content: space-between;
background: var(--ft-primary-50);
padding: 12px 16px;
margin: 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
margin: 0 !important;
font-size: 15px !important;
color: var(--ft-primary) !important;
border: 0 !important;
padding: 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title a {
font-size: 13px;
color: var(--ft-primary);
font-weight: 600;
text-decoration: none;
}
.woocommerce-MyAccount-content .woocommerce-Address address {
padding: 16px;
font-size: 14px;
line-height: 1.7;
color: var(--ft-ink);
margin: 0 !important;
}
/* Hesap bilgileri formu */
.woocommerce-EditAccountForm fieldset {
margin: 20px 0 0 !important;
padding: 18px !important;
border: 1px solid var(--ft-border) !important;
border-radius: 12px !important;
background: #fafbfc;
}
.woocommerce-EditAccountForm fieldset legend {
padding: 0 10px;
font-weight: 700;
color: var(--ft-primary);
font-size: 14px;
}
.woocommerce-MyAccount-content p.form-row button.button { margin-top: 10px; }
/* ============================================================
BANNER ? Ana sayfa slider (haz?r afi? g?rselleri)
Resim orijinal oran?nda, sol/sa?da siyah bar, crop yok.
============================================================ */
.ft-banner {
position: relative; width: 100%;
background: #000;
}
/* Frame ? masa?st?nde resmin do?al eninde (1024px) cap'lenir ? sol/sa?da siyah bar,
pikselle?me yok. Mobilde cap kald?r?l?r, banner tam geni?likte. */
.ft-banner__frame {
position: relative;
width: 100%;
max-width: 1024px;
margin: 0 auto;
aspect-ratio: 1024 / 344;
}
@media (max-width: 640px) {
.ft-banner__frame { max-width: 100%; }
}
/* Tek slide varsa navigasyon ve dot'lar? gizle */
.ft-banner:has([data-ft-banner-slide]:only-of-type) .ft-banner__nav,
.ft-banner:has([data-ft-banner-slide]:only-of-type) .ft-banner__dots {
display: none !important;
}
.ft-banner__track {
position: absolute; inset: 0;
overflow: hidden;
}
.ft-banner__slide {
position: absolute; inset: 0;
display: block;
opacity: 0; visibility: hidden;
transform: scale(1.02);
transition: opacity .7s ease, transform 1.2s ease, visibility 0s linear .7s;
}
.ft-banner__slide.is-active {
opacity: 1; visibility: visible; transform: scale(1);
transition: opacity .7s ease, transform 9s ease, visibility 0s linear 0s;
z-index: 1;
}
.ft-banner__slide img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block; user-select: none; -webkit-user-drag: none;
image-rendering: auto;
}
/* Mobilde resmin tamam? g?r?n?r kals?n ? crop yok, do?al oran korunur */
@media (max-width: 640px) {
.ft-banner__slide img {
object-fit: contain;
object-position: center;
}
}
/* Navigation arrows (frame i?inde, resmin kenarlar?na hizal?) */
.ft-banner__nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
width: 44px; height: 44px; border-radius: 50%;
display: inline-grid; place-items: center;
border: 1px solid rgba(255,255,255,.2);
background: rgba(10,15,30,.45); color: #fff; cursor: pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
opacity: 0; transition: opacity .3s ease, background .2s ease, transform .2s ease;
}
.ft-banner__frame:hover .ft-banner__nav,
.ft-banner__frame:focus-within .ft-banner__nav { opacity: 1; }
.ft-banner__nav:hover { background: rgba(41,98,255,.75); border-color: rgba(255,255,255,.4); }
.ft-banner__nav:active { transform: translateY(-50%) scale(.95); }
.ft-banner__nav--prev { left: 14px; }
.ft-banner__nav--next { right: 14px; }
/* Dots */
.ft-banner__dots {
position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 10;
display: inline-flex; gap: 8px;
padding: 7px 12px; border-radius: 999px;
background: rgba(10,15,30,.55);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ft-banner__dot {
width: 28px; height: 10px; padding: 0; border: 0; cursor: pointer;
background: transparent; position: relative;
}
.ft-banner__dot span {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
display: block; width: 100%; height: 4px; border-radius: 999px;
background: rgba(255,255,255,.35);
transition: background .25s ease;
}
.ft-banner__dot:hover span { background: rgba(255,255,255,.6); }
.ft-banner__dot.is-active span {
background: linear-gradient(90deg, #2962ff, #e1261c);
box-shadow: 0 2px 10px rgba(41,98,255,.5);
}
@media (max-width: 900px) {
.ft-banner__nav { opacity: 1; background: rgba(10,15,30,.55); }
}
/* ============================================================
FEATURE ? Zigzag filtre tan?t?m galerisi (beyaz, detayl?)
============================================================ */
.ft-feature { padding: 90px 0; background: #fff; }
.ft-feature .ft-section__head { max-width: 780px; margin: 0 auto 64px; text-align: center; }
.ft-feature__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 56px;
align-items: center;
padding: 28px 0;
}
.ft-feature__row + .ft-feature__row {
margin-top: 24px;
border-top: 1px dashed var(--ft-border);
padding-top: 52px;
}
.ft-feature__row--image-right { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ft-feature__row--image-right .ft-feature__figure { order: 2; }
.ft-feature__row--image-right .ft-feature__copy { order: 1; }
/* Figure ? s?n?rl? boyut ? bulan?kla?maz */
.ft-feature__figure {
position: relative;
display: grid; place-items: center;
margin: 0; padding: 24px;
min-height: 280px;
}
.ft-feature__figure img {
position: relative; z-index: 1;
max-width: 100%; width: 320px; height: auto;
object-fit: contain;
filter: drop-shadow(0 24px 28px rgba(11,61,145,.14)) drop-shadow(0 4px 10px rgba(10,17,36,.08));
transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ft-feature__row:hover .ft-feature__figure img { transform: translateY(-4px) scale(1.02); }
@media (min-width: 1200px) {
.ft-feature__figure img { width: 360px; }
}
/* Halo ? yumu?ak renkli disk arka plan */
.ft-feature__halo {
position: absolute; left: 50%; top: 50%;
width: 340px; height: 340px; max-width: 95%; max-height: 95%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(41,98,255,.18), transparent 60%),
radial-gradient(circle at 70% 80%, rgba(41,98,255,.1), transparent 65%),
radial-gradient(circle at 50% 50%, #f3f7ff 40%, #e8f0ff 70%, transparent 90%);
}
.ft-feature__halo::after {
content: ""; position: absolute; inset: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(41,98,255,.12);
}
.ft-feature__halo--accent {
background:
radial-gradient(circle at 30% 30%, rgba(225,38,28,.12), transparent 60%),
radial-gradient(circle at 70% 80%, rgba(41,98,255,.12), transparent 65%),
radial-gradient(circle at 50% 50%, #fff4f3 40%, #ffe8e5 70%, transparent 90%);
}
.ft-feature__halo--accent::after { box-shadow: inset 0 0 0 1px rgba(225,38,28,.14); }
/* Zemin g?lgesi */
.ft-feature__figure::after {
content: ""; position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
width: 60%; height: 18px; border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(10,17,36,.18), transparent 70%);
filter: blur(4px); z-index: 0;
}
/* Copy side */
.ft-feature__copy { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.ft-feature__num {
font-family: var(--ft-display);
font-size: 72px; line-height: 1; font-weight: 700;
background: linear-gradient(135deg, var(--ft-primary), var(--ft-accent));
-webkit-background-clip: text; background-clip: text; color: transparent;
letter-spacing: -2px; opacity: .85;
}
.ft-feature__tag {
align-self: flex-start;
font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
padding: 6px 12px; border-radius: 999px;
color: var(--ft-primary);
background: var(--ft-primary-50);
border: 1px solid rgba(11,61,145,.12);
}
.ft-feature__tag--accent {
color: var(--ft-accent); background: #fff1f0; border-color: rgba(225,38,28,.15);
}
.ft-feature__copy h3 {
margin: 4px 0 6px;
font-size: 28px; line-height: 1.25;
color: var(--ft-ink);
}
.ft-feature__copy p {
margin: 0; color: var(--ft-muted); font-size: 15px; line-height: 1.7;
}
.ft-feature__bullets {
list-style: none; margin: 12px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
}
.ft-feature__bullets li {
display: inline-flex; align-items: flex-start; gap: 10px;
font-size: 14px; color: var(--ft-ink); font-weight: 500;
}
.ft-feature__bullets .ft-icon {
margin-top: 3px; color: #16a34a; flex-shrink: 0;
}
/* Specs */
.ft-feature__specs {
list-style: none; margin: 72px 0 0; padding: 24px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
background: linear-gradient(135deg, var(--ft-bg-soft) 0%, #fff 100%);
border: 1px solid var(--ft-border); border-radius: var(--ft-radius);
box-shadow: var(--ft-shadow-xs);
}
.ft-feature__specs li { display: flex; align-items: center; gap: 14px; }
.ft-feature__specs li + li {
padding-left: 18px; border-left: 1px solid var(--ft-border);
}
.ft-feature__spec-ic {
flex-shrink: 0; width: 44px; height: 44px;
display: inline-grid; place-items: center;
border-radius: 12px;
color: var(--ft-primary);
background: var(--ft-primary-50);
border: 1px solid rgba(11,61,145,.08);
}
.ft-feature__specs strong {
display: block; color: var(--ft-ink);
font-family: var(--ft-display); font-size: 18px; letter-spacing: .2px;
}
.ft-feature__specs em { font-style: normal; color: var(--ft-muted); font-size: 12px; }
/* Responsive */
@media (max-width: 900px) {
.ft-feature { padding: 70px 0; }
.ft-feature__row,
.ft-feature__row--image-right {
grid-template-columns: 1fr;
gap: 28px;
padding: 24px 0;
}
.ft-feature__row--image-right .ft-feature__figure { order: 0; }
.ft-feature__row--image-right .ft-feature__copy { order: 1; }
.ft-feature__figure img { width: 260px; }
.ft-feature__halo { width: 280px; height: 280px; }
.ft-feature__num { font-size: 56px; }
.ft-feature__copy h3 { font-size: 22px; }
.ft-feature__specs { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; }
.ft-feature__specs li + li { border-left: 0; padding-left: 0; }
.ft-feature__specs li:nth-child(n+3) { padding-top: 20px; border-top: 1px solid var(--ft-border); }
}
@media (max-width: 480px) {
.ft-feature__specs { grid-template-columns: 1fr; }
.ft-feature__specs li:nth-child(n+2) { padding-top: 16px; border-top: 1px solid var(--ft-border); }
}
/* ============================================================
ADVANTAGES ? A??k hava filtresi avantajlar?
============================================================ */
.ft-advantages { padding: 80px 0; background: var(--ft-bg-soft); }
.ft-advantages .ft-section__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ft-advantages__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.ft-adv-card {
grid-column: span 2;
position: relative; padding: 28px 24px;
background: #fff; border: 1px solid var(--ft-border);
border-radius: var(--ft-radius);
box-shadow: var(--ft-shadow-xs);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
overflow: hidden;
}
.ft-adv-card::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(41,98,255,.0), rgba(41,98,255,.08));
opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.ft-adv-card:hover { transform: translateY(-4px); box-shadow: var(--ft-shadow); border-color: rgba(41,98,255,.3); }
.ft-adv-card:hover::before { opacity: 1; }
.ft-adv-card__ic {
display: inline-grid; place-items: center;
width: 56px; height: 56px; margin-bottom: 16px;
border-radius: 14px; color: var(--ft-primary);
background: var(--ft-primary-50);
border: 1px solid rgba(11,61,145,.08);
}
.ft-adv-card h3 {
margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ft-ink);
}
.ft-adv-card p { margin: 0; font-size: 14px; color: var(--ft-muted); line-height: 1.6; }
/* Hero card ? b?y?k ?ne ??kan */
.ft-adv-card--hero {
grid-column: span 3;
background: linear-gradient(135deg, var(--ft-primary) 0%, #1a56d6 70%, var(--ft-accent) 200%);
color: #fff; border-color: transparent;
padding: 32px 28px;
box-shadow: 0 20px 50px -20px rgba(11,61,145,.6);
}
.ft-adv-card--hero::before {
background:
radial-gradient(ellipse at top right, rgba(255,255,255,.2), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(225,38,28,.25), transparent 60%);
opacity: 1;
}
.ft-adv-card--hero .ft-adv-card__ic {
background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.2);
}
.ft-adv-card--hero h3 { color: #fff; font-size: 22px; }
.ft-adv-card--hero p { color: rgba(255,255,255,.88); }
.ft-adv-card--hero:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -20px rgba(11,61,145,.7); }
.ft-adv-card__metric {
position: absolute; top: 24px; right: 28px;
font-family: var(--ft-display); font-size: 48px; font-weight: 700;
color: rgba(255,255,255,.18); line-height: 1; letter-spacing: -1px;
}
.ft-adv-card__metric em { font-style: normal; font-size: 24px; }
/* Accent card ? k?rm?z? */
.ft-adv-card--accent {
grid-column: span 3;
background: linear-gradient(135deg, #fff 0%, #fff1f0 100%);
border-color: rgba(225,38,28,.2);
}
.ft-adv-card--accent .ft-adv-card__ic {
background: rgba(225,38,28,.08); color: var(--ft-accent); border-color: rgba(225,38,28,.15);
}
.ft-adv-card--accent:hover { border-color: rgba(225,38,28,.4); }
/* Notice / dikkat edilmesi */
.ft-advantages__notice {
margin-top: 32px; padding: 24px 28px;
display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
background: #0b1328; color: #e8ecf7;
border-radius: var(--ft-radius);
box-shadow: 0 20px 40px -20px rgba(0,0,0,.3);
}
.ft-advantages__notice-head {
display: flex; align-items: center; gap: 12px;
padding-right: 24px; border-right: 1px solid rgba(255,255,255,.1);
}
.ft-advantages__notice-ic {
display: inline-grid; place-items: center;
width: 46px; height: 46px; border-radius: 12px;
color: #f59e0b; background: rgba(245,158,11,.12);
border: 1px solid rgba(245,158,11,.25); flex-shrink: 0;
}
.ft-advantages__notice-head h3 { margin: 0; color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; }
.ft-advantages__notice-list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ft-advantages__notice-list li {
position: relative; padding-left: 22px; font-size: 13px; color: #cfd9f5; line-height: 1.5;
}
.ft-advantages__notice-list li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 10px; height: 10px; border-radius: 50%;
background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
@media (max-width: 1024px) {
.ft-advantages__grid { grid-template-columns: repeat(2, 1fr); }
.ft-adv-card, .ft-adv-card--hero, .ft-adv-card--accent { grid-column: span 1; }
.ft-adv-card--hero { grid-column: span 2; }
}
@media (max-width: 720px) {
.ft-advantages__grid { grid-template-columns: 1fr; }
.ft-adv-card, .ft-adv-card--hero, .ft-adv-card--accent { grid-column: span 1; }
.ft-advantages__notice { grid-template-columns: 1fr; }
.ft-advantages__notice-head { border-right: 0; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ft-advantages__notice-list { grid-template-columns: 1fr; }
.ft-adv-card__metric { font-size: 36px; top: 20px; right: 22px; }
}
/* ============================================================
BUILDER ? "Kendin Olu?tur" 3D konfig?rat?r
============================================================ */
/* Header CTA ? mavi?k?rm?z? gradient, parlak */
.ft-builder-trigger {
position: relative; display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border: 0; cursor: pointer; font-family: inherit;
font-weight: 700; font-size: 13px; letter-spacing: .3px; color: #fff;
background: linear-gradient(135deg, var(--ft-primary) 0%, #1a56d6 50%, var(--ft-accent) 100%);
background-size: 200% 100%; background-position: 0 0;
border-radius: 999px; overflow: hidden; white-space: nowrap;
box-shadow: 0 8px 22px -10px rgba(11,61,145,.55), 0 4px 12px -6px rgba(225,38,28,.35);
transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
}
.ft-builder-trigger:hover { transform: translateY(-1px); background-position: 100% 0;
box-shadow: 0 14px 30px -12px rgba(225,38,28,.55), 0 6px 14px -6px rgba(11,61,145,.45); }
.ft-builder-trigger:active { transform: translateY(0); }
.ft-builder-trigger .ft-icon { color: #fff; }
.ft-builder-trigger__glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120px 40px at var(--x, 50%) 0%, rgba(255,255,255,.35), transparent 60%);
mix-blend-mode: overlay; opacity: 0; transition: opacity .25s ease;
}
.ft-builder-trigger:hover .ft-builder-trigger__glow { opacity: 1; }
.ft-builder-trigger--mobile { width: 100%; justify-content: center; margin-top: 10px; }
@media (max-width: 1280px) {
.ft-builder-trigger span:not(.ft-builder-trigger__glow) { display: none; }
.ft-builder-trigger { padding: 10px 12px; }
}
@media (max-width: 1024px) {
.ft-header__bar .ft-builder-trigger:not(.ft-builder-trigger--mobile) { display: none; }
}
/* Modal shell */
.ft-builder {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center; padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity .3s ease;
}
.ft-builder[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
body.ft-builder-open { overflow: hidden; }
.ft-builder__backdrop {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 0%, rgba(11,61,145,.35), rgba(5,10,25,.88) 60%);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ft-builder__dialog {
position: relative; width: min(1200px, 100%);
max-height: calc(100vh - 48px);
background: #0b1328; color: #e8ecf7;
border-radius: 24px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 40px 100px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
transform: translateY(20px) scale(.98);
transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.ft-builder[aria-hidden="false"] .ft-builder__dialog { transform: translateY(0) scale(1); }
/* Head */
.ft-builder__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 22px 26px; border-bottom: 1px solid rgba(255,255,255,.07);
background: linear-gradient(180deg, rgba(11,61,145,.25), transparent);
}
.ft-builder__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: #8ea7ff;
}
.ft-builder__pulse {
width: 8px; height: 8px; border-radius: 50%; background: #2962ff;
box-shadow: 0 0 0 0 rgba(41,98,255,.6);
animation: ft-builder-pulse 1.6s ease-out infinite;
}
@keyframes ft-builder-pulse {
0% { box-shadow: 0 0 0 0 rgba(41,98,255,.6); }
100% { box-shadow: 0 0 0 14px rgba(41,98,255,0); }
}
.ft-builder__head h2 { color: #fff; font-size: 24px; margin: 6px 0 4px; letter-spacing: .3px; }
.ft-builder__head p { margin: 0; color: #9fb0d4; font-size: 13px; }
.ft-builder__close {
width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04); color: #e8ecf7; cursor: pointer;
display: inline-grid; place-items: center; transition: all .2s ease; flex-shrink: 0;
}
.ft-builder__close:hover { background: rgba(225,38,28,.2); border-color: rgba(225,38,28,.5); color: #fff; }
/* Body layout */
.ft-builder__body {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 0; min-height: 0; overflow: hidden; flex: 1;
}
/* Stage (3D) */
.ft-builder__stage {
position: relative; min-height: 420px;
background:
radial-gradient(70% 60% at 50% 40%, rgba(41,98,255,.25), transparent 70%),
radial-gradient(60% 50% at 50% 100%, rgba(225,38,28,.08), transparent 70%),
linear-gradient(180deg, #0a1026, #060a1a);
border-right: 1px solid rgba(255,255,255,.06);
overflow: hidden;
}
.ft-builder__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
opacity: .6;
}
.ft-builder__glow {
position: absolute; left: 50%; top: 55%;
width: 70%; height: 40%; transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center, rgba(41,98,255,.35), transparent 70%);
filter: blur(40px); pointer-events: none;
}
.ft-builder__canvas {
position: relative; z-index: 1;
width: 100% !important; height: 100% !important; display: block;
touch-action: none; cursor: grab;
}
.ft-builder__canvas:active { cursor: grabbing; }
.ft-builder__hint {
position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 8px; z-index: 2;
padding: 7px 12px; border-radius: 999px; font-size: 12px; color: #b7c5e8;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ft-builder__hint svg { opacity: .7; }
.ft-builder__dims { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ft-builder__dim {
position: absolute; font-variant-numeric: tabular-nums; font-weight: 700;
font-size: 11px; color: #cfd9f5; letter-spacing: .3px;
padding: 3px 8px; border-radius: 999px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ft-builder__dim--h { top: 50%; right: 16px; transform: translateY(-50%); }
.ft-builder__dim--b { bottom: 46px; left: 50%; transform: translateX(-50%); }
.ft-builder__dim--i { top: 16px; left: 50%; transform: translateX(-50%); }
.ft-builder__loading {
position: absolute; inset: 0; display: grid; place-content: center; gap: 12px;
justify-items: center; z-index: 5; color: #b7c5e8; font-size: 13px;
background: rgba(6,10,26,.7); backdrop-filter: blur(4px);
transition: opacity .3s ease;
}
.ft-builder__loading[hidden] { display: none; }
.ft-builder__spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid rgba(255,255,255,.1); border-top-color: #2962ff;
animation: ft-builder-spin 1s linear infinite;
}
@keyframes ft-builder-spin { to { transform: rotate(360deg); } }
/* Form */
.ft-builder__form {
display: flex; flex-direction: column; min-height: 0;
overflow-y: auto; padding: 22px 26px 0;
}
.ft-builder__form::-webkit-scrollbar { width: 8px; }
.ft-builder__form::-webkit-scrollbar-track { background: transparent; }
.ft-builder__form::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.ft-builder__section { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ft-builder__section:last-of-type { border-bottom: 0; }
.ft-builder__section h3 {
margin: 0 0 10px; color: #fff; font-size: 13px; font-weight: 700;
letter-spacing: .5px; text-transform: uppercase;
}
/* Chips */
.ft-builder__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-builder__chip { position: relative; cursor: pointer; user-select: none; }
.ft-builder__chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ft-builder__chip span {
display: inline-flex; align-items: center; justify-content: center;
padding: 9px 14px; font-size: 13px; font-weight: 600; color: #cfd9f5;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; transition: all .18s ease;
}
.ft-builder__chip:hover span { background: rgba(255,255,255,.09); color: #fff; }
.ft-builder__chip input:checked + span {
background: linear-gradient(135deg, rgba(41,98,255,.25), rgba(225,38,28,.18));
border-color: rgba(41,98,255,.6); color: #fff;
box-shadow: 0 0 0 1px rgba(41,98,255,.3), 0 8px 24px -10px rgba(41,98,255,.6);
}
.ft-builder__chip input:focus-visible + span { outline: 2px solid #2962ff; outline-offset: 2px; }
/* Field / slider */
.ft-builder__row { display: grid; gap: 14px; }
.ft-builder__row--split { grid-template-columns: 1fr auto; align-items: end; }
.ft-builder__field { display: flex; flex-direction: column; gap: 8px; }
.ft-builder__label {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
font-size: 12px; font-weight: 600; color: #b7c5e8; letter-spacing: .3px;
}
.ft-builder__label em { font-style: normal; color: #7b8cb8; font-size: 11px; }
.ft-builder__slider { display: flex; align-items: center; gap: 12px; }
.ft-builder__slider input[type="range"] {
flex: 1; appearance: none; -webkit-appearance: none;
height: 6px; border-radius: 999px; outline: none;
background: linear-gradient(90deg, #2962ff var(--p,50%), rgba(255,255,255,.1) var(--p,50%));
cursor: pointer;
}
.ft-builder__slider input[type="range"]::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; border-radius: 50%; cursor: grab;
background: #fff; border: 3px solid #2962ff;
box-shadow: 0 4px 12px rgba(41,98,255,.5);
transition: transform .15s ease;
}
.ft-builder__slider input[type="range"]::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%; cursor: grab;
background: #fff; border: 3px solid #2962ff;
box-shadow: 0 4px 12px rgba(41,98,255,.5);
}
.ft-builder__slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.ft-builder__slider output {
min-width: 46px; text-align: center; font-variant-numeric: tabular-nums;
font-weight: 700; color: #fff; font-size: 14px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 8px; padding: 6px 8px;
}
/* Colors */
.ft-builder__colors { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-builder__color { position: relative; cursor: pointer; }
.ft-builder__color input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ft-builder__color::before {
content: ""; display: block; width: 34px; height: 34px; border-radius: 50%;
background: var(--c); border: 2px solid rgba(255,255,255,.15);
transition: transform .15s ease, box-shadow .2s ease;
}
.ft-builder__color:hover::before { transform: scale(1.08); }
.ft-builder__color input:checked ~ ::before,
.ft-builder__color:has(input:checked)::before {
border-color: #fff;
box-shadow: 0 0 0 3px var(--c), 0 8px 20px -6px rgba(0,0,0,.5);
}
/* Qty */
.ft-builder__qty {
display: inline-flex; align-items: stretch;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; overflow: hidden;
}
.ft-builder__qty button {
width: 38px; border: 0; background: transparent; color: #fff; cursor: pointer;
font-size: 18px; font-weight: 700; transition: background .15s ease;
}
.ft-builder__qty button:hover { background: rgba(41,98,255,.25); }
.ft-builder__qty input {
width: 48px; border: 0; background: transparent; color: #fff;
text-align: center; font-size: 14px; font-weight: 700; outline: none;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.ft-builder__qty input::-webkit-outer-spin-button,
.ft-builder__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Footer */
.ft-builder__foot {
position: sticky; bottom: 0; margin: 16px -26px 0; padding: 18px 26px;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
background: linear-gradient(180deg, rgba(11,19,40,0) 0%, rgba(11,19,40,.92) 35%, #0b1328 100%);
border-top: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.ft-builder__price { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ft-builder__price-label { font-size: 10.5px; color: #8ea7ff; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
.ft-builder__price-val { font-family: var(--ft-display); font-size: 30px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.ft-builder__price-hint { font-size: 11px; color: #7b8cb8; }
.ft-builder__actions { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ft-builder__actions .ft-btn { padding: 12px 18px; font-size: 13px; }
/* "?uanl?k Mevcut De?il" ? coming soon butonu */
.ft-builder__unavail {
position: relative;
display: inline-flex; align-items: center; gap: 12px;
padding: 12px 20px 12px 16px; min-height: 54px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(41,98,255,.14) 0%, rgba(255,255,255,.04) 60%, rgba(225,38,28,.10) 100%);
color: #e8ecf7;
font-family: inherit; font-size: 13px; text-align: left;
cursor: not-allowed; user-select: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 8px 22px -12px rgba(41,98,255,.35);
transition: transform .2s ease, border-color .2s ease, background .3s ease;
overflow: hidden;
}
.ft-builder__unavail::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
transform: translateX(-100%);
animation: ft-builder-shimmer 3.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes ft-builder-shimmer {
0%, 40% { transform: translateX(-100%); }
60%, 100% { transform: translateX(120%); }
}
.ft-builder__unavail:hover {
border-color: rgba(255,255,255,.22);
background:
linear-gradient(135deg, rgba(41,98,255,.22) 0%, rgba(255,255,255,.06) 60%, rgba(225,38,28,.16) 100%);
}
.ft-builder__unavail:active { transform: scale(.99); }
.ft-builder__unavail-dot {
flex-shrink: 0;
width: 12px; height: 12px; border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 0 0 rgba(245,158,11,.6), 0 0 14px rgba(245,158,11,.55);
animation: ft-builder-soon-pulse 1.8s ease-out infinite;
}
@keyframes ft-builder-soon-pulse {
0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55), 0 0 14px rgba(245,158,11,.55); }
70% { box-shadow: 0 0 0 10px rgba(245,158,11,0), 0 0 14px rgba(245,158,11,.55); }
100% { box-shadow: 0 0 0 0 rgba(245,158,11,0), 0 0 14px rgba(245,158,11,.55); }
}
.ft-builder__unavail-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.ft-builder__unavail-txt strong {
color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .2px;
}
.ft-builder__unavail-txt em {
color: #9fb0d4; font-size: 11.5px; font-style: normal; font-weight: 500;
}
/* Ba?l?k ?nde?i: "Yak?nda" rozeti */
.ft-builder__soon-pill {
display: inline-flex; align-items: center;
margin-left: 6px; padding: 3px 9px;
font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px;
text-transform: uppercase;
color: #0b1328;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border-radius: 999px;
box-shadow: 0 4px 12px -4px rgba(245,158,11,.55);
}
/* Toast notice */
.ft-builder__toast {
position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%);
padding: 12px 18px; border-radius: 999px; z-index: 300;
background: #0b3d91; color: #fff; font-size: 13px; font-weight: 600;
box-shadow: 0 14px 40px -10px rgba(0,0,0,.5);
transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.ft-builder__toast.is-visible { transform: translate(-50%, 0); }
.ft-builder__toast--success { background: #15803d; }
.ft-builder__toast--error { background: #b31a12; }
.ft-builder__toast--info {
background: linear-gradient(135deg, #1e3a8a 0%, #0b3d91 50%, #78350f 100%);
border: 1px solid rgba(255,255,255,.15);
}
/* Responsive */
@media (max-width: 900px) {
.ft-builder { padding: 0; }
.ft-builder__dialog { border-radius: 0; max-height: 100vh; height: 100vh; width: 100%; }
.ft-builder__body { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
.ft-builder__stage { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); min-height: 0; }
.ft-builder__head h2 { font-size: 20px; }
.ft-builder__row--split { grid-template-columns: 1fr; }
.ft-builder__foot { flex-direction: column; align-items: stretch; gap: 14px; }
.ft-builder__actions { justify-content: stretch; width: 100%; }
.ft-builder__actions .ft-btn { flex: 1; }
.ft-builder__unavail { width: 100%; justify-content: flex-start; }
}
/* ============================================================
FOOTER ? ?st marka ?erit ?izgileri (logo gradyan renkleri)
============================================================ */
.ft-footer-stripes {
display: block;
width: 100%;
line-height: 0;
font-size: 0;
background: #0a0f1e;
}
.ft-footer-stripes__line {
display: block;
width: 100%;
height: 18px;
}
.ft-footer-stripes__line--1 {
background: linear-gradient(90deg, #1e5fd1 0%, #2b74e0 50%, #1e5fd1 100%);
}
.ft-footer-stripes__line--2 {
background: linear-gradient(90deg, #8a3d9c 0%, #b7449c 50%, #8a3d9c 100%);
margin-top: 6px;
}
.ft-footer-stripes__line--3 {
background: linear-gradient(90deg, #e1453c 0%, #f05a52 50%, #e1453c 100%);
margin-top: 6px;
}
@media (max-width: 640px) {
.ft-footer-stripes__line { height: 14px; }
.ft-footer-stripes__line--2,
.ft-footer-stripes__line--3 { margin-top: 4px; }
}
/* ============================================================
KARBON F?BER ? ana sayfa dekoratif arkaplan efektleri
============================================================ */
.ft-carbon-bg {
position: relative;
background-color: #0f1420;
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1.2px, transparent 1.6px),
linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
linear-gradient(135deg, #141a2b 0%, #0b1020 100%);
background-size: 22px 22px, 8px 8px, 8px 8px, auto;
background-position: 0 0, 0 0, 4px 4px, 0 0;
}
.ft-carbon-bg::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(800px 400px at 10% 0%, rgba(11,61,145,.25), transparent 60%),
radial-gradient(700px 360px at 95% 100%, rgba(225,69,60,.18), transparent 60%);
pointer-events: none;
z-index: 0;
}
.ft-carbon-bg > * { position: relative; z-index: 1; }
.ft-carbon-bg,
.ft-carbon-bg h2,
.ft-carbon-bg h3,
.ft-carbon-bg p { color: #e8edfa; }
.ft-carbon-bg .ft-section__head h2 { color: #fff; }
.ft-carbon-bg .ft-section__head p { color: #9fb0d4; }
/* A??k tonlu karbon ? beyaz zemin ?st?nde hafif doku */
.ft-carbon-soft {
position: relative;
background-color: #f5f7fb;
background-image:
radial-gradient(circle at 1px 1px, rgba(11,30,70,.05) 1px, transparent 1.4px),
linear-gradient(45deg, rgba(11,30,70,.02) 25%, transparent 25%, transparent 75%, rgba(11,30,70,.02) 75%),
linear-gradient(45deg, rgba(11,30,70,.02) 25%, transparent 25%, transparent 75%, rgba(11,30,70,.02) 75%);
background-size: 22px 22px, 8px 8px, 8px 8px;
background-position: 0 0, 0 0, 4px 4px;
}
.ft-carbon-soft::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(600px 300px at 0% 0%, rgba(11,61,145,.08), transparent 60%),
radial-gradient(500px 260px at 100% 100%, rgba(225,69,60,.06), transparent 60%);
pointer-events: none;
z-index: 0;
}
.ft-carbon-soft > * { position: relative; z-index: 1; }
/* Ana sayfa b?l?mlerine karbon efektini uygula */
.ft-feature,
.ft-advantages {
position: relative;
background-color: #f5f7fb;
background-image:
radial-gradient(circle at 1px 1px, rgba(11,30,70,.05) 1px, transparent 1.4px),
linear-gradient(45deg, rgba(11,30,70,.025) 25%, transparent 25%, transparent 75%, rgba(11,30,70,.025) 75%),
linear-gradient(45deg, rgba(11,30,70,.025) 25%, transparent 25%, transparent 75%, rgba(11,30,70,.025) 75%);
background-size: 22px 22px, 8px 8px, 8px 8px;
background-position: 0 0, 0 0, 4px 4px;
}
.ft-feature::before,
.ft-advantages::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(700px 360px at 0% 0%, rgba(11,61,145,.07), transparent 60%),
radial-gradient(600px 320px at 100% 100%, rgba(225,69,60,.05), transparent 60%);
pointer-events: none;
z-index: 0;
}
.ft-feature > *,
.ft-advantages > * { position: relative; z-index: 1; }
/* Karanl?k b?l?mlerde karbon fiber doku overlay'i (mevcut gradyan? bozmadan) */
.ft-howit::after,
.ft-cta::after {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1.2px, transparent 1.6px),
linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
linear-gradient(-45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.15) 75%);
background-size: 22px 22px, 8px 8px, 8px 8px;
background-position: 0 0, 0 0, 4px 4px;
mix-blend-mode: overlay;
opacity: .8;
pointer-events: none;
z-index: 0;
}
.ft-howit { position: relative; overflow: hidden; }
.ft-cta { overflow: hidden; }
.ft-howit > *,
.ft-cta > * { position: relative; z-index: 1; }
/* ============================================================
FOOTER ?ST? PROMO ? M??teri Deneyimi + Sat?n Al
============================================================ */
.ft-promo {
position: relative;
color: #fff;
padding: 80px 0;
background: #0a0f1a;
overflow: hidden;
isolation: isolate;
}
.ft-promo__bg {
position: absolute; inset: 0;
background-image:
linear-gradient(180deg, rgba(10,15,26,.82) 0%, rgba(10,15,26,.72) 50%, rgba(10,15,26,.90) 100%),
url("../images/cta-cars.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
}
.ft-promo__bg::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(800px 400px at 15% 20%, rgba(30,95,209,.18), transparent 60%),
radial-gradient(700px 360px at 85% 85%, rgba(225,69,60,.14), transparent 60%);
pointer-events: none;
}
.ft-promo__grid {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
.ft-promo__item + .ft-promo__item { position: relative; }
.ft-promo__item + .ft-promo__item::before {
content: "";
position: absolute;
left: -36px; top: 6px; bottom: 6px;
width: 1px;
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.18) 75%, transparent 100%);
}
.ft-promo__title {
margin: 0 0 18px;
font-family: var(--ft-display);
font-weight: 800;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.1;
letter-spacing: .5px;
color: #fff;
text-transform: uppercase;
}
.ft-promo__text {
margin: 0 0 20px;
font-size: 15px;
line-height: 1.75;
color: rgba(255,255,255,.82);
max-width: 56ch;
}
.ft-promo__cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
border-radius: 12px;
font-weight: 700;
letter-spacing: .3px;
color: #fff;
background: linear-gradient(135deg, #e1453c 0%, #c73029 100%);
box-shadow:
0 12px 28px -10px rgba(225,69,60,.55),
0 4px 12px -4px rgba(225,69,60,.35);
transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
margin-top: 6px;
}
.ft-promo__cta:hover {
transform: translateY(-1px);
filter: brightness(1.05);
color: #fff;
box-shadow:
0 16px 34px -10px rgba(225,69,60,.65),
0 6px 16px -4px rgba(225,69,60,.45);
}
.ft-promo__cta svg { transition: transform .2s ease; }
.ft-promo__cta:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
.ft-promo { padding: 56px 0; }
.ft-promo__grid { grid-template-columns: 1fr; gap: 40px; }
.ft-promo__item + .ft-promo__item::before {
left: 0; top: -20px;
right: 0; bottom: auto;
width: auto; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.18) 75%, transparent 100%);
}
.ft-promo__title { font-size: 28px; }
.ft-promo__text { font-size: 14px; line-height: 1.7; }
}
/* ============================================================
INSTAGRAM ? Bizi Takip Edin (ana sayfa)
============================================================ */
.ft-ig {
padding: 72px 0 84px;
background: #fff;
position: relative;
}
.ft-ig__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid var(--ft-border);
flex-wrap: wrap;
}
.ft-ig__title {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
font-family: var(--ft-display);
font-weight: 800;
font-size: clamp(18px, 2vw, 22px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ft-ink);
}
.ft-ig__icon {
color: var(--ft-primary);
flex-shrink: 0;
}
.ft-ig__handle {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 14px;
color: var(--ft-primary);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--ft-border);
transition: all .2s ease;
}
.ft-ig__handle:hover {
background: var(--ft-primary);
color: #fff;
border-color: var(--ft-primary);
transform: translateY(-1px);
}
.ft-ig__handle svg { transition: transform .2s ease; }
.ft-ig__handle:hover svg { transform: translateX(3px); }
.ft-ig__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.ft-ig__item {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 10px;
background: #0a0f1e;
isolation: isolate;
}
.ft-ig__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease, filter .3s ease;
}
.ft-ig__overlay {
position: absolute; inset: 0;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(252, 175, 69, .55) 0%, rgba(247, 89, 64, .55) 25%, rgba(215, 32, 137, .55) 50%, rgba(136, 56, 217, .55) 75%, rgba(81, 91, 212, .55) 100%);
color: #fff;
opacity: 0;
transition: opacity .3s ease;
z-index: 1;
}
.ft-ig__item:hover img {
transform: scale(1.08);
filter: brightness(.85);
}
.ft-ig__item:hover .ft-ig__overlay,
.ft-ig__item:focus-visible .ft-ig__overlay { opacity: 1; }
@media (max-width: 900px) {
.ft-ig { padding: 56px 0 64px; }
.ft-ig__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 560px) {
.ft-ig__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ft-ig__title { font-size: 16px; letter-spacing: 1px; }
}